/* =============================================================================
   theme.css  ·  charting 4 natgas
   -----------------------------------------------------------------------------
   THIS SITE ONLY - its palette. Loads AFTER charting-network.css.
   Palette = the Digging 4 NatGas theme, so the two gas desks match.
   --faint is lifted from digging's #5E6E7D (3.5:1 on the panel) to #71828F
   (4.7:1), the same readability floor charting 4 gold applies to its own
   --faint, and still a clear step below --mute.

   The shared sheet carries no colour of its own: every tint it mixes comes
   from the variables below. The second block exists because CSS cannot pull
   channels out of a hex colour - rgba(var(--gold-rgb),.10) needs the triplet.
   A new sister desk changes THIS file and nothing else.
   ============================================================================= */

:root{
  --ink:#06090C; --panel:#0E141B; --panel2:#131B23;
  --border:rgba(46,127,194,.16); --border-soft:rgba(46,127,194,.09);
  --gold:#2E7FC2; --gold-hi:#5FB1EE; --gold-deep:#1C4E7E;
  --text:#E5EBF1; --mute:#8FA0B0; --faint:#71828F;
  --bear:#E4572E; --neutral:#83919E; --up:#57C97B;
  --gold-grad:linear-gradient(90deg,#1C4E7E,#2E7FC2,#5FB1EE);
  --bear-grad:linear-gradient(90deg,#7A2E18,#E4572E);
  --up-grad:linear-gradient(90deg,#2F9159,#57C97B,#8AE6AF);

  /* channel triplets for the alpha tints (accent glows, borders, scrims) */
  --gold-rgb:46,127,194; --gold-hi-rgb:95,177,238;
  --text-rgb:229,235,241; --mute-rgb:143,160,176; --ink-rgb:6,9,12;
  /* dark ink drawn ON an accent-filled surface (buttons, badges, active tabs) */
  --on-accent:#081826; --brand-ink:#0A1B2B;
  /* the quieter greys the mobile shell and promo cards use */
  --track:#1E2A36; --faint-deep:#4A5866; --text-soft:#BCC9D6; --text-hi:#EEF3F8;
  --link-soft:#85949F; --grab:#2E3B49;
  --m-nav:#0B1117; --m-sheet:#10171E; --m-hdr:#080D12;
  --sbar-bear-mid:#705858; --sbar-up-mid:#4E7D6D;
  /* accent-filled controls and the network promo card */
  --gold-btn:linear-gradient(180deg,#4F9EDD,#2670B0);
  --badge:#3C8FD0; --logo-grad:linear-gradient(180deg,#5FB1EE,#1C4E7E);
}

/* =============================================================================
   SITE WIDGET RULES - sessions panel (.ss-*) and session read (.amd-*)
   -----------------------------------------------------------------------------
   Carried over from charting 4 gold's theme.css (ported there from the retired
   style.css on 24 Aug 2026): the index loads only charting-network.css +
   theme.css, and these widgets' layout rules live at 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 var(--grab);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}

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