/* ============================= tokens ============================= */
:root{
  --surface:#eef0f2;
  --panel:#ffffff;
  --panel-2:#fafafb;
  --ink:#1a1b1d;
  --body:#5f6165;
  --meta:#9a9c9f;
  --line:#efeff0;
  --line-firm:#d6d7d9;
  --sidebar-bg:#fafafa;
  --sidebar-ink:#1a1b1d;
  --sidebar-meta:#9a9c9f;
  --sidebar-line:#efeff0;
  --sidebar-active:#ffffff;

  --sys:#1a1b1d;      /* neutralized — Asymmetric reserves color for state, never brand/nav */
  --sys-soft:#fafafb;
  --hum:#8a6a1f;      /* needs-a-person = warn state */
  --hum-soft:#fbf7ee;
  --mon:#5f6165;      /* watch-only = neutral, not a color */
  --mon-soft:#f4f4f5;

  --good:#2f6b46;
  --warn:#8a6a1f;
  --bad:#b4232a;
  --bad-soft:#fbf2f2;
  --warn-soft:#fbf7ee;
  --good-soft:#f1f7f3;

  --ocean:#1a1b1d;    /* neutralized — no persistent brand blue */
  --ocean-soft:#fafafb;
  --ocean-deep:#1a1b1d;

  --shadow: 0 1px 2px rgba(20,20,22,.04), 0 3px 8px rgba(20,20,22,.05);
  --shadow-lift: 0 12px 32px rgba(20,20,22,.14), 0 2px 6px rgba(20,20,22,.08);
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  margin:0;color:var(--ink);
  font:13px/1.5 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(135deg,#e8e8e6,#dedede 55%,#cfcfcf);
  padding:20px;
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important} }
h1,h2,h3,.disp{font-family:'Inter',system-ui,sans-serif}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
svg{display:block}
button{font-family:inherit;color:inherit}

/* ============================= app shell ============================= */
.app{
  display:flex;height:calc(100vh - 40px);
  background:var(--panel);border:1px solid rgba(0,0,0,.05);
  box-shadow:0 24px 60px rgba(30,30,30,.24),0 6px 16px rgba(30,30,30,.12);
  overflow:hidden;
}

.sidebar{
  flex:none;width:236px;background:var(--sidebar-bg);color:var(--sidebar-ink);
  display:flex;flex-direction:column;padding:1.1rem .8rem;
  height:100%;overflow-y:auto;
}
.sidebar .brand{
  display:flex;align-items:center;gap:.55rem;padding:.3rem .5rem .9rem;
  border-bottom:1px solid var(--sidebar-line);margin-bottom:.7rem;
}
.sidebar .brand svg{color:var(--sys)}
.sidebar .brand .name{font-family:'Inter',sans-serif;font-weight:800;font-size:.92rem;line-height:1.15}
.sidebar .brand .client{font-size:.68rem;color:var(--sidebar-meta);font-weight:500}

.nstat{padding:.15rem .5rem .9rem;border-bottom:1px solid var(--sidebar-line);margin-bottom:.6rem}
.nstat-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.64rem;color:var(--sidebar-meta);margin-bottom:.4rem;font-weight:600}
.nstat-row .nstat-val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--sidebar-ink);font-size:.7rem}
.nstat-bar{height:5px;border-radius:0;background:var(--sidebar-line);overflow:hidden}
.nstat-fill{height:100%;background:var(--sys);border-radius:0}

.navlist{display:flex;flex-direction:column;gap:.15rem}
.navitem{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem .65rem;border-radius:0;cursor:pointer;
  color:var(--sidebar-meta);font-size:.84rem;font-weight:600;
  border:1px solid transparent;background:transparent;text-align:left;width:100%;
}
.navitem svg{flex:none;opacity:.9}
.navitem .n{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.62rem;font-weight:600;
  color:var(--sidebar-meta);opacity:.7;margin-left:auto;
}
.navitem:hover{background:var(--hover,#f4f4f5);color:var(--sidebar-ink)}
.navitem[aria-current="page"]{background:var(--sidebar-active);color:var(--sidebar-ink);border-color:var(--line-firm);box-shadow:0 1px 1.5px rgba(20,20,22,.05);font-weight:700}
.navitem[aria-current="page"] svg{color:var(--sidebar-ink);opacity:1}

.sidebar .spacer{flex:1}
.sidebar .footprint{
  border-top:1px solid var(--sidebar-line);padding-top:.8rem;margin-top:.4rem;
  font-size:.66rem;color:var(--sidebar-meta);line-height:1.6;
}
.sidebar .footprint b{color:var(--sidebar-ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600}

/* mobile top nav */
@media (max-width:860px){
  .app{flex-direction:column}
  .sidebar{
    position:sticky;top:0;width:100%;height:auto;flex-direction:row;align-items:center;
    padding:.6rem .7rem;overflow-x:auto;
  }
  .sidebar .brand{border-bottom:0;margin-bottom:0;padding:.2rem .6rem .2rem 0;border-right:1px solid var(--sidebar-line);margin-right:.5rem}
  .navlist{flex-direction:row}
  .navitem{white-space:nowrap}
  .navitem .n{display:none}
  .sidebar .spacer,.sidebar .footprint{display:none}
}

.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pagehead{
  padding:1.5rem 2rem 1.1rem;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.pagehead h1{font-size:1.5rem;margin:0 0 .3rem;letter-spacing:-.01em}
.pagehead .sub{margin:0;color:var(--body);font-size:.92rem;max-width:40rem;line-height:1.5}
.pagehead .meta{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;color:var(--meta);white-space:nowrap}
.rangectl{display:flex;align-items:center;gap:.5rem}
.rangectl .rl{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--meta)}
.rangectl .rseg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line-firm);padding:2px;gap:2px}
.rangectl .rseg button{border:0;background:none;padding:4px 10px;font-size:.72rem;font-weight:600;color:var(--body);cursor:pointer}
.rangectl .rseg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 1.5px rgba(20,20,22,.08)}

.pagebody{padding:1.7rem 2rem 2.4rem;flex:1;min-height:0;background:var(--surface);overflow-y:auto}
.page{display:none}
.page.active{display:flex;flex-direction:column;flex:1;min-height:0}

/* status strip, persistent app chrome */
.statusbar{
  display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;
  padding:.65rem 2rem;border-top:1px solid var(--line);background:var(--panel);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;color:var(--meta);
}
.statusbar .item{display:flex;align-items:center;gap:.4rem}
.statusbar .dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.statusbar b{color:var(--ink);font-weight:600}
.statusbar .spacer{flex:1}

/* ============================= shared components ============================= */
.grid{display:grid;gap:1rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){ .cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cols-4,.cols-3,.cols-2{grid-template-columns:1fr} }

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:0;
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);
}
.panel h2{font-size:.98rem;margin:0 0 .2rem}
.panel .desc{font-size:.8rem;color:var(--meta);margin:0 0 .9rem}
.scroll-x{overflow-x:auto}

.kpi{display:flex;flex-direction:column;gap:.3rem}
.kpi .label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--meta)}
.kpi .value{font-family:'Inter',sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.01em}
.kpi .delta{font-size:.76rem;font-weight:600}
.kpi .delta.up{color:var(--good)}
.kpi .delta.down{color:var(--bad)}
.kpi .delta.flat{color:var(--meta)}

.pill{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:700;
  padding:.22em .6em;border-radius:0;letter-spacing:.01em;
}
.pill i{width:7px;height:7px;border-radius:50%;display:block}
.pill.tier-a{background:var(--sys-soft);color:var(--sys)}
.pill.tier-a i{background:var(--sys)}
.pill.tier-b{background:var(--hum-soft);color:var(--hum)}
.pill.tier-b i{background:var(--hum)}
.pill.tier-c{background:var(--mon-soft);color:var(--mon)}
.pill.tier-c i{background:var(--mon)}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.good i{background:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.warn i{background:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.bad i{background:var(--bad)}

/* ============================= PAGE 1 — overview ============================= */
.gapviz{margin-top:.4rem}
.gapviz .track{
  position:relative;height:64px;border-radius:0;background:var(--panel-2);
  border:1px solid var(--line);overflow:hidden;
}
.gapviz .cluster{
  position:absolute;top:0;bottom:0;background:var(--mon-soft);
  border-left:1px dashed var(--line-firm);border-right:1px dashed var(--line-firm);
}
.gapviz .cluster .clab{
  position:absolute;top:6px;left:6px;font-size:.62rem;color:var(--mon);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
}
.gapviz .marker{
  position:absolute;top:0;bottom:0;width:2px;background:var(--ink);
}
.gapviz .marker .mtag{
  position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;font-weight:700;color:var(--ink);white-space:nowrap;
}
.gapviz .marker.target{background:var(--ocean)}
.gapviz .marker.target .mtag{color:var(--ocean-deep)}
.gapviz .marker.current{background:var(--sys)}
.gapviz .marker.current .mtag{color:var(--sys)}
.gapviz .scalecap{display:flex;justify-content:space-between;font-size:.64rem;color:var(--meta);margin-top:.35rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.gapviz-foot{margin-top:2.1rem;font-size:.85rem;color:var(--body);line-height:1.55}

.thesis-row{display:flex;gap:.9rem;margin-top:1.3rem;flex-wrap:wrap}
.thesis-card{flex:1 1 220px;padding:1rem 1.05rem;border-radius:0;border:1px solid var(--line)}
.thesis-card .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.66rem;color:var(--meta);font-weight:700}
.thesis-card p{margin:.35rem 0 0;font-size:.83rem;color:var(--body);line-height:1.5}

/* ============================= PAGE 2 — best practice health ============================= */
.condgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:.55rem}
@media (max-width:900px){ .condgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .condgrid{grid-template-columns:repeat(2,1fr)} }
.condtile{
  border-radius:0;padding:.65rem .7rem;border:1px solid var(--line);border-left:3px solid var(--line);background:var(--panel-2);
  display:flex;flex-direction:column;gap:.3rem;min-height:64px;
}
.condtile.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.condtile.bad{border-left-color:var(--bad);background:var(--bad-soft)}
.condtile .top{display:flex;align-items:center;justify-content:space-between}
.condtile .dot{width:9px;height:9px;border-radius:50%}
.condtile .label{font-size:.71rem;font-weight:600;line-height:1.25;color:var(--ink)}
.condtile .note{font-size:.62rem;color:var(--meta)}

.activity{border-top:1px solid var(--line)}
.arow{
  display:grid;grid-template-columns:1.4fr 2.2fr auto auto;gap:.8rem;align-items:center;
  padding:.62rem 0;border-bottom:1px solid var(--line);font-size:.82rem;
}
@media (max-width:760px){ .arow{grid-template-columns:1fr;gap:.25rem} }
.arow .job{font-weight:600}
.arow .detail{color:var(--body)}
.arow .ts{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;color:var(--meta);white-space:nowrap;justify-self:end}
@media (max-width:760px){ .arow .ts{justify-self:start} }

/* ============================= PAGE 3 — the loop ============================= */
.oodawrap{display:flex;gap:2.2rem;align-items:center;flex-wrap:wrap}
.oodaring{position:relative;width:210px;height:210px;flex:none}
.oodaring .node{
  position:absolute;width:70px;text-align:center;
}
.oodaring .node .c{
  width:52px;height:52px;border-radius:50%;background:var(--panel-2);border:2px solid var(--line-firm);
  display:flex;align-items:center;justify-content:center;margin:0 auto .3rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:.78rem;color:var(--body);
}
.oodaring .node .t{font-size:.66rem;font-weight:700;color:var(--meta);text-transform:uppercase;letter-spacing:.04em}
.oodaring svg.arcs{position:absolute;inset:0}

.loopqueue{flex:1;min-width:280px;display:flex;flex-direction:column;gap:.7rem}
.loopcard{border:1px solid var(--line);border-radius:0;padding:.8rem .95rem;background:var(--panel-2)}
.loopcard .lh{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.loopcard .url{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;color:var(--ink);font-weight:600}
.stagerow{display:flex;align-items:center;gap:0}
.stagerow .seg{
  flex:1;height:6px;background:var(--line);position:relative;
}
.stagerow .seg:first-child{border-radius:0}
.stagerow .seg:last-child{border-radius:0}
.stagerow .seg.on{background:var(--sys)}
.stagerow .seg.done{background:var(--sys);opacity:.4}
.stagelabels{display:flex;justify-content:space-between;margin-top:.3rem;font-size:.6rem;color:var(--meta);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.scount{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.62rem;color:var(--meta);margin-top:.3rem}
.loopcard .note{font-size:.78rem;color:var(--body);margin-top:.5rem;line-height:1.4}

/* ============================= PAGE 4 — fixed this week ============================= */
.casecard{display:flex;flex-direction:column;gap:.8rem}
.beforeafter{display:flex;gap:1rem;align-items:stretch}
.ba-col{flex:1;border-radius:0;padding:.7rem .8rem;border:1px solid var(--line)}
.ba-col.before{background:var(--bad-soft)}
.ba-col.after{background:var(--good-soft)}
.ba-col .bl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin-bottom:.25rem}
.ba-col .bv{font-family:'Inter',sans-serif;font-weight:800;font-size:1.25rem}
.ba-col .bd{font-size:.72rem;color:var(--body);margin-top:.15rem}
.ba-arrow{display:flex;align-items:center;color:var(--meta)}
.reachbar{display:flex;height:14px;border-radius:0;overflow:hidden;border:1px solid var(--line);margin-top:.3rem}
.reachbar span{display:block;height:100%}

/* ============================= PAGE 5 — time freed ============================= */
/* ============================= data-exploration table component ============================= */
.dt-toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.dt-search{
  flex:1 1 220px;font-size:.8rem;padding:.45em .7em;border-radius:0;
  border:1px solid var(--line-firm);background:var(--panel);color:var(--ink);font-family:'Inter',sans-serif;
}
.dt-search:focus{outline:2px solid var(--sys);outline-offset:1px}
.dt-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.dt-chip{
  font-size:.7rem;font-weight:700;padding:.32em .7em;border-radius:0;cursor:pointer;
  border:1px solid var(--line-firm);background:var(--panel-2);color:var(--body);user-select:none;
}
.dt-chip.active{background:var(--sys);border-color:var(--sys);color:#fff}
.dt-count{font-size:.7rem;color:var(--meta);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;margin-left:auto}

.dtable{width:100%;border-collapse:collapse;font-size:.81rem}
.dtable thead th{
  text-align:left;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--meta);padding:.5rem .6rem;border-bottom:1.5px solid var(--line-firm);
  cursor:pointer;white-space:nowrap;user-select:none;
}
.dtable thead th:hover{color:var(--ink)}
.dtable thead th .arrow{display:inline-block;margin-left:.25rem;opacity:.35;font-size:.6rem}
.dtable thead th.sorted .arrow{opacity:1;color:var(--sys)}
.dtable tbody tr{border-bottom:1px solid var(--line)}
.dtable tbody tr:hover{background:var(--panel-2)}
.dtable td{padding:.55rem .6rem;vertical-align:middle}
.dtable td.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:right}
.dtable tr.row-hidden{display:none}
.dtable .rowdot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.45rem;vertical-align:middle}
.condlink{
  background:none;border:none;padding:0;margin:0;font:inherit;color:var(--sys);font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;text-decoration:none;
}
.condlink:hover{text-decoration:underline}
.crumb{
  background:none;border:none;padding:0;margin:0 0 .5rem;font:inherit;font-size:.78rem;
  color:var(--meta);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;
}
.crumb:hover{color:var(--sys)}
.ministage{display:inline-flex;gap:2px;width:56px;vertical-align:middle;margin-right:.5rem}
.ministage span{flex:1;height:5px;border-radius:0;background:var(--line)}
.ministage span.on{background:var(--sys)}

.ledger{width:100%;border-collapse:collapse;font-size:.83rem}
.ledger th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--meta);padding:.4rem .5rem;border-bottom:1px solid var(--line-firm)}
.ledger td{padding:.55rem .5rem;border-bottom:1px solid var(--line)}
.ledger .hrs{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;text-align:right}
.ledger tr.total td{border-top:2px solid var(--line-firm);border-bottom:0;font-weight:700;padding-top:.7rem}
.bigpivot{
  margin-top:1.2rem;padding:1.1rem 1.3rem;border-radius:0;
  background:var(--ocean-soft);border:1px solid var(--ocean);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.bigpivot .num{font-family:'Inter',sans-serif;font-weight:800;font-size:1.9rem;color:var(--ocean-deep)}
.bigpivot p{margin:0;font-size:.86rem;color:var(--body);max-width:30rem;line-height:1.5}

/* ============================= PAGE 6 — blue ocean (distinct treatment) ============================= */
.oceanhead{
  border-radius:0;padding:1.4rem 1.5rem;margin-bottom:1.3rem;position:relative;overflow:hidden;
  background:var(--ocean);color:#fff;
}
.oceanhead::before{
  content:"";position:absolute;inset:0;opacity:.18;
  background-image:repeating-linear-gradient(0deg, transparent 0 26px, rgba(255,255,255,.9) 26px 27px);
  mask-image:radial-gradient(ellipse at 70% 30%, black 0%, transparent 72%);
}
.oceanhead h2{margin:0 0 .3rem;font-size:1.15rem;position:relative}
.oceanhead p{margin:0;font-size:.86rem;max-width:34rem;opacity:.92;position:relative;line-height:1.5}

.board{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.board.board-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .board.board-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:860px){ .board{grid-template-columns:1fr} .board.board-4{grid-template-columns:1fr} }
.boardcol{display:flex;flex-direction:column;gap:.7rem}
.boardcol .colhead{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--meta);
  padding-bottom:.4rem;border-bottom:2px solid var(--line-firm);
}
.betcard{
  border:1px solid var(--line);border-radius:0;padding:.85rem .95rem;background:var(--panel);
  box-shadow:var(--shadow);
}
.betcard h3{margin:0 0 .35rem;font-size:.88rem}
.betcard p{margin:0;font-size:.78rem;color:var(--body);line-height:1.45}
.betcard[data-project]{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.cardbadge{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:.55rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;font-weight:600;color:var(--meta);
  background:var(--panel-2);border:1px solid var(--line);border-radius:0;padding:.15em .5em;
}
.cardbadge.complete{color:var(--sys);border-color:var(--sys);background:var(--sys-soft)}
.betcard[data-project]:hover,.betcard[data-project]:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-lift);outline:none}
.betcard[data-project]:focus-visible{outline:2px solid var(--sys);outline-offset:2px}

/* ============================= project brief modal ============================= */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(24,24,26,.34);
  z-index:100;
}
.modal-backdrop[hidden]{display:none}
.modal{
  background:var(--panel);max-width:min(680px,94vw);width:100%;
  position:fixed;top:0;right:0;bottom:0;height:100%;
  padding:1.6rem 1.9rem 1.8rem;box-shadow:var(--shadow-lift);
  overflow-y:auto;
}
.modal-close{
  position:absolute;top:1rem;right:1rem;width:30px;height:30px;
  border:1px solid var(--line-firm);background:var(--panel-2);color:var(--meta);
  font-size:1.1rem;line-height:1;cursor:pointer;
}
.modal-close:hover{color:var(--ink)}

/* trello-style card head */
.tr-head{display:flex;align-items:flex-start;gap:.7rem;margin:0 2rem 1.1rem 0}
.tr-head svg{flex:none;color:var(--meta);margin-top:.3rem}
.tr-head h2{font-size:1.3rem;margin:0 0 .2rem;line-height:1.25}
.tr-list{font-size:.78rem;color:var(--meta)}
.tr-listname{text-decoration:underline;text-underline-offset:2px}

.tr-meta{display:flex;gap:1.5rem;margin:0 0 1.4rem 2.1rem;flex-wrap:wrap}
.tr-metalabel{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--meta);margin-bottom:.35rem}
.labelpill{display:inline-block;font-size:.74rem;font-weight:700;padding:.3em .7em;border-radius:0;color:#fff}
.labelpill.testing{background:var(--hum)}
.labelpill.building{background:var(--mon)}
.labelpill.shipped{background:var(--sys)}

.tr-section{margin:0 0 1.3rem 2.1rem}
.tr-sechead{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:.5rem}
.tr-sechead svg{color:var(--meta)}
.tr-sechead-row{display:flex;align-items:center;justify-content:space-between}
.tr-pct{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;color:var(--meta)}

.tr-box{
  width:100%;font-family:'Inter',sans-serif;font-size:.86rem;line-height:1.5;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line-firm);border-radius:0;padding:.6rem .7rem;
  resize:vertical;
}
.tr-box:focus{outline:2px solid var(--sys);outline-offset:1px}

.tr-progress{height:8px;border-radius:0;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;margin-bottom:.7rem}
.tr-progress-fill{height:100%;background:var(--sys);border-radius:0;transition:width .15s ease}
.tr-check{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;cursor:pointer}
.tr-check input{width:16px;height:16px;accent-color:var(--sys);cursor:pointer}
.tr-checklabel{font-size:.85rem;color:var(--ink)}
.tr-checklabel.done{text-decoration:line-through;color:var(--meta)}

.pb-field{margin:0 0 1rem 2.1rem}
.pb-field label{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--meta);margin-bottom:.35rem}
.pb-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-left:2.1rem}
.pb-grid .pb-field{margin-left:0}
@media (max-width:560px){ .pb-grid{grid-template-columns:1fr} }
.pb-field.good .tr-box{border-left:3px solid var(--sys)}
.pb-field.bad .tr-box{border-left:3px solid var(--bad)}
@media (max-width:560px){ .tr-meta,.tr-section,.pb-grid{margin-left:0} .pb-field{margin-left:0} }

/* ============================= PAGE 7 — waiting on you ============================= */
.queue{display:flex;flex-direction:column;gap:.8rem}
.qitem{
  display:flex;align-items:flex-start;gap:.9rem;padding:.95rem 1.05rem;
  border:1px solid var(--line);border-radius:0;background:var(--panel);
}
.qitem.resolved{opacity:.45}
.qitem .qicon{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.qitem .qbody{flex:1;min-width:0}
.qitem h3{margin:0 0 .2rem;font-size:.9rem}
.qitem p{margin:0;font-size:.82rem;color:var(--body);line-height:1.5}
.qitem .qactions{display:flex;gap:.5rem;margin-top:.6rem}
.qbtn{
  font-size:.74rem;font-weight:700;padding:.35em .8em;border-radius:0;cursor:pointer;
  border:1px solid var(--line-firm);background:var(--panel-2);color:var(--ink);
}
.qbtn.primary{background:var(--sys);border-color:var(--sys);color:#fff}
.qitem.resolved .qactions{display:none}
.qitem .resolvedtag{display:none;font-size:.72rem;font-weight:700;color:var(--good);margin-top:.4rem}
.qitem.resolved .resolvedtag{display:block}

footer.credit{
  padding:1.2rem 2rem 2rem;font-size:.72rem;color:var(--meta);max-width:1180px;
}


/* ===== added: change log ===== */
/* ---- recent changes table: only a cell-truncation helper is new, table itself reuses .dtable/.pill ---- */
.chg-cell{
  display:inline-block;max-width:15rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:middle;
}

/* ===== added: needs your review ===== */
/* ============================= needs-your-review panel ============================= */
.nr-rolepill{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;
  padding:.2em .55em;border-radius:0;background:var(--panel-2);border:1px solid var(--line-firm);color:var(--body);
}
.nr-waiting{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;color:var(--meta)}
.nr-waiting.nr-stale{color:var(--warn);font-weight:600}

/* modal specifics not already covered by tr-* / labelpill */
.labelpill.nr-draft{background:var(--hum)}
.labelpill.nr-technical{background:var(--mon)}
.labelpill.nr-decision{background:var(--ocean)}
.nr-targetpage{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line-firm);border-radius:0;
  padding:.4em .6em;display:inline-block;
}
.nr-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.3rem 0 0 2.1rem}
@media (max-width:560px){ .nr-actions{margin-left:0} }
.nr-actions .qbtn.danger{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.nr-editnotice{font-size:.72rem;color:var(--meta);margin:.4rem 0 0 2.1rem}
@media (max-width:560px){ .nr-editnotice{margin-left:0} }
.nr-resolved-tag{
  display:none;margin:1.3rem 0 0 2.1rem;font-size:.82rem;font-weight:700;color:var(--good);
}
@media (max-width:560px){ .nr-resolved-tag{margin-left:0} }

/* ===== added: reports & results ===== */
/* ============================================================ */
/* 3. CSS — append to the app's existing <style> block.          */
/* Tokens only: var(--sys/--good/--warn/--bad/--line/--meta/etc) */
/* already defined at :root in continuous-seo-ops-app.html.      */
/* Reuses .pill, .rowdot, .dtable, .dt-toolbar, .panel as-is.    */
/* ============================================================ */

.digest{display:flex;flex-direction:column;gap:1rem}
.digest-week{border:1px solid var(--line);border-radius:0;padding:.95rem 1.05rem;background:var(--panel-2)}
.digest-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  margin-bottom:.7rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);
}
.digest-range{font-family:'Inter',sans-serif;font-weight:800;font-size:.92rem}
.digest-meta{font-size:.68rem;color:var(--meta)}
.digest-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:900px){ .digest-cols{grid-template-columns:1fr} }
.digest-collabel{
  display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--meta);margin-bottom:.5rem;
}
.digest-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem}
.digest-col li{font-size:.81rem;color:var(--body);line-height:1.45;display:flex;align-items:flex-start;gap:.4rem}
.digest-col li .pill{flex:none;margin-top:.05rem}
.digest-col li .rowdot{flex:none;margin-top:.5rem}
.digest-col ul.digest-empty li{color:var(--meta)}
.digest-caveat{font-size:.78rem;color:var(--meta);line-height:1.5;margin:.9rem 0 0}

/* ===== added: setup & readiness ===== */
/* trigger badge — sits at pagehead scale, pill-shaped like .pill but sized for a header */
.stagebadge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:'Inter',sans-serif;font-size:.76rem;font-weight:700;
  padding:.38em .8em;border-radius:0;cursor:pointer;
  border:1px solid var(--line-firm);background:var(--panel-2);color:var(--ink);
}
.stagebadge:hover{background:var(--sys-soft);border-color:var(--sys)}
.stagebadge .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);display:block}

/* stage tracker inside the modal */
.stage-track{display:flex;flex-direction:column;gap:.7rem;margin:0 0 1.1rem}
.stagecard{
  border:1px solid var(--line);border-radius:0;padding:.85rem .95rem;background:var(--panel-2);
  border-left:3px solid var(--line-firm);
}
.stagecard.current{border-left-color:var(--warn);background:var(--warn-soft)}
.stagecard.done{border-left-color:var(--good)}
.stagecard .sc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.stagecard .sc-name{display:flex;align-items:baseline;gap:.5rem}
.stagecard .sc-name strong{font-size:.9rem}
.stagecard .sc-weeks{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;color:var(--meta)}
.stagecard .sc-current-tag{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.6rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn);
}
.stagecard .sc-block{margin-top:.5rem}
.stagecard .sc-label{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--meta);margin-bottom:.25rem}
.stagecard .sc-build{font-size:.78rem;color:var(--body);line-height:1.5;margin:0}
.stagecard .sc-gate{font-size:.78rem;color:var(--body);line-height:1.5;margin:0}
.stagecard .sc-progress{
  font-size:.78rem;color:var(--ink);line-height:1.5;margin:.4rem 0 0;
  padding:.55rem .65rem;border-radius:0;background:var(--panel);border:1px solid var(--line);
}

/* cost footnote at the bottom of the modal */
.sr-costnote{
  margin-top:.2rem;padding-top:.8rem;border-top:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;color:var(--meta);line-height:1.7;
}
.sr-costnote b{color:var(--ink)}

/* ===== added: search intelligence group (Rankings / Organic Search / Signals / Ideas) ===== */
.navgrp{
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sidebar-meta);padding:.9rem .65rem .3rem;
}

/* Signals — a rolling feed, not a table */
.signal{display:flex;gap:1rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--line)}
.signal:last-child{border-bottom:0}
.signal .sdate{flex:none;width:56px;font-size:.68rem;color:var(--meta);padding-top:.1rem}
.signal .sbody{flex:1;min-width:0}
.signal .stitle{font-size:.88rem;font-weight:700;margin-bottom:.3rem;color:var(--ink)}
.signal .sdetail{font-size:.82rem;color:var(--body);line-height:1.5}
.signal .stag{flex:none}

/* Ideas — lighter-weight than a Growth Project, nothing promoted yet */
.idea{
  background:var(--panel);border:1px solid var(--line);padding:.95rem 1.05rem;
  display:flex;flex-direction:column;gap:.55rem;box-shadow:var(--shadow);
}
.idea .isrc{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--meta)}
.idea .ititle{font-size:.9rem;font-weight:700;color:var(--ink)}
.idea .iwhy{font-size:.8rem;color:var(--body);line-height:1.5;flex:1}
.idea .iacts{display:flex;gap:.5rem;margin-top:.1rem;flex-wrap:wrap}

/* ===== web-app additions ===== */
[hidden]{display:none!important}
.colhead .mono{font-size:.66rem;color:var(--meta)}
.stagesel{margin-top:.6rem;font:inherit;font-size:.7rem;color:var(--body);background:var(--panel-2);border:1px solid var(--line-firm);padding:.2em .3em;max-width:100%}
.betcard .cardbadge{margin-right:.3rem}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
  background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;padding:.6rem 1rem;box-shadow:var(--shadow-lift);transition:all .18s ease;z-index:200}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--bad)}
.dtable th[data-t]{cursor:pointer}

/* ===== sign-in ===== */
.signed-out .sidebar{display:none}
.signed-out .main{align-items:center;justify-content:center}
.login{width:min(360px,calc(100% - 32px));display:flex;flex-direction:column;gap:.5rem}
.login h2{font-size:1.2rem}
.login-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--meta)}
.login-input{font:inherit;font-size:.95rem;color:var(--ink);background:var(--panel);border:1px solid var(--line-firm);padding:.6rem .7rem;border-radius:0}
.login-input:focus{outline:2px solid var(--ink);outline-offset:1px}
.login-btn{font:inherit;font-size:.85rem;font-weight:700;color:#fff;background:var(--ink);border:0;padding:.7rem 1rem;margin-top:.4rem;cursor:pointer}
.login-btn:disabled{opacity:.6;cursor:default}
.login-err{min-height:1.2em;margin:0;font-size:.78rem;font-weight:600;color:var(--bad)}
.navitem.soon{opacity:.55}
.navitem.soon:hover,.navitem.soon[aria-current="page"]{opacity:1}
a.condlink{text-decoration:none}
a.condlink:hover{text-decoration:underline}

/* ===== overview: target tile + monthly trend ===== */
.kpi .note{font-size:.76rem;color:var(--body)}
.meter{height:6px;background:var(--mon-soft);margin-top:.5rem;position:relative}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);min-width:3px}
.trend{position:relative}
.trend svg{display:block;width:100%;height:auto;overflow:visible}
.trend text{font-family:'Inter',sans-serif;font-size:11px;fill:var(--meta)}
.trend .val{fill:var(--ink);font-weight:800;font-size:12px}
.trend-tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;padding:.35rem .55rem;transform:translate(-50%,-135%);white-space:nowrap;opacity:0;transition:opacity .1s}
.trend-note{margin:.9rem 0 0;font-size:.82rem;color:var(--body);line-height:1.55}
.trend-note b{color:var(--ink)}

/* ===== logo: mountain on a lime square ===== */
.sidebar .brand .mark{flex:none;width:34px;height:34px;border-radius:10px;background:#86f27f;display:grid;place-items:center}
.sidebar .brand .mark svg{color:#142417}