/* ==========================================================================
   Smart Kid CRM - design-system primitives  (ui-*)
   Hand-authored plain CSS. No build step. OPT-IN: loaded only on pages that ask
   (<x-app-layout :ui="true"> or ->layout('layouts.app', ['ui' => true])).

   Rules this file follows
   -----------------------
   - Every selector is anchored on a `.ui-` class (an `[dir="rtl"]` ancestor is the only prefix allowed; tests enforce it). It never targets
     `.sk-*`, `.cc-*`, `.rc-*`, `.cp-*`, element selectors, or the page, so
     loading it cannot restyle a legacy page and there is nothing to out-shout.
   - Values come from the `--ui-*` tokens (tokens.css), which copy the approved
     Dashboard. The Dashboard's own CSS is not reused or replaced; this layer
     reproduces its visual language so other pages can share it.
   - Component states are real states: :hover, :active, :focus-visible,
     :disabled / [aria-disabled], .is-loading / [aria-busy]. Selection is carried
     by aria-selected / aria-checked / aria-current, not by a colour class alone.
   - Logical properties only (inline-start/end), so RTL is the default, not a patch.
   - Colour never carries meaning alone: a status has text and/or an icon.

   Interaction grammar (approved)
   ------------------------------
   Primary action ........ solid navy. ONE per view: the single main action
                           (create, send, save, apply). Never two side by side.
   Secondary (default) ... white surface, turquoise border and bottom accent.
   Danger ................ semantic red, never a brand colour.
   Ghost ................. text only, for low-priority actions.
   Selected tab / nav .... white surface, navy text, turquoise underline.
   Selected row .......... faint turquoise tint + a turquoise rail.
   No brown, no indigo, no dark filled tabs, no large dark areas.

   Sections: type faces - controls - badges and chips - metrics and stats -
   notices - fields - segmented and tabs - filter bar - rows - table - pagination
   - utilities. (Page and surface layout, modal and drawer: shell.css.)
   ========================================================================== */

/* ==========================================================================
   TYPE FACES
   The 700 weight and Plex Mono are declared HERE, not in fonts.css, on purpose:
   existing pages request weight 700 in many rules and have always been served
   the 600 face, and they name IBM Plex Mono in --sk-font-mono although it never
   loaded. Declaring either globally would restyle every existing page. This file
   loads only where the design system is adopted, so they arrive with it.
   Same unmodified IBM files, same code-point coverage as fonts.css.
   ========================================================================== */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0600-06FF, U+0750-077F,
    U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF,
    U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39,
    U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59,
    U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77,
    U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB,
    U+1EEF0-1EEF1, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  src: url('../fonts/ibm-plex/IBMPlexSansArabic-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex/IBMPlexMono-Regular.woff2') format('woff2');
}

/* ==========================================================================
   SHARED BASE
   ========================================================================== */
.ui-scope {
  font-family: var(--ui-font);
  font-size: var(--ui-fs-body);
  line-height: var(--ui-lh-body);
  color: var(--ui-ink);
}

.ui-btn, .ui-card, .ui-badge, .ui-chip, .ui-metric, .ui-stats, .ui-stat, .ui-empty, .ui-error, .ui-skeleton,
.ui-alert, .ui-field, .ui-input, .ui-select, .ui-textarea, .ui-segmented, .ui-tabs, .ui-tab, .ui-filter-bar,
.ui-row, .ui-table-wrap, .ui-table, .ui-pagination {
  box-sizing: border-box;
}

/* Icons: decorative, sized by the caller (width/height attributes), coloured by the text around them. */
.ui-icon { flex: none; }
[dir="rtl"] .ui-icon--flip { transform: scaleX(-1); }

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ==========================================================================
   BUTTON
   Default = secondary (white + turquoise). Modifiers change the role, never the
   structure. Min height 40px on desktop, 44px on a touch layout.
   ========================================================================== */
.ui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--ui-control-h);
  padding: 0 14px;
  font: inherit;
  font-size: var(--ui-fs-control);
  font-weight: var(--ui-fw-semibold);
  line-height: 1;
  color: var(--ui-ink);
  background-color: var(--ui-surface);
  border: 1px solid var(--ui-turquoise);
  border-radius: var(--ui-radius-md);
  box-shadow: inset 0 -3px 0 var(--ui-turquoise);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ui-t) var(--ui-ease), border-color var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease);
  -webkit-tap-highlight-color: transparent;
}
.ui-btn:hover { background-color: var(--ui-tint-hover); }
.ui-btn:active { background-color: var(--ui-tint-active); }

/* The single main action of a view: solid navy, white text (10.4:1). */
.ui-btn--primary {
  color: var(--ui-ink-on-solid);
  background-color: var(--ui-navy);
  border-color: var(--ui-navy);
  box-shadow: none;
}
.ui-btn--primary:hover { background-color: var(--ui-navy); background-image: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)); }
.ui-btn--primary:active { background-color: var(--ui-navy); background-image: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .16)); }

/* Semantic red: a destructive or emergency action. Not a brand colour. */
.ui-btn--danger {
  color: var(--ui-ink-on-solid);
  background-color: var(--ui-bad);
  border-color: var(--ui-bad);
  box-shadow: none;
}
.ui-btn--danger:hover { background-color: var(--ui-bad); background-image: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)); }
.ui-btn--danger:active { background-color: var(--ui-bad); background-image: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)); }
.ui-btn--danger-outline {
  color: var(--ui-bad-ink);
  background-color: var(--ui-surface);
  border: 1.5px solid var(--ui-bad);
  box-shadow: none;
}
.ui-btn--danger-outline:hover { background-color: var(--ui-bad-bg); }
.ui-btn--danger-outline:active { background-color: var(--ui-bad-line); }

/* Low priority: text only. */
.ui-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.ui-btn--ghost:hover { background-color: var(--ui-tint-hover); }
.ui-btn--ghost:active { background-color: var(--ui-tint-active); }

.ui-btn--sm { min-height: var(--ui-control-h-sm); padding: 0 10px; font-size: var(--ui-fs-small); }
.ui-btn--lg { min-height: var(--ui-control-h-lg); padding: 0 18px; }
.ui-btn--icon { width: var(--ui-control-h); padding: 0; }
.ui-btn--icon.ui-btn--sm { width: var(--ui-control-h-sm); }
.ui-btn--icon.ui-btn--lg { width: var(--ui-control-h-lg); }
.ui-btn--block { display: flex; width: 100%; }

.ui-btn:focus-visible {
  outline: var(--ui-focus-width) solid var(--ui-focus-color);
  outline-offset: var(--ui-focus-offset);
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-btn[aria-disabled="true"] { pointer-events: none; }

/* Loading: a spinner before the label; the label stays (it still says what is happening). */
.ui-btn.is-loading,
.ui-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.ui-btn.is-loading::before,
.ui-btn[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
.ui-btn__icon { flex: none; width: 16px; height: 16px; }

@media (max-width: 720px) {
  .ui-btn { min-height: var(--ui-touch-min); }
  /* The sized icon buttons are two-class selectors (.ui-btn--icon.ui-btn--sm above); a one-class rule here would lose
     to them and leave the modal / drawer close button 32px wide on a phone. Same specificity, later in the file. */
  .ui-btn--icon,
  .ui-btn--icon.ui-btn--sm,
  .ui-btn--icon.ui-btn--lg { width: var(--ui-touch-min); }
}

/* ==========================================================================
   BADGE, DOT, CHIP  (a state is always text, and normally an icon too)
   ========================================================================== */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: var(--ui-fs-xs);
  font-weight: var(--ui-fw-semibold);
  line-height: 1;
  white-space: nowrap;
  color: var(--ui-ink-soft);
  background: var(--ui-track);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
}
.ui-badge--lg { padding: 9px 14px; font-size: var(--ui-fs-control); }
.ui-badge--good { color: var(--ui-good-ink); background: var(--ui-good-bg); border-color: var(--ui-good-line); }
.ui-badge--warn { color: var(--ui-warn-ink); background: var(--ui-warn-bg); border-color: var(--ui-warn-line); }
.ui-badge--bad  { color: var(--ui-bad-ink);  background: var(--ui-bad-bg);  border-color: var(--ui-bad-line); }
.ui-badge--info,
.ui-badge--brand { color: var(--ui-ink); background: var(--ui-tint); border-color: var(--ui-tint-edge); }
.ui-badge__icon { flex: none; width: 12px; height: 12px; }

.ui-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ui-idle); }
.ui-dot--good { background: var(--ui-good); }
.ui-dot--warn { background: var(--ui-warn); }
.ui-dot--bad  { background: var(--ui-bad); }
.ui-dot--brand { background: var(--ui-turquoise); }

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--ui-fs-xs);
  font-weight: var(--ui-fw-semibold);
  line-height: 1.3;
  color: var(--ui-ink);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-pill);
}
.ui-chip--tint { background: var(--ui-tint); border-color: var(--ui-tint-edge); font-weight: var(--ui-fw-medium); }
.ui-chip b { font-weight: var(--ui-fw-bold); }

/* ==========================================================================
   CARD
   ========================================================================== */
.ui-card {
  min-width: 0;
  padding: var(--ui-pad);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
}
.ui-card--flush { padding: 0; overflow: hidden; }
.ui-card--quiet { background: rgba(255, 255, 255, .62); border-color: var(--ui-line-soft); border-radius: 14px; }
.ui-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 14px; }
.ui-card__title { margin: 0; font-size: var(--ui-fs-h3); font-weight: var(--ui-fw-bold); line-height: 1.4; }
/* A flush card runs its content to the edges; its heading row keeps the card padding, and a table inside it
   loses its own frame (the card is the frame) and keeps only a hairline above it. */
.ui-card--flush > .ui-card__head { margin-bottom: 0; padding: var(--ui-pad); }
.ui-card--flush .ui-table-wrap { border: 0; border-top: 1px solid var(--ui-line-soft); border-radius: 0; }
.ui-card__hint { margin: 2px 0 0; font-size: var(--ui-fs-small); color: var(--ui-ink-soft); }

/* ==========================================================================
   METRIC and STAT LIST
   A figure is wrapped in <bdi dir="ltr"> by the component so digits and currency
   never reorder inside Arabic text. An unmeasurable figure is NEVER printed as 0.
   ========================================================================== */
.ui-metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-metric__label { font-size: var(--ui-fs-control); font-weight: var(--ui-fw-semibold); }
.ui-metric__value {
  font-size: var(--ui-fs-kpi);
  font-weight: var(--ui-fw-bold);
  line-height: 1.2;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ui-metric--lg .ui-metric__value { font-size: var(--ui-fs-kpi-lg); }
.ui-metric--hero .ui-metric__value { font-size: var(--ui-fs-display); line-height: 1.1; letter-spacing: -.02em; }
.ui-metric__hint { font-size: var(--ui-fs-xs); line-height: 1.4; color: var(--ui-ink-soft); }
.ui-metric__trend { display: flex; align-items: center; gap: 5px; font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-semibold); line-height: 1.4; color: var(--ui-ink-soft); }
.ui-metric__trend--good { color: var(--ui-good-ink); }
.ui-metric__trend--bad { color: var(--ui-bad-ink); }
.ui-metric__trend-mark { font-size: 11px; }
.ui-metric--long .ui-metric__value { font-size: var(--ui-fs-h3); font-weight: var(--ui-fw-semibold); line-height: 1.6; letter-spacing: 0; white-space: normal; }
.ui-metric--unavailable .ui-metric__value {
  width: fit-content;
  font-size: 16px;
  font-style: italic;
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-ink-soft);
  border-bottom: 1px dotted var(--ui-line-control);
}
.ui-metric__why { font-size: var(--ui-fs-xs); line-height: 1.5; color: var(--ui-ink-soft); }

.ui-stats { margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--ui-line-soft); font-size: var(--ui-fs-body); }
.ui-stat:first-child { border-top: 0; }
.ui-stat__label { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ui-ink-soft); }
.ui-stat__value { flex: none; margin: 0; font-weight: var(--ui-fw-bold); font-variant-numeric: tabular-nums; }
.ui-stat__state { display: inline-flex; align-items: center; gap: 6px; align-self: center; flex: none; }
.ui-stat__state .ui-dot { align-self: center; }
.ui-stat--good .ui-stat__value { color: var(--ui-good-ink); }
.ui-stat--warn .ui-stat__value { color: var(--ui-warn-ink); }
.ui-stat--bad  .ui-stat__value { color: var(--ui-bad-ink); }
.ui-stat__note { flex-basis: 100%; margin: 0; font-size: var(--ui-fs-xs); color: var(--ui-ink-soft); unicode-bidi: plaintext; text-align: start; }
.ui-stat__label--mono { font-family: var(--ui-font-mono); font-size: var(--ui-fs-xs); direction: ltr; text-align: start; unicode-bidi: isolate; overflow-wrap: anywhere; }
.ui-stat__action { flex: none; align-self: center; margin: 0; }

/* Wide enough, the rows of one list share columns (label | state | value | action) through a subgrid, so the state
   badges, figures and links line up from row to row even when some rows have no action or no state. A phone keeps
   the wrapping flex rows above (label on top, the rest below). */
@media (min-width: 641px) {
  .ui-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 0; }
  .ui-stat { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; row-gap: 4px; column-gap: 0; }
  .ui-stat__label { grid-column: 1; }
  .ui-stat__state { grid-column: 2; margin-inline-start: 12px; }
  .ui-stat__value { grid-column: 3; margin-inline-start: 12px; text-align: end; }
  .ui-stat__action { grid-column: 4; margin-inline-start: 12px; }
  .ui-stat__note { grid-column: 1 / -1; }
}

/* A report section's figures as a grid of quiet tiles: a faint tint, no border (a card already frames the group). */
.ui-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.ui-metric--tile { padding: 12px 14px; background: var(--ui-tint); border-radius: 12px; }
.ui-metric--tile .ui-metric__value { white-space: normal; overflow-wrap: anywhere; }
/* What follows a grid inside a card (a list, a table, a notice) keeps a steady gap from it. */
.ui-metric-grid + .ui-stats,
.ui-metric-grid + .ui-table-wrap,
.ui-metric-grid + .ui-alert,
.ui-stats + .ui-alert,
.ui-stats + .ui-note { margin-top: 14px; }
/* A second list in the same card (figures after switches) is set off by a rule, and has its own columns. */
.ui-stats + .ui-stats { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ui-line); }
@media (max-width: 640px) {
  .ui-metric-grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
  .ui-metric--tile { padding: 10px 12px; }
}

/* ==========================================================================
   NOTICES: empty, error, loading, alert
   ========================================================================== */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  color: var(--ui-ink-soft);
  background: var(--ui-tint);
  border: 1px dashed var(--ui-tint-edge);
  border-radius: 12px;
}
.ui-empty__icon { width: 28px; height: 28px; color: var(--ui-ink-soft); }
.ui-empty__title { margin: 0; font-size: var(--ui-fs-h3); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.ui-empty__text { margin: 0; max-width: 46ch; font-size: var(--ui-fs-body); }
.ui-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }

.ui-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px;
  color: var(--ui-bad-ink);
  background: var(--ui-bad-bg);
  border: 1px solid var(--ui-bad-line);
  border-radius: 12px;
}
.ui-error__icon { flex: none; width: 20px; height: 20px; }
.ui-error__body { flex: 1 1 240px; min-width: 0; }
.ui-error__title { margin: 0; font-size: var(--ui-fs-body); font-weight: var(--ui-fw-bold); }
.ui-error__text { margin: 2px 0 0; font-size: var(--ui-fs-small); }
.ui-error__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ui-skeleton { display: flex; flex-direction: column; gap: 10px; }
.ui-skeleton__line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ui-track) 25%, var(--ui-line-soft) 50%, var(--ui-track) 75%);
  background-size: 300% 100%;
  animation: ui-shimmer 1.4s ease-in-out infinite;
}
.ui-skeleton__line:nth-child(odd) { width: 100%; }
.ui-skeleton__line:nth-child(even) { width: 72%; }
.ui-skeleton__line:last-child { width: 48%; }

.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  font-size: var(--ui-fs-body);
  line-height: 1.5;
  color: var(--ui-ink);
  background: var(--ui-tint);
  border: 1px solid var(--ui-tint-edge);
  border-inline-start: 4px solid var(--ui-turquoise);
  border-radius: 12px;
}
.ui-alert__icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.ui-alert__body { flex: 1; min-width: 0; }
.ui-alert__title { margin: 0; font-weight: var(--ui-fw-bold); }
.ui-alert__text { margin: 0; }
.ui-alert__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ui-alert--good { color: var(--ui-good-ink); background: var(--ui-good-bg); border-color: var(--ui-good-line); border-inline-start-color: var(--ui-good); }
.ui-alert--warn { color: var(--ui-warn-ink); background: var(--ui-warn-bg); border-color: var(--ui-warn-line); border-inline-start-color: var(--ui-warn); }
.ui-alert--bad  { color: var(--ui-bad-ink);  background: var(--ui-bad-bg);  border-color: var(--ui-bad-line);  border-inline-start-color: var(--ui-bad); }

/* A verdict: the one-glance answer at the top of a status page (title + sentence + the reasons behind it).
   Neutral by default; good / warn / bad tint the surface and always travel with an icon and words. */
.ui-verdict {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  color: var(--ui-ink);
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
}
.ui-verdict__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ui-ink);
  background: var(--ui-tint-hover);
  border-radius: 50%;
}
.ui-verdict__icon { width: 22px; height: 22px; }
.ui-verdict__body { flex: 1 1 auto; min-width: 0; }
.ui-verdict__title { margin: 0; font-size: var(--ui-fs-h2); font-weight: var(--ui-fw-bold); line-height: 1.4; }
.ui-verdict__text { margin: 4px 0 0; font-size: var(--ui-fs-body); line-height: 1.6; }
.ui-verdict__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.ui-verdict--good { color: var(--ui-good-ink); background: var(--ui-good-bg); border-color: var(--ui-good-line); }
.ui-verdict--good .ui-verdict__mark { color: var(--ui-good-ink); background: var(--ui-good-line); }
.ui-verdict--warn { color: var(--ui-warn-ink); background: var(--ui-warn-bg); border-color: var(--ui-warn-line); }
.ui-verdict--warn .ui-verdict__mark { color: var(--ui-warn-ink); background: var(--ui-warn-line); }
/* Critical is meant to be unmistakable: a heavier edge and a larger mark, not only a colour. */
.ui-verdict--bad { color: var(--ui-bad-ink); background: var(--ui-bad-bg); border: 2px solid var(--ui-bad); }
.ui-verdict--bad .ui-verdict__mark { width: 46px; height: 46px; color: var(--ui-bad-ink); background: var(--ui-bad-line); }
@media (max-width: 640px) { .ui-verdict { flex-direction: column; gap: 10px; padding: 14px; } }

/* ==========================================================================
   FIELDS
   The control boundary uses --ui-line-control (3:1), not the faint decorative line.
   ========================================================================== */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-label { font-size: var(--ui-fs-small); font-weight: var(--ui-fw-semibold); color: var(--ui-ink); }
.ui-label__req { margin-inline-start: 4px; color: var(--ui-bad-ink); }
.ui-hint { margin: 0; font-size: var(--ui-fs-xs); line-height: 1.5; color: var(--ui-ink-soft); }
.ui-field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--ui-fs-small); font-weight: var(--ui-fw-medium); line-height: 1.5; color: var(--ui-bad-ink); }
.ui-field__error-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }

.ui-input,
.ui-select,
.ui-textarea {
  display: block;
  width: 100%;
  min-height: var(--ui-control-h);
  padding: 0 12px;
  font: inherit;
  font-size: var(--ui-fs-body);
  color: var(--ui-ink);
  background-color: var(--ui-surface);
  border: 1px solid var(--ui-line-control);
  border-radius: var(--ui-radius-md);
  transition: border-color var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease);
}
.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--ui-ink-soft); opacity: 1; }
.ui-textarea { min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.ui-select {
  appearance: none;
  padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23233C80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: right 12px center;
}
[dir="rtl"] .ui-select { background-position: left 12px center; }
.ui-input:focus-visible,
.ui-select:focus-visible,
.ui-textarea:focus-visible {
  outline: var(--ui-focus-width) solid var(--ui-focus-color);
  outline-offset: 1px;
  border-color: var(--ui-focus-color);
}
.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] { border-color: var(--ui-bad); border-width: 1.5px; }
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled { opacity: .6; cursor: not-allowed; background-color: var(--ui-track); }
/* Digits, e-mail, phone, URL: left-to-right inside an RTL form. */
.ui-input--ltr { direction: ltr; text-align: start; unicode-bidi: isolate; }

@media (max-width: 720px) {
  .ui-input, .ui-select { min-height: var(--ui-touch-min); font-size: 16px; }   /* 16px stops iOS from zooming on focus */
  .ui-textarea { font-size: 16px; }                                              /* ...and so does a textarea (its height is its rows) */
}

/* ==========================================================================
   SEGMENTED CONTROL and TABS  (the selected-state grammar)
   Selected = white surface + navy text + turquoise underline. The state is on
   aria-checked / aria-selected; the weight change and the bar mean it is not
   colour alone.
   ========================================================================== */
.ui-segmented { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-segmented__item {
  min-height: 38px;
  padding: 0 14px;
  font: inherit;
  font-size: var(--ui-fs-control);
  font-weight: var(--ui-fw-medium);
  white-space: nowrap;
  color: var(--ui-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  cursor: pointer;
  transition: background-color var(--ui-t) var(--ui-ease), border-color var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease);
}
.ui-segmented__item:hover { background: var(--ui-tint-hover); }
.ui-segmented__item[aria-checked="true"],
.ui-segmented__item[aria-pressed="true"] {
  font-weight: var(--ui-fw-semibold);
  background: var(--ui-surface);
  border-color: var(--ui-turquoise);
  box-shadow: inset 0 -3px 0 var(--ui-turquoise);
}
.ui-segmented__item:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: var(--ui-focus-offset); }
@media (max-width: 720px) { .ui-segmented__item { min-height: var(--ui-touch-min); } }

.ui-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--ui-line);
  scrollbar-width: thin;
}
.ui-tab {
  flex: none;
  min-height: var(--ui-touch-min);
  padding: 0 14px;
  font: inherit;
  font-size: var(--ui-fs-control);
  font-weight: var(--ui-fw-medium);
  white-space: nowrap;
  color: var(--ui-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--ui-t) var(--ui-ease), color var(--ui-t) var(--ui-ease), box-shadow var(--ui-t) var(--ui-ease);
}
.ui-tab:hover { color: var(--ui-ink); background: var(--ui-tint-hover); }
.ui-tab[aria-selected="true"],
.ui-tab[aria-current="page"],
.ui-tab[aria-current="true"] {
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-ink);
  background: var(--ui-surface);
  box-shadow: inset 0 -3px 0 var(--ui-turquoise);
}
.ui-tab:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: -3px; }
.ui-tab, .ui-tab:hover { text-decoration: none; }
.ui-tab { display: inline-flex; align-items: center; }
.ui-tabpanel { padding-top: var(--ui-space-4); }
.ui-tabpanel:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: 2px; }
.ui-tab__count { margin-inline-start: 6px; font-size: var(--ui-fs-xs); font-variant-numeric: tabular-nums; }
.ui-tab__count--hot { font-weight: var(--ui-fw-bold); color: var(--ui-bad-ink); }
/* A status dot beside a tab's label. Its words are in a hidden span, so it is never colour alone. */
.ui-flagdot { flex: none; width: 8px; height: 8px; margin-inline-start: 6px; border-radius: var(--ui-radius-pill); background: var(--ui-idle); }
.ui-flagdot--bad { background: var(--ui-bad); }
.ui-flagdot--warn { background: var(--ui-warn); }
.ui-flagdot--good { background: var(--ui-good); }

/* ==========================================================================
   FILTER BAR  (search + controls + actions; collapses behind a toggle on a phone)
   ========================================================================== */
.ui-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
}
.ui-filter-bar__toggle { display: none; }
.ui-filter-bar__body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.ui-filter-bar__body > .ui-field,
.ui-filter-bar__body > .ui-input,
.ui-filter-bar__body > .ui-select { flex: 1 1 180px; width: auto; min-width: 0; }
.ui-filter-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (max-width: 720px) {
  .ui-filter-bar__toggle { display: inline-flex; align-self: flex-start; }
  .ui-filter-bar__body { display: none; flex-direction: column; align-items: stretch; }
  .ui-filter-bar__body.is-open { display: flex; }
  .ui-filter-bar__body > .ui-field,
  .ui-filter-bar__body > .ui-input,
  .ui-filter-bar__body > .ui-select { flex-basis: auto; width: 100%; }
  .ui-filter-bar__actions { margin-inline-start: 0; }
}

/* ==========================================================================
   SELECTED ROW  (lists and table rows)
   Faint turquoise tint + a turquoise rail on the inline-start edge.
   ========================================================================== */
.ui-row { position: relative; }
.ui-row.is-selected,
.ui-row[aria-selected="true"],
.ui-row[aria-current="true"] { background: var(--ui-tint-selected); }
.ui-row.is-selected::before,
.ui-row[aria-selected="true"]::before,
.ui-row[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--ui-turquoise);
}

/* ==========================================================================
   TABLE  (structure only; no existing table is migrated here)
   The wrapper is position:relative on purpose: a visually hidden element inside a
   horizontally scrolling table escapes the scroll box unless its containing block
   is the wrapper (the Recovery table's 768px overflow). It is also a focusable
   named region, so keyboard users can scroll it.
   ========================================================================== */
.ui-table-wrap {
  position: relative;
  overflow-x: auto;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
}
.ui-table-wrap:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: 2px; }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-fs-control); font-variant-numeric: tabular-nums; }
.ui-table caption { padding: 12px 14px; text-align: start; font-size: var(--ui-fs-h3); font-weight: var(--ui-fw-bold); }
.ui-table th {
  padding: 10px 14px;
  text-align: start;
  font-size: var(--ui-fs-xs);
  font-weight: var(--ui-fw-semibold);
  white-space: nowrap;
  color: var(--ui-ink-soft);
  background: var(--ui-tint);
  border-bottom: 1px solid var(--ui-line);
}
.ui-table td { padding: 11px 14px; vertical-align: middle; border-bottom: 1px solid var(--ui-line-soft); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover td { background: var(--ui-tint); }
.ui-table tbody tr.is-selected td { background: var(--ui-tint-selected); }
.ui-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--ui-turquoise); }
[dir="rtl"] .ui-table tbody tr.is-selected td:first-child { box-shadow: inset -3px 0 0 var(--ui-turquoise); }
.ui-table__num { text-align: end; white-space: nowrap; }

/* A phone shows each row as a labelled card (opt in with .ui-table--cards and data-label on each cell). */
@media (max-width: 720px) {
  .ui-table--cards, .ui-table--cards tbody, .ui-table--cards tr, .ui-table--cards td { display: block; width: 100%; }
  .ui-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-table--cards tr { padding: 8px 12px; border-bottom: 1px solid var(--ui-line); }
  .ui-table--cards td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; }
  .ui-table--cards td::before { content: attr(data-label); flex: none; color: var(--ui-ink-soft); }
  .ui-table-wrap--cards { border-radius: 14px; }
  /* In card mode the selected rail runs along the whole card, not just its first line. */
  .ui-table--cards tbody tr.is-selected td:first-child,
  [dir="rtl"] .ui-table--cards tbody tr.is-selected td:first-child { box-shadow: none; }
  .ui-table--cards tbody tr.is-selected td { background: transparent; }
  .ui-table--cards tbody tr.is-selected { background: var(--ui-tint-selected); box-shadow: inset 3px 0 0 var(--ui-turquoise); }
  [dir="rtl"] .ui-table--cards tbody tr.is-selected { box-shadow: inset -3px 0 0 var(--ui-turquoise); }
}

/* ==========================================================================
   PAGINATION  (a shell: the page owns what "next" means)
   ========================================================================== */
.ui-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ui-pagination__summary { font-size: var(--ui-fs-small); color: var(--ui-ink-soft); }
.ui-pagination__nav { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   DISCLOSURE  (<details>: technical detail the reader opens on purpose)
   ========================================================================== */
.ui-disclosure { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); }
.ui-disclosure__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ui-touch-min);
  padding: 8px var(--ui-pad);
  font-size: var(--ui-fs-body);
  font-weight: var(--ui-fw-semibold);
  cursor: pointer;
  list-style: none;
  border-radius: var(--ui-radius-lg);
}
.ui-disclosure__summary::-webkit-details-marker { display: none; }
.ui-disclosure__summary:hover { background: var(--ui-tint-hover); }
.ui-disclosure__summary:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: -2px; }
.ui-disclosure__chevron { flex: none; transition: transform var(--ui-t) var(--ui-ease); }
.ui-disclosure[open] > .ui-disclosure__summary .ui-disclosure__chevron { transform: rotate(180deg); }
.ui-disclosure[open] > .ui-disclosure__summary { border-bottom: 1px solid var(--ui-line-soft); border-end-start-radius: 0; border-end-end-radius: 0; }
.ui-disclosure__body { padding: var(--ui-pad); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.ui-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ui-num { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.ui-mono { font-family: var(--ui-font-mono); font-weight: var(--ui-fw-regular); font-variant-numeric: tabular-nums; }
.ui-muted { color: var(--ui-ink-soft); }
/* A muted explanatory paragraph (a definition, a caveat, "how to read this"). */
.ui-note { margin: 10px 0 0; font-size: var(--ui-fs-small); line-height: 1.75; color: var(--ui-ink-soft); }
.ui-note:first-child { margin-top: 0; }
.ui-link { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--ui-fw-semibold); text-decoration: underline; text-decoration-color: var(--ui-turquoise); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ui-link:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: var(--ui-focus-offset); border-radius: 4px; }
@media (max-width: 720px) { .ui-link { min-height: var(--ui-touch-min); } }
/* A sub-heading inside a card, and a hint under a table cell's main text. */
.ui-subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px 0 8px; font-size: var(--ui-fs-h3); font-weight: var(--ui-fw-bold); line-height: 1.4; }
.ui-subhead:first-child { margin-top: 0; }
.ui-subhead__note { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-regular); color: var(--ui-ink-soft); }
.ui-cell-hint { margin-top: 2px; font-size: var(--ui-fs-xs); line-height: 1.5; color: var(--ui-ink-soft); }
/* A short bulleted list inside a card or verdict. */
.ui-list { margin: 8px 0 0; padding-inline-start: 20px; font-size: var(--ui-fs-body); line-height: 1.75; list-style: disc; }
.ui-list li + li { margin-top: 2px; }
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-gap); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-segmented__item, .ui-tab, .ui-input, .ui-select, .ui-textarea, .ui-disclosure__chevron { transition: none; }
  .ui-skeleton__line { animation: none; }
  .ui-btn.is-loading::before, .ui-btn[aria-busy="true"]::before { animation: none; }
}