/* The livelier pieces added on 29 Oct 2026 (owner: "keep our light theme but add prettier animations and everything else you
   suggested", after looking at On Point Politics): the closest-races ticker, the odds in the utility bar, the race-page visuals
   (simulation squares, vote cards, the stages from lean to forecast, what moves the average), county maps, the scenario
   builder, early-vote benchmarks, and the entrance animations (js/reveal.js). Light theme throughout; the dark mode follows
   the site's own colour variables. Every animation stops for readers who ask for reduced motion. */

:root { --pl-d: #2f6fbd; --pl-r: #c2412d; --pl-i: #7a5aa6; --pl-glow: 0 1px 2px rgba(20, 24, 40, .06), 0 8px 24px -12px rgba(20, 24, 40, .18); }

/* ------------------------------------------------------------------ the ticker */
.ticker { display: flex; align-items: stretch; border-bottom: 1px solid var(--hair, #e3e3e3); background: var(--b1, #fff); font: 500 13px/1 var(--font-ui, system-ui); overflow: hidden; }
.ticker__label { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 16px; font: 700 10.5px/1 var(--font-ui, system-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #666); border-right: 1px solid var(--hair, #e3e3e3); background: var(--b1, #fff); position: relative; z-index: 1; }
.ticker__dot { width: 7px; height: 7px; border-radius: 50%; background: #d93a3a; box-shadow: 0 0 0 0 rgba(217, 58, 58, .5); animation: pl-pulse 2s infinite; }
.ticker__viewport { position: relative; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ticker__viewport::-webkit-scrollbar { display: none; }
.ticker__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: pl-ticker 70s linear infinite; }
.ticker:hover .ticker__track, .ticker__viewport:focus-within .ticker__track { animation-play-state: paused; }
.ticker__track li { flex: none; }
.ticker__track a { display: flex; align-items: center; gap: 6px; padding: 10px 18px; color: var(--ink, #111); text-decoration: none; white-space: nowrap; border-right: 1px solid color-mix(in oklab, var(--hair, #e3e3e3) 70%, transparent); }
.ticker__track a:hover { background: color-mix(in oklab, var(--ink, #111) 4%, transparent); }
.ticker__track b { font-weight: 700; }
.ticker__who { color: var(--muted, #666); }
.ticker__pdot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ticker__fig { font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes pl-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pl-pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 58, 58, .45); } 70% { box-shadow: 0 0 0 7px rgba(217, 58, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 58, 58, 0); } }
@media (max-width: 760px) { .ticker { font-size: 12.5px; } .ticker__label { padding: 0 10px 0 12px; } .ticker__track a { padding: 9px 14px; } }

/* ------------------------------------------------------------------ the odds in the utility bar */
.util-odds { display: inline-flex; gap: 14px; margin-left: 14px; padding-left: 14px; border-left: 1px solid color-mix(in oklab, currentColor 25%, transparent); font-size: 12.5px; white-space: nowrap; }
.util-odds b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ entrance animations (js/reveal.js) */
.rv-pre { opacity: 0; transform: translateY(14px); }
.rv-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); }
.rv-bar-pre { transform: scaleX(0) !important; transform-origin: left center; }
.rv-bar-pre.rv-bar-right { transform-origin: right center; }
.rv-bar-in { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.rv-map-pre path, .rv-map-pre polygon, .rv-map-pre rect.tile { opacity: 0; }
.rv-map-in path, .rv-map-in polygon, .rv-map-in rect.tile { transition: opacity .5s ease; }
.pl-waffle--anim i { opacity: 0; transform: scale(.3); }
.pl-waffle--anim i.on { opacity: 1; transform: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
@media (prefers-reduced-motion: reduce) {
    .pl-waffle--anim i { opacity: 1; transform: none; }
    .ticker__track { animation: none; }
    .ticker__dot { animation: none; }
    .rv-pre, .rv-bar-pre, .rv-map-pre path { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ blocks shared by the new visuals */
.pl-block { margin: 18px 0 26px; padding: 22px 22px 18px; border: 1px solid var(--hair, #e3e3e3); border-radius: 14px; background: var(--b1, #fff); box-shadow: var(--pl-glow); }
.pl-h { margin: 0 0 4px; font: 800 18px/1.2 var(--font-head, var(--font-ui, system-ui)); letter-spacing: -.01em; }
.pl-sub, .pl-note { margin: 0 0 12px; font: 400 13px/1.45 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-note { margin: 10px 0 0; font-size: 12px; }
.pl-tag { margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: color-mix(in oklab, var(--ink, #111) 8%, transparent); font: 600 10.5px/1.4 var(--font-ui, system-ui); color: var(--muted, #666); vertical-align: 1px; }
.pl-kick { display: block; margin-bottom: 6px; font: 700 10.5px/1 var(--font-ui, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #666); }

/* ------------------------------------------------------------------ a race at a glance */
.pl-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; align-items: center; }
.pl-vote { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 12px; border-radius: 12px; background: color-mix(in oklab, var(--pc) 7%, var(--b1, #fff)); border-top: 4px solid var(--pc); }
.pl-vote--r { text-align: right; }
.pl-vote__party { font: 700 10.5px/1 var(--font-ui, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--pc); }
.pl-vote__name { font: 700 17px/1.2 var(--font-ui, system-ui); color: var(--ink, #111); }
.pl-vote__n { font: 800 clamp(36px, 5vw, 52px)/1 var(--font-head, var(--font-ui, system-ui)); letter-spacing: -.03em; color: var(--pc); font-variant-numeric: tabular-nums; margin-top: 4px; }
.pl-vote__sub, .pl-vote__range { font: 400 12px/1.3 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-band { position: relative; display: block; height: 14px; margin: 8px 0 2px; border-radius: 99px; background: color-mix(in oklab, var(--ink, #111) 7%, transparent); }
.pl-band__range { position: absolute; top: 3px; bottom: 3px; border-radius: 99px; background: color-mix(in oklab, var(--pc) 40%, transparent); }
.pl-band__mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: color-mix(in oklab, var(--ink, #111) 35%, transparent); }
.pl-band__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pc); border: 2px solid var(--b1, #fff); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.pl-waffle-wrap { margin: 0; text-align: center; }
.pl-waffle { display: grid; grid-template-columns: repeat(10, 14px); gap: 3px; justify-content: center; }
.pl-waffle i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.pl-waffle-wrap figcaption { margin-top: 8px; font: 500 12.5px/1.35 var(--font-ui, system-ui); color: var(--ink, #111); max-width: 190px; }
.pl-waffle-wrap figcaption b { font-weight: 800; font-size: 15px; }
.pl-waffle-wrap figcaption span { display: block; color: var(--muted, #666); font-size: 11.5px; }
.pl-two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair, #e3e3e3); }
.pl-stage__axis { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0 64px 4px 148px; font: 600 10.5px/1 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-stage__axis span:nth-child(2) { text-align: center; } .pl-stage__axis span:last-child { text-align: right; }
.pl-stage { display: grid; grid-template-columns: 140px minmax(0, 1fr) 56px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px dashed color-mix(in oklab, var(--hair, #e3e3e3) 90%, transparent); }
.pl-stage__k b { display: block; font: 700 13px/1.2 var(--font-ui, system-ui); }
.pl-stage__k span { display: block; font: 400 11px/1.25 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-stage__track { position: relative; height: 22px; border-radius: 6px; background: color-mix(in oklab, var(--ink, #111) 4%, transparent); }
.pl-stage__zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--ink, #111) 30%, transparent); }
.pl-stage__bar { position: absolute; top: 8px; height: 6px; border-radius: 3px; opacity: .55; }
.pl-stage__dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--b1, #fff); border: 3px solid; }
.pl-stage--final .pl-stage__bar { opacity: 1; }
.pl-stage--final .pl-stage__dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.pl-stage__v { font: 800 13px/1 var(--font-ui, system-ui); text-align: right; font-variant-numeric: tabular-nums; }
.pl-wt ol { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: wt; }
.pl-wt li { padding: 8px 0; border-top: 1px dashed var(--hair, #e3e3e3); }
.pl-wt__top { display: flex; align-items: baseline; gap: 4px; font: 600 13.5px/1.3 var(--font-ui, system-ui); }
.pl-wt__top a { color: inherit; text-decoration: none; } .pl-wt__top a:hover { text-decoration: underline; }
.pl-wt__pct { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-wt__bar { height: 6px; margin: 5px 0 4px; border-radius: 3px; background: color-mix(in oklab, var(--ink, #111) 6%, transparent); overflow: hidden; }
.pl-wt__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--pl-d), color-mix(in oklab, var(--pl-d) 50%, var(--pl-r))); }
.pl-wt__meta { font: 400 12px/1.3 var(--font-ui, system-ui); color: var(--muted, #666); }
/* the names in the race's subheadline, in their party colours */
.race-deck .pc { font-weight: 800; }
@media (max-width: 860px) {
    .pl-vs { grid-template-columns: 1fr 1fr; }
    .pl-vs .pl-waffle-wrap { grid-column: 1 / -1; grid-row: 2; }
    .pl-two { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .pl-block { padding: 16px 14px 14px; border-radius: 12px; }
    .pl-vs { gap: 10px; }
    .pl-vote { padding: 10px 10px 9px; }
    .pl-vote__name { font-size: 14px; }
    .pl-waffle { grid-template-columns: repeat(10, 12px); }
    .pl-waffle i { width: 12px; height: 12px; }
    .pl-stage { grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 6px; }
    .pl-stage__axis { margin: 0 54px 4px 102px; }
}

/* ------------------------------------------------------------------ a race by county */
.pl-county__head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.pl-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: color-mix(in oklab, var(--ink, #111) 6%, transparent); }
.pl-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 99px; font: 600 12.5px/1 var(--font-ui, system-ui); color: var(--muted, #555); cursor: pointer; }
.pl-seg button.on { background: var(--b1, #fff); color: var(--ink, #111); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.pl-county__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; margin-top: 10px; }
.pl-county__map { position: relative; }
.pl-county__map svg { width: 100%; height: auto; max-height: 560px; display: block; }
.pl-county__areas path { stroke: #fff; stroke-width: .35; transition: fill .45s ease; }
.pl-county__areas path:hover { stroke: var(--ink, #111); stroke-width: 1; }
.pl-county__tip { position: absolute; pointer-events: none; padding: 7px 10px; border-radius: 8px; background: var(--ink, #111); color: var(--b1, #fff); font: 500 12px/1.35 var(--font-ui, system-ui); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.pl-county__tip b { display: block; font-weight: 700; }
.pl-county__legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 600 11px/1 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-county__legend span:nth-child(odd) { width: 22px; height: 10px; border-radius: 2px; border: 1px solid var(--hair, #ddd); }
.pl-net > div { position: relative; padding: 8px 0 10px; }
.pl-net b { display: block; font: 800 20px/1.1 var(--font-ui, system-ui); color: var(--pc); font-variant-numeric: tabular-nums; }
.pl-net span { font: 400 12px/1.3 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-net i { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--pc); }
.pl-big { margin: 0; padding: 0; list-style: none; }
.pl-big li { display: grid; grid-template-columns: 1fr auto 48px; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--hair, #e3e3e3); font: 500 13px/1.25 var(--font-ui, system-ui); }
.pl-big b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-big small { text-align: right; color: var(--muted, #666); font-size: 12px; }
@media (max-width: 860px) { .pl-county__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the scenario builder (/us/scenarios) */
.pl-scn { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; margin: 8px 0 30px; }
.pl-scn__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pl-scn__presets button { color: var(--ink, #111); border: 1px solid var(--hair, #ddd); background: var(--b1, #fff); border-radius: 99px; padding: 8px 14px; font: 600 13px/1 var(--font-ui, system-ui); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.pl-scn__presets button:hover { transform: translateY(-1px); box-shadow: var(--pl-glow); }
.pl-scn__presets button[data-preset="L"] { color: var(--pl-d); } .pl-scn__presets button[data-preset="R"] { color: var(--pl-r); }
.pl-scn h2.pl-h { margin: 18px 0 8px; }
.pl-scn__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-scn__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 12px; border: 1px solid var(--hair, #e3e3e3); border-radius: 10px; background: var(--b1, #fff); transition: border-color .2s, box-shadow .2s, background .3s; }
.pl-scn__list li.picked { border-color: color-mix(in oklab, var(--ink, #111) 35%, transparent); box-shadow: var(--pl-glow); }
.pl-scn__list li.moved { background: color-mix(in oklab, #f5c84c 14%, var(--b1, #fff)); }
.pl-scn__race { font: 700 13.5px/1.2 var(--font-ui, system-ui); color: var(--ink, #111); text-decoration: none; min-width: 0; }
.pl-scn__race small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted, #666); }
.pl-scn__btns { display: flex; gap: 6px; flex: none; }
.pl-scn__btns button { border: 1.5px solid var(--pc); color: var(--pc); background: var(--b1, #fff); border-radius: 8px; padding: 6px 9px; font: 700 12.5px/1 var(--font-ui, system-ui); cursor: pointer; transition: background .2s, color .2s, transform .12s; }
.pl-scn__btns button:active { transform: scale(.95); }
.pl-scn__btns button.on { background: var(--pc); color: #fff; }
.pl-scn__out { position: sticky; top: 76px; }
.pl-scn__card { padding: 18px; border-radius: 14px; border: 1px solid var(--hair, #e3e3e3); background: var(--b1, #fff); box-shadow: var(--pl-glow); }
.pl-scn__row { display: grid; grid-template-columns: 80px auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: baseline; margin-top: 12px; }
.pl-scn__row > span { font: 700 13px/1 var(--font-ui, system-ui); }
.pl-scn__row b { font: 800 30px/1 var(--font-head, var(--font-ui, system-ui)); color: var(--pl-d); font-variant-numeric: tabular-nums; }
.pl-scn__row em { font: 700 12px/1 var(--font-ui, system-ui); font-style: normal; }
.pl-scn__row small { grid-column: 2 / -1; font: 400 12px/1.3 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-scn .up { color: var(--pl-d); } .pl-scn .down { color: var(--pl-r); }
.pl-bar2 { height: 8px; margin: 6px 0 4px; border-radius: 4px; background: var(--pl-r); overflow: hidden; }
.pl-bar2 i { display: block; height: 100%; background: var(--pl-d); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.pl-scn__mh { margin-top: 18px; font-size: 15px; }
.pl-scn__moves { margin: 6px 0 0; padding: 0; list-style: none; }
.pl-scn__moves li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--hair, #e3e3e3); font: 500 13px/1.3 var(--font-ui, system-ui); }
.pl-scn__moves a { color: var(--ink, #111); }
.pl-scn__moves span { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .pl-scn { grid-template-columns: 1fr; }
    /* phones: a compact results card that stays on screen above the bottom bar while the races scroll */
    .pl-scn__out { position: sticky; bottom: 70px; top: auto; z-index: 5; }
    .pl-scn__card { padding: 10px 14px; }
    .pl-scn__row { margin-top: 4px; grid-template-columns: 70px auto 1fr; }
    .pl-scn__row b { font-size: 22px; }
    .pl-scn__row small, .pl-bar2, .pl-scn__mh, .pl-scn__moves { display: none; }
}

/* ------------------------------------------------------------------ the changelog */
.pl-log { margin: 10px 0 40px; padding: 0; list-style: none; position: relative; }
.pl-log::before { content: ""; position: absolute; left: 92px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--hair, #e3e3e3), transparent); }
.pl-log__day { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 24px; padding: 10px 0 14px; }
.pl-log__date b { display: block; font: 800 16px/1.1 var(--font-ui, system-ui); }
.pl-log__date span { font: 400 12px/1.3 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-log__items { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 6px; }
.pl-log__items li { position: relative; padding: 7px 12px 7px 30px; border-radius: 10px; background: color-mix(in oklab, var(--pc) 7%, var(--b1, #fff)); border-left: 3px solid var(--pc); font: 500 14px/1.35 var(--font-ui, system-ui); }
.pl-log__items li::before { content: ""; position: absolute; left: -16px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--b1, #fff); border: 2px solid var(--pc); }
.pl-log__items li:not(:first-child)::before { display: none; }
.pl-log__arrow { position: absolute; left: 11px; top: 8px; font-size: 11px; color: var(--pc); }
.pl-log__items a { color: inherit; }
@media (max-width: 560px) { .pl-log::before { left: 70px; } .pl-log__day { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; } .pl-log__items li { font-size: 13px; } }

/* ------------------------------------------------------------------ early-vote benchmarks */
.pl-bench__row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 190px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--hair, #e3e3e3); }
.pl-bench__k b { display: block; font: 700 14px/1.2 var(--font-ui, system-ui); color: var(--ink, #111); }
.pl-bench__k a { text-decoration: none; }
.pl-bench__k span, .pl-bench__v span { display: block; font: 400 11.5px/1.3 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-bench__v b { font: 800 16px/1 var(--font-ui, system-ui); font-variant-numeric: tabular-nums; }
.pl-bench__track { position: relative; height: 22px; border-radius: 11px; background: linear-gradient(90deg, color-mix(in oklab, var(--pl-r) 10%, transparent), transparent 50%, color-mix(in oklab, var(--pl-d) 10%, transparent)); }
.pl-bench__zero { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: color-mix(in oklab, var(--ink, #111) 30%, transparent); }
.pl-bench__gap { position: absolute; top: 9px; height: 4px; border-radius: 2px; opacity: .45; }
.pl-bench__need { position: absolute; top: 2px; bottom: 2px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink, #111); }
.pl-bench__now { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--b1, #fff); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.pl-bench__axis { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 4px 204px 0 214px; font: 600 10.5px/1 var(--font-ui, system-ui); color: var(--muted, #666); }
.pl-bench__axis span:nth-child(2) { text-align: center; } .pl-bench__axis span:last-child { text-align: right; }
@media (max-width: 760px) { .pl-bench__row { grid-template-columns: 1fr; gap: 6px; } .pl-bench__axis { margin: 4px 0 0; } }

/* ------------------------------------------------------------------ a UK seat at a glance */
.pl-seat__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: center; }
.pl-shift__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 76px; gap: 10px; align-items: center; padding: 6px 0; }
.pl-shift__k { font: 600 13px/1.2 var(--font-ui, system-ui); }
.pl-shift__track { position: relative; height: 18px; border-radius: 9px; background: color-mix(in oklab, var(--ink, #111) 4%, transparent); }
.pl-shift__line { position: absolute; top: 8px; height: 2px; background: var(--pc); opacity: .6; }
.pl-shift__then, .pl-shift__now { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.pl-shift__then { background: var(--b1, #fff); border: 2px solid var(--pc); }
.pl-shift__now { background: var(--pc); border: 2px solid var(--b1, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.pl-shift__v { text-align: right; font-variant-numeric: tabular-nums; }
.pl-shift__v b { font: 800 14px/1 var(--font-ui, system-ui); }
.pl-shift__v small { display: block; font: 600 11px/1.3 var(--font-ui, system-ui); color: var(--muted, #666); }
@media (max-width: 680px) { .pl-seat__grid { grid-template-columns: 1fr; gap: 18px; } .pl-scn__presets button { padding: 7px 11px; font-size: 12.5px; } .pl-shift__row { grid-template-columns: 92px minmax(0, 1fr) 62px; } }