/* ══════════════════════════════════════════════════════════════════════════
   USTAAD'S OWN DESIGN SYSTEM, inside the Help wing.

   Read from the live repository (Ustaad, claude/ustaad-founding-xe6k69 @
   1ed4125): src/design/tokens.css and src/design/primitives.tsx — one of
   exactly two design-system files there, and the only file under src/ where
   raw hex and px are legal. That law is kept here.

   §1 THE PALETTE IS THE ICON. Ruled 2026-08-10/11 and locked: the उ letterform
   on navy #162244, a cream mark, one orange accent. The app does not choose a
   palette — it INHERITS THE ICON'S, so the installed square and the first
   screen are recognisably one thing on a home screen full of other apps.

   ONE ACCENT WITH A NAMED JOB: the single primary act on a screen, and nothing
   else. "The moment a second thing is orange, neither is the act."

   THE FLOOR IS 17px, above the 15px its siblings settled on, and the reason is
   the reader: a craftsman reads this between clients, one-handed, on a cheap
   screen, often with working hands. The touch floor is 52px for the same
   reason. Four sizes, two weights, ONE radius, four space steps — a second
   radius is a decision, not a slip.

   SCOPED to `.w-ustaad`.
   ══════════════════════════════════════════════════════════════════════════ */
.w-ustaad {
  --d-navy: #162244;
  --d-navy-soft: #263457;
  --d-cream: #f4ecd8;
  --d-cream-deep: #e7dcc2;
  --d-page: #ffffff;
  --d-ink: #14171d;
  --d-ink-soft: #5d6472;
  --d-rule: #e2e0da;
  --d-orange: #e07a1f;
  --d-orange-deep: #b85f11;
  --d-orange-on: #ffffff;
  --d-radius: 14px;
  --d-radius-pill: 999px;
  --d-gap-tight: 6px; --d-gap: 12px; --d-gap-wide: 20px; --d-gap-section: 32px;
  --u-sans: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --d-size-title: 30px; --d-size-entry: 22px; --d-size-body: 19px; --d-size-small: 17px;
  --d-weight-normal: 400; --d-weight-strong: 700; --d-line: 1.5;

  /* the semantic layer — the only names its src/ may use */
  --c-page: var(--d-page); --c-ink: var(--d-ink); --c-ink-soft: var(--d-ink-soft);
  --c-rule: var(--d-rule);
  --c-ground: var(--d-navy); --c-ground-soft: var(--d-navy-soft);
  --c-on-ground: var(--d-cream); --c-on-ground-soft: var(--d-cream-deep);
  --c-act: var(--d-orange); --c-act-deep: var(--d-orange-deep); --c-on-act: var(--d-orange-on);
  --radius: var(--d-radius); --radius-pill: var(--d-radius-pill);
  --gap-tight: var(--d-gap-tight); --gap: var(--d-gap);
  --gap-wide: var(--d-gap-wide); --gap-section: var(--d-gap-section);
  --size-title: var(--d-size-title); --size-entry: var(--d-size-entry);
  --size-body: var(--d-size-body); --size-small: var(--d-size-small);
  --weight-normal: var(--d-weight-normal); --weight-strong: var(--d-weight-strong);
  --line: var(--d-line);
  /* TOUCH FLOOR: a craftsman with wet or working hands, on a cheap phone, in
     thirty seconds. Nothing tappable is smaller than this. */
  --tap: 52px;

  background: var(--c-page); color: var(--c-ink);
  font-family: var(--u-sans); font-size: var(--size-body);
  font-weight: var(--weight-normal); line-height: var(--line);
  padding: var(--gap-wide);
  display: flex; flex-direction: column; gap: var(--gap-wide);
}
/* THE SHELL IS THE SCROLL CONTAINER, SO NOTHING IN HERE MAY SHRINK.
   Ustaad's own root is a page that scrolls; here it is `#body`, which the shell
   gives a fixed height. A flex column inside a fixed height shrinks its
   children — `flex-shrink` is 1 by default — so every block on every Ustaad
   screen was squashed to a fraction of its content and the content spilled
   out the bottom of its own box: a person card one line tall with three lines
   inside it, and a button whose label ran out under the next control. Found by
   looking at the directory at phone width. Gated in wing-design.js check 10. */
.w-ustaad > * { flex: none; }
.w-ustaad * { box-sizing: border-box; }
.w-ustaad button, .w-ustaad input, .w-ustaad select, .w-ustaad textarea {
  font-family: var(--u-sans); font-size: var(--size-body); color: var(--c-ink); }
/* A visible focus ring, because a cheap Android keyboard and an assistive
   switch are both real ways in and neither shows a hover state. */
.w-ustaad :focus-visible { outline: 3px solid var(--c-act); outline-offset: 2px; }

.w-ustaad .stack { display: flex; flex-direction: column; gap: var(--gap); }
.w-ustaad .stack-wide { display: flex; flex-direction: column; gap: var(--gap-wide); }
.w-ustaad .row { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }

/* THE NAVY BLOCK — the craftsman's own identity and nothing else. It is the
   one place the app looks like its icon. */
.w-ustaad .ground { background: var(--c-ground); color: var(--c-on-ground);
  border-radius: var(--radius); padding: var(--gap-wide);
  display: flex; flex-direction: column; gap: var(--gap-tight); }
.w-ustaad .ucard { background: var(--c-page); border: 1px solid var(--c-rule);
  border-radius: var(--radius); padding: var(--gap-wide);
  display: flex; flex-direction: column; gap: var(--gap-tight); }
.w-ustaad .ucard.tap { width: 100%; text-align: left; cursor: pointer; min-height: var(--tap); }

.w-ustaad .title { margin: 0; font-size: var(--size-title); font-weight: var(--weight-strong); line-height: var(--line); }
.w-ustaad .heading { margin: 0; font-size: var(--size-entry); font-weight: var(--weight-strong); line-height: var(--line); }
.w-ustaad .body { margin: 0; font-size: var(--size-body); line-height: var(--line); }
.w-ustaad .soft { margin: 0; font-size: var(--size-small); color: var(--c-ink-soft); line-height: var(--line); }

/* THE ONE ACT on a screen. Orange has exactly this job. A screen with two of
   these has no primary act, which for a reader skimming in thirty seconds is
   the same as having none. */
.w-ustaad .act { min-height: var(--tap); background: var(--c-act); color: var(--c-on-act);
  border: none; border-radius: var(--radius); font-family: var(--u-sans);
  font-size: var(--size-entry); font-weight: var(--weight-strong);
  padding: var(--gap) var(--gap-wide); cursor: pointer; }
.w-ustaad .act.busy { opacity: .6; pointer-events: none; }
/* Every other control. Named after what it does, never "OK" or "Submit" — a
   button that does not name its act is a button a barely-literate reader
   cannot risk pressing. */
.w-ustaad .quiet { min-height: var(--tap); background: none; color: var(--c-ink);
  border: 1px solid var(--c-rule); border-radius: var(--radius);
  font-size: var(--size-small); font-weight: var(--weight-strong);
  padding: var(--gap) var(--gap-wide); cursor: pointer; }

.w-ustaad .fact { display: flex; flex-direction: column; gap: var(--gap-tight); }
.w-ustaad .fact .l { font-size: var(--size-small); color: var(--c-ink-soft); }
.w-ustaad .fact .v { font-size: var(--size-entry); font-weight: var(--weight-strong); }
/* A PLAIN, UNRANKED LABEL — "New here". Cream on navy-soft, NEVER orange: a
   label is not an act, and never a badge of merit. */
.w-ustaad .plainly { background: var(--c-ground-soft); color: var(--c-on-ground-soft);
  border-radius: var(--radius-pill); padding: var(--gap-tight) var(--gap);
  font-size: var(--size-small); display: inline-block; }

.w-ustaad .ufield { display: flex; flex-direction: column; gap: var(--gap-tight); }
.w-ustaad .ufield > span { font-size: var(--size-small); color: var(--c-ink-soft); }
.w-ustaad .ufield input, .w-ustaad .ufield select, .w-ustaad .ufield textarea {
  min-height: var(--tap); border: 1px solid var(--c-rule); border-radius: var(--radius);
  padding: var(--gap); background: var(--c-page); width: 100%; }
.w-ustaad .problem { border: 1px solid var(--c-act); border-radius: var(--radius);
  padding: var(--gap); font-size: var(--size-small); }
.w-ustaad .rulerow { border-top: 1px solid var(--c-rule); padding-top: var(--gap); }