/* Travel: the planner and the destination pages. Built on /surf/ (surf.css) so it reads as one site:
   Deep Sea band, hairline rows and cells, Plex Mono numbers, water-tinted bars, the Sun only for best and firing. */

/* ---- the planner: six chip rows, no submit, results re-rank as you tap ---- */
.tvplan{display:grid;gap:14px;padding:20px 20px 18px}
.tvq{display:grid;grid-template-columns:92px 1fr;gap:10px 14px;align-items:center}
.tvq>.k{padding-top:1px}
.tvchips{display:flex;flex-wrap:wrap;gap:6px}
.tvchips button{font:inherit;font-weight:700;font-size:13px;line-height:1;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tvchips button:hover{border-color:var(--ocean)}
.tvchips button[aria-pressed="true"]{background:var(--ocean);border-color:var(--ocean);color:#fff}
.tvchips[data-q="month"] button{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;padding:8px 10px}
.tvchips[data-q="month"] button[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:#111B1F}
.tvfrom{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.tvq>*{min-width:0} .tvq .tvfrom select{width:100%;max-width:420px}
.tvmore{justify-content:center;padding-top:14px} .tvmore .btn{width:100%}
.tvfrom select{font:inherit;font-size:14px;font-weight:600;padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237C878C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);appearance:none;-webkit-appearance:none;max-width:100%;min-width:0}
#tv-sum{margin:22px 0 12px;min-height:1.4em}
#tv-sum .sbdot{margin-right:6px}

/* ---- results: top three as cells, the rest as rows ---- */
.tvtop{margin-bottom:22px}
.tvtop:empty{display:none}
.tvcell{display:grid;gap:10px;padding:26px 28px 24px;color:var(--ink);border-bottom:1px solid var(--line);position:relative;transition:background .2s}
.tvcell .k{display:flex;justify-content:space-between;gap:10px}
.tvcell h3{font-size:24px;letter-spacing:-.03em;line-height:1.1}
.tvcell h3 small{display:block;font-size:13px;font-weight:600;letter-spacing:0;color:var(--muted);margin-top:4px}
.tvcell .sbts{margin-top:2px}
.tvcell .tvfacts{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);line-height:1.6}
.tvcell .tvbreaks{font-size:13px;color:var(--ink-2)}
.tvcell::after{content:"";position:absolute;left:28px;bottom:-1px;height:3px;width:0;background:var(--sun);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.tvcell:hover{background:var(--bg-2)} .tvcell:hover::after{width:calc(100% - 56px)}
.tvres a{align-items:center;gap:14px}
.tvres a .tvrank{font-family:var(--mono);font-size:11px;color:var(--muted);width:22px;flex:none}
.tvres a .tvname{flex:1;min-width:0;display:grid;gap:2px}
.tvres a .tvname small{font-family:var(--sans);font-weight:500;font-size:12.5px;white-space:normal;text-align:left;color:var(--ink-2);letter-spacing:0}
.tvres a .tvspark{flex:none}
.tvres a .tvh{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;text-align:right;min-width:72px}
.tvskel a{pointer-events:none} .tvskel .tvname b{display:inline-block;height:14px;width:60%;border-radius:4px;background:var(--line-2);animation:tvb 1.2s ease-in-out infinite alternate}
@keyframes tvb{from{opacity:.5}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tvskel .tvname b{animation:none}}

/* ---- the sparkline: twelve bars, Good % high, Sun cap for firing, the chosen month outlined ---- */
.tvspark{display:inline-grid;grid-auto-flow:column;grid-auto-columns:6px;gap:2px;height:26px;align-items:end;vertical-align:middle}
.tvspark i{display:block;height:max(2px,var(--g));border-radius:1px 1px 0 0;background:var(--good);position:relative;min-height:2px}
.tvspark i.flat{background:#D3E4E7} .tvspark i.fair{background:#9CCBD1} .tvspark i.firing{background:var(--good)}
.tvspark i::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--f) / var(--g) * 100%);background:var(--sun);border-radius:1px 1px 0 0}
.tvspark i.flat::after,.tvspark i.fair::after{display:none}
.tvspark i.sel{outline:1.5px solid var(--ink);outline-offset:1px}
[data-theme="dusk"] .tvspark i.flat{background:#33474D} [data-theme="dusk"] .tvspark i.fair{background:#4F7A82} [data-theme="dusk"] .tvspark i,[data-theme="dusk"] .tvspark i.firing{background:#6FC3CF}
.sbrows a .tvspark{margin-left:auto;margin-right:12px}
.tvall .sbrows a{align-items:center}
.tvall .sbrows a span:first-child{flex:1}
.tvall .sbrows a small{white-space:normal;min-width:0;max-width:38%;line-height:1.3}

/* ---- destination page ---- */
.tvmap{height:300px}
.tvmonths{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:14px;height:118px;align-items:end}
.tvm{font:inherit;background:none;border:0;padding:0;cursor:pointer;display:grid;grid-template-rows:1fr auto;gap:6px;height:100%;align-items:end;border-radius:4px}
.tvm .tvbar{display:block;height:100%;position:relative;border-radius:3px 3px 0 0;background:var(--bg-2);overflow:hidden}
.tvm .tvbar i{position:absolute;left:0;right:0;bottom:0;height:var(--g);background:#9CCBD1;border-radius:3px 3px 0 0;transition:background .2s}
.tvm.best .tvbar i{background:var(--good)}
.tvm .tvbar i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--f);background:var(--sun)}
.tvm em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.tvm[aria-pressed="true"] .tvbar{box-shadow:inset 0 0 0 2px var(--ink)} .tvm[aria-pressed="true"] em{color:var(--ink)}
.tvm:hover .tvbar{box-shadow:inset 0 0 0 1.5px var(--ocean)}
.tvm:focus-visible{outline:2px solid var(--ocean);outline-offset:2px}
[data-theme="dusk"] .tvm .tvbar i{background:#4F7A82} [data-theme="dusk"] .tvm.best .tvbar i{background:#6FC3CF}
.tvwater{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);text-align:center;position:relative;padding-top:16px}
.tvwater .k{position:absolute;left:0;top:0;font-size:9.5px}
.tvcamps li{align-items:flex-start}
.tvcamps b{font-size:15px} .tvcamps small{line-height:1.45;margin-top:3px}
.tvprice{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink);padding-top:1px}
.tvprice small{font-size:10px;font-weight:400;color:var(--muted);margin-left:1px}
.tvprice.band{color:var(--ink-2)} .tvprice.none{color:var(--muted);font-weight:400;font-size:12px}
.tvline{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.5} .tvline b{color:var(--ink);font-family:var(--mono);font-size:15px;font-weight:600;margin-right:6px}
.tvline.big{font-family:var(--mono);font-size:22px;color:var(--ink);font-weight:600} .tvline.big small{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-2);margin-left:8px}
.tvline:empty{display:none}
aside .tvfrom{margin-top:12px;display:grid;gap:6px} aside .tvfrom select{width:100%}
.tvwhen{list-style:none;margin:8px 0 0;padding:0}
.tvwhen li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)} .tvwhen li:first-child{border-top:0}
.tvwhen b{font-family:var(--mono);font-size:13px;font-weight:600;min-width:34px} .tvwhen small{color:var(--ink-2);font-size:12.5px;line-height:1.45}
.tvwhen li.best b{color:#111B1F;background:var(--sun);padding:1px 6px;border-radius:4px}
.tvcpin{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #0F4C5C;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.tvspin{width:14px;height:14px;border-radius:50%;background:var(--sun);border:2.5px solid #0F4C5C;box-shadow:0 0 0 2px #fff}

/* ---- phones ---- */
@media (max-width:640px){
  .tvq{grid-template-columns:1fr;gap:6px}
  .tvplan{padding:16px 14px 14px}
  .tvchips button{padding:8px 11px}
  .tvcell{padding:20px 18px 20px} .tvcell h3{font-size:22px}
  .tvres a{flex-wrap:wrap} .tvres a .tvh{min-width:0;flex:1 1 100%;text-align:left;padding-left:36px}
  .tvmap{height:220px}
  .tvmonths{height:96px;gap:3px} .tvm em{font-size:9px}
  .tvwater{font-size:9.5px;gap:3px}
  .tvall .sbrows a{flex-wrap:wrap} .tvall .sbrows a small{flex:1 1 100%;text-align:left;padding-top:2px}
  .sbrows a .tvspark{margin-left:auto;margin-right:0}
}
.tvtop>*,.tvres>*,.tvplan>*{min-width:0}

/* ---- the planner, compact and pinned (Nick, 2026-10-08: "sticky upon scroll… not so tall") ----
   Full card: four rows, not six (When and From span the width; How long + Level and Budget + Water share a row).
   Pinned under the nav, it collapses to one row of the current picks; tap a pick to change it in place. */
.tvplan{position:sticky;top:65px;z-index:10;gap:10px 18px;padding:14px 16px 12px;grid-template-columns:1fr 1fr}
.tvq{grid-template-columns:72px 1fr;gap:8px 12px}
.tvq[data-span]{grid-column:1 / -1}
.tvchips button{font-size:12.5px;padding:7px 10px}
.tvchips[data-q="month"] button{padding:6px 9px}
.tvplan.stuck{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:8px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:0 0 10px 10px;border-top:0;box-shadow:0 8px 24px -18px rgba(17,27,31,.35)}
.tvplan.stuck::-webkit-scrollbar{display:none}
.tvplan.stuck .tvq{display:flex;align-items:center;gap:6px;flex:none;grid-column:auto}
.tvplan.stuck .tvq>.k{font-size:9.5px;padding:0;margin-right:2px}
.tvplan.stuck .tvchips{flex-wrap:nowrap;gap:4px}
.tvplan.stuck .tvq:not(.open) .tvchips button:not([aria-pressed="true"]){display:none}
.tvplan.stuck .tvq:not(.open) .tvchips button[aria-pressed="true"]{padding-right:22px;position:relative}
.tvplan.stuck .tvq:not(.open) .tvchips button[aria-pressed="true"]::after{content:"";position:absolute;right:9px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.tvplan.stuck .tvq.open .tvchips button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ocean)}
.tvplan.stuck .tvfrom select{max-width:190px;padding:7px 30px 7px 10px;font-size:13px}
.tvplan.stuck .tvq[data-q-from] .k{display:none}
.tvsentinel{height:1px;margin-top:-1px}
@media (max-width:760px){.tvplan{grid-template-columns:1fr} .tvq{grid-template-columns:1fr;gap:6px}}
@media (max-width:640px){.tvplan{top:65px;padding:12px 14px 10px}}

/* ---- From: a search picker, not a 300-row select (Nick, 2026-10-08: "need a better way to pick here") ---- */
.tvpick{position:relative;min-width:0;max-width:460px}
.tvpickbtn{font:inherit;font-weight:700;font-size:13px;line-height:1;padding:9px 34px 9px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;max-width:100%;position:relative;text-align:left}
.tvpickbtn small{font-weight:500;color:var(--muted);font-size:12px}
.tvpickbtn::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-70%) rotate(45deg)}
.tvpickbtn.set{background:var(--ocean);border-color:var(--ocean);color:#fff} .tvpickbtn.set small{color:rgba(255,255,255,.8)} .tvpickbtn.set::after{border-color:#fff}
.tvpickbtn:hover{border-color:var(--ocean)}
.tvpickpanel{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 18px 40px -22px rgba(17,27,31,.45)}
.tvpickin{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);color:var(--ink)}
.tvpickin::placeholder{color:var(--muted)}
.tvpicklist{list-style:none;margin:6px 0 0;padding:0;max-height:300px;overflow-y:auto}
.tvpicklist li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 10px;border-radius:6px;cursor:pointer;color:var(--ink);font-weight:600;font-size:14px}
.tvpicklist li:hover,.tvpicklist li[aria-selected="true"]{background:var(--bg-2)}
.tvpicklist li small{color:var(--muted);font-weight:500;font-size:12px;font-family:var(--mono);white-space:nowrap}
.tvpicklist li.near{color:var(--accent);justify-content:flex-start;gap:8px} .tvpicklist li.near::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);flex:none} .tvpicklist li.near small{margin-left:auto}
.tvpicklist li.none{color:var(--muted);font-weight:500;cursor:default}
.tvplan.stuck .tvpickbtn{padding:7px 30px 7px 10px;font-size:12.5px} .tvplan.stuck .tvpickbtn small{display:none}
.tvplan.stuck .tvpickpanel{position:fixed;left:16px;right:16px;top:auto;width:auto;max-width:460px}
aside .tvpick{max-width:100%} aside .tvpickbtn{width:100%;justify-content:space-between}
/* phones: the panel is a sheet pinned to the bottom of the screen, the list scrolls inside it */
@media (max-width:640px){.tvpickpanel,.tvplan.stuck .tvpickpanel{position:fixed;left:12px;right:12px;width:auto;max-width:none;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-height:70vh;display:flex;flex-direction:column;margin:0} .tvpickpanel[hidden]{display:none} .tvpicklist{flex:1;min-height:0;max-height:none}}

/* ---- price this trip (Nick, 2026-10-08: "I'm ready to plan a trip and price it out") ---- */
.tvtrip .sbch{min-height:0}
.tvtriprows{display:grid;gap:10px;margin-top:14px}
.tvtriprows .tvq{grid-template-columns:56px 1fr}
.tvtripmonths button{padding:6px 8px;font-size:11.5px}
.tvbill{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.tvbill li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.tvbill li span{color:var(--ink-2)} .tvbill li span b{color:var(--ink);font-weight:700;display:block} .tvbill li span small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.tvbill li em{font-style:normal;font-family:var(--mono);font-size:14px;font-weight:600;white-space:nowrap}
.tvbill li.total{border-bottom:0;padding-top:12px} .tvbill li.total em{font-size:22px} .tvbill li.total span b{font-size:15px}
.tvbill li.over em{color:var(--muted)}
.tvbill li.muted em,.tvbill li.muted span{color:var(--muted)}
.tvtrip .sbcta{margin-top:14px} .tvtrip .sbcta .btn{flex:1 1 auto;justify-content:center}
.tvcamps li.picked{background:var(--oceanl);padding-left:8px;padding-right:8px;border-radius:6px}
.tvcamps li[hidden]{display:none}
.tvcamps li[data-price]:not([data-price=""]){cursor:pointer}
.tvpickcamp{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:6px;display:block}
/* results: the price lines */
.tvres a .tvname small .tvcost,.tvcell .tvcost{font-family:var(--mono);font-size:11.5px;color:var(--ink);font-weight:600;letter-spacing:.02em}
.tvcost.over{color:var(--muted);font-weight:500;text-decoration:line-through}
.tvcost.est{color:var(--ink-2);font-weight:500}
.tvcell.over,.tvres li.over a{opacity:.55}

/* ---- units (Nick, 2026-10-08: "should show F and C… option for km and miles… exchange converter… think about localization") ---- */
.tvunits{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.tvunits .tvchips button{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.04em;padding:7px 10px}
.tvcur{display:inline-flex;align-items:center;gap:8px}
.tvcur .k{font-size:10px}
.tvcur select{font:inherit;font-family:var(--mono);font-size:12px;font-weight:500;padding:6px 26px 6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237C878C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--ink);appearance:none;-webkit-appearance:none}
.tvplan.stuck .tvq[data-span]:has(.tvunits){display:none}
.tvtriprows .tvunits{gap:6px 10px}
.tvapprox{color:var(--muted);font-weight:500;font-size:.92em;white-space:nowrap}
.tvclaim{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .tvclaim:hover{color:var(--accent)}
.tvbrand .tvline{margin-top:6px}
.tvdivider{list-style:none;padding:18px 2px 8px;border-bottom:1px solid var(--line)} .tvdivider span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tvdivider span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--flat);margin-right:8px;vertical-align:middle}
.tvhint{display:block;margin-top:6px;font-size:12px;color:var(--muted);line-height:1.4}
.tvplan.stuck .tvhint{display:none}
.tvchips[data-q="budget"] button{font-family:var(--mono);letter-spacing:.06em}
.tvtier{margin-top:10px} .tvtier button{font-family:var(--mono);letter-spacing:.06em;font-size:11.5px;padding:6px 10px}

/* ---- the pinned bar, built by script (replaces the CSS collapse) ---- */
.tvplan{position:static}
.tvplan.stuck{display:grid}
.tvbar{position:fixed;left:0;right:0;top:65px;z-index:19;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tvbar[hidden]{display:none}
.tvbarin{padding-block:8px}
.tvbarpills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .tvbarpills::-webkit-scrollbar{display:none}
.tvbarpills button{flex:none;font:inherit;font-weight:700;font-size:12.5px;line-height:1;padding:8px 24px 8px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;position:relative;white-space:nowrap}
.tvbarpills button::after{content:"";position:absolute;right:10px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
.tvbarpills button.set{background:var(--ocean);border-color:var(--ocean);color:#fff}
.tvbarpills button[data-bq="month"].set{background:var(--sun);border-color:var(--sun);color:#111B1F}
.tvbarpills button[aria-expanded="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ocean)}
.tvbarpanel{padding:10px 0 4px} .tvbarpanel[hidden]{display:none}
.tvbarpanel .tvchips{gap:6px}
.tvbarpick .tvpickpanel.tvpickinline{position:static;width:min(460px,100%);box-shadow:none;padding:0;border:0;background:transparent;max-height:none}
.tvbarpick .tvpicklist{max-height:260px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px}
main.tv{scroll-margin-top:120px}

/* ---- price tiles on results ---- */
.tvprices{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:4px}
.tvpr{display:grid;gap:1px;min-width:84px}
.tvpr i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tvpr b{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink);line-height:1.1}
.tvpr small{font-size:11px;color:var(--ink-2);line-height:1.3} .tvpr small .tvapprox{display:block;font-size:10.5px}
.tvpr.none b{color:var(--muted);font-weight:400} .tvpr.none small{color:var(--muted)}
.tvpr.sum b{color:var(--accent)} .tvpr.sum i{color:var(--accent)}
.tvres a .tvname .tvprices{margin-top:6px}
@media (max-width:640px){.tvprices{gap:6px 14px} .tvpr{min-width:74px} .tvpr b{font-size:15px}}
.sbrows a .tvprices .tvpr,.tvprices .tvpr{flex:0 0 auto}   /* surf.css gives "span:first-child + span" flex:1 for the row's name; the Bed tile matched it */
.tvsort{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.tvsort .tvchips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
#tv-sum{margin-top:10px}
/* sparkline context: an axis under the big ones, a legend by the sort row */
.tvsparkwrap{display:inline-grid;gap:3px}
.tvsparkwrap.big .tvspark{grid-auto-columns:11px;gap:3px;height:34px}
.tvsparkax{display:grid;grid-auto-flow:column;grid-auto-columns:11px;gap:3px;font-family:var(--mono);font-size:8.5px;letter-spacing:0;color:var(--muted);text-align:center;line-height:1}
.tvsparkax b{font-weight:400} .tvsparkax b.sel{color:var(--ink);font-weight:600}
.tvlegend{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.tvlegend i{display:inline-block;width:6px;height:10px;border-radius:1px 1px 0 0;vertical-align:-1px;margin-right:4px} .tvlegend i.g{background:var(--good)} .tvlegend i.s{background:var(--sun)} .tvlegend i.q{background:#D3E4E7} [data-theme="dusk"] .tvlegend i.q{background:#33474D}
@media (max-width:640px){.tvlegend{margin-left:0}}
.tvfaresrc{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);align-self:center;white-space:nowrap} .tvfaresrc:hover{color:var(--accent)}