/* ─────────────────────────────────────────────────────────────
   Amara Unified — cosmetic layer
   Propagates the Design-System iterations (unified pill / card /
   tab / form / severity primitives) onto the three production
   shells (Acute, Flow, Palliate).

   Load AFTER colors_and_type.css and AFTER the app's inline
   <style>. Touches colours, type, radii, borders, spacing only.
   No layout restructuring. No JS. No HTML changes required.
   ───────────────────────────────────────────────────────────── */

/* ── 1. Severity token refinement (design-system muted palette)
      Severity hex values are fixed (look good in both modes).
      Surface / text tokens are aliased to each app's existing
      tokens so light-mode flips Just Work. ─────────────────── */
:root,
.amara-acute,
.amara-flow,
.amara-palliate{
  --u-crit:#E8526A;   /* deep carmine */
  --u-red :#D76F7E;   /* softer acuity */
  --u-urg :#E8A93F;   /* warm amber */
  --u-ok  :#5EB583;   /* muted sage */
  --u-info:#6B9BD6;   /* twilight blue */
  --u-soft:#B488D6;   /* soft violet  */

  --u-rds:10px;
  --u-rds-sm:7px;
}

/* ── 1a. Pre-existing fix: Palliate light mode never flipped
      body-scope tokens because colors_and_type.css only declares
      .amara-palliate.light (needs `light` on body) but Palliate's
      JS toggles `light` on <html>. Add the missing :root.light
      descendant selector so body tokens flip too. Specificity
      (0,2,0) beats the dark .amara-palliate (0,1,0). ───────── */
:root.light .amara-palliate{
  --bg:#FAF8F6; --sf:#F0ECE8; --sf2:#E8E2DB; --sf3:#DDD6CD;
  --bd:#C4BBAF; --bd2:#AEA397;
  --tx:#2D2A33; --dim:#5C5466; --fnt:#6B6573;
  --acc:#7C6B8A; --acc2:#6B5A7A; --acc3:#5A4A69;
  --grn:#4A8F5E; --red:#B8525A; --org:#B8864A; --lo:#4A7E8F;
  --warm:#8F7A5E;
  --crit:var(--red); --hi:var(--red); --ylw:var(--org);
  --acc-soft:color-mix(in srgb, var(--acc) 8%, transparent);
  --acc-ring:color-mix(in srgb, var(--acc) 31%, transparent);
}

/* Surface + text tokens — bind to whichever the host app exposes.
   Acute / Palliate use --tx/--dim/--fnt/--sf/--bd/--bd2.
   Flow uses --text/--dim/--dimmer/--surface/--border/--border2. */
.amara-acute,
.amara-palliate{
  --u-tx       : var(--tx);
  --u-dim      : var(--dim);
  --u-fnt      : var(--fnt);
  --u-panel-bg : var(--sf);
  --u-chip-bg  : var(--bg);
  --u-panel-bd : var(--bd);
  --u-panel-bd2: var(--bd2);
}
.amara-flow{
  --u-tx       : var(--text);
  --u-dim      : var(--dim);
  --u-fnt      : var(--dimmer);
  --u-panel-bg : var(--surface);
  --u-chip-bg  : var(--bg);
  --u-panel-bd : var(--border);
  --u-panel-bd2: var(--border2);
}

/* ── 2. The Au- primitive kit (opt-in classes, safe additions)
      Devs can drop these straight into markup; the existing
      app class-names are left untouched. ──────────────────── */

/* Eyebrow */
.au-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tone,var(--u-dim));font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
}
.au-eyebrow .pulse{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  animation:amara-pulse 2s ease-in-out infinite;
}

/* Pill */
.au-pill{
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 14px;
  border-radius:var(--u-rds-sm);border:1px solid var(--u-panel-bd);
  background:var(--u-panel-bg);color:#c9d0e0;
  font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;
  cursor:pointer;transition:border-color .15s,background .15s,color .15s;
  white-space:nowrap;
}
.au-pill:hover{border-color:var(--u-panel-bd2);background:#1f2431;color:#e0e6f2;}
.au-pill.on{background:#24304a;border-color:#425680;color:#eaf0ff;}
.au-pill.primary{background:#3a5080;border-color:#5070a8;color:#fff;font-weight:600;}
.au-pill.ghost{background:transparent;color:#9098ab;}
.au-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9;}
.au-pill .val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;opacity:.85;margin-left:3px;}

.au-pill[data-tone="crit"]{background:rgba(232,82,106,.18); border-color:rgba(232,82,106,.45); color:#F8C5CC;}
.au-pill[data-tone="urg" ]{background:rgba(232,169,63,.16); border-color:rgba(232,169,63,.42); color:#F3DBA8;}
.au-pill[data-tone="ok"  ]{background:rgba(94,181,131,.16); border-color:rgba(94,181,131,.42); color:#B7E0C8;}
.au-pill[data-tone="info"]{background:rgba(107,155,214,.16);border-color:rgba(107,155,214,.42);color:#BDD3EC;}
.au-pill[data-tone="soft"]{background:rgba(180,136,214,.14);border-color:rgba(180,136,214,.38);color:#D5BFE3;}

/* Segmented control */
.au-seg{
  display:inline-flex;height:34px;background:var(--u-panel-bg);
  border:1px solid var(--u-panel-bd);border-radius:var(--u-rds-sm);
  padding:3px;gap:2px;
}
.au-seg button{
  border:none;background:transparent;color:var(--u-dim);
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:500;
  padding:0 14px;border-radius:5px;cursor:pointer;transition:color .15s,background .15s;
}
.au-seg button:hover{color:var(--u-tx);}
.au-seg button.on{background:#2c3344;color:#eaf0ff;font-weight:600;}

/* Panel / Card primitive */
.au-panel,.au-card{
  position:relative;
  background:var(--u-panel-bg);
  border:1px solid var(--u-panel-bd);
  border-radius:var(--u-rds);
  padding:16px 18px 16px 22px;
  overflow:hidden;
}
.au-panel::before,.au-card::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;
  background:var(--tone,var(--u-panel-bd2));
}
.au-card.crit{--tone:var(--u-crit);background:#211319;border-color:#4a2a34;}
.au-card.urg {--tone:var(--u-urg);}
.au-card.ok  {--tone:var(--u-ok);}
.au-card.info{--tone:var(--u-info);}
.au-card.soft{--tone:var(--u-soft);}

.au-title{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;color:var(--u-tx);margin:6px 0 4px;line-height:1.35;}
.au-title.serif{font-family:'Cormorant Garamond',serif;font-size:18px;}
.au-body{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.6;color:#b0b8cc;}
.au-body strong{color:var(--u-tx);font-weight:600;}
.au-body code,.au-code{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#d8e0f0;
  background:#242935;border:1px solid #3a4150;padding:1px 6px;border-radius:4px;
}

/* Severity — card-style glyph */
.au-sev{
  position:relative;padding:14px 14px 14px 18px;border-radius:var(--u-rds);
  background:#11141c;border:1px solid #1e222d;
  display:flex;flex-direction:column;gap:8px;min-height:128px;overflow:hidden;
}
.au-sev::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--sev-bg);}
.au-sev::after{
  content:"";position:absolute;top:-40%;right:-30%;width:140%;height:100%;
  background:radial-gradient(ellipse at center,var(--sev-bg) 0%,transparent 60%);
  opacity:.18;pointer-events:none;
}
.au-sev .dot{width:7px;height:7px;border-radius:50%;background:var(--sev-bg);box-shadow:0 0 0 3px var(--sev-ring);}
.au-sev.crit{--sev-bg:var(--u-crit); --sev-ring:rgba(232,82,106,.18);}
.au-sev.red {--sev-bg:var(--u-red);  --sev-ring:rgba(215,111,126,.18);}
.au-sev.warn{--sev-bg:var(--u-urg);  --sev-ring:rgba(232,169,63,.18);}
.au-sev.ok  {--sev-bg:var(--u-ok);   --sev-ring:rgba(94,181,131,.18);}
.au-sev.info{--sev-bg:var(--u-info); --sev-ring:rgba(107,155,214,.18);}

@keyframes amara-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}


/* ── 3. Cosmetic overrides — Acute (index.html) ─────────────── */
.amara-acute .sh,
.amara-acute .pan-hdr{
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--u-dim);font-weight:600;
}

.amara-acute .rst,
.amara-acute .a-btn{
  border-radius:var(--u-rds-sm);
  font-weight:500;
}
.amara-acute .rst:hover,
.amara-acute .a-btn:hover{border-color:var(--u-panel-bd2);color:var(--u-tx);}
.amara-acute .a-btn.on,
.amara-acute .a-btn[aria-pressed="true"]{
  background:color-mix(in srgb,var(--acc) 18%,transparent);
  border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  color:var(--acc);font-weight:600;
}

.amara-acute .a-card{
  border-radius:var(--u-rds);
  padding:14px 16px 14px 20px;
  position:relative;
}
.amara-acute .a-card--accent{border-left:3px solid var(--acc);}
.amara-acute .a-card--crit{border-left:3px solid var(--u-crit);}
.amara-acute .a-card--warn{border-left:3px solid var(--u-urg);}
.amara-acute .a-card--ok  {border-left:3px solid var(--u-ok);}

/* Acute severity chips — keep existing rgba fill maths, just
   swap the base tones via a soft cosmetic shift. */
.amara-acute .sev-crit{background:color-mix(in srgb,var(--u-crit) 15%,transparent);color:var(--u-crit);border:1px solid color-mix(in srgb,var(--u-crit) 40%,transparent);}
.amara-acute .sev-red {background:color-mix(in srgb,var(--u-red)  12%,transparent);color:var(--u-red);border:1px solid color-mix(in srgb,var(--u-red)  35%,transparent);}
.amara-acute .sev-mod {background:color-mix(in srgb,var(--u-info) 12%,transparent);color:var(--u-info);border:1px solid color-mix(in srgb,var(--u-info) 35%,transparent);}
.amara-acute .urg-dot.urg-crit{color:var(--u-crit);}
.amara-acute .urg-dot.urg-hi  {color:var(--u-red);}
.amara-acute .urg-dot.urg-med {color:var(--u-urg);}

/* Acute tab bar — colour-forward active state from design system */
.amara-acute .tab-bar{background:var(--sf);border-bottom:1px solid var(--bd);}
.amara-acute .tab-btn{
  font-family:'Outfit',sans-serif;font-weight:500;
  color:var(--u-dim);border-bottom:2px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
}
.amara-acute .tab-btn:hover{color:var(--tx);background:color-mix(in srgb,var(--acc) 8%,transparent);}
.amara-acute .tab-btn.active{
  color:var(--acc);
  background:color-mix(in srgb,var(--acc) 10%,transparent);
  border-bottom-color:var(--acc);
}


/* ── 4. Cosmetic overrides — Flow (cliniflow.html) ──────────── */
.amara-flow .hpill{border-radius:var(--u-rds-sm);}
.amara-flow .hpill button{
  font-family:'Outfit',sans-serif;font-weight:500;letter-spacing:0;
  transition:color .15s,background .15s;
}
.amara-flow .hpill button:hover{color:var(--u-tx);}
/* Active state — preserve original saturated-accent fill with
   white text (cleanest contrast across both modes). */

.amara-flow .hbtn{
  border-radius:var(--u-rds-sm);
  font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;
}
.amara-flow .hbtn:hover{border-color:var(--u-panel-bd2);color:var(--u-tx);background:transparent;}

/* Flow tag / lane-chip — muted tones, unified shape */
.amara-flow .tag{
  border-radius:var(--u-rds-sm);font-family:'Outfit',sans-serif;
  font-weight:500;letter-spacing:0;
}
.amara-flow .tag .val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;opacity:.85;}
.amara-flow .lchip{
  border-radius:var(--u-rds-sm);font-family:'Outfit',sans-serif;
  font-weight:500;letter-spacing:0;
}

/* Flow "match card" (mc-*) -> card primitive */
.amara-flow .mc-top{padding:11px 12px;gap:9px;}
.amara-flow .mc-name{font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;color:var(--u-tx);}
.amara-flow .mc-score{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--u-dim);}
.amara-flow .mc-det{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.6;color:var(--u-dim);padding:0 12px 12px;}
.amara-flow .mc-det .desc{border-radius:var(--u-rds-sm);border-left-width:3px;padding:10px 12px;}
.amara-flow .mc-det label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--u-fnt);font-weight:600;}
.amara-flow .mc-meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--u-fnt);}

/* Flow search box — panel primitive vibes */
.amara-flow .search-box input{
  border-radius:var(--u-rds-sm);font-family:'DM Sans',sans-serif;
}
.amara-flow .search-box input:focus{box-shadow:0 0 0 3px rgba(163,113,247,.18);}

.amara-flow .cat-h{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  color:var(--u-dim);font-weight:600;
}

@media(max-width:640px){
  .amara-flow .mc-top{padding:11px 9px;gap:8px;}
  .amara-flow .mc-name{font-size:14px;line-height:1.25;}
  .amara-flow .mc-glance{font-size:12px;line-height:1.35;}
  .amara-flow .mc-det{padding:0 10px 11px;font-size:12px;}
}


/* ── 5. Cosmetic overrides — Palliate (palliate.html) ───────── */
.amara-palliate .sh{
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;letter-spacing:.12em;
  color:var(--u-dim);font-weight:600;
}
.amara-palliate .rst{
  border-radius:var(--u-rds-sm);font-weight:500;
}
.amara-palliate .rst:hover{border-color:var(--u-panel-bd2);color:var(--u-tx);}

/* Palliate severity tags — muted tones in matching pill shape */
.amara-palliate .sev-btn,
.amara-palliate .sev-pill{
  border-radius:var(--u-rds-sm);
  font-family:'Outfit',sans-serif;font-weight:500;
}
.amara-palliate .sev-btn.on-mild,
.amara-palliate .sev-pill.mild   {background:rgba(94,181,131,.16);border-color:rgba(94,181,131,.42);color:#B7E0C8;}
.amara-palliate .sev-btn.on-mod,
.amara-palliate .sev-pill.mod    {background:rgba(232,169,63,.16);border-color:rgba(232,169,63,.42);color:#F3DBA8;}
.amara-palliate .sev-btn.on-sev,
.amara-palliate .sev-btn.on-severe,
.amara-palliate .sev-pill.severe {background:rgba(232,82,106,.18);border-color:rgba(232,82,106,.45);color:#F8C5CC;}

/* Palliate light mode needs dark semantic text; the dark-theme pastels above
   do not meet readable contrast on the light surface. */
:root.light .amara-palliate .sev-btn.on-mild,
:root.light .amara-palliate .sev-pill.mild   {background:rgba(45,125,78,.14);border-color:rgba(45,125,78,.55);color:#155632;}
:root.light .amara-palliate .sev-btn.on-mod,
:root.light .amara-palliate .sev-pill.mod    {background:rgba(164,102,21,.14);border-color:rgba(164,102,21,.58);color:#7A4709;}
:root.light .amara-palliate .sev-btn.on-sev,
:root.light .amara-palliate .sev-btn.on-severe,
:root.light .amara-palliate .sev-pill.severe {background:rgba(174,52,68,.13);border-color:rgba(174,52,68,.58);color:#8F2432;}

.amara-palliate .sev-def{
  border-radius:var(--u-rds);
  padding:12px 14px;
}
.amara-palliate .sev-def-h{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.12em;
  color:var(--u-dim);font-weight:600;
}