/* =============================================================================
   theme.css  ·  charting 4 bitcoin
   -----------------------------------------------------------------------------
   THIS SITE ONLY - its palette. Loads AFTER charting-network.css.
   --faint was #6E6656 (3.26:1 on the panel, below the 4.5:1 readability floor);
   it is now #857D6A (4.53:1) and still a clear step below --mute.
   ============================================================================= */

:root{
  --ink:#0A0908; --panel:#161310; --panel2:#1D1915;
  --border:rgba(249,171,77,.16); --border-soft:rgba(249,171,77,.09);
  --gold:#F7931A; --gold-hi:#F9AB4D; --gold-deep:#B25F00;   /* bitcoin orange - the same accents as Digging 4 Bitcoin */
  --text:#EDE6D8;--up-rgb:87,201,123;--text-rgb:237,230,216;--gold-rgb:249,171,77; --mute:#9C927E; --faint:#857D6A;
  --bear:#E4572E; --neutral:#8A8577; --up:#57C97B;
  --gold-grad:linear-gradient(90deg,#B25F00,#F7931A,#F9AB4D);
  --bear-grad:linear-gradient(90deg,#7A2E18,#E4572E);
  --up-grad:linear-gradient(90deg,#2F9159,#57C97B,#8AE6AF);
}

/* =============================================================================
   SITE WIDGET RULES - sessions panel (.ss-*) and session read (.amd-*)
   -----------------------------------------------------------------------------
   Ported from the retired style.css on 24 Aug 2026: the rebuilt index loads
   only charting-network.css + theme.css, and these widgets' layout rules
   lived in style.css, which the page no longer links - so the two sidebar
   panels collapsed to inline text. The rules live here now, the site layer.
   ============================================================================= */
.ss-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ss-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-soft)}
.ss-row:last-child,.ss-row.ss-end{border-bottom:0;padding-bottom:0}
.ss-dot{width:8px;height:8px;border-radius:50%;background:var(--border-soft);flex-shrink:0}
.ss-on{background:var(--up,#5ec478);box-shadow:0 0 8px rgba(94,196,120,.5);animation:ssPulse 2s ease-in-out infinite}
.ss-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ss-main b{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--text)}
.ss-main span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.03em;color:var(--faint)}
.ss-chg{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;flex-shrink:0;display:inline-flex;align-items:baseline;gap:5px}
.ss-na{color:var(--faint);font-weight:400}
.ss-hl{display:block;margin-top:2px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--faint);letter-spacing:.03em}
.amd-step{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-soft)}
.amd-step:last-of-type,.amd-step.amd-end{border-bottom:0}
.amd-rail{flex:0 0 10px;display:flex;flex-direction:column;align-items:center;padding-top:5px}
.amd-pip{width:9px;height:9px;border-radius:50%;border:1px solid #3A362D;flex:0 0 auto}
.amd-ln{flex:1;width:1px;background:var(--border-soft);margin-top:3px;min-height:14px}
.amd-body{flex:1;min-width:0}
.amd-t{font-size:13px;color:var(--text)}
.amd-sess{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--faint);margin-left:8px;white-space:nowrap}

/* Build 201: the sister desks. The desktop switcher is back with Silver live and the three
   unbuilt desks shown dimmed rather than as dead links; a live sister in the mobile switcher is
   a link and must keep looking like the tile it replaces. */
.ms-opt.is-soon{opacity:.4;cursor:default}
.ms-opt.is-soon:hover{background:none;color:var(--mute)}
a.m-sw{text-decoration:none;color:inherit}

/* Build 206: the phone header stays on one row - a long price label (the gas desk's HENRY HUB ($/MMBTU))
   was wrapping the price box under the wordmark. Shared fix carried here because gold's network sheet is
   the original; the sister desks carry it in theirs. */
@media(max-width:640px){
  .hdr-in{flex-wrap:nowrap}
  .brand{min-width:0;flex:1 1 auto}
  .brand-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;padding-bottom:1px}   /* room for the g's descender: overflow:hidden with line-height 1 clipped it on iPhone */
  .hdr-right{flex:0 0 auto;gap:10px}
  .lbl{font-size:8.5px;letter-spacing:.06em;white-space:nowrap}
}

/* the plain-English key on the session panel */
.amd-key{margin:18px 0 4px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.amd-key summary{list-style:none;cursor:pointer;padding:10px 12px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);display:flex;align-items:center;justify-content:space-between;gap:10px}
.amd-key summary::-webkit-details-marker{display:none}
.amd-key summary::after{content:'\25BE';font-size:13px;color:var(--gold-hi);flex:0 0 auto;line-height:1}
.amd-key[open] summary::after{content:'\25B4'}
.amd-key[open] summary{border-bottom:1px solid var(--line)}
.amd-key summary:hover{color:var(--gold)}
.amd-key p{margin:0;padding:0 12px 10px;font-size:12.5px;line-height:1.6;color:var(--mute)}
.amd-key p b{color:var(--text);font-weight:600}

/* the session rows, as cards with room to breathe */
.amd-srow{padding:18px 0 20px;border-bottom:1px solid rgba(var(--text-rgb),.14)}
.amd-shead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.amd-facts{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 20px}
.amd-fact{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0;width:100%;box-sizing:border-box}
.amd-fl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.amd-fv{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;color:var(--text);letter-spacing:.01em;white-space:nowrap}
.amd-fv .amd-n{font-size:15px}
.amd-fs{font-size:12px;line-height:1.45;color:var(--mute)}
.amd-verd{font-size:13px;line-height:1.6;color:var(--mute);margin:0}   /* the sentence under a headline reads as body copy, like the rest of the panel */
.amd-vk{display:block;color:var(--gold);font-weight:700;font-size:15px;line-height:1.2;margin-bottom:8px}
.amd-why{margin-top:16px;padding:10px 13px;border-left:2px solid var(--gold-deep);background:rgba(var(--gold-rgb),.05);font-size:12.5px;line-height:1.55;color:var(--mute)}
.amd-why .amd-fl{display:block;color:var(--gold-hi);margin-bottom:4px}


/* today's cycle as a card: three steps, the read, the levels, what it means */
.amd-cyc{margin-top:0;padding-top:18px;border-top:1px solid rgba(var(--text-rgb),.14);display:flex;flex-direction:column;gap:16px}
.amd-cyc-k{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--faint)}
.amd-steps{display:grid;grid-template-columns:1fr;gap:8px;margin-top:2px}
.amd-cstep{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px 12px 16px;display:flex;align-items:center;gap:12px;min-width:0;box-sizing:border-box;width:100%}
.amd-cstep-n{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--faint);border:1px solid var(--line)}
.amd-cstep-t{min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.amd-cstep-t b{display:block;font-size:12.5px;color:var(--text);font-weight:600;line-height:1.15}
.amd-cstep-t i{display:block;font-style:normal;font-size:11px;color:var(--faint);line-height:1.35;margin-top:1px}
.amd-cstep-w{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.04em;color:var(--mute);line-height:1.3}
.amd-cstep.done .amd-cstep-n{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--text-hi)}
.amd-cstep.on{border-color:var(--gold)}.amd-cstep.on .amd-cstep-n{background:var(--gold);border-color:var(--gold);color:var(--ink)}.amd-cstep.on .amd-cstep-w{color:var(--gold-hi)}
.amd-cstep.wait{opacity:.6}.amd-cstep.skip{opacity:.6}.amd-cstep.skip .amd-cstep-w{text-decoration:line-through}
.amd-read{display:flex;flex-direction:column;gap:6px;padding:2px 0 0}
.amd-read b{font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;flex:0 0 auto}   /* the same face and size as the session verdicts (.amd-vk) - one voice for every headline in the panel */
.amd-read .amd-fs{flex:0 0 auto}
.amd-lvs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.amd-mean{font-size:12.5px;line-height:1.6;color:var(--mute);padding:2px 0 4px}
.amd-lv{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 13px;display:flex;flex-direction:column;gap:4px;min-width:0}
@media(max-width:520px){.amd-lvs{grid-template-columns:1fr}}

/* the folded session panel: a headline and a line of numbers by default, the rest on request */
.amd-sum{font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.6;color:var(--text);margin-top:12px}
.amd-sum .amd-n{font-size:11.5px}
.amd-more{margin-top:16px}   /* the same 12px the numbers line has above it, plus the pill's own 4px of visual weight */
.amd-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-hi);padding:6px 11px;border:1px solid rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.10);border-radius:999px;transition:.16s}
.amd-more summary:hover{background:rgba(var(--gold-rgb),.18)}
.amd-more summary::-webkit-details-marker{display:none}
.amd-more summary::after{content:'\25BE';font-size:11px;line-height:1}
.amd-more[open] summary::after{content:'\25B4'}
.amd-more[open] summary{margin-bottom:10px}
.amd-more .amd-facts{margin-bottom:12px}
.amd-more .amd-why{margin-top:0}
.amd-more .amd-steps{margin-bottom:12px}
.amd-more .amd-lvs{margin-bottom:12px}
.amd-srow{padding:16px 0 22px}   /* the pill's outline needs the same clearance to the divider below as it has above */
.amd-cyc{gap:14px}
.amd-read{padding:2px 0 0}

/* approaching levels */
.prox-sub{font-size:12px;line-height:1.5;color:var(--mute);margin:6px 0 18px}
.prox-key{margin:18px 0}
.prox-key summary{padding:9px 12px}
.prox{display:flex;flex-direction:column;gap:6px}
.prox-row{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.prox-row.prox-near{border-color:rgba(52,201,140,.55);background:rgba(52,201,140,.06)}
.prox-side{font-size:9px}.prox-up{color:#E05C50}.prox-dn{color:#5CC480}
.prox-name{font-size:13px;font-weight:600;color:var(--text);min-width:0}
.prox-name i{display:block;font-style:normal;font-weight:400;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.prox-name i .amd-n{color:var(--gold-hi);letter-spacing:0;text-transform:none;font-weight:400}
.prox-v{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text);white-space:nowrap}
.prox-badge{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid var(--line);color:var(--mute);white-space:nowrap}
.prox-near .prox-badge{color:#5CC480;border-color:rgba(52,201,140,.55)}
.prox-now{display:flex;align-items:center;gap:10px;padding:4px 12px;font-family:'IBM Plex Mono',monospace}
.prox-now span{font-size:12.5px;font-weight:600;color:var(--gold-hi)}
.prox-now i{font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.prox-now::before,.prox-now::after{content:'';flex:1;height:1px;background:var(--gold-deep);opacity:.6}
.prox-miss{font-size:11.5px;line-height:1.5;color:var(--faint);padding:0;margin-top:14px}
.prox-foot{font-size:11.5px;line-height:1.5;color:var(--faint);margin-top:18px}

/* the front page's takes list ends with the door to the rest */
.feed-more{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;margin-top:20px;padding:11px 14px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-hi);background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.4);border-radius:999px;cursor:pointer;transition:.16s}
.feed-more:hover{background:rgba(var(--gold-rgb),.16)}
.feed-more span{font-size:14px;line-height:1}

/* a link from a desk into the school - one style everywhere it appears */
.hub-link{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:4px 12px 12px;padding:10px 13px;border:1px solid rgba(52,201,140,.45);background:rgba(52,201,140,.07);border-radius:10px;color:#5CC480;font-size:12.5px;font-weight:600;text-decoration:none;transition:.16s}
.hub-link:hover{background:rgba(52,201,140,.14)}
.hub-link span{font-size:12px}
.hub-link i{display:block;width:100%;font-style:normal;font-weight:400;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* one rule for the space under a panel title: the same 20px the panel keeps above it */
#taProx > .eyebrow, #taLadder > .eyebrow, #taInd > .eyebrow{display:block;margin-bottom:20px}
.prox-sub{margin-top:0}
.ind-tfs{margin-top:0}
.amd-head{margin-bottom:2px}
.fw-more{padding-top:16px}

/* phone shell: the space under a panel title equals the space above it (20px), the same rule as the desktop sidebar */
body.m-on .panel > .eyebrow{display:block;margin-bottom:20px}
body.m-on .bias-head{margin-bottom:20px;padding-bottom:0}
body.m-on .latest-head{margin-bottom:20px}
body.m-on .feed-head{margin-bottom:20px}
body.m-on .m-all{margin-top:20px}

/* the COT explainer: room under the modal's title on desktop; a fold on the phone */
.cot-learn .modal-h{margin:0 40px 16px 0}
.cot-learn .cot-lp{margin-top:0}
.cot-key{margin:0 0 15px}
.cot-key .cot-lp{padding:0 12px;margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--mute)}
.cot-key .cot-lp:first-of-type{padding-top:10px}
.cot-key .cot-lp:last-of-type{padding-bottom:12px;margin-bottom:0}

/* phone: per-title adjustments to the 20px rhythm, at his eye */
body.m-on #taProx > .eyebrow, body.m-on #taLadder > .eyebrow{margin-bottom:15px}
body.m-on .panel > .eyebrow:has(+ .m-accs), body.m-on .panel > .eyebrow:has(+ .m-exp){margin-bottom:15px}
body.m-on .panel > .eyebrow:has(+ .an-grid){margin-bottom:0}
body.m-on .panel > .eyebrow + .an-grid{margin-top:10px}   /* the grid's own 14px top margin was the gap; 10 now */
body.m-on .latest-head{margin-bottom:25px}

/* desktop: five off the space under these titles */
body:not(.m-on) #taProx > .eyebrow, body:not(.m-on) #taLadder > .eyebrow{margin-bottom:15px}
body:not(.m-on) .panel > .eyebrow + .an-grid{margin-top:9px}
body:not(.m-on) .latest-head + .cot-rows{margin-top:7px}
body:not(.m-on) .tb-head{margin-bottom:19px}
body:not(.m-on) .feed-head{margin-bottom:17px}   /* five more under the takes list's title row on desktop */

/* the line between the header and the desk: visible on a desktop screen, not just implied */
body:not(.m-on) .hdr{border-bottom:0;box-shadow:0 12px 24px -16px rgba(0,0,0,.9)}
body:not(.m-on) .hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.6) 50%,rgba(var(--gold-rgb),0))}   /* the phone header's line: one pixel, the asset colour, fading to the edges */

/* the school link at the foot of a fold: real clearance from the box on every side */
.amd-key .hub-link{margin:6px 12px 0}
.amd-key:has(> .hub-link)[open]{padding-bottom:12px}

/* the line above the footer: the header's line, the other way up */
.seo{border-top:0;position:relative}
.seo::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.6) 50%,rgba(var(--gold-rgb),0))}
/* the day's headline event: a band across the top of the desk, above every panel - the site's own
   background under a soft wash of the asset's colour, with that colour as its border, so it belongs to
   the page rather than sitting on it.
   One size per line: the small label above the name, and the small things that are not the name (the
   desk's note, the impact, the cue) grouped together on the right. It opens the calendar's own modal. */
.topev{display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%;text-align:left;
  appearance:none;font:inherit;color:inherit;cursor:pointer;margin:0 0 20px;padding:12px 18px;border-radius:13px;   /* the gap below matches the 20px the page leaves above it */
  border:1px solid var(--border);   /* the same border every panel on the desk uses */
  background:linear-gradient(96deg,color-mix(in srgb, var(--gold) 16%, transparent),color-mix(in srgb, var(--gold) 5%, transparent) 58%,color-mix(in srgb, var(--gold) 2%, transparent)),var(--ink);
  background-clip:padding-box;   /* a background paints under a border by default, and this border is a
                                    translucent tint - the wash was showing through it and thickening the
                                    left edge. Clipped to the padding box the border reads as the panels' do. */
  transition:border-color .16s,background .16s,transform .16s}
.topev:hover{border-color:color-mix(in srgb, var(--gold) 42%, transparent);
  background:linear-gradient(96deg,color-mix(in srgb, var(--gold) 26%, transparent),color-mix(in srgb, var(--gold) 9%, transparent) 58%,color-mix(in srgb, var(--gold) 4%, transparent)),var(--ink);
  background-clip:padding-box}
.topev:active{transform:translateY(1px)}
.topev:focus-visible{outline:1px solid var(--gold-hi);outline-offset:3px}
.topev-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.topev-lead{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi)}
.topev-name{font-size:16px;font-weight:600;line-height:1.25;color:var(--text)}
.topev-r{display:flex;align-items:center;gap:14px;flex:0 1 auto;min-width:0}
.topev-note{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.03em;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topev-imp{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-hi);border:1px solid color-mix(in srgb, var(--gold) 50%, transparent);border-radius:999px;padding:4px 9px;white-space:nowrap;flex:0 0 auto}
.topev-cta{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);white-space:nowrap;flex:0 0 auto}
.topev-cta i{display:inline-flex;transition:transform .16s}
.topev:hover .topev-cta i{transform:translateX(3px)}
@media(max-width:860px){.topev-note{display:none}}   /* the note is in the modal a tap away; the name is not */
@media(max-width:760px){
  .topev{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px}
  .topev-name{font-size:15.5px}
  .topev-r{width:100%;justify-content:space-between}
}
@media(max-width:760px){.topev{margin-bottom:14px}}   /* match the 14px the phone wrap leaves above it */

/* the glossary folds in the indicators panel - the same fold as the levels panel's What is ATR */
.ind-key{margin:18px 0 0}
.ind-key.prox-key{margin:18px 0}
.ind-key + .fw-head{margin-top:23px}
.ind-key p{margin:0;padding:0 12px 10px;font-size:12.5px;line-height:1.6;color:var(--mute)}
.ind-key p:first-of-type{padding-top:10px}
.gl-t{color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em}

/* PHONE TAP TARGETS. A fold's closed state is a thing you hit with a thumb, and 33-35px is under what a
   finger reliably lands on. Five more top and bottom on every fold's summary - the sidebar's and the
   footer's alike - which leaves the type and the caret exactly where they were. It lives at the end of
   the LAST sheet the page loads, because the fold rules exist in both sheets and the later copy wins. */
@media(max-width:900px){
  .amd-key > summary,.prox-key summary,.ind-key summary{padding-top:14px;padding-bottom:14px}
  .m-about-h{padding-top:14px;padding-bottom:14px}
}

/* the ₿ glyph sits a touch high in Fraunces/Georgia - nudged so it centres in the badge like Au does */
.brand-au{font-size:19px;padding-bottom:1px}
.promo-logo-au{font-size:22px}

/* the phone header: "Charting 4 Bitcoin" is three characters longer than "Charting 4 Gold" and a six-figure
   price two digits wider than gold's, so at 390px the family's 17px wordmark and 16px price cannot share
   the row without one of them being clipped. Both step down a size here; nothing else in the row changes. */
@media(max-width:640px){
  .brand-name{font-size:15px}
  #priceVal{font-size:14px}
  #priceChg{font-size:10.5px}
  .hdr-in{gap:8px}
}