/* ══════════════════════════════════════════════════════════════════
   app.css — Happy Light Observer.

   The suite's warm-ink tokens, so theme.js's [data-theme] switch drives
   this page as it drives Battle, Maths and Journal. Dark is the bare
   :root; light overrides only what changes. theme.js stamps data-theme
   before first paint.

   Chart series colours are the data-viz reference palette, each mode its
   own validated steps (light: slots 3-4 sit under 3:1 on the surface, so
   every chart has a table view and a legend).

   CSP is style-src 'self': no style attributes in markup; scripts only
   touch styles through the CSSOM.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0a0d; --bg-2:#16131a;
  --panel:rgba(29,25,34,.86); --panel-solid:#1d1922;
  --line:rgba(184,175,164,.20); --line-hot:rgba(245,158,11,.45);
  --ink:#f5f1ea; --ink-dim:#b8afa4; --ink-faint:#8d8479;
  --brand:#f59e0b;
  --ok:#4ee8a5; --warn:#fbbf24; --bad:#f87171;
  --surf:rgba(43,37,51,.72);
  --shadow:4px 4px 0 rgba(0,0,0,.45);
  --grid:rgba(184,175,164,.14);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  /* map: the blue ramp, near-zero receding into the dark surface */
  --q1:#184f95; --q2:#1c5cab; --q3:#2a78d6; --q4:#5598e7; --q5:#9ec5f4;
  --map-land:rgba(184,175,164,.13); --map-edge:#1d1922;
  --logo-glow:1; --logo-glow-color:#f59e0b; --logo-bulb:#d9a441;
  --logo-glass-hi:#fffdf6; --logo-glass-lo:#f8e3b6; --logo-face:#8a6a3b;
  --font:"Inter Variable","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:12px;
}
:root[data-theme="light"]{
  --bg:#faf8f4; --bg-2:#f1ece2;
  --panel:rgba(255,253,247,.94); --panel-solid:#fffdf7;
  --line:rgba(90,74,54,.22); --line-hot:rgba(180,83,9,.42);
  --ink:#241f18; --ink-dim:#5b5145; --ink-faint:#6f6457;
  --brand:#b45309;
  --ok:#047857; --warn:#8c6510; --bad:#b91c1c;
  --surf:rgba(241,236,226,.80);
  --shadow:4px 4px 0 rgba(90,74,54,.18);
  --grid:rgba(90,74,54,.14);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#6250d6; --s8:#e34948;
  --q1:#b7d3f6; --q2:#86b6ef; --q3:#5598e7; --q4:#256abf; --q5:#104281;
  --map-land:rgba(90,74,54,.10); --map-edge:#fffdf7;
  --logo-glow:0; --logo-bulb:#a86f18;
  --logo-glass-hi:#fffaec; --logo-glass-lo:#f2d79c; --logo-face:#6b4d22;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
h1,h2{line-height:1.15;margin:0}
.dim{color:var(--ink-dim)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--panel-solid);padding:.5rem 1rem;border-radius:8px}
.wrap{max-width:80rem;margin:0 auto;padding:0 1rem 3rem}
main:focus{outline:none}

/* ── top bar ── */
.ob-bar{display:flex;align-items:center;gap:1rem;max-width:80rem;margin:0 auto;padding:.85rem 1rem;flex-wrap:wrap}
.ob-home{text-decoration:none;color:inherit;margin-right:auto}
.wordmark{font-weight:700;line-height:1;display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;font-size:1.05rem}
.wordmark .hl-lockup{height:2em;width:auto;display:inline-block;color:var(--ink);flex:none}
.wm-b{color:var(--brand);font-size:max(.62rem,.16em);font-weight:800;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;line-height:1}

/* ── controls ── */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surf)}
.seg button{appearance:none;background:none;border:0;color:var(--ink-dim);font:inherit;font-size:.82rem;
  padding:.38rem .75rem;cursor:pointer;min-height:2rem}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"],.seg button.on{background:var(--brand);color:#1a1206;font-weight:700}
:root[data-theme="light"] .seg button[aria-pressed="true"],:root[data-theme="light"] .seg button.on{color:#fff}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:.9rem;font-weight:600;
  cursor:pointer;text-decoration:none;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surf);color:var(--ink)}
.btn:hover{border-color:var(--line-hot)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#1a1206}
:root[data-theme="light"] .btn.primary{color:#fff}

.hl-menu{position:relative}
.hl-menu-summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;
  border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;color:var(--ink-dim);font-size:.85rem;background:var(--surf)}
.hl-menu-summary::-webkit-details-marker{display:none}
.hl-menu-summary:hover{border-color:var(--line-hot);color:var(--ink)}
.hl-menu-bars{width:.85rem;height:.7rem;flex:none;position:relative;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.hl-menu-bars::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);border-top:2px solid currentColor}
.hl-menu-panel{position:absolute;right:0;top:calc(100% + .35rem);z-index:60;min-width:14rem;display:flex;flex-direction:column;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:.35rem}
.hl-menu-head{margin:.45rem .55rem .2rem;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.hl-menu-item{appearance:none;background:none;border:0;cursor:pointer;font:inherit;font-size:.9rem;text-align:left;
  color:var(--ink);text-decoration:none;padding:.45rem .55rem;border-radius:6px}
.hl-menu-item:hover{background:var(--line)}
.hl-menu-seg{margin:.15rem .55rem .3rem;align-self:flex-start}

/* ── layout ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.1rem;margin-top:1rem;min-width:0}
.card-h{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem}
.card-h h2{font-size:1.05rem}
.card-h p{margin:0;font-size:.85rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr));gap:0 1rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.75rem;margin-top:.5rem}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem}
.tile-l{font-size:.8rem;color:var(--ink-dim)}
.tile-v{font-size:1.6rem;font-weight:650;letter-spacing:-.02em;line-height:1.2;margin-top:.15rem;font-variant-numeric:proportional-nums}
.tile-s{font-size:.75rem;color:var(--ink-faint);margin-top:.2rem}
.banner{border-radius:10px;padding:.65rem .9rem;margin-top:.75rem;border:1px solid;font-size:.9rem}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.banner.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pill{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.1rem .5rem;border-radius:999px;border:1px solid var(--line);margin-left:.4rem;vertical-align:middle;white-space:nowrap}
.pill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.pill.ok::before{content:"● "}
.pill.bad::before{content:"▲ "}
.foot{font-size:.8rem;margin-top:1.25rem}
.empty{margin:.5rem 0}
.loading{margin-top:3rem;text-align:center}
.gate{max-width:34rem;margin:4rem auto 0;text-align:center}
.gate h1{font-size:1.5rem;margin-bottom:.5rem}
.gate-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.crumbs{margin-top:.5rem;font-size:.9rem}
.crumbs a{text-decoration:none}
.svc-head{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .5rem;margin-top:.5rem}
.svc-head h1{font-size:1.6rem}
.svc-head .svc-hosts{flex-basis:100%;display:flex;gap:.75rem;flex-wrap:wrap;font-size:.9rem}

/* ── tables ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--grid);vertical-align:middle}
th{font-size:.75rem;font-weight:600;color:var(--ink-dim);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.sort{appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0}
th[aria-sort="ascending"] .sort::after{content:" ↑"}
th[aria-sort="descending"] .sort::after{content:" ↓"}
.svc-name{font-weight:600;text-decoration:none;color:var(--ink)}
.svc-name:hover{color:var(--brand)}
.svc-hosts{font-size:.75rem;color:var(--ink-faint)}
tr.down .svc-name{color:var(--ink-dim)}

/* ── popularity bars ── */
.seg + .bars,.card > .seg{margin-bottom:.75rem}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.bars li{display:grid;grid-template-columns:minmax(8rem,14rem) 1fr 4rem;align-items:center;gap:.75rem;font-size:.88rem;padding:.15rem 0}
.bar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
a.bar-name:hover{color:var(--brand)}
.bar-track{height:16px;display:block}
.bar-fill{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0;max-width:100%}
.bar-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-dim)}
@media (max-width:560px){
  .bars li{grid-template-columns:1fr 3.5rem;row-gap:.15rem}
  .bar-track{grid-column:1 / -1;grid-row:2}
  .hl-menu-word{display:none}
  .ob-bar{gap:.6rem}
  #range{order:3;width:100%;justify-content:space-between}
  #range button{flex:1}
}

/* ── charts ── */
.viz-box{position:relative;min-height:200px}
.viz{display:block;overflow:visible}
.viz-grid{stroke:var(--grid);stroke-width:1;shape-rendering:crispEdges}
.viz-tick{fill:var(--ink-faint);font-size:11px;font-variant-numeric:tabular-nums}
.viz-empty{fill:var(--ink-faint);font-size:13px}
.viz-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz-area{stroke:none;opacity:.12}
.viz-dot{stroke:var(--panel-solid);stroke-width:2}
.viz-cross{stroke:var(--ink-faint);stroke-width:1}
.viz-band{fill:color-mix(in srgb,var(--ink) 7%,transparent)}
.viz-line.s1{stroke:var(--s1)} .viz-area.s1,.viz-dot.s1,.viz-col.s1,.viz-key.s1{fill:var(--s1);background:var(--s1)}
.viz-col.s2,.viz-key.s2{fill:var(--s2);background:var(--s2)}
.viz-col.s3,.viz-key.s3{fill:var(--s3);background:var(--s3)}
.viz-col.s4,.viz-key.s4{fill:var(--s4);background:var(--s4)}
.viz-line.s2{stroke:var(--s2)} .viz-line.s3{stroke:var(--s3)} .viz-line.s4{stroke:var(--s4)}
.viz-line.s5{stroke:var(--s5)} .viz-line.s6{stroke:var(--s6)} .viz-line.s7{stroke:var(--s7)} .viz-line.s8{stroke:var(--s8)}
.viz-line.other{stroke:var(--ink-faint);stroke-dasharray:4 3}
.viz-dot.s2,.viz-col.s2{fill:var(--s2)} .viz-dot.s3{fill:var(--s3)} .viz-dot.s4{fill:var(--s4)}
.viz-col.s5,.viz-dot.s5,.viz-key.s5{fill:var(--s5);background:var(--s5)}
.viz-col.s6,.viz-dot.s6,.viz-key.s6{fill:var(--s6);background:var(--s6)}
.viz-col.s7,.viz-dot.s7,.viz-key.s7{fill:var(--s7);background:var(--s7)}
.viz-col.s8,.viz-dot.s8,.viz-key.s8{fill:var(--s8);background:var(--s8)}
.viz-col.other,.viz-dot.other,.viz-key.other{fill:var(--ink-faint);background:var(--ink-faint)}
.viz-label{fill:var(--ink-dim);font-size:11px}
/* percentiles: one ramp, the slower tail the stronger step */
.viz-line.q3{stroke:var(--q3)} .viz-line.q4{stroke:var(--q4)} .viz-line.q5{stroke:var(--q5)}
.viz-dot.q3{fill:var(--q3)} .viz-dot.q4{fill:var(--q4)} .viz-dot.q5{fill:var(--q5)}
.viz-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}

/* ── map ── */
.viz.map{height:auto;max-height:34rem;overflow:hidden}
.map-c{fill:var(--map-land);stroke:var(--map-edge);stroke-width:.6;vector-effect:non-scaling-stroke}
.map-c:hover{stroke:var(--ink);stroke-width:1.2}
.map-c.q1,.viz-key.q1{fill:var(--q1);background:var(--q1)}
.map-c.q2,.viz-key.q2{fill:var(--q2);background:var(--q2)}
.map-c.q3,.viz-key.q3{fill:var(--q3);background:var(--q3)}
.map-c.q4,.viz-key.q4{fill:var(--q4);background:var(--q4)}
.map-c.q5,.viz-key.q5{fill:var(--q5);background:var(--q5)}
.map-dot{fill:var(--s2);fill-opacity:.85;stroke:var(--panel-solid);stroke-width:1.5;vector-effect:non-scaling-stroke}
.map-dot:hover{fill-opacity:1;stroke:var(--ink)}
.map-dot-key{background:var(--s2);border-radius:50%}
.map-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.8rem;color:var(--ink-dim);margin-bottom:.5rem}
.map-legend > span{display:inline-flex;align-items:center;gap:.4rem;font-variant-numeric:tabular-nums}
.geo-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:0 1rem;margin-top:.75rem}
.geo-tables h3{font-size:.85rem;margin:.25rem 0 .35rem;color:var(--ink-dim);font-weight:600}
.geo-tables .table-wrap{max-height:22rem;overflow:auto}
select.pick{appearance:none;font:inherit;font-size:.82rem;color:var(--ink);background:var(--surf);border:1px solid var(--line);
  border-radius:999px;padding:.38rem 2rem .38rem .8rem;min-height:2rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-position:right 1rem center,right .7rem center;background-size:.3rem .3rem;background-repeat:no-repeat}
.viz-tip{position:absolute;z-index:5;pointer-events:none;background:var(--panel-solid);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--shadow);padding:.45rem .6rem;font-size:.8rem;min-width:9rem}
.viz-tip-t{color:var(--ink-dim);margin-bottom:.2rem}
.viz-tip-r{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.45rem}
.viz-tip-r b{font-variant-numeric:tabular-nums;font-weight:600}
.viz-key{display:inline-block;width:10px;height:10px;border-radius:3px}
.viz-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.8rem;color:var(--ink-dim);margin:-.25rem 0 .5rem}
.viz-legend > span{display:inline-flex;align-items:center;gap:.4rem}
.viz-table{margin-top:.4rem;font-size:.8rem}
.viz-table summary{cursor:pointer;color:var(--ink-faint)}
.viz-table-wrap{max-height:16rem;overflow:auto;margin-top:.35rem}
.spark{display:block}
.spark-line{fill:none;stroke:var(--s1);stroke-width:1.5;stroke-linejoin:round}
@media (forced-colors:active){
  .viz-col,.bar-fill,.map-c,.map-dot{forced-color-adjust:none}
}

/* the front end / back end switch, above everything it filters */
.page-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:.75rem 0 .25rem}
.page-tools > .btn{margin-left:auto}
.split-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.small{font-size:.8rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;word-break:break-all}
.mono .dim{display:block;font-size:.72rem}
.mono .pill{margin-left:.4em;font-family:inherit}
.mono.from{display:inline-block;max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;word-break:normal}
.card > h3{font-size:.85rem;margin:1rem 0 .4rem;color:var(--ink-dim);font-weight:600}

/* ── view tabs ── */
.tabs{max-width:80rem;margin:0 auto;padding:0 1rem;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:thin;
  border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
.tab{appearance:none;background:none;border:0;font:inherit;font-size:.9rem;color:var(--ink-dim);text-decoration:none;cursor:pointer;
  white-space:nowrap;padding:.55rem .8rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab[aria-current="page"]{color:var(--ink);font-weight:650;border-bottom-color:var(--brand)}
.tab-staging::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--warn);margin-right:.4rem;vertical-align:.08em}
.tab-new{color:var(--brand);margin-left:auto}
.tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:4px}

/* ── dashboard grid: six columns; a panel spans 2, 3, 4 or 6 ── */
.dash{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-top:1rem;align-items:start}
.panel{grid-column:span 6;min-width:0;position:relative}
.panel.span-2{grid-column:span 2}
.panel.span-3{grid-column:span 3}
.panel.span-4{grid-column:span 4}
.panel .card{margin-top:0}
.panel .tiles{margin-top:0}
@media (max-width:1100px){
  .panel.span-2,.panel.span-4{grid-column:span 3}
}
@media (max-width:760px){
  .panel.span-2,.panel.span-3,.panel.span-4{grid-column:span 6}
}
.empty-view{text-align:center}

/* ── customizing ── */
.edit-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin:.75rem 0 .25rem;padding:.6rem .75rem;
  border:1px dashed var(--line-hot);border-radius:var(--r);background:var(--surf)}
.edit-bar label{display:inline-flex;align-items:center;gap:.35rem}
.edit-bar #save-state{flex:1 1 8rem;text-align:right}
.name-in,.num-in{font:inherit;font-size:.9rem;color:var(--ink);background:var(--panel-solid);border:1px solid var(--line);border-radius:8px;padding:.35rem .6rem;min-height:2rem}
.name-in{min-width:12rem;font-weight:650}
.num-in{width:4.5rem}
.name-in:focus-visible,.num-in:focus-visible,select.pick:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.btn.small-btn{font-size:.82rem;padding:.35rem .8rem;min-height:2rem}
.btn.danger,.icon.danger{color:var(--bad)}
.btn[disabled]{opacity:.5;cursor:default}
.icon{appearance:none;background:var(--surf);border:1px solid var(--line);color:var(--ink-dim);font:inherit;font-size:.85rem;line-height:1;
  min-width:2rem;min-height:2rem;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.icon:hover:not([disabled]){color:var(--ink);border-color:var(--line-hot)}
.icon[disabled]{opacity:.35;cursor:default}
.icon[aria-expanded="true"]{color:var(--brand);border-color:var(--line-hot)}
.small-pick{font-size:.78rem;padding:.25rem 1.8rem .25rem .6rem}
.dash.editing .panel{outline:1px dashed var(--line-hot);outline-offset:4px;border-radius:var(--r)}
.panel-bar{display:flex;align-items:center;gap:.35rem;margin-bottom:.4rem;flex-wrap:wrap}
.panel-grip{cursor:grab;color:var(--ink-faint);font-size:1.1rem;padding:0 .25rem;user-select:none}
.panel-name{font-size:.8rem;font-weight:650;color:var(--ink-dim);margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 4rem}
.panel-settings{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;font-size:.82rem;color:var(--ink-dim);
  margin-bottom:.5rem;padding:.5rem .6rem;background:var(--surf);border:1px solid var(--line);border-radius:10px}
.panel-settings label{display:inline-flex;align-items:center;gap:.35rem}
.panel.dragging{opacity:.45}
.panel.drop-before{box-shadow:-4px 0 0 var(--brand)}
.panel.drop-after{box-shadow:4px 0 0 var(--brand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── dialogs ── */
.dlg{background:var(--panel-solid);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:1rem 1.1rem;width:min(40rem,calc(100vw - 2rem));max-height:min(85dvh,48rem)}
.dlg::backdrop{background:rgba(0,0,0,.5)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.dlg-h h2{font-size:1.1rem}
.dlg-group h3{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:1rem 0 .35rem}
.catalog{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.catalog li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:10px}
.catalog p{margin:.1rem 0 0}
.dlg-form{display:grid;gap:.75rem}
.dlg-form label{display:grid;gap:.3rem;font-size:.85rem;color:var(--ink-dim)}
.dlg-form .name-in{min-width:0}

/* funnel steps reuse the popularity bars */
.funnel li{grid-template-columns:minmax(8rem,11rem) 1fr 5.5rem}
.funnel .bar-fill{background:var(--s3)}
code{font-family:var(--mono);font-size:.82em;background:var(--surf);padding:.05rem .3rem;border-radius:4px}
@media (max-width:560px){
  .name-in{min-width:0;flex:1 1 100%}
  .edit-bar #save-state{text-align:left}
  .funnel li{grid-template-columns:1fr 5rem}
}