/* Flattened for the site build: the prototype sat in v27/ beside its
   siblings and reached back into v26/, which no longer exists under a
   public URL. All four files are served from /a/. */
@import url("/a/wp.css");
@import url("/a/skins.css");
@import url("/a/palettes.css");

/* ── navigation ─────────────────────────────────────────────────────────
   Six sections, all visible, none behind a button. A reader on a village
   halt can see that country-pair and terminal pages exist without clicking
   anything — which was the whole failure of hiding them behind "Explore". */
.nv{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
/* NO overflow here. It was overflow-x:auto so the bar could scroll on narrow
   screens, and an overflow container CLIPS its absolutely-positioned
   descendants — so the dropdown panels were being cut off at the bar's edge,
   not painted underneath the strip. Two hours of z-index would never have
   fixed it, because z-index was never the problem.
   Narrow screens get the scroll back below, where the panels are static and
   nothing is clipped. */
/* OPTICAL alignment, not box alignment. The container was 1040px against the
   header's 960px, and the buttons carry 13px of their own padding — so the nav
   TEXT landed at 33px while the logo and breadcrumb sat at 26px. Matching the
   container width and subtracting the button's padding puts the first letter
   of "Places" under the first letter of "waypoints", which is the only
   alignment a reader actually perceives. */
.nv-in{max-width:960px;margin:0 auto;padding:0 13px;display:flex;gap:2px;
  align-items:center}
.nv-i{position:relative}
.nv-b{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-2);
  font:inherit;font-size:14.5px;font-weight:500;letter-spacing:-.005em;
  padding:14px 15px;cursor:pointer;white-space:nowrap}
.nv-b:hover{color:var(--ink)}
.nv-b[aria-expanded="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.nv-p{position:absolute;top:100%;left:0;min-width:340px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:0 0 12px 12px;border-top:0;padding:14px 16px 12px;
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
.nv-h{font-size:12px;color:var(--ink-3);margin-bottom:11px;padding-bottom:9px;
  border-bottom:1px solid var(--line);letter-spacing:.01em}
.nv-p ul{list-style:none;margin:0;padding:0}
.nv-p li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:7px 0;font-size:14px;border-bottom:1px solid transparent}
.nv-p li:hover{border-bottom-color:var(--line)}
.nv-p li a{font-weight:500}
/* Tabular figures so the counts form a column instead of a ragged edge —
   the reason a menu of numbers usually looks untidy. Not a monospace face:
   monospace in navigation reads as code, which this is not. */
.nv-p li span{color:var(--ink-3);font-size:12.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.nv-m{display:inline-block;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  width:100%;font-size:13px;font-weight:600}
@media (max-width:640px){
  .nv-p{position:static;border:0;box-shadow:none;padding:8px 0 12px}
  /* Safe here: the panels are static, so clipping cannot reach them. */
  .nv-in{overflow-x:auto;scrollbar-width:none}
  .nv-in::-webkit-scrollbar{display:none}
}


/* ── footer ─────────────────────────────────────────────────────────── */
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:32px 28px;margin-bottom:30px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.ft-t{font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.ft-cols li{margin:0}
.ft-cols a{font-size:14px;color:var(--ink-2);display:block;padding:5px 0;line-height:1.4}
.ft-cols a:hover{color:var(--ink)}
footer .wrap{font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:960px}
/* The strip carried a monospace face; it read as a terminal, not a masthead. */
.strip,.stamp,.bc{font-family:inherit;letter-spacing:0}
.stamp{font-size:12.5px;color:var(--ink-3)}
.bc{font-size:13px}

/* ── terminal page ──────────────────────────────────────────────────── */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}
.tc{border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.tc .k{font-size:12px;color:var(--ink-3);margin-bottom:4px}
.tc .v{font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}
.tc .d{font-size:12px;color:var(--ink-3);margin-top:3px}
.term{display:grid;gap:10px;margin:14px 0}
.tm{border:1px solid var(--line);border-radius:10px;padding:12px 15px}
.tm .hd{display:flex;align-items:baseline;gap:9px}
.tm .nm{font-weight:650}
.tm .who{font-size:12.5px;color:var(--ink-3)}
.tm .al{margin-top:6px;font-size:13px;color:var(--ink-2)}
.acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.acc span{font-size:12.5px;border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.unk{color:var(--ink-3);font-style:italic}

/* ── passes ─────────────────────────────────────────────────────────── */
.pass{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
.pass th{text-align:left;font-size:12px;color:var(--ink-3);font-weight:500;
  padding:6px 8px;border-bottom:1px solid var(--line)}
.pass td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.pass td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.pass tr:hover{background:var(--bg-2)}
.calc{border:1px solid var(--line);border-radius:10px;padding:16px;margin:16px 0}
.calc label{display:block;font-size:12.5px;color:var(--ink-3);margin:10px 0 4px}
.calc input,.calc select{width:100%;background:var(--bg-2);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:8px 10px;font:inherit}
.verdict{margin-top:14px;padding:13px 15px;border-radius:9px;background:var(--bg-2);
  border-left:3px solid var(--rail,#3b6ea5)}

/* ── terminal page, expanded ────────────────────────────────────────── */
.tbar{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.tbar button{background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);
  border-radius:99px;padding:5px 13px;font:inherit;font-size:13px;cursor:pointer}
/* The selected pill was background:var(--ink) with color:var(--bg), and both
   resolve light in this theme — the label vanished. An invisible selected
   state is worse than no selected state: the reader cannot tell which tab
   they are on. Explicit values, contrast checked, no theme variable that can
   drift underneath it. */
.tbar button[aria-selected="true"]{background:#e8e2d4;color:#12181d;border-color:#e8e2d4;
  font-weight:600}
.tpanel{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:10px}
.tp-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:4px}
.tp-hd h3{margin:0;font-size:17px}
.tp-sub{font-size:12.5px;color:var(--ink-3)}
.al-grid{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.al-grid span{font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:3px 9px;
  background:var(--bg-2)}
.fac{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-top:12px}
.fac div{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px}
.fac b{display:block;font-size:12px;color:var(--ink-3);font-weight:500;margin-bottom:2px}
.hours{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;
  font-size:13.5px;margin-top:8px}
.hours .hb{height:7px;border-radius:99px;background:var(--bg-2);position:relative;overflow:hidden}
.hours .hf{position:absolute;top:0;bottom:0;background:var(--rail,#3b6ea5);opacity:.75}
.hours .ht{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:12.5px}
.near{display:grid;gap:8px;margin-top:10px}
.near .n{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;
  border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.near .nm2{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.lede code{background:var(--bg-2);padding:1px 5px;border-radius:4px;font-size:.9em}


/* ── stacking ───────────────────────────────────────────────────────────
   The nav panels were painting UNDER the breadcrumb strip. The strip comes
   later in the document and is positioned, so at any equal z-index it wins;
   the panels needed to outrank the whole page, not just their siblings.

   This block is deliberately at the END of this file rather than in
   palettes.css: @import places imported rules BEFORE the importing file's
   own, so the .nv{z-index:50} above would beat an identical selector there.
   That is exactly how the first attempt at this failed. */
header{position:relative;z-index:220}
.nv{z-index:200}
.nv-p{z-index:210}
.strip{position:relative;z-index:1}

/* ── the last of the hardcoded colours ──────────────────────────────────
   .box:hover was background:#0b1f28 — the same literal that broke .row:hover.
   In light mode a card went near-black behind near-black text and the whole
   box became unreadable on hover. Fourth one today; every literal colour in
   v26 is a light-mode bug that has not fired yet. */
.box:hover{border-color:var(--ink-2);background:var(--line)}
.box:hover .bl,.box:hover .bf,.box:hover .bg span{color:var(--ink)}
.box:hover .bg span{border-color:var(--ink-2);background:transparent}

/* ── the terminal panel ─────────────────────────────────────────────────
   Two things. The panel sat on --deep, which is the same fill the rows inside
   it use, so the panel and its contents were one flat slab with no edge. It
   now sits a half-step off the page instead of a full one — present, but not
   competing with the text.
   And the values ran flush to the panel's right edge because .fac rows are
   full-bleed inside a padded container. Text touching a border reads as
   broken however deliberate the rest is. */
/* Concrete values, not color-mix: a computed colour cannot be contrast-checked
   from the outside, and an unverifiable contrast is not a passing one. */
.tpanel{background:var(--panel);border-color:var(--line)}
[data-skin="2"] .tpanel,[data-skin="3"] .tpanel{padding:16px 18px}
[data-skin="2"] .fac div,[data-skin="3"] .fac div{padding-inline:2px}
[data-skin="2"] .al-grid,[data-skin="3"] .al-grid{padding-inline:2px}
[data-skin="2"] .tp-hd,[data-skin="3"] .tp-hd{padding-inline:2px}
.fac div,.al-grid span,.tc,.near .n{background:var(--rowbg)}


/* ── two-tier navigation ────────────────────────────────────────────────
   Tier one sits on the logo line and answers "where in the world"; tier two
   answers "what kind of page". They were one bar and the two axes competed —
   Countries and Terminals are places, Routes and Between are journeys, and
   Cruises had nowhere to sit at all. */
header .bar{gap:14px}
.conts{display:flex;gap:2px;margin-left:8px}
.nv-i.top{position:relative}
/* Menu options, not buttons. A bordered pill reads as "press me to do
   something"; these navigate, and they should look like the second tier
   because they behave like it. */
.nv-i.top .nv-b{padding:8px 13px;border:0;border-bottom:2px solid transparent;
  border-radius:0;font-size:14px;font-weight:500;color:var(--ink-2)}
.nv-i.top .nv-b:hover{color:var(--ink)}
.nv-i.top .nv-b[aria-expanded="true"]{background:none;color:var(--ink);
  border-bottom-color:var(--ink)}
header{overflow:visible}
header .bar .mode-t{margin-left:auto}
@media (max-width:640px){
  .nv-i.top{margin-left:8px}
  .nv-i.top .nv-p{position:absolute;border:1px solid var(--line);
    box-shadow:var(--shadow);padding:14px 16px 12px}
}


/* The gap a pointer has to cross between a button and its panel is where
   hover menus die. The delay in nav.js handles intent; this bridges the
   physical gap so the pointer never actually leaves the group. */
.nv-i.top .nv-p{top:calc(100% + 6px)}
.nv-i.top .nv-p::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.nv-i .nv-p::before{content:"";position:absolute;left:0;right:0;top:-4px;height:4px}

/* 860px hid the continents on an ordinary laptop — the whole point of moving
   them out of a "World" button was that they be visible, and a breakpoint that
   aggressive undid it. They shrink first, then scroll, and only fold away on a
   genuine phone. */
@media (max-width:1000px){
  .conts .nv-b{padding:8px 9px;font-size:13px}
  .conts{margin-left:8px;gap:0}
}
@media (max-width:760px){
  .conts{overflow-x:auto;scrollbar-width:none;max-width:46vw}
  .conts::-webkit-scrollbar{display:none}
  /* Scrolling clips absolute children, so panels go static here — the same
     trap that clipped the section nav earlier today. */
  .conts .nv-p{position:fixed;left:12px;right:12px;top:56px}
}
@media (max-width:520px){ .conts{display:none} }


/* ── panels span the page ───────────────────────────────────────────────
   A 340px box hanging off one word is a dropdown. Stretching it to the body
   width is what makes it a mega menu: the columns can breathe, the counts
   line up, and the panel reads as a section of the site rather than a
   tooltip. The anchor moves from the item to the BAR, so every panel opens
   in the same place at the same width — which is also why it stops feeling
   like the menu jumps around as you move across it. */
header .bar, .nv-in{position:relative}
.nv-i, .nv-i.top{position:static}
.nv-p, .nv-i.top .nv-p{
  position:absolute; left:0; right:0; top:100%; min-width:0;
  border-radius:0 0 14px 14px; border-top:1px solid var(--line);
  padding:20px 24px 18px;
}
.nv-p ul{
  columns:3; column-gap:34px;
}
.nv-p li{break-inside:avoid; padding:7px 0}
.nv-h{margin-bottom:14px}
.nv-m{width:auto; display:inline-block; margin-top:14px}
/* The bridge no longer needs to span a gap — the panel is flush — but a
   couple of pixels of tolerance costs nothing and pointers are imprecise. */
.nv-p::before{top:-3px;height:3px}
@media (max-width:900px){ .nv-p ul{columns:2} }
@media (max-width:640px){
  .nv-p ul{columns:1}
  .nv-p, .nv-i.top .nv-p{padding:14px 20px 16px}
}


/* ── typography of the chrome ───────────────────────────────────────────
   The header had four type treatments fighting in one strip: a monospace
   logo, monospace nav counts, a breadcrumb at a third size, and the stamp at
   a fourth. Chrome should be quiet — it is the frame, not the picture — and
   quiet means FEW decisions repeated, not many decisions balanced.

   One scale, two weights, one family. Everything below is a variation on
   13/14px at 400 or 500, and the only thing allowed to be loud is the logo. */

/* The logo is the one place a distinct treatment earns its keep. */
header .bar{font-family:inherit;font-size:14px}
.brand{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1;
  font-family:inherit}
.brand i{font-style:normal;font-weight:400;color:var(--foam)}

/* Both tiers, identical. They are the same kind of thing and were being
   drawn as two different kinds. */
.nv-b, .nv-i.top .nv-b{font-size:14px;font-weight:500;letter-spacing:0;
  color:var(--ink-2);padding:9px 13px}
.nv-in .nv-b{padding:13px 13px}

/* Panels: the hint is a label, the links are content, the counts are data.
   Three roles, three weights, one size. */
.nv-h{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3)}
.nv-p li a{font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.nv-p li span{font-size:13px;font-weight:400;letter-spacing:0}
.nv-m{font-size:13px;font-weight:600;letter-spacing:0}
.nv-p .ic{width:15px;height:15px;flex:none;opacity:.85}

/* The strip carried two competing voices. The breadcrumb is navigation and
   should recede; the stamp is a caveat and should recede further. */
.strip .in{font-size:13px}
.strip .bc{font-size:13px;font-weight:400;color:var(--ink-3)}
.strip .bc a{font-weight:500;color:var(--ink-2)}
.strip .bc .sep{margin:0 6px;opacity:.45}
.strip .stamp{font-size:12px;font-weight:400;color:var(--ink-3)}

.mode-t button{font-size:12.5px;font-weight:500;letter-spacing:0}

/* The prototype density control is gone; nothing should reserve room for it. */
.sw{display:none}
footer{padding-bottom:34px}

/* ── railcards ──────────────────────────────────────────────────────────
   Eligibility is the primary axis, so the ineligible cards are STYLED as
   ineligible rather than hidden: a rule you can see is one you can plan
   around, and several of these turn on a single birthday. */
.q3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.rcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:4px}
.rc{border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:var(--panel)}
.rc.no{opacity:.62;border-style:dashed;background:none}
.rc-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.rc-n{font-weight:650;font-size:15.5px}
.rc-p{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.rc-d{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 10px;font-size:13.5px}
.rc-d dt{color:var(--ink-3);margin:0}
.rc-d dd{margin:0}
.rc-g{font-size:13px;color:var(--ink-2);margin:0 0 10px;padding-left:11px;
  border-left:2px solid var(--line-2)}
.rc-note{font-size:13px;color:var(--ink-3);margin:0 0 12px}
.rc-x{font-size:13px;margin:0;color:var(--ink-3)}
.rc .btn{display:inline-block;margin-top:2px}

/* ── segmented controls ─────────────────────────────────────────────────
   The same shape as the light/dark toggle, because it is the same kind of
   question: a small closed set where seeing the alternatives is half the
   answer. A select would hide them behind a click and cost two interactions
   to change one thing. */
/* Flex, not a fixed grid. At 220px columns the three-option segment wrapped
   INSIDE its own rounded border, which reads as a broken control rather than a
   deliberate one. Letting each question take its natural width means a segment
   either fits on one line or moves to the next row whole. */
.qs{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-start}
.qs .q{flex:0 1 auto;min-width:0}
.q{margin-bottom:14px}
.ql{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:7px}
.seg{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:99px;padding:2px;
  flex-wrap:nowrap;max-width:100%}
.seg button{background:none;border:0;border-radius:99px;color:var(--ink-3);font:inherit;
  font-size:13px;font-weight:500;padding:6px 13px;cursor:pointer;line-height:1.4;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--sea);font-weight:600}

/* Country pills: flag plus name. The flag is decoration on top of a real
   label — aria-hidden, so nothing depends on the emoji rendering. */
.cpills{display:flex;flex-wrap:wrap;gap:7px}
.cpill{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--line);border-radius:99px;color:var(--ink-2);font:inherit;
  font-size:13.5px;font-weight:500;padding:7px 14px;cursor:pointer;line-height:1.4}
.cpill:hover{border-color:var(--ink-3);color:var(--ink)}
.cpill[aria-pressed="true"]{background:var(--ink);color:var(--sea);border-color:var(--ink);
  font-weight:600}
.cpill .fl{font-size:15px;line-height:1}

/* On a phone the segments genuinely cannot fit on one line, so they become a
   column — still one control, still visibly a set, just stacked. */
@media (max-width:560px){
  .seg{flex-wrap:wrap;border-radius:14px}
  .seg button{flex:1 1 auto}
}

/* ── railcards: controls beside results ─────────────────────────────────
   Stacked, every change to a filter meant scrolling down to see what it did
   and back up to change it again — which is the one thing a filter must not
   cost. The controls now sit in a sticky column and the cards flow in two
   beside them, so cause and effect are on screen together. */
.wrap.wide{max-width:1180px}
.rc-layout{display:grid;grid-template-columns:300px 1fr;gap:38px;align-items:start}
.rc-side{position:sticky;top:104px}
.rc-side h2{margin-top:0}
.rc-side .qs{display:block}
.rc-side .seg{flex-wrap:wrap;border-radius:14px}
.rc-side .cpills{gap:6px}
.rc-main .sec:first-child{margin-top:0}
.rc-main .rcs{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media (max-width:900px){
  .rc-layout{grid-template-columns:1fr;gap:0}
  .rc-side{position:static}
  .rc-side .qs{display:flex;flex-wrap:wrap;gap:16px 28px}
  .rc-side .seg{flex-wrap:nowrap;border-radius:99px}
}

/* ── cruise finder ──────────────────────────────────────────────────────
   Five axes, because five are what people actually browse on: a date WINDOW,
   where you get on, where it calls, how long, and what it costs. The earlier
   version had month toggles and a shape switch, which is a filter for a
   catalogue of twelve — not for 69,460 sailings.

   The premium feel is not ornament. It is: one accent colour, generous line
   spacing, figures that align in a column, and a card that leads with the
   itinerary rather than the ship's name. */
.cf{display:grid;grid-template-columns:308px 1fr;gap:44px;align-items:start}
.cf-side{position:sticky;top:104px;max-height:calc(100vh - 130px);overflow-y:auto;
  padding-right:6px;scrollbar-width:thin}
.cf-g{padding:18px 0;border-bottom:1px solid var(--line)}
.cf-g:first-child{padding-top:0}
.cf-g:last-child{border-bottom:0}
.cf-t{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:11px;display:flex;justify-content:space-between;align-items:baseline}
.cf-t button{background:none;border:0;color:var(--ink-3);font:inherit;font-size:11px;
  text-transform:none;letter-spacing:0;cursor:pointer;text-decoration:underline}
.cf-t button:hover{color:var(--ink)}

/* date window */
.dw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dw label{font-size:11.5px;color:var(--ink-3);display:block;margin-bottom:4px}
.dw input{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:13px}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.presets button{background:none;border:1px solid var(--line);border-radius:99px;
  color:var(--ink-2);font:inherit;font-size:12px;padding:4px 11px;cursor:pointer}
.presets button:hover{border-color:var(--ink-3);color:var(--ink)}
.presets button[aria-pressed="true"]{background:var(--ink);color:var(--sea);border-color:var(--ink)}

/* range sliders with a live read-out */
.rng{display:grid;gap:6px}
.rng .rv{font-size:13px;font-variant-numeric:tabular-nums;font-weight:600}
.rng input[type=range]{width:100%;accent-color:var(--foam)}

/* multi-select ports */
.msearch{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;font:inherit;font-size:13px;margin-bottom:9px}
.mopts{display:flex;flex-wrap:wrap;gap:6px;max-height:168px;overflow-y:auto}
.mopt{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);
  border-radius:99px;color:var(--ink-2);font:inherit;font-size:12.5px;padding:5px 11px;cursor:pointer}
.mopt:hover{border-color:var(--ink-3);color:var(--ink)}
.mopt[aria-pressed="true"]{background:var(--ink);color:var(--sea);border-color:var(--ink);
  font-weight:600}

/* the applied-filters line: what is on, and one click to take it off */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--line);border-radius:99px;font-size:12.5px;padding:5px 7px 5px 12px}
.chip button{background:none;border:0;color:var(--ink-3);font:inherit;font-size:14px;
  line-height:1;cursor:pointer;padding:0 3px}
.chip button:hover{color:var(--ink)}
.chips .n{font-size:13px;color:var(--ink-3);margin-right:2px}

/* result card, leading with the itinerary */
.cr{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--panel);
  display:grid;gap:14px}
.cr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.cr-when{font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}
.cr-h{font-size:19px;font-weight:650;letter-spacing:-.01em;margin:3px 0 0;line-height:1.25}
.cr-px{text-align:right;white-space:nowrap}
.cr-px b{display:block;font-size:21px;font-weight:650;font-variant-numeric:tabular-nums}
.cr-px span{font-size:11.5px;color:var(--ink-3)}
.cr-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2)}
.cr-meta b{font-weight:600;color:var(--ink)}
.cr-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;line-height:1.9}
.cr-path .p{color:var(--ink-2)}
.cr-path .p.hit{color:var(--ink);font-weight:650;border-bottom:2px solid var(--foam)}
.cr-path .p.end{font-weight:650;color:var(--ink)}
.cr-path .ar{color:var(--ink-3);opacity:.6;font-size:11px}
.cr-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:13px;border-top:1px solid var(--line)}
.cr-tag{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cr-tag.one{color:var(--foam)}
.crs{display:grid;gap:14px}
.sortbar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-bottom:16px;flex-wrap:wrap}
.sortbar .seg button{font-size:12.5px;padding:5px 11px}
@media (max-width:960px){
  .cf{grid-template-columns:1fr;gap:0}
  .cf-side{position:static;max-height:none;overflow:visible;margin-bottom:26px}
}

/* A flag before each call. Small, baseline-aligned, and aria-hidden — the port
   name is the label, the flag is a second channel on top of it. */
.cr-path .pf{margin-right:5px;font-size:12.5px;line-height:1}
.cr-meta .nm{text-decoration:underline;text-underline-offset:2px}

/* ── vessel page: port frequency ────────────────────────────────────────
   "Calls at Santorini on 9 of 9 sailings" is a property of the SHIP; a single
   itinerary is not. The bar makes the recurring ports readable at a glance,
   which is the one thing an operator's own site never shows you. */
.pfreq{display:grid;grid-template-columns:1fr 56px auto;gap:10px;align-items:center;
  padding:5px 0;font-size:13.5px}
.pfreq .pn{display:flex;align-items:center;gap:2px}
.pfreq .pb{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.pfreq .pf2{display:block;height:100%;background:var(--foam)}
.pfreq .pc{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:12.5px;
  white-space:nowrap;text-align:right}
#hist .pfreq{grid-template-columns:1fr 44px auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mopts a.mopt{text-decoration:none}

.cf-sub{font-size:11px;letter-spacing:.04em;color:var(--ink-3);text-transform:none}

/* ── past seasons ───────────────────────────────────────────────────────
   Routes and dates, no prices. Compact because it is reference material —
   the reader is checking a pattern, not shopping. */
.pastg{border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:12px;
  background:var(--panel)}
.pasth{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.pasth b{font-size:17px;font-weight:650;font-variant-numeric:tabular-nums}
.pasth span{font-size:13px;color:var(--ink-3)}
.pastr{display:grid;grid-template-columns:78px 1fr auto;gap:14px;align-items:baseline;
  padding:7px 0}
.pastn{font-size:13px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pastr .cr-path{line-height:1.7;font-size:13px}
.pastx{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:640px){ .pastr{grid-template-columns:1fr;gap:3px} }

/* ── index pages ────────────────────────────────────────────────────────
   An index has one job: let a reader find the one row they came for, out of
   hundreds, without scrolling. So every index gets the same three things —
   a filter that types, a grouping that means something, and a count that
   tells you how much you are looking at. */
.ix-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 22px}
.ix-tools input[type=search]{flex:1 1 260px;min-width:200px;background:var(--panel);
  color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px 13px;
  font:inherit;font-size:14px}
.ix-count{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ix-group{margin-bottom:30px}
.ix-gh{display:flex;align-items:baseline;gap:11px;margin-bottom:11px;padding-bottom:9px;
  border-bottom:1px solid var(--line)}
.ix-gh h2{margin:0;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.ix-gh span{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ix-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 26px}
.ix-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px solid transparent;font-size:14px}
.ix-r:hover{border-bottom-color:var(--line)}
.ix-r .l{display:flex;align-items:baseline;gap:7px;min-width:0}
.ix-r .l a{font-weight:500}
.ix-r .m{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ix-r .mi{font-size:11px;color:var(--ink-3);letter-spacing:.03em}
.ix-empty{color:var(--ink-3);font-style:italic;padding:14px 0}

/* ── homepage ───────────────────────────────────────────────────────────
   No search box. The counts are the argument, so they lead; the examples are
   worked answers rather than feature bullets; the doors carry their numbers,
   because a door with a count on it is an invitation and one without is a
   menu. */
.hero.home{padding-bottom:8px}
.hero.home h1{max-width:16ch}
.hcount{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hc{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);
  border-radius:11px;padding:11px 15px;text-decoration:none;background:var(--panel)}
.hc:hover{border-color:var(--ink-3)}
.hc b{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hc span{font-size:12px;color:var(--ink-3)}

.ex{display:grid;gap:16px}
.exc{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:var(--panel)}
.exk{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:7px}
.exc h3{margin:0 0 10px;font-size:21px;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.exc p{margin:0 0 16px;font-size:15px;line-height:1.7;max-width:62ch;color:var(--ink-2)}
.exc p b{color:var(--ink)}

/* the arrival-hour chart: opening hours with your landing time drawn across */
.rhy{margin:0 0 18px;max-width:520px}
.rhy-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;margin-bottom:5px}
.rhy-r{display:grid;grid-template-columns:96px 1fr;gap:11px;align-items:center;margin:4px 0}
.rhy .rk{font-size:12.5px;color:var(--ink-3)}
.rhy .rb{position:relative;height:8px;border-radius:99px;background:var(--line)}
.rhy .rf{position:absolute;top:0;bottom:0;background:var(--foam);border-radius:99px}
.rhy .rl{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dusk)}
.rhy-n{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);margin-top:9px}
.rl-key{width:2px;height:12px;background:var(--dusk);display:inline-block}

.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.door{display:grid;gap:3px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  text-decoration:none;background:var(--panel)}
.door:hover{border-color:var(--ink-3)}
.dt{font-size:15.5px;font-weight:650}
.dn{font-size:12.5px;color:var(--foam);font-variant-numeric:tabular-nums}
.dd{font-size:13px;color:var(--ink-3);margin-top:4px}

.covr{display:grid;grid-template-columns:92px 120px 62px 1fr;gap:14px;align-items:center;
  padding:7px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.covr .ck{font-weight:600}
.covr .cb{height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.covr .cf{display:block;height:100%;background:var(--foam)}
.covr .cn{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.covr .cd{font-size:12.5px;color:var(--ink-3)}
@media (max-width:700px){
  .covr{grid-template-columns:1fr auto;gap:4px 10px}
  .covr .cb,.covr .cd{grid-column:1/-1}
}

/* ── cruise timeline ────────────────────────────────────────────────────
   A list of ports tells you WHERE. A timeline tells you the SHAPE of the
   holiday — and the shape is what people actually compare. Two seven-night
   Mediterranean cruises can be four ports and three sea days, or six ports
   back to back, and no port list makes that visible. */
.tl{margin:16px 0}
.tl-days{display:grid;gap:2px;margin-bottom:8px}
.tl-d{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:stretch;min-height:44px}
.tl-dn{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;
  padding-top:12px;font-variant-numeric:tabular-nums}
.tl-bar{position:relative;border-radius:9px;padding:9px 13px;display:flex;
  align-items:center;gap:9px;background:var(--rowbg);border:1px solid var(--line)}
.tl-bar.sea{background:none;border-style:dashed;color:var(--ink-3)}
.tl-bar.port{background:var(--panel)}
.tl-bar.end{border-color:var(--ink-3)}
.tl-nm{font-weight:600;font-size:14px}
.tl-hrs{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.tl-ash{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--foam);
  border-radius:99px;opacity:.55}
.tl-key{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--ink-3);margin-top:10px}
.tl-key span{display:flex;align-items:center;gap:6px}
.tl-sw{width:16px;height:8px;border-radius:99px;border:1px solid var(--line);display:inline-block}
.tl-sw.p{background:var(--panel)}
.tl-sw.s{border-style:dashed;background:none}
.tl-sw.a{background:var(--foam);height:3px;border:0}

/* the ashore-window strip: how many usable hours each call gives you */
.ash{display:grid;grid-template-columns:110px 1fr 62px;gap:12px;align-items:center;
  font-size:13.5px;padding:5px 0}
.ash .ab{position:relative;height:22px;border-radius:6px;background:var(--line);overflow:hidden}
.ash .af{position:absolute;top:0;bottom:0;background:var(--foam);opacity:.7}
.ash .at{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:7px;
  font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.ash .ah{font-variant-numeric:tabular-nums;color:var(--ink-3);text-align:right;font-size:12.5px}
.ash-scale{display:grid;grid-template-columns:110px 1fr 62px;gap:12px;font-size:11px;
  color:var(--ink-3);margin-bottom:4px}
.ash-scale div:nth-child(2){display:flex;justify-content:space-between}

/* ── stops, stacked ─────────────────────────────────────────────────────
   Replaces the invented-clock timeline. Each call is a disclosure; opening it
   shows what we ACTUALLY hold from that port, which is a claim we can make. */
.stops{display:grid;gap:8px;margin:16px 0}
.stop{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.stop-h{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  color:var(--ink);font:inherit;text-align:left;padding:14px 17px;cursor:pointer}
.stop-h:hover{background:var(--rowbg)}
.stop-n{width:26px;height:26px;border-radius:99px;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--ink-3)}
.stop[open] .stop-n,.stop-h[aria-expanded="true"] .stop-n{background:var(--ink);color:var(--sea);
  border-color:var(--ink);font-weight:650}
.stop-nm{font-weight:650;font-size:15.5px}
.stop-c{font-size:12.5px;color:var(--ink-3)}
.stop-r{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.stop-car{font-size:11px;color:var(--ink-3);transition:transform .15s}
.stop-h[aria-expanded="true"] .stop-car{transform:rotate(180deg)}
.stop-b{padding:2px 17px 16px;border-top:1px solid var(--line)}

/* allowance bar: the only time claim we make, and it is OURS not the ship's */
.allow{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center;
  margin:12px 0 16px;font-size:13px}
.allow .ab2{position:relative;height:26px;border-radius:7px;background:var(--line);
  overflow:hidden;display:flex}
.allow .seg2{height:100%;display:flex;align-items:center;padding:0 9px;font-size:11.5px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* A LABEL ON THE ACCENT MUST FLIP WITH THE ACCENT.
   The fixed dark value here was chosen when --foam was gold in both modes. It
   is not: light mode makes it #8a5a12, a dark brown, and dark-on-dark measured
   3.03:1 -- here, on the homepage's fast-boat bar and on the port page's speed
   bars, all three of which used the same literal. --sea is the page
   background, so it is always the opposite lightness of the accent: 8.36:1
   dark, 5.53:1 light, and it stays correct if either colour is retuned. */
.allow .seg2.on{background:var(--foam);color:var(--sea);font-weight:600}
.allow .seg2.off{color:var(--ink-3)}
.allow-k{color:var(--ink-3)}
.held{display:grid;gap:1px}
.held-h{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  margin:4px 0 7px}
.held-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.held-r:last-child{border-bottom:0}
.held-r .hm{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.held-none{font-size:13.5px;color:var(--ink-3);font-style:italic;padding:8px 0}

/* ── open now ───────────────────────────────────────────────────────────
   Opening hours drawn against the reader's own clock. The hours are medians
   and not live; the clock is. Both are labelled, because mixing a real value
   with an estimated one silently is how a chart starts lying. */
.now-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:4px}
.now-t{font-size:30px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.now-z{font-size:12.5px;color:var(--ink-3)}
.now-s{font-size:14px;color:var(--ink-2)}
.oc{margin:18px 0}
.oc-scale{display:grid;grid-template-columns:118px 1fr 92px;gap:12px;font-size:11px;
  color:var(--ink-3);margin-bottom:6px}
.oc-scale .t{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.oc-r{display:grid;grid-template-columns:118px 1fr 92px;gap:12px;align-items:center;
  padding:5px 0;font-size:13.5px}
.oc-b{position:relative;height:20px;border-radius:6px;background:var(--line);overflow:hidden}
.oc-f{position:absolute;top:0;bottom:0;background:var(--foam);opacity:.55}
.oc-f.shut{opacity:.2}
.oc-now{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);z-index:2}
/* "closed 14:30" broke over two lines in the 66px column and read as two
   separate facts. The column is wider and the value never wraps. */
.oc-st{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.oc-st.open{color:var(--ink)}
.oc-st.shut{color:var(--ink-3)}
.oc-key{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--ink-3);margin-top:10px}
.oc-key span{display:flex;align-items:center;gap:6px}
.oc-sw{width:16px;height:8px;border-radius:3px;background:var(--foam);opacity:.55;display:inline-block}
.oc-sw.n{width:2px;height:13px;border-radius:0;background:var(--ink);opacity:1}

/* ── homepage, second pass ──────────────────────────────────────────────
   The first one argued in paragraphs. Each claim is now a CHART with a
   caption under it, because the charts are the evidence and the paragraphs
   were only describing them. */
.hero.home h1{max-width:14ch;margin-bottom:10px}
.hero.home .stand{max-width:46ch}

.proof{display:grid;gap:34px;margin-top:8px}
.pf-k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:9px}
.pf-cap{font-size:14px;line-height:1.65;color:var(--ink-2);max-width:58ch;margin:13px 0 0}
.pf-cap b{color:var(--ink)}

/* two bars, one half the other — the fast ferry */
.vs{display:grid;gap:7px;max-width:560px}
.vs-r{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center}
.vs-k{font-size:13px;color:var(--ink-3)}
.vs-b{height:34px;border-radius:8px;background:var(--foam);display:flex;align-items:center;
  padding:0 12px;font-size:13.5px;font-weight:650;color:var(--sea);white-space:nowrap}
.vs-b.slow{background:var(--line);color:var(--ink-2);font-weight:500}

/* the journey chain */
.chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;max-width:640px}
.ch-leg{display:flex;flex-direction:column;justify-content:center;padding:11px 14px;
  border:1px solid var(--line);background:var(--panel);flex:1 1 auto;min-width:112px}
.ch-leg:first-child{border-radius:10px 0 0 10px}
.ch-leg:last-child{border-radius:0 10px 10px 0}
.ch-leg + .ch-leg{border-left:0}
.ch-p{font-weight:650;font-size:14px}
.ch-m{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px;margin-top:2px}
.ch-m .ic{width:13px;height:13px}
.ch-sum{display:flex;flex-wrap:wrap;gap:18px;margin-top:11px;font-size:13px;color:var(--ink-3)}
.ch-sum b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ── what we hold ───────────────────────────────────────────────────────
   The old bar chart said only "how many". What a reader needs is WHICH
   FIELDS — a region with 38,412 routes and no durations is a different
   proposition from one with 2,104 and all of them timed. */
.hold{width:100%;border-collapse:collapse;font-size:13.5px}
.hold th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.hold th.c,.hold td.c{text-align:center;width:74px}
.hold td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.hold .rg{font-weight:600}
.hold .n{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right;
  width:72px;padding-right:16px}
.tick{font-size:14px;line-height:1}
.tick.y{color:var(--foam)}
.tick.p{color:var(--dusk)}
.tick.n{color:var(--ink-3);opacity:.5}
.hold .in{color:var(--ink-3);font-size:12.5px;line-height:1.55}
.hold-key{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--ink-3);margin-top:11px}

/* cruise strip: sailings by month */
.mstrip{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:end;height:76px;
  max-width:560px}
.mb{background:var(--foam);border-radius:3px 3px 0 0;opacity:.75;min-height:2px}
.mb.peak{opacity:1}
.mlab{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;font-size:10.5px;
  color:var(--ink-3);margin-top:5px;text-align:center;max-width:560px}

/* ── homepage, third pass: an entrance, not a gallery ───────────────────
   The second pass opened straight into charts. Good charts — but a reader
   arriving cold met four worked examples before learning what the site was,
   and left with "nice graphs" rather than "I can look things up here".

   So the order is now: what this is, a box to type in, three things to type,
   then where to browse, then the evidence. Navigation and visualisation are
   in SEPARATE blocks; mixing them was what made the page read as a gallery.

   The search box is deliberately the largest element on the page. Everything
   downstream is a route INTO a lookup, so the lookup itself should not be
   the smallest thing on screen. */
.hero.home h1{max-width:15ch;margin-bottom:14px}
.hero.home .stand{max-width:58ch}

.hs{position:relative;margin:30px 0 0;max-width:720px}
.hs-f{display:flex;align-items:center;gap:13px;border:1.5px solid var(--line-2);
  border-radius:16px;background:var(--panel);padding:0 19px}
.hs-f:focus-within{border-color:var(--ink-3)}
.hs-i{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:inherit;
  font-size:clamp(19px,2.6vw,26px);font-weight:500;padding:19px 0;letter-spacing:-.012em}
.hs-i:focus{outline:none}
.hs-i::placeholder{color:var(--ink-3);font-weight:400}
.hs-mag{width:21px;height:21px;flex:none;opacity:.55;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round}

/* The list a reader can actually reach. The first version rendered matches
   and then swallowed every click, because a plain click fires AFTER blur has
   already torn the list down — hence mousedown, and a full keyboard path. */
.hs-list{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:60;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;padding:6px;
  max-height:min(58vh,470px);overflow-y:auto;list-style:none;margin:0;
  box-shadow:0 18px 46px rgba(0,0,0,.30)}
.hs-list[hidden]{display:none}
.hs-gh{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 13px 5px}
.hs-o{display:flex;align-items:baseline;gap:10px;padding:9px 13px;border-radius:9px;
  cursor:pointer;font-size:15px}
.hs-o[aria-selected="true"]{background:var(--line)}
.hs-o .n{font-weight:600}
.hs-o .k{font-size:12px;color:var(--ink-3)}
.hs-o .m{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.hs-none{padding:15px 13px;font-size:14px;color:var(--ink-3);font-style:italic}

.hs-ex{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:15px;font-size:13.5px}
.hs-ex .lb{color:var(--ink-3)}
.hs-ex button{background:none;border:1px solid var(--line);border-radius:99px;color:var(--ink-2);
  font:inherit;font-size:13.5px;padding:6px 14px;cursor:pointer;line-height:1.4}
.hs-ex button:hover{border-color:var(--ink-3);color:var(--ink)}

/* Four numbers, read once, never repeated in prose above them. */
.trust{display:flex;flex-wrap:wrap;gap:10px 32px;margin-top:30px;padding-top:20px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.trust span{display:flex;align-items:baseline;gap:7px}
.trust b{color:var(--ink);font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}

/* Explore by — every door in one block, so navigation stops competing with
   the charts for the reader's attention. */
.xp{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:12px}
.xpc{display:grid;gap:3px;align-content:start;border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;text-decoration:none;background:var(--panel)}
.xpc:hover{border-color:var(--ink-3)}
.xp-t{font-size:15.5px;font-weight:650;display:flex;align-items:baseline;gap:9px;
  justify-content:space-between}
.xp-n{font-size:12.5px;color:var(--foam);font-variant-numeric:tabular-nums;white-space:nowrap}
.xp-d{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}
.xp-e{font-size:12.5px;color:var(--ink-2);margin-top:6px}
/* The highlight lifts the backdrop just far enough to break the secondary
   text: --ink-3 on --line measures 4.33:1 in dark, under the 4.5 floor, while
   the same colour on the list background is 5.57. So it steps up one level on
   the selected row only — where the contrast problem actually exists. */
.hs-o[aria-selected="true"] .k,
.hs-o[aria-selected="true"] .m{color:var(--ink-2)}

/* ── port page: the destination list, made rich ─────────────────────────
   The old row was a name and maybe an operator, and it said "not held" in
   the time column for all 82 rows. That was true of the GRAPH and false of
   the feed: ferry-edges.csv drops the minutes column, the GTFS behind it
   keeps a crossing time on 288 of Piraeus' 462 trips. The row now carries
   everything the feed actually holds — both speeds, every operator, a
   weekly rate and a distance.

   Four columns, because a reader scanning 73 destinations is answering four
   questions in order: where, how far, how long, how often. */
/* Capped, not full-bleed. At the 1180px wide wrap the name column measured
   868px and threw the crossing time to the far side of the screen, so the eye
   had to travel the width of the page for every one of 73 rows. */
.drs{display:grid;gap:1px;max-width:960px}
.dr{display:grid;grid-template-columns:minmax(0,1fr) 268px 96px;gap:8px 20px;
  align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.dr:last-child{border-bottom:0}
.dr-n{font-size:15px;font-weight:600;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dr-n a{text-decoration:none}
.dr-n a:hover{text-decoration:underline;text-underline-offset:3px}
/* The hub links. Every destination is also a place, a country and a crossing,
   and a reader who wants the island rather than the boat should not have to
   go back to the search box to say so. */
.dr-x{display:flex;gap:9px;font-size:11.5px;font-weight:400}
.dr-x a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2)}
.dr-x a:hover{color:var(--ink)}
.dr-n,.dr-m,.dr-w{align-self:start}
.dr-m{grid-column:1;font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}
/* An operator is a page. It was plain grey text listing companies whose own
   routes, reach and coverage we hold — the one thing a gazetteer must not do
   is mention an entity it has a page for and not link it. */
.dr-m a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.dr-m a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.dr-more{background:none;border:0;color:var(--ink-3);font:inherit;font-size:12.5px;
  cursor:pointer;padding:0;margin-left:7px;border-bottom:1px dotted var(--ink-3)}
.dr-more:hover{color:var(--ink)}
.dr-t{text-align:right;font-variant-numeric:tabular-nums;font-size:13.5px;white-space:nowrap}
.dr-t .fastv{color:var(--foam);font-weight:650}
.dr-t .slowv{color:var(--ink-2)}
.dr-t .none{color:var(--ink-3);font-style:italic;font-size:12.5px}
.dr-f{text-align:right;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.dr-f .approx{color:var(--ink-3);font-size:11.5px;display:block}
@media (max-width:640px){
  .dr{grid-template-columns:1fr auto}
  .dr-t,.dr-f{text-align:left;grid-column:1}
}

/* ── three facts ────────────────────────────────────────────────────────
   Computed at render from the same JSON the list is drawn from, never typed.
   A hand-written fact is a fact that goes stale the first time the feed
   changes and nobody notices for a year. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;
  margin:4px 0 6px}
.fact{border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:var(--panel)}
/* The child combinator matters: the sentence underneath carries its own <b>
   for the place names, and a bare `.fact b` turned every one of them into a
   22px block heading on its own line. */
.fact > b{display:block;font-size:22px;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-bottom:5px}
.fact span b{color:var(--ink);font-weight:650}
.fact span{font-size:13px;color:var(--ink-2);line-height:1.55}

/* ── the reach line ─────────────────────────────────────────────────────
   Our map, not a map service's. One axis, every destination on it, and the
   SHAPE is the point: Piraeus is a dense cluster of Saronic islands inside
   100 km with a long thin tail out to Kastelorizo. No basemap can say that
   as fast, and this one is drawn from the coordinates we hold. */
.reach{margin:18px 0 30px}
/* Height is set by the tallest stack, in JS, because it depends on how the
   points bin at the width the element actually got. */
.reach-l{position:relative;min-height:34px;border-bottom:1px solid var(--line-2)}
/* Dots stack UPWARD from the axis, one column per dot-width. See reach.js for
   why stacking beats both a single strip and the obvious fix of splitting the
   axis across two lines. */
.reach-d{position:absolute;width:7px;height:7px;margin-left:-3.5px;border-radius:99px;
  background:var(--foam);opacity:.5;display:block;text-decoration:none}
.reach-d.big{opacity:.95;width:9px;height:9px;margin-left:-4.5px}
a.reach-d:hover,a.reach-d:focus-visible{opacity:1;background:var(--ink);outline:none;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink-3)}
/* Labels sit BELOW the axis now: the dots own the space above it. */
/* A staggered label's tick has to reach back up to the axis, which means it
   crosses whatever sits on the row above it — London's leader ran straight
   through "Frankfurt am Main". The label carries the page colour and a higher
   stacking level than the rows below it, so the text occludes the line
   instead of fighting it. */
.reach-t{position:absolute;top:100%;font-size:11px;color:var(--ink-2);white-space:nowrap;
  transform:translateX(-50%);text-align:center;background:var(--bg);padding:0 4px;
  border-radius:3px}
.reach-t i{display:block;width:1px;height:7px;background:var(--line-2);margin:0 auto 3px}
/* The axis ends sit below whatever the labels needed; reach.js measures the
   lowest label and grows the line's own margin, so this only has to clear the
   first row. */
.reach-s{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;margin-top:6px}

/* ── two speeds, same water ─────────────────────────────────────────────
   The one comparison a ferry operator will never show you, because it is a
   comparison with the operator next to them. 22 crossings from Piraeus have
   both a fast boat and a conventional one on the same water. */
.two{display:grid;gap:13px;margin:18px 0}
.two-r{display:grid;grid-template-columns:132px 1fr 66px;gap:14px;align-items:center}
.two-k{font-size:13.5px;font-weight:600}
.two-b{display:grid;gap:3px}
.two-s{height:15px;border-radius:4px;display:flex;align-items:center;padding:0 7px;
  font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:52px}
.two-s.f{background:var(--foam);color:var(--sea);font-weight:650}
.two-s.c{background:var(--line);color:var(--ink-2)}
.two-x{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.two-x b{color:var(--ink);font-weight:650}
@media (max-width:600px){ .two-r{grid-template-columns:1fr 56px;gap:6px 10px}
  .two-b{grid-column:1/-1} }

/* ── the quay, drawn ────────────────────────────────────────────────────
   Eight gates over two kilometres is the single most useful thing on this
   page and it was a list. Visual memory holds a line; it does not hold
   "E7 — Cyclades, fast ferries". */
.quay{margin:16px 0 10px;overflow-x:auto;padding-bottom:4px}
/* Side padding, because the first and last gate buttons are centred on the
   ends of the line and would otherwise hang half outside the box. */
.quay-in{min-width:520px;position:relative;padding:26px 30px 4px}
.quay-l{position:relative;height:6px;border-radius:99px;background:var(--line-2)}
.quay-g{position:absolute;top:-24px;transform:translateX(-50%);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px}
.quay-g button{background:var(--panel);border:1px solid var(--line-2);border-radius:7px;
  color:var(--ink);font:inherit;font-size:12px;font-weight:650;padding:4px 9px;cursor:pointer;
  font-variant-numeric:tabular-nums}
.quay-g button:hover{border-color:var(--ink-3)}
.quay-g button[aria-pressed="true"]{background:var(--ink);color:var(--sea);border-color:var(--ink)}
.quay-g i{width:1px;height:9px;background:var(--line-2);display:block}
.quay-e{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:9px}
.quay-p{border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:var(--panel);
  margin-top:6px}
.quay-p .g{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:6px}
.quay-p .w{font-size:16px;font-weight:650;margin-bottom:5px}
.quay-p .e{font-size:13.5px;color:var(--ink-2)}

/* ── access, with a mode icon ───────────────────────────────────────────
   The sprite the rest of the site uses, not emoji: emoji redraw themselves
   per platform and this sits beside a figure the reader is meant to compare. */
.tc-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.tc-h .ic{width:16px;height:16px;flex:none;opacity:.85}
.tc-h .k{font-size:12px;color:var(--ink-3)}

/* An explanation that only the reader who wants it has to read. */
.why{margin-top:12px;font-size:13px}
.why summary{color:var(--ink-3);cursor:pointer;list-style:none;display:inline-flex;gap:6px;
  align-items:center;border-bottom:1px solid var(--line-2);padding-bottom:1px}
.why summary::-webkit-details-marker{display:none}
.why summary:hover{color:var(--ink)}
.why summary::before{content:"›";transition:transform .15s;display:inline-block}
.why[open] summary::before{transform:rotate(90deg)}
.why p{color:var(--ink-2);line-height:1.65;max-width:62ch;margin:11px 0 0}

/* Skin 2 hid the access description because a two-column row had nowhere to
   put it, which left "Metro line 1 — 22 min" and no answer to "22 minutes to
   where?". Wrapping the label with its icon gives the left column a block of
   its own, so the detail comes back underneath it. */
[data-skin="2"] .tc{align-items:center}
[data-skin="2"] .tc .tc-h{grid-column:1;grid-row:1;margin-bottom:3px}
[data-skin="2"] .tc .v{grid-column:2;grid-row:1/3}
[data-skin="2"] .tc .d{display:block;grid-column:1;grid-row:2;margin:0;font-size:12.5px}

/* ── next step ──────────────────────────────────────────────────────────
   ONE block, high on the page, and nothing else anywhere below it.

   Framed as ACTIONS rather than merchants: a reader thinks "I need somewhere
   to sleep", not "I need Booking.com". The provider sits behind the verb, so
   swapping a programme never rewrites the page — and two of these four have
   no programme at all yet, which the action framing absorbs without leaving a
   dead button where a live one should be. */
.next{border:1px solid var(--line);border-radius:14px;padding:17px 20px;background:var(--panel);
  margin:6px 0 4px}
.next-h{font-size:13px;color:var(--ink-3);margin-bottom:12px;display:flex;
  justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.next-h b{color:var(--ink);font-size:15px;font-weight:650}
.next-as{display:flex;flex-wrap:wrap;gap:9px}
.next-a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);
  border-radius:99px;padding:8px 15px;text-decoration:none;font-size:13.5px;color:var(--ink-2);
  background:var(--bg)}
.next-a:hover{border-color:var(--ink-3);color:var(--ink)}
.next-a .ic{width:15px;height:15px;flex:none;opacity:.8}
.next-a i{font-style:normal;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)}

/* ── medians ────────────────────────────────────────────────────────────
   "Half of everything Piraeus reaches is inside 233 km" was the single line
   readers reacted to, so the other two halves get the same treatment. A
   median needs no distribution to be understood and cannot be skewed by the
   one 27-hour outlier that would wreck a mean. */
.med{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border-top:1px solid var(--line);margin:20px 0 4px}
.med div{padding:14px 18px 14px 0;border-right:1px solid var(--line)}
.med div:last-child{border-right:0}
.med b{display:block;font-size:20px;font-weight:650;font-variant-numeric:tabular-nums;
  letter-spacing:-.015em}
.med span{font-size:12px;color:var(--ink-3);display:block;margin-top:3px;line-height:1.45}
.med .off b{color:var(--ink-3);font-weight:500;font-size:15px}
@media (max-width:640px){ .med div{border-right:0;border-bottom:1px solid var(--line)} }

/* the three numbers that sit above the fast-ferry chart */
.fsum{display:flex;flex-wrap:wrap;gap:10px 34px;margin:2px 0 20px;font-size:13px;
  color:var(--ink-3)}
.fsum span{display:flex;align-items:baseline;gap:8px}
.fsum b{color:var(--ink);font-size:17px;font-weight:650;font-variant-numeric:tabular-nums}

/* ── filters ────────────────────────────────────────────────────────────
   THE BANDS ARE GONE, and so are the seven preset pills that replaced them.

   Bands were a real cognitive bug, not a cosmetic one. Rows were grouped by
   their FASTEST option, so Tinos sat under "1 to 3 hours" on a 2 h 25 fast
   boat while its conventional ferry — 5 h 00, two hours past the heading —
   drew in the same box, clamped to full width against a three-hour scale.
   The chart said "5 h 00" and drew it as three.

   A range you drag has no such seam: the upper handle IS the scale, so
   nothing can exceed the axis it is measured against, and the reader picks
   the boundary instead of inheriting ours. */
.filt{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:flex-end;margin:0 0 22px}
/* The sort segment sits in the same row as the sliders, so it has to sit on
   the same baseline as them rather than on the taller one it was built for. */
.filt-g .seg{margin:0}
.filt-g .seg button{padding:6px 13px}
.filt-g{display:grid;gap:6px}
.filt-l{font-size:12px;color:var(--ink-3)}
.filt-l b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.filt-b{display:flex;gap:8px}
.filt-b button{background:none;border:1px solid var(--line);border-radius:99px;color:var(--ink-2);
  font:inherit;font-size:13px;padding:6px 14px;cursor:pointer;line-height:1.4}
.filt-b button:hover{border-color:var(--ink-3);color:var(--ink)}
.filt-b button[aria-pressed="true"]{background:var(--ink);color:var(--sea);border-color:var(--ink);
  font-weight:600}

/* Two handles on one track. The inputs are transparent and only their thumbs
   take the pointer, so the lower one stays reachable when the two meet. */
/* 300px each pushed the sort segment onto a second row. Four controls on one
   line is the point of putting them together, so the tracks give up the width
   the segment needs. */
.rng2{position:relative;height:22px;width:210px;max-width:100%}
.rng2-t{position:absolute;top:9px;left:0;right:0;height:4px;border-radius:99px;background:var(--line)}
.rng2-f{position:absolute;top:0;bottom:0;background:var(--foam);border-radius:99px}
.rng2 input{position:absolute;top:0;left:0;width:100%;height:22px;margin:0;padding:0;
  background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.rng2 input:focus{outline:none}
.rng2 input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:17px;height:17px;
  border-radius:99px;background:var(--ink);border:2px solid var(--bg);cursor:ew-resize}
.rng2 input::-moz-range-thumb{pointer-events:auto;width:17px;height:17px;border:2px solid var(--bg);
  border-radius:99px;background:var(--ink);cursor:ew-resize}
.rng2 input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--line-2)}
.rng2 input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--line-2)}

/* the one-line note under a destination, where the data earns one */
.dr-w{grid-column:1;font-size:12.5px;color:var(--foam);margin-top:3px}

/* reach-line tooltip */
.reach-l{cursor:crosshair}
.reach-tip{position:absolute;transform:translateX(-50%);z-index:5;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;
  font-size:12.5px;line-height:1.5;white-space:nowrap;pointer-events:none;
  box-shadow:0 10px 26px rgba(0,0,0,.3)}
.reach-tip b{display:block;font-size:14px;margin-bottom:2px}
.reach-tip span{color:var(--ink-3);display:block}
.reach-d.on{opacity:1;background:var(--ink);width:11px;height:11px;margin-left:-5.5px}

/* walking time between two gates, drawn on the quay itself */
/* The walking times are absolutely positioned under a 6px line, so the line
   itself has to reserve their height. Without the margin they sat on top of
   the entrance labels in the row below. */
.quay-l{margin-bottom:30px}
.quay-w{position:absolute;top:11px;transform:translateX(-50%);font-size:10.5px;
  color:var(--ink-3);white-space:nowrap}
.quay-ent{font-size:11px;color:var(--ink-2);font-weight:600}

/* ── the row, as bars ───────────────────────────────────────────────────
   "50 min fast · 55 min boat" and "50 min fast · 2 h 10 boat" read as the
   same sentence at a glance. Drawn, one is two equal bars and the other is
   one bar three times the length, and the difference lands before the words
   are read.

   BUILT FOR MORE MODES THAN THIS PAGE HAS. Colour carries the MODE, never the
   speed: London–Paris will be flight, rail and coach on this same component,
   and a fast train has to be able to arrive without the palette meaning two
   things at once. Speed is a tag. */
.bars{display:grid;gap:3px}
/* FOUR columns, and the tags live in the last one.
   The fast pill used to sit inside the label, which is a 66px box with
   overflow:hidden — so "Fast ferryFAST" measured 92px and the pill was sliced
   down the middle, leaving an arc of its own border on screen. Tags now have
   a column of their own, which also aligns them: FAST and EST line up down
   the page instead of floating wherever the label happened to end. */
.bar-r{display:grid;grid-template-columns:46px 1fr 52px 34px;gap:9px;align-items:center;
  font-size:11.5px}
.bar-k{color:var(--ink-3);white-space:nowrap}
.bar-t{position:relative;height:11px;border-radius:3px;background:var(--line);overflow:hidden}
.bar-f{position:absolute;top:0;bottom:0;left:0;border-radius:3px}
.bar-f.ferry{background:var(--foam)}
.bar-f.rail{background:var(--rail-c)}
.bar-f.coach{background:var(--dusk)}
.bar-f.air{background:var(--air-c)}
/* The ground half of a flight, drawn in the same hue and visibly not the same
   thing: getting to the airport is time you spend, and a solid bar that
   starts at the aircraft door is the lie this section exists to avoid. */
.bar-f.access{background:repeating-linear-gradient(135deg,var(--line-2) 0 3px,transparent 3px 6px);
  border-radius:0}
.bar-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.bar-tag{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:99px;padding:1px 6px;color:var(--ink-3);
  white-space:nowrap;display:inline-block;line-height:1.5}

/* ── how often, drawn ───────────────────────────────────────────────────
   A bar scaled to the busiest crossing makes Aegina's 596 a week full width
   and turns the other 64 into slivers. Bands do not have that problem, and
   nobody reading a timetable wants the exact number first anyway -- they want
   to know whether it runs today. */
.freq{display:grid;gap:3px;justify-items:end}
.freq-m{display:flex;gap:2px}
.freq-m i{width:6px;height:11px;border-radius:1px;background:var(--line);display:block}
.freq-m i.on{background:var(--foam)}
.freq-v{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.freq-none{font-size:11px;color:var(--ink-3);font-style:italic}

/* the door-to-door note, under any list that mixes modes */
.d2d{display:flex;gap:11px;align-items:flex-start;border-left:2px solid var(--line-2);
  padding:2px 0 2px 13px;margin:20px 0 4px;font-size:13px;color:var(--ink-2);
  line-height:1.6;max-width:66ch}
.d2d b{color:var(--ink)}
.d2d .sw{display:inline-block;width:22px;height:9px;border-radius:2px;flex:none;margin-top:5px;
  background:repeating-linear-gradient(135deg,var(--line-2) 0 3px,transparent 3px 6px)}

/* the flag before a destination name */
.dr-fl{font-size:13px;line-height:1}

/* ── the now marker, labelled where it starts ───────────────────────────
   The sentence "the black line is the time there now" was doing a job the
   chart can do itself. A label sitting on top of the line says the same
   thing in the place the reader is already looking, and survives being
   screenshotted out of context. */
.oc-top{display:grid;grid-template-columns:118px 1fr 92px;gap:12px;margin-bottom:2px}
.oc-mark{position:relative;height:34px}
.oc-lab{position:absolute;bottom:0;transform:translateX(-50%);text-align:center;
  line-height:1.25;white-space:nowrap}
.oc-lab span{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.oc-lab b{display:block;font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.oc-lab i{display:block;width:1px;height:6px;background:var(--ink);margin:2px auto 0}

/* ── provenance, as a receipt ───────────────────────────────────────────
   The paragraph this replaced explained the method in four sentences. A
   reader who opens "where these hours come from" is not asking for the
   method, they are asking what it is made of — so it is the counts, the
   categories we do not hold, and the date. */
.prov{margin-top:12px;font-size:12.5px}
.prov-h{color:var(--ink-3);padding-bottom:7px;border-bottom:1px solid var(--line);
  margin-bottom:2px}
.prov-r{display:grid;grid-template-columns:1fr auto auto;gap:18px;padding:6px 0;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.prov-r:last-child{border-bottom:0}
.prov-r span:first-child{color:var(--ink-2)}
.prov-r span:not(:first-child){color:var(--ink-3);text-align:right;min-width:82px}
.prov-r.off span{color:var(--ink-3);font-style:italic}

/* The axis, stated once under the list it applies to. The bands each had
   their own scale and none of them said so. */
.scale-n{font-size:12.5px;color:var(--ink-3);margin:16px 0 0;max-width:60ch;line-height:1.6}
.scale-n b{color:var(--ink);font-variant-numeric:tabular-nums}
/* A figure that has no bar: still legible, visibly not measured. */
.bar-v.off{color:var(--ink-3)}

/* ── the airport list ───────────────────────────────────────────────────
   Kilometres need more room than hours: "10,012 km" measured 62px in a 52px
   column and 165 of Changi's 404 rows were clipping their own distance. The
   mode label needs less, because there is only ever one of it here. */
.dr.air-r .bar-r{grid-template-columns:40px 1fr 72px 34px}

/* ── groups that collapse ───────────────────────────────────────────────
   Grouped by country, Changi is 83 sections and 404 rows — a list you scroll
   past rather than read. Each heading is now a button that folds its section
   into a single line, so a reader can shut the twenty-nine Italian airports
   and keep looking. The count stays visible while it is shut, which is the
   whole point: a closed group still tells you how big it was. */
/* THE ATTRIBUTE IS NOT ENOUGH. `.drs` sets display:grid, and an author rule
   beats the user agent's [hidden]{display:none} — so every "collapsed" group
   set its hidden property, reported true, and stayed on screen at full
   height. Any element this project hides by attribute needs the author-level
   rule to say so. */
[hidden]{display:none !important}

.ix-gh.fold{cursor:pointer;width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  text-align:left;font:inherit;color:inherit;padding:0 0 9px;display:flex;align-items:baseline;
  gap:11px;margin-bottom:11px}
.ix-gh.fold:hover h3{color:var(--ink)}
.ix-gh.fold .car{margin-left:auto;font-size:11px;color:var(--ink-3);transition:transform .15s}
.ix-gh.fold[aria-expanded="false"] .car{transform:rotate(-90deg)}
.ix-gh.fold[aria-expanded="false"]{border-bottom-color:var(--line-2)}
.fold-all{display:flex;gap:8px;align-items:baseline;margin:0 0 16px;font-size:12.5px}
.fold-all button{background:none;border:0;color:var(--ink-3);font:inherit;font-size:12.5px;
  cursor:pointer;padding:0;border-bottom:1px dotted var(--ink-3)}
.fold-all button:hover{color:var(--ink)}

/* ── pagination ─────────────────────────────────────────────────────────
   404 rows in one scroll is not a list, it is a wall. A hundred at a time is
   the page a reader can hold, and the range is stated so nobody has to count.
   Only the flat sorts paginate: when the list is grouped, the groups ARE the
   navigation and cutting one in half across a page boundary would break it. */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0;
  padding-top:16px;border-top:1px solid var(--line);font-size:13px}
.pager .rng{color:var(--ink-3);font-variant-numeric:tabular-nums;margin-right:auto}
.pager button{background:none;border:1px solid var(--line);border-radius:99px;color:var(--ink-2);
  font:inherit;font-size:13px;padding:5px 13px;cursor:pointer;font-variant-numeric:tabular-nums}
.pager button:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.pager button[aria-current="true"]{background:var(--ink);color:var(--sea);border-color:var(--ink);
  font-weight:600}
.pager button:disabled{opacity:.4;cursor:default}

/* ── the row's own marks ────────────────────────────────────────────────
   Text-presentation glyphs, not emoji: the variation selector keeps them
   monochrome so they read as typography beside the code rather than as
   stickers. The flag stays colour because it is the one that has to be
   recognised at a glance. */
/* Delicate by SIZE, not by fade. At opacity .55 the glyph blended to about
   1.8:1 against the page — decorative and aria-hidden, so not strictly a
   contrast failure, but invisible is not the same as understated. At full
   strength in the secondary ink it measures 4.97:1 light and 5.31 dark, and
   still reads as a mark beside the code rather than as a word. */
.dr-x .mk{font-size:11px;margin-right:3px;font-variant-emoji:text;color:inherit}
.dr-x .rt{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ── the staleness banner ───────────────────────────────────────────────
   Above the fold, not in a footnote. The GB rail feed is a 2021 pandemic
   timetable, and a five-year-old departure count presented as current is
   worse than no departure count at all. Bordered rather than tinted, because
   a coloured alert box reads as a warning about the reader's trip and this is
   a statement about our records. */
.stale{margin:4px 0 22px}
.stale-in{border:1px solid var(--line-2);border-left:3px solid var(--dusk);
  border-radius:0 12px 12px 0;padding:14px 18px;font-size:13.5px;line-height:1.65;
  color:var(--ink-2);max-width:78ch}
.stale-in b{color:var(--ink)}

/* The median notch on a range bar. Every train to a place is the same
   service running at a different speed, so the honest shape is a range with
   the middle marked — not two bars, which is what the port page draws
   because a fast ferry and a conventional one really are two services. */
.bar-med{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);
  margin-left:-1px;z-index:2;border-radius:1px}
.two-b .bar-t{position:relative;height:15px;border-radius:4px;background:var(--line);
  overflow:visible}

/* ── the market bar ─────────────────────────────────────────────────────
   One row, five segments, and the two neutral ones carry the argument as
   much as the gold does. "Contested" means a rival runs the same pair and one
   of the two durations is missing, so no claim is made — folding those into
   the win segment for a longer bar would throw away the only reason a reader
   should believe the other four. */
.mkt{margin:18px 0 8px}
.mkt-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;gap:2px}
.mkt-s{display:flex;align-items:center;justify-content:center;min-width:26px;
  font-size:12px;font-variant-numeric:tabular-nums}
.mkt-s b{font-weight:650}
.mkt-s.alone{background:var(--foam);color:var(--sea)}
.mkt-s.faster{background:var(--rail-c);color:var(--sea)}
.mkt-s.level{background:var(--line-2);color:var(--ink)}
.mkt-s.slower{background:var(--air-c);color:var(--sea)}
.mkt-s.contested{background:var(--line);color:var(--ink-2)}
.mkt-key{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:12.5px;color:var(--ink-3);
  margin-top:12px}
.mkt-key span{display:flex;align-items:center;gap:7px}
.mkt-key b{color:var(--ink);font-variant-numeric:tabular-nums}
.mkt-sw{width:14px;height:10px;border-radius:3px;display:inline-block;flex:none}
.mkt-sw.alone{background:var(--foam)}
.mkt-sw.faster{background:var(--rail-c)}
.mkt-sw.level{background:var(--line-2)}
.mkt-sw.slower{background:var(--air-c)}
.mkt-sw.contested{background:var(--line)}

/* the verdict tag on a crossing row */
.vd{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;
  padding:2px 8px;border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
.vd.alone{border-color:var(--foam);color:var(--foam)}
.vd.slower{border-color:var(--air-c);color:var(--air-c)}
.vd.faster{border-color:var(--rail-c);color:var(--rail-c)}

/* Dots dimmed or lit by a hub pill. Dimming rather than hiding keeps the
   distribution's shape on screen while the selection sits inside it — the
   answer to "where are Mykonos crossings" is only legible against the whole. */
.reach-d.dim{opacity:.13}
.reach-d.lit{opacity:1;background:var(--ink)}
.hubpills{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 14px;font-size:13px}
.hubpills .lb{color:var(--ink-3)}
.hubpills button{background:none;border:1px solid var(--line);border-radius:99px;
  color:var(--ink-2);font:inherit;font-size:12.5px;padding:5px 12px;cursor:pointer;line-height:1.4}
.hubpills button:hover{border-color:var(--ink-3);color:var(--ink)}
.hubpills button[aria-pressed="true"]{background:var(--ink);color:var(--sea);
  border-color:var(--ink);font-weight:600}

/* ── every way to make one journey ──────────────────────────────────────
   The route page's one chart. Wider bars than a list row because there are
   four of them, not four hundred, and this is the comparison the whole page
   exists to make. */
.ways{display:grid;gap:10px;margin:18px 0 4px;max-width:760px}
.way{display:grid;grid-template-columns:180px 1fr 96px;gap:14px;align-items:center}
.way-k{font-size:14px;font-weight:600;line-height:1.3}
.way-n{display:block;font-size:11px;font-weight:400;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.03em}
.way-t{height:22px;border-radius:6px}
.way-v{text-align:right;font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;
  white-space:nowrap}
.way-v .bar-tag{margin-left:6px;font-weight:400}
@media (max-width:640px){
  .way{grid-template-columns:1fr auto}
  .way-t{grid-column:1/-1}
}

/* the booking block, and its empty state */
.next.book{border-color:var(--line-2)}
.book-empty{font-size:13px;line-height:1.65;color:var(--ink-2);max-width:70ch;
  margin:0 0 14px;padding-left:13px;border-left:2px solid var(--dusk)}
.book-empty b{color:var(--ink)}

/* ── the nation's day ───────────────────────────────────────────────────
   26 Greek cities on one 24-hour axis, sorted by when they open. The chart
   exists because the two categories behave completely differently: shops open
   at 08:00 in almost every city, and food & drink spreads four and a half
   hours from Ioannina to Parikia. One flat line and one fan, on the same
   axis, is an argument no table makes.

   Connectivity is joined in because the late half is the islands — the places
   that open at noon are the ones the ferries go to. */
.day{margin:18px 0 8px}
.day-scale{display:grid;grid-template-columns:150px 1fr 52px;gap:12px;font-size:11px;
  color:var(--ink-3);margin-bottom:6px}
.day-scale .t{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.day-r{display:grid;grid-template-columns:150px 1fr 52px;gap:12px;align-items:center;
  padding:3px 0}
.day-r:hover .day-k{color:var(--ink)}
.day-k{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.day-r.hub .day-k{color:var(--ink);font-weight:600}
.day-t{position:relative;height:16px;display:grid;gap:2px;align-content:center}
.day-b{position:relative;height:6px;border-radius:99px;background:var(--line)}
.day-f{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--foam);opacity:.55}
.day-r.hub .day-f{opacity:1}
.day-f.shops{background:var(--rail-c)}
.day-med{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--ink);opacity:.45}
.day-n{font-size:11.5px;color:var(--ink-3);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.day-key{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:12.5px;color:var(--ink-3);
  margin-top:14px}
.day-key span{display:flex;align-items:center;gap:7px}
.day-sw{width:16px;height:6px;border-radius:99px;display:inline-block;flex:none}
.day-sw.food{background:var(--foam)}
.day-sw.shops{background:var(--rail-c)}
.day-sw.med{width:1px;height:12px;background:var(--ink);opacity:.45;border-radius:0}
@media (max-width:640px){
  .day-scale,.day-r{grid-template-columns:110px 1fr 44px;gap:8px}
}

/* ── the tail past the median ───────────────────────────────────────────
   A median is the middle of a distribution, not a shutter. Athens' food
   places close at 24:00 on the median and 38% of them close later — so the
   chart said "nothing is typically open" at 00:44, which is false about
   Athens in a way it would not have been about Munich.

   The faint tail is that share, drawn from the median close to the end of the
   axis. Its opacity IS the proportion, so a city where a tenth stay open
   looks different from one where four in ten do. */
.oc-tail{position:absolute;top:0;bottom:0;background:var(--foam);
  border-radius:0 6px 6px 0}
.oc-note{font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:64ch;
  margin:12px 0 0}
.oc-note b{color:var(--ink-2)}

/* ── FRESHNESS AND SEASON ───────────────────────────────────────────────
   Added for the site build. Nothing here is live, and these are the two
   places that say so: a badge in the strip on every page, and a season block
   that renders what we know or -- far more often today -- what we do not.  */

/* "Not live" reads as a status, so it is given the shape of one. It is not
   red: this is not an error, it is a correct and permanent property of the
   site, and an alarm colour on every page teaches readers to ignore it. */
/* SPECIFICITY, not preference. wp.css:216 sets `.strip .stamp b {color:
   var(--ink-2)}` at 0,2,1 — one more than `.stamp .live-no` — so the badge
   took its background from here and its colour from there, and landed at
   1.75:1 against its own background in both modes. Matching the element as
   well as the class outranks it. */
.strip .stamp b.live-no{display:inline-block;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:650;color:var(--sea);background:var(--ink-3);
  border-radius:99px;padding:2px 8px;margin-right:2px;vertical-align:baseline}
.stamp time{font-variant-numeric:tabular-nums}
.stamp-src{color:var(--ink-3)}
@media (max-width:720px){ .stamp-src{display:none} }

footer .ft-live{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line);
  color:var(--ink-2);max-width:70ch}
footer .ft-live b{color:var(--ink)}

/* ── the season block ─────────────────────────────────────────────────── */
.seas{border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  background:var(--bg-2);margin:18px 0}
.seas-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.seas-h b{font-size:17px}
.seas-w{font-size:13px;color:var(--ink-3)}

/* Twelve cells, because a traveller thinks in months and not in a date range.
   A list, not a bar: each month is a thing you either can or cannot go in. */
.seas-yr{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;
  list-style:none;margin:0;padding:0}
.seas-yr li{aspect-ratio:1;display:grid;place-items:center;border-radius:5px;
  background:var(--line);color:var(--ink-3);font-size:11px;font-weight:600}
.seas-yr li.on{background:var(--ferry);color:#12100e}
/* The unknown strip is drawn as an ABSENCE, not as an off state -- dashed and
   empty, so it reads as "we have no answer" rather than "no sailings". Those
   two are opposite meanings and a grey square says both. */
.seas-yr.un li{background:none;border:1px dashed var(--line-2);color:var(--ink-3);
  opacity:.55}
.seas-n{font-size:14px;color:var(--ink-2);margin:12px 0 0;max-width:68ch}
.seas-a{font-size:14px;color:var(--ink);margin:8px 0 0;max-width:68ch;font-weight:500}
.seas-s{font-size:12.5px;color:var(--ink-3);margin:10px 0 0}
.seas-min{font-size:13.5px;color:var(--ink-2);margin:10px 0 0}
.seas-un{border-style:dashed}
/* Six months out from the collection date the gap stops being a footnote. */
.seas-un.loud{border-color:var(--line-2);background:var(--panel)}
.seas-un.loud .seas-h b{color:var(--ink)}

/* ── report a mistake ───────────────────────────────────────────────────
   In the footer rather than floating: a reader notices a wrong figure while
   reading it, and reaches the bottom shortly after. A floating button would
   sit over the data it is asking about. */
footer .ft-report{margin:0 0 16px}
.ft-rep{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border:1px dashed var(--line-2);border-radius:10px;padding:12px 14px;
  text-decoration:none;color:var(--ink-2);max-width:70ch}
.ft-rep:hover{border-color:var(--ink-3);background:var(--panel)}
.ft-rep b{color:var(--ink);font-weight:650}
.ft-rep span{font-size:13.5px}
.ft-rep .ic{width:15px;height:15px;flex:0 0 auto;align-self:center;color:var(--ink-3)}
/* One colour per mode on the bars, so a place served by train and coach reads
   as two things at a glance rather than two identical stripes. */
.bar-f.rail{background:var(--rail-c)}
.bar-f.coach{background:var(--dusk)}
.bar-f.cruise{background:var(--air-c)}
.bar-f.ferry{background:var(--ferry)}

/* A slot held open for a programme not yet approved. Deliberately not a link:
   it cannot be clicked, cannot be followed by a crawler, and cannot be
   mistaken for a partner we are in. The dashed edge matches the season block,
   which is the site's other way of drawing an absence. */
.next-a.soon{opacity:.5;cursor:default;border-style:dashed;
  color:var(--ink-3);background:none}
.next-a.soon:hover{border-color:var(--line);background:none}
.next-a.soon i{background:none;border:1px solid var(--line-2);color:var(--ink-3)}

/* ── MODE IS A COLOUR, AND ONLY MODE ──────────────────────────────────────
   A place like Athens or Heraklion is reached by sea, air, coach and rail at
   once, and four identical amber bars said none of that. One hue per mode,
   used on every bar, dot and key across the site.

   Speed is NOT a colour. Fast and conventional ferries were drawn in two
   shades, which put the weight on a distinction inside one mode while the
   difference BETWEEN modes — the one that changes how you travel — went
   unmarked. The fast/slow split still shows: it has its own row and its own
   figure. It does not get a hue. */
:root{
  --m-ferry:#d9a441;   /* the sea keeps the original amber */
  --m-air:#8fb8e0;
  --m-rail:#7fc7a2;
  --m-coach:#d98d4a;
  --m-cruise:#c89bd0;
}
:root[data-mode="light"], :root:not([data-mode="dark"]) {
  --m-ferry:#8a5a12; --m-air:#2f5f96; --m-rail:#1f6b47;
  --m-coach:#a2601f; --m-cruise:#6d4c8f;
}
@media (prefers-color-scheme: dark){
  :root:not([data-mode="light"]){
    --m-ferry:#d9a441; --m-air:#8fb8e0; --m-rail:#7fc7a2;
    --m-coach:#d98d4a; --m-cruise:#c89bd0;
  }
}
.bar-f.ferry{background:var(--m-ferry)}
.bar-f.air{background:var(--m-air)}
.bar-f.rail{background:var(--m-rail)}
.bar-f.coach{background:var(--m-coach)}
.bar-f.cruise{background:var(--m-cruise)}
/* The reach plot: one dot per destination, coloured by how you get there. */
.reach-d.m-ferry{background:var(--m-ferry)}
.reach-d.m-air{background:var(--m-air)}
.reach-d.m-rail{background:var(--m-rail)}
.reach-d.m-coach{background:var(--m-coach)}
.reach-d.m-cruise{background:var(--m-cruise)}
/* More than one way there — the fact the whole atlas exists to show. */
.reach-d.m-multi{background:var(--ink);box-shadow:0 0 0 1.5px var(--bg)}

.mkey{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0;
  font-size:12.5px;color:var(--ink-2)}
.mkey span{display:inline-flex;align-items:center;gap:6px}
.mkey i{width:11px;height:11px;border-radius:3px;display:inline-block}
.mkey .k-ferry{background:var(--m-ferry)}
.mkey .k-air{background:var(--m-air)}
.mkey .k-rail{background:var(--m-rail)}
.mkey .k-coach{background:var(--m-coach)}
.mkey .k-cruise{background:var(--m-cruise)}
.mkey .k-multi{background:var(--ink)}

/* ── the search box the markup was asking for ───────────────────────────── */
.hs-l{display:block;font-size:14px;color:var(--ink-2);margin-bottom:10px}
.hs-go{flex:none;border:0;border-radius:99px;background:var(--ink);color:var(--bg);
  font:inherit;font-size:15px;font-weight:650;padding:11px 24px;cursor:pointer}
.hs-go:hover{opacity:.88}
.hs-eg{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  margin-top:14px;font-size:14px;color:var(--ink-3)}
.hs-eg a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2)}
.hs-eg a:hover{color:var(--ink)}
@media (max-width:560px){
  .hs-f{flex-wrap:wrap}
  .hs-i{flex:1 1 100%;order:2}
  .hs-go{order:3;width:100%}
}

/* ── search in the top bar ─────────────────────────────────────────────── */
.nsearch{display:flex;align-items:center;gap:8px;margin-left:26px;
  border:1px solid var(--line);border-radius:99px;padding:5px 13px;
  background:var(--bg-2);min-width:150px}
.nsearch:focus-within{border-color:var(--ink-3)}
.nsearch .hs-mag{width:15px;height:15px;opacity:.5;stroke:currentColor;fill:none;flex:none}
.nsearch input{background:none;border:0;color:var(--ink);font:inherit;font-size:13.5px;
  width:100%;min-width:0}
.nsearch input:focus{outline:none}
.nsearch input::placeholder{color:var(--ink-3)}
@media (max-width:860px){ .nsearch{display:none} }

/* ── AFFILIATE ACTIONS AS BOXES ────────────────────────────────────────────
   They were pill-shaped links in a row, which reads as navigation. These are
   the only things on the page a reader can DO, so the whole box is the
   target: a grid of equal cards, each entirely clickable, with the label and
   the partner mark stacked rather than crammed onto one line. */
.next-as{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;margin-top:14px}
.next-a{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  border:1px solid var(--line-2);border-radius:12px;padding:15px 16px;
  background:var(--bg);color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:600;line-height:1.35;min-height:76px;
  justify-content:center;transition:border-color .12s,background .12s}
.next-a:hover{border-color:var(--ink-3);background:var(--panel)}
.next-a .ic{width:18px;height:18px;color:var(--ink-3);flex:none}
.next-a i{font-style:normal;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:650;color:var(--sea);
  background:var(--ink-3);border-radius:99px;padding:2px 7px}
.next-a.soon{opacity:.55;cursor:default;border-style:dashed;background:none}
.next-a.soon:hover{border-color:var(--line-2);background:none}
.next-a.soon i{background:none;border:1px solid var(--line-2);color:var(--ink-3)}

/* ── typeahead under the top-bar search ──────────────────────────────────── */
.nsearch{position:relative}
.ns-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:90;
  background:var(--bg);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;min-width:280px}
.ns-list[hidden]{display:none}
.ns-o{display:flex;align-items:baseline;gap:9px;padding:9px 13px;
  text-decoration:none;color:var(--ink);font-size:14px}
.ns-o:hover,.ns-o.on{background:var(--line)}
.ns-o .k{margin-left:auto;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);flex:none}
.ns-all{border-top:1px solid var(--line);font-weight:650;font-size:13px}

/* ── the radial ───────────────────────────────────────────────────────── */
.rad-wrap{position:relative;margin:18px 0 0}
.rad-svg{display:block;width:100%;height:auto;overflow:visible}
.rad-ring{fill:none;stroke:var(--line);stroke-width:1}
.rad-ring.major{stroke:var(--line-2)}
.rad-spoke{stroke:var(--line);stroke-width:1}
.rad-card{font-size:11px;fill:var(--ink-3);letter-spacing:.12em}
.rad-rlab{font-size:10.5px;fill:var(--ink-3)}
.rad-d{cursor:pointer}
.rad-d:hover{stroke:var(--ink);stroke-width:2}
.rad-c{fill:var(--ink)}
.rad-cl{font-size:13px;font-weight:650;fill:var(--ink)}
.rad-tools{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:16px 0 0}
.rad-seg{display:flex;gap:2px;border:1px solid var(--line-2);border-radius:99px;padding:2px}
.rad-seg button{background:none;border:0;border-radius:99px;color:var(--ink-3);
  font:inherit;font-size:13px;padding:5px 14px;cursor:pointer}
.rad-seg button[aria-pressed="true"]{background:var(--ink);color:var(--sea);font-weight:650}
.rad-zoom{display:flex;align-items:center;gap:12px;margin:12px 0 0;font-size:13px;
  color:var(--ink-2);flex-wrap:wrap}
.rad-zoom input[type=range]{flex:1;min-width:170px;max-width:320px;accent-color:var(--ink-3)}
.rad-zoom b{color:var(--ink);font-variant-numeric:tabular-nums}
.rad-steps{display:flex;gap:5px;flex-wrap:wrap}
.rad-steps button{background:none;border:1px solid var(--line-2);border-radius:99px;
  color:var(--ink-3);font:inherit;font-size:12px;padding:3px 12px;cursor:pointer}
.rad-steps button:hover{color:var(--ink);border-color:var(--ink-3)}
.rad-steps button[aria-pressed="true"]{background:var(--ink);color:var(--sea);
  border-color:var(--ink);font-weight:650}
.rad-tip{position:absolute;pointer-events:none;z-index:20;background:var(--bg-2);
  border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;font-size:13px;
  box-shadow:var(--shadow);opacity:0;transition:opacity .1s;max-width:240px}
.rad-tip b{display:block}
.rad-tip span{color:var(--ink-3);font-size:12px}

/* The mode key was too small to read against a chart it is explaining. */
.mkey{font-size:14.5px;gap:16px}
.mkey i{width:13px;height:13px;border-radius:4px}

/* ── pager ─────────────────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;gap:16px;margin:16px 0 0;font-size:13.5px}
.pager button{background:none;border:1px solid var(--line-2);border-radius:99px;
  color:var(--ink);font:inherit;font-size:13.5px;padding:6px 16px;cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--ink-3);background:var(--panel)}
.pager button:disabled{opacity:.35;cursor:default}
.pager-n{color:var(--ink-3);font-variant-numeric:tabular-nums}