/* ==========================================================================
   Brief — shared component library (CW-027)
   Canonical CSS for all Brief skills. Do not fork per-brief — edit here.

   Design tokens sourced from CW-028 (@jason/ui-kit, src/lib/tokens.json).
   Light theme is default; dark theme via [data-theme="dark"]; print always
   forces light regardless of the on-screen toggle state.

   Re-pull tokens from git.alwisp.com/jason/ui-kit at each Brief release in
   case Jason has updated them — see CW-027 Concept.md, "Design system
   source of truth."
   ========================================================================== */

:root{
  --bg:#FAF8F4; --surface:#FFFFFF; --surface-2:#F4F0EA; --border:#DED8D1;
  --text:#272326; --muted:#665F62;
  --brand:#79640E; --brand-bright:#665308; --brand-dark:#5C4B07; --brand-fg:#FFFFFF;
  --success:#217A4A; --success-fg:#FFFFFF;
  --warning:#7A5B00; --warning-fg:#FFFFFF;
  --danger:#A42D20; --danger-fg:#FFFFFF;
  --info:#366B99; --info-fg:#FFFFFF;

  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --shadow-sm:0 1px 2px 0 rgb(20 16 18 / .10);
  --shadow-md:0 4px 12px -2px rgb(20 16 18 / .14), 0 2px 4px -2px rgb(20 16 18 / .10);
  --shadow-lg:0 12px 32px -8px rgb(20 16 18 / .20), 0 4px 8px -4px rgb(20 16 18 / .12);
  --shadow-glow:0 0 0 1px rgb(121 100 14 / .18), 0 8px 28px -6px rgb(121 100 14 / .20);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms;
}
[data-theme="dark"]{
  --bg:#232022; --surface:#2B282A; --surface-2:#333031; --border:#3A3638;
  --text:#F5F1EC; --muted:#A99F97;
  --brand:#DCBB4F; --brand-bright:#F5CD15; --brand-dark:#998643; --brand-fg:#232022;
  --success:#62C890; --success-fg:#232022;
  --warning:#E4C85B; --warning-fg:#232022;
  --danger:#D76F4A; --danger-fg:#232022;
  --info:#76A9D6; --info-fg:#232022;
  --shadow-glow:0 0 0 1px rgb(220 187 79 / .20), 0 8px 28px -6px rgb(220 187 79 / .28);
}

/* Fonts: production should self-host from CW-001's assets/fonts/*.ttf.
   This @import is a portability fallback for previewing outside that
   pipeline — swap it for local <link>/@font-face at publish time. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&family=JetBrains+Mono:wght@500&display=swap');

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Open Sans",system-ui,sans-serif; line-height:1.55;
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
h1,h2,h3,h4{font-family:"Montserrat",system-ui,sans-serif;}
code,.mono{font-family:"JetBrains Mono",ui-monospace,monospace;}

/* ---- Header ---- */
header{
  background:linear-gradient(135deg, var(--brand-dark), var(--brand));
  color:#fff; padding:32px 6vw 26px; position:relative;
}
[data-theme="dark"] header{background:linear-gradient(135deg,#3a2f08,var(--brand-dark));}
header .wordmark{
  display:inline-flex; align-items:center; gap:8px; font-family:"Montserrat";
  font-weight:700; font-size:15px; letter-spacing:1px; opacity:.9; margin-bottom:10px;
}
header .wordmark .dot{width:8px; height:8px; border-radius:50%; background:#fff;}
header .eyebrow{font-size:12.5px; letter-spacing:2px; text-transform:uppercase; opacity:.8;}
header h1{margin:8px 0 4px; font-size:26px; font-weight:700; max-width:860px;}
header .meta{margin-top:12px; font-size:13px; opacity:.9; display:flex; flex-wrap:wrap; gap:18px;}
header .meta b{font-weight:600;}
.theme-toggle{
  position:absolute; top:28px; right:6vw; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:999px;
  padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover{background:rgba(255,255,255,.28);}

/* ---- Sticky jump-nav ---- */
nav.toc{
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:10px 6vw; display:flex; flex-wrap:wrap; gap:6px 16px;
  position:sticky; top:0; z-index:50; font-size:12.5px;
}
nav.toc a{color:var(--brand); text-decoration:none; white-space:nowrap; font-weight:600;}
nav.toc a:hover{text-decoration:underline;}

/* ---- Layout & section rhythm ---- */
main{padding:26px 6vw 60px; max-width:1180px; margin:0 auto;}
section{margin-bottom:42px;}
section > .sechead{
  display:flex; align-items:baseline; gap:10px; margin-bottom:14px;
  border-bottom:3px solid var(--brand); padding-bottom:8px;
}
.secnum{
  background:var(--brand); color:var(--brand-fg); font-weight:700; font-size:14px;
  width:28px; height:28px; border-radius:var(--radius-sm); display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.sechead h2{margin:0; font-size:19px; color:var(--text);}
.sechead .sub{font-size:12px; font-weight:400; color:var(--muted); margin-left:4px;}
.sec-note{font-size:13px; color:var(--muted); margin:8px 0 14px; max-width:75ch;}

/* ---- Cards (c2/c3/c4/c5 densities) ---- */
.cards{display:grid; gap:14px;}
.cards.c2{grid-template-columns:repeat(2,1fr);}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c4{grid-template-columns:repeat(4,1fr);}
.cards.c5{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){.cards.c3,.cards.c4,.cards.c5{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.cards.c2,.cards.c3,.cards.c4,.cards.c5{grid-template-columns:1fr;}}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.card h3{margin:0 0 6px; font-size:14.5px; color:var(--text);}
.card p{margin:6px 0; font-size:13px; color:var(--muted);}
.icon{
  width:36px; height:36px; border-radius:var(--radius-sm); display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:17px;
  font-weight:700; margin-bottom:8px;
}
.sensorgrid .card{text-align:center;}
.sensorgrid .icon{margin:0 auto 8px;}

/* ---- Flow (sequential process) ---- */
.flow{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;}
.flow .step{flex:1; min-width:160px;}
.flow .arrow{align-self:center; font-size:20px; color:var(--muted); padding:0 2px;}

/* ---- Layerbox + filepill (tiered component grouping) ---- */
.layerbox{border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:12px; border:2px solid var(--border);}
.layer-base{background:color-mix(in srgb, var(--info) 8%, var(--surface)); border-color:var(--info);}
.layer-ext{background:color-mix(in srgb, var(--warning) 10%, var(--surface)); border-style:dashed; border-color:var(--warning);}
.layerbox .tag{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.5px;
  padding:2px 9px; border-radius:999px; color:#fff; margin-bottom:8px;
}
.tag-base{background:var(--info);} .tag-ext{background:var(--warning); color:var(--text);}
.filepill{
  display:inline-flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 12px; margin:4px 8px 4px 0; font-size:12.5px; min-width:160px;
}
.filepill b{font-size:13px; color:var(--text);}
.filepill span{color:var(--muted);}

/* ---- Unitgrid (spec/comparison matrix) ---- */
table.unitgrid{border-collapse:collapse; width:100%; margin-top:10px; font-size:12.5px;}
table.unitgrid th, table.unitgrid td{border:1px solid var(--border); padding:8px 10px; text-align:center;}
table.unitgrid th{background:var(--text); color:var(--bg); font-weight:600;}
table.unitgrid td.yes{color:var(--success); font-weight:700;}
table.unitgrid td.no{color:var(--muted);}
table.unitgrid td:first-child{text-align:left; font-weight:600;}

/* ---- Quad (2x2 flagship callouts) ---- */
.quad{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:700px){.quad{grid-template-columns:1fr;}}
.quadcard{
  border-radius:var(--radius-md); padding:14px 16px; background:var(--surface);
  border:1px solid var(--border); border-left-width:5px; border-left-style:solid;
}
.q-1{border-left-color:var(--info);}
.q-2{border-left-color:var(--warning);}
.q-3{border-left-color:var(--danger);}
.q-4{border-left-color:var(--success);}
.quadcard h4{margin:0 0 6px; font-size:13.5px; color:var(--text);}
.quadcard p{font-size:12.5px; margin:4px 0; color:var(--muted);}

/* ---- Compare (two-column contrast) ---- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:700px){.compare{grid-template-columns:1fr;}}
.compare .col{border-radius:var(--radius-md); padding:14px 16px; border:1px solid var(--border);}
.col-a{background:color-mix(in srgb, var(--info) 8%, var(--surface));}
.col-b{background:color-mix(in srgb, var(--brand) 8%, var(--surface));}
.compare h3{margin-top:0; font-size:14px;}
.compare ul{margin:8px 0 0; padding-left:18px; font-size:12.5px; color:var(--muted);}
.compare li{margin-bottom:8px;}

/* ---- Specbar (stat cards) ---- */
.specbar{display:flex; flex-wrap:wrap; gap:14px;}
.spec{flex:1; min-width:160px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px;}
.spec .val{font-size:22px; font-weight:700; color:var(--brand); font-family:"Montserrat";}
.spec .lbl{font-size:11.5px; color:var(--muted); margin-top:2px;}

/* ---- Actions table + status pills ---- */
table.actions{border-collapse:collapse; width:100%; font-size:12.5px;}
table.actions th{background:var(--text); color:var(--bg); padding:8px 10px; text-align:left; font-weight:600;}
table.actions td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text);}
table.actions tr:nth-child(even) td{background:var(--surface-2);}
.status{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 10px; border-radius:999px; white-space:nowrap;}
.status.info{background:var(--info); color:var(--info-fg);}
.status.warn{background:var(--warning); color:var(--warning-fg);}
.status.danger{background:var(--danger); color:var(--danger-fg);}
.status.success{background:var(--success); color:var(--success-fg);}
.status.muted{background:var(--muted); color:var(--surface);}

/* ---- Note callouts (4 semantic tones) ---- */
.note{border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; border-left:4px solid; margin-bottom:10px;}
.note.info{background:color-mix(in srgb, var(--info) 10%, var(--surface)); border-color:var(--info);}
.note.warn{background:color-mix(in srgb, var(--warning) 12%, var(--surface)); border-color:var(--warning);}
.note.danger{background:color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color:var(--danger);}
.note.success{background:color-mix(in srgb, var(--success) 10%, var(--surface)); border-color:var(--success);}
.note b{color:var(--text);}

/* ---- Colvis / conic-gradient ring (space/percentage allocation) ---- */
.colvis{display:flex; gap:16px; flex-wrap:wrap; align-items:stretch;}
.colvis .colcard{flex:1; min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; text-align:center;}
.colvis .ring{
  width:110px; height:110px; border-radius:50%; margin:0 auto 10px; position:relative;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--text); font-size:12.5px;
}
.ring-main{background:conic-gradient(var(--brand) 0 35%, var(--info) 35% 65%, var(--warning) 65% 100%);}
.ring-main::after{content:""; position:absolute; width:68px; height:68px; background:var(--surface); border-radius:50%;}
.colvis .ring span{position:relative; z-index:2;}
.legend{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; font-size:11px; margin-top:6px; color:var(--muted);}
.legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px;}

/* ---- Footer ---- */
footer{padding:22px 6vw; color:var(--muted); font-size:11.5px; text-align:center; border-top:1px solid var(--border); margin-top:20px;}

/* ==========================================================================
   PRINT — always light, no chrome, avoid awkward breaks.
   PDF generation at publish time should render this media state.
   ========================================================================== */
@media print{
  .theme-toggle, nav.toc{display:none !important;}
  body{background:#FAF8F4 !important; color:#272326 !important;}
  header{background:#79640E !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .card, .quadcard, .layerbox, .filepill, .note, .colcard, .spec{
    break-inside:avoid;
  }
  table.unitgrid tr, table.actions tr{break-inside:avoid;}
  table.unitgrid thead, table.actions thead{display:table-header-group;}
  a{color:inherit; text-decoration:none;}
}