/* hoop.css — the ONE stylesheet of Hoop OS. Every app page links this file and carries zero inline styles: tokens, components and per-app sections all live here, so a visual change is a change in one place. Layout uses CSS LOGICAL properties throughout (inline-start/end, not left/right): that is what lets ar (RTL) flip the whole OS by flipping alone. ═══ THE PAGE CODEX (V0.1.7 ② — law, not style) ═══════════════════════════════ Every page declares ONE of three templates before it is built. No page may invent a fourth structure. T1 DOCUMENT single 42rem column: h1.app + .lede + N × (.sect + .card); inside cards only .kv/.opts/.row/.feed/form pieces. (settings, vpn, memory, files, calendar, finance today) T2 WORKBENCH sidebar + main working area, fixed header, 46rem reading column, ≤900px the sidebar becomes a drawer. (chat, terminal, mail ④) T3 IMMERSIVE a full-screen stage, ≤5 elements on it. (home / logged-out door) Codex articles: spacing only from the --sp-* scale; type only from the --fs-* scale (roles documented at the token block); ALL pictographs from icons.js — emoji are content, never interface; buttons ≤4 chars zh / ≤2 words en, long explanations go to .note; zh copy uses full-width punctuation, en half-width. ═══ CODEX ARTICLE 4 — THREE VOICES + THE WORDMARK (V0.2.0 ①) ═══════════════ Serif = soul · Sans = body · Mono = machine. The body of the OS is Sans (--font-ui); Serif (--font-brand) is CLAIMED by role, never inherited; Mono (--mono) is for what a machine said. Serif ≤ 10–20% of any screen. The true HoopGram mark alone uses Marcellus (--font-wordmark): a seal, not a fourth content voice. Inline mentions of the name remain in their surrounding voice. ROLE TABLE (the only places Serif may appear): actual HoopGram wordmark ..................... Marcellus Regular (.brand) the hoop sutra ............................... Serif Regular (#hbrand) hero lines: home / public card / apex ........ Serif Regular, big, airy (.p-home) page title h1.app (T1), chat greeting .hi .... Serif Regular the PA's reply body, mail reading, the reader, researcher reports .rpt ...................... Serif Regular — the second voice (.m.pa, .mw-body, .rd-col, .rpt) Everything else — nav, tabs, buttons, inputs, labels, captions, .sect, forms, card titles h3/h4, the OWNER's own messages — is Sans Regular/Medium(500). Numbers, money, timestamps, .tbl, addresses, hostnames, status, .steps — Mono or Sans tabular-nums. WEIGHT LAW: hierarchy = size + space + face + Regular/Medium, never a stair of bolds. 500 is the heaviest UI weight (buttons, small headings, active items); Serif headings are never bold; the only 600 is inline in prose. ═══ CODEX ARTICLE 5 — THE MATERIALS (V0.1.8 ②) ═════════════════════════════ One grammar for every control, so they are visibly the work of one hand: PAPER inputs, .btn-secondary, .chip, .opt, #cwrap: --surface + a half-strength line (--line-soft) + --shadow-1 — lifted 1mm off the page, never boxed. Focus = the --focus glow only; the border never thickens. KEY .btn-primary (and #send): brand fill + --shadow-key (a 1px inner highlight on top, a 1px inner shade below) — the ONLY place that pair is written. Pressing = 1px down (translateY) + shadow gone. Hover = brightness +3%, never a new colour. GHOST .btn-ghost, .hbtn, .cbtn, menu rows: nothing until hover (--lift). TONAL .btn-tonal: --surface-2 fill, no line. DANGER: ghost red, red lift. LINES --line is translucent ink (8% of --fg), so it melts into any theme; dividers are 1px var(--line) everywhere — never 2px, never a hex. --line-2 (16%) is the rail/track strength (blockquotes, switch track). CARDS fill + 1px line, never fill + line + shadow. SHADOW two rungs only: --shadow-1 (paper) and --shadow-pop (floating layers); plus the two non-depth tokens --shadow-key (key material) and --focus. grep box-shadow → tokens only. SHAPE (②b, owner's eye 2026-08-20 evening: "more curve, Apple's hand") standalone buttons, chips and options are CAPSULES (--r-pill); inputs --r-in 14px; cards --r-xl 24px; the composer, menus and sheets --r-2xl 28px; every icon button is a CIRCLE. Heights two rungs: --btn-h 34px, --btn-h-sm 28px. Sidebars share the page's --bg with at most a 1px --line at the edge. GLASS (②b) floating layers — menus, modals, the palette, the capture, floats, the mobile dock, toasts — are .glass: --glass-bg + backdrop blur + the specular rim --glass-rim (light on top, a hair of shade below). Depth is rim + blur, never a border. prefers-reduced-transparency → solid. VOLUME (②b) --shadow-key now carries the key's own glow beneath it; --shadow-1 carries a top-edge highlight, so paper reads as a slab, not a fill. ═══ CODEX ARTICLE 6 — THE NARROW LAW & THE PICK (V0.1.8 ⑥) ═══════════════════ Born of three phone screenshots: a 15,883px settings page (two elements shared an id), a VPN table wider than the screen, a mail pane that stacked sideways. IDS an id belongs to the script that targets it; anchors and groups use data-* attributes, never a second id. tools/lint-shell.mjs refuses a page with a duplicate id (update.sh runs it before every build). WIDTH nothing is wider than its container. Tables and 
 scroll INSIDE their
           own box (.tblw / .card pre / .p-vpn table); flex children carry min-width:0;
           ≤600px every form row is single-column and every input takes the row.
   CHOICE  ≤3 options with no hints may sit inline as .opt chips. Four or more, or
           any option that needs a hint, is a .pick: one row — label · current value
           · › — that opens the options as a .menu on desktop and as a bottom .sheet
           on a phone (HoopUI.pick). Never a wall of chips.
   POSTURE HoopUI.menu is the ONE popover; ≤720px it rises as a sheet by itself.
   AUDIT   after every deploy, the mobile audit (HANDOFF) loads every page in a 430px
           frame and reports any scrollWidth > viewport. Zero is the only pass.

   ═══ CODEX ARTICLE 7 — ONE DOOR, NO FLOOR (V0.1.9 ①②, owner's five screenshots) ═
   ONE DOOR   a setting or action has ONE landing place; everything else is an
              entrance to it. Settings = the settings surface (modal ≥900 / sheet on a
              phone / the page for deep links); the owner menu, the dock gear and every
              /settings link only open it. Never a second copy of a control.
   NO FLOOR   floating layers own no strip of page: the composer, the hoop button, the
              menus and sheets hover over content that flows beneath them (glass + blur).
              On a phone there is NO bottom bar: one hoop button → the App sheet.
   INPUTS     ≤720px every text input is 16px (iOS zooms the page on anything smaller);
              the chat frame follows the visual viewport (--vvh) so the composer rides
              on top of the keyboard.
   DENY       features of platforms (projects, libraries, plans, voice modes) are not
              organs of a Hoop. Ten apps, the dock, ⌘K — that is the whole body.

   ═══ CODEX ARTICLE 8 — LAYERS (V0.1.9 ④, the sheet that would not close) ═══════
   Every floating thing — menu, sheet, modal, palette, capture — is a LAYER on the one
   stack in hoop-ui.js (HoopUI.layerOpen). The stack owns the ways out: Esc and the
   phone's back gesture close the top layer; a scrim closes on CLICK, never on
   pointerdown (the tap that closes must be absorbed, or it lands on what was beneath
   — closing 语言 opened 主题); a scrimless popover closes on an outside press and
   swallows the click that follows; every sheet carries a × and a grabber; leaving a
   page goes through HoopUI.go(href), which unwinds the layers first. Pages never
   write their own pointerdown-to-close (tools/lint-shell.mjs forbids it outside
   hoop-ui.js / nav.js); tools/mobile-audit.js taps every scrim for real and expects
   zero layers afterwards.

   ═══ CODEX ARTICLE 9 — THE TOP BAR (V0.1.9 ⑤, the owner's phone) ═══════════════
   One bar on every page, one grammar: LEFT is where I came from (← on an app page,
   the sidebar toggle on chat), CENTRE the page's name (shown only once its own h1 has
   scrolled away — nothing is said twice), RIGHT at most two page actions as ghost
   circles. Glass, no floor: content flows beneath it. nav.js draws it (#hooptop) on
   every page but chat, where chat.html's own header wears the same class (.topbar).
   Also art. 6 tightened: a value with a finite set of choices is ALWAYS a .pick —
   long sets get a search box (timezone), never a text field with a save key.

   ═══ CODEX ARTICLE 10 — THE WINDOW CHROME (V0.2.3 C1, "a computer, not a website") ═
   Every window and every App page wears ONE .win-chrome, drawn by hoop-ui.js
   (windows) and nav.js (pages) — no App draws its own close, zoom or minimize.
   Three 12px lights, 8px apart, on the PHYSICAL LEFT in every locale, RTL included:
   this is the codex's single sanctioned non-logical position (macOS keeps them
   there in Arabic; muscle memory beats mirroring). Close = the layer stack's close;
   zoom = the page route ↔ the window; minimize = a capsule in the dock tray
   (#dock-tray) that restores on click. ≥900px up to four free windows (z-order by
   focus, drag by the title, resize at the end-bottom corner, positions kept per App
   in localStorage — interface state, never the owner's config); <900px one window;
   ≤800px the page; ≤720px the lights fold to a single × (art. 9's top bar).
   The lock screen (T3) owns the one display-size rung: --fs-display.

   ═══ CODEX ARTICLE 11 — ONE MATERIAL SOURCE (V0.2.4) ═══════════════════════
   Navigation surfaces — top bars, menu bars, dock sheets, drawers and window
   chrome — receive .bar-glass. That class is the single definition of their
   translucent material and lower hairline; pages and scripts may only attach it.
   A navigation selector must never paint background:var(--surface) for itself.

   ═══ CODEX ARTICLE 12 — ONE LANGUAGE, ONE TEXT (V0.2.4) ═════════════════════
   Public copy shows exactly the current HoopI18n language. Slogans, engravings
   and buttons have idiomatic zh-CN / en / ar strings; no English fallback is
   displayed beside a translation and no two language versions share a view.

   ═══ THE COMPONENT CONTRACT (V0.1.4) ══════════════════════════════════════════
   Pages may ONLY build UI from these pieces — never restyle them, never invent new
   one-off variants. If a page needs something new, it gets added HERE first.

   tokens     type scale --fs-*, space scale --sp-*, radius scale --r-*, shadows,
              colors: --brand/--brand-ink/--on-brand (amber), --accent (blue),
              --bg/--surface/--surface-2/--fg/--dim/--line/--lift/--ok/--bad/--warn.
              Rule: components reference tokens only; no magic hex, no magic px.
              Brand amber & blue are ACCENTS — never large filled areas.
   .btn       buttons. Variants: .btn-primary (amber CTA, max one per view),
              .btn-tonal (soft fill), .btn-secondary (outline), .btn-ghost (quiet),
              .btn-danger (outline red). Size: .btn-sm. Never style