/* Design-system additions — the component classes the handoff names that the shipped
   design system does not define.

   WHY THIS IS A SEPARATE FILE AND NOT AN EDIT TO ds/tokens/components.css:
   wwwroot/ds is a verbatim copy of the design system's shippable set (App.razor says so).
   Anything written into it is lost the next time the DS is refreshed. These four classes
   are ours, so they live outside the vendored folder and load after it.

   The audit in the reference doc §3 listed six names as missing. Four are: the other two
   pairs — .eyebrow / .mono and .page-title / .page-sub — turned out to be present already,
   in wwwroot/portal.css rather than in ds/tokens/components.css, which is why the audit
   (which searched only the DS folder) did not find them. They are NOT redefined here;
   redefining them would fork a working class. Logged as L26 / a §2.1 row.

   Written in the DS's own idiom: flat class names, no nesting, every value a token, one
   declaration block per line group. Match it if you add more. */

/* -- KPI label ------------------------------------------------------------------------
   Completes the .kpi family (.kpi / .kpi-strip / .kpi-accent / .kpi-value / .kpi-meta are
   all in components.css:102-115). The caption ABOVE the figure, where .kpi-meta is the
   caption below it — hence label uses the eyebrow scale and meta the body-small scale. */
.kpi-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--text-label);
  letter-spacing: var(--ls-chip);
}

/* -- hal-* ("hal" = حل, Urdu for "solution") -------------------------------------------
   The three solution-status classes. The handoff lists the names but never defines them,
   and the prototype is inline-styled throughout, so it uses none of them — there is no
   authority to copy from. These are authored from the role each name implies and from the
   sibling class each one sits next to (.meta-chip, .data-table row, a text link).

   Treat them as OUR definitions, not recovered ones: if a later phase finds the prototype
   expressing one of these three differently, the prototype wins and these change. */

/* Ready / being-added status on a chapter or subject. Sits beside .meta-chip and shares
   its geometry; the difference is that hal-chip carries STATE, so it is coloured, and it
   is not uppercased — a chip that may hold Urdu must never be text-transform: uppercase,
   which is meaningless in Arabic script and forces a Latin-only reading. */
.hal-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ui-font, var(--font-sans));
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  line-height: var(--ui-tight, var(--leading-tight));
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface-tertiary); color: var(--text-secondary);
  white-space: nowrap;
}
.hal-chip.is-ready { background: var(--status-success-soft); color: var(--status-success-text); }
.hal-chip.is-pending { background: var(--status-warning-soft); color: var(--status-warning-text); }

/* A chapter row in a subject listing. The hairline is a bottom border, and the last row
   drops it, so a list of rows inside a card meets the card's own radius cleanly. */
.hal-row {
  display: flex; align-items: center; gap: var(--space-5);
  padding: 13px 16px;
  border-bottom: var(--border-w) solid var(--border-default);
  transition: background var(--transition-fast);
}
.hal-row:last-child { border-bottom: 0; }
.hal-row.is-clickable { cursor: pointer; }
.hal-row.is-clickable:hover { background: var(--brand-primary-soft); }

/* A link to a solution sheet. Underline on hover only — a list of these would otherwise
   be a wall of rules, and the brand colour already marks them as interactive. */
.hal-link {
  color: var(--brand-primary-strong);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.hal-link:hover { color: var(--brand-primary); text-decoration: underline; }
.hal-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }