/* ============================================================================
   Morganelli Method OS — COMPONENT PRIMITIVES (v1.221, Phase 0).

   The shared component layer every surface composes from, built entirely on the
   tokens in tokens.css — so a component is dark-mode-correct and skin-correct
   (operator slate / portal ivy) for free, with no `dark:` variants to maintain.
   Loaded AFTER tokens.css. Not Tailwind-processed (no build step).

   Accessibility is built in: 44px tap targets on interactive controls, focus
   handled globally by tokens.css (:focus-visible), and color pairings inherit
   the AA-checked tokens. Class names verified collision-free against the repo.
   ============================================================================ */

/* ---- Icons ---------------------------------------------------------------- */
.ic { display: inline-block; width: 1.25rem; height: 1.25rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -0.18em; }
.ic-sm { width: 1rem; height: 1rem; }
.ic-lg { width: 1.5rem; height: 1.5rem; }

/* ---- Buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 500 var(--fs-sm) / 1 var(--font-sans); padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap; min-height: 2.25rem;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn .ic { width: 1.05rem; height: 1.05rem; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--elev-1); }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-faint); background: var(--surface-3); }
.btn-subtle { background: var(--surface-3); color: var(--text); }
.btn-subtle:hover { background: var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-sm { padding: 0.3125rem 0.625rem; font-size: var(--fs-xs); min-height: 1.875rem; }
.btn-lg { padding: 0.6875rem 1.125rem; font-size: var(--fs-base); min-height: 2.75rem; }
.btn-block { display: flex; width: 100%; }
/* Comfortable thumb targets on touch devices (WCAG 2.2 target-size). */
@media (pointer: coarse) { .btn { min-height: var(--tap-min); } }

/* ---- Cards ---------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--elev-1); }
.card-pad { padding: 1.25rem; }
.card-hover { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
  transform var(--dur) var(--ease); }
.card-hover:hover { border-color: var(--accent-line); box-shadow: var(--elev-2); transform: translateY(-1px); }
.card-flush { box-shadow: none; }

/* ---- Badges (status pills) ------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 0.3125rem;
  font: 500 var(--fs-xs) / 1 var(--font-sans); padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-xs); border: 1px solid transparent; white-space: nowrap; }
.badge .ic { width: 0.875rem; height: 0.875rem; }
.badge-neutral { background: var(--surface-3); color: var(--text-muted); border-color: var(--border); }
.badge-accent  { background: var(--accent-wash); color: var(--accent-ink); border-color: var(--accent-line); }
.badge-success { background: var(--success-wash); color: var(--success-ink); border-color: var(--success-line); }
.badge-warning { background: var(--warning-wash); color: var(--warning-ink); border-color: var(--warning-line); }
.badge-danger  { background: var(--danger-wash); color: var(--danger-ink); border-color: var(--danger-line); }
.badge-info    { background: var(--info-wash); color: var(--info-ink); border-color: var(--info-line); }

/* ---- Banners (page-level alerts) ------------------------------------------ */
.banner { display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); }
.banner .ic { flex: none; margin-top: 0.0625rem; }
.banner-success { background: var(--success-wash); border-color: var(--success-line); color: var(--success-ink); }
.banner-warning { background: var(--warning-wash); border-color: var(--warning-line); color: var(--warning-ink); }
.banner-danger  { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger-ink); }
.banner-info    { background: var(--info-wash); border-color: var(--info-line); color: var(--info-ink); }

/* ---- Page headers --------------------------------------------------------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 0 0 2rem; }
.page-header-copy { min-width: 0; max-width: 42rem; }
.page-header-eyebrow { margin-bottom: 0.375rem; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-faint); }
.page-header-title { margin: 0; color: var(--text); font-size: var(--fs-3xl);
  line-height: var(--lh-tight); font-weight: 650; letter-spacing: 0; }
.skin-ivy .page-header-title { font-family: var(--font-serif); font-size: var(--fs-3xl); }
.page-header-description { margin: 0.5rem 0 0; color: var(--text-muted);
  font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.page-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 520px) {
  .page-header { margin-bottom: 1.5rem; }
  .page-header-actions { width: 100%; }
}

/* ---- Empty states --------------------------------------------------------- */
.empty-state { border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface); padding: 1.25rem; color: var(--text-muted);
  text-align: left; }
.empty-state-icon { width: 2rem; height: 2rem; border-radius: var(--pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-ink); background: var(--accent-wash); margin-bottom: 0.75rem; }
.empty-state-icon .ic { width: 1.125rem; height: 1.125rem; }
.empty-state-title { color: var(--text); font-weight: 650; font-size: var(--fs-sm); }
.empty-state-description { margin: 0.375rem 0 0; font-size: var(--fs-sm);
  line-height: var(--lh-relaxed); color: var(--text-muted); }
.empty-state-action { margin-top: 0.875rem; }

/* ---- Workflow progress ---------------------------------------------------- */
.workflow-progress { display: flex; align-items: center; gap: 0.625rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--info-line);
  background: var(--info-wash); color: var(--info-ink); font-size: var(--fs-sm); }
.workflow-progress-copy { flex: 1 1 auto; min-width: 0; line-height: var(--lh-snug); }
.workflow-progress-countdown { flex: none; font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  color: currentColor; opacity: 0.82; white-space: nowrap; }
.workflow-progress-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--pill);
  background: currentColor; flex: none; animation: workflow-pulse 1.1s ease-in-out infinite; }
.workflow-progress-accent { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); }
.workflow-progress-success { background: var(--success-wash); border-color: var(--success-line); color: var(--success-ink); }
.workflow-progress-warning { background: var(--warning-wash); border-color: var(--warning-line); color: var(--warning-ink); }
.workflow-progress-danger { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger-ink); }
.progress-markers { --progress-marker-fill: 36%; position: relative; flex: 1 0 100%;
  display: flex; justify-content: space-between; gap: 0.35rem; min-width: 100%;
  margin-top: 0.45rem; padding-top: 0.95rem; color: currentColor; }
.progress-markers::before { content: ""; position: absolute; left: 0.25rem; right: 0.25rem;
  top: 0.4rem; height: 3px; border-radius: var(--pill); background: currentColor; opacity: 0.16; }
.progress-marker-fill { position: absolute; left: 0.25rem; top: 0.4rem; height: 3px;
  width: min(var(--progress-marker-fill), calc(100% - 0.5rem)); border-radius: var(--pill);
  background: currentColor; opacity: 0.66; transition: width 0.7s var(--ease); }
.progress-marker { position: relative; flex: 1 1 0; min-width: 0; text-align: center; }
.progress-marker::before { content: ""; position: absolute; left: 50%; top: -0.72rem;
  width: 0.5rem; height: 0.5rem; border-radius: var(--pill); transform: translateX(-50%);
  background: currentColor; box-shadow: 0 0 0 3px var(--surface); }
.progress-marker::after { content: attr(data-label); display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 0.625rem; font-weight: 700;
  line-height: 1.1; letter-spacing: 0; opacity: 0.78; }
.progress-markers-live .progress-marker-fill {
  width: 28%; animation: progress-marker-scan 2.6s ease-in-out infinite; }
@keyframes workflow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes progress-marker-scan {
  0% { left: 0.25rem; width: 16%; opacity: 0.32; }
  48% { left: 32%; width: 38%; opacity: 0.7; }
  100% { left: calc(100% - 16% - 0.25rem); width: 16%; opacity: 0.32; }
}
@media (max-width: 520px) {
  .workflow-progress { align-items: flex-start; flex-wrap: wrap; }
  .workflow-progress-countdown { width: 100%; padding-left: 1.125rem; }
  .progress-marker::after { font-size: 0.5625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-progress-dot { animation: none; opacity: 0.75; }
  .progress-markers-live .progress-marker-fill { animation: none; left: 0.25rem; width: 45%; }
}

/* ---- Source labels -------------------------------------------------------- */
.source-label, .record-source-badge { display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--pill);
  background: var(--surface-3); color: var(--text-muted); padding: 0.0625rem 0.3125rem;
  font: 700 0.5625rem / 1.2 var(--font-sans); text-transform: uppercase;
  white-space: nowrap; letter-spacing: 0; }
.source-label-meeting, .record-source-meeting {
  border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-ink); }
.source-label-drive-scan, .record-source-drive-scan {
  border-color: var(--info-line); background: var(--info-wash); color: var(--info-ink); }
.source-label-revert, .record-source-revert {
  border-color: var(--warning-line); background: var(--warning-wash); color: var(--warning-ink); }
.source-label-family, .record-source-family,
.source-label-portal-family, .record-source-portal-family {
  border-color: var(--success-line); background: var(--success-wash); color: var(--success-ink); }

/* ---- Inputs --------------------------------------------------------------- */
.field { width: 100%; font: 400 var(--fs-sm) / 1.4 var(--font-sans);
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 0.5rem 0.75rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.field::placeholder { color: var(--text-faint); }
.field:hover { border-color: var(--text-faint); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
/* 16px on touch so iOS Safari doesn't zoom-jump on focus. */
@media (pointer: coarse) { .field { font-size: var(--fs-md); } }

/* ---- Chips (filter / suggestion) ------------------------------------------ */
.chipbtn { display: inline-flex; align-items: center; gap: 0.375rem;
  font: 500 var(--fs-xs) / 1 var(--font-sans); padding: 0.375rem 0.75rem;
  border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer; text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.chipbtn:hover { color: var(--text); border-color: var(--accent-line); background: var(--surface-2); transform: translateY(-1px); }
.chipbtn[aria-pressed="true"], .chipbtn.is-active { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-line); }

/* ---- Avatar --------------------------------------------------------------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.125rem; height: 2.125rem; border-radius: var(--pill);
  font: 600 var(--fs-sm) / 1 var(--font-sans); color: var(--text-muted);
  background: var(--surface-3); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: var(--fs-xs); }
.avatar-lg { width: 2.5rem; height: 2.5rem; }
.avatar-carolyn { color: #fff; background: linear-gradient(150deg, #a78bfa, var(--accent) 65%); box-shadow: var(--elev-1); }

/* ---- Metric / stat card --------------------------------------------------- */
.stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 1rem; }
.stat-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-faint); font-weight: 600; }
.stat-value { font-size: var(--fs-2xl); font-weight: 600; color: var(--text); margin-top: 0.25rem; line-height: var(--lh-tight); }

/* ---- Tool-call card (Carolyn's "proposes …" action) ----------------------- */
.toolcard { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--elev-2); overflow: hidden; }
.toolcard-hd { display: flex; align-items: center; gap: 0.5625rem; padding: 0.6875rem 0.9375rem;
  border-bottom: 1px solid var(--border-soft); background: var(--accent-wash); }
.toolcard-hd .ic { width: 1rem; height: 1rem; color: var(--accent-ink); }
.toolcard-hd b { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.toolcard-bd { padding: 0.8125rem 0.9375rem; }
.toolcard-meta { font: 400 var(--fs-xs) / 1.5 var(--font-mono); color: var(--text-faint);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs); padding: 0.4375rem 0.625rem; word-break: break-word; }
.toolcard-ft { display: flex; align-items: center; gap: 0.5625rem; padding: 0 0.9375rem 0.875rem; flex-wrap: wrap; }

/* ---- Elevation utilities (when a class is cleaner than a token) ------------ */
.elev-1 { box-shadow: var(--elev-1); }
.elev-2 { box-shadow: var(--elev-2); }
.elev-3 { box-shadow: var(--elev-3); }

/* ---- Status dots (replaces 🔴🟡🟢⚪) ------------------------------------- */
/* Usage: <span class="dot dot-red" role="img" aria-label="High importance"></span> */
.dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: var(--pill);
  flex: none; vertical-align: 0.05em; }
.dot-red    { background: var(--danger); }
.dot-yellow { background: var(--warning); }
.dot-green  { background: var(--success); }
.dot-gray   { background: var(--text-faint); }

/* ---- Prose links inside token-based surfaces ------------------------------ */
.link { color: var(--link); text-decoration: none; }
.link:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   APP SHELL (v1.222, Phase 3) — persistent left sidebar + responsive drawer.

   Replaces the top pill-nav + "More" overflow. One language: the sidebar is a
   token surface, so dark mode is automatic and a tenant reskin (brand.py) needs
   no markup change. Desktop: sidebar is sticky full-height. Mobile (<768px): it
   becomes an off-canvas drawer toggled by the topbar hamburger, with a backdrop.
   ============================================================================ */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.app-main  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
/* min-width:0 is load-bearing: without it a wide table/pre inside a flex child
   refuses to shrink and pushes the whole page sideways. */
/* main grows to fill so the footer sits at the bottom on short pages. */
.app-main > main { flex: 1 0 auto; }

.sidebar {
  flex: none; width: 16rem; align-self: stretch;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  z-index: 40;
}
.sidebar-hd { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1rem 0.75rem;
  color: var(--text); text-decoration: none; }
.sidebar-hd:hover { color: var(--text); }
.sidebar-mark { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sidebar-mark b { font-size: var(--fs-sm); font-weight: 600; }
.sidebar-mark span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ⌘K trigger — an input-shaped button so the palette feels like search. */
.sidebar-search { margin: 0 0.75rem 0.5rem; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-faint); font: 400 var(--fs-sm)/1 var(--font-sans); cursor: text; width: calc(100% - 1.5rem); }
.sidebar-search:hover { border-color: var(--text-faint); color: var(--text-muted); }
.sidebar-search .ic { width: 1rem; height: 1rem; flex: none; }
.sidebar-search .kbd { margin-left: auto; }

/* Scrollable nav region; footer pins to the bottom. */
.sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 0.25rem 0.625rem 0.75rem; }
.sidebar-group + .sidebar-group { margin-top: 0.875rem; }
.sidebar-group-label { padding: 0 0.5rem 0.25rem; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); }
.sidebar-link { display: flex; align-items: center; gap: 0.625rem;
  padding: 0.4375rem 0.5rem; border-radius: var(--radius-sm);
  font: 500 var(--fs-sm)/1.1 var(--font-sans); color: var(--text-muted); text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.sidebar-link .ic { width: 1.125rem; height: 1.125rem; flex: none; color: var(--text-faint);
  transition: color var(--dur) var(--ease); }
.sidebar-link:hover { color: var(--text); background: var(--surface-3); }
.sidebar-link:hover .ic { color: var(--text-muted); }
.sidebar-link[aria-current="page"] { color: var(--accent-ink); background: var(--accent-wash); font-weight: 600; }
.sidebar-link[aria-current="page"] .ic { color: var(--accent-ink); }

.sidebar-ft { flex: none; border-top: 1px solid var(--border-soft); padding: 0.5rem 0.625rem;
  display: flex; align-items: center; gap: 0.25rem; }
.sidebar-ft .sidebar-link { flex: 1 1 auto; }
.sidebar-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2rem; height: 2rem; border-radius: var(--radius-sm); border: 0; background: transparent;
  color: var(--text-faint); cursor: pointer; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.sidebar-icon-btn:hover { color: var(--text); background: var(--surface-3); }

/* Mobile topbar — only shown when the sidebar is a drawer. */
.app-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 767px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh;
    transform: translateX(-100%); transition: transform var(--dur) var(--ease);
    box-shadow: var(--elev-3); width: 17rem;
  }
  .sidebar.is-open { transform: translateX(0); }
  /* v1.245 — display:block is load-bearing: the global rule above sets the
     backdrop to display:none, and the mobile rule never re-asserted it, so the
     backdrop stayed display:none on phones. The open drawer therefore had NO
     tappable dismiss target — the drawer covers the hamburger, Esc needs a
     keyboard, so the only exits were a page refresh. block + opacity/
     pointer-events restore tap-outside-to-close and let the fade run. */
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(2, 6, 23, 0.45);
    opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
  .sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .app-topbar { display: flex; align-items: center; gap: 0.5rem; position: sticky; top: 0; z-index: 30;
    padding: 0.5rem 0.75rem; background: var(--surface); border-bottom: 1px solid var(--border); }
  .app-topbar .sidebar-mark b { font-size: var(--fs-sm); }
}

/* ============================================================================
   COMMAND PALETTE (⌘K) — accessible combobox dialog.
   ARIA 1.2 combobox pattern: input owns aria-activedescendant; the listbox holds
   role=option rows. Focus is trapped while open and restored to the trigger on
   close (handled in _command_palette.html's script).
   ============================================================================ */
.cmdk-root[hidden] { display: none; }
.cmdk-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(2, 6, 23, 0.5);
  backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start;
  padding: 10vh 1rem 1rem; }
.cmdk { width: 100%; max-width: 40rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--elev-3); overflow: hidden;
  display: flex; flex-direction: column; max-height: 70vh; }
.cmdk-inputrow { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.9375rem;
  border-bottom: 1px solid var(--border-soft); }
.cmdk-inputrow .ic { width: 1.125rem; height: 1.125rem; flex: none; color: var(--text-faint); }
.cmdk-input { flex: 1 1 auto; border: 0; outline: none; background: transparent;
  font: 400 var(--fs-md)/1.4 var(--font-sans); color: var(--text); }
.cmdk-input::placeholder { color: var(--text-faint); }
.cmdk-list { list-style: none; margin: 0; padding: 0.375rem; overflow-y: auto; }
.cmdk-group-label { padding: 0.5rem 0.625rem 0.25rem; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-faint); }
.cmdk-opt { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); cursor: pointer;
  scroll-margin: 0.5rem; }
.cmdk-opt .ic { width: 1.125rem; height: 1.125rem; flex: none; color: var(--text-faint); }
.cmdk-opt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-opt-hint { flex: none; font-size: var(--fs-xs); color: var(--text-faint); }
.cmdk-opt[aria-selected="true"] { background: var(--accent-wash); color: var(--accent-ink); }
.cmdk-opt[aria-selected="true"] .ic, .cmdk-opt[aria-selected="true"] .cmdk-opt-hint { color: var(--accent-ink); }
.cmdk-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-faint); font-size: var(--fs-sm); }
.cmdk-ft { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.9375rem;
  border-top: 1px solid var(--border-soft); background: var(--surface-2);
  font-size: var(--fs-xs); color: var(--text-faint); }
.cmdk-ft .kbd { margin: 0 0.125rem; }

/* Keycap — used in the ⌘K trigger and palette footer. */
.kbd { display: inline-flex; align-items: center; gap: 0.125rem; min-width: 1.25rem; height: 1.25rem;
  padding: 0 0.3125rem; border-radius: var(--radius-xs); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-faint); font: 600 var(--fs-xs)/1 var(--font-sans);
  box-shadow: 0 1px 0 var(--border); }

@media (max-width: 767px) {
  .cmdk-backdrop { padding: 4vh 0.75rem 0.75rem; }
}