/* PrintDesk — Calendar 2.0 design system
   Dark theme · teal/amber accent (purple is taken) · tabular numerals ·
   names never truncate · 13px minimum data text */
:root{
  --bg:#0b1114; --panel:#101a1f; --panel2:#0e161b; --line:#1e2e36;
  --text:#e8f1f4; --dim:#8fa6ae; --faint:#5c747d;
  --teal:#1fd6b5; --teal-dim:#0f3d35; --amber:#ffb454; --amber-dim:#43320f;
  --red:#ff6b6b; --red-dim:#451f22; --green:#3ddc84; --green-dim:#173d28;
  --radius:10px; --fs:13px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:var(--fs);line-height:1.45}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
kbd{background:#22333b;border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:11px}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--teal),#0e7c68);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#04231c}
.brand-name{font-weight:700;font-size:15px}
.brand-tag{font-size:10px;color:var(--amber);border:1px solid var(--amber-dim);background:var(--amber-dim);border-radius:20px;padding:1px 7px;vertical-align:2px}
.brand-sub{color:var(--faint);font-size:11px}
.mainnav{display:flex;gap:4px}
.mainnav a{color:var(--dim);text-decoration:none;padding:6px 10px;border-radius:8px;font-weight:600}
.mainnav a.active{color:var(--teal);background:var(--teal-dim)}
.mainnav a.soon{opacity:.55}
.clocks{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.clock{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:4px 10px;text-align:center;min-width:86px}
.clock .city{font-size:10px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.clock .time{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.clock.killzone{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.clock.killzone .city{color:var(--teal)}
.askbtn{background:var(--teal);color:#04231c;font-weight:700;border-radius:8px;padding:8px 14px}
.askbtn kbd{background:rgba(0,0,0,.18);border-color:transparent;color:#04231c}

/* ---------- my markets strip ---------- */
.markets-strip{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;background:var(--panel2);border-bottom:1px solid var(--line)}
.mchip{flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:7px 11px;min-width:118px;text-align:left}
.mchip:hover{border-color:var(--teal)}
.mchip .sym{font-weight:800;font-size:13px}
.mchip .price{font-variant-numeric:tabular-nums;color:var(--dim)}
.mchip .row2{display:flex;justify-content:space-between;gap:8px;margin-top:2px}
.bias-up{color:var(--green)} .bias-dn{color:var(--red)} .bias-flat{color:var(--dim)}
.crowd{font-size:11px;color:var(--dim)}
.crowd.extreme{color:var(--amber);font-weight:700}
.mchip .next{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---------- ledger strip ---------- */
.ledger-strip{display:flex;gap:14px;align-items:center;padding:8px 16px;background:linear-gradient(90deg,var(--teal-dim),transparent);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ledger-strip .lt{font-weight:800;color:var(--teal);letter-spacing:.04em}
.ledger-strip .stat{font-variant-numeric:tabular-nums}
.ledger-strip .stat b{font-size:15px}
.ledger-strip .recent{color:var(--dim);font-size:12px}
.ledger-strip .recent .hit{color:var(--green);font-weight:700}
.ledger-strip .recent .miss{color:var(--red);font-weight:700}
.ledger-strip .note{color:var(--faint);font-size:11px;margin-left:auto}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0;align-items:start}
.calendar-pane{padding:12px 16px;min-width:0}
.inspector{border-left:1px solid var(--line);background:var(--panel);padding:16px;position:sticky;top:0;max-height:100vh;overflow-y:auto}

/* ---------- filter deck ---------- */
.filter-deck{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.daytabs{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow-x:auto;overflow-y:hidden;max-width:100%;scrollbar-width:thin}
.daytabs button{padding:7px 12px;color:var(--dim);font-weight:600;border-right:1px solid var(--line);flex:0 0 auto;white-space:nowrap}
.daytabs button:last-child{border-right:none}
.daytabs button.active{background:var(--teal-dim);color:var(--teal)}
.toggles{display:flex;gap:14px;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--dim);font-weight:600}
.switch input{display:none}
.switch span{width:34px;height:19px;border-radius:20px;background:#22333b;position:relative;transition:.15s}
.switch span::after{content:"";position:absolute;top:2.5px;left:3px;width:14px;height:14px;border-radius:50%;background:#7d97a1;transition:.15s}
.switch input:checked+span{background:var(--teal-dim)}
.switch input:checked+span::after{left:17px;background:var(--teal)}
.deck-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.impact-filter button{font-size:15px;padding:2px 4px;opacity:.25}
.impact-filter button.active{opacity:1}
.imp.high{color:var(--red)} .imp.med{color:var(--amber)} .imp.low{color:var(--dim)}
select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit}

/* ---------- cluster banner ---------- */
.cluster-banner{border:1px solid var(--amber-dim);background:linear-gradient(90deg,var(--amber-dim),transparent);border-radius:var(--radius);padding:10px 14px;margin-bottom:10px}
.cluster-banner .ct{font-weight:800;color:var(--amber)}
.cluster-banner.upcoming{border-color:var(--teal-dim);background:linear-gradient(90deg,var(--teal-dim),transparent)}
.cluster-banner.upcoming .ct{color:var(--teal)}

/* ---------- calendar table ---------- */
.cal-head,.event-row{display:grid;grid-template-columns:118px 14px minmax(150px,1.6fr) 140px 62px 140px minmax(140px,1.2fr);gap:10px;align-items:center;padding:8px 10px}
.cal-head{color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.event-row{border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.event-row:hover{background:var(--panel)}
.event-row.selected{background:var(--panel);box-shadow:inset 2px 0 0 var(--teal)}
.event-row.upcoming-next{background:linear-gradient(90deg,rgba(31,214,181,.07),transparent)}
.e-time{font-variant-numeric:tabular-nums}
.e-time .cd{display:block;font-size:11px;color:var(--teal);font-weight:700}
.e-time .ago{color:var(--faint);font-weight:400}
.dot{font-size:12px}
.dot.high{color:var(--red)} .dot.med{color:var(--amber)} .dot.low{color:var(--dim)}
.e-name{font-weight:600;overflow-wrap:break-word}
.e-name .ccy{color:var(--faint);font-weight:700;font-size:11px;margin-right:6px}
.e-name .revtag{background:var(--amber-dim);color:var(--amber);border-radius:5px;font-size:10px;padding:1px 6px;font-weight:800;margin-left:6px}
.e-name .clustertag{color:var(--amber);font-size:11px;display:block;font-weight:600}
/* dispersion whisker */
.whisker{position:relative;height:22px}
.whisker .track{position:absolute;top:10px;left:0;right:0;height:2px;background:#22333b;border-radius:2px}
.whisker .range{position:absolute;top:8px;height:6px;background:#39525e;border-radius:3px}
.whisker .fc{position:absolute;top:3px;width:2px;height:16px;background:var(--amber)}
.whisker .act{position:absolute;top:1px;width:8px;height:8px;border-radius:50%;background:var(--teal);transform:translateX(-3px);border:2px solid var(--bg)}
.whisker .wlabel{position:absolute;top:-0px;font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.whisker .wide-warn{position:absolute;right:0;top:-4px;color:var(--amber);font-size:12px}
.num{font-variant-numeric:tabular-nums}
.e-act .shock{display:inline-block;margin-left:7px;font-size:11px;font-weight:800;border-radius:20px;padding:1px 8px;background:var(--panel);border:1px solid var(--line)}
.shock.hot{color:var(--red);border-color:var(--red-dim);background:var(--red-dim)}
.shock.warm{color:var(--amber);border-color:var(--amber-dim);background:var(--amber-dim)}
.shock.calm{color:var(--teal);border-color:var(--teal-dim);background:var(--teal-dim)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;background:var(--panel);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.chip.up2{color:var(--green);border-color:var(--green-dim)} .chip.up1{color:#7fe6ae}
.chip.dn2{color:var(--red);border-color:var(--red-dim)} .chip.dn1{color:#ff9c9c}
.chip.flat{color:var(--faint)}
.blackout-mark{color:var(--red);font-weight:800;font-size:11px}
.other-strip{margin-top:12px;color:var(--faint);font-size:12px}
.other-strip summary{cursor:pointer;color:var(--dim);font-weight:600}

/* ---------- inspector ---------- */
.inspector .empty{color:var(--dim);padding:24px 6px;text-align:center}
.insp-cluster{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.insp-cluster button{border:1px solid var(--line);border-radius:20px;padding:4px 11px;color:var(--dim);font-weight:600}
.insp-cluster button.active{color:var(--teal);border-color:var(--teal);background:var(--teal-dim)}
.insp h2{font-size:17px;margin:2px 0 4px;overflow-wrap:break-word}
.insp .meta{color:var(--dim);font-variant-numeric:tabular-nums;margin-bottom:10px}
.insp .meta .cd{color:var(--teal);font-weight:700}
.insp h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin:16px 0 7px}
.insp .why{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.insp .why ul{margin:6px 0 0;padding-left:17px;color:var(--dim)}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.numbers .nbox{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.numbers .nbox .k{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.numbers .nbox .v{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.branch{border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px;margin-bottom:7px;background:var(--panel2)}
.branch.fired{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.branch .blabel{font-weight:800}
.branch .firedtag{color:var(--teal);font-size:11px;font-weight:800;margin-left:7px}
.branch .moves{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;font-variant-numeric:tabular-nums}
.branch .hits{color:var(--faint);font-size:11px;margin-top:3px}
.liq,.crowdbox{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.liq .pool{display:flex;justify-content:space-between;padding:3px 0;font-variant-numeric:tabular-nums}
.crowdbar{height:10px;border-radius:6px;background:var(--red-dim);position:relative;overflow:hidden;margin:6px 0}
.crowdbar .long{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.verdict{border:1px solid var(--teal);background:linear-gradient(180deg,var(--teal-dim),transparent);border-radius:var(--radius);padding:11px 13px}
.verdict .vt{font-weight:800;color:var(--teal)}
.asset-tabs{display:flex;gap:6px;flex-wrap:wrap}
.asset-tabs button{border:1px solid var(--line);border-radius:8px;padding:4px 10px;color:var(--dim);font-weight:700}
.asset-tabs button.active{color:var(--teal);border-color:var(--teal)}

/* ---------- ask modal ---------- */
.ask-modal{position:fixed;inset:0;background:rgba(3,8,10,.7);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;z-index:60}
.ask-modal[hidden]{display:none}
.ask-box{width:min(620px,92vw);background:var(--panel);border:1px solid var(--teal);border-radius:12px;padding:14px}
.ask-box input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:10px 12px;font:inherit}
#askAnswer{margin-top:10px;color:var(--dim)}
#askAnswer .cite{color:var(--faint);font-size:11px}
#askAnswer b{color:var(--text)}

/* ---------- footer / misc ---------- */
.foot{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;color:var(--faint);font-size:11px;border-top:1px solid var(--line);flex-wrap:wrap}
.sheet-backdrop{display:none}
body.simple{--fs:14.5px}
body.simple .c-disp,body.simple .whisker{display:none}
body.simple .cal-head,body.simple .event-row{grid-template-columns:118px 14px minmax(150px,1.6fr) 62px 140px minmax(140px,1.2fr)}

/* ---------- mid band: stack before the grid can overflow ---------- */
@media (max-width:1400px){
  .layout{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:1250px){
  .layout{grid-template-columns:1fr}
  .inspector{position:static;border-left:none;border-top:1px solid var(--line);max-height:none}
}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .cal-head{display:none}
  .event-row{grid-template-columns:86px 12px 1fr;grid-template-rows:auto auto}
  .event-row .c-disp,.event-row .whisker,.event-row .c-prev,.event-row .e-prev{display:none}
  .event-row .e-act{grid-column:3}
  .event-row .chips{grid-column:3}
  .inspector{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:82vh;border-left:none;border-top:2px solid var(--teal);border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .25s;z-index:50}
  .inspector.open{transform:translateY(0)}
  .sheet-backdrop{display:block;position:fixed;inset:0;background:rgba(3,8,10,.6);opacity:0;pointer-events:none;transition:.25s;z-index:40}
  .sheet-backdrop.show{opacity:1;pointer-events:auto}
  .clocks{margin-left:0}
  .numbers{grid-template-columns:repeat(2,1fr)}
}