/* ==========================================================================
   Sayohatchi design system — component layer
   --------------------------------------------------------------------------
   One class block per component in the redesign handoff, named after it, so a
   BEHAVIOR_SPEC check maps to a place in this file. Every value is transcribed
   from design_system/components/<family>/<Name>.jsx — the reference is the
   specification. Do not round, do not snap to a 4/8pt grid, do not substitute
   a framework scale.

   Requires css/sayohatchi-tokens.css to be loaded first.

   Two things the reference could not express as inline React styles, added
   here deliberately:
     - :hover states, per tokens/motion.css and the system readme
       (primary darkens to --hover-primary; quiet controls take the neutral
       wash; rows take the faint canvas tint). 180ms on colour/border/background
       only — no transform, no scale on press.
     - :focus-visible rings, which the reference has none of and keyboard users
       need. Styled from tokens so they read as part of the system.

   House prohibitions this file must never break: no coloured left-border
   accents (attention is a full cream wash), no gradients, no blur, no shadow
   outside the three in the shape tokens, no entrance animation or shimmer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

.ds-btn:focus-visible,
.ds-chip:focus-visible,
.ds-case-item:focus-visible,
.ds-nav-item:focus-visible,
.ds-tab:focus-visible,
.ds-radio:focus-visible,
.ds-reason:focus-visible,
.ds-search__input:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
}

/* ==========================================================================
   core
   ========================================================================== */

/* Button ------------------------------------------------------------------ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  font-family: var(--font-sans);
  /* line-height stays `normal`: the reference sets none, and the button's
     height is padding + normal line box. Pinning it here would resize every
     button in the product. */
  line-height: normal;
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: var(--transition-control);
  white-space: nowrap;
  text-decoration: none;
}

.ds-btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
  font-weight: var(--weight-bold);
}
.ds-btn--primary:hover { background: var(--hover-primary); }

.ds-btn--accent {
  background: var(--action-accent);
  color: var(--action-accent-text);
  font-weight: var(--weight-bold);
}
.ds-btn--accent:hover { background: var(--hover-accent); }

.ds-btn--secondary {
  background: var(--surface-card);
  color: var(--action-quiet-text);
  border: var(--border-width) solid var(--border-default);
  font-weight: var(--weight-semibold);
}
.ds-btn--secondary:hover { background: var(--hover-quiet-bg); }

.ds-btn--quiet {
  background: var(--neutral-075);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
}
.ds-btn--quiet:hover { background: var(--hover-quiet-bg); }

.ds-btn--danger {
  background: var(--surface-card);
  color: var(--action-danger-text);
  border: var(--border-width) solid var(--border-default);
  font-weight: var(--weight-semibold);
}
.ds-btn--danger:hover { background: var(--hover-quiet-bg); }

.ds-btn--on-dark {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: var(--border-width) solid var(--border-on-dark);
  font-weight: var(--weight-semibold);
}
.ds-btn--on-dark:hover { background: var(--surface-on-dark); }

/* One control scale, everywhere. Heights are explicit rather than implied by
   padding, because padding-derived heights drift the moment two controls in a
   row carry different font sizes — which is exactly how the top bars ended up
   mismatched. Never mix radii or heights within a single row. */
.ds-btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.ds-btn--md { height: 36px; padding: 0 14px; font-size: 13px; }
.ds-btn--lg { height: 40px; padding: 0 18px; font-size: 13px; }
.ds-btn--xl {
  height: 48px;
  padding: 0 20px;
  font-size: 14.5px;
  border-radius: var(--radius-button-lg);
}
/* Full-width mobile CTAs keep the 44px floor even when the label wraps. */
.ds-btn--full.ds-btn--xl { height: auto; min-height: 48px; padding: 15px 20px; }

.ds-btn--full { width: 100%; }

.ds-btn[disabled],
.ds-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ds-btn[disabled]:hover,
.ds-btn--disabled:hover { background-color: inherit; }

.ds-btn__shortcut {
  font: var(--type-eyebrow);
  opacity: 0.55;
  margin-left: 2px;
}

/* Badge ------------------------------------------------------------------- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--pad-chip);
  border-radius: var(--radius-chip);
  font: var(--type-label-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.ds-badge--ok        { background: var(--status-ok-bg);        color: var(--status-ok-text); }
.ds-badge--attention { background: var(--status-attention-bg); color: var(--status-attention-text); }
.ds-badge--danger    { background: var(--status-danger-bg);    color: var(--status-danger-text); }
.ds-badge--neutral   { background: var(--status-neutral-bg);   color: var(--status-neutral-text); }
.ds-badge--external  { background: var(--status-external-bg);  color: var(--status-external-text); }
.ds-badge--dark      { background: var(--surface-dark);        color: var(--lime-500); }

/* FilterChip -------------------------------------------------------------- */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pad-filter);
  border-radius: var(--radius-control);
  font: var(--type-label-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition-control);
  background: var(--surface-card);
  color: var(--text-body);
  border: var(--border-width) solid var(--border-default);
}
.ds-chip:hover { background: var(--hover-quiet-bg); }

.ds-chip--selected {
  font-weight: var(--weight-bold);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border: 0;
}
.ds-chip--selected:hover { background: var(--surface-dark); }

.ds-chip__count {
  font: var(--type-mono-data);
  color: var(--text-faint);
}
.ds-chip--selected .ds-chip__count { color: var(--lime-500); }

/* Card -------------------------------------------------------------------- */
.ds-card {
  border-radius: var(--radius-card-lg);
  padding: var(--pad-card);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
}
.ds-card--attention { background: var(--surface-attention); }
.ds-card--advice    { background: var(--lime-050); border-color: var(--border-accent); }
.ds-card--danger    { border-color: var(--border-danger); }
.ds-card--dark      { background: var(--surface-dark); border: 0; color: var(--text-on-dark); }
.ds-card--sunken    { background: var(--surface-sunken); border: 0; }
.ds-card--dashed    { border: var(--border-width-dashed) dashed var(--border-dashed); }

/* Eyebrow ----------------------------------------------------------------- */
.ds-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.ds-eyebrow--sm      { font: var(--type-eyebrow-sm); letter-spacing: var(--tracking-eyebrow); }
.ds-eyebrow--accent  { color: var(--text-accent); }
.ds-eyebrow--on-dark { color: var(--text-on-dark-faint); }
.ds-eyebrow--body    { color: var(--text-body); }

/* ==========================================================================
   forms
   ========================================================================== */

/* SearchField ------------------------------------------------------------- */
.ds-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--radius-control);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
}
.ds-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: var(--type-body-sm);
  color: var(--text-strong);
}
.ds-search__input::placeholder { color: var(--text-muted); }
.ds-search__shortcut {
  margin-left: auto;
  font: var(--type-eyebrow);
  color: var(--text-faint);
}

.ds-search--on-dark { border-color: var(--border-on-dark); background: transparent; }
.ds-search--on-dark .ds-search__input { color: var(--text-on-dark); }
.ds-search--on-dark .ds-search__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.ds-search--on-dark .ds-search__shortcut { color: rgba(255, 255, 255, 0.4); }

/* RadioOption ------------------------------------------------------------- */
.ds-radio {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: var(--transition-control);
  background: transparent;
  border: var(--border-width) solid var(--border-default);
}
.ds-radio:hover { background: var(--hover-quiet-bg); }

.ds-radio--selected {
  background: var(--surface-selected);
  border: var(--border-width-selected) solid var(--border-strong);
}
.ds-radio--selected:hover { background: var(--surface-selected); }

.ds-radio__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  border: 2px solid var(--neutral-250);
}
.ds-radio--selected .ds-radio__dot { border: 5px solid var(--green-700); }

.ds-radio__body { flex: 1; min-width: 0; }
.ds-radio__label,
.ds-radio__hint { display: block; }
.ds-radio__label { font: var(--type-label-lg); color: var(--text-body); }
.ds-radio--selected .ds-radio__label { color: var(--text-strong); }
.ds-radio__hint { margin-top: 4px; font: var(--type-label-sm); color: var(--text-muted); }
.ds-radio--selected .ds-radio__hint { color: var(--text-accent); }
.ds-radio__recommended { font: var(--type-label-sm); color: var(--text-accent); }

/* Dropzone ---------------------------------------------------------------- */
.ds-dropzone {
  border: var(--border-width-dashed) dashed var(--neutral-300);
  border-radius: var(--radius-card);
  background: var(--neutral-025);
  padding: 32px;
  text-align: center;
}
.ds-dropzone__icon { display: inline-block; color: var(--green-700); }
.ds-dropzone__title { margin-top: 12px; font: var(--type-title-4); color: var(--text-strong); }
.ds-dropzone__hint { margin-top: 6px; font: var(--type-body-sm); color: var(--text-muted); }
.ds-dropzone__actions {
  margin-top: 16px;
  display: flex;
  gap: var(--gap-field);
  justify-content: center;
}
.ds-dropzone--active { border-color: var(--green-700); background: var(--surface-selected); }

/* TextField --------------------------------------------------------------- */
.ds-field { display: block; }
.ds-field__label,
.ds-field__hint { display: block; }
.ds-field__label { font: var(--type-label-sm); color: var(--text-body); margin-bottom: 7px; }
.ds-field__control {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-button);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  font: var(--type-body);
  color: var(--text-strong);
  transition: var(--transition-control);
}
.ds-field__control::placeholder { color: var(--text-muted); }
.ds-field__control:focus-visible { outline: 0; border-color: var(--border-strong); }
.ds-field--prefilled .ds-field__control { background: var(--surface-selected); }
.ds-field__hint {
  margin-top: 6px;
  font: var(--type-label-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.ds-field--prefilled .ds-field__hint { color: var(--text-accent); }

/* ==========================================================================
   data
   ========================================================================== */

/* StatCard ---------------------------------------------------------------- */
.ds-statcard {
  border-radius: var(--radius-card);
  padding: 17px 19px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
}
.ds-statcard--dark { background: var(--surface-dark); border: 0; }

.ds-statcard__row {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gap-field);
}
.ds-statcard__value { font: var(--type-metric); white-space: nowrap; color: var(--text-strong); }
.ds-statcard--dark .ds-statcard__value { color: var(--text-on-dark); }
.ds-statcard__unit { font: var(--type-label); color: var(--text-muted); }
.ds-statcard__delta { font: var(--type-label); font-weight: var(--weight-bold); color: var(--text-muted); }
.ds-statcard__delta--good { color: var(--green-700); }
.ds-statcard__delta--bad  { color: var(--red-700); }
.ds-statcard--dark .ds-statcard__delta--good { color: var(--lime-500); }
.ds-statcard--dark .ds-statcard__delta--bad  { color: var(--red-on-dark); }
.ds-statcard__note {
  margin-top: 7px;
  font: var(--type-label-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.ds-statcard--dark .ds-statcard__note { color: var(--text-on-dark-muted); }

/* StepProgress ------------------------------------------------------------
   Segmented and counted. This is the ONLY progress form allowed for a
   person's journey — a percentage bar is for true ratios. */
.ds-steps { display: flex; align-items: center; gap: var(--gap-field); }
.ds-steps__label {
  font: var(--type-label);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.ds-steps--on-dark .ds-steps__label { color: var(--text-on-dark); }
.ds-steps__track { flex: 1; display: flex; gap: 4px; }
.ds-steps__seg {
  flex: 1;
  height: var(--bar-height);
  border-radius: var(--radius-bar);
  background: var(--progress-track);
}
.ds-steps__seg--done { background: var(--progress-fill-done); }
.ds-steps--on-dark .ds-steps__seg { background: var(--progress-track-on-dark); }
.ds-steps--on-dark .ds-steps__seg--done { background: var(--lime-500); }

/* ProgressBar -------------------------------------------------------------
   True ratios only (approval rate, bottleneck share, the case-header summary).
   Never as instruction to a person. */
.ds-bar { display: flex; align-items: center; gap: var(--gap-inline); flex: 1; min-width: 0; }
.ds-bar__track {
  flex: 1;
  height: var(--bar-height);
  border-radius: var(--radius-bar-lg);
  overflow: hidden;
  background: var(--progress-track);
}
.ds-bar__fill { height: 100%; background: var(--progress-fill); }
.ds-bar__fill--done   { background: var(--progress-fill-done); }
.ds-bar__fill--accent { background: var(--progress-fill); }
.ds-bar__fill--mid    { background: var(--progress-fill-mid); }
.ds-bar__fill--low    { background: var(--neutral-300); }
.ds-bar__fill--danger { background: var(--red-700); }
.ds-bar__value { font: var(--type-mono-data); color: var(--text-strong); }
.ds-bar--on-dark .ds-bar__track { background: var(--progress-track-on-dark); }
.ds-bar--on-dark .ds-bar__value { color: var(--lime-500); }

/* MiniBars ---------------------------------------------------------------- */
.ds-minibars { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.ds-minibars__bar { flex: 1; border-radius: var(--radius-bar); background: var(--green-100); }
.ds-minibars__bar--last { background: var(--green-700); }
.ds-minibars--danger .ds-minibars__bar { background: var(--red-100); }
.ds-minibars--danger .ds-minibars__bar--last { background: var(--red-700); }

/* DataTable ---------------------------------------------------------------
   Desktop-only and horizontally scrolling — it never clips. On mobile the
   same data becomes one card per case (see .ds-table--cards below). */
.ds-table {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card-lg);
  overflow-x: auto;
  overflow-y: hidden;
}
.ds-table__head,
.ds-table__row {
  display: grid;
  gap: var(--gap-table);
  /* grid-template-columns and min-width are set per table from the column
     spec, since they are data, not style. */
}
.ds-table__head {
  padding: 11px 18px;
  background: var(--surface-sunken);
  border-bottom: var(--border-width) solid var(--border-default);
  font: var(--type-mono-head);
  letter-spacing: var(--tracking-mono-head);
  color: var(--text-muted);
  text-transform: uppercase;
}
.ds-table__row {
  align-items: center;
  padding: var(--pad-row);
  border-bottom: var(--border-width) solid var(--divider);
}
.ds-table__row:last-child { border-bottom: 0; }
.ds-table__row--attention { background: var(--surface-attention); }
.ds-table__row--dimmed { opacity: 0.62; }
.ds-table__cell { min-width: 0; }
.ds-table__cell--right { text-align: right; }
.ds-table__cell--center { text-align: center; }

/* ==========================================================================
   navigation
   ========================================================================== */

/* TopBar ------------------------------------------------------------------ */
.ds-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-topbar);
  background: var(--surface-card);
  border-bottom: var(--border-width) solid var(--border-default);
}
.ds-topbar--dark { background: var(--surface-dark); border-bottom: 0; }
.ds-topbar__left  { display: flex; align-items: center; gap: 14px; }
.ds-topbar__right { display: flex; align-items: center; gap: var(--gap-card); }

/* The mark renders only from assets/logo.svg and assets/logo-on-dark.svg.
   No screen draws its own. */
.ds-logo {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-control);
  flex: none;
}

.ds-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--weight-bold) 11px/1 var(--font-sans);
  flex: none;
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.ds-avatar--plate   { background: var(--neutral-075); color: var(--text-strong); }
.ds-avatar--on-dark { background: rgba(255, 255, 255, 0.14); color: var(--text-on-dark); }

/* The language control sits beside the sign-out button, so it is on the same
   scale as every other header control: h36, radius 11, same border and hover.
   It was padding-sized, which is why the two drifted apart. */
.ds-langchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-button);
  background: var(--surface-card);
  font: var(--weight-medium) 11px / 1 var(--font-mono);
  letter-spacing: var(--tracking-mono-head);
  text-transform: uppercase;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-control);
}
.ds-langchip:hover { background: var(--hover-quiet-bg); }

/* Belt and braces: nothing in a top bar escapes the 36px row. */
.ds-topbar__right > .ds-btn,
.ds-topbar__right .ds-btn--sm { height: 36px; border-radius: var(--radius-button); }

/* SidebarNav -------------------------------------------------------------- */
.ds-sidebar {
  width: var(--nav-width);
  background: var(--surface-card);
  border-right: var(--border-width) solid var(--border-default);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ds-sidebar--agency { width: var(--nav-width-agency); }
.ds-sidebar__head { padding: 0 10px 14px; }
.ds-sidebar__workspace { margin-top: 5px; font: var(--type-title-4); color: var(--text-strong); }

.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: var(--transition-control);
  background: transparent;
  font: var(--type-label);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  text-decoration: none;
  border: 0;
  width: 100%;
  text-align: left;
}
.ds-nav-item:hover { background: var(--hover-quiet-bg); }
.ds-nav-item--active { background: var(--action-primary); color: var(--text-on-dark); }
.ds-nav-item--active:hover { background: var(--action-primary); }
.ds-nav-item--spacer { margin-top: auto; }

.ds-nav-item__count {
  margin-left: auto;
  font: var(--type-mono-head);
  color: var(--text-faint);
}
.ds-nav-item__count--urgent { color: var(--red-700); }
.ds-nav-item--active .ds-nav-item__count { color: rgba(255, 255, 255, 0.6); }

/* PageHeader -------------------------------------------------------------- */
.ds-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.ds-page-header__title {
  margin: 12px 0 0;
  font: var(--type-title-1);
  letter-spacing: var(--tracking-title);
  color: var(--text-strong);
}
.ds-page-header__subtitle { margin: 7px 0 0; font: var(--type-body); color: var(--text-body); }
.ds-page-header__actions { display: flex; gap: var(--gap-inline); flex: none; }

/* TabBar ------------------------------------------------------------------ */
.ds-tabs {
  display: flex;
  gap: 22px;
  border-bottom: var(--border-width) solid var(--border-default);
}
.ds-tab {
  padding: 0 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: var(--type-label);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  transition: var(--transition-control);
}
.ds-tab:hover { color: var(--text-body); }
.ds-tab--active {
  border-bottom-color: var(--green-900);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
.ds-tab__count { color: var(--text-muted); }
.ds-tab__count--urgent { color: var(--red-700); }

.ds-tabs--pill { gap: 11px; border-bottom: 0; }
.ds-tabs--pill .ds-tab {
  padding: 5px 11px;
  border-radius: var(--radius-chip);
  border-bottom: 0;
  font: var(--type-label-sm);
  font-weight: var(--weight-semibold);
}
.ds-tabs--pill .ds-tab--active {
  background: var(--neutral-075);
  color: var(--text-body);
  font-weight: var(--weight-bold);
}

/* ==========================================================================
   feedback
   ========================================================================== */

/* AdviceCard -------------------------------------------------------------
   AI is advisory. The card recommends, routes to a human, and hands the
   decision back — it never refuses on its own. */
.ds-advice {
  background: var(--lime-050);
  border: var(--border-width) solid var(--border-accent);
  border-radius: var(--radius-card);
  padding: 13px 16px;
}
.ds-advice--panel {
  background: var(--surface-card);
  border-color: var(--border-default);
  border-radius: var(--radius-card-lg);
  padding: var(--pad-card);
}
.ds-advice__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-field); }
.ds-advice__title {
  font: var(--type-label);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  color: var(--text-strong);
}
.ds-advice__action {
  margin-left: auto;
  font: var(--type-label-sm);
  color: var(--text-accent);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.ds-advice__body { margin: var(--gap-field) 0 0; font: var(--type-body-sm); color: var(--text-body); }
.ds-advice__findings { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.ds-advice__finding {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font: var(--type-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.ds-advice__finding--warn { color: var(--amber-700); }
.ds-advice__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--green-700); }
.ds-advice__finding--warn .ds-advice__dot { background: var(--amber-500); }

/* EmptyState / ErrorState -------------------------------------------------
   Every list surface ships base + empty + loading + error. An error names what
   failed in Uzbek, says what the user is seeing instead, and states what was
   NOT lost; the raw upstream string is demoted to the mono code line. */
.ds-empty,
.ds-error {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card-lg);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}
.ds-empty__icon,
.ds-error__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-100);
  color: var(--green-700);
}
.ds-error__icon { background: var(--red-100); color: var(--red-700); }

.ds-empty__title,
.ds-error__title {
  margin: 18px 0 0;
  font: var(--type-title-2);
  letter-spacing: var(--tracking-title);
  color: var(--text-strong);
}
.ds-empty__body,
.ds-error__body { margin: 10px 0 0; font: var(--type-body); color: var(--text-body); }

/* The "given" variant leads with work the platform already did. */
.ds-empty__given { margin-top: 18px; display: flex; flex-direction: column; gap: var(--gap-field); }
.ds-empty__given-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--type-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.ds-empty__given-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--green-700);
  flex: none;
}

.ds-error__reassurance {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  font: var(--type-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.ds-error__code {
  margin-top: 14px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-faint);
}

.ds-empty__actions,
.ds-error__actions { margin-top: auto; padding-top: 18px; display: flex; gap: var(--gap-field); }

/* SkeletonRow -------------------------------------------------------------
   Static. No shimmer, no fade-in — motion is colour/border/background only. */
.ds-skeleton {
  display: flex;
  align-items: center;
  gap: var(--gap-card);
  padding: 15px 0;
  border-top: var(--border-width) solid var(--divider-soft);
}
.ds-skeleton--dimmed { opacity: 0.55; }
.ds-skeleton__main { flex: 1; }
.ds-skeleton__line {
  width: 130px;
  height: 12px;
  border-radius: 5px;
  background: var(--neutral-150);
}
.ds-skeleton__line--sub {
  margin-top: 8px;
  width: 170px;
  height: 10px;
  background: var(--divider-soft);
}
.ds-skeleton__pill { width: 88px; height: 22px; border-radius: 8px; background: var(--divider-soft); }
.ds-skeleton__tail { width: 44px; height: 12px; border-radius: 5px; background: var(--divider-soft); }

/* Note --------------------------------------------------------------------
   One plain fact per screen ("30 kun amal qiladi", "hech qanday ma'lumot
   yo'qolmadi"). Never a countdown, never red urgency. */
.ds-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--radius-card);
  font: var(--type-body-sm);
  font-weight: var(--weight-medium);
  background: var(--surface-sunken);
  color: var(--text-body);
}
.ds-note--attention { background: var(--surface-attention); }
.ds-note--on-dark   { background: var(--surface-on-dark); color: var(--text-on-dark-muted); }
.ds-note__icon { color: var(--text-muted); flex: none; }

/* ==========================================================================
   patterns
   ========================================================================== */

/* CaseHeader --------------------------------------------------------------
   Exactly ONE primary action, derived from case status. Never a generic
   Save/Submit next to a status readout. */
.ds-case-header {
  background: var(--surface-dark);
  border-radius: var(--radius-card-lg);
  padding: var(--pad-card-lg);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.ds-case-header__main { min-width: 260px; flex: 1 1 260px; }
.ds-case-header__title {
  margin: var(--gap-field) 0 0;
  font: var(--type-title-2);
  letter-spacing: var(--tracking-title);
  color: var(--text-on-dark);
}
.ds-case-header__progress { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.ds-case-header__progress .ds-bar { width: 160px; flex: none; }
.ds-case-header__meta {
  font: var(--type-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-on-dark-muted);
}
.ds-case-header__aside { text-align: right; flex: none; }
.ds-case-header__action { margin-top: var(--gap-field); }
.ds-case-header__secondary {
  margin-top: var(--gap-inline);
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

/* CaseListItem ------------------------------------------------------------
   Attention is a FULL cream wash across the row. A coloured left-border accent
   was tried in design and rejected — never reintroduce one. */
.ds-case-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 0;
  padding: 14px 20px;
  border-bottom: var(--border-width) solid var(--divider);
  background: transparent;
  cursor: pointer;
  transition: var(--transition-control);
}
.ds-case-item:hover { background: var(--hover-row-bg); }
.ds-case-item--attention { background: var(--surface-attention); }
.ds-case-item--attention:hover { background: var(--surface-attention); }
.ds-case-item--selected { background: var(--surface-selected); }
.ds-case-item--selected:hover { background: var(--surface-selected); }
.ds-case-item--dimmed { opacity: 0.62; }

.ds-case-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ds-case-item__meta,
.ds-case-item__status,
.ds-case-item__steps,
.ds-case-item__action { display: block; }
.ds-case-item__name { font: var(--type-label-lg); color: var(--text-strong); }
.ds-case-item__ref { font: var(--type-eyebrow); color: var(--text-faint); }
.ds-case-item__meta {
  margin-top: 5px;
  font: var(--type-label-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
/* Status is the blocker in the user's words, not a system enum. */
.ds-case-item__status {
  margin-top: var(--gap-field);
  font: var(--type-label-sm);
  font-weight: var(--weight-bold);
  color: var(--text-body);
}
.ds-case-item__status--danger    { color: var(--red-700); }
.ds-case-item__status--attention { color: var(--amber-700); }
.ds-case-item__status--ok        { color: var(--green-700); }
.ds-case-item__steps  { margin-top: var(--gap-field); }
.ds-case-item__action { margin-top: 13px; }

/* ChecklistItem ----------------------------------------------------------- */
.ds-checklist-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 10px;
  border-radius: var(--radius-button);
  background: transparent;
  border: var(--border-width) solid transparent;
}
.ds-checklist-item--current {
  background: var(--surface-selected);
  border-color: #E4EDE7;
}
.ds-checklist-item__box {
  width: var(--check-size);
  height: var(--check-size);
  border-radius: 6px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid var(--neutral-200);
  color: var(--neutral-000);
}
.ds-checklist-item--done .ds-checklist-item__box      { background: var(--green-700); border: 0; }
.ds-checklist-item--current .ds-checklist-item__box   { background: var(--surface-card); border: 2px solid var(--lime-500); }
.ds-checklist-item--attention .ds-checklist-item__box { background: var(--amber-100); border: 2px solid var(--amber-500); }

.ds-checklist-item__body { flex: 1; min-width: 0; }
.ds-checklist-item__label {
  font: var(--type-label);
  font-weight: var(--weight-bold);
  color: var(--text-faint);
}
.ds-checklist-item--done .ds-checklist-item__label {
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.ds-checklist-item--current .ds-checklist-item__label,
.ds-checklist-item--attention .ds-checklist-item__label { color: var(--text-strong); }
.ds-checklist-item__hint {
  margin-top: 3px;
  font: var(--type-label-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.ds-checklist-item--attention .ds-checklist-item__hint { color: var(--amber-700); }

/* TimelineItem ------------------------------------------------------------ */
.ds-timeline-item { display: flex; gap: 11px; }
.ds-timeline-item__dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  margin-top: 5px;
  flex: none;
  background: var(--neutral-250);
}
.ds-timeline-item--active .ds-timeline-item__dot {
  width: 9px;
  height: 9px;
  background: var(--green-700);
}
.ds-timeline-item__body { min-width: 0; }
.ds-timeline-item__title {
  font: var(--type-label);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--text-strong);
}
.ds-timeline-item__actor { font-weight: var(--weight-bold); }

/* Audit rendering: every entry shows the before -> after value change. */
.ds-timeline-item__diff {
  margin-top: var(--gap-field);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: var(--radius-button);
  background: var(--surface-sunken);
}
.ds-timeline-item__from {
  font: var(--type-mono-data);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-decoration: line-through;
}
.ds-timeline-item__arrow { font: var(--type-label); color: var(--text-faint); }
.ds-timeline-item__to { font: var(--type-mono-data); color: var(--green-700); }
.ds-timeline-item__meta {
  margin-top: var(--gap-inline);
  font: var(--type-label-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.ds-timeline-item__time {
  margin-top: 3px;
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-faint);
}

.ds-timeline-item--on-dark .ds-timeline-item__dot { background: rgba(255, 255, 255, 0.3); }
.ds-timeline-item--on-dark.ds-timeline-item--active .ds-timeline-item__dot { background: var(--lime-500); }
.ds-timeline-item--on-dark .ds-timeline-item__title { color: var(--text-on-dark); }
.ds-timeline-item--on-dark .ds-timeline-item__meta { color: var(--text-on-dark-muted); }

/* DecisionBar -------------------------------------------------------------
   Evidence next to verdict: this never renders on a screen that does not show
   the document it decides on. */
.ds-decision__options {
  margin-top: var(--gap-card);
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.ds-decision--horizontal .ds-decision__options { flex-direction: row; gap: var(--gap-field); }
.ds-decision__reasons-label { margin-top: 14px; }
.ds-decision__reasons { margin-top: var(--gap-field); display: flex; flex-wrap: wrap; gap: 6px; }
.ds-reason {
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--neutral-075);
  font: var(--type-label-sm);
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-control);
}
.ds-reason:hover { background: var(--neutral-100); }
.ds-decision__footnote {
  margin-top: 14px;
  font: var(--type-label-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--text-faint);
}

/* ==========================================================================
   Shell primitives shared by the desktop kits
   ========================================================================== */

.ds-shell { height: 100vh; display: flex; flex-direction: column; }
.ds-shell__body { flex: 1; display: flex; min-height: 0; background: var(--surface-canvas); }
.ds-shell__content { flex: 1; min-width: 0; overflow-y: auto; padding: var(--pad-page); }

/* The 392px work queue. It never leaves the screen — selecting a case opens
   the detail beside it, so triage never navigates away. */
.ds-case-list {
  width: var(--list-width);
  border-right: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: none;
}
.ds-case-list__head { padding: 18px 20px 12px; border-bottom: var(--border-width) solid var(--divider); }
.ds-case-list__title-row { display: flex; align-items: baseline; justify-content: space-between; }
.ds-case-list__title { margin: 0; font: var(--type-title-2); letter-spacing: var(--tracking-title); }
.ds-case-list__count { font: var(--type-mono-data); color: var(--text-muted); }
.ds-case-list__filters { display: flex; gap: 6px; margin-top: 13px; flex-wrap: wrap; }
.ds-case-list__sort { margin-top: 11px; }
.ds-case-list__scroll { flex: 1; overflow-y: auto; }

/* ==========================================================================
   Mobile
   Tables become one card per case, each with its own action. Hit targets are
   never under 44px, which is why mobile CTAs are full-width at 15px padding.
   ========================================================================== */
@media (max-width: 767px) {
  .ds-table--cards { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .ds-table--cards .ds-table__head { display: none; }
  .ds-table--cards .ds-table__row {
    display: block;
    min-width: 0;
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-card);
    padding: var(--pad-card);
    margin-bottom: var(--gap-card);
  }
  .ds-table--cards .ds-table__row--attention { background: var(--surface-attention); }
  .ds-table--cards .ds-table__cell { text-align: left; }
  .ds-table--cards .ds-table__cell + .ds-table__cell { margin-top: var(--gap-field); }

  .ds-case-list { width: 100%; border-right: 0; }

  .ds-btn--xl,
  .ds-btn--mobile-cta { width: 100%; min-height: var(--hit-target); }
}

/* ==========================================================================
   Shared layout patterns (fix round 1, rule 0)
   --------------------------------------------------------------------------
   Three patterns that were missing, which is why generated markup fell back
   into raw inline text flow: label+value ran together ("RejaVol 1000"), list
   rows became em-dash separated runs, and cards rendered title-only.

   Anything that emits a label with a value, or a name with a chip, uses one of
   these. Nothing concatenates a label and a value into a single text node.
   ========================================================================== */

/* Key–value: case summaries, settings, stat readouts.
   The label and the value are SEPARATE block elements, always. */
.ds-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px 28px;
  margin: 0;
}
.ds-kv__item { min-width: 0; }
.ds-kv__label {
  display: block;
  font: var(--weight-medium) 10px / 1 var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-kv__value {
  display: block;
  margin: 5px 0 0;
  font: var(--weight-semibold) 13.5px / 1.35 var(--font-sans);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
/* An absent value reads as "—", not as an empty gap. */
.ds-kv__value--empty { color: var(--text-faint); }

/* List row: agents, queue previews, embassy accounts. Never an inline run. */
.ds-row {
  display: flex;
  align-items: center;
  gap: var(--gap-card);
  padding: 12px 0;
  border-top: var(--border-width) solid var(--divider);
}
.ds-row:first-child { border-top: 0; }
.ds-row__main { flex: 1; min-width: 0; }
.ds-row__title { font: var(--weight-semibold) 13.5px / 1.3 var(--font-sans); color: var(--text-strong); }
.ds-row__sub {
  display: block;
  margin-top: 3px;
  font: var(--weight-regular) 11px / 1.3 var(--font-mono);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.ds-row__meta { font: var(--type-mono-data); color: var(--text-body); flex: none; }
.ds-row__actions { display: flex; align-items: center; gap: var(--gap-inline); flex: none; }

/* A card never renders title-only. Either rows, this, or no card at all. */
.ds-card-empty {
  padding: 28px 0;
  text-align: center;
  font: var(--weight-regular) 13px / 1.5 var(--font-sans);
  color: var(--text-muted);
}
.ds-card-empty__action { margin-top: 12px; }

/* Cards within a section never touch. */
.ds-section-grid { display: grid; gap: 16px; }

/* A card header: title left, count + quiet action right. */
.ds-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-card);
  margin-bottom: var(--gap-card);
}
.ds-card-head__title { margin: 0; font: var(--type-title-3); color: var(--text-strong); }
.ds-card-head__left { display: flex; align-items: center; gap: var(--gap-inline); min-width: 0; }
.ds-card-head__count {
  font: var(--type-mono-data);
  color: var(--text-muted);
  padding: var(--pad-chip);
  border-radius: var(--radius-chip);
  background: var(--status-neutral-bg);
}

/* Selectable option card: required-document pickers and similar grids. */
.ds-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ds-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-button);
  background: var(--surface-card);
  cursor: pointer;
  transition: var(--transition-control);
}
.ds-option:hover { background: var(--hover-quiet-bg); }
.ds-option input[type="checkbox"],
.ds-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--green-700);
}
.ds-option__label { font: var(--weight-semibold) 13px / 1.35 var(--font-sans); color: var(--text-strong); }
.ds-option:has(input:checked) {
  background: var(--surface-selected);
  border: var(--border-width-selected) solid var(--border-strong);
}

.ds-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-avatar);
  background: var(--neutral-075);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font: var(--weight-semibold) 11px / 1 var(--font-mono);
}