/* ---- THEMES -----------------------------------------------------------
     :root is the default DARK theme (amber phosphor). [data-theme="light"] and
     [data-theme="cryptowatch"] override the palette. --text is the foreground
     ink: in dark it equals the amber accent (monochrome terminal); the other
     themes break it apart (neutral text + amber as accent only). The --band-*
     vars are rgb TRIPLETS read by JS to build rgba() canvas fills (chart.js). */
  :root {
    color-scheme: dark;
    --bg:#000; --panel:#0a0a0a; --border:#1a1a1a; --grid:#161616;
    --amber:#F39000; --amber-hi:#FFA028; --white:#F6F3E8;
    --up:#A8FF60; --down:#FF6C60; --blue:#0B85DF; --cyan:#00A0A0;
    --yellow:#E0C010; --magenta:#FF73FD; --muted:#7C7C7C;
    --steel:#B9C0CA; --brand-red:#E23B2E;   /* logo: sword-grey dot, Albion red */
    --text:var(--amber);                     /* body ink == accent: amber phosphor */
    --header-bg:#050505; --bar-bg:#070707; --inset-bg:#000;
    --plaque-border:#2b2f36; --on-amber:#000;   /* text drawn ON an amber fill */
    --band-amber:243,144,0; --band-up:168,255,96; --band-down:255,108,96; --band-blue:11,133,223;
    --cursor:rgba(243,144,0,.45);
    --mono:"IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  }
  /* Light "parchment": amber on white is unreadable, so accents darken and the
     surfaces become warm paper. Keeps the mono/hairline terminal character. */
  [data-theme="light"] {
    color-scheme: light;
    --bg:#F4EFE3; --panel:#FBF7EC; --border:#D8CFBA; --grid:#E7DEC9;
    --amber:#9A5B00; --amber-hi:#B5660A; --white:#1C1A14;
    --up:#1E7A2E; --down:#C42B1C; --blue:#0A66B3; --cyan:#0A7C7C;
    --yellow:#8A6D00; --magenta:#9C2C97; --muted:#6F6757;
    --steel:#6B7280; --brand-red:#C42B1C;
    --text:#1C1A14;                          /* neutral ink, not amber */
    --header-bg:#EDE6D5; --bar-bg:#F0E9D8; --inset-bg:#FBF7EC;
    --plaque-border:#C9BFA6; --on-amber:#FBF7EC;
    --band-amber:154,91,0; --band-up:30,122,46; --band-down:196,43,28; --band-blue:10,102,179;
    --cursor:rgba(154,91,0,.5);
  }
  /* Kraken / Cryptowatch: near-black surfaces, visible #333 hairlines, brand
     amber #f9bf3b as ACCENT, neutral grey text, trading green/red. */
  [data-theme="cryptowatch"] {
    color-scheme: dark;
    --bg:#0d0d0d; --panel:#141414; --border:#333333; --grid:#262626;
    --amber:#f9bf3b; --amber-hi:#ffcd27; --white:#ededed;
    --up:#00aa40; --down:#e8093a; --blue:#00adef; --cyan:#00adef;
    --yellow:#f9bf3b; --magenta:#bd93f9; --muted:#999999;
    --steel:#aab2bd; --brand-red:#e8093a;
    --text:#ededed;                          /* neutral text; amber is accent only */
    --header-bg:#141414; --bar-bg:#1a1a1a; --inset-bg:#0d0d0d;
    --plaque-border:#333333; --on-amber:#0d0d0d;
    --band-amber:249,191,59; --band-up:0,170,64; --band-down:232,9,58; --band-blue:0,173,239;
    --cursor:rgba(249,191,59,.5);
  }
  * { box-sizing:border-box; }
  body { font-family:var(--mono); background:var(--bg); color:var(--text);
         margin:0; font-size:13px; line-height:1.4; }
  header { display:flex; align-items:baseline; gap:1.25rem; flex-wrap:wrap;
           padding:.55rem 1rem; border-bottom:1px solid var(--amber);
           background:var(--header-bg); position:sticky; top:0; z-index:6; }
  /* ---- brand: blocky wordmark in a black plaque, mirroring the Albion logo ----
     The logo is a FIXED brand asset — same black plaque, off-white ALBION, steel
     dot and Albion-red WTF in EVERY theme. Hardcoded (not theme vars) on purpose
     so it never recolours in light/kraken. */
  .brand { display:inline-flex; align-items:center; align-self:center; background:#000;
    border:1px solid #2b2f36; box-shadow:inset 0 0 0 1px #000, 0 0 0 1px #000;
    padding:.2rem .55rem; font-weight:800; font-size:15px; line-height:1;
    letter-spacing:.12em; white-space:nowrap; }
  .brand .b-name { color:#F6F3E8; }
  .brand .b-dot  { color:#B9C0CA; font-weight:900; margin:0 .03em;
    text-shadow:0 0 2px rgba(185,192,202,.55); }   /* polished-metal sheen */
  .brand .b-wtf  { color:#E23B2E; }
  /* ---- "vibecoded with claude" footnote next to the command line ---- */
  .vibe { align-self:center; color:var(--muted); font-size:10px; letter-spacing:.03em;
    white-space:nowrap; opacity:.75; user-select:none; }
  .vibe .sadge { display:inline-block; transform:rotate(180deg); margin-inline-start:.15rem;
    font-size:11px; vertical-align:middle; }
  /* ---- Bloomberg-style command line ---- */
  .cli { position:relative; display:flex; align-items:stretch; align-self:center; }
  .cli input { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em;
    color:var(--amber-hi); background:var(--inset-bg); border:1px solid var(--amber); border-right:none;
    padding:.2rem .55rem; width:24rem; max-width:60vw; text-transform:uppercase; outline:none; }
  .cli input::placeholder { color:var(--muted); text-transform:none; letter-spacing:.04em; font-weight:400; }
  .cli .go { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.04em;
    color:var(--on-amber); background:var(--amber); border:1px solid var(--amber); padding:0 .55rem; cursor:pointer; }
  .cli .go:hover { background:var(--amber-hi); }
  .cli.bad input { border-color:var(--down); color:var(--down); }
  .cli.bad .go { background:var(--down); border-color:var(--down); }
  .cli.ok  input { border-color:var(--up); }
  .cli.ok  .go { background:var(--up); border-color:var(--up); }
  .ac { position:absolute; top:calc(100% + 2px); left:0; z-index:30; min-width:26rem;
    background:var(--bar-bg); border:1px solid var(--amber); max-height:62vh; overflow:auto; }
  .ac[hidden] { display:none; }
  .ac .row { display:flex; gap:.7rem; align-items:baseline; padding:.24rem .55rem; cursor:pointer; }
  .ac .row .code { color:var(--amber-hi); font-weight:600; min-width:5rem; }
  .ac .row .desc { color:var(--white); font-size:11px; flex:1; }
  .ac .row .grp { color:var(--muted); font-size:10px; letter-spacing:.08em; min-width:4.5rem; text-align:right; }
  .ac .row.sel, .ac .row:hover { background:var(--amber); }
  .ac .row.sel .code, .ac .row.sel .desc, .ac .row.sel .grp,
  .ac .row:hover .code, .ac .row:hover .desc, .ac .row:hover .grp { color:var(--on-amber); }
  .ac .hint { color:var(--muted); font-size:10px; letter-spacing:.04em;
    padding:.28rem .55rem; border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--bar-bg); }
  /* ---- HELP / function overlay ---- */
  .overlay { position:fixed; inset:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent);
    display:flex; align-items:flex-start; justify-content:center; padding:4rem 1rem; }
  .overlay[hidden] { display:none; }
  .overlay .panel { background:var(--panel); border:1px solid var(--amber); width:100%; max-width:640px; max-height:80vh; overflow:auto; }
  .overlay .phead { display:flex; align-items:center; gap:.5rem; padding:.45rem .75rem;
    border-bottom:1px solid var(--amber); background:var(--header-bg); color:var(--amber-hi);
    font-weight:600; letter-spacing:.06em; position:sticky; top:0; }
  .overlay .phead .x { margin-inline-start:auto; cursor:pointer; color:var(--muted); padding:0 .2rem; }
  .overlay .phead .x:hover { color:var(--down); }
  .overlay .pbody { padding:.4rem .2rem .7rem; }
  .overlay .grp-title { color:var(--muted); font-size:10px; letter-spacing:.14em; padding:.55rem .75rem .15rem; }
  .overlay .fn { display:flex; gap:.8rem; align-items:baseline; padding:.22rem .75rem; cursor:pointer; }
  .overlay .fn:hover { background:var(--border); }
  .overlay .fn .code { color:var(--amber-hi); font-weight:600; min-width:7rem; }
  .overlay .fn .desc { color:var(--white); font-size:11px; }
  .meta { color:var(--muted); font-size:11px; letter-spacing:.04em; margin-inline-start:auto; }
  #utc-clock { color:var(--amber-hi); font-weight:600; }
  /* ---- language selector (flag dropdown) ---- */
  .menu.lang { vertical-align:middle; margin-right:.35rem; }
  .lang-btn { font-family:var(--mono); font-size:14px; line-height:1; background:transparent;
    border:1px solid var(--border); padding:.16rem .4rem; cursor:pointer; }
  .lang-btn:hover, .lang-btn.open { border-color:var(--amber); }
  .lang-pop { right:0; left:auto; min-width:11rem; max-height:70vh; overflow:auto; }
  .lang-pop .menu-item .fl { width:1.4rem; font-size:14px; }
  .lang-pop .menu-item .nm { color:var(--white); }
  .lang-pop .menu-item.on .nm { color:var(--amber-hi); font-weight:600; }
  /* ---- fullscreen toggle ---- */
  .fs-btn { font-family:var(--mono); font-size:14px; line-height:1; background:transparent;
    border:1px solid var(--border); padding:.16rem .4rem; cursor:pointer; color:var(--text);
    vertical-align:middle; margin-right:.35rem; }
  .fs-btn:hover, .fs-btn.active { border-color:var(--amber); color:var(--amber-hi); }
  /* ---- theme toggle (single button; one press cycles dark -> light -> kraken) ---- */
  .theme-btn { font-family:var(--mono); font-size:14px; line-height:1; background:transparent;
    border:1px solid var(--border); padding:.16rem .4rem; cursor:pointer; color:var(--text);
    vertical-align:middle; margin-right:.35rem; }
  .theme-btn:hover { border-color:var(--amber); color:var(--amber-hi); }
  .login { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.06em;
    color:var(--text); background:transparent; border:1px solid var(--border);
    padding:.18rem .5rem; cursor:pointer; text-transform:uppercase; }
  .login:hover:not(:disabled) { border-color:var(--amber); color:var(--amber-hi); }
  .login:disabled { color:var(--muted); cursor:default; }
  .bar { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
         padding:.45rem 1rem; border-bottom:1px solid var(--border); background:var(--bar-bg); }
  .bar[hidden] { display:none; }   /* [hidden]'s display:none is otherwise overridden by .bar's display:flex */
  .bar .lbl { color:var(--muted); font-size:11px; letter-spacing:.1em; margin-right:.3rem; min-width:4.5rem; }
  .bar button, .bar input, .bar select {
    font-family:var(--mono); font-size:12px; color:var(--text);
    background:transparent; border:1px solid var(--border); padding:.2rem .55rem; cursor:pointer; }
  .bar button:hover, .bar select:hover { border-color:var(--amber); }
  .bar button.active { background:var(--amber); color:var(--on-amber); border-color:var(--amber); font-weight:600; }
  .bar select option { background:var(--bar-bg); color:var(--text); }
  /* ---- studies: dropdown menu + on-demand active chips ---- */
  .menu { position:relative; display:inline-flex; }
  .menu-btn::after { content:" ▾"; color:var(--muted); }
  .menu-btn.open::after { color:var(--amber); }
  .menu-pop { position:absolute; top:calc(100% + 3px); left:0; z-index:20; min-width:16rem;
    background:var(--bar-bg); border:1px solid var(--amber); }
  .menu-pop[hidden] { display:none; }
  .menu-grp { color:var(--muted); font-size:10px; letter-spacing:.14em; padding:.45rem .6rem .15rem; }
  .menu-grp:first-child { padding-top:.3rem; }
  .menu-item { display:flex; align-items:center; gap:.55rem; padding:.3rem .6rem; cursor:pointer; font-size:12px; }
  .menu-item:hover { background:var(--border); }
  .menu-item .mk { width:.9rem; color:var(--up); }
  .menu-item .nm { color:var(--white); }
  .menu-item.on .nm { color:var(--amber-hi); font-weight:600; }
  .menu-item .sw { width:9px; height:9px; display:inline-block; background:var(--c); margin-inline-start:auto; }
  #study-chips { display:contents; }
  .chip { display:inline-flex; align-items:center; gap:.4rem; font-size:11px; font-weight:600;
    border:1px solid var(--c); color:var(--c); padding:.16rem .15rem .16rem .45rem; }
  .chip .dot { width:8px; height:8px; background:var(--c); display:inline-block; }
  .chip .x { cursor:pointer; color:var(--muted); padding:0 .3rem; font-weight:400; }
  .chip .x:hover { color:var(--down); }
  .tfcustom { display:none; align-items:center; gap:.35rem; margin-left:.3rem; color:var(--muted); font-size:11px; }
  .tfcustom.show { display:inline-flex; }
  .tfcustom input { color:var(--white); }
  /* dark themes only: tint the native picker glyph bright. In light mode the
     native color-scheme:light glyph is already correct, so leave it untinted. */
  html:not([data-theme]) .tfcustom input::-webkit-calendar-picker-indicator,
  [data-theme="dark"] .tfcustom input::-webkit-calendar-picker-indicator,
  [data-theme="cryptowatch"] .tfcustom input::-webkit-calendar-picker-indicator {
    filter:invert(.7) sepia(1) hue-rotate(5deg) saturate(4); }
  main { max-width:1280px; margin:0 auto; padding:1rem; }
  .rgroup { margin-bottom:1.1rem; }
  .rtitle { display:flex; align-items:center; gap:.6rem; padding:.35rem .2rem .45rem;
            font-size:12px; letter-spacing:.06em; color:var(--text); font-weight:600; }
  .rtitle .tag { width:9px; height:9px; background:var(--c,var(--amber)); display:inline-block; }
  .cells { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:.5rem; }
  .cell { background:var(--panel); border:1px solid var(--border); }
  .chead { display:flex; align-items:center; gap:.5rem; padding:.3rem .6rem;
           border-bottom:1px solid var(--border); background:var(--bar-bg); font-size:11px; }
  .chead .rng { color:var(--amber-hi); font-weight:600; }
  .chead .right { margin-inline-start:auto; display:flex; gap:.7rem; align-items:baseline; }
  .chead .last { color:var(--white); } .chead .last b { color:var(--amber-hi); }
  .chead .chg.up { color:var(--up); } .chead .chg.down { color:var(--down); }
  .chead .asof { color:var(--muted); font-size:10px; letter-spacing:.04em; }
  .chead .fresh { font-size:10px; font-weight:600; letter-spacing:.06em; }
  .chead .fresh.live   { color:var(--up); }
  .chead .fresh.stale  { color:var(--yellow); }
  .chead .fresh.vstale { color:var(--down); }
  .chead .fresh.nd     { color:var(--muted); }
  .nodata { color:var(--muted); text-align:center; padding:2.4rem 1rem; font-size:12px; letter-spacing:.12em; }
  .chart { width:100%; padding:.3rem .25rem .15rem; }
  .subpane { border-top:1px solid var(--border); }
  .subpane .subhead { color:var(--muted); font-size:10px; letter-spacing:.08em; padding:.3rem .6rem 0; }
  .empty { color:var(--muted); padding:1.5rem; text-align:center; font-size:12px; }
  .u-legend { color:var(--white); font:11px var(--mono); }
  .u-legend .u-label { color:var(--amber); }
  .u-cursor-x, .u-cursor-y { border-color:var(--cursor) !important; }
  a { color:var(--blue); text-decoration:none; }
  /* ---- BIG / focus mode: hide the control bars; charts fill the viewport ----
     Toggled by the BIG command (sets .big on <html>). Only the top console
     (header + command line) stays; the cell grid drops to one full-width column
     and JS uses taller pane heights (chart.js priceHeight/subHeight/cmpHeight). */
  html.big .bar { display:none !important; }
  html.big main { max-width:none; padding:.4rem .5rem; }
  html.big .cells { grid-template-columns:1fr; }