/* /offers/ tools — extends /assets/site.css (same tokens: navy, gold, ink, muted, line) */
:root {
  --surface-viz: #0f2440;
  --room-1: #7f6024; --room-2: #9c772d; --room-3: #bd913a; --room-4: #d9ad4e; --room-5: #ecc875; --room-6: #f8e2ab;
  --series-1: #3987e5; --series-2: #d95926;
  --bad: #e66767;
}
.phero .chips:empty { display: none; }
.chip b small { display: inline; font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0; }
.switcher a#acct-link { margin-left: auto; }

/* settings / filter forms */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.settings label, .filters label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 4px; }
.settings select, .settings input[type=date], .filters select, .filters input[type=search], .acct input {
  width: 100%; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(7,26,51,.75); color: var(--ink); font-size: .93rem; font-family: inherit; color-scheme: dark;
}
.settings .chk label, .filters .chk label { display: flex; gap: 8px; align-items: center; color: var(--ink); font-size: .9rem; margin: 0; padding-bottom: 9px; cursor: pointer; }
.settings .chk input, .filters .chk input { accent-color: var(--gold); width: 16px; height: 16px; }
.settings select:focus-visible, .settings input:focus-visible, .filters select:focus-visible, .filters input:focus-visible, .acct input:focus-visible, button:focus-visible, .lvl-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; align-items: end; }
.filters > div { min-width: 150px; flex: 1 1 150px; max-width: 240px; }
.filters .grow { flex: 2 1 220px; max-width: 360px; }

/* tables */
table.levels th, table.levels td, table.sailings th, table.sailings td { padding: 11px 12px; }
table .sub { display: block; font-size: .8rem; color: var(--dim); font-weight: 400; white-space: normal; }
table td.num .sub { color: var(--dim); }
table.levels tbody tr { cursor: pointer; }
table.levels tbody tr:hover td, table.levels tbody tr:hover th, table.sailings tbody tr:hover td { background: rgba(255,255,255,.035); }
table.levels tbody tr.sel th, table.levels tbody tr.sel td { background: rgba(232,182,76,.08); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable[aria-sort]::after { content: ' ▾'; color: var(--gold); }
th.sortable[aria-sort="ascending"]::after { content: ' ▴'; }
.lvl { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lvl small { display: block; font-weight: 400; font-size: .78rem; color: var(--dim); letter-spacing: .02em; }
.ratio { font-weight: 700; }
.ratio.good { color: var(--ok); }
.ratio.meh { color: var(--warn); }
.ratio.bad { color: var(--bad); }
.lvl-btn { font: inherit; font-size: .82rem; color: var(--gold-soft); background: transparent; border: 1px solid rgba(232,182,76,.4); border-radius: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.lvl-btn:hover { background: rgba(232,182,76,.12); }
.btn-sm { font: inherit; font-size: .85rem; font-weight: 600; padding: 7px 12px; border-radius: 9px; border: 1px solid rgba(232,182,76,.45); background: transparent; color: var(--gold-soft); cursor: pointer; text-decoration: none; display: inline-block; }
.btn-sm:hover { background: rgba(232,182,76,.12); color: var(--gold); }
.btn-sm.primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-sm.primary:hover { background: var(--gold-soft); }
.btn-sm[disabled] { opacity: .6; cursor: default; }
.more { text-align: center; margin-top: 12px; }

/* room chip + signal badge (icon + label, never color alone) */
.room { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); }
.room i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.room small { color: var(--dim); }
.sig { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: 3px 10px 3px 4px; white-space: nowrap; border: 1px solid; }
.sig i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; color: var(--deep); }
.sig-now { color: #ffb4b4; border-color: rgba(230,103,103,.5); background: rgba(230,103,103,.1); }
.sig-now i { background: var(--bad); }
.sig-maybe { color: var(--warn); border-color: rgba(240,179,107,.45); background: rgba(240,179,107,.08); }
.sig-maybe i { background: var(--warn); }
.sig-stays { color: var(--ok); border-color: rgba(127,209,168,.45); background: rgba(127,209,168,.08); }
.sig-stays i { background: var(--ok); }
.sig-na { color: var(--dim); border-color: var(--line); }
.sig-na i { background: var(--dim); }
.newtag { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(232,182,76,.45); border-radius: 6px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; }

/* charts */
figure.viz { margin: 0 0 22px; background: var(--surface-viz); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 10px; }
figure.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
figure.viz .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); margin: 0 4px 10px; }
figure.viz .legend span { display: inline-flex; align-items: center; gap: 6px; }
figure.viz .legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
figure.viz .legend i.line { height: 3px; border-radius: 2px; }
figure.viz .legend i.range { height: 6px; border-radius: 3px; }
figure.viz figcaption { font-size: .8rem; color: var(--dim); margin: 8px 4px 2px; }
.viz text { fill: var(--muted); font-size: 11.5px; font-family: inherit; }
.viz text.lab { fill: var(--ink); font-size: 12px; }
.viz text.val { fill: var(--ink); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.viz .grid line { stroke: rgba(255,255,255,.08); }
.viz .axis line { stroke: rgba(255,255,255,.18); }
.viz [data-tip] { cursor: default; }
.viz .hit { fill: transparent; }
.viz .hit:hover { fill: rgba(255,255,255,.04); }
#viz-tip { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .12s; background: #0a1c33; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 10px 12px; font-size: .84rem; color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 300px; }
#viz-tip.on { opacity: 1; }
#viz-tip b { display: block; margin-bottom: 4px; }
#viz-tip .r { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); }
#viz-tip .r span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }

/* heat tables */
table.heat td, table.heat th { padding: 8px 10px; text-align: center; font-variant-numeric: tabular-nums; }
table.heat th:first-child, table.heat td:first-child { text-align: left; }
table.heat td.h { color: var(--ink); }
table.heat td.zero { color: rgba(255,255,255,.25); }

/* back-to-back results */
.b2b-list { display: grid; gap: 14px; margin-top: 16px; }
.b2b { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.b2b-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; margin-bottom: 12px; }
.b2b-head h3 { font-size: 1.02rem; }
.b2b-head .tot { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .88rem; color: var(--muted); }
.b2b-head .tot b { color: var(--ink); font-variant-numeric: tabular-nums; }
.legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.leg { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(7,26,51,.45); position: relative; font-size: .9rem; }
.leg.offer { border-color: rgba(232,182,76,.4); }
.leg .kind { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--dim); }
.leg.offer .kind { color: var(--gold); }
.leg h4 { font-size: .98rem; margin: 2px 0 4px; }
.leg h4 a { color: var(--ink); text-decoration: none; }
.leg h4 a:hover { color: var(--gold-soft); }
.leg .route { color: var(--muted); }
.leg .money { margin-top: 6px; color: var(--muted); font-size: .85rem; }
.leg .money b { color: var(--ink); }
.swap { color: var(--warn); font-size: .8rem; font-weight: 600; }

/* sailing page */
ol.ports { list-style: none; display: grid; gap: 6px; counter-reset: d; }
ol.ports li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--muted); counter-increment: d; }
ol.ports li::before { content: 'Stop ' counter(d) ' · '; color: var(--dim); font-size: .8rem; }

/* account */
.acct { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.acct form { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.acct form h2 { font-size: 1.4rem; }
.acct label { font-size: .85rem; color: var(--muted); }
.acct .chk { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: .86rem; }
.acct .chk input { width: auto; accent-color: var(--gold); margin-top: 4px; }
.acct .err { color: #ffb4b4; font-size: .88rem; min-height: 1.2em; }
.plans { display: grid; gap: 10px; }
.plan { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.plan .meta { font-size: .82rem; color: var(--dim); }
.plan .acts { display: flex; gap: 8px; flex-wrap: wrap; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: var(--gold); color: var(--navy); font-weight: 600; padding: 10px 18px; border-radius: 10px; opacity: 0; transition: .2s; z-index: 60; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.empty { padding: 26px; text-align: center; color: var(--dim); }
.loading { color: var(--dim); padding: 20px 0; }

@media (max-width: 720px) {
  .settings { grid-template-columns: 1fr 1fr; padding: 14px; }
  table.levels .hide-m, table.sailings .hide-m { display: none; }
  .switcher a#acct-link { margin-left: 0; }
}
@media (max-width: 420px) {
  .settings { grid-template-columns: 1fr; }
  .filters > div { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { #toast, #viz-tip { transition: none; } }

/* port guides */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.pcard h3 { font-size: 1.08rem; }
.pcard h3 a { color: var(--ink); text-decoration: none; }
.pcard h3 a:hover { color: var(--gold-soft); }
.pcard p { color: var(--muted); font-size: .92rem; }
.pcard .ptier { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.pcard.tier-cheapest .ptier { color: var(--ok); }
.pcard.tier-luxury .ptier { color: var(--gold-soft); }
.pcard.lug .ptier { color: var(--muted); }
.pcard .pmeta { font-size: .86rem; color: var(--dim); }
.pcard .pprice { color: var(--ink); }
.pcard .pprice b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pcard .pnote { font-size: .78rem; color: var(--dim); }
.pcard .plinks { font-size: .8rem; color: var(--dim); margin-top: auto; padding-top: 6px; }
.pcard .plinks a { color: var(--muted); }
.pbadge { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--ok); border: 1px solid rgba(127,209,168,.45); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }
.b2b .turns { font-size: .85rem; color: var(--muted); margin-top: 10px; }
.b2b .turns a { color: var(--gold-soft); }
fieldset.linepick { border: 0; padding: 0; margin: 0; grid-column: span 2; }
fieldset.linepick legend { font-size: .82rem; color: var(--muted); margin-bottom: 6px; }
fieldset.linepick #p-lines { display: flex; flex-wrap: wrap; gap: 6px 14px; }
fieldset.linepick label { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); font-size: .9rem; cursor: pointer; }
fieldset.linepick label small { color: var(--dim); }
fieldset.linepick input { accent-color: var(--gold); }
.settings .chk { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 720px) { fieldset.linepick { grid-column: span 2; } }
@media (max-width: 420px) { fieldset.linepick { grid-column: span 1; } }

/* ==========================================================================
   2026-10 redesign: /offers/ hub (chooser, one-level result, plain-language chart notes),
   loading skeletons, teal informational controls. Gold is kept for the main action.
   ========================================================================== */
.switcher a[aria-current="page"] { color: #fff; background: rgba(60,194,176,.16); border-color: rgba(60,194,176,.6); font-weight: 600; }
.switcher a { min-height: 40px; display: inline-flex; align-items: center; }

/* hero chooser */
.ohero h1 { max-width: 22ch; }
.ohero .lede { max-width: 60ch; }
.chooser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.choice { text-align: left; font: inherit; color: var(--ink); background: rgba(7,26,51,.55); border: 1px solid rgba(60,194,176,.45); border-radius: 14px; padding: 16px 18px; min-height: 44px; cursor: pointer; display: grid; gap: 4px; position: relative; }
.choice b { font-size: 1.05rem; line-height: 1.3; padding-right: 22px; }
.choice small { color: var(--muted); font-size: .9rem; }
.choice::after { content: "→"; position: absolute; right: 16px; top: 15px; color: var(--teal); font-weight: 700; }
.choice:hover { background: rgba(60,194,176,.12); border-color: var(--teal); }
.choice[aria-pressed="true"] { background: rgba(60,194,176,.2); border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.choice[aria-pressed="true"]::after { content: "✓"; }
.listmeta { margin-top: 18px; font-size: .9rem; color: var(--muted); max-width: 80ch; }
.listmeta b { color: var(--ink); font-weight: 600; }

/* skeletons */
.skel { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(127,145,170,.16) 25%, rgba(127,145,170,.3) 37%, rgba(127,145,170,.16) 63%); background-size: 400% 100%; animation: skel 1.3s ease infinite; }
.skel-line { height: 14px; margin: 8px 0; width: 100%; }
.skel-big { height: 40px; width: 60%; margin: 10px 0; }
.skel-bar { height: 16px; margin: 14px 0 14px 18%; width: 65%; }
.skel-chart { padding: 6px 4px 12px; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.btn.is-loading { opacity: .7; cursor: default; pointer-events: none; }
[aria-busy="true"] { cursor: progress; }

/* level picker + enlarged result (on the .paper surface) */
.answer-sec { padding-top: 40px; }
.pick { max-width: 760px; }
.pick h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); }
.pick-intro { color: var(--paper-muted); margin-top: 6px; }
.pick-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px 14px; margin-top: 14px; }
.pick label { display: block; font-size: .9rem; font-weight: 600; color: var(--paper-ink); margin-bottom: 4px; }
.pick select, .pick input { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(13,107,96,.45); background: #fff; color: var(--paper-ink); font: inherit; font-size: 1.05rem; }
.pick select:disabled, .pick input:disabled { background: var(--paper-2); color: var(--paper-muted); cursor: progress; }
.pick-hint { font-size: .92rem; color: var(--teal-ink); margin-top: 8px; min-height: 1.2em; }
.result { margin-top: 18px; background: #fff; border: 1px solid var(--paper-line); border-radius: 18px; padding: 22px; box-shadow: 0 2px 10px rgba(11,37,69,.06); }
.res-head { border-bottom: 1px solid var(--paper-line); padding-bottom: 14px; margin-bottom: 16px; }
.res-kicker { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--teal-ink); }
.res-head h3 { font-family: inherit; font-size: clamp(1.7rem, 4.4vw, 2.3rem); line-height: 1.15; margin: 2px 0 6px; color: var(--paper-ink); }
.res-head h3 small { font-size: .9rem; font-weight: 500; color: var(--paper-muted); margin-left: 6px; }
.res-head p { color: var(--paper-muted); }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fig { border: 1px solid var(--paper-line); border-radius: 14px; padding: 16px 18px; background: var(--paper); }
.fig .k { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--paper-ink); }
.fig .v { display: block; font-size: clamp(2rem, 6vw, 2.7rem); line-height: 1.1; font-weight: 750; color: var(--paper-ink); font-variant-numeric: tabular-nums; margin: 6px 0 8px; letter-spacing: -.01em; }
.fig .v.v-range { font-size: clamp(1.5rem, 4.6vw, 2rem); }
.fig .v-sm { font-size: .55em; font-weight: 600; color: var(--paper-muted); }
.fig p { font-size: .98rem; color: var(--paper-muted); }
.fig p + p { margin-top: 8px; }
.fig .excl { background: #fff7e6; border-left: 3px solid #b07a12; border-radius: 0 8px 8px 0; padding: 8px 12px; color: #4a3a12; font-size: .93rem; }
.fig .excl b { color: #3a2c08; }
.fig-verdict .ratio.good { color: #17794f; } .fig-verdict .ratio.meh { color: #9a5200; } .fig-verdict .ratio.bad { color: #b3261e; }
.key { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; }
.key-value { background: var(--series-1); }
.key-loss { width: 5px; height: 16px; border-radius: 2px; background: var(--series-2); }
.key-range { width: 22px; height: 6px; border-radius: 3px; background: var(--series-2); opacity: .6; }
.key-log { width: 18px; height: 12px; border-radius: 0; background: linear-gradient(90deg, currentColor 1.5px, transparent 1.5px) 0 0 / 9px 100%, linear-gradient(90deg, currentColor 1.5px, transparent 1.5px) 13px 0 / 4px 100% no-repeat; opacity: .55; }
.res-acts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; align-items: center; border-radius: 12px; }
.res-acts .btn { display: inline-flex; align-items: center; min-height: 48px; }
.paper .res-acts .btn.primary { background: var(--gold); color: var(--navy); }
.paper .res-acts .btn.primary:hover { background: #d9a53a; color: var(--navy); }
.res-top { margin-bottom: 16px; }
.res-top h4 { font-size: 1rem; margin-bottom: 6px; color: var(--paper-ink); }
.res-top ol { list-style: none; display: grid; gap: 6px; }
.res-top li { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--paper-line); border-radius: 10px; padding: 10px 12px; background: var(--paper); }
.res-top li a { text-decoration: none; color: var(--paper-ink); min-width: 0; }
.res-top li a b { display: block; }
.res-top li a span { display: block; font-size: .88rem; color: var(--paper-muted); }
.res-top-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-top-v small { display: block; font-weight: 400; }
.paper .room { color: var(--paper-ink); }
.res-error { padding: 8px 0; }
.res-error p { color: var(--paper-muted); margin: 6px 0 12px; }

/* assumptions disclosure */
details.assump { margin-top: 16px; border: 1px solid var(--paper-line); border-radius: 14px; background: var(--paper-2); }
details.assump > summary { cursor: pointer; padding: 12px 16px; min-height: 44px; font-size: .95rem; color: var(--paper-muted); list-style: none; }
details.assump > summary::-webkit-details-marker { display: none; }
details.assump > summary::before { content: "▸"; color: var(--teal-ink); margin-right: 8px; display: inline-block; transition: transform var(--t) var(--ease); }
details.assump[open] > summary::before { transform: rotate(90deg); }
.assump-k { font-weight: 700; color: var(--teal-ink); }
.assump-intro { padding: 0 16px; color: var(--paper-muted); font-size: .95rem; }
details.assump .settings { margin: 12px 16px 16px; background: #fff; border-color: var(--paper-line); }
#settings-fs { border: 0; padding: 0; margin: 0; display: contents; }
.paper .settings label, .paper .filters label { color: var(--paper-muted); }
.paper .settings select, .paper .settings input[type=date], .paper .filters select, .paper .filters input[type=search] { background: #fff; color: var(--paper-ink); border-color: var(--paper-line); color-scheme: light; }
.paper .settings .chk label { color: var(--paper-ink); }
.settings .chk input, .filters .chk input { accent-color: var(--teal-ink); }
.settings select:disabled { opacity: .6; cursor: progress; }

/* explore: chart with plain-language notes alongside */
.explore-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.explore-grid figure.viz { margin: 0; }
.readme { border-radius: var(--radius); padding: 18px 20px; }
.readme h3 { font-size: 1.1rem; margin-bottom: 10px; }
.readme-list { list-style: none; display: grid; gap: 10px; }
.readme-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: .95rem; color: var(--paper-muted); }
.readme-list li > span:only-child { grid-column: 1 / -1; }
.readme-list .key { margin-top: 5px; }
.readme-list b { color: var(--paper-ink); }
.chart-detail { margin-top: 14px; border-top: 1px solid var(--paper-line); padding-top: 12px; font-size: .93rem; color: var(--paper-muted); }
.chart-detail > b { display: block; color: var(--paper-ink); margin-bottom: 4px; }
.chart-detail .r { display: flex; justify-content: space-between; gap: 12px; }
.chart-detail .r span:last-child { color: var(--paper-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.chart-detail .cd-plain { margin-top: 8px; color: var(--paper-ink); }
.chart-detail .btn-cd { margin-top: 10px; padding: 8px 14px; font-size: .92rem; cursor: pointer; font-family: inherit; }
.viz .hit:focus { outline: none; }
.viz .hit:focus-visible, .viz .hit.on { fill: rgba(60,194,176,.12); stroke: var(--teal); stroke-width: 2; }
.viz [data-tip]:focus-visible { outline: none; stroke: var(--teal); stroke-width: 2; }
.viz .selrow { fill: rgba(60,194,176,.1); stroke: rgba(60,194,176,.45); }
details.all-levels { margin-top: 18px; }
details.all-levels > summary, .explore-more a { cursor: pointer; }
details.all-levels > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(60,194,176,.55); color: var(--teal); background: rgba(60,194,176,.08); font-weight: 600; list-style: none; }
details.all-levels > summary::-webkit-details-marker { display: none; }
details.all-levels > summary::after { content: "▾"; transition: transform var(--t) var(--ease); }
details.all-levels[open] > summary::after { transform: rotate(180deg); }
details.all-levels[open] > summary { margin-bottom: 14px; }
.explore-more { margin-top: 16px; color: var(--muted); }
table.levels tbody tr.sel th, table.levels tbody tr.sel td { background: rgba(60,194,176,.1); }
.lvl-btn { color: var(--teal); border-color: rgba(60,194,176,.5); min-height: 36px; }
.lvl-btn:hover { background: rgba(60,194,176,.12); }

/* browse table: sortable headers are real buttons */
th.sortable .sortbtn { font: inherit; font-weight: inherit; color: inherit; background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: inherit; min-height: 32px; }
th.sortable[aria-sort] .sortbtn { color: var(--ink); }
th.sortable[aria-sort]::after { color: var(--teal); }
.sl-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.sl-link:hover { text-decoration: underline; }
#browse-h:focus, #explore-h:focus { outline: none; }

@media (max-width: 900px) {
  .chooser { grid-template-columns: 1fr; gap: 8px; }
  .choice { padding: 12px 16px; }
  .explore-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pick-row { grid-template-columns: 1fr; }
  .figs { grid-template-columns: 1fr; }
  .result { padding: 16px; border-radius: 14px; }
  .res-acts .btn { width: 100%; justify-content: center; text-align: center; }
  .ohero { padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.table-wrap { position: relative; } /* keeps .sr-only text in table headers inside the scroll box */
/* 44px tap areas: whole checkbox labels and sortable headers */
.settings .chk label, fieldset.linepick label { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.settings .chk input, fieldset.linepick input { width: 20px; height: 20px; }
th.sortable .sortbtn { min-height: 44px; }
fieldset.linepick input, .settings .chk input { accent-color: var(--teal); }