/* The next board — side menu of workstreams, one view at a time: headline numbers, then tables.
   Base tokens and shared components (.btn, .tick, .hat, .due, .toast, .livebadge, .clock, …) come
   inline from index.html's head block (copied by scratchpad/build_next.py). */
.nextpill{display:inline-block;font-size:9.5px;letter-spacing:.12em;padding:1px 7px;border-radius:999px;background:var(--terracotta);color:#FBF4E4;vertical-align:1px}
.faint{color:var(--faint)} .warn{color:var(--s-over-fg);font-weight:600}
.app{max-width:1560px}

/* ── shell: fixed side menu + the view ──────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:22px;margin-top:16px;align-items:start}
.side{position:sticky;top:14px;display:flex;flex-direction:column;gap:3px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:10px;box-shadow:var(--shadow)}
.sidehead{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:4px 10px 8px}
.side button{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--ink);border-radius:9px;padding:9px 10px;cursor:pointer;font:inherit;font-size:13.5px}
.side button:hover{background:var(--hover)}
.side button[aria-current="page"]{background:var(--brown);border-color:var(--brown);color:#FBF4E4}
.side button .ic{font-size:13px;text-align:center;color:var(--terracotta)} .side button[aria-current="page"] .ic{color:#FBF4E4}
.side button .bd{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;background:rgba(46,42,36,.06);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}
.side button[aria-current="page"] .bd{background:rgba(251,244,228,.22);color:#FBF4E4}
.side button .bd:empty{display:none}
.sidefoot{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 10px 4px;border-top:1px solid var(--hair);margin-top:8px}
.sidefoot .clock{font-size:15px;letter-spacing:1px}
@media (max-width:900px){
  .shell{grid-template-columns:1fr;gap:12px}
  /* The menu becomes a scrolling strip pinned under the top of the screen, so switching a
     workstream never means scrolling back up. */
  .side{position:sticky;top:0;z-index:5;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:6px;gap:4px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .side::-webkit-scrollbar{display:none}
  .sidehead,.sidefoot{display:none}
  .side button{width:auto;grid-template-columns:auto auto auto;white-space:nowrap;padding:9px 12px;font-size:13px;scroll-snap-align:start;min-height:40px}
  .side button .ic{font-size:12px}
  .side button .bd{white-space:nowrap}
}
.viewhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 10px}
.viewhead h2{font-family:var(--serif);font-size:24px;margin:0;color:var(--terracotta);letter-spacing:-.01em}
.viewhead span{font-size:13px;color:var(--muted)}

/* ── headline numbers ──────────────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.kpi{background:linear-gradient(180deg,var(--card),var(--panel));border:1px solid var(--hair);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi b{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi span{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.kpi small{font-size:10.5px;color:var(--faint)}
.kpi.hot b{color:var(--s-over-fg)} .kpi.warm b{color:var(--s-today-fg)} .kpi.ok b{color:var(--s-soon-fg)}
.note{font-size:12.5px;color:var(--muted);margin:-4px 2px 12px;line-height:1.5}
.note b{color:var(--ink)}

/* ── Today: overview cards per workstream + Linda's read ───────────────────────────────── */
.overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.ovcard{text-align:left;font:inherit;cursor:pointer;background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:12px 14px 10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.ovcard:hover{border-color:var(--terracotta);box-shadow:0 2px 0 rgba(110,58,34,.05),0 16px 36px -18px rgba(110,58,34,.5)}
.ovh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid var(--hair);padding-bottom:7px;margin-bottom:4px}
.ovh b{font-family:var(--serif);font-size:15px;color:var(--terracotta-2)} .ovh span{font-size:11px;color:var(--muted)}
.ovl{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.ovl b{font-family:var(--mono);font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.ovl.hot b{color:var(--s-over-fg)} .ovl.warm b{color:var(--s-today-fg)} .ovl.ok b{color:var(--s-soon-fg)} .ovl.warn b{color:var(--s-over-fg)}
.ovgo{margin-top:6px;font-size:11.5px;color:var(--sig);font-weight:600;text-align:right}
/* KPI cards: static unless they carry a destination */
.ovcard.static{cursor:default} .ovcard.static:hover{border-color:var(--hair);box-shadow:var(--shadow)}
.ovcard.static[data-go]{cursor:pointer} .ovcard.static[data-go]:hover{border-color:var(--terracotta);box-shadow:0 2px 0 rgba(110,58,34,.05),0 16px 36px -18px rgba(110,58,34,.5)}
.ovcard .ovsub{font-size:11px;color:var(--muted);line-height:1.4;margin:-2px 0 4px}
.ovh .kchips{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.kpicards{margin:4px 0 6px}
.glance{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.glancecard{text-align:left}
.glist{list-style:none;margin:2px 0 2px;padding:0}
.glist li{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;padding:6px 0;border-top:1px dashed var(--hair);font-size:12.5px;line-height:1.45}
.glist li:first-child{border-top:0}
.glist li[data-go]{cursor:pointer} .glist li[data-go]:hover>b{text-decoration:underline}
.glancecard{cursor:pointer}
.glist li>b{color:var(--ink);white-space:nowrap} .glist li.high>b{color:var(--s-over-fg)}
.glist .gsub{color:var(--muted);flex:1 1 200px;min-width:0}
.glist .due{margin-left:auto;white-space:nowrap}
/* headline tiles that go somewhere */
button.kpi{font:inherit;text-align:left;cursor:pointer;color:inherit}
button.kpi:hover{border-color:var(--terracotta)}
.golink{border:0;background:transparent;padding:0;font:inherit;color:var(--sig);cursor:pointer;text-decoration:underline dotted}
.tsub.hit,.tsec.hit{animation:hitflash 2.6s ease-out;border-radius:8px}
.today{margin-top:0;background:linear-gradient(180deg,var(--card),var(--panel));border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);--c:#F2D9D1;--ct:#8F2A1E}
.today h2{font-family:var(--serif);color:var(--ct);font-size:16px;margin:-16px -18px 12px;padding:13px 18px;background:var(--c);display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.today h2 .live{font-family:var(--sans);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ct);opacity:.85;font-weight:700}
.today h2 .caret{margin-left:auto;color:var(--ct)}
.today .card-b{padding:0}
.today .prose{font-size:14.5px;line-height:1.6;color:var(--ink)}
.today .prose p{margin:0 0 8px}
.line .upd{color:var(--ink)}
.today .prose h4.plab{font-family:var(--sans);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brown);margin:14px 0 5px;padding-bottom:3px;border-bottom:1px solid var(--hair)}
.today .prose h4.plab:first-child{margin-top:0}
.today .prose ul{margin:0 0 4px 0;padding-left:20px} .today .prose li{margin:3px 0}
.today .extract{margin-top:12px;padding:8px 13px;border-radius:9px;background:var(--parchment);border:1px dashed var(--hair)}
.today .extract summary{cursor:pointer;font-family:var(--sans);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brown);font-weight:700;user-select:none}
.today .extract summary .faint{text-transform:none;letter-spacing:0;font-weight:400}
.today .extract .wa{margin-top:8px;font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;color:var(--muted)}
.today .extract .wa b{color:var(--ink)}
.today.collapsed{padding-bottom:0} .today.collapsed h2{margin-bottom:0}
.today.collapsed .card-b{height:0;opacity:0;visibility:hidden;padding:0}

/* ── a table section ────────────────────────────────────────────────────────────────────── */
.tsec{margin-top:14px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.tsec>h2{display:flex;align-items:baseline;gap:10px;margin:0;padding:11px 15px;background:var(--panel);border-bottom:1px solid var(--hair);cursor:pointer;user-select:none;flex-wrap:wrap}
.tsec>h2 .t{font-family:var(--serif);font-size:16px;color:var(--terracotta-2);font-weight:700}
.tsec>h2 .n{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:rgba(46,42,36,.07);border:1px solid rgba(46,42,36,.08);border-radius:999px;padding:1px 9px;font-variant-numeric:tabular-nums}
.tsec>h2 .sub{font-size:12px;color:var(--muted);font-weight:400}
.tsec>h2 .caret{margin-left:auto;color:var(--faint)}
.tsec.collapsed>h2{border-bottom:0} .tsec.collapsed>h2 .caret{transform:rotate(-90deg)}
.tsec .tb{padding:6px 10px 12px;overflow-x:auto}
.tsec.collapsed .tb{display:none}
.tsec .empty{margin:8px 5px}
.tsec .foot{font-size:11.5px;color:var(--muted);margin:8px 5px 0}

table.grid{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.5}
table.grid th{position:sticky;top:0;text-align:left;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 8px;border-bottom:1px solid var(--hair);background:var(--card);cursor:pointer;user-select:none;white-space:nowrap}
table.grid th:hover{color:var(--ink)}
table.grid th[data-dir="asc"]::after{content:" ▴"} table.grid th[data-dir="desc"]::after{content:" ▾"}
table.grid td{padding:8px 8px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink)}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr:hover td{background:rgba(155,45,32,.035)}
table.grid .mono{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
table.grid td.mono b{color:var(--ink)}
table.grid .amt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.grid .wide{min-width:220px}
table.grid tr.over td{color:var(--s-over-fg)} table.grid tr.over td.mono b{color:var(--s-over-fg)}
table.grid tr.dim td{color:var(--muted)}
table.grid tr.done td .tx{text-decoration:line-through;opacity:.6}
.st{display:inline-block;font-size:11px;color:var(--brown);font-weight:600;white-space:nowrap}
.kind{display:inline-block;padding:0 6px;border-radius:4px;background:var(--s-soon-bg);color:var(--s-soon-fg);font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:9.5px;white-space:nowrap}
.kind.new{background:var(--s-today-bg);color:var(--s-today-fg)}
.kind.closed,.kind.gone{background:var(--s-over-bg);color:var(--s-over-fg)}
.src{display:inline-block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:0 5px;border-radius:4px;border:1px solid var(--hair);color:var(--faint);font-weight:700;vertical-align:1px;margin-right:6px}
.src.tracker{color:#5C6A38;border-color:#CDD6AE} .src.note{color:#6E3A22;border-color:#E0CEA8} .src.whatsapp{color:#2C6E67;border-color:rgba(44,110,103,.4)} .src.advisor{color:#8F2A1E;border-color:#E6C3BB}
.lines .line{padding:2px 0;border-top:1px dashed var(--hair);font-size:12px}
.lines .line:first-child{border-top:0;padding-top:0}
.line .when{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.photos{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.photos .thumb{display:block;width:44px;height:44px;border-radius:6px;overflow:hidden;border:1px solid var(--hair);background:var(--parchment-2)}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.photos a{font-size:11.5px;color:var(--sig);white-space:nowrap}

/* the orb reference button — every row, dim until the row is hovered */
.orbref{border:none;background:transparent;padding:0;cursor:pointer;width:22px;height:22px;border-radius:50%;overflow:hidden;opacity:.35;transition:opacity .15s,transform .15s;vertical-align:middle;box-shadow:0 0 0 1px var(--hair)}
.orbref img{width:100%;height:100%;object-fit:cover;display:block}
table.grid tr:hover .orbref,.orbref:hover,.orbref:focus-visible{opacity:1;transform:scale(1.08)}
table.grid .refc{width:30px;padding-left:2px;text-align:right}
.tsec .tsub+.tsec{margin-top:6px}

/* tasks table */
table.tasks .tickc{width:26px;padding-right:0} table.tasks .refc{width:30px;padding-left:0;text-align:right}
table.tasks .tx{color:var(--ink)}
table.tasks .refbtn{opacity:.35} table.tasks tr:hover .refbtn{opacity:1}
table.tasks .dot{display:inline-block;margin-top:4px}

.todraft{margin:6px 5px 0;font-size:13px;line-height:1.55;color:var(--ink)}
.todraft ul{margin:6px 0 0;padding-left:18px} .todraft li{margin:4px 0}
.todraft em{color:var(--faint)}


/* ── site-wide search (masthead) ──────────────────────────────────────────────────────── */
.search{position:relative;min-width:240px;flex:0 1 320px}
.search input{width:100%;border:1px solid var(--hair);background:var(--card);color:var(--ink);border-radius:9px;padding:8px 12px 8px 30px;font:inherit;font-size:13px;min-height:36px;outline:none}
.search input:focus{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(155,45,32,.12)}
.search::before{content:"⌕";position:absolute;left:10px;top:7px;font-size:16px;line-height:1;color:var(--faint);pointer-events:none}
tr.srow{cursor:pointer}
tr.srow:hover td{background:var(--hover)!important}
/* a newer build is on the server — offer a reload, never force one */
.reloadbar{position:fixed;left:50%;transform:translateX(-50%);top:12px;z-index:95;display:flex;align-items:center;gap:12px;padding:9px 12px 9px 14px;border-radius:999px;background:var(--ink);color:var(--ground);font-size:12.5px;box-shadow:0 10px 30px -10px rgba(46,42,36,.6)}
.reloadbar button{border:0;border-radius:999px;padding:5px 12px;background:var(--terracotta);color:#FBF4E4;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:640px){ .reloadbar{left:8px;right:8px;transform:none;justify-content:space-between} }

/* the row a search jumped to */
@keyframes hitflash{0%,60%{background:var(--s-today-bg)}100%{background:transparent}}
table.grid tr.hit td,table.grid tr.hit{animation:hitflash 2.6s ease-out}
.ovcard.hit,.tsec>h2.hit{animation:hitflash 2.6s ease-out}

/* ── phone ───────────────────────────────────────────────────────────────────────────────────
   Below 640px the board is read on a phone in one hand: tables turn into stacked cards (each
   row a card, each cell labelled by its column), numbers sit two to a row, the masthead stacks,
   and touch targets grow. Nothing here changes what the board says — only how it is laid out. */
@media (max-width:640px){
  .app{padding:12px 12px 72px}
  .mast{gap:10px;padding-bottom:10px}
  .mast h1{font-size:22px}
  .mast .gen{font-size:11.5px}
  .mtools{width:100%;justify-content:flex-start}
  .search{flex:1 1 100%;min-width:0;order:-1}
  .search input{font-size:16px}
  .refresh,.btn{padding:9px 12px;font-size:13px;min-height:40px}
  .preview-tag{display:none}
  .viewhead{margin:6px 0 10px} .viewhead h2{font-size:21px} .viewhead span{font-size:12.5px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:10px 12px} .kpi b{font-size:20px}
  .overview{grid-template-columns:1fr} .glance{grid-template-columns:1fr}
  .today{padding:14px 14px} .today h2{margin:-14px -14px 12px;padding:12px 14px}
  .today .prose{font-size:15px}
  .tsec>h2{padding:11px 12px} .tsec>h2 .sub{flex-basis:100%;font-size:11.5px}
  .tsec .tb{padding:6px 8px 10px;overflow-x:visible}
  .tsub{font-size:13px}
  /* Tables → cards. The header row goes; each <td> carries its column name (data-h, set by
     table()) and prints it as a small label. Wide cells (item, update) take the full width, the
     orb reference sits top-right, empty cells vanish so a card is only as tall as its facts. */
  table.grid,table.grid tbody{display:block;width:100%}
  table.grid thead{display:none}
  table.grid tr{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:10px 10px 10px;margin:0 0 8px;border:1px solid var(--hair);border-radius:10px;background:var(--parchment-3)}
  table.grid tr:last-child{margin-bottom:0}
  table.grid td{display:block;padding:0;border:0;min-width:0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
  table.grid td::before{content:attr(data-h);display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:1px}
  table.grid td.blank,table.grid td.refc::before,table.grid td.tickc::before{display:none}
  table.grid td.wide,table.grid td.tx{grid-column:1/-1}
  table.grid td.mono{font-family:var(--sans);font-size:13px;white-space:normal;color:var(--ink)}
  table.grid .wide{min-width:0}
  table.grid td.refc,table.tasks td.refc{position:absolute;top:8px;right:8px;width:auto;padding:0;text-align:right}
  table.tasks td.tickc{position:absolute;top:10px;left:10px;width:auto;padding:0}
  table.tasks td.tickc+td{padding-left:26px}
  table.grid td.amt{text-align:left}
  table.grid tbody tr:hover td{background:transparent}
  table.grid tr.over{border-color:var(--s-over-bg);background:rgba(242,217,209,.25)}
  /* Touch: no hover, so the orb reference is always visible and big enough for a thumb. */
  .orbref{opacity:.85;width:28px;height:28px}
  table.tasks .refbtn{opacity:.85}
  .photos .thumb{width:56px;height:56px}
  .todraft{font-size:14px}
  .toast{bottom:14px}
}