/* مسیری نو — design-system components (public/ds/components.css)
 *
 * Every visual primitive a ported surface draws, named after the v31 sheet
 * DS-2 «کامپوننت‌ها و حالت‌ها» with the class prefix ds-, and its DS-3 states.
 * The catalogue, with variants, states, knobs and where each one is used, is
 * docs/claude/COMPONENTS.md; that file opens with the cascade rule, which in
 * one line is: a ds- class is styled here and nowhere else.
 *
 * Rules for this file (the ratchet in scripts/ds-contract.mjs holds the first):
 *   · only .ds-* selectors (and their descendants and states) — no element,
 *     id or bare attribute rule, so linking it on a page that draws no ds-
 *     element changes nothing on that page;
 *   · no raw colour: every paint is a token from /ds/tokens.css, and a
 *     translucent one is color-mix() of a token;
 *   · logical properties only (inline/block), because every page is RTL;
 *   · a knob is a custom property the component declares and reads
 *     (--ds-btn-h …). A page may set a documented knob with its own class on
 *     the component's element; it never names a ds- class in a selector.
 */

/* ── Button · IconButton ──────────────────────────────────────────────────
 * DS-2 §1. Heights 52 / 44 / 36 (the 36 keeps a 44 touch area); control
 * radius; one gradient CTA per screen. Everything a page may tune is a knob:
 * size (--ds-btn-h, --ds-btn-px, --ds-btn-fs, --ds-btn-fw, --ds-btn-r, --ds-btn-gap)
 * and paint (--ds-btn-bg, --ds-btn-ink, --ds-btn-border, --ds-btn-shadow). A
 * variant is nothing but a set of knobs, so a page that needs the dark «ورود»
 * on a phone and the outlined one on a desktop sets knobs, never properties. */
.ds-btn {
  --ds-btn-h: 44px;
  --ds-btn-px: 20px;
  --ds-btn-fs: var(--fs-ui);
  --ds-btn-fw: 700;
  --ds-btn-r: var(--radius-control);
  --ds-btn-gap: 6px;
  --ds-btn-bg: var(--surface);
  --ds-btn-ink: var(--ink);
  --ds-btn-border: 0 solid transparent;
  --ds-btn-shadow: none;
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-btn-gap);
  min-block-size: var(--ds-btn-h);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--ds-btn-px);
  border: var(--ds-btn-border);
  border-radius: var(--ds-btn-r);
  background: var(--ds-btn-bg);
  color: var(--ds-btn-ink);
  box-shadow: var(--ds-btn-shadow);
  font: inherit;
  font-size: var(--ds-btn-fs);
  font-weight: var(--ds-btn-fw);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.ds-btn:active { transform: scale(.98); }
.ds-btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.ds-btn > svg { flex: 0 0 auto; }
.ds-btn--sm { --ds-btn-h: 36px; --ds-btn-px: 12px; --ds-btn-fs: var(--fs-small); --ds-btn-r: var(--radius-tile); }
/* A 36px button still answers a 44px finger. */
.ds-btn--sm::before { content: ""; position: absolute; inset-inline: 0; inset-block: -4px; }
.ds-btn--lg { --ds-btn-h: 52px; --ds-btn-fs: var(--fs-body); }
.ds-btn--xl { --ds-btn-h: 56px; --ds-btn-fs: var(--fs-body); --ds-btn-fw: 750; --ds-btn-r: var(--radius-field); }
.ds-btn--2xl { --ds-btn-h: 62px; --ds-btn-px: 30px; --ds-btn-fs: var(--fs-h3); --ds-btn-fw: 750; --ds-btn-r: var(--radius-field); --ds-btn-gap: 10px; }
.ds-btn--block { display: flex; inline-size: 100%; }

/* Primary — the gradient CTA. The ink is --cta-ink: no white word on orange. */
.ds-btn--primary { --ds-btn-bg: var(--grad-cta); --ds-btn-ink: var(--cta-ink); --ds-btn-shadow: var(--shadow-cta); }
.ds-btn--primary:hover { --ds-btn-bg: var(--grad-cta-hover); --ds-btn-shadow: var(--shadow-cta-hover); transform: translateY(-1px); }
.ds-btn--primary:active { --ds-btn-bg: var(--grad-cta-active); --ds-btn-shadow: none; transform: scale(.98); }
/* Solid orange — the landing's smaller action on an ink or white ground. */
.ds-btn--orange { --ds-btn-bg: var(--orange); --ds-btn-ink: var(--cta-ink); }
.ds-btn--orange:hover { --ds-btn-bg: var(--orange-hover); }
/* Dark — the important second action, and the action inside cards. */
.ds-btn--dark { --ds-btn-bg: var(--ink); --ds-btn-ink: var(--on-dark); }
.ds-btn--dark:hover { --ds-btn-bg: var(--ink-strong); }
/* Secondary — outline. */
.ds-btn--secondary { --ds-btn-bg: var(--surface); --ds-btn-border: 1.5px solid var(--line); }
.ds-btn--secondary:hover { --ds-btn-bg: var(--ground-2); --ds-btn-border: 1.5px solid var(--orange-3); }
/* Quiet — an outline on the page ground (the header's «ورود», «دوستت رو خبر کن»). */
.ds-btn--quiet { --ds-btn-bg: transparent; --ds-btn-border: 1px solid var(--line); }
.ds-btn--quiet:hover { --ds-btn-bg: var(--surface); --ds-btn-border: 1px solid var(--orange-2); }
/* Ghost — a quiet action on a light ground. */
.ds-btn--ghost { --ds-btn-bg: var(--surface-2); }
.ds-btn--ghost:hover { --ds-btn-bg: var(--surface-3); }
/* Soft — a warm outline on the page ground. */
.ds-btn--soft { --ds-btn-bg: transparent; --ds-btn-ink: var(--action); --ds-btn-border: 1.5px solid var(--orange-line); }
.ds-btn--soft:hover { --ds-btn-bg: var(--ground-2); --ds-btn-border: 1.5px solid var(--orange-2); }
/* Link — words, not a box. */
.ds-btn--link { --ds-btn-px: 4px; --ds-btn-bg: transparent; --ds-btn-ink: var(--action); }
.ds-btn--link:hover { --ds-btn-ink: var(--action-hover); text-decoration: underline; text-underline-offset: .2em; }
/* Danger — fill only inside a confirmation; text form elsewhere. */
.ds-btn--danger { --ds-btn-bg: var(--danger); --ds-btn-ink: var(--on-dark); }
.ds-btn--danger:hover { --ds-btn-bg: var(--danger-strong); }
.ds-btn--danger-text { --ds-btn-bg: transparent; --ds-btn-ink: var(--danger); }
.ds-btn--danger-text:hover { --ds-btn-bg: var(--danger-tint); }
/* On a dark card. */
.ds-btn--on-dark { --ds-btn-bg: var(--surface); --ds-btn-ink: var(--ink); }
.ds-btn--on-dark:hover { --ds-btn-bg: var(--ground-2); }
.ds-btn--on-dark-quiet { --ds-btn-bg: color-mix(in srgb, var(--on-dark) 8%, transparent); --ds-btn-ink: var(--on-dark); --ds-btn-border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent); }
.ds-btn--on-dark-quiet:hover { --ds-btn-bg: color-mix(in srgb, var(--on-dark) 14%, transparent); }
/* Disabled: never only by colour — the dashed edge says it too. Works for the
   real attribute and for aria-disabled, which keeps the control focusable. */
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  --ds-btn-bg: var(--surface-3);
  --ds-btn-ink: var(--disabled-ink);
  --ds-btn-border: 1.5px dashed var(--line-strong);
  --ds-btn-shadow: none;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}
/* Busy: the label stays, a spinner joins it (DS-2 «در حال کار»). */
.ds-btn[aria-busy="true"] { cursor: progress; }
/* A shared base that styles every <button> in a state — the sign-in shell's
   `button:hover:not(:disabled)` and `button:active:not(:disabled)` (0,2,1), on
   /login/ and every /panel/ page — outranks a single ds class there. The
   components re-assert their own paint in those states, from their knobs, so
   hovering a ds button never shows the shell's gradient. */
.ds-btn:hover:not(:disabled), .ds-btn:active:not(:disabled) { background: var(--ds-btn-bg); color: var(--ds-btn-ink); box-shadow: var(--ds-btn-shadow); }
.ds-segmented__item:hover:not(:disabled), .ds-segmented__item:active:not(:disabled) { background: var(--ds-seg-bg); box-shadow: var(--ds-seg-shadow); }
.ds-spinner {
  display: inline-block;
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-block-start-color: currentColor;
  animation: ds-spin .9s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* IconButton: 44×44, aria-label required (the markup's job). Knobs:
   --ds-icon-size, --ds-icon-r, --ds-icon-bg, --ds-icon-ink, --ds-icon-border. */
.ds-icon-btn {
  --ds-icon-size: 44px;
  --ds-icon-r: var(--radius-control);
  --ds-icon-bg: var(--surface);
  --ds-icon-ink: var(--ink);
  --ds-icon-border: 1px solid var(--line-warm);
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ds-icon-size);
  block-size: var(--ds-icon-size);
  flex: 0 0 var(--ds-icon-size);
  margin: 0;
  padding: 0;
  border: var(--ds-icon-border);
  border-radius: var(--ds-icon-r);
  background: var(--ds-icon-bg);
  color: var(--ds-icon-ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-instant);
}
.ds-icon-btn:hover { --ds-icon-bg: var(--ground-2); --ds-icon-border: 1px solid var(--orange-3); }
.ds-icon-btn:active { transform: scale(.96); }
.ds-icon-btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.ds-icon-btn > svg { flex: 0 0 auto; }
.ds-icon-btn--plain { --ds-icon-bg: transparent; --ds-icon-border: 1px solid var(--line); }
.ds-icon-btn--round { --ds-icon-r: 50%; --ds-icon-border: 0 solid transparent; box-shadow: inset 0 0 0 2px var(--orange-line); }
.ds-icon-btn--primary { --ds-icon-bg: var(--orange); --ds-icon-ink: var(--cta-ink); --ds-icon-border: 0 solid transparent; }
.ds-icon-btn--primary:hover { --ds-icon-bg: var(--orange-hover); --ds-icon-border: 0 solid transparent; }
.ds-icon-btn--muted { --ds-icon-bg: var(--surface-2); --ds-icon-border: 1.5px solid var(--line); }
.ds-icon-btn--glass { --ds-icon-bg: color-mix(in srgb, var(--surface) 94%, transparent); --ds-icon-border: 0 solid transparent; }
.ds-icon-btn__badge {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -4px;
  box-sizing: border-box;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 4px;
  border-radius: 12px;
  border: 2px solid var(--ground);
  background: var(--danger);
  color: var(--on-dark);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── TextField · NumericField · SearchField · Textarea ─────────────────────
 * DS-2 §2. Input type is 16px (no iOS zoom); an error is border + ground +
 * icon + words, never colour alone. */
.ds-field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.ds-field__label { font-size: var(--fs-ui); font-weight: 700; line-height: 1.7; color: var(--ink); }
.ds-field__req { color: var(--danger); }
.ds-field__help { font-size: var(--fs-micro); line-height: 1.7; color: var(--muted); }
.ds-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.7; color: var(--danger); }
.ds-field__error > svg { flex: 0 0 auto; margin-block-start: 3px; }
/* TextField. Knobs: --ds-input-h (48px), --ds-input-px, --ds-input-bw and
   --ds-input-edge (the border's width and colour at rest), --ds-input-fs,
   --ds-input-fw, --ds-input-ls. */
.ds-input {
  --ds-input-h: 48px;
  --ds-input-px: 14px;
  --ds-input-bw: 1.5px;
  --ds-input-edge: var(--line);
  --ds-input-fs: var(--fs-input);
  --ds-input-fw: var(--w-regular);
  --ds-input-ls: normal;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--ds-input-h);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--ds-input-px);
  border: var(--ds-input-bw) solid var(--ds-input-edge);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--ds-input-fs);
  font-weight: var(--ds-input-fw);
  letter-spacing: var(--ds-input-ls);
  line-height: 1.5;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ds-input::placeholder { color: var(--muted-on-white); opacity: 1; }
.ds-input:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.ds-input:focus-visible { outline: none; }
.ds-input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-tint); }
.ds-input:disabled { border-style: dashed; border-color: var(--line-strong); background: var(--surface-3); color: var(--muted-on-white); }
.ds-input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.ds-input--textarea { --ds-input-h: 74px; padding-block: 12px; line-height: 1.85; resize: vertical; }
.ds-input--tel { --ds-input-ls: 0; direction: ltr; text-align: start; }

/* SearchField: an icon, the field, and an optional clear or submit. Knobs:
   --ds-search-h (52px), --ds-search-r, --ds-search-border. */
.ds-search {
  --ds-search-h: 52px;
  --ds-search-r: var(--radius-field);
  --ds-search-border: 1.5px solid var(--line);
  --ds-search-gap: 8px;
  --ds-search-pad: 0 14px 0 4px;
  --ds-search-fs: var(--fs-input);
  --ds-search-shadow: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--ds-search-gap);
  min-inline-size: 0;
  block-size: var(--ds-search-h);
  margin: 0;
  padding: var(--ds-search-pad);
  border: var(--ds-search-border);
  border-radius: var(--ds-search-r);
  background: var(--surface);
  box-shadow: var(--ds-search-shadow);
  color: var(--muted-on-white);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ds-search:focus-within { border-color: var(--ink); box-shadow: var(--ring); }
.ds-search > svg { flex: 0 0 auto; }
.ds-search__input {
  flex: 1 1 0;
  min-inline-size: 0;
  /* An <input> is twenty characters wide before any CSS, and that width counts
     in the min-content of every box above it: at 320px it pushed the landing's
     column 17px past the edge (test/home-hub.test.mjs). */
  inline-size: 0;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--ds-search-fs);
}
.ds-search__input::placeholder { color: var(--muted-on-white); opacity: 1; }
.ds-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ds-search__count { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--muted); }
.ds-search__go {
  --ds-search-go: 44px;
  --ds-search-go-r: var(--radius-tile);
  flex: 0 0 var(--ds-search-go);
  inline-size: var(--ds-search-go);
  block-size: var(--ds-search-go);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ds-search-go-r);
  background: var(--orange);
  color: var(--cta-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast), transform var(--dur-instant);
}
.ds-search__go:hover { background: var(--orange-hover); }
.ds-search__go:active { transform: scale(.96); }
.ds-search__go:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.ds-search__clear {
  flex: 0 0 32px;
  inline-size: 32px;
  block-size: 32px;
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--surface-3);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ds-search__clear::before { content: ""; position: absolute; inline-size: 44px; block-size: 44px; }

/* ── ChoiceChip ────────────────────────────────────────────────────────────
 * DS-2 §3. Selected is dark with white words, never orange. 42 tall (a small
 * one is 36 with a 44 touch area). Selection is read from aria-pressed,
 * aria-checked, aria-selected or aria-current — whichever the control is.
 * Knobs: --ds-chip-h, --ds-chip-px, --ds-chip-fs, --ds-chip-fw, --ds-chip-r,
 * --ds-chip-bg, --ds-chip-ink, --ds-chip-border. */
.ds-chip {
  --ds-chip-h: 42px;
  --ds-chip-px: 14px;
  --ds-chip-fs: var(--fs-small);
  --ds-chip-fw: 600;
  --ds-chip-r: var(--radius-tile);
  --ds-chip-bg: var(--surface);
  --ds-chip-ink: var(--ink);
  --ds-chip-border: 1.5px solid var(--line);
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: var(--ds-chip-h);
  margin: 0;
  padding-block: 0;
  padding-inline: var(--ds-chip-px);
  border: var(--ds-chip-border);
  border-radius: var(--ds-chip-r);
  background: var(--ds-chip-bg);
  color: var(--ds-chip-ink);
  font: inherit;
  font-size: var(--ds-chip-fs);
  font-weight: var(--ds-chip-fw);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-instant), border-color var(--dur-instant), transform var(--dur-instant);
}
.ds-chip:hover { --ds-chip-bg: var(--ground-2); --ds-chip-border: 1.5px solid var(--orange-3); }
.ds-chip:active { transform: scale(.97); }
.ds-chip:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.ds-chip[aria-pressed="true"], .ds-chip[aria-checked="true"], .ds-chip[aria-selected="true"], .ds-chip[aria-current="true"], .ds-chip[aria-current="page"] {
  --ds-chip-bg: var(--ink);
  --ds-chip-ink: var(--on-dark);
  --ds-chip-border: 1.5px solid var(--ink);
}
.ds-chip:disabled, .ds-chip[aria-disabled="true"] { --ds-chip-bg: var(--surface-2); --ds-chip-ink: var(--muted-on-white); --ds-chip-border: 1.5px dashed var(--line-strong); cursor: not-allowed; }
.ds-chip--sm { --ds-chip-h: 36px; --ds-chip-px: 12px; }
.ds-chip--sm::before { content: ""; position: absolute; inset-inline: 0; inset-block: -4px; }
/* A route chip on the landing: a pill on the warm ground (Main, Mobile). */
.ds-chip--pill {
  --ds-chip-h: 44px;
  --ds-chip-px: 12px;
  --ds-chip-fw: 700;
  --ds-chip-r: var(--radius-pill);
  --ds-chip-bg: var(--ground-2);
  --ds-chip-border: 1px solid var(--orange-line);
}
.ds-chip--pill:hover { --ds-chip-bg: var(--surface); --ds-chip-border: 1px solid var(--orange-2); }
/* A pick in a row of options: gray until chosen, then dark (the share studio's secrets). */
.ds-chip--plain { --ds-chip-bg: var(--surface-2); --ds-chip-border: 1px solid var(--line); --ds-chip-fw: 700; }
/* A pick whose chosen state is the brand fill (the share studio's six networks). */
.ds-chip--brand[aria-pressed="true"], .ds-chip--brand[aria-checked="true"] { --ds-chip-bg: var(--orange); --ds-chip-ink: var(--cta-ink); --ds-chip-border: 0 solid transparent; --ds-chip-fw: 750; }
.ds-chip > svg { flex: 0 0 auto; }

/* ── Checkbox · RadioCard · Switch ─────────────────────────────────────── */
.ds-check {
  --ds-check-size: 24px;
  --ds-check-r: var(--radius-tag);
  --ds-check-edge: var(--line-strong);
  --ds-check-gap: 10px;
  --ds-check-fs: var(--fs-small);
  --ds-check-lh: 1.85;
  --ds-check-pad: 10px;
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ds-check-gap);
  min-block-size: 44px;
  padding-block: var(--ds-check-pad);
  font-size: var(--ds-check-fs);
  line-height: var(--ds-check-lh);
  cursor: pointer;
}
.ds-check__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; }
.ds-check__box {
  box-sizing: border-box;
  flex: 0 0 var(--ds-check-size);
  inline-size: var(--ds-check-size);
  block-size: var(--ds-check-size);
  border: 2px solid var(--ds-check-edge);
  border-radius: var(--ds-check-r);
  background: var(--surface);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-instant), border-color var(--dur-instant);
}
.ds-check__box > svg { opacity: 0; }
.ds-check__input:checked + .ds-check__box { border-color: var(--ink); background: var(--ink); }
.ds-check__input:checked + .ds-check__box > svg { opacity: 1; }
.ds-check__input:focus-visible + .ds-check__box { outline: var(--focus-ring); outline-offset: 3px; }
.ds-radio-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 58px;
  padding-block: 10px;
  padding-inline: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--surface);
  cursor: pointer;
  transition: transform var(--dur-instant), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ds-radio-card:active { transform: scale(.98); }
.ds-radio-card__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; }
.ds-radio-card__mark {
  box-sizing: border-box;
  flex: 0 0 24px;
  inline-size: 24px;
  block-size: 24px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-radio-card__label { flex: 1 1 0; font-size: var(--fs-body-lg); font-weight: 700; }
.ds-radio-card:has(.ds-radio-card__input:checked) { border: 2px solid var(--ink); box-shadow: 0 10px 20px -16px color-mix(in srgb, var(--ink) 80%, transparent); }
.ds-radio-card__input:checked + .ds-radio-card__mark { border: 0; background: var(--ink); }
.ds-radio-card:has(.ds-radio-card__input:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; }
.ds-switch {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 48px;
  inline-size: 48px;
  block-size: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color var(--dur-fast);
}
.ds-switch::before { content: ""; position: absolute; inset-inline: -2px; inset-block: -8px; }
.ds-switch::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--ink-strong) 20%, transparent);
  transition: inset-inline-start var(--dur-fast) var(--ease-out);
}
/* On: green, the handle moves to the inline end (left, in RTL). */
.ds-switch[aria-checked="true"] { background: var(--green); }
.ds-switch[aria-checked="true"]::after { inset-inline-start: 23px; }
.ds-switch:disabled, .ds-switch[aria-disabled="true"] { background: var(--line); opacity: .5; cursor: not-allowed; }
.ds-switch:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* ── Tabs (underlined) · Segmented ─────────────────────────────────────── */
.ds-tabs { display: flex; gap: 2px; border-block-end: 1px solid var(--line-warm); overflow-x: auto; scrollbar-width: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  margin: 0;
  padding-block: 0;
  padding-inline: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.ds-tab:hover { color: var(--ink); }
.ds-tab:focus-visible { outline: var(--focus-ring); outline-offset: -3px; border-radius: var(--radius-tile); }
.ds-tab[aria-selected="true"], .ds-tab[aria-current="page"], .ds-tab[aria-current="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--orange); }
.ds-tab__count {
  box-sizing: border-box;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 6px;
  border-radius: 12px;
  background: var(--line-warm);
  color: var(--ink-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-tab[aria-selected="true"] .ds-tab__count, .ds-tab[aria-current="page"] .ds-tab__count { background: var(--ink); color: var(--on-dark); }
.ds-segmented { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--line-warm) 80%, transparent); }
.ds-segmented__item {
  --ds-seg-bg: transparent;
  --ds-seg-shadow: none;
  /* DS-2 and ten boards draw an unselected item at 600; App-1-Home and App-D-Home at 500 —
     their page sets it on the item. */
  --ds-seg-fw: 600;
  box-sizing: border-box;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-block-size: 40px;
  margin: 0;
  padding-block: 0;
  padding-inline: 8px;
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--ds-seg-bg);
  box-shadow: var(--ds-seg-shadow);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--ds-seg-fw);
  text-decoration: none;
  cursor: pointer;
}
.ds-segmented__item[aria-selected="true"], .ds-segmented__item[aria-pressed="true"], .ds-segmented__item[aria-current="page"] {
  --ds-seg-bg: var(--surface);
  --ds-seg-shadow: 0 6px 14px -10px color-mix(in srgb, var(--ink) 60%, transparent);
  color: var(--ink);
  font-weight: 700;
}
.ds-segmented__item:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ── ProgressSegments ──────────────────────────────────────────────────── */
.ds-progress { --ds-progress-h: 6px; --ds-progress-r: 3px; display: flex; gap: 4px; inline-size: 100%; }
.ds-progress__seg { flex: 1 1 0; block-size: var(--ds-progress-h); border-radius: var(--ds-progress-r); background: var(--ground-tint); }
.ds-progress__seg.is-done { background: var(--orange); }
.ds-progress__seg.is-now { background: linear-gradient(90deg, var(--orange-3), var(--orange)); }

/* ── Tag · SourceChip ──────────────────────────────────────────────────────
 * DS-2 §4. A static label, 24 tall, tag radius, seven tones. Not clickable —
 * a thing that is pressed is a ChoiceChip. The SourceChip beside a number is
 * a Tag with a fixed tone per source (counted → ok, estimate → warn, census →
 * neutral, booklet → info, awaiting → off, from locals → hot). Knobs:
 * --ds-tag-h, --ds-tag-px, --ds-tag-r and --ds-tag-bw (the verified mark under
 * a counsellor's answer is 20 tall with no edge — App-1-Home). */
.ds-tag {
  --ds-tag-h: 24px;
  --ds-tag-px: 8px;
  --ds-tag-r: var(--radius-tag);
  --ds-tag-bw: 1px;
  /* The neutral tag's ink: --ink-2, as DS-2's Tag draws it (and the stage, chat and tool boards);
     the App-* and Couns-* boards draw it in --muted (7.2:1 on --surface-2) — their page sets it
     on the tag. The tones below keep their own ink. */
  --ds-tag-ink: var(--ink-2);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: var(--ds-tag-h);
  padding-inline: var(--ds-tag-px);
  border: var(--ds-tag-bw) solid var(--line);
  border-radius: var(--ds-tag-r);
  background: var(--surface-2);
  color: var(--ds-tag-ink);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.ds-tag--dark { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.ds-tag--warn { border-color: var(--warn-line); background: var(--warn-tint); color: var(--warn-ink); }
.ds-tag--ok { border-color: var(--green-line); background: var(--green-tint); color: var(--green-ink); }
.ds-tag--info { border-color: var(--info-line); background: var(--info-tint); color: var(--info-ink); }
.ds-tag--hot { border-color: var(--orange-line); background: var(--orange-tint); color: var(--action); }
.ds-tag--off { border-style: dashed; border-color: var(--line-strong); background: var(--surface-3); color: var(--muted); }
.ds-tag--wrap { white-space: normal; padding-block: 2px; }

/* ── Badge · Monogram · Portrait ─────────────────────────────────────────── */
.ds-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 6px;
  border-radius: 12px;
  background: var(--danger);
  color: var(--on-dark);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
}
.ds-badge--calm { background: var(--line-warm); color: var(--ink-2); padding-inline: 8px; }
.ds-dot { --ds-dot-size: 8px; display: inline-block; inline-size: var(--ds-dot-size); block-size: var(--ds-dot-size); border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--surface); }
.ds-dot--live { background: var(--green); box-shadow: none; animation: ds-live 1.6s ease-out infinite; }
/* The same green, still: for a surface where nothing may move for ever (the
   signed-in home, docs/PANEL_DESIGN.md §۱۰٫۴). */
.ds-dot--on { background: var(--green); box-shadow: none; }
@keyframes ds-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 0%, transparent); } }
.ds-monogram {
  box-sizing: border-box;
  flex: 0 0 40px;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--ground-tint);
  color: var(--ink);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* A monogram inside the gradient ring (the landing's question cards; the home's
   answers at 28px on the ground). Knobs: --ds-mono-size, --ds-mono-fill, --ds-mono-fs. */
.ds-monogram--ring {
  --ds-mono-size: 32px;
  --ds-mono-fill: var(--surface);
  --ds-mono-fs: var(--fs-small);
  flex-basis: var(--ds-mono-size);
  inline-size: var(--ds-mono-size);
  block-size: var(--ds-mono-size);
  padding: 2px;
  background: var(--grad-cta);
}
.ds-monogram--ring > span { inline-size: 100%; block-size: 100%; border-radius: 50%; background: var(--ds-mono-fill); font-size: var(--ds-mono-fs); display: flex; align-items: center; justify-content: center; }
.ds-portrait { position: relative; display: block; flex: 0 0 48px; inline-size: 48px; block-size: 48px; }
.ds-portrait__img { position: absolute; inset: 0; border-radius: var(--radius-control); overflow: hidden; box-shadow: 0 0 0 2px var(--surface), 0 12px 22px -12px color-mix(in srgb, var(--ink) 60%, transparent); }
.ds-portrait__img > img, .ds-portrait__img > svg { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ds-portrait__mark { position: absolute; inset-block-end: -4px; inset-inline-end: -4px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px -4px color-mix(in srgb, var(--ink) 45%, transparent); }

/* ── Card · DarkCard · StatTile · ListRow · Fold · SummaryTable ─────────────
 * DS-2 §5. A card inside a card only for a DataCard inside a message. Knobs:
 * --ds-card-pad, --ds-card-r, --ds-card-gap, --ds-card-bg, --ds-card-ink,
 * --ds-card-border, --ds-card-shadow, and --ds-card-dir / --ds-card-align /
 * --ds-card-justify for a card that lays its contents in a row. A variant is a
 * set of knobs. */
.ds-card {
  --ds-card-dir: column;
  --ds-card-align: stretch;
  --ds-card-justify: flex-start;
  --ds-card-pad: 14px;
  --ds-card-r: var(--radius-card);
  --ds-card-gap: 12px;
  --ds-card-bg: var(--glass-bg);
  --ds-card-ink: var(--ink);
  --ds-card-border: 1px solid var(--glass-line);
  --ds-card-shadow: var(--shadow-glass);
  --ds-card-blur: var(--glass-filter);
  box-sizing: border-box;
  display: flex;
  flex-direction: var(--ds-card-dir);
  align-items: var(--ds-card-align);
  justify-content: var(--ds-card-justify);
  gap: var(--ds-card-gap);
  min-inline-size: 0;
  margin: 0;
  padding: var(--ds-card-pad);
  border: var(--ds-card-border);
  border-radius: var(--ds-card-r);
  background: var(--ds-card-bg);
  -webkit-backdrop-filter: var(--ds-card-blur);
  backdrop-filter: var(--ds-card-blur);
  box-shadow: var(--ds-card-shadow);
  color: var(--ds-card-ink);
}
.ds-card--solid { --ds-card-bg: var(--surface); --ds-card-border: 1.5px solid var(--line-warm); --ds-card-shadow: none; --ds-card-blur: none; }
.ds-card--raised { --ds-card-bg: var(--surface); --ds-card-border: 1px solid var(--line-warm); --ds-card-shadow: var(--shadow-float); --ds-card-blur: none; }
/* The one dark card a page may carry. */
.ds-card--dark {
  --ds-card-bg: var(--grad-dark);
  --ds-card-ink: var(--on-dark);
  --ds-card-border: 0 solid transparent;
  --ds-card-shadow: none;
  --ds-card-blur: none;
}
.ds-card--glass-dark {
  --ds-card-bg: var(--glass-dark-bg);
  --ds-card-ink: var(--on-dark);
  --ds-card-border: 1px solid var(--glass-dark-line);
  --ds-card-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-dark) 12%, transparent), 0 24px 44px -26px color-mix(in srgb, var(--ink) 80%, transparent);
  --ds-card-blur: blur(18px);
}
.ds-card--ink { --ds-card-bg: var(--ink); --ds-card-ink: var(--on-dark); --ds-card-border: 1.5px solid var(--ink); --ds-card-shadow: none; --ds-card-blur: none; }
.ds-card--orange { --ds-card-bg: var(--orange); --ds-card-ink: var(--cta-ink); --ds-card-border: 1.5px solid var(--orange); --ds-card-shadow: none; --ds-card-blur: none; }
/* A card that is a link: it lifts, and says where focus is. */
a.ds-card, .ds-card--link { text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast); }
a.ds-card:hover, .ds-card--link:hover { transform: translateY(-2px); }
a.ds-card:focus-visible, .ds-card--link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.ds-card__title { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 700; }
.ds-card__body { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
/* StatTile. Knobs: --ds-stat-pad, --ds-stat-r, --ds-stat-border, --ds-stat-gap,
   --ds-stat-align and --ds-stat-text (a centred tile sets both), --ds-stat-bg,
   and --ds-stat-dir / --ds-stat-justify for a tile that lays its figure and a
   chevron in a row (App-D-Home's summary). */
.ds-stat {
  --ds-stat-pad: 10px 12px;
  --ds-stat-r: var(--radius-control);
  --ds-stat-border: 1px solid var(--line-warm);
  --ds-stat-gap: 4px;
  --ds-stat-align: stretch;
  --ds-stat-text: start;
  --ds-stat-bg: var(--surface);
  --ds-stat-dir: column;
  --ds-stat-justify: flex-start;
  box-sizing: border-box;
  display: flex;
  flex-direction: var(--ds-stat-dir);
  align-items: var(--ds-stat-align);
  justify-content: var(--ds-stat-justify);
  text-align: var(--ds-stat-text);
  gap: var(--ds-stat-gap);
  min-inline-size: 0;
  margin: 0;
  padding: var(--ds-stat-pad);
  border: var(--ds-stat-border);
  border-radius: var(--ds-stat-r);
  background: var(--ds-stat-bg);
}
.ds-stat__value { font-size: var(--fs-numeric); font-weight: 750; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ds-stat__label { font-size: var(--fs-micro); line-height: 1.6; color: var(--muted); }
.ds-row { display: flex; align-items: baseline; gap: 12px; padding-block: 10px; border-block-end: 1px dashed var(--line-warm); }
.ds-row:last-child { border-block-end: 0; }
.ds-row__key { flex: 0 0 116px; font-size: var(--fs-small); color: var(--muted); }
.ds-row__value { flex: 1 1 0; font-size: var(--fs-ui); font-weight: 700; line-height: 1.7; }
.ds-fold { border: 1px solid var(--line-warm); border-radius: var(--radius-field); background: var(--surface); }
.ds-fold__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 52px;
  padding-block: 8px;
  padding-inline: 14px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.ds-fold__head::-webkit-details-marker { display: none; }
.ds-fold__head:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-field); }
.ds-fold__icon { flex: 0 0 34px; inline-size: 34px; block-size: 34px; border-radius: var(--radius-tile); background: var(--orange-tint); color: var(--action); display: flex; align-items: center; justify-content: center; }
.ds-fold__title { flex: 1 1 0; font-size: var(--fs-ui); font-weight: 700; line-height: 1.7; }
.ds-fold__chev { display: flex; color: var(--muted); transition: transform var(--dur-fast) var(--ease-out); }
.ds-fold[open] > .ds-fold__head .ds-fold__chev { transform: rotate(180deg); }
.ds-fold__body { padding-block: 0 14px; padding-inline: 14px; display: flex; flex-direction: column; gap: 10px; }

/* ── Callout ───────────────────────────────────────────────────────────────
 * Six tones; the icon always rides with the colour; error is role=alert
 * (the markup's job). Knobs: --ds-callout-pad, --ds-callout-r, --ds-callout-gap,
 * --ds-callout-fs, --ds-callout-fw, --ds-callout-lh, --ds-callout-bg,
 * --ds-callout-ink, --ds-callout-border, --ds-callout-align. */
.ds-callout {
  --ds-callout-pad: 10px 12px;
  --ds-callout-r: var(--radius-control);
  --ds-callout-gap: 10px;
  --ds-callout-fs: var(--fs-small);
  --ds-callout-fw: 500;
  --ds-callout-lh: 1.85;
  --ds-callout-bg: var(--surface-2);
  --ds-callout-ink: var(--ink-2);
  --ds-callout-border: 1px solid var(--line);
  --ds-callout-align: flex-start;
  box-sizing: border-box;
  display: flex;
  gap: var(--ds-callout-gap);
  align-items: var(--ds-callout-align);
  margin: 0;
  padding: var(--ds-callout-pad);
  border: var(--ds-callout-border);
  border-radius: var(--ds-callout-r);
  background: var(--ds-callout-bg);
  color: var(--ds-callout-ink);
  font-size: var(--ds-callout-fs);
  font-weight: var(--ds-callout-fw);
  line-height: var(--ds-callout-lh);
}
.ds-callout > svg { flex: 0 0 auto; }
.ds-callout--error { --ds-callout-border: 1px solid var(--danger-line); --ds-callout-bg: var(--danger-tint); --ds-callout-ink: var(--danger-strong); }
.ds-callout--warn { --ds-callout-border: 1px solid var(--warn-line); --ds-callout-bg: var(--warn-tint); --ds-callout-ink: var(--warn-strong); }
.ds-callout--ok { --ds-callout-border: 1px solid var(--green-line); --ds-callout-bg: var(--green-tint); --ds-callout-ink: var(--green-strong); }
.ds-callout--hot { --ds-callout-border: 1px solid var(--orange-line); --ds-callout-bg: var(--orange-tint); --ds-callout-ink: var(--hot-ink); }
/* A result line: a callout without an edge, in the tone's own ink (the stage outputs). */
.ds-callout--flat { --ds-callout-border: 0 solid transparent; }
.ds-callout--ok.ds-callout--flat { --ds-callout-ink: var(--green-ink); }

/* ── Toast · InlineStatus · Skeleton · EmptyState ──────────────────────── */
.ds-toast {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  padding-inline: 14px 8px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: var(--shadow-sheet);
}
.ds-toast__icon { flex: 0 0 28px; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; }
.ds-toast--error .ds-toast__icon { background: var(--danger); }
.ds-toast__text { flex: 1 1 0; font-size: var(--fs-small); font-weight: 600; }
.ds-toast__action {
  flex: 0 0 auto;
  min-block-size: 36px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--on-dark) 12%, transparent);
  color: var(--on-dark-accent);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 700;
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.ds-status { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 700; color: var(--green-ink); }
.ds-status--warn { color: var(--warn-ink); }
.ds-status--error { color: var(--danger); }
/* Loading: shown only after 300ms, shaped like what is coming; no whole-page
   spinner (DS-3). The shine stops under reduced motion (below). */
.ds-skeleton {
  display: block;
  block-size: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line-warm) 25%, var(--energy-50) 50%, var(--line-warm) 75%);
  background-size: 200% 100%;
  animation: ds-shine 1.6s linear infinite;
}
.ds-skeleton--title { block-size: 16px; }
.ds-skeleton--block { block-size: 96px; border-radius: var(--radius-card); }
@keyframes ds-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ds-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ds-empty__icon { inline-size: 48px; block-size: 48px; border-radius: var(--radius-control); background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.ds-empty__title { margin: 0; font-size: var(--fs-ui); font-weight: 700; }
.ds-empty__body { margin: 0; font-size: var(--fs-micro); line-height: 1.7; color: var(--muted); }

/* The eight system states (DS-3): one frame for empty, error and «needs a
   sign-in» — an icon tile, a title, the honest line, one or two actions. */
.ds-state {
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-block: 24px;
  padding-inline: 18px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: center;
}
.ds-state__icon { inline-size: 56px; block-size: 56px; border-radius: var(--radius-control); background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.ds-state--error .ds-state__icon { background: var(--warn-tint); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-line); }
.ds-state__title { margin: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 750; }
.ds-state__body { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.ds-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ── Marquee ───────────────────────────────────────────────────────────────
 * A moving row always has a pause button (WCAG 2.2.2) and stops on hover and
 * focus; under reduced motion it does not move at all. The track holds the
 * row twice (the second copy aria-hidden and inert) and slides half its width. */
.ds-marquee { --ds-marquee-dur: 42s; --ds-marquee-pad: 0; display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.ds-marquee__viewport {
  flex: 1 1 0;
  min-inline-size: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
}
.ds-marquee__track { display: flex; inline-size: max-content; padding-block: var(--ds-marquee-pad); animation: ds-marquee var(--ds-marquee-dur) linear infinite; }
.ds-marquee:hover .ds-marquee__track, .ds-marquee:focus-within .ds-marquee__track, .ds-marquee.is-paused .ds-marquee__track { animation-play-state: paused; }
@keyframes ds-marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ── AppBar · MobileBottomNav · BottomSheet · Dialog ─────────────────────── */
.ds-topbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: var(--appbar-h);
  padding-inline: var(--gutter-m);
}
.ds-topbar__logo { flex: 0 0 auto; inline-size: 32px; block-size: 32px; }
.ds-topbar__title { flex: 1 1 0; min-inline-size: 0; margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; }
.ds-topbar__actions { display: flex; align-items: center; gap: 8px; }

.ds-tabbar {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  /* The home indicator of a phone sits under the bar, never on its labels. */
  block-size: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-block: 0 calc(10px + env(safe-area-inset-bottom, 0px));
  padding-inline: 8px;
  border-block-start: 1px solid var(--line-warm);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 -12px 28px -24px color-mix(in srgb, var(--ink) 50%, transparent);
}
.ds-tabbar__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-inline-size: 0;
  min-block-size: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 500;
  /* The artboards set the labels at the font's own line height (18px at 12px); left to
     inherit, a page's body shows through (game.css 1.9: a 23px label). After `font`,
     which resets it. */
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
}
.ds-tabbar__item:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-tabbar__item[aria-current="page"] { color: var(--ink); font-weight: 700; }
/* A label that is a <b> (the panel's bars, test-pinned) takes the item's weight. */
.ds-tabbar__item > b { font-weight: inherit; }
.ds-tabbar__icon { inline-size: 26px; block-size: 26px; }
/* The raised disc in the middle (the counsellor tab): a plate the glyph can be
   seen on, with the brand gradient as its ring — never its fill, because the
   Grok glyph is orange (CLAUDE.md, the Grok set). */
.ds-tabbar__item--disc { gap: 2px; margin-block-start: -22px; color: var(--ink); font-weight: 600; }
.ds-tabbar__disc {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 58px;
  block-size: 58px;
  border: 4px solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--ground-2), var(--ground-2)) padding-box, var(--grad-cta) border-box;
  box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--orange) 90%, transparent);
}
.ds-tabbar__disc > img { display: block; inline-size: 30px; block-size: 30px; }

.ds-sheet {
  --ds-sheet-pad: 10px 14px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--ds-sheet-pad);
  border: 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: var(--surface);
  box-shadow: var(--shadow-sheet);
}
/* A closed <dialog> is display:none only by the UA sheet, which any author
   `display` beats — so the component says it again for its own host. */
dialog.ds-sheet:not([open]) { display: none; }
.ds-sheet::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.ds-sheet__handle { align-self: center; inline-size: 40px; block-size: 5px; border-radius: 3px; background: var(--line); }
.ds-sheet__title { margin: 0; font-size: var(--fs-body-lg); font-weight: 750; }
.ds-dialog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line-warm);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

/* ── Section head (the landing's and the app's eyebrow + title) ─────────── */
.ds-eyebrow { --ds-eyebrow-fs: var(--fs-micro); --ds-eyebrow-fw: 700; --ds-eyebrow-lh: 1.7; font-size: var(--ds-eyebrow-fs); font-weight: var(--ds-eyebrow-fw); line-height: var(--ds-eyebrow-lh); color: var(--action); }
.ds-live {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 28px;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background: var(--green-tint);
  color: var(--green-ink);
  font-size: var(--fs-micro);
  font-weight: 700;
}
/* The app's «زنده» (App-1-Home, Couns-1-Hub): 26 tall, with its own green edge. */
.ds-live--edged { min-block-size: 26px; border: 1px solid var(--green-line); background: color-mix(in srgb, var(--green-tint) 90%, transparent); }

/* ── ChatBubble · Composer (DS-2 §8) ─────────────────────────────────────── */
.ds-bubble {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
  padding-block: 10px;
  padding-inline: 12px;
  border: 1px solid var(--line-warm);
  border-radius: 18px 18px 6px 18px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-ui);
  line-height: 1.85;
  unicode-bidi: plaintext;
}
.ds-bubble--out { border-color: var(--orange-line); border-radius: 18px 18px 18px 6px; background: var(--ground-tint); box-shadow: none; }
.ds-bubble--out.is-sending { border: 1.5px dashed var(--orange-3); background: var(--orange-tint); }
.ds-bubble--out.is-failed { border: 1.5px solid var(--danger-line); }
.ds-bubble--supervisor { border: 1.5px solid var(--ink-2); background: var(--surface-2); box-shadow: none; }
.ds-bubble--system { align-self: center; max-inline-size: 92%; padding-block: 8px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--surface) 82%, transparent); box-shadow: none; font-size: var(--fs-micro); line-height: 1.7; color: var(--muted); text-align: center; }
.ds-bubble__time { align-self: flex-end; font-size: var(--fs-micro); color: var(--muted-on-white); }
.ds-composer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 8px 14px;
  padding-inline: 12px;
  border-block-start: 1px solid var(--line-warm);
  background: color-mix(in srgb, var(--ground-2) 97%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ds-composer__row { display: flex; align-items: flex-end; gap: 8px; }
.ds-composer__send {
  flex: 0 0 48px;
  inline-size: 48px;
  block-size: 48px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-3));
  color: var(--cta-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 18px -10px color-mix(in srgb, var(--orange) 90%, transparent);
  cursor: pointer;
}
.ds-composer__send:disabled { background: var(--surface-3); color: var(--disabled-ink); box-shadow: none; cursor: not-allowed; }
.ds-composer__send:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* ── CounselorCard (COUNSELOR_DESIGN §۱۳٫۲; Couns-1-Hub, App-1-Home, App-D-Home) ──
 * One card for every list of counsellors a student sees, drawn by
 * /ds/counselor-card.js: portrait with the verified rosette, name and role, the
 * reader's own match said in words, the matched criteria, capacity, the conflict
 * of interest, and the doors. No score, rating or rank on a person (CLAUDE.md).
 * Knobs: --ds-counsel-w (its width in a row of cards). */
.ds-counsel {
  --ds-counsel-w: 100%;
  --ds-card-r: var(--radius-card);
  --ds-card-gap: 12px;
  --ds-card-pad: 14px;
  inline-size: var(--ds-counsel-w);
  min-inline-size: 0;
}
.ds-counsel__top { display: flex; align-items: center; gap: 12px; }
.ds-counsel__face { position: relative; flex: 0 0 58px; inline-size: 58px; block-size: 58px; }
.ds-counsel__face > .avatar, .ds-counsel__photo {
  display: block;
  inline-size: 58px;
  block-size: 58px;
  overflow: hidden;
  border-radius: var(--radius-field);
  box-shadow: 0 0 0 2px var(--surface), 0 12px 22px -12px color-mix(in srgb, var(--ink) 60%, transparent);
}
.ds-counsel__face img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ds-counsel__rosette {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-end: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 4px 8px -4px color-mix(in srgb, var(--ink) 45%, transparent);
}
.ds-counsel__seal { fill: var(--green); stroke: var(--green); }
.ds-counsel__seal-tick { stroke: var(--on-dark); }
.ds-counsel__who { display: flex; flex: 1 1 0; flex-direction: column; gap: 4px; min-inline-size: 0; }
/* The name is a link inside a line of text, so it stays inline — the card's
   «پروفایل» is the 44px way to the same page. */
.ds-counsel__name { font-size: var(--fs-h4); font-weight: 700; line-height: normal; color: var(--ink); }
.ds-counsel__link { color: inherit; text-decoration: none; }
.ds-counsel__link:hover { color: var(--action); }
.ds-counsel__link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-tag); }
.ds-counsel__role { font-size: var(--fs-micro); line-height: normal; color: var(--muted); }
.ds-counsel__sep { color: var(--line-strong); }
.ds-counsel__match {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--energy-100);
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--orange-tint) 70%, transparent);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: normal;
  color: var(--ink);
}
.ds-counsel__meter { display: inline-flex; gap: 4px; }
.ds-counsel__bar { inline-size: 12px; block-size: 6px; border-radius: 3px; background: var(--line); }
.ds-counsel__bar[data-on="true"] { background: var(--green); }
.ds-counsel__crit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.ds-counsel__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
  block-size: 30px;
  padding-inline: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: var(--surface);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.ds-counsel__lens { display: flex; color: var(--action); }
.ds-counsel__chip-text { flex: 1 1 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-counsel__tick {
  display: flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-dark);
}
.ds-counsel__full { margin: 0; font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
.ds-counsel__conflict {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-tile);
  background: var(--warn-tint);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--warn-ink);
}
.ds-counsel__conflict > svg { flex: 0 0 15px; margin-block-start: 2px; }
.ds-counsel__conflict--none { padding: 0; border: 0; background: none; color: var(--muted); }
.ds-counsel__actions { display: flex; flex-direction: column; gap: 6px; margin-block-start: auto; }
/* The book door sits on a 3px lip (App-1-Home, App-D-Home, Couns-5-List); the compact card (Couns-1-Hub)
   draws no door at all. */
.ds-counsel__book { --ds-btn-h: 46px; --ds-btn-r: var(--radius-tile); --ds-btn-fs: var(--fs-ui); --ds-btn-shadow: 0 3px 0 var(--ink-strong); }
.ds-counsel__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ds-counsel__profile { --ds-btn-r: var(--radius-tile); --ds-btn-fs: var(--fs-small); --ds-btn-fw: 600; --ds-btn-px: 8px; }
.ds-counsel__ask { --ds-btn-r: var(--radius-tile); --ds-btn-fs: var(--fs-small); --ds-btn-fw: 600; --ds-btn-px: 8px; --ds-btn-border: 1.5px solid var(--orange-line); }
.ds-counsel__ask > svg { color: var(--action); }

/* ── Screen-reader text ─────────────────────────────────────────────────── */
.ds-sr {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion ────────────────────────────────────────────────────────
 * The repo's pattern (tokens.css forbids a blanket animation:none: it breaks
 * end-state animations and animationend listeners): durations to .001ms and
 * one iteration, so nothing loops and nothing is skipped. Scoped to ds-
 * elements only — this sheet never reaches a page's own elements. */
@media (prefers-reduced-motion: reduce) {
  [class^="ds-"], [class*=" ds-"], [class^="ds-"]::before, [class*=" ds-"]::before, [class^="ds-"]::after, [class*=" ds-"]::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ds-marquee__track { animation: none !important; transform: none !important; }
  .ds-btn:hover, .ds-btn:active, a.ds-card:hover, .ds-card--link:hover { transform: none; }
}

/* ── counselor-hub components ──────────────────────────────────────────────
 * Appended for «مشاور من» (Couns-1-Hub, the golden counselor-hub unit); nothing
 * above this line is changed by it. A modifier here only sets an existing
 * component's knobs or tones; the new families are the hub's own rows: an entry
 * row, a stack of faces, the call desk card, a door tile and a question card.
 * Every link-shaped component re-asserts its ink on hover and press at (0,2,0),
 * because game.css — loaded after this sheet — turns every `a:hover` orange. */

/* Tones and sizes of existing components. */
.ds-eyebrow--on-dark { --ds-eyebrow-fw: 600; color: var(--on-dark-accent); }
.ds-tag--mark { --ds-tag-h: 22px; --ds-tag-r: var(--radius-pill); font-weight: 700; }
.ds-tag--on-dark {
  --ds-tag-h: 26px;
  --ds-tag-r: var(--radius-pill);
  border-color: color-mix(in srgb, var(--on-dark) 14%, transparent);
  background: color-mix(in srgb, var(--on-dark) 8%, transparent);
  color: var(--line);
}
.ds-tag--warm { --ds-tag-h: 26px; --ds-tag-r: var(--radius-pill); border-color: var(--energy-100); background: var(--ground); color: var(--ink); }
.ds-tag--warm > svg { color: var(--action); }
.ds-badge--action { background: var(--action); color: var(--on-dark); }
.ds-dot--wait { background: var(--orange-3); box-shadow: none; }
.ds-status--wait { color: var(--muted); font-weight: 600; }
.ds-portrait--lg { flex-basis: 54px; inline-size: 54px; block-size: 54px; }
.ds-portrait--lg .ds-portrait__img { border-radius: var(--radius-field); }
.ds-portrait--lg .ds-portrait__mark { inline-size: 23px; block-size: 23px; }
/* A dark card with the warm light in its corner (Couns-1's live package). */
.ds-card--orb { position: relative; overflow: hidden; }
.ds-card--orb::before {
  content: "";
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -40px;
  inline-size: 190px;
  block-size: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--orange) 45%, transparent), transparent 70%);
  pointer-events: none;
}
.ds-card--orb > * { position: relative; }

/* EntryRow: a card that is one link — faces or an icon, a title and a line,
   and what is waiting at its end (a count, a chevron). */
.ds-entry { --ds-card-dir: row; --ds-card-align: center; --ds-card-gap: 12px; --ds-card-pad: 12px 14px; color: var(--ink); }
.ds-entry:hover, .ds-entry:active { color: var(--ink); text-decoration: none; }
.ds-entry__icon {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-tile);
  background: var(--orange-tint);
  color: var(--action);
}
.ds-entry__text { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ds-entry__title { font-size: var(--fs-body-lg); font-weight: 700; line-height: normal; }
.ds-entry__sub { font-size: var(--fs-micro); line-height: 1.6; color: var(--muted); }
.ds-entry__end { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.ds-entry__chev { display: flex; color: var(--muted); }

/* FaceStack: up to three faces, each over the next. */
.ds-faces { display: flex; flex: 0 0 auto; }
.ds-faces__face {
  display: block;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--radius-tile);
  object-fit: cover;
  background: var(--ground-2);
  box-shadow: 0 0 0 2px var(--surface), 0 12px 22px -12px color-mix(in srgb, var(--ink) 60%, transparent);
}
.ds-faces__face:not(:last-child) { margin-inline-end: -10px; }

/* DeskCard: a paid desk's door (the call with دکتر سرلک) — its icon, what it is,
   its facts, and the desk's state as the server says it. No price here: the
   price is said on the desk itself (COUNSELOR_DESIGN §۲۰٫۱). */
.ds-desk {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-card);
  background:
    linear-gradient(color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface) 90%, transparent)) padding-box,
    linear-gradient(135deg, var(--orange), var(--energy-100) 60%, var(--orange-3)) border-box;
  box-shadow: 0 18px 36px -26px color-mix(in srgb, var(--hope-ink) 60%, transparent);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.ds-desk:active { color: var(--ink); text-decoration: none; }
.ds-desk:hover { color: var(--ink); text-decoration: none; transform: translateY(-2px); }
.ds-desk:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.ds-desk__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-field);
  background: linear-gradient(145deg, var(--orange), var(--orange-3));
  color: var(--cta-ink);
}
.ds-desk__body { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; line-height: normal; }
.ds-desk__eyebrow { font-size: var(--fs-micro); font-weight: 700; color: var(--action); }
.ds-desk__title { font-size: var(--fs-h4); font-weight: 750; }
.ds-desk__text { font-size: var(--fs-micro); line-height: 1.7; color: var(--muted); }
.ds-desk__facts { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 2px; }
.ds-desk__fact { color: var(--muted); }
.ds-desk__state { display: inline-flex; align-items: center; gap: 4px; margin-block-start: 4px; font-size: var(--fs-small); font-weight: 700; color: var(--action); }
.ds-desk__state [data-open="false"], .ds-desk__state [data-open="error"] { color: var(--muted); }

/* DoorTile: one of the hub's doors — a picture, a way in, a name and a line. */
.ds-door { --ds-card-pad: 12px 12px 14px; --ds-card-gap: 6px; flex: 1 1 0; min-inline-size: 0; color: var(--ink); }
.ds-door:hover, .ds-door:active { color: var(--ink); text-decoration: none; }
.ds-door__top { display: flex; align-items: flex-start; justify-content: space-between; }
.ds-door__art {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 60px;
  margin-block-start: -4px;
  margin-inline-start: -4px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--orange-2) 26%, transparent), transparent);
}
.ds-door__go {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border: 1px solid var(--line-warm);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ground) 95%, transparent);
  color: var(--action);
}
.ds-door__title { font-size: var(--fs-body-lg); font-weight: 700; line-height: 1.5; }
.ds-door__text { font-size: var(--fs-micro); line-height: 1.6; color: var(--muted); }

/* QuestionCard: a public question as a link to its answers — who asked and
   when, the question, its topic and whether a verified counsellor answered. */
.ds-question { --ds-card-r: var(--radius-field); --ds-card-pad: 12px; --ds-card-gap: 6px; color: var(--ink); line-height: normal; }
.ds-question:hover, .ds-question:active { color: var(--ink); text-decoration: none; }
.ds-question__meta { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-micro); color: var(--muted); }
.ds-question__meta b { font-weight: 700; color: var(--ink); }
.ds-question__text { font-size: var(--fs-ui); font-weight: 700; line-height: 1.6; }
.ds-question__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.ds-question__tags { display: flex; gap: 4px; }
.ds-question__status { gap: 4px; }

/* CounselorCard, compact: the same person on the hub's row of matches — the
   whole card is one link, so the face is a plain picture and the doors are
   the list's. */
.ds-counsel--compact { --ds-card-pad: 12px; --ds-card-gap: 10px; color: var(--ink); text-decoration: none; }
.ds-counsel--compact:hover, .ds-counsel--compact:active { color: var(--ink); text-decoration: none; }
.ds-counsel--compact .ds-counsel__top { gap: 10px; }
.ds-counsel--compact .ds-counsel__face { flex-basis: 46px; inline-size: 46px; block-size: 46px; }
.ds-counsel--compact .ds-counsel__photo { inline-size: 46px; block-size: 46px; border-radius: var(--radius-control); object-fit: cover; }
.ds-counsel--compact .ds-counsel__rosette { inline-size: 22px; block-size: 22px; }
.ds-counsel--compact .ds-counsel__who { gap: 2px; }
.ds-counsel--compact .ds-counsel__name { font-size: var(--fs-ui); }
.ds-counsel--compact .ds-counsel__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-counsel--compact .ds-counsel__match { padding: 8px; }
/* The declared conflict of interest sits in the compact card's one line slot — where
   the artboard draws the card's last line — in that line's form: icon and words in the
   warn ink, no box. Every word of it stays on the card (COUNSELOR_DESIGN §۴). */
.ds-counsel--compact .ds-counsel__conflict { padding: 0; border: 0; background: none; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .ds-desk:hover { transform: none; }
}