/* ============================================================
   crp-ant.css — "Ant-inspired" skin for the bespoke kitchen sink.

   Ant Design / Arco Design / T Design share a visual language:
   14px base type, 6px radii, 32px controls, hairline neutral
   borders, very low-elevation shadows, a soft focus glow and
   flat (non-glossy) solid buttons. This overlay re-points the
   crp.css design tokens and re-skins the key components to that
   idiom while keeping the CRP brand hue (#1e5a96).

   Loaded AFTER crp.css + crp-kitchen.css, so equal-specificity
   rules here win. Purely presentational — no markup changes.
   ============================================================ */

:root {
  /* geometry */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --control-h: 32px;

  /* type — Ant/Arco sit at a 14px base */
  --fs-base: 0.875rem;   /* 14 */
  --lh-body: 1.5715;

  /* neutrals — flatter and greyer than the CRP default */
  --bg: #f5f5f5;
  --surface-2: #fafafa;
  --line: #d9d9d9;
  --line-soft: #f0f0f0;
  --ink: #1f1f1f;
  --ink-dim: #595959;
  /* Ant's tertiary is #8c8c8c, which measures 3.08-3.36:1 on our
     light surfaces — below AA for the small text it carries
     (card subtitles, form hints, progress labels). #6f6f6f holds
     4.61-5.02:1 on #ffffff, #fafafa and #f5f5f5 alike. */
  --ink-mute: #6f6f6f;

  /* state ramps — softer, Ant-flavoured */
  --success: #237804;
  --success-soft: #f6ffed;
  --warning: #ad6800;
  --warning-soft: #fffbe6;
  --danger: #cf1322;
  --danger-soft: #fff2f0;
  --brand-soft: #e6f4ff;

  /* elevation — barely-there layered shadows */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .03), 0 1px 6px -1px rgba(0, 0, 0, .02), 0 2px 4px 0 rgba(0, 0, 0, .02);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12), 0 9px 28px 8px rgba(0, 0, 0, .05);
  --shadow-3: 0 9px 28px 8px rgba(0, 0, 0, .05), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12);

  --focus-ring: 0 0 0 2px rgba(30, 90, 150, .12);
  --dur: 200ms;
}

/* ── Dark mode ─────────────────────────────────────────────
   crp-ant.css re-points the light neutral ramp on :root, so it
   must carry the matching dark ramp too. Without it this file's
   :root block has equal specificity to crp.css's .dark-mode but
   later source order, so it clobbers the flip: dark mode would
   render with the light --bg (#f5f5f5) and a dark --ink
   (#1f1f1f) — an invisible-on-dark body. Values mirror the
   crp.css dark block; Ant keeps its flatter, greyer neutrals.

   This block is inert for any app that has not opted in via
   crp_ui_head(['dark_mode' => true]). Today that is crk-chat and
   the ICF Ant demo; they share the per-origin 'darkMode' key, so a
   user in dark mode on one is in dark mode on the other. Apps that
   have not opted in never receive the .dark-mode class and are
   byte-for-byte unaffected. */
.dark-mode {
  --bg:        #141414;
  --surface-2: #262626;
  --line:      #3d3d3d;
  --line-soft: #2b2b2b;
  --ink:       #f0f0f0;
  --ink-dim:   #c2c2c2;
  --ink-mute:  #9a9a9a;

  --success:      #4b9a2f;
  --success-soft: #16240f;
  --danger:       #d84a4a;
  --danger-soft:  #2a1414;
  --warning:      #c08a2e;
  --warning-soft: #2a2114;
  --brand-soft:   #12293c;
  /* Brand is also a *background* colour (primary buttons, the notice
     bar), where it carries white text at 5.36:1 — so it cannot simply
     be lightened for use as text. This ramp is for brand-coloured
     foreground only: it holds 5.14-6.35:1 on --brand-soft, --surface
     and --bg. */
  --brand-text:   #4a9fd8;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 20px -10px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 36px -18px rgba(0, 0, 0, 0.6);

  --focus-ring: 0 0 0 2px rgba(74, 159, 216, 0.45);
}

/* Re-assert the high-contrast hairline here: crp.css sets it, but
   this file loads later and would otherwise win. */
@media (prefers-contrast: high) {
  .dark-mode { --line: var(--ink-dim); }
}

/* The tinted-state hairlines above are light pastels that read as
   glare on a dark ground; use the dark-ramp hue at low alpha. */
.dark-mode .tag-primary, .dark-mode .badge-primary,
.dark-mode .badge-info, .dark-mode .chip-generating,
.dark-mode .alert-info { border-color: rgba(74, 134, 196, 0.45); }
.dark-mode .badge-success, .dark-mode .chip-completed,
.dark-mode .alert-success { border-color: rgba(75, 154, 47, 0.45); }
.dark-mode .badge-warning, .dark-mode .chip-pending,
.dark-mode .alert-warning { border-color: rgba(192, 138, 46, 0.45); }
.dark-mode .badge-danger, .dark-mode .chip-error,
.dark-mode .alert-danger { border-color: rgba(216, 74, 74, 0.45); }
.dark-mode .switch-track { background: var(--line); }
/* crp.css hardcodes the app bar's translucent white (rgba(255,255,255,.92))
   with no .dark-mode counterpart, so in dark mode it stays near-white under
   #f0f0f0 text — an invisible bar. Mirroring the light value off --surface
   keeps the backdrop blur working instead of re-introducing a literal. */
.dark-mode .appbar { background: color-mix(in srgb, var(--surface) 92%, transparent); }

/* Brand used as *foreground* on a dark ground measured 2.78-3.94:1
   against the old tokens. --brand / --brand-deep cannot be lightened
   in place because they are simultaneously backgrounds carrying white
   text, so every brand-coloured foreground in dark mode is re-pointed
   at --brand-text (5.14-6.35:1) here instead. Foreground only: the
   .btn-primary / .progress-bar / .switch fills keep --brand. */
.dark-mode a:hover,
.dark-mode .btn-ghost,
.dark-mode .btn-ghost:hover,
.dark-mode .btn-secondary:hover,
.dark-mode .btn-outline:hover,
.dark-mode .card-icon,
.dark-mode .upload-icon,
.dark-mode .toast-icon,
.dark-mode .spinner,
.dark-mode .followup,
.dark-mode .toc-item.is-active,
.dark-mode .avatar,
.dark-mode .radio-item:has(input:checked),
.dark-mode .checkbox-item:has(input:checked),
.dark-mode .tag-primary,
.dark-mode .badge-primary,
.dark-mode .badge-info,
.dark-mode .chip-generating,
.dark-mode .alert-info,
.dark-mode .alert-info .alert-title,
.dark-mode .sidebar-item.is-active,
.dark-mode .tabs .is-active,
.dark-mode .tabs [aria-selected="true"],
.dark-mode .step.is-done .step-dot { color: var(--brand-text); }

/* White .82 on --brand-deep measured 4.18:1. Darkening the bar keeps
   the tint while lifting the label to 6.11:1. */
.dark-mode .notice-bar { background: #2a5f92; }

/* ── Typography ──────────────────────────────────────────── */
body { font-size: var(--fs-base); }
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--ink); }
.kicker { font-weight: 600; letter-spacing: .08em; }
.lede { color: var(--ink-dim); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  height: var(--control-h);
  padding: 0 15px;
  border-radius: var(--r-md);
  font-weight: 400;
  box-shadow: none;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* crp.css sets `.btn-icon { padding: 0 }`, but the `padding: 0 15px` above is an
   equal-specificity rule in a later file, so it wins and an icon-only button ends
   up with a content box of `--control-h - 30px` (2px at 32px). Restore the
   square. */
.btn.btn-icon { padding: 0; }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 2px 0 rgba(30, 90, 150, .1);
}
.btn-primary:hover { background: #2b6bab; border-color: #2b6bab; box-shadow: 0 2px 0 rgba(30, 90, 150, .06); }
.btn-primary:active { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-secondary {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); background: var(--surface); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand-soft); }
.btn-accent { background: var(--accent); border-color: var(--accent); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-sm { height: 24px; padding: 0 7px; font-size: var(--fs-xs); }
.btn-lg { height: 40px; padding: 0 15px; font-size: var(--fs-md); }

/* ── Inputs & fields ─────────────────────────────────────── */
.input, .select, .textarea {
  min-height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: #4096ff; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
  outline: none;
}
.input-group, .input-addon { border-radius: var(--r-md); }
.form-label { color: var(--ink); font-weight: 400; }
.form-hint { color: var(--ink-mute); }
.form-group.has-error .input,
.fieldset .input.is-danger { border-color: var(--danger); }
.form-error { color: var(--danger); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 600;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card-body { padding: 16px; }
.card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.card-title { font-weight: 600; color: var(--ink); }
.card-subtitle { color: var(--ink-mute); }
.card-interactive { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card-interactive:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.card-icon, .card-media {
  border-radius: var(--r-md);
  background: var(--surface-2);
}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.data-table th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--ink);
}
.data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.data-table tbody tr:hover, .data-table tr.is-active { background: var(--surface-2); }
.data-table tr:last-child td { border-bottom: 0; }

/* ── Tags, badges, chips ─────────────────────────────────── */
.tag, .badge, .chip {
  border-radius: var(--r-sm);
  font-weight: 400;
  border: 1px solid transparent;
}
.tag-primary, .badge-primary { background: var(--brand-soft); color: var(--brand-deep); border-color: #91caff; }
.tag, .badge-muted { background: var(--surface-2); color: var(--ink-dim); border-color: var(--line); }
.badge-success, .chip-completed { background: var(--success-soft); color: var(--success); border-color: #b7eb8f; }
.badge-warning, .chip-pending { background: var(--warning-soft); color: var(--warning); border-color: #ffe58f; }
.badge-danger, .chip-error { background: var(--danger-soft); color: var(--danger); border-color: #ffccc7; }
.badge-info, .chip-generating { background: var(--brand-soft); color: var(--brand-deep); border-color: #91caff; }
.chip { border-radius: var(--r-full); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { border-radius: var(--r-lg); border: 1px solid transparent; }
.alert-info { background: var(--brand-soft); border-color: #91caff; color: var(--brand-deep); }
.alert-success { background: var(--success-soft); border-color: #b7eb8f; color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: #ffe58f; color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: #ffccc7; color: var(--danger); }
.alert-title { font-weight: 600; }

/* ── Switch, radio, checkbox ─────────────────────────────── */
.switch-track { background: rgba(0, 0, 0, .25); }
.switch input:checked + .switch-track { background: var(--brand); }
.radio-item, .checkbox { border-radius: var(--r-md); }

/* ── Steps (Ant numbered steps) ──────────────────────────── */
.step-dot {
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-dim);
}
.step.is-current .step-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.step.is-done .step-dot { background: var(--brand-soft); border-color: #91caff; color: var(--brand-deep); }
.step-title { font-weight: 600; }
.step.is-current .step-title { color: var(--ink); }
.step-line { background: var(--line-soft); }

/* ── Tabs & menus ────────────────────────────────────────── */
.tabs { border-bottom: 1px solid var(--line-soft); }
.tabs .tabs-item, .tabs a { border-radius: 0; }
.tabs .is-active, .tabs [aria-selected="true"] {
  color: var(--brand);
  border-bottom: 2px solid var(--brand);
}
.dropdown-menu, .dropdown {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.dropdown-item { border-radius: var(--r-sm); }
.dropdown-item:hover { background: var(--surface-2); }
.sidebar-item { border-radius: var(--r-md); }
.sidebar-item.is-active { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }

/* ── Progress, spinner, skeleton ─────────────────────────── */
.progress { border-radius: var(--r-full); background: var(--surface-2); }
.progress-bar { background: var(--brand); border-radius: var(--r-full); }
.progress-sm .progress-bar { border-radius: var(--r-full); }
.spinner { color: var(--brand); }
.skeleton, .skeleton-text, .skeleton-title, .skeleton-card, .skeleton-avatar { border-radius: var(--r-md); }

/* ── Avatars, chat, misc ─────────────────────────────────── */
.avatar { border-radius: var(--r-full); }
.msg-bubble { border-radius: var(--r-lg); }
.kbd, .code-inline, .code-block { border-radius: var(--r-sm); }
.divider { background: var(--line-soft); }
.empty-state, .empty-icon { border-radius: var(--r-lg); }
.modal, .modal-body, .modal-header, .modal-footer { border-radius: var(--r-lg); }
.modal-header { border-bottom: 1px solid var(--line-soft); }
.modal-footer { border-top: 1px solid var(--line-soft); }
.modal-close { border-radius: var(--r-md); }
.toast-body { border-radius: var(--r-lg); border: 1px solid var(--line-soft); box-shadow: var(--shadow-2); }
.stat-value { font-weight: 600; }
.swatch, .swatch-chip { border-radius: var(--r-md); }