/* =====================================================================
   DigitosAI — Design System Stylesheet
   ---------------------------------------------------------------------
   Source of truth: ui_ux.md (project root) and the Claude Design bundle
   at assets/claude_design/digitios-ai/.

   Owns:
     - Design tokens for light + dark themes (CSS custom properties).
     - Component classes used by templates and module fragments.

   Tailwind utilities are configured (in the layout head) to resolve to
   the same `var(--token)` values, so `.bg-blue` and `background: var(--blue)`
   produce the same color and both flip with `[data-theme="dark"]`.

   Do NOT add raw hex colors to this file outside the :root / dark blocks.
   Components consume tokens only.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens — light (default)
   --------------------------------------------------------------------- */
:root {
  /* Brand */
  --blue:           #1FA3FF;
  --blue-deep:      #0B86E0;
  --blue-600:       #0B86E0;
  --blue-50:        #EFF8FF;
  --blue-100:       #DBEEFE;

  /* AI layer (violet) — reserved for AI surfaces */
  --ai:             #7C3AED;
  --ai-bg:          #F4EFFF;

  /* Semantic */
  --success:        #16A34A;
  --success-bg:     #ECFDF5;
  --warning:        #D97706;
  --warning-bg:     #FEF3C7;
  --danger:         #DC2626;
  --danger-bg:      #FEE2E2;

  /* Neutral surfaces / text.
     `--bg` is the page floor. `--surface` is white (cards lift off the page).
     `--surface-2` is a *recessed* container fill — visibly darker than `--bg`
     so kanban columns / pagination bars / hover states read as containers,
     not as page extensions. */
  --bg:             #F6F8FB;
  --surface:        #FFFFFF;
  --surface-2:      #ECEEF3;
  --ink:            #0A1828;
  --ink-2:          #2C3E54;
  --muted:          #5B6B7C;
  --subtle:         #8B95A3;
  --line:           #E6EBF0;
  --line-strong:    #CFD7E0;

  /* Input surface stack — inputs read as "carved into" their card, so the
     default fill is one layer *below* the card (--surface-2) with no border.
     Hover lifts a hair, focus jumps back up to --surface and gains the blue
     border so it pops to the top of the stack. */
  --input-bg:        var(--surface-2);
  --input-bg-hover:  var(--bg);
  --input-bg-focus:  var(--surface);
  --input-border:    transparent;

  /* Radius scale */
  --radius-sm:      6px;
  --radius:         8px;
  --radius-lg:      12px;
  --radius-xl:      16px;

  /* Motion */
  --ease:           cubic-bezier(.2, .7, .3, 1);
  --dur-fast:       140ms;
  --dur-base:       220ms;
  --dur-slow:       380ms;

  /* Shadow */
  --shadow-focus:   0 0 0 3px rgba(31, 163, 255, .20);
  --shadow-card:    0 1px 2px rgba(10, 24, 40, .04);
  --shadow-toast:   0 8px 24px rgba(10, 24, 40, .10);
  --shadow-modal:   0 20px 60px rgba(10, 24, 40, .18), 0 1px 3px rgba(10, 24, 40, .08);
}

/* ---------------------------------------------------------------------
   Tokens — dark
   Override the tokens only, never selectors.
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg:             #07111E;
  --surface:        #0F1C2D;
  --surface-2:      #16263A;
  --ink:            #F1F5FA;
  --ink-2:          #C9D4E0;
  --muted:          #8B9BAE;
  --subtle:         #5B6B7C;
  --line:           #1E3148;
  --line-strong:    #2A4060;

  /* Inverted input stack for dark: card sits at --surface, input drops one
     step down to --bg (the darkest plane) so it reads as carved in. Focus
     lifts the input above the card to --surface-2 + blue border. */
  --input-bg:        var(--bg);
  --input-bg-hover:  var(--bg);
  --input-bg-focus:  var(--surface-2);

  --blue-50:        rgba(31, 163, 255, .10);
  --blue-100:       rgba(31, 163, 255, .18);
  --success-bg:     rgba(22, 163, 74, .15);
  --warning-bg:     rgba(217, 119, 6, .15);
  --danger-bg:      rgba(220, 38, 38, .15);
  --ai-bg:          rgba(124, 58, 237, .18);

  --shadow-card:    0 1px 2px rgba(0, 0, 0, .35);
  --shadow-toast:   0 8px 24px rgba(0, 0, 0, .45);
  --shadow-modal:   0 20px 60px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------
   Base reset & body
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background var(--dur-fast), color var(--dur-fast);
}

::selection { background: var(--blue-100); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------
   Typography helpers
   --------------------------------------------------------------------- */
.ds-display { font-family: 'Barlow', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.02em; line-height: 1; }
.ds-h1      { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -0.01em; line-height: 1.1; }
.ds-h2      { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.005em; }
.ds-h3      { font-family: 'Inter', sans-serif;  font-weight: 600; font-size: 15px; }
.ds-body    { font-size: 14px; color: var(--ink-2); }
.ds-small   { font-size: 12.5px; color: var(--muted); }
.ds-micro   { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }
.ds-num     { font-family: 'Barlow', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
.card.flat { padding: 0; overflow: hidden; }

.card-title { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.card-sub   { color: var(--subtle); font-size: 12px; margin-bottom: 16px; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.row   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border-radius: var(--radius);
  font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1;
  border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast), color var(--dur-fast);
}
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg { height: 44px; padding: 0 18px; font-size: 14px; }

.btn-primary     { background: var(--blue); color: #FFFFFF; }
.btn-primary:hover:not([disabled]) { background: var(--blue-deep); }
.btn-secondary   { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover:not([disabled]) { background: var(--surface-2); }
.btn-ghost       { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not([disabled]) { background: var(--surface-2); }
.btn-destructive { background: var(--danger); color: #FFFFFF; }
.btn-destructive:hover:not([disabled]) { filter: brightness(0.92); }
.btn-ai          { background: linear-gradient(135deg, var(--blue) 0%, var(--ai) 100%); color: #FFFFFF; border: none; }
.btn-ai:hover:not([disabled]) { filter: brightness(1.05); }

.btn-ico { width: 36px; padding: 0; }
.btn-ico.btn-sm { width: 28px; }

/* Touch targets — bump 36px to 44px on coarse pointers */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

/* ---------------------------------------------------------------------
   Inputs & forms
   --------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.label .req { color: var(--danger); margin-left: 2px; }

.input, .select, .textarea {
  width: 100%;
  height: 36px; padding: 0 12px;
  border-radius: var(--radius);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--ink);
  font-family: inherit; font-size: 13.5px;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.textarea { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; line-height: 1.5; }

.input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) {
  background: var(--input-bg-hover);
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: var(--input-bg-focus);
  border-color: var(--blue);
  box-shadow: var(--shadow-focus);
}
.input::placeholder, .textarea::placeholder { color: var(--subtle); }

/* Flat variant — for inputs that live OUTSIDE a card, on the page bg.
   Uses --surface (the lighter neutral) so the input reads against the
   page background instead of blending with it. The default `.input` is
   "carved" (slightly darker than the form bg), tuned for inside-card use. */
.input.input-flat,
.select.input-flat,
.textarea.input-flat {
  background: var(--surface);
  border-color: var(--line);
}
.input.input-flat:hover:not(:focus),
.select.input-flat:hover:not(:focus),
.textarea.input-flat:hover:not(:focus) {
  background: var(--surface);
  border-color: var(--line-strong);
}
.input.input-flat:focus,
.select.input-flat:focus,
.textarea.input-flat:focus {
  background: var(--surface);
  border-color: var(--blue);
}
[data-theme="dark"] .input.input-flat,
[data-theme="dark"] .select.input-flat,
[data-theme="dark"] .textarea.input-flat {
  background: var(--surface-2);
}
[data-theme="dark"] .input.input-flat:hover:not(:focus),
[data-theme="dark"] .select.input-flat:hover:not(:focus),
[data-theme="dark"] .textarea.input-flat:hover:not(:focus) {
  background: var(--surface);
}

.input.error { border-color: var(--danger); }
.input.error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .18); }

.help        { font-size: 11.5px; color: var(--subtle); }
.help.error  { color: var(--danger); }

.input-group { position: relative; }
.input-group .icon-l, .input-group .icon-r { position: absolute; top: 50%; transform: translateY(-50%); color: var(--subtle); pointer-events: none; }
.input-group .icon-l { left: 11px; }
.input-group .icon-r { right: 11px; }
.input-group .input.has-l { padding-left: 34px; }
.input-group .input.has-r { padding-right: 34px; }

/* Checkbox / radio / switch */
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13px; color: var(--ink-2); }
.check input { display: none; }
.check .box {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  flex-shrink: 0;
}
.check input:checked + .box { background: var(--blue); border-color: var(--blue); }
.check input:checked + .box::after {
  content: "";
  width: 10px; height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.5 4.5L6 12L2.5 8.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-size: contain; background-repeat: no-repeat;
}
.radio .box { border-radius: 50%; }
.radio input:checked + .box { background: var(--surface); border-color: var(--blue); border-width: 5px; }
.radio input:checked + .box::after { display: none; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 13px; color: var(--ink-2); }
.switch input { display: none; }
.switch .track {
  width: 32px; height: 18px; border-radius: 999px;
  background: var(--line-strong); position: relative;
  transition: background var(--dur-fast);
  flex-shrink: 0;
}
.switch .track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #FFFFFF;
  transition: left var(--dur-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.switch input:checked + .track { background: var(--blue); }
.switch input:checked + .track::after { left: 16px; }

/* ---------------------------------------------------------------------
   Badges & tags
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  background: var(--surface-2); color: var(--ink-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.success { background: var(--success-bg); color: var(--success); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.danger  { background: var(--danger-bg);  color: var(--danger); }
.badge.brand   { background: var(--blue-50);    color: var(--blue); }
.badge.ai      { background: var(--ai-bg);      color: var(--ai); }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 500; line-height: 1;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.tag .x { color: var(--subtle); cursor: pointer; margin-left: 2px; font-size: 14px; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
.table th, .table td {
  text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.table th {
  background: var(--surface-2); color: var(--muted);
  font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.table th:first-child { border-top-left-radius: var(--radius-lg); }
.table th:last-child  { border-top-right-radius: var(--radius-lg); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: none; }

/* AI-touched row indicator */
.table tbody tr.ai-row td:first-child { box-shadow: inset 3px 0 0 var(--ai); }

/* Numeric column alignment */
.table .num, .table th.num, .table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Lists
   --------------------------------------------------------------------- */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--surface-2); }
.list-item .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px; flex-shrink: 0;
}
.list-item .meta { flex: 1; min-width: 0; }
.list-item .meta .title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.list-item .meta .sub   { font-size: 12px; color: var(--subtle); margin-top: 2px; }

/* ---------------------------------------------------------------------
   Modal
   --------------------------------------------------------------------- */
.modal {
  width: 100%; max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.modal-head { padding: 22px 22px 8px; }
.modal-body { padding: 4px 22px 16px; color: var(--ink-2); font-size: 13.5px; }
.modal-foot {
  padding: 14px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* On mobile, modals become full-height bottom sheets */
@media (max-width: 640px) {
  .modal { max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

/* ---------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------- */
.toast-region {
  position: fixed; top: 18px; right: 18px;
  z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: 380px;
}
@media (max-width: 640px) {
  .toast-region {
    top: 12px; left: 12px; right: 12px;
    max-width: none;
    align-items: stretch;
  }
}

.toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-toast);
  max-width: 420px;
  pointer-events: auto;
  animation: ds-toast-in var(--dur-base) var(--ease);
}
.toast .ico {
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.toast.success .ico { background: var(--success-bg); color: var(--success); }
.toast.danger  .ico { background: var(--danger-bg);  color: var(--danger); }
.toast.warning .ico { background: var(--warning-bg); color: var(--warning); }
.toast.ai      .ico { background: var(--ai-bg);      color: var(--ai); }
.toast .body { flex: 1; min-width: 0; }
.toast .body .title { font-weight: 600; font-size: 13px; color: var(--ink); }
.toast .body .desc  { font-size: 12.5px; color: var(--muted); margin-top: 2px; word-wrap: break-word; }
.toast .x {
  color: var(--subtle); cursor: pointer;
  display: inline-flex; padding: 2px; border-radius: 4px;
}
.toast .x:hover { background: var(--surface-2); color: var(--ink); }

@keyframes ds-toast-in {
  from { opacity: 0; transform: translateX(20px) scale(.97); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}

/* ---------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 20px; gap: 12px; text-align: center;
}
.empty .icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--blue-50); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.empty .title { font-weight: 600; font-size: 15px; color: var(--ink); }
.empty .desc  { font-size: 13px; color: var(--muted); max-width: 320px; }

/* ---------------------------------------------------------------------
   Loading skeleton (use instead of spinners for full-screen loads)
   --------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: ds-skeleton 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
.skeleton.shimmer {
  /* AI generation indicator — same animation, violet tint */
  background: linear-gradient(90deg, var(--ai-bg) 0%, rgba(124, 58, 237, .35) 50%, var(--ai-bg) 100%);
  background-size: 200% 100%;
}
@keyframes ds-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------
   AI strip — inline AI suggestion pill below a field
   --------------------------------------------------------------------- */
.ai-strip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ai-bg); color: var(--ai);
  font-size: 11px; font-weight: 600;
}

/* ---------------------------------------------------------------------
   App shell — sidebar + topbar + content
   --------------------------------------------------------------------- */
.shell {
  display: grid; grid-template-columns: 220px 1fr;
  min-height: 100vh;
  background: var(--bg);
}
@media (max-width: 1024px) {
  .shell { grid-template-columns: 56px 1fr; }
}
@media (max-width: 640px) {
  .shell { grid-template-columns: 1fr; }
}

.shell-side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 16px 12px; gap: 4px;
}
.shell-side .item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px; color: var(--muted);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.shell-side .item:hover { background: var(--surface-2); color: var(--ink-2); }
.shell-side .item.active { background: var(--blue-50); color: var(--blue); font-weight: 600; }
.shell-side .divider { height: 1px; background: var(--line); margin: 8px 4px; }
.shell-side .group-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--subtle);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 10px 4px; font-weight: 600;
}

.shell-top {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.shell-search { flex: 1; max-width: 380px; }
.shell-content { padding: 24px 22px 64px; flex: 1; overflow-y: auto; }

/* Hide sidebar on mobile — Phase 1 will add hamburger + bottom tab-bar */
@media (max-width: 640px) {
  .shell-side { display: none; }
}

/* ---------------------------------------------------------------------
   KPI card
   --------------------------------------------------------------------- */
.kpi {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.kpi .label {
  font-size: 11.5px; color: var(--subtle);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.kpi .value {
  font-family: 'Barlow', sans-serif; font-weight: 800;
  font-size: 26px; letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi .delta { font-size: 12px; font-weight: 600; }
.kpi .delta.up   { color: var(--success); }
.kpi .delta.down { color: var(--danger); }

/* ---------------------------------------------------------------------
   Command bar (⌘K)
   --------------------------------------------------------------------- */
.cmdk {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmdk-input input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; font-family: inherit; color: var(--ink);
}
.cmdk-input kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; padding: 2px 6px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface-2); color: var(--muted);
}
.cmdk-list { max-height: 280px; overflow-y: auto; padding: 6px; }
.cmdk-section {
  font-size: 10.5px; font-weight: 600; color: var(--subtle);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 10px 4px;
}
.cmdk-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--ink-2);
  cursor: pointer;
}
.cmdk-row:hover, .cmdk-row.active { background: var(--blue-50); color: var(--blue); }
.cmdk-row .ai-tag {
  margin-left: auto;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--ai-bg); color: var(--ai);
}

/* ---------------------------------------------------------------------
   Tooltip
   --------------------------------------------------------------------- */
.tooltip {
  display: inline-block;
  padding: 6px 10px; border-radius: 6px;
  background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 500;
  position: relative;
}
.tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}

/* ---------------------------------------------------------------------
   Scrollbar (subtle, theme-aware)
   --------------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------------------------------------------------------------------
   Read-only mode banner (hooks into the existing is-read-only body class)
   The middleware already enforces server-side; this is the visual cue.
   --------------------------------------------------------------------- */
.ro-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--warning-bg); color: var(--warning);
  font-size: 12.5px; font-weight: 500;
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------------
   Utility — focus visible everywhere (a11y)
   --------------------------------------------------------------------- */
:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}