/* ============================================================
   AXION // OS  —  the studio as an instrument
   Design tokens mirror the live storefront (theme 7): light warm
   paper, near-black ink, bronze primary + gold signal, sharp
   corners, Space Grotesk 300 uppercase, IBM Plex Mono annotations.
   ============================================================ */
:root {
  --paper:        #FAFAF8;
  --paper-2:      #F3F1EC;
  --paper-3:      #ECEAE3;
  --ink:          #17140F;
  --ink-mid:      #857F74;
  --ink-subtle:   #B5AEA3;
  --border:       #E6E3DC;
  --border-strong:#D7D3CA;
  --accent:       #A67C4A;   /* bronze — interactive / active / primary */
  --accent-hover: #8C6638;
  --gold:         #C9A84C;   /* signal — used sparingly */
  --gold-bright:  #F2B90D;   /* eyebrow highlight */
  --instr-line:   rgba(23,20,15,.14);
  --instr-read:   rgba(23,20,15,.42);
  --ok:           #4A7C59;
  --warn:         #A6603A;

  --t-display: "Space Grotesk","Inter",system-ui,sans-serif;
  --t-body:    "Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --t-mono:    "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);

  --rail-w: 214px;
  --rail-mh: 44px;   /* rail height when it flips to a horizontal strip on phones */
  --spec-h: 46px;
  --mq-h: 30px;
  --side: clamp(1.5rem,3.5vw,3rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--t-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--accent); color:var(--paper); }

/* ---- shared type atoms ------------------------------------- */
.eyebrow{
  font-family:var(--t-mono);
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-mid);
}
.eyebrow .hot{ color:var(--gold-bright); }
.mono{ font-family:var(--t-mono); }
.diamond{ color:var(--accent); }

/* ============================================================
   SPEC BAR (fixed top)
   ============================================================ */
.spec-bar{
  position:fixed; top:0; left:0; right:0; height:var(--spec-h);
  display:flex; align-items:center; gap:24px;
  padding:0 var(--side);
  background:rgba(250,250,248,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  z-index:80;
}
.spec-bar .brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--t-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.spec-bar .brand .mk{
  width:9px; height:9px; background:var(--accent);
  transform:rotate(45deg); display:inline-block;
}
.spec-bar .crumb{
  font-family:var(--t-mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-subtle);
}
.spec-bar .live{
  margin-left:auto; display:flex; align-items:center; gap:20px;
  font-family:var(--t-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mid);
}
.spec-bar .live b{ color:var(--ink); font-weight:500; }
.spec-bar .live .dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  display:inline-block; margin-right:7px; vertical-align:middle;
  box-shadow:0 0 0 0 rgba(201,168,76,.6); animation:pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(201,168,76,.55); }
  70%{ box-shadow:0 0 0 7px rgba(201,168,76,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,168,76,0); }
}

/* ---- marquee ---------------------------------------------- */
.marquee{
  position:fixed; top:var(--spec-h); left:0; right:0; height:var(--mq-h);
  overflow:hidden; border-bottom:1px solid var(--border);
  background:var(--paper-2); z-index:79; display:flex; align-items:center;
}
.marquee .track{
  display:inline-flex; white-space:nowrap; gap:0;
  animation:scroll 46s linear infinite; will-change:transform;
}
.marquee .it{
  font-family:var(--t-mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mid); padding:0 30px;
  display:inline-flex; align-items:center; gap:12px;
}
.marquee .it b{ color:var(--ink); font-weight:500; }
.marquee .it::after{ content:"◆"; color:var(--accent); font-size:8px; }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   NAV RAIL (fixed left)
   ============================================================ */
.rail{
  position:fixed; top:calc(var(--spec-h) + var(--mq-h)); bottom:0; left:0;
  width:var(--rail-w); border-right:1px solid var(--border);
  padding:26px 0 18px; display:flex; flex-direction:column;
  background:var(--paper); z-index:70;
}
.rail .grp{
  font-family:var(--t-mono); font-size:9px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-subtle);
  padding:0 22px; margin:0 0 12px;
}
.rail nav{ display:flex; flex-direction:column; }
.rail a{
  position:relative; display:flex; align-items:baseline; gap:12px;
  padding:9px 22px; font-family:var(--t-mono); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid);
  transition:color .25s var(--ease-out), background .25s var(--ease-out);
}
.rail a .idx{ font-size:9px; color:var(--ink-subtle); width:16px; }
/* posts waiting on a principal — the one count in the rail that means "act" */
.rail a .navbadge{
  margin-left:auto; font-size:9px; letter-spacing:.06em; line-height:1;
  padding:3px 6px; border-radius:999px; background:var(--accent); color:var(--paper);
}
.rail a:hover{ color:var(--ink); background:var(--paper-2); }
.rail a.on{ color:var(--ink); }
.rail a.on::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(45deg);
  width:6px; height:6px; background:var(--accent); margin-left:8px;
}
.rail a.on .idx{ color:var(--accent); }
.rail .spacer{ flex:1; }
.rail .who{
  border-top:1px solid var(--border); margin:0 0 0; padding:16px 22px 4px;
}
.rail .who .nm{ font-family:var(--t-mono); font-size:11px; letter-spacing:.1em; color:var(--ink); text-transform:uppercase; }
.rail .who .rl{ font-family:var(--t-mono); font-size:9px; letter-spacing:.2em; color:var(--ink-subtle); text-transform:uppercase; margin-top:3px; }
.rail .who form{ margin-top:10px; }
.rail .who button{
  font-family:var(--t-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mid); border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
}
.rail .who button:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================
   STAGE (main)
   ============================================================ */
.stage{
  margin-left:var(--rail-w);
  padding:calc(var(--spec-h) + var(--mq-h) + 40px) var(--side) 120px;
  min-height:100vh; position:relative;
  max-width:1500px;
}
.stage-mark{
  position:fixed; right:22px; bottom:16px; z-index:60;
  font-family:var(--t-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-subtle);
  display:flex; align-items:center; gap:8px;
}
.stage-mark .mk{ width:7px; height:7px; background:var(--accent); transform:rotate(45deg); display:inline-block; }

/* reveal primitive — guarded by html.js so no-JS / non-compositing always shows content */
html.js .rv{ opacity:0; transform:translateY(28px); }
html.js .rv.in{ opacity:1; transform:none; transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
@media (prefers-reduced-motion: reduce){ html.js .rv{ opacity:1; transform:none; } }

/* ---- HERO -------------------------------------------------- */
.hero{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:end;
  padding-bottom:clamp(2.4rem,4vw,3.6rem); border-bottom:1px solid var(--border); }
.hero .lede .eyebrow{ margin-bottom:20px; }
.hero h1{
  font-family:var(--t-display); font-weight:300; text-transform:uppercase;
  font-size:clamp(2.6rem,5.2vw,4.6rem); line-height:.94; letter-spacing:.005em;
  color:var(--ink);
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero .sub{
  margin-top:22px; max-width:46ch; color:var(--ink-mid);
  font-size:15px; line-height:1.6;
}
.hero .sub b{ color:var(--ink); font-weight:500; }

/* blueprint spec panel (right of hero) */
.spec-panel{ border:1px solid var(--instr-line); padding:20px 22px; position:relative; background:var(--paper); }
.spec-panel::before{ content:""; position:absolute; inset:6px; border:1px solid var(--instr-line); opacity:.5; pointer-events:none; }
.spec-panel .ttl{ font-family:var(--t-mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--instr-read); margin-bottom:16px; }
.spec-panel .row{ display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-top:1px solid var(--instr-line); }
.spec-panel .row:first-of-type{ border-top:none; }
.spec-panel .row .k{ font-family:var(--t-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mid); }
.spec-panel .row .v{ font-family:var(--t-mono); font-size:12px; letter-spacing:.04em; color:var(--ink); }
.spec-panel .row .v.hot{ color:var(--accent); }

/* ---- MEASURE STRIP (KPIs, hairline-ruled — not boxes) ------ */
.measure{ display:grid; grid-template-columns:repeat(6,1fr); margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.measure .cell{ padding:22px 22px 20px; border-left:1px solid var(--border); }
.measure .cell:first-child{ border-left:none; }
.measure .cell .num{
  font-family:var(--t-display); font-weight:400; font-size:clamp(1.7rem,2.5vw,2.5rem);
  line-height:1; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.measure .cell .num .pre{ color:var(--ink-subtle); font-size:.6em; margin-right:2px; }
.measure .cell .num.up{ color:var(--accent); }
.measure .cell .lab{ font-family:var(--t-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mid); margin-top:12px; }

/* ---- TWO-COLUMN: LATEST + ATTENTION ------------------------ */
.cols{ display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(1.5rem,3vw,2.75rem); margin-top:clamp(2.6rem,5vw,4rem); }
.panel .head{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.panel .head .eyebrow .n{ color:var(--ink); }

/* activity timeline */
.feed .row{ display:grid; grid-template-columns:112px 18px 1fr; gap:6px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--border); }
.feed .row .ts{ font-family:var(--t-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-subtle); text-transform:uppercase; }
.feed .row .gl{ font-size:9px; color:var(--accent); line-height:1.7; }
.feed .row .gl.sale{ color:var(--gold-bright); }
.feed .row .bd .tt{ color:var(--ink); font-size:14px; line-height:1.45; }
.feed .row .bd .tt b{ font-weight:500; }
.feed .row .bd .mt{ font-family:var(--t-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-subtle); margin-top:4px; }
.feed .row .bd .mt .kind{ color:var(--accent); }

/* attention */
.attention{ }
.att-post{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 16px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.att-post .k{ font-family:var(--t-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mid); }
.att-post .badge{ font-family:var(--t-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:5px 11px; border:1px solid var(--border-strong); }
.att-post .badge.live{ color:#6c5327; border-color:var(--gold); background:rgba(201,168,76,.12); }
.att-post .badge.hold{ color:var(--warn); border-color:var(--warn); }
.att-item{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:13px 0; border-bottom:1px solid var(--border); }
.pri{ font-family:var(--t-mono); font-size:9px; letter-spacing:.12em; padding:3px 7px; text-transform:uppercase; align-self:start; margin-top:2px; }
.pri.P0{ background:var(--accent); color:var(--paper); }
.pri.P1{ color:var(--accent); border:1px solid var(--accent); }
.pri.P2{ color:var(--ink-mid); border:1px solid var(--border-strong); }
.pri.P3{ color:var(--ink-subtle); border:1px solid var(--border); }
.att-item .tt{ font-size:13.5px; line-height:1.45; color:var(--ink); }
.att-item .own{ font-family:var(--t-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-subtle); margin-top:5px; }
.empty{ font-family:var(--t-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-subtle); padding:20px 0; text-transform:uppercase; }

/* ---- CATALOGUE LEDGER -------------------------------------- */
.ledger{ margin-top:clamp(2.6rem,5vw,4rem); }
.ledger .rows{ border-top:1px solid var(--border); }
.ledger .lr{ display:grid; grid-template-columns:26px 1fr auto auto; gap:20px; align-items:baseline;
  padding:16px 4px; border-bottom:1px solid var(--border); transition:background .25s var(--ease-out); }
.ledger .lr:hover{ background:var(--paper-2); }
.ledger .lr .no{ font-family:var(--t-mono); font-size:10px; color:var(--ink-subtle); letter-spacing:.1em; }
.ledger .lr .nm{ font-family:var(--t-display); font-weight:400; text-transform:uppercase; font-size:16px; letter-spacing:.02em; color:var(--ink); }
.ledger .lr .ct{ font-family:var(--t-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); }
.ledger .lr .st{ font-family:var(--t-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ok); }

/* ---- SALES CHART ------------------------------------------ */
.chart{ margin-top:clamp(2.6rem,5vw,4rem); }
.chart .bars{ display:flex; align-items:flex-end; gap:5px; height:120px; border-bottom:1px solid var(--border); padding-top:10px; margin-top:16px; }
.chart .bar{ flex:1; background:var(--paper-3); position:relative; min-height:2px; transition:background .2s; }
.chart .bar.has{ background:var(--accent); }
.chart .bar:hover{ background:var(--accent-hover); }
.chart .axis{ display:flex; justify-content:space-between; margin-top:9px; font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-subtle); }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; }
.login-grid{ position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--instr-line) 1px,transparent 1px),linear-gradient(90deg,var(--instr-line) 1px,transparent 1px);
  background-size:34px 34px; -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%); mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%); }
.login-card{ width:min(420px,100%); border:1px solid var(--instr-line); background:var(--paper); padding:40px 40px 34px; position:relative; }
.login-card::before{ content:""; position:absolute; inset:7px; border:1px solid var(--instr-line); opacity:.5; pointer-events:none; }
.login-card .mk{ width:12px; height:12px; background:var(--accent); transform:rotate(45deg); margin-bottom:26px; }
.login-card h1{ font-family:var(--t-display); font-weight:300; text-transform:uppercase; font-size:30px; letter-spacing:.02em; line-height:1; }
.login-card .tag{ font-family:var(--t-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mid); margin-top:12px; }
.login-card form{ margin-top:30px; display:flex; flex-direction:column; gap:16px; }
.login-card label{ font-family:var(--t-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mid); display:block; margin-bottom:7px; }
.login-card input{ width:100%; background:var(--paper-2); border:1px solid var(--border); padding:12px 14px; font-family:var(--t-mono); font-size:13px; letter-spacing:.04em; color:var(--ink); outline:none; transition:border-color .2s; }
.login-card input:focus{ border-color:var(--accent); }
.login-card button{ margin-top:8px; background:var(--ink); color:var(--paper); font-family:var(--t-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:14px; transition:background .25s var(--ease-out); }
.login-card button:hover{ background:var(--accent); }
.login-card .err{ font-family:var(--t-mono); font-size:10px; letter-spacing:.1em; color:var(--warn); text-transform:uppercase; margin-top:4px; min-height:12px; }
.login-card .foot{ margin-top:22px; font-family:var(--t-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-subtle); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero{ grid-template-columns:1fr; }
  .cols{ grid-template-columns:1fr; }
  .measure{ grid-template-columns:repeat(3,1fr); }
  .measure .cell:nth-child(3n+1){ border-left:none; }
  .measure .cell:nth-child(n+4){ border-top:1px solid var(--border); }
}
@media (max-width:760px){
  /* The rail was display:none here, which left the phone with no navigation at
     all. It becomes a swipeable strip pinned under the spec bar instead — every
     tab still reachable, desktop layout untouched. */
  .rail{
    position:fixed; top:var(--spec-h); bottom:auto; left:0; right:0;
    width:auto; height:var(--rail-mh);
    flex-direction:row; align-items:stretch; padding:0 4px;
    border-right:none; border-bottom:1px solid var(--border);
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .rail::-webkit-scrollbar{ display:none; }
  .rail .grp, .rail .spacer, .rail .who .nm, .rail .who .rl{ display:none; }
  .rail nav{ flex-direction:row; align-items:stretch; }
  .rail a{
    align-items:center; gap:6px; padding:0 13px; white-space:nowrap;
    font-size:11px; letter-spacing:.12em;
  }
  .rail a .idx{ width:auto; }
  /* the on-marker becomes an underline — a rotated square reads as noise here */
  .rail a.on::before{
    left:11px; right:11px; top:auto; bottom:0; transform:none;
    width:auto; height:2px; margin-left:0;
  }
  .rail .who{
    border-top:none; border-left:1px solid var(--border);
    padding:0 14px; display:flex; align-items:center; margin-left:auto;
  }
  .rail .who form{ margin-top:0; }

  .stage{ margin-left:0; padding-top:calc(var(--spec-h) + var(--rail-mh) + 26px); }
  .spec-bar .crumb{ display:none; }
  .marquee{ display:none; }
  .measure{ grid-template-columns:repeat(2,1fr); }
  .memcols{ grid-template-columns:1fr !important; }
  .dgrid{ grid-template-columns:repeat(2,1fr) !important; }
  /* wide content must scroll inside itself, never the page body */
  .tblwrap{ overflow-x:auto; }
}

/* ============================================================
   SECTIONS (designs · sales · listings · decisions · memory · vault · attention)
   ============================================================ */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:24px; flex-wrap:wrap; }
.sec-head .eyebrow .n{ color:var(--ink); }
.btn-bronze{ font-family:var(--t-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); background:var(--accent); padding:10px 16px; transition:background .25s var(--ease-out); white-space:nowrap; }
.btn-bronze:hover{ background:var(--accent-hover); }
.muted{ color:var(--ink-subtle); }

/* filter bar */
.filterbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:26px; }
.fbtn{ font-family:var(--t-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid); border:1px solid var(--border); padding:7px 12px; transition:all .2s var(--ease-out); }
.fbtn:hover{ border-color:var(--ink-mid); color:var(--ink); }
.fbtn.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.fsep{ width:1px; height:18px; background:var(--border); margin:0 4px; }

/* design grid */
.dgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.dcard{ border:1px solid var(--border); background:var(--paper); display:flex; flex-direction:column; transition:border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.dcard:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.dcard.hide{ display:none; }
.dthumb{ position:relative; aspect-ratio:4/5; background:var(--paper-2); overflow:hidden; display:grid; place-items:center; }
.dthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dthumb .ph{ font-family:var(--t-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-subtle); text-transform:uppercase; padding:0 10px; text-align:center; }
.dbadge{ position:absolute; top:8px; left:8px; font-family:var(--t-mono); font-size:8px; letter-spacing:.14em; text-transform:uppercase; padding:3px 7px; background:rgba(23,20,15,.72); color:var(--paper); }
.dbadge.approved,.dbadge.rendered,.dbadge.draft,.dbadge.hold{ background:rgba(133,127,116,.85); }
.dbody{ padding:12px 13px 13px; display:flex; flex-direction:column; gap:5px; }
.dname{ font-family:var(--t-display); font-weight:400; text-transform:uppercase; font-size:13px; letter-spacing:.01em; line-height:1.1; color:var(--ink); }
.dsub{ font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-subtle); }
.dlinks{ display:flex; gap:12px; margin-top:6px; }
.dlinks a{ font-family:var(--t-mono); font-size:9px; letter-spacing:.16em; color:var(--accent); border-bottom:1px solid transparent; transition:border-color .2s; }
.dlinks a:hover{ border-color:var(--accent); }
.dlinks .muted{ font-family:var(--t-mono); font-size:9px; letter-spacing:.1em; }

/* mini KPI row */
.minikpi{ display:flex; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:24px; }
.minikpi div{ padding:16px 22px; border-left:1px solid var(--border); }
.minikpi div:first-child{ border-left:none; }
.minikpi b{ font-family:var(--t-display); font-weight:400; font-size:24px; letter-spacing:-.01em; color:var(--ink); display:block; font-variant-numeric:tabular-nums; }
.minikpi span{ font-family:var(--t-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mid); margin-top:7px; display:block; }

/* tables */
.tblwrap{ overflow-x:auto; border:1px solid var(--border); }
.tbl{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
.tbl thead th{ font-family:var(--t-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mid); text-align:left; padding:12px 14px; border-bottom:1px solid var(--border-strong); background:var(--paper-2); white-space:nowrap; }
.tbl td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl tbody tr:hover{ background:var(--paper-2); }
.tbl .mono{ font-family:var(--t-mono); font-size:11px; letter-spacing:.02em; color:var(--ink-mid); white-space:nowrap; }
.tbl .r{ text-align:right; }
.tbl .tl{ color:var(--ink); max-width:420px; }
.tbl .empty,.empty{ text-align:center; color:var(--ink-subtle); font-family:var(--t-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:26px; }
.chip{ font-family:var(--t-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); border:1px solid var(--border-strong); padding:3px 7px; white-space:nowrap; }

/* listings: multi-group filters, per-platform links, unidentified flag */
.flabel{ font-family:var(--t-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-subtle); min-width:66px; }
.filterbar+.filterbar{ margin-top:-16px; }
.fcount{ font-family:var(--t-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid); margin:-10px 0 18px; }
.lrow.hide{ display:none; }
.ltitle{ color:var(--ink); border-bottom:1px solid var(--border-strong); }
.ltitle:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.plinks{ white-space:nowrap; }
.pchip{ display:inline-block; font-family:var(--t-mono); font-size:10px; letter-spacing:.1em; width:20px; height:20px; line-height:19px; text-align:center; color:var(--ink-mid); border:1px solid var(--border-strong); margin-right:5px; transition:all .2s var(--ease-out); }
.pchip:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip.digital{ color:var(--accent); border-color:var(--accent); }
.chip.needsid{ color:var(--warn); border-color:var(--warn); margin-left:8px; }

/* decisions */
.declist{ display:flex; flex-direction:column; }
.dec{ display:grid; grid-template-columns:92px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); }
.dec-id{ font-family:var(--t-mono); font-size:12px; letter-spacing:.08em; color:var(--accent); font-weight:500; }
.dec-top{ display:flex; align-items:baseline; gap:12px; justify-content:space-between; }
.dec-title{ font-family:var(--t-display); font-weight:400; text-transform:uppercase; font-size:15px; letter-spacing:.01em; color:var(--ink); line-height:1.2; }
.dec-meta{ font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-subtle); margin-top:7px; }
.dec-text{ color:var(--ink-mid); font-size:13.5px; line-height:1.55; margin-top:9px; max-width:76ch; }
.badge{ font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; white-space:nowrap; border:1px solid var(--border-strong); color:var(--ink-mid); }
.badge.rat{ color:#4a6b3f; border-color:#b9c9a9; background:rgba(122,150,90,.1); }
.badge.sup{ color:var(--ink-subtle); }
.badge.live{ color:#6c5327; border-color:var(--gold); background:rgba(201,168,76,.12); }
.badge.hold{ color:var(--warn); border-color:var(--warn); }
.badge.risk-critical{ color:#8a2b1e; border-color:#d99; background:rgba(214,61,41,.08); }
.badge.risk-high{ color:var(--warn); border-color:#d3a88f; }
.badge.risk-medium{ color:var(--ink-mid); }
.badge.risk-low{ color:var(--ink-subtle); }

/* memory */
.memcols{ display:grid; grid-template-columns:1.4fr 1fr; gap:36px; }
.noteform{ border:1px solid var(--instr-line); padding:18px; background:var(--paper); }
.noteform input,.noteform textarea,.noteform select{ width:100%; background:var(--paper-2); border:1px solid var(--border); padding:10px 12px; font-family:var(--t-body); font-size:13px; color:var(--ink); outline:none; margin-bottom:10px; transition:border-color .2s; }
.noteform input:focus,.noteform textarea:focus{ border-color:var(--accent); }
.noteform textarea{ resize:vertical; }
.noterow{ display:flex; gap:10px; align-items:stretch; }
.noterow select{ width:auto; margin-bottom:0; font-family:var(--t-mono); font-size:11px; }
.noterow button{ flex:1; background:var(--ink); color:var(--paper); font-family:var(--t-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:10px; transition:background .25s var(--ease-out); }
.noterow button:hover{ background:var(--accent); }
.note{ padding:14px 0; border-bottom:1px solid var(--border); }
.note-top{ display:flex; gap:10px; align-items:baseline; }
.note-author{ font-family:var(--t-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.note-kind{ font-family:var(--t-mono); font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--border-strong); padding:2px 6px; }
.note-ts{ font-family:var(--t-mono); font-size:9px; color:var(--ink-subtle); margin-left:auto; }
.note-title{ font-size:14px; color:var(--ink); margin-top:6px; line-height:1.4; }
.dmeta{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.dtag{ font-family:var(--t-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; padding:2px 5px; border:1px solid var(--border-strong); color:var(--ink-subtle); }
.dtag.human{ color:var(--ink-mid); }
.dtag.ai{ color:var(--accent); border-color:var(--accent); }
.dtag.unver{ opacity:.55; }
.dtag.ver{ color:var(--ink-mid); }
.note-content{ color:var(--ink-mid); font-size:13px; line-height:1.5; margin-top:5px; }
.note-more{ margin-top:5px; }
.note-more summary{ cursor:pointer; list-style:none; display:block; }
.note-more summary::-webkit-details-marker{ display:none; }
.note-more summary .note-content{ display:inline; margin-top:0; }
.note-expand{ display:block; margin-top:6px; font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.note-more summary:hover .note-expand{ text-decoration:underline; }
.note-more[open] summary .note-content{ display:none; }
.note-more[open] .note-expand::after{ content:' — COLLAPSE'; }
.note-full{ color:var(--ink-mid); font-size:13px; line-height:1.6; margin-top:8px; white-space:pre-wrap; word-break:break-word; border-left:1px solid var(--border-strong); padding-left:14px; }
.ev{ display:grid; grid-template-columns:44px auto 1fr; gap:8px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--border); font-size:12px; }
.ev-ts{ font-family:var(--t-mono); font-size:9px; color:var(--ink-subtle); }
.ev-actor{ font-family:var(--t-mono); font-size:10px; letter-spacing:.06em; color:var(--accent); text-transform:uppercase; }
.ev-verb{ font-family:var(--t-mono); font-size:10px; color:var(--ink); }
.ev-detail{ color:var(--ink-mid); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* file tree */
.tree{ border:1px solid var(--border); background:var(--paper); font-family:var(--t-mono); font-size:12px; max-height:520px; overflow:auto; padding:8px 0; }
.tnode{ }
.trow{ display:flex; align-items:center; gap:8px; padding:4px 14px; cursor:default; white-space:nowrap; }
.trow.dir{ cursor:pointer; }
.trow:hover{ background:var(--paper-2); }
.trow .tw{ width:12px; color:var(--accent); font-size:9px; flex:0 0 auto; text-align:center; }
.trow .tn{ color:var(--ink); }
.trow.dir .tn{ color:var(--ink); }
.trow .tsz{ margin-left:auto; color:var(--ink-subtle); font-size:9px; letter-spacing:.06em; padding-left:16px; }
.trow.heavy .tn{ color:var(--ink-subtle); }
.tchildren{ }
.tload{ padding:6px 14px; color:var(--ink-subtle); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }

/* drift */
.drift{ display:grid; grid-template-columns:auto 1fr; gap:12px; padding:13px 0; border-bottom:1px solid var(--border); align-items:start; }
.drift .dl{ font-family:var(--t-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; padding:3px 7px; margin-top:2px; }
.drift.high .dl{ background:var(--accent); color:var(--paper); }
.drift.warn .dl{ color:var(--warn); border:1px solid var(--warn); }
.drift.info .dl{ color:var(--ink-mid); border:1px solid var(--border-strong); }
.drift .dt{ color:var(--ink); font-size:14px; }
.drift .dd{ color:var(--ink-mid); font-size:12.5px; line-height:1.5; margin-top:4px; }

/* ============================================================
   LIBRARY SHELF + RENDERED DOCS (lib-*) · PROMPTS REGISTRY (pr-*)
   Scoped to /library and /prompts. Kind colours arrive per-row as
   an inline border-left-color from render_sections.js KIND_COLOR.
   ============================================================ */
.lib-count{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mid); margin-bottom:14px; }
.lib-q{ flex:1 1 240px; max-width:340px; background:var(--paper-2); border:1px solid var(--border); padding:8px 12px; font-size:11px; letter-spacing:.08em; color:var(--ink); outline:none; transition:border-color .2s; }
.lib-q:focus{ border-color:var(--accent); }
.lib-group.hide, .lib-row.hide{ display:none; }
.lib-kind{ position:sticky; top:calc(var(--spec-h) + var(--mq-h)); z-index:5; background:var(--paper); font-family:var(--t-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-subtle); padding:12px 0 7px; border-bottom:1px solid var(--border-strong); }
.lib-row{ display:flex; align-items:center; gap:14px; min-height:46px; padding:0 12px 0 10px; border-left:3px solid var(--border-strong); border-bottom:1px solid var(--border); transition:background .2s var(--ease-out); }
.lib-row:hover{ background:var(--paper-2); }
.lib-title{ color:var(--ink); font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-title.mono{ font-size:12px; letter-spacing:.04em; }
.lib-spacer{ flex:1; }
.lib-meta{ font-family:var(--t-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-subtle); white-space:nowrap; }
.lib-chip{ font-family:var(--t-mono); font-size:9px; letter-spacing:.12em; padding:3px 8px; border:1px solid var(--border-strong); white-space:nowrap; }
.lib-chip.live{ color:var(--ok); border-color:#B9C9A9; }
.lib-chip.rev{ color:#C9820A; border-color:#C9820A; }
.lib-chip.sup{ color:var(--ink-subtle); }
.lib-row.sup{ opacity:.55; }
.lib-row.sup .lib-title{ color:var(--ink-mid); }
@media (max-width:760px){
  .lib-kind{ top:calc(var(--spec-h) + var(--rail-mh)); }
  .lib-meta.by{ display:none; }
}
/* rendered markdown (doc read mode) */
.lib-doc{ max-width:84ch; }
.lib-doc > :first-child{ margin-top:0; }
.lib-doc h2{ font-family:var(--t-display); font-weight:400; text-transform:uppercase; font-size:22px; letter-spacing:.02em; line-height:1.2; margin:36px 0 12px; color:var(--ink); }
.lib-doc h3{ font-family:var(--t-display); font-weight:400; text-transform:uppercase; font-size:17px; letter-spacing:.02em; margin:28px 0 10px; color:var(--ink); }
.lib-doc h4{ font-family:var(--t-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin:24px 0 8px; color:var(--ink-mid); }
.lib-doc p{ font-size:14px; line-height:1.7; color:var(--ink); margin:0 0 12px; }
.lib-doc ul{ margin:0 0 14px 18px; }
.lib-doc li{ font-size:14px; line-height:1.65; color:var(--ink); margin:4px 0; }
.lib-doc code{ font-family:var(--t-mono); font-size:12px; background:var(--paper-3); padding:1px 5px; }
.lib-doc b{ font-weight:600; }
.lib-doc a{ color:var(--accent); border-bottom:1px solid rgba(166,124,74,.35); }
.lib-doc a:hover{ border-color:var(--accent); }
.lib-fence{ font-family:var(--t-mono); font-size:11.5px; line-height:1.6; background:rgba(23,20,15,.03); border:1px solid var(--border); border-left:2px solid var(--accent); padding:14px 16px; margin:0 0 16px; overflow-x:auto; white-space:pre; }
.lib-fence.lib-table{ border-left-color:var(--border-strong); }
/* prompts registry */
.pr-bridge{ font-family:var(--t-mono); font-size:8px; letter-spacing:.14em; color:var(--paper); background:var(--accent); padding:2px 6px; white-space:nowrap; }
.pr-queue{ font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.pr-queue:hover{ text-decoration:underline; }
.pr-retired{ margin-top:26px; }
.pr-retired summary{ cursor:pointer; list-style:none; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-subtle); padding:8px 0; }
.pr-retired summary::-webkit-details-marker{ display:none; }
.pr-retired summary::before{ content:'▸ '; color:var(--accent); }
.pr-retired[open] summary::before{ content:'▾ '; }
.pr-pre{ font-family:var(--t-mono); font-size:12px; line-height:1.65; white-space:pre-wrap; word-break:break-word; margin:0; padding:16px 18px; background:rgba(23,20,15,.03); border-left:2px solid var(--accent); overflow-x:auto; }

/* ============================================================
   SOCIAL (soc-*) — post list · drill-down · score · 45d graph
   Scoped to /social. Series colours arrive inline from
   render_sections.js SOC_SERIES (single source).
   ============================================================ */
.soc-fresh{ font-family:var(--t-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--border-strong); white-space:nowrap; }
.soc-fresh.g{ color:var(--ok); border-color:#B9C9A9; background:rgba(74,124,89,.08); }
.soc-fresh.a{ color:#C9820A; border-color:#C9820A; background:rgba(201,130,10,.08); }
.soc-fresh.r{ color:#A6402A; border-color:#A6402A; background:rgba(166,64,42,.08); }
.soc-strip{ border-top:1px solid var(--border); margin-bottom:4px; }
.soc-acct{ display:flex; align-items:center; gap:16px; min-height:38px; padding:0 10px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.soc-acct .mono{ font-size:10.5px; letter-spacing:.06em; color:var(--ink-mid); }
.soc-acct .mono b{ color:var(--ink); font-weight:500; }
.soc-acct-pull{ color:var(--ink-subtle) !important; }
.soc-pin-note{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-subtle); margin-left:auto; }
.soc-tag{ font-family:var(--t-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); border:1px solid var(--border-strong); padding:3px 7px; white-space:nowrap; flex:0 0 auto; }
.soc-controls{ margin:20px 0 12px; }
.soc-sw{ display:inline-block; width:8px; height:8px; margin-right:7px; vertical-align:baseline; }
.soc-dis{ opacity:.4; cursor:default; }
.soc-graphwrap{ border:1px solid var(--instr-line); background:var(--paper); padding:14px 12px 6px; overflow-x:auto; }
.soc-graph{ display:block; width:100%; min-width:640px; height:auto; }
.soc-grid{ stroke:var(--instr-line); stroke-width:1; }
.soc-ax{ font-family:var(--t-mono); font-size:9px; letter-spacing:.06em; fill:var(--ink-subtle); }
.soc-line{ fill:none; stroke-width:1.6; }
.soc-dot{ stroke:var(--paper); stroke-width:.8; }
.soc-honest{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid); margin-top:10px; }
.soc-row{ display:flex; align-items:center; gap:14px; min-height:44px; padding:5px 10px; border-bottom:1px solid var(--border); transition:background .2s var(--ease-out); }
.soc-row:hover{ background:var(--paper-2); }
.soc-row.cur{ background:var(--paper-2); box-shadow:inset 2px 0 0 var(--accent); }
.soc-when{ font-size:10px; color:var(--ink-subtle); white-space:nowrap; flex:0 0 auto; }
.soc-capline{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--ink); }
.soc-nums{ font-size:10px; color:var(--ink-mid); white-space:nowrap; }
.soc-score{ font-family:var(--t-mono); font-size:10px; letter-spacing:.06em; min-width:36px; text-align:center; padding:3px 7px; border:1px solid var(--border-strong); color:var(--ink-mid); white-space:nowrap; flex:0 0 auto; }
.soc-score.hi{ background:var(--ok); border-color:var(--ok); color:var(--paper); }
.soc-score.mid{ color:#C9820A; border-color:#C9820A; background:rgba(201,130,10,.08); }
.soc-score.low{ color:var(--ink-mid); }
.soc-score.none{ color:var(--ink-subtle); border-color:var(--border); }
.soc-sparkwrap{ flex:0 0 90px; display:flex; justify-content:flex-end; }
.soc-spark-p{ fill:none; stroke:var(--accent); stroke-width:1.2; }
.soc-spark circle{ fill:var(--accent); }
.soc-detail{ border:1px solid var(--instr-line); background:var(--paper); padding:20px 22px; margin:26px 0 6px; position:relative; }
.soc-detail::before{ content:""; position:absolute; inset:6px; border:1px solid var(--instr-line); opacity:.5; pointer-events:none; }
.soc-detail > *{ position:relative; }
.soc-meta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.soc-meta .mono{ font-size:10.5px; letter-spacing:.06em; color:var(--ink-mid); }
.soc-meta-r{ margin-left:auto; color:var(--ink-subtle) !important; }
.soc-open{ font-family:var(--t-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid transparent; }
.soc-open:hover{ border-color:var(--accent); }
.soc-cap{ white-space:pre-wrap; word-break:break-word; font-size:13.5px; line-height:1.6; color:var(--ink); max-width:76ch; margin-top:14px; }
.soc-grid6{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:16px 0; }
.soc-cell{ padding:12px 14px; border-left:1px solid var(--border); }
.soc-grid6 .soc-cell:nth-child(4n+1){ border-left:none; }
.soc-grid6 .soc-cell:nth-child(n+5){ border-top:1px solid var(--border); }
.soc-na{ color:var(--ink-subtle); }
.soc-nanote{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-subtle); margin:-6px 0 4px; }
.soc-cell b{ display:block; font-family:var(--t-display); font-weight:400; font-size:20px; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
.soc-cell span{ display:block; font-family:var(--t-mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mid); margin-top:6px; }
.soc-scorepanel{ display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:start; margin:14px 0 8px; }
.soc-big{ font-family:var(--t-display); font-weight:300; font-size:54px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.soc-big .of{ display:block; font-family:var(--t-mono); font-size:8.5px; letter-spacing:.22em; color:var(--ink-subtle); margin-top:8px; }
.soc-comp{ width:100%; border-collapse:collapse; font-size:12px; }
.soc-comp th{ font-family:var(--t-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mid); text-align:left; padding:6px 10px; border-bottom:1px solid var(--border-strong); }
.soc-comp td{ padding:7px 10px; border-bottom:1px solid var(--border); color:var(--ink-mid); font-size:11px; }
.soc-comp .r{ text-align:right; }
.soc-prov{ font-family:var(--t-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#C9820A; margin-top:8px; }
.soc-mini-empty{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-subtle); padding:16px 0; }
.soc-minigraph{ display:block; width:100%; max-width:640px; height:auto; margin-top:8px; }
.soc-minilegend{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid); margin-top:6px; }
.soc-minilegend i{ display:inline-block; width:8px; height:8px; margin:0 6px 0 0; }
.soc-minilegend i + i, .soc-minilegend i:not(:first-child){ margin-left:14px; }
.soc-legacy{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-subtle); margin-top:18px; }
@media (max-width:760px){
  .soc-sparkwrap{ display:none; }
  .soc-capline{ flex-basis:100%; order:9; }
  .soc-row{ flex-wrap:wrap; row-gap:4px; padding:8px 10px; }
  .soc-grid6{ grid-template-columns:repeat(2,1fr); }
  .soc-grid6 .soc-cell:nth-child(2n+1){ border-left:none; }
  .soc-grid6 .soc-cell:nth-child(n+3){ border-top:1px solid var(--border); }
  .soc-scorepanel{ grid-template-columns:1fr; gap:14px; }
  .soc-comp{ display:block; overflow-x:auto; }
}

/* ============================================================
   HYGIENE 2026-07-30 — attention owner groups · sales test rows
   · memory inbox filter + MARK ANSWERED  (append-only)
   ============================================================ */
.att-group{ font-family:var(--t-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-subtle); padding:20px 0 7px; border-bottom:1px solid var(--border-strong); }
.att-item.g3{ grid-template-columns:auto 1fr auto auto; }
/* human stamp — closes a stale task; the stamp is the authority (2026-08-02) */
.att-stamp button{ font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ok); border:1px solid var(--ok); padding:4px 9px; background:transparent; cursor:pointer; white-space:nowrap; transition:all .2s var(--ease-out); }
.att-stamp button:hover{ background:var(--ok); color:var(--paper); }
.att-item.g3 .tt{ font-size:13.5px; line-height:1.45; color:var(--ink); }
.att-item .age{ font-family:var(--t-mono); font-size:9px; letter-spacing:.1em; color:var(--ink-subtle); white-space:nowrap; margin-top:4px; }
.tbl tr.is-test td{ opacity:.45; }
.chip.test{ color:var(--warn); border-color:var(--warn); margin-left:6px; }
.sales-foot{ font-family:var(--t-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-subtle); margin-top:12px; }
.mem-count{ font-family:var(--t-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid); white-space:nowrap; }
.note-ans{ margin-top:8px; }
.note-ans button{ font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ok); border:1px solid var(--ok); padding:4px 9px; background:transparent; transition:all .2s var(--ease-out); }
.note-ans button:hover{ background:var(--ok); color:var(--paper); }

/* ── post media (the post as published) ─────────────────────────────── */
.soc-media{ margin:14px 0 4px; display:grid; gap:10px; grid-template-columns:minmax(0,1fr); max-width:520px; }
.soc-media.multi{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); max-width:100%; }
.soc-m{ margin:0; border:1px solid var(--rule); background:var(--paper-2,#f4efe6); }
.soc-m img, .soc-m video{ display:block; width:100%; height:auto; max-height:560px; object-fit:contain; background:#000; }
.soc-m figcaption{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid); padding:5px 8px; border-top:1px solid var(--rule); }
.soc-nomedia{ margin:12px 0 4px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); border:1px dashed var(--rule); padding:10px 12px; }

/* ---- AUTOMATION -------------------------------------------------------- */
/* Verdict chips. Colour carries the artefact-health verdict, never the exit
   code: a job can report success and still render red here. */
.vchip{ font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; padding:3px 8px; white-space:nowrap; border:1px solid var(--border-strong); color:var(--ink-mid); display:inline-block; }
.vchip.fresh{ color:var(--ok); border-color:var(--ok); }
.vchip.stale{ color:var(--warn); border-color:var(--warn); background:rgba(166,96,58,.08); }
.vchip.dark{ color:var(--paper); background:var(--warn); border-color:var(--warn); }
.vchip.unwatched{ color:var(--ink-subtle); border-style:dashed; }
.vchip.big{ font-size:11px; letter-spacing:.16em; padding:9px 14px; }
.vchip.big b{ font-weight:500; margin-left:6px; }
.vtally{ display:flex; gap:10px; flex-wrap:wrap; }
.wallnote{ margin-top:34px; border:1px solid var(--border); border-left:3px solid var(--ink-subtle); padding:14px 16px; }
.wallnote .dt{ font-family:var(--t-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.wallnote .dd{ font-size:12px; color:var(--ink-mid); margin-top:7px; line-height:1.6; }
.wallnote code{ font-family:var(--t-mono); font-size:11px; color:var(--accent); }

/* ── ◈ SIGNALS ──────────────────────────────────────────────────────────── */
.signals .panel + .panel{ margin-top:26px; }
.signals .note{ font-size:12px; padding-top:10px; border-top:1px solid var(--border); margin-top:12px; }
.eyebrow.sm{ font-size:9px; letter-spacing:.2em; color:var(--ink-subtle); }

.sig-reach{ display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); }
.sig-reach .nm{ font-family:var(--t-mono); font-size:11px; letter-spacing:.18em; min-width:70px; }
.sig-reach .st{ font-size:13px; }
.sig-reach.ok .st{ color:var(--ok); }
.sig-reach.dark .st{ color:var(--warn); font-weight:500; }
.sig-reach .ts{ margin-left:auto; font-family:var(--t-mono); font-size:10px; color:var(--ink-subtle); }
.sig-sub{ display:flex; align-items:center; gap:14px; padding:16px 0 6px; flex-wrap:wrap; }
.sig-sub .btn{ font-family:var(--t-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); background:var(--accent); border:0; padding:10px 16px; cursor:pointer; }
.sig-sub .btn:hover{ background:var(--accent-hover); }
.sig-sub .btn:disabled{ background:var(--ink-subtle); cursor:not-allowed; }
.sig-sub .ok{ color:var(--ok); font-size:12px; }
.sig-sub .bad{ color:var(--warn); font-size:12px; }

.sig-flag{ padding:14px 0; border-bottom:1px solid var(--border); }
.sig-flag .l{ display:flex; align-items:baseline; gap:12px; }
.sig-flag .sev{ font-family:var(--t-mono); font-size:10px; letter-spacing:.16em; padding:3px 7px; background:var(--ink); color:var(--paper); }
.sig-flag.sev-p0 .sev,.sig-flag.sev-p1 .sev{ background:var(--warn); }
.sig-flag .ti{ font-size:14px; }
.sig-flag .dt{ font-size:13px; color:var(--ink-mid); padding:6px 0 0; }
.sig-flag .mt{ font-family:var(--t-mono); font-size:10px; letter-spacing:.08em; color:var(--ink-subtle); padding:8px 0; }
.sig-flag .btn.sm{ font-family:var(--t-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; background:none; border:1px solid var(--border); color:var(--ink-mid); padding:6px 12px; cursor:pointer; }
.sig-flag .btn.sm:hover{ border-color:var(--accent); color:var(--accent); }

/* filters */
.sig-tabs{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:12px 0 6px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.sig-tab{ font-family:var(--t-mono); font-size:10px; letter-spacing:.16em; color:var(--ink-subtle); display:inline-flex; align-items:center; gap:6px; }
.sig-tab b{ color:var(--ink-mid); font-weight:500; }
.sig-tab.on{ color:var(--ink); } .sig-tab.on b{ color:var(--accent); }
.sig-tab .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink-subtle); display:inline-block; }
.sig-tab.c-alert .dot{ background:var(--warn); } .sig-tab.c-approval .dot{ background:var(--accent); }
.sig-tab.c-sale .dot{ background:var(--ok); }
.sig-tab.c-uncategorised .dot{ background:var(--warn); }
.sig-tab.c-uncategorised{ color:var(--warn); } .sig-tab.c-decision .dot{ background:var(--ink); }
.sig-showdis{ margin-left:auto; font-family:var(--t-mono); font-size:10px; letter-spacing:.16em; color:var(--ink-subtle); }
.sig-showdis:hover{ color:var(--accent); }
.sig-howto{ font-size:11px; color:var(--ink-subtle); padding:2px 0 10px; }
.sig-howto b{ color:var(--ink-mid); font-weight:500; }
.sig-day{ font-family:var(--t-mono); font-size:9px; letter-spacing:.22em; color:var(--ink-subtle); padding:18px 0 8px; }

/* one notification */
.sig-note{ border:1px solid var(--border); margin-bottom:8px; background:var(--paper); }
.sig-note.undelivered{ border-left:2px solid var(--warn); }
.sig-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; }
.sig-row:hover{ background:var(--paper-2); }
/* The chip IS the copy button — it has to LOOK like one. First version was so
   quiet Jesse looked straight at it and asked where the copy button was; the
   mechanism was fine, the affordance was not. */
.sig-code{ font-family:var(--t-mono); font-size:10px; letter-spacing:.12em; color:var(--accent);
  background:var(--paper); border:1px solid var(--accent); padding:6px 9px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; transition:all .18s var(--ease-out); }
.sig-code .cta{ font-size:8px; letter-spacing:.18em; color:var(--ink-subtle); border-left:1px solid var(--border); padding-left:6px; }
.sig-code:hover{ background:var(--accent); color:var(--paper); border-color:var(--accent); }
.sig-code:hover .cta{ color:var(--paper); border-color:rgba(255,255,255,.35); }
.sig-code.ok{ border-color:var(--ok); color:var(--ok); background:var(--paper); }
.sig-code.ok .cta{ color:var(--ok); }
.sig-code.bad{ border-color:var(--warn); color:var(--warn); }
.sig-code .ic{ opacity:.6; }
.sig-row .tm{ font-family:var(--t-mono); font-size:10px; color:var(--ink-subtle); }
.sig-row .ti{ font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sig-row .tags{ display:inline-flex; gap:8px; align-items:center; }
.sig-row .aud,.sig-row .cat{ font-family:var(--t-mono); font-size:9px; letter-spacing:.14em; color:var(--ink-subtle); }
.sig-row .cat.c-alert{ color:var(--warn); } .sig-row .cat.c-sale{ color:var(--ok); } .sig-row .cat.c-approval{ color:var(--accent); }
.sig-row .cat.c-uncategorised{ color:var(--warn); }
.sig-row .x button{ background:none; border:0; color:var(--ink-subtle); font-size:14px; cursor:pointer; padding:0 4px; }
.sig-row .x button:hover{ color:var(--warn); }
.sig-body{ display:none; padding:4px 14px 16px; border-top:1px solid var(--border); background:var(--paper-2); }
.sig-note.open .sig-body{ display:block; }
.sig-body .bd{ font-size:13px; color:var(--ink); white-space:pre-wrap; padding:8px 0 14px; }
.sig-body .kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:6px 20px; padding-bottom:14px; }
.sig-body .kv div{ display:flex; gap:10px; font-family:var(--t-mono); font-size:10px; }
.sig-body .kv span{ color:var(--ink-subtle); min-width:70px; }
.sig-body .kv b{ color:var(--ink); font-weight:400; }
.sig-quote{ display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--accent);
  padding:9px 14px; cursor:pointer; font-family:var(--t-mono); font-size:10px; letter-spacing:.14em; color:var(--ink-mid); }
.sig-quote:hover{ background:var(--accent); color:var(--paper); }
.sig-quote:hover b,.sig-quote:hover .hint{ color:var(--paper); }
.sig-quote .lab{ text-transform:uppercase; }
.sig-quote b{ color:var(--accent); font-size:11px; }
.sig-quote .hint{ color:var(--ink-subtle); text-transform:none; letter-spacing:.04em; }
.sig-quote.ok{ border-color:var(--ok); } .sig-quote.ok b{ color:var(--ok); }
.sig-quote.bad{ border-color:var(--warn); } .sig-quote.bad b{ color:var(--warn); }
.sig-meta{ padding-top:12px; }
.sig-meta button{ background:none; border:0; border-bottom:1px solid var(--border); color:var(--ink-subtle);
  font-family:var(--t-mono); font-size:10px; letter-spacing:.1em; cursor:pointer; padding:0 0 2px; }
.sig-meta button:hover{ color:var(--accent); border-color:var(--accent); }
.sig-mute{ padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
.sig-mute .mt{ font-family:var(--t-mono); font-size:10px; color:var(--ink-subtle); margin-left:10px; }

/* ── header bell ────────────────────────────────────────────────────────── */
.spec-bar .live .bell{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:4px; color:var(--ink-subtle); transition:color .2s var(--ease-out); }
.spec-bar .live .bell:hover{ color:var(--ink); }
.spec-bar .live .bell.unread{ color:var(--ink); }
.spec-bar .live .bell.loud{ color:var(--warn); animation:bell-nudge 2.4s ease-in-out infinite; }
.spec-bar .live .bell .bdg{ position:absolute; top:-1px; right:-2px; min-width:14px; height:14px; padding:0 3px;
  border-radius:7px; background:var(--accent); color:var(--paper);
  font-family:var(--t-mono); font-size:9px; line-height:14px; text-align:center; letter-spacing:0; }
.spec-bar .live .bell.loud .bdg{ background:var(--warn); }
@keyframes bell-nudge{ 0%,88%,100%{ transform:rotate(0) } 91%{ transform:rotate(-9deg) } 95%{ transform:rotate(7deg) } }
@media (prefers-reduced-motion: reduce){ .spec-bar .live .bell.loud{ animation:none } }