/* ---------- Storm Station 247: the developer console ----------
 *
 * Owner, Sep 29: "an amazing developer console. Think cloudflare or github
 * ... or even cdp ... search and graphs and charts and docs etc. Also the
 * visuals need to be well thought out."
 *
 * The site's own tokens (storm.css) carry the three themes; this file adds
 * only the console's layout and the chart series. The drafting language of
 * the rest of the site holds: hairline rules, no fills where a rule will do,
 * mono small capitals for the sheet labels, and one accent.
 */

/* THE SERIES, ONE HUE PER ROUTE, IN A FIXED ORDER (weather, station,
   network), and grey for anything else. Checked for lightness band, chroma,
   colour blind separation and contrast on each theme's own surface. */
:root{ --cx-s1:#1478c9; --cx-s2:#c2621a; --cx-s3:#138a74; --cx-s4:#8593a3;
       --cx-ok:#2f7d32; --cx-warn:#a15c00; --cx-bad:#c62828; --cx-side:#f1f4f8; --cx-hover:rgba(20,120,201,.07); }
html[data-theme="dark"]{ --cx-s1:#3f93d6; --cx-s2:#d0772b; --cx-s3:#1f9f86; --cx-s4:#6f7f93;
       --cx-ok:#7bc47f; --cx-warn:#f0b44c; --cx-bad:#f47a7a; --cx-side:#0d1726; --cx-hover:rgba(90,169,236,.09); }
html[data-theme="black"]{ --cx-s1:#3f93d6; --cx-s2:#d0772b; --cx-s3:#1f9f86; --cx-s4:#6a6a6a;
       --cx-ok:#7bc47f; --cx-warn:#f0b44c; --cx-bad:#f47a7a; --cx-side:#070707; --cx-hover:rgba(108,182,242,.08); }

.cx, .cx-dlg{ background:var(--snow); color:var(--ink); }
.cx *, .cx-dlg *{ box-sizing:border-box; }
.cx-shell{ display:grid; grid-template-columns:236px minmax(0,1fr); min-height:calc(100vh - 56px); border-bottom:1px solid var(--line);
  /* the rail's ground and rule run the full height of the console, past the sticky rail itself */
  background:linear-gradient(to right, var(--cx-side) 235px, var(--line) 235px, var(--line) 236px, transparent 236px); }
/* the site's weather sheet pads every section; the console's sections are panels */
.cx section, .cx-dlg section{ padding:0; }
.cx-body:focus{ outline:none; }
#cx-snip{ white-space:pre-wrap; overflow-wrap:anywhere; }
.cx-shell[hidden], .cx [hidden], .cx-dlg [hidden]{ display:none !important; }
.cx code, .cx .mono, .cx-dlg code{ font-family:var(--mono); }
.cx-num{ font-variant-numeric:tabular-nums; }

/* ── the side: the console's own map ─────────────────────────────────── */
.cx-side{ border-right:1px solid var(--line); background:var(--cx-side); padding:18px 12px 16px; display:flex; flex-direction:column; gap:14px; position:sticky; top:56px; align-self:start; height:calc(100vh - 56px); overflow-y:auto; }
.cx-brand{ display:flex; flex-direction:column; gap:2px; padding:2px 10px 10px; border-bottom:1px solid var(--line); }
.cx-brand b{ font-size:15px; letter-spacing:-.01em; }
.cx-brand span{ font:600 10.5px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.cx-nav{ display:flex; flex-direction:column; gap:1px; }
.cx-nav a{ display:flex; align-items:center; gap:10px; padding:8px 10px; color:var(--dim); text-decoration:none; font-size:14px; border-left:2px solid transparent; }
.cx-nav a svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cx-nav a:hover{ color:var(--ink); background:var(--cx-hover); }
.cx-nav a[aria-current="page"]{ color:var(--ink); border-left-color:var(--ice); background:var(--cx-hover); font-weight:600; }
.cx-nav a:focus-visible, .cx button:focus-visible, .cx-dlg button:focus-visible, .cx-dlg input:focus-visible, .cx input:focus-visible, .cx select:focus-visible, .cx a:focus-visible{ outline:2px solid var(--ice); outline-offset:2px; }
.cx-navh{ font:600 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); padding:10px 10px 6px; }
.cx-who{ margin-top:auto; border-top:1px solid var(--line); padding:12px 10px 0; display:flex; flex-direction:column; gap:6px; font-size:13px; min-width:0; }
.cx-who .e{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-who .f{ color:var(--faint); font-size:12px; }

/* ── the main column ─────────────────────────────────────────────────── */
.cx-main{ min-width:0; display:flex; flex-direction:column; }
.cx-top{ display:flex; align-items:center; gap:12px; padding:14px 28px; border-bottom:1px solid var(--line); background:var(--snow); position:sticky; top:56px; z-index:5; }
.cx-crumb{ font-size:13px; color:var(--faint); display:flex; gap:8px; align-items:center; min-width:0; }
.cx-crumb b{ color:var(--ink); font-weight:600; }
.cx-kbar{ margin-left:auto; display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 340px; padding:7px 10px; border:1px solid var(--line); background:var(--card); color:var(--faint); font:inherit; font-size:13px; cursor:pointer; text-align:left; }
.cx-kbar svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; flex:none; }
.cx-kbar span{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cx-kbar kbd, .cx-pal kbd{ font:500 11px/1 var(--mono); border:1px solid var(--line); padding:3px 5px; color:var(--dim); background:var(--snow); }
.cx-body{ padding:26px 28px 44px; display:flex; flex-direction:column; gap:22px; max-width:1240px; width:100%; }
.cx-h{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.cx-h h1{ margin:0; font-size:26px; font-weight:650; letter-spacing:-.02em; text-wrap:balance; }
.cx-h p{ margin:4px 0 0; color:var(--dim); font-size:14px; max-width:68ch; }
.cx-h p a, .cx-empty a, .cx-spec a:not(.cx-btn){ color:var(--ice-ink); }
.cx-h .cx-act{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cx-h .cx-act select{ width:auto; max-width:100%; }
.cx-sheet{ font:600 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* ── panels, tiles, tables ───────────────────────────────────────────── */
.cx-panel{ border:1px solid var(--line); background:var(--card); min-width:0; }
.cx-ph{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cx-ph h2{ margin:0; font-size:14px; font-weight:650; }
.cx-ph .cx-sheet{ margin-left:auto; }
.cx-pb{ padding:16px; }
.cx-grid2{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start; }
.cx-grid2.even{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.cx td.rt{ white-space:nowrap; }
.cx-panel table th[scope=row]{ white-space:nowrap; }
.cx-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); background:var(--card); }
.cx-tile{ padding:16px 18px 14px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:6px; min-width:0; }
.cx-tile:last-child{ border-right:0; }
.cx-tile .l{ font:600 10.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.cx-tile .v{ font-size:28px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.cx-tile .s{ font-size:12.5px; color:var(--dim); }
.cx-tabwrap{ overflow-x:auto; }
.cx table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.cx th{ text-align:left; font:600 10.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.cx td{ padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
.cx tbody tr:last-child td{ border-bottom:0; }
.cx tbody tr:hover td{ background:var(--cx-hover); }
.cx td.n, .cx th.n{ text-align:right; font-variant-numeric:tabular-nums; }
.cx td .sub{ display:block; color:var(--faint); font-size:12px; }
.cx-id{ font:12.5px var(--mono); color:var(--dim); }
.cx-sw{ display:inline-block; width:10px; height:10px; margin-right:7px; vertical-align:-1px; }

/* state as a pill: a word first, the colour beside it */
.cx-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; white-space:nowrap; color:var(--ink); }
.cx-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--faint); }
.cx-pill.ok::before{ background:var(--cx-ok); }
.cx-pill.warn::before{ background:var(--cx-warn); }
.cx-pill.bad::before{ background:var(--cx-bad); }
.cx-code{ font:12.5px var(--mono); padding:2px 6px; border:1px solid var(--line); background:var(--snow); }

/* ── controls ────────────────────────────────────────────────────────── */
.cx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-size:13.5px; font-weight:550; cursor:pointer; text-decoration:none; white-space:nowrap; }
.cx-btn:hover{ border-color:var(--dim); }
.cx-btn.pri{ background:var(--ice); border-color:var(--ice); color:#fff; }
html[data-theme="black"] .cx-btn.pri, html[data-theme="dark"] .cx-btn.pri{ color:#04111e; }
.cx-btn.pri:hover{ filter:brightness(1.08); }
.cx-btn.bad{ color:var(--cx-bad); }
.cx-btn.sm{ padding:5px 10px; font-size:12.5px; }
.cx-btn[disabled]{ opacity:.55; cursor:default; }
.cx-seg{ display:inline-flex; border:1px solid var(--line); }
.cx-seg button{ font:inherit; font-size:12.5px; padding:6px 11px; background:var(--card); color:var(--dim); border:0; border-right:1px solid var(--line); cursor:pointer; }
.cx-seg button:last-child{ border-right:0; }
.cx-seg button[aria-pressed="true"]{ color:var(--ink); background:var(--cx-hover); font-weight:600; box-shadow:inset 0 -2px 0 var(--ice); }
.cx-field{ display:flex; flex-direction:column; gap:6px; }
.cx-field label{ font-size:13px; font-weight:600; }
.cx-field .hint{ font-size:12px; color:var(--faint); }
.cx input[type=text], .cx input[type=email], .cx input[type=password], .cx input[type=search], .cx select, .cx-dlg input:not([type=checkbox]){ font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--line); background:var(--snow); color:var(--ink); min-width:0; width:100%; }
.cx input:focus, .cx select:focus, .cx-dlg input:focus{ border-color:var(--ice); outline:0; }
.cx-otp{ font:600 22px var(--mono) !important; letter-spacing:.35em; text-align:center; }
.cx-filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
.cx-filters input[type=search]{ flex:1 1 220px; width:auto; }
.cx-filters select{ width:auto; flex:0 0 auto; }
.cx-said{ font-size:13px; color:var(--dim); min-height:1.2em; }
.cx-said.bad{ color:var(--cx-bad); }
.cx-said.ok{ color:var(--cx-ok); }

/* ── charts ──────────────────────────────────────────────────────────── */
.cx-chart{ position:relative; }
.cx-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.cx-chart .grid{ stroke:var(--line); stroke-width:1; }
.cx-chart .base{ stroke:var(--dim); stroke-width:1; }
.cx-chart text{ fill:var(--faint); font:11px var(--mono); }
.cx-chart .hit{ fill:transparent; }
.cx-chart .hit:hover, .cx-chart .hit.on{ fill:var(--cx-hover); }
.cx-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--dim); }
.cx-legend span{ display:inline-flex; align-items:center; gap:7px; }
.cx-legend i{ width:10px; height:10px; display:inline-block; }
.cx-tip{ position:absolute; pointer-events:none; background:var(--card); border:1px solid var(--line); padding:8px 10px; font-size:12.5px; min-width:150px; box-shadow:var(--shadow); z-index:3; }
.cx-tip b{ display:block; margin-bottom:4px; font-size:12px; color:var(--faint); font-weight:600; }
.cx-tip div{ display:flex; justify-content:space-between; gap:14px; font-variant-numeric:tabular-nums; }
.cx-bars{ display:flex; flex-direction:column; gap:10px; }
.cx-bar{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; font-size:13px; }
.cx-bar .t{ grid-column:1 / -1; height:8px; background:var(--snow); border:1px solid var(--line); position:relative; }
.cx-bar .t i{ position:absolute; left:0; top:-1px; bottom:-1px; background:var(--ice); }
.cx-empty{ font-size:13px; color:var(--faint); }

/* ── code ────────────────────────────────────────────────────────────── */
.cx pre{ margin:0; padding:12px 14px; background:var(--snow); border:1px solid var(--line); overflow-x:auto; font:12.5px/1.55 var(--mono); color:var(--ink); }
.cx-codetabs{ display:flex; border-bottom:1px solid var(--line); }
.cx-codetabs button{ font:inherit; font-size:12.5px; background:none; border:0; padding:9px 14px; color:var(--dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.cx-codetabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--ice); font-weight:600; }

/* ── the door: signing in ────────────────────────────────────────────── */
.cx-door{ display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:0; max-width:1120px; margin:36px auto 56px; border:1px solid var(--line); background:var(--card); width:calc(100% - 2 * var(--gutter)); }
.cx-door > section{ padding:28px 30px; min-width:0; }
.cx-door .cx-in{ border-right:1px solid var(--line); display:flex; flex-direction:column; gap:16px; }
.cx-door h1{ margin:0; font-size:24px; letter-spacing:-.02em; }
.cx-door .lede{ margin:0; color:var(--dim); font-size:14px; }
.cx-door form{ display:flex; flex-direction:column; gap:14px; }
.cx-tabs{ display:flex; border-bottom:1px solid var(--line); }
.cx-tabs button{ flex:1; font:inherit; font-size:14px; padding:10px; background:none; border:0; color:var(--dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.cx-tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--ice); font-weight:600; }
.cx-or{ display:flex; align-items:center; gap:10px; color:var(--faint); font-size:12px; }
.cx-or::before, .cx-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.cx-spec{ display:flex; flex-direction:column; gap:0; }
.cx-spec h2{ margin:0 0 4px; font-size:15px; }
.cx-spec dl{ margin:14px 0 0; display:grid; grid-template-columns:max-content minmax(0,1fr); border-top:1px solid var(--line); }
.cx-spec dt, .cx-spec dd{ margin:0; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.cx-spec dt{ font:600 11px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-right:18px; }
.cx-spec dd{ color:var(--dim); }
.cx-spec .links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* ── the palette ─────────────────────────────────────────────────────── */
.cx-pal{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
.cx-pal[hidden]{ display:none; }
.cx-pal .box{ width:min(620px,100%); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column; max-height:70vh; color:var(--ink); }
.cx-pal input{ font:inherit; font-size:16px; padding:15px 16px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); outline:0; width:100%; }
.cx-pal ul{ list-style:none; margin:0; padding:6px 0; overflow-y:auto; }
.cx-pal li{ display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; font-size:14px; }
.cx-pal li .k{ font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); min-width:64px; }
.cx-pal li .d{ margin-left:auto; color:var(--faint); font-size:12.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:45%; }
.cx-pal li[aria-selected="true"]{ background:var(--cx-hover); box-shadow:inset 2px 0 0 var(--ice); }
.cx-pal .foot{ display:flex; gap:14px; padding:9px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--faint); }

/* ── dialogs ─────────────────────────────────────────────────────────── */
.cx-dlg{ border:1px solid var(--line); background:var(--card); color:var(--ink); padding:0; width:min(480px,calc(100vw - 32px)); }
.cx-dlg::backdrop{ background:rgba(0,0,0,.45); }
.cx-dlg form{ display:flex; flex-direction:column; gap:14px; padding:20px; }
.cx-dlg h2{ margin:0; font-size:17px; }
.cx-dlg .row{ display:flex; gap:8px; justify-content:flex-end; }
.cx-codes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; font:14px var(--mono); padding:12px 14px; border:1px solid var(--line); background:var(--snow); }
.cx-qr{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; }
.cx-qr svg{ width:176px; height:176px; background:#fff; border:1px solid var(--line); }
.cx-banner{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 16px; border:1px solid var(--line); border-left:2px solid var(--ice); background:var(--card); font-size:13.5px; }
.cx-banner .cx-act{ margin-left:auto; display:flex; gap:8px; }

/* ── docs ────────────────────────────────────────────────────────────── */
.cx-op{ border-bottom:1px solid var(--line); }
.cx-op:last-child{ border-bottom:0; }
.cx-op summary{ list-style:none; display:grid; grid-template-columns:52px minmax(0,290px) minmax(0,1fr); gap:12px; align-items:baseline; padding:11px 16px; cursor:pointer; }
.cx-op summary::-webkit-details-marker{ display:none; }
.cx-op summary:hover{ background:var(--cx-hover); }
.cx-op .m{ font:600 11px var(--mono); color:var(--cx-s3); }
.cx-op .p{ font:13px var(--mono); color:var(--ink); overflow-wrap:anywhere; }
.cx-op .s{ color:var(--dim); font-size:13px; }
.cx-op .in{ padding:4px 16px 16px 80px; display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--dim); }
.cx-op .in table{ font-size:13px; }
.cx-mark{ background:none; color:var(--ice-ink); font-weight:700; }

/* ── a word in the corner ────────────────────────────────────────────── */
.cx-toast{ position:fixed; right:20px; bottom:20px; z-index:70; background:var(--card); color:var(--ink); border:1px solid var(--line); border-left:2px solid var(--cx-ok); padding:11px 14px; font-size:13.5px; box-shadow:var(--shadow); max-width:min(380px,calc(100vw - 40px)); }
.cx-toast.bad{ border-left-color:var(--cx-bad); }
.cx-google .btn{ min-height:44px; }

/* ── the phone ───────────────────────────────────────────────────────── */
@media (max-width:980px){
  .cx-grid2, .cx-grid2.even{ grid-template-columns:minmax(0,1fr); }
  .cx-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cx-tile:nth-child(2){ border-right:0; }
  .cx-tile:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width:820px){
  .cx-shell{ grid-template-columns:minmax(0,1fr); background:none; }
  .cx-side{ position:static; height:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--line); padding:10px 0 0; gap:0; }
  .cx-brand{ display:none; }
  .cx-navh{ display:none; }
  .cx-nav{ flex-direction:row; overflow-x:auto; scrollbar-width:none; padding:0 8px; }
  .cx-nav::-webkit-scrollbar{ display:none; }
  .cx-nav a{ border-left:0; border-bottom:2px solid transparent; white-space:nowrap; padding:10px 12px; }
  .cx-nav a[aria-current="page"]{ border-bottom-color:var(--ice); background:none; }
  .cx-who{ display:none; }
  .cx-top{ position:static; padding:12px 16px; }
  .cx-kbar{ flex:1 1 auto; }
  .cx-kbar kbd{ display:none; }
  .cx-body{ padding:18px 16px 36px; gap:18px; }
  .cx-h h1{ font-size:22px; }
  .cx-h .cx-act{ margin-left:0; }
  .cx-door{ grid-template-columns:minmax(0,1fr); margin:16px auto 32px; width:calc(100% - 32px); }
  .cx-door .cx-in{ border-right:0; border-bottom:1px solid var(--line); }
  .cx-door > section{ padding:20px 18px; }
  .cx-op summary{ grid-template-columns:44px minmax(0,1fr); }
  .cx-op .s{ grid-column:2; }
  .cx-op .in{ padding-left:16px; }
  .cx-qr{ grid-template-columns:minmax(0,1fr); }
  .cx-tile .v{ font-size:23px; }
  .cx th, .cx td{ padding:9px 10px; }
}
@media (prefers-reduced-motion:reduce){ .cx *{ transition:none !important; animation:none !important; } }