/* lang: nema's tokens (brand/tokens.css), one quiet surface. Colour marks state, never decoration. */
* { box-sizing: border-box }
html { color-scheme: dark }
body { margin: 0; background: var(--navy); color: var(--ink); font: var(--fs-16)/var(--lh-body) var(--font-ui); -webkit-font-smoothing: antialiased }
main { max-width: 880px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8) }
.narrow main { max-width: 440px; padding-top: var(--sp-7) }
h1 { font: 600 var(--fs-24)/var(--lh-tight) var(--font-ui); margin: var(--sp-6) 0 var(--sp-4); text-wrap: balance }
h2 { font: 600 var(--fs-12)/1 var(--font-ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-label); margin: var(--sp-7) 0 var(--sp-3) }
p { margin: 0 0 var(--sp-3) }
code { font: var(--fs-13) var(--font-mono); color: var(--sky) }
a { color: var(--blue-ink); text-decoration-color: var(--blue-40); text-underline-offset: 3px }
.muted { color: var(--ink-2); font-size: var(--fs-14) }
.error { color: var(--danger) }

.brand { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap }
.brand .word { font: 400 var(--fs-32)/1 var(--font-display); color: var(--ink) }
.tabs { margin-left: auto; display: flex; gap: var(--sp-1); background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--r-round); padding: 3px }
.tabs button { background: none; color: var(--ink-2); border: 0; border-radius: var(--r-round); padding: 6px var(--sp-4); font: inherit; font-size: var(--fs-14); cursor: pointer; min-height: 36px }
.tabs button[aria-selected="true"] { background: var(--navy-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line) }

.card { background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4) }
label { display: block; font-size: var(--fs-13); color: var(--ink-2); margin-bottom: var(--sp-2) }
input { width: 100%; background: var(--navy); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px var(--sp-3); font: inherit; min-height: 44px }
button { background: var(--cyan); color: var(--navy); border: 0; border-radius: var(--r-2); padding: 10px var(--sp-4); font: 600 var(--fs-14) var(--font-ui); cursor: pointer; min-height: 44px }
button.quiet { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line) }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px }
form.card > * + * { margin-top: var(--sp-3) }
.row { display: flex; gap: var(--sp-2); flex-wrap: wrap }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-5) }
.stat { background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4) }
.stat b { display: block; font: 600 var(--fs-32)/1.1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--c, var(--ink)) }
.stat span { font-size: var(--fs-13); color: var(--ink-2) }
.facts { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--ink-2) }
.facts strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr) } }

.needs { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2) }
.needs li { background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-1) }
.kind { font: 600 var(--fs-11)/1 var(--font-ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c) }
.items { font-size: var(--fs-24); line-height: 1.4; display: flex; flex-wrap: wrap; gap: 0 var(--sp-3) }
.items[lang="ar"] { font-size: var(--fs-32); direction: rtl; justify-content: flex-end }
.why { font-size: var(--fs-14); color: var(--ink-2) }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); margin-top: var(--sp-3) }
th { text-align: left; font-weight: 500; color: var(--ink-2); padding: var(--sp-2); border-bottom: 1px solid var(--line) }
td { padding: var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top }
td.item { font-size: var(--fs-20); white-space: nowrap }
.pill { display: inline-block; font-size: var(--fs-12); line-height: 1; padding: 4px 8px; border-radius: var(--r-round); color: var(--fg); background: var(--bg); margin: 0 4px 4px 0; white-space: nowrap }
.b-durable { --fg: var(--band-durable-ink); --bg: var(--band-durable-bg); --c: var(--band-durable) }
.b-usable { --fg: var(--band-usable-ink); --bg: var(--band-usable-bg); --c: var(--band-usable) }
.b-fragile { --fg: var(--band-fragile-ink); --bg: var(--band-fragile-bg); --c: var(--band-fragile-ink) }
.b-uncertain { --fg: var(--band-uncertain-ink); --bg: var(--band-uncertain-bg); --c: var(--band-uncertain) }
.b-unknown { --fg: var(--band-unknown-ink); --bg: var(--band-unknown-bg); --c: var(--ink-2) }
.k-repair { --c: var(--danger) } .k-discriminate { --c: var(--yellow) } .k-produce { --c: var(--teal) } .k-transfer { --c: var(--sky) }

.study { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.study li { display: flex; align-items: center; gap: var(--sp-2); background: var(--navy-2); border: 1px solid var(--line); border-radius: var(--r-round); padding: 2px 4px 2px var(--sp-3) }
.study li span { font-size: var(--fs-20) }
.study li small { color: var(--ink-2); font-size: var(--fs-12) }
.study button { background: none; color: var(--ink-2); min-height: 32px; min-width: 32px; padding: 0; font-size: var(--fs-16) }
.connect dt { font-weight: 600; margin-top: var(--sp-3) }
.connect dd { margin: var(--sp-1) 0 0; color: var(--ink-2); font-size: var(--fs-14) }
.url { display: flex; gap: var(--sp-2) } .url input { font-family: var(--font-mono); font-size: var(--fs-14) }