/* app.css -- styles for the orbit study page
   Created by LT Sean Egan, PhD  2026-10-03
   Modified: SDE 2026-10-05  the per-cluster sync list, the cluster tag on a run card, the cluster filter
   Modified: SDE 2026-10-05  naming ruling: the same rules style the node-kind sync list, the hardware tag and the node filter */
/* Orbit study page. Tokens are defined once on :root (light, the hub's palette) and redefined
   for dark under prefers-color-scheme and [data-theme="dark"]. Nothing is defined only inside a
   theme block. */
:root{
  --bg:#f7f8fa;--card:#ffffff;--card-2:#f2f5f8;--ink:#17202a;--muted:#5b6673;--faint:#8a949f;--line:#e3e7ec;
  --accent:#0f6e8c;--accent-ink:#0b4a5e;--console:#f4f7fa;
  --st-run:#087c62;--st-wait:#8c9db3;--st-done:#5d7493;--st-fail:#b92d3e;--st-limit:#b07400;
  --pl-met:#0c8a0c;--pl-part:#c98500;--pl-not:#d03b3b;--pl-unread:#9aa5b1;
  --s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;
  --est:#5b6673;--shadow:0 8px 24px #17202a14;
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:14px;--gap:16px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1418;--card:#161d23;--card-2:#1b242c;--ink:#e6ebf0;--muted:#9aa7b4;--faint:#6c7a87;--line:#243039;
    --accent:#5ec3e0;--accent-ink:#9fdcee;--console:#11181d;
    --st-run:#64e8c0;--st-wait:#5b6f8c;--st-done:#8fa3bf;--st-fail:#ff9f9f;--st-limit:#ffd187;
    --pl-met:#3fbf5f;--pl-part:#e0a526;--pl-not:#e66767;--pl-unread:#5f6d79;
    --s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;
    --est:#9aa7b4;--shadow:0 8px 24px #00000040;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1418;--card:#161d23;--card-2:#1b242c;--ink:#e6ebf0;--muted:#9aa7b4;--faint:#6c7a87;--line:#243039;
  --accent:#5ec3e0;--accent-ink:#9fdcee;--console:#11181d;
  --st-run:#64e8c0;--st-wait:#5b6f8c;--st-done:#8fa3bf;--st-fail:#ff9f9f;--st-limit:#ffd187;
  --pl-met:#3fbf5f;--pl-part:#e0a526;--pl-not:#e66767;--pl-unread:#5f6d79;
  --s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;
  --est:#9aa7b4;--shadow:0 8px 24px #00000040;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--f-sans)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-ink);text-decoration:underline}
button{font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;min-height:36px;padding:4px 12px;cursor:pointer}
button:hover{border-color:var(--accent)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
select{font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;min-height:36px;padding:4px 8px;max-width:100%}
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

main{max-width:1120px;margin:0 auto;padding:20px 16px 56px}
header.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.crumbs{margin:0;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:24px 0 16px;flex-wrap:wrap}
.heading>div:first-child{flex:1 1 420px}
h1{margin:0 0 6px;font-size:28px;line-height:1.2;letter-spacing:-.01em}
h2{margin:0;font-size:20px;line-height:1.3}
h3{margin:0;font-size:16px;line-height:1.35}
.sub{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:72ch}
.feed{display:grid;gap:2px;justify-items:end;font-size:14px;text-align:right}
.feed .line{display:flex;align-items:center;gap:8px}
.feed small{color:var(--muted);font-size:12px;max-width:44ch}
.cl-list{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:2px;font-size:13px;justify-items:end}
.cl-list li{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:flex-end}
.cl-list .cl-name{font-weight:600}
.cl-list .cl-when{color:var(--muted)}
.cl-list .gap .cl-when{color:var(--st-limit)}
.cl-list .busy .cl-when{color:var(--accent)}
.cl-list[hidden],.pick[hidden]{display:none}
.tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-tag{display:inline-block;font-size:12px;font-weight:600;padding:1px 9px;border-radius:999px;border:1px solid var(--accent);color:var(--accent-ink);white-space:nowrap}
.sync-row{display:flex;align-items:center;gap:10px}
.sync-row button{min-height:32px;padding:2px 14px;font-weight:600;border-color:var(--accent);color:var(--accent)}
.sync-row button:disabled{opacity:.6;cursor:progress}
.feed .busy .dot{background:var(--accent);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.feed .gap{color:var(--st-limit)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--st-run);flex:none}
.gap .dot{background:var(--st-limit)}

.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0 8px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.tile .label{font-size:12px;color:var(--muted);font-weight:600}
.tile .value{font:600 28px/1.1 var(--f-mono);font-variant-numeric:tabular-nums;margin-top:6px}
.tile .unit{font-size:12px;color:var(--muted);margin-top:2px}

section.block{margin-top:40px}
.section-head{margin-bottom:12px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-top:12px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.explain{font-size:12px;color:var(--accent);background:none;border:0;padding:0;min-height:0;text-decoration:underline;text-underline-offset:3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two .panel{margin-top:12px}
.fig-wrap{width:100%;overflow:hidden}
.empty{color:var(--muted);font-size:14px;margin:8px 0}

/* figures */
svg.fig{display:block;max-width:100%;height:auto}
svg.fig text{fill:var(--muted);font:12px var(--f-sans)}
svg.fig text.rowlabel{fill:var(--ink);font-size:13px}
svg.fig text.val{fill:var(--ink);font:12px var(--f-mono)}
svg.fig .grid{stroke:var(--line);stroke-width:1}
svg.fig .axis{stroke:var(--faint);stroke-width:1}
svg.fig .now{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}
svg.fig text.now-label{fill:var(--accent)}
svg.fig .hit{fill:transparent}
svg.fig g.mark:hover rect:not(.hit){filter:brightness(1.12)}
.b-running{fill:var(--st-run)}.b-waiting{fill:var(--st-wait)}.b-finished{fill:var(--st-done)}
.b-failed{fill:var(--st-fail)}.b-stopped_early{fill:var(--st-limit)}.b-unknown{fill:var(--st-wait)}
.pl-met{fill:var(--pl-met)}.pl-partly-met{fill:var(--pl-part)}.pl-not-met{fill:var(--pl-not)}
.pl-being-read{fill:var(--accent);opacity:.55}
.pl-not-yet-read{fill:var(--card);stroke:var(--pl-unread);stroke-width:1.5;stroke-dasharray:3 2}
.hbar{fill:var(--accent)}
.est-bar{fill:none;stroke:var(--est);stroke-width:1.5;stroke-dasharray:4 3}
.act-bar{fill:var(--accent)}
.act-run{fill:var(--st-run)}
.ser-1{stroke:var(--s1)}.ser-2{stroke:var(--s2)}.ser-3{stroke:var(--s3)}.ser-4{stroke:var(--s4)}.ser-5{stroke:var(--s5)}
.dot-1{fill:var(--s1)}.dot-2{fill:var(--s2)}.dot-3{fill:var(--s3)}.dot-4{fill:var(--s4)}.dot-5{fill:var(--s5)}
.line-ghost{fill:none;stroke-width:2;opacity:.22}
.line-played{fill:none;stroke-width:2}
.pt{stroke:var(--card);stroke-width:2}
.cursor{stroke:var(--ink);stroke-width:1;opacity:.5}
.estline{stroke:var(--est);stroke-width:1.5;stroke-dasharray:5 4}
.ev-tick{fill:var(--accent)}

.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.sw-met{background:var(--pl-met)}.sw-part{background:var(--pl-part)}.sw-not{background:var(--pl-not)}
.sw-reading{background:var(--accent);opacity:.55}
.sw-unread{border:1.5px dashed var(--pl-unread)}
.sw-running{background:var(--st-run)}.sw-waiting{background:var(--st-wait)}.sw-finished{background:var(--st-done)}.sw-failed{background:var(--st-fail)}
.sw-est{border:1.5px dashed var(--est)}.sw-act{background:var(--accent)}

/* study cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:12px;margin-top:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0;overflow-wrap:anywhere}
.card h3{font-size:16px}
.card .purpose{margin:0;color:var(--muted);font-size:14px}
.card .headline{margin:0;font-size:14px}
.state{display:inline-block;font-size:12px;font-weight:600;padding:1px 9px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);white-space:nowrap}
.state.s-running::before,.state.s-waiting::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--st-run)}
.state.s-waiting::before{background:var(--st-wait)}
.dots{display:flex;flex-wrap:wrap;gap:5px}
.pl{width:14px;height:14px;border-radius:50%;border:0;padding:0;min-height:0;cursor:help}
.pl.met{background:var(--pl-met)}.pl.partly-met{background:var(--pl-part)}.pl.not-met{background:var(--pl-not)}
.pl.being-read{background:var(--accent);opacity:.55}
.pl.not-yet-read{background:transparent;border:1.5px dashed var(--pl-unread)}
.card .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.card .meta b{color:var(--ink);font-weight:600}
.card .nb{font-size:13px;margin:0}
.card .nb a{display:inline-block;margin-right:10px}

/* replay */
.pick{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);flex:1 1 280px;min-width:0}
.pick select{flex:1 1 auto;min-width:0}
.rp-hw{margin:0 0 8px;color:var(--muted);font-size:13px}
.rp-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rp-controls input[type=range]{flex:1 1 220px;accent-color:var(--accent);min-width:160px}
.rp-clock{font-size:13px;color:var(--ink);min-width:16ch}
.rp-bars{display:grid;gap:6px;margin:10px 0}
.rp-bar{display:grid;grid-template-columns:minmax(120px,220px) 1fr minmax(110px,auto);gap:10px;align-items:center;font-size:13px}
.rp-bar .track{height:10px;border-radius:5px;background:var(--card-2);border:1px solid var(--line);overflow:hidden}
.rp-bar .fill{height:100%;width:0;border-radius:4px}
.fill-1{background:var(--s1)}.fill-2{background:var(--s2)}.fill-3{background:var(--s3)}.fill-4{background:var(--s4)}.fill-5{background:var(--s5)}
.rp-bar .n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.rp-meters{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:13px;margin-bottom:8px}
.rp-meters .k{color:var(--muted)}
.console{list-style:none;margin:0;padding:8px 12px;background:var(--console);border:1px solid var(--line);border-radius:10px;font:12px/1.6 var(--f-mono);max-height:180px;overflow:auto;min-height:44px}
.console li{color:var(--muted)}
.console li.fresh{color:var(--ink)}
.console li .t{color:var(--faint);margin-right:8px}
.console li.met .x{color:var(--pl-met)}.console li.not .x{color:var(--pl-not)}

/* every run */
.rb-list{display:grid;gap:12px}
.rb-run{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card-2);min-width:0;overflow-wrap:anywhere}
.rb-facts{margin:0 0 8px;font-size:13px;color:var(--muted)}
.tbl-wrap{width:100%;overflow-x:auto}
.tbl{border-collapse:collapse;font-size:13px;width:100%;margin:6px 0}
.tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);padding:4px 8px 4px 0;white-space:nowrap}
.tbl td{border-bottom:1px solid var(--line);padding:4px 8px 4px 0;vertical-align:top}
.tbl td.num{text-align:right}
.rb-pl{list-style:none;margin:8px 0;padding:0;font-size:13px;display:grid;gap:2px}
.rb-pl .mk{display:inline-block;width:1.4em;font-weight:700}
.rb-pl .met .mk{color:var(--pl-met)}.rb-pl .not .mk{color:var(--pl-not)}
.rb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px;font-size:13px}
.linkish{background:none;border:0;padding:0;min-height:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:13px}
.sw-s1{background:var(--s1)}.sw-s2{background:var(--s2)}.sw-s3{background:var(--s3)}.sw-s4{background:var(--s4)}.sw-s5{background:var(--s5)}
.console li.resume .x{color:var(--accent)}
#pop-pre{max-height:60vh;overflow:auto;background:var(--console);border:1px solid var(--line);border-radius:8px;padding:10px;font:12px/1.5 var(--f-mono);white-space:pre-wrap}
#pop-img{max-width:100%;height:auto;display:block;margin:8px 0}
dialog:has(#pop-pre:not([hidden])),dialog:has(#pop-img:not([hidden])){max-width:min(900px,calc(100vw - 32px))}

/* pop-up and hover chip */
dialog{max-width:min(560px,calc(100vw - 32px));border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);padding:18px 20px;box-shadow:var(--shadow)}
dialog::backdrop{background:#0008}
dialog p{margin:8px 0;font-size:15px}
#chip{position:fixed;z-index:20;pointer-events:none;max-width:320px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 12px;box-shadow:var(--shadow);font-size:12px;line-height:1.5}
#chip[hidden]{display:none}
#chip b{font-size:13px}
#chip .k{color:var(--muted)}

.foot{margin-top:48px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot p{margin:4px 0}

@media (max-width:820px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:1fr}
  .feed{justify-items:start;text-align:left}
  .cl-list{justify-items:start}
  .cl-list li{justify-content:flex-start}
}
@media (max-width:480px){
  .cards{grid-template-columns:1fr}
  .rp-bar{grid-template-columns:1fr;gap:2px}
  .rp-bar .n{text-align:left}
  h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* daily news */
main.news{max-width:760px}
.article h1{margin:16px 0 8px}
.article h2{margin:28px 0 6px;font-size:18px}
.article p{margin:8px 0;font-size:16px;line-height:1.6;text-wrap:pretty}
.article .kicker{margin:20px 0 0;color:var(--muted);font-size:13px}
.article .lede{font-size:18px;color:var(--ink)}
.article .lede2{font-size:16px;color:var(--ink)}
.article .prov{margin-top:32px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.newslist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.newslist li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
.newslist a{font-weight:600}
.newslist .d{color:var(--muted);font-weight:400;margin-right:8px}
.newslist p{margin:4px 0 0;color:var(--muted);font-size:14px}