/* Hubium — the online front end's stylesheet (web/).
   Order: fonts, the brand tokens (build copy of _design/branding/tokens/brand-tokens.css), then the
   hub's own :root variables, which stay the UI source of truth (brand guide §3). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Playfair+Display:wght@400;600;700&display=swap');
@import url('branding/brand-tokens.css');

/* ── The hub's :root variables — copied VERBATIM from master's index.html lines 10–17 (the block
   after the Google Fonts @import). Re-copy on a merge that changes them; never edit here. ── */
:root {
  --bg:#09090d; --panel:#13151f; --panel2:#1a1d2a; --panel3:#1e2130; --border:#22263a; --border2:#2e334a;
  --text:#e2e5f0; --muted:#8b929e; --muted2:#3f4560; --accent:#c9a84c; --accent2:#e8c96a;
  --neg:#f87171; --pos:#4ade80;
  --row-even:#13151f; --row-odd:#161926;
  --crypto:#f7931a; --energy:#4ade80; --crisis:#60a5fa; --ind:#a78bfa;
  --tech:#38bdf8; --materials:#fb923c; --etf:#f472b6; --health:#34d399; --cash:#94a3b8;
}
/* ── end of the verbatim block ── */

*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100%;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);}
button{font:inherit;}
[hidden]{display:none !important;}

/* The hub's "+ ADD HOLDING" button: .manage-btn.primary (index.html .manage-btn rules), plus a 44 px target. */
.manage-btn{padding:8px 14px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-family:'Inter',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all .15s;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.manage-btn:hover{border-color:var(--accent);color:var(--accent);}
.manage-btn.primary{background:rgba(201,168,76,.1);border-color:var(--accent);color:var(--accent);}
.manage-btn.primary:hover{background:rgba(201,168,76,.18);}
.manage-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;}

/* The hub's panel look: .card (index.html). */
.card{background:var(--panel);border:1px solid var(--border);padding:22px;border-radius:2px;}
.tag{font-family:'DM Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.tag--pro{color:var(--accent);}
.tag--portfolio{color:var(--muted);}

/* ══ Landing ══ */
body.landing{background:var(--hb-ink);display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:32px 16px;}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;width:100%;max-width:440px;}
.hero__mark{width:176px;height:176px;}
.hero__word{font-family:var(--hb-font-display);font-weight:700;font-size:56px;line-height:1;color:var(--text);letter-spacing:.01em;}
.hero__rule{width:96px;height:2px;background:var(--hb-gold);}
.hero__line{color:var(--muted);font-size:16px;}
.hero__action{margin-top:10px;min-width:160px;}
.hero__note{color:var(--muted);font-size:13px;min-height:1.4em;}
.signin-mount{display:flex;justify-content:center;width:100%;}
@media (max-width:420px){
  .hero__mark{width:160px;height:160px;}
  .hero__word{font-size:48px;}
}

/* ══ Admin dashboard ══ */
.adm-hdr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:5;}
.adm-brand{display:flex;align-items:center;gap:10px;}
.adm-brand img{width:28px;height:28px;}
.adm-brand h1{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;color:var(--text);line-height:1;}
.adm-commit{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);border:1px solid var(--border2);padding:3px 8px;}
.adm-spacer{flex:1;}
.adm-user{color:var(--text);font-size:13px;}
.adm-main{padding:24px 20px 48px;max-width:1400px;margin:0 auto;}
.adm-title{font-family:'Playfair Display',serif;font-size:30px;color:var(--text);margin-bottom:18px;}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:18px;align-items:start;}
.tile h2{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;color:var(--text);margin-bottom:4px;}
.tile .sub{color:var(--muted);font-size:12px;margin-bottom:16px;}
.tile .err{color:var(--neg);font-size:13px;}
.gate{max-width:520px;margin:15vh auto;text-align:center;color:var(--muted);padding:0 16px;}

/* Roadmap */
.rm-ms{border-top:1px solid var(--border);}
.rm-ms:first-of-type{border-top:0;}
.rm-ms > summary, .rm-sub > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:12px 4px;min-height:44px;}
.rm-ms > summary::-webkit-details-marker, .rm-sub > summary::-webkit-details-marker{display:none;}
.rm-ms > summary::before, .rm-sub > summary::before{content:'\25B8';color:var(--muted);font-size:11px;width:10px;transition:transform .15s;}
.rm-ms[open] > summary::before, .rm-sub[open] > summary::before{transform:rotate(90deg);}
.rm-id{font-family:'DM Mono',monospace;color:var(--accent);font-size:13px;min-width:34px;}
.rm-name{color:var(--text);font-weight:500;}
.rm-count{margin-left:auto;font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap;}
.rm-body{padding:0 4px 12px 24px;}
.rm-sees{color:var(--muted);font-size:12px;margin:-4px 0 10px;}
.rm-sees b{color:var(--text);font-weight:500;}
.rm-sub{margin-left:4px;border-left:1px solid var(--border2);padding-left:10px;margin-bottom:6px;}
.rm-round{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:10px 0;border-top:1px dashed var(--border);}
.rm-round:first-child{border-top:0;}
.rm-round .nm{color:var(--text);}
.rm-round .rid{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);margin-right:6px;}
.rm-round .meta{grid-column:2;color:var(--muted);font-size:12px;}
.rm-round .meta b{color:var(--text);font-weight:500;}
.st{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--border2);color:var(--muted);white-space:nowrap;align-self:start;margin-top:2px;}
.st--done{color:var(--pos);border-color:rgba(74,222,128,.4);}
.st--in-progress{color:var(--accent);border-color:var(--accent);background:rgba(201,168,76,.08);}
.st--blocked{color:var(--neg);border-color:rgba(248,113,113,.45);}
.rm-open h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:12px 0 4px;}
.rm-open ul{list-style:none;}
.rm-open li{display:flex;gap:10px;padding:6px 0;border-top:1px dashed var(--border);font-size:13px;color:var(--text);}
.rm-open li .n{font-family:'DM Mono',monospace;color:var(--muted);min-width:26px;}
.rm-open li.done{color:var(--muted);text-decoration:line-through;}
/* Commits under a round (ONLINE-M1a/2) */
.rm-commits{margin-top:4px;}
.rm-commits > summary{cursor:pointer;font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);padding:2px 0;}
.rm-commits > summary:hover{color:var(--text);}
.rm-commits ul{list-style:none;margin:4px 0 2px;}
.rm-commits li{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:12px;color:var(--muted);}
.rm-commits li .subj{color:var(--text);min-width:0;}
.rm-commits .dt, .cm-row .dt{font-family:'DM Mono',monospace;font-size:11px;white-space:nowrap;}

/* Commits tile */
.sha{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap;}
.live, .live .sha, .live .subj{color:var(--hb-gold);}
.rtag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--border2);padding:1px 6px;white-space:nowrap;align-self:center;}
.cm-list{list-style:none;}
.cm-row{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);gap:4px 12px;align-items:baseline;padding:7px 0;border-top:1px dashed var(--border);font-size:13px;color:var(--muted);}
.cm-row:first-child{border-top:0;}
.cm-row .subj{color:var(--text);overflow-wrap:anywhere;}
.cm-row.live .subj{color:var(--hb-gold);}
.cm-note{margin:12px 0 0;}
.badge{font-family:'DM Mono',monospace;font-size:11px;padding:6px 10px;margin-bottom:12px;border:1px solid var(--border2);}
.badge--amber{color:#D9A441;border-color:rgba(217,164,65,.5);background:rgba(217,164,65,.08);}
.adm-commit--behind{color:#D9A441;border-color:rgba(217,164,65,.5);}

/* Architecture */
.arch{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;}
.arch h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:8px;}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:8px;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;}
.dot--ships{background:var(--accent);}
.dot--never{background:transparent;border:1px solid var(--muted);}
.sw{width:18px;height:10px;display:inline-block;flex:none;}
.sw--exists{border:1px solid var(--accent);background:rgba(201,168,76,.08);}
.sw--planned{border:1px dashed var(--muted);}
.tree{font-family:'DM Mono',monospace;font-size:12px;max-height:520px;overflow:auto;border:1px solid var(--border);background:var(--bg);padding:6px 0;}
.tree details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:5px 10px;min-height:32px;}
.tree details > summary::-webkit-details-marker{display:none;}
.tree .leaf{display:flex;align-items:center;gap:8px;padding:5px 10px;min-height:32px;}
.tree summary:hover, .tree .leaf:hover{background:var(--panel2);}
.tree .nm{color:var(--text);}
.tree .nm.never{color:var(--muted);}
.tree .purpose{color:var(--muted);font-family:'Inter',sans-serif;font-size:11px;margin-left:auto;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;}
.tree .kids{padding-left:18px;border-left:1px solid var(--border);margin-left:14px;}
.tree .kids div{padding:2px 8px;color:var(--muted);}
.tree .kids div.dir{color:var(--text);}
.stores svg{width:100%;height:auto;display:block;}
.stores .box{fill:var(--panel2);stroke:var(--border2);}
.stores .tbl{fill:transparent;stroke:var(--muted2);stroke-dasharray:4 3;}
.stores .exists .tbl{fill:rgba(201,168,76,.08);stroke:var(--accent);stroke-dasharray:none;}
.stores text{font-family:'Inter',sans-serif;fill:var(--text);}
.stores .hd{font-family:'Playfair Display',serif;font-size:15px;font-weight:600;}
.stores .cat{font-size:10px;fill:var(--muted);letter-spacing:.06em;}
.stores .t{font-family:'DM Mono',monospace;font-size:11px;fill:var(--muted);}
.stores .exists .t{fill:var(--text);}
.stores .since{font-family:'DM Mono',monospace;font-size:9px;fill:var(--muted);}
.stores .edge{stroke:var(--muted);stroke-width:1.2;fill:none;}
.stores .edge-lbl{font-size:10px;fill:var(--muted);}
.stores [data-tip]{cursor:default;}
.stores [data-tip]:focus{outline:none;}
.stores [data-tip]:hover .tbl, .stores [data-tip]:focus .tbl{stroke:var(--accent2);}

/* Tooltip (one element, positioned by admin.js) */
.tip{position:fixed;z-index:50;max-width:320px;background:var(--panel3);border:1px solid var(--border2);color:var(--text);font-size:12px;padding:8px 10px;pointer-events:none;box-shadow:0 6px 24px rgba(0,0,0,.45);}
.tip b{color:var(--accent);font-weight:500;}
.tip .m{color:var(--muted);display:block;margin-top:2px;}

@media (max-width:640px){
  .adm-hdr{padding:10px 12px;gap:10px;}
  .adm-main{padding:16px 12px 40px;}
  .adm-title{font-size:24px;}
  .tree .purpose{display:none;}
  .cm-row{grid-template-columns:auto auto minmax(0,1fr);}
  .cm-row .subj{grid-column:1 / -1;}
}