/* ============================================================================
   MEDKIT — ds-components.css · refreshed (v3, 2026)
   The "Examiner's Standard" primitive layer, modernized toward a brighter,
   airier surface: pill nav with a coral-tinted active state, rounded inputs &
   search, pill chips, and softly-lifted cards (border-light + soft-shadow).
   Same components, same class names — restyled. Requires colors_and_type.css.
   ============================================================================ */

/* ── Card ── light hairline + a soft, diffuse lift. Cards feel raised off the
   bright paper, never boxed. A standard still doesn't float. */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ds-card-hover:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ds-divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── Buttons ── ink leads (the product is the work); coral is reserved for the
   single decisive moment; ghost / quiet recede. Rounder + a soft lift. */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--t-small); font-weight: 500;
  padding: 10px 18px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; letter-spacing: -0.005em;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.ds-btn.primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-xs); }
.ds-btn.primary:hover { background: var(--ink-2); box-shadow: var(--shadow-sm); }
.ds-btn.accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(201,68,42,.20); }
.ds-btn.accent:hover { background: var(--accent-deep); box-shadow: 0 4px 14px -4px rgba(201,68,42,.45); }
.ds-btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.ds-btn.ghost:hover { background: var(--paper-2); border-color: var(--line-2); }
.ds-btn.quiet { background: transparent; color: var(--muted); border-color: transparent; padding: 8px 14px; }
.ds-btn.quiet:hover { color: var(--ink); background: var(--paper-2); }
.ds-btn:active { transform: translateY(.5px); }
.ds-btn.pill { border-radius: var(--r-pill); }

/* ── Input ── rounder, with a soft coral focus ring (glow, not a hard 1px). */
.ds-input {
  font-family: inherit; font-size: var(--t-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 11px 14px; width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ds-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds-input::placeholder { color: var(--muted-2); }

/* ── Search ── the Midjourney-style pill search bar: rounded, roomy, an icon
   slot, a soft focus glow. Wrap an icon + .ds-input-bare inside .ds-search. */
.ds-search {
  display: inline-flex; align-items: center; gap: 10px; width: 100%;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 11px 18px; color: var(--muted-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ds-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--muted); }
.ds-search .ds-input-bare {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: var(--t-body); color: var(--ink);
}
.ds-search .ds-input-bare::placeholder { color: var(--muted-2); }

/* ── Chip ── softer, pill-shaped. */
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-label); font-weight: 500; padding: 5px 11px;
  border-radius: var(--r-pill); background: var(--paper-2); color: var(--muted);
  border: 1px solid var(--line); letter-spacing: .01em;
}
.ds-chip.solid  { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ds-chip.accent { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
.ds-chip.dot::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.8; }

/* ── Citation chip ── the category-king signature: every score traces to a
   published authority. Mono, coral, pill. */
.ds-cite {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em;
  color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--r-pill); padding: 3px 9px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-cite:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ds-cite::before { content:""; width:5px; height:5px; border-radius:50%; background: var(--accent); flex:none; }

/* ── Verdict pill ── a grade is a verdict, not a high-five. */
.ds-verdict {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--r-pill);
}
.ds-verdict.pass    { background: var(--good-soft); color: var(--good); }
.ds-verdict.partial { background: var(--warn-soft); color: var(--warn); }
.ds-verdict.miss    { background: var(--bad-soft);  color: var(--bad); }

/* ── Mark sheet / rubric ── the examiner's sheet, not a marketing dashboard. */
.ds-rubric { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-xs); }
.ds-rubric .row {
  display: grid; grid-template-columns: 1fr 130px 76px; gap: 14px; align-items: center;
  padding: 13px 16px; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2);
}
.ds-rubric .row:first-child { border-top: 0; }
.ds-rubric .row.head {
  background: var(--surface-2); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}
.ds-rubric .skill { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* ── Meter ── a single reference line = the passing standard. */
.ds-meter { height: 8px; background: var(--paper-2); border-radius: var(--r-pill); overflow: hidden; }
.ds-meter-fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s var(--ease); }
.ds-meter.ref { position: relative; overflow: visible; }
.ds-meter.ref::after { content:""; position:absolute; top:-3px; bottom:-3px; left: var(--ref, 70%); width:1.5px; background: var(--ink); }

/* ── Segmented control ── airier: a soft track, pill thumbs, a clean lifted
   active state. (Add .accent to an active item to echo the coral toggle.) */
.ds-seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--paper-2); border-radius: var(--r-pill); border: 1px solid var(--line); }
.ds-seg-item { font-size: var(--t-small); font-weight: 500; color: var(--muted); padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer; transition: all var(--dur-fast) var(--ease); border:none; background:transparent; font-family:inherit; }
.ds-seg-item:hover { color: var(--ink); }
.ds-seg-item.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs); }
.ds-seg-item.active.accent { color: var(--accent-deep); }

/* ── Nav item ── the signature refresh: a coral-tinted pill marks the active
   destination (icon follows via currentColor); idle is quiet, hover fills. */
.ds-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-pill);
  color: var(--muted); font-size: var(--t-small); font-weight: 500; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-nav-item:hover { color: var(--ink); background: var(--paper-2); }
.ds-nav-item.active { color: var(--accent-deep); background: var(--accent-soft); font-weight: 600; }
.ds-nav-item.active:hover { background: var(--accent-soft); }
/* mono-label section heads in a sidebar (AESTHETICS / COMMUNITY) */
.ds-nav-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding: 8px 14px 6px; }

/* ── Shell: topbar + sidebar ── lighter, airier. Topbar is sticky translucent
   paper with a soft blur; the border is a whisper. */
.ds-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; width: 100%; box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  position: sticky; top: 0; z-index: 5;
}
.ds-topbar > :first-child { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.ds-topbar > :last-child { flex: 0 0 auto; margin-left: auto; }
.ds-sidebar { width: 240px; padding: 20px 14px; border-right: 1px solid var(--line); background: var(--paper); box-sizing: border-box; }

/* ── Two-level navigation ("L-shaped" / list–detail at two altitudes) ────────
   A persistent PRIMARY rail (top-level destinations) + a contextual SECONDARY
   sidebar (a section's grouped sub-pages). The discipline that keeps the screen
   count manageable as the app grows:
     · Progressive disclosure — the secondary sidebar only appears once you enter
       a section with 3+ sibling pages; the primary rail stays short and stable.
     · One coral moment, always at the MOST SPECIFIC level. The primary rail
       marks the active SECTION in quiet ink; the secondary marks the active
       PAGE in the coral pill. Two corals = one is wrong.
     · The rail has two forms — labelled (240) at rest, an icon rail (68) when a
       secondary opens — so the two nav surfaces never fight for width.
   Compose: <div class="ds-nav2"> rail + subnav + your content Outlet. */
.ds-nav2 { display: flex; align-items: stretch; height: 100%; min-height: 0; }

/* ── Primary rail ── */
.ds-rail {
  flex: none; box-sizing: border-box; display: flex; flex-direction: column;
  width: 240px; padding: 18px 14px;
  background: var(--paper); border-right: 1px solid var(--line);
  transition: width var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.ds-rail.collapsed { width: 68px; padding: 18px 12px; align-items: center; }

.ds-rail-brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 20px; min-height: 30px; }
.ds-rail.collapsed .ds-rail-brand { padding: 2px 0 20px; justify-content: center; }
.ds-rail-brand .wm { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.ds-rail.collapsed .ds-rail-brand .wm { display: none; }

.ds-rail-nav { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.ds-rail.collapsed .ds-rail-nav { align-items: center; }

.ds-rail-item {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: var(--r-md); border: none; background: transparent;
  color: var(--muted); font: inherit; font-size: var(--t-small); font-weight: 500; letter-spacing: -.005em;
  text-align: left; cursor: pointer; position: relative; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-rail-item:hover { background: var(--paper-2); color: var(--ink); }
/* active SECTION — quiet ink fill. Coral is reserved for the secondary's
   active page (the single most-specific moment), so the rail stays neutral. */
.ds-rail-item.active { background: var(--ink); color: var(--paper); }
.ds-rail-item.active:hover { background: var(--ink-2); color: var(--paper); }
.ds-rail-item .ds-ico { flex: none; }
.ds-rail-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-rail-item .cnt { font-size: 12px; color: var(--muted-2); }
.ds-rail-item.active .cnt { color: color-mix(in srgb, var(--paper) 65%, transparent); }
/* a hairline coral tick on a rail item whose section is open & has sub-pages */
.ds-rail-item .chev { flex: none; margin-left: auto; opacity: .5; }

/* collapsed → icon-only tiles + a tooltip flyout (the label moves to the rail) */
.ds-rail.collapsed .ds-rail-item { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
.ds-rail.collapsed .ds-rail-item .lbl,
.ds-rail.collapsed .ds-rail-item .cnt,
.ds-rail.collapsed .ds-rail-item .chev { display: none; }
.ds-rail.collapsed .ds-rail-item::after {
  content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) scale(.96); transform-origin: left center;
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 500; white-space: nowrap;
  padding: 5px 9px; border-radius: var(--r-sm); box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; z-index: 30;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ds-rail.collapsed .ds-rail-item:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }

.ds-rail-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 3px; width: 100%; }
.ds-rail.collapsed .ds-rail-foot { align-items: center; }
.ds-rail-sep { height: 1px; background: var(--line); border: 0; margin: 6px 4px 10px; width: calc(100% - 8px); }
/* the collapse pin — a quiet ghost control, never accent */
.ds-rail-pin {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border-radius: var(--r-md); border: none; background: transparent;
  color: var(--muted-2); font: inherit; font-size: 12px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-rail-pin:hover { background: var(--paper-2); color: var(--ink); }
.ds-rail.collapsed .ds-rail-pin { width: 44px; height: 36px; padding: 0; }
.ds-rail.collapsed .ds-rail-pin .lbl { display: none; }

/* ── Secondary sidebar — the section's sub-pages, grouped ── */
.ds-subnav {
  flex: none; box-sizing: border-box; width: 248px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 20px 14px; background: var(--surface); border-right: 1px solid var(--line);
  overflow-y: auto;
}
.ds-subnav-head { padding: 2px 10px 12px; }
.ds-subnav-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 5px; }
.ds-subnav-title { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

.ds-subnav-group { display: flex; flex-direction: column; gap: 1px; }
.ds-subnav-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); padding: 15px 10px 7px;
}
.ds-subnav-sep { height: 1px; background: var(--line); border: 0; margin: 9px 8px; }

.ds-subnav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 12px; border-radius: var(--r-md); border: none; background: transparent;
  color: var(--muted); font: inherit; font-size: var(--t-small); font-weight: 500; letter-spacing: -.005em;
  text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-subnav-item:hover { background: var(--paper-2); color: var(--ink); }
/* active PAGE — the single coral moment of the navigation system */
.ds-subnav-item.active { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.ds-subnav-item.active:hover { background: var(--accent-soft); }
.ds-subnav-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-subnav-item .cnt { font-size: 11.5px; color: var(--muted-2); font-family: var(--font-mono); }

/* gated item — visible-but-disabled with a quiet lock; never hidden, so the
   user knows the capability exists (and how to unlock it). */
.ds-subnav-item.locked { color: var(--muted-2); cursor: default; }
.ds-subnav-item.locked:hover { background: transparent; color: var(--muted-2); }
.ds-subnav-item.locked .lock { flex: none; margin-left: auto; opacity: .65; }

/* the upgrade affordance that rides a gated group's label — coral is allowed
   here: unlocking IS the decisive action this surface offers. */
.ds-upsell {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--r-pill); padding: 2px 8px; cursor: pointer; letter-spacing: .04em;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-upsell:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ── Kbd ── */
.ds-kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500; color: var(--muted);
  background: var(--paper-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px;
}

/* ── Avatar ── */
.ds-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:600; letter-spacing:-.01em; flex:none; }

/* ── Table ── */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.ds-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-mono); }
.ds-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table tr.hoverable:hover td { background: var(--paper); }

/* ── Motion ── one gentle rise on mount; calm pulse for "live". No bounce.
   Transform-only so a paused/backgrounded animation never hides content. */
@keyframes ds-rise { from { transform: translateY(9px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .ds-rise { animation: ds-rise .55s var(--ease); }
}
@keyframes ds-pulse { 0%,100%{opacity:.35;} 50%{opacity:1;} }
.ds-pulse-dot { width:8px; height:8px; border-radius:50%; background: var(--accent); animation: ds-pulse 2.4s ease-in-out infinite; }
.ds-pulse-dot.recording { background: var(--bad); animation-duration: 1.6s; }
@keyframes ds-blink { 0%,92%,100%{opacity:1;} 50%{opacity:.25;} }
@keyframes ds-pulse-ring { 0%{transform:scale(.85);opacity:.8;} 100%{transform:scale(1.6);opacity:0;} }
@keyframes ds-wave { from { transform: scaleY(.4); } to { transform: scaleY(1); } }

/* ── Optional utility: [data-concept="mono"] — an instrument-panel skin
   (square corners, hairline rules, mono labels). NOT the faculty treatment:
   the unified app keeps one warm posture across learner and faculty. Kept
   only as an opt-in utility for dense data tooling. ── */
[data-concept="mono"] {
  --r-sm:0; /* @kind radius */
  --r-md:0; /* @kind radius */
  --r-lg:0; /* @kind radius */
  --r-xl:2px; /* @kind radius */
  --r-pill:2px; /* @kind radius */
  --line:#D5D2C8; --line-2:#A9A69B;
}
[data-concept="mono"] .ds-label, [data-concept="mono"] .ds-chip, [data-concept="mono"] .ds-table th { font-family: var(--font-mono); letter-spacing:.04em; }
[data-concept="mono"] .ds-card { box-shadow:none; }
[data-concept="mono"] .ds-btn { border-color: var(--line-2); box-shadow:none; }
[data-concept="mono"] .ds-btn.primary { border-color: var(--ink); }
[data-concept="mono"] .ds-nav-item { border-radius: 0; }
[data-concept="mono"] .ds-nav-item.active { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* two-level nav under the instrument-panel posture: square edges; the active
   page keeps its coral tint (it is the one signal that should never go mono). */
[data-concept="mono"] .ds-rail-item,
[data-concept="mono"] .ds-subnav-item,
[data-concept="mono"] .ds-rail-pin { border-radius: 0; }
[data-concept="mono"] .ds-rail.collapsed .ds-rail-item { border-radius: 0; }
[data-concept="mono"] .ds-rail-item.active { background: var(--ink); }