/* ==========================================================================
   06 Price list (#pricelist). Boards: m09a-pricelist (390) and d09a-pricelist
   (1280), canvas v353 (D-151 the design, D-154 the glass). Mobile first: up
   to 767px is the phone board, 1024px and up the desktop board, 768 to 1023
   the phone layout with more room. The price list never animates: no reveal,
   nothing moves under a price (the light pools behind it breathe, as drawn).
   Markup: Website/_build/port/sections/06-pricelist.py (from fares.js).
   ========================================================================== */

#pricelist{position:relative;overflow:clip;padding:24px 0 48px;
  --pl-tint:rgba(132,185,255,.045);   /* table and ledger fill */
  --pl-edge:rgba(132,185,255,.26);    /* table and ledger border */
  --pl-rule:rgba(132,185,255,.16);    /* row rules */
  --pl-band:rgba(4,16,39,.6);         /* group label band */
  --pl-off:rgba(4,16,39,.16);         /* unselected button fill */
  --pl-sel:#0E3678;                   /* selected column in the full table */
}

/* --------------------------------------------------------------------------
   Light pools (D-154): outside the panel edges and behind the fare tables,
   never under small grey text. Phone positions from m09a (390 wide).
   -------------------------------------------------------------------------- */
#pricelist .pl-glows{position:absolute;inset:0;z-index:0;pointer-events:none}
#pricelist .pl-glow{position:absolute;border-radius:50%}
#pricelist .pl-glow--1{right:-200px;top:-40px;width:340px;height:340px;background:radial-gradient(circle,rgba(0,95,214,.60) 0%,rgba(0,95,214,.42) 34%,rgba(0,95,214,0) 68%);filter:blur(30px)}
#pricelist .pl-glow--2{left:-250px;top:760px;width:340px;height:340px;background:radial-gradient(circle,rgba(0,95,214,.60) 0%,rgba(132,185,255,.22) 34%,rgba(0,95,214,0) 68%);filter:blur(30px)}
#pricelist .pl-glow--3{right:-190px;top:1480px;width:320px;height:320px;background:radial-gradient(circle,rgba(0,95,214,.55) 0%,rgba(0,95,214,.42) 34%,rgba(0,95,214,0) 68%);filter:blur(30px)}
#pricelist .pl-glow--4{left:-90px;top:2020px;width:150px;height:150px;background:radial-gradient(circle,rgba(23,212,208,.45) 0%,rgba(23,212,208,0) 66%);filter:blur(18px)}
#pricelist .pl-glow--5{left:calc(50% - 210px);top:590px;width:420px;height:420px;background:radial-gradient(circle,rgba(0,95,214,.70) 0%,rgba(0,95,214,.30) 34%,rgba(0,95,214,0) 68%);filter:blur(34px)}

/* --------------------------------------------------------------------------
   Frame: the phone panel sits 8px from the edges (m09a), the glass at .89
   -------------------------------------------------------------------------- */
#pricelist .pl-wrap{position:relative;z-index:1;max-width:var(--wrap);margin-inline:auto;
  padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
#pricelist .pl-panel{padding:32px 16px 36px;border:1px solid transparent;border-radius:var(--radius)}

#pricelist .pl-h2{margin:0}

/* Book your journey, then the board's two lines under it */
#pricelist .pl-book{margin-top:24px;display:flex;flex-direction:column;align-items:stretch}
#pricelist .pl-book .nv-book{width:100%;min-height:52px}
#pricelist .pl-promise{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
#pricelist .pl-promise__lead{display:block;font-weight:600;color:var(--bone)}
#pricelist .pl-promise__fee{display:block}

#pricelist .pl-intro{margin:28px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
#pricelist .pl-intro__lead{font-weight:600;color:var(--bone)}

/* --------------------------------------------------------------------------
   Area buttons. T8: the name sits at the top and the count at the foot, so
   every "8 fares" in a row shares one line even when a name takes two.
   -------------------------------------------------------------------------- */
#pricelist .pl-areas{margin-top:16px;gap:8px}
#pricelist .pl-area{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  width:100%;min-height:60px;margin:0;padding:9px 34px 9px 12px;text-align:left;border-radius:var(--radius);
  background:var(--pl-off);border:1px solid var(--line-control);color:var(--bone)}
#pricelist .pl-area__name{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.25;color:var(--bone)}
#pricelist .pl-area__count{display:block;margin-top:auto;padding-top:2px;font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1.35;color:var(--muted)}
#pricelist .pl-area__tick{display:none;position:absolute;top:10px;right:10px;color:var(--bone)}
#pricelist .pl-area[aria-pressed="true"]{background:var(--blue-700);border-color:var(--blue-300)}
#pricelist .pl-area[aria-pressed="true"] .pl-area__count{color:var(--bone)}
#pricelist .pl-area[aria-pressed="true"] .pl-area__tick{display:block}
@media (hover:hover){#pricelist .pl-area[aria-pressed="false"]:hover{background:var(--navy-800);border-color:var(--muted-img)}}


/* Phones (D-166, D-173): one swipe row (site.css 6i). It bleeds only through the glass panel's 16px
   padding, to the panel's inner edge (inside its 1px rim), and clips there: cards slide under the
   panel's edges and never run past them (Bobby, 11 Oct). The last 12px at each end fade out, so a
   card leaving reads as going under the edge; a card snapped to the text edge (16px in) is clear of
   the fade, focus ring included. A card is about (row minus two gaps) / 2.4 wide, so two show in full
   and a slice of the third; never narrower than its longest word ("Southampton", 106px) needs. The
   tick moves to the foot of the card (as on desktop) so the name has the card's full width.
   06-pricelist.js puts the picked area first. */
@media (max-width:767px){
  #pricelist .pl-swipe-hint{margin-top:12px}
  #pricelist .pl-areas{--nv-swipe-l:16px;--nv-swipe-r:16px;margin-top:10px;align-items:stretch;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
  #pricelist .pl-area{width:max(calc((100% - 16px) / 2.4),130px);padding:9px 10px}
  #pricelist .pl-area__tick{top:auto;right:10px;bottom:10px}
}
/* 320 to 359px: the panel is too narrow for two 130px cards and a slice inside it, so the cards go to
   120px (the D-173 floor) on 7px sides, which still holds "Southampton" whole. */
@media (max-width:359px){
  #pricelist .pl-area{width:max(calc((100% - 16px) / 2.4),120px);padding:9px 7px}
}

/* --------------------------------------------------------------------------
   The ledger: the picked area's 8 fares (phone: one box, two groups)
   -------------------------------------------------------------------------- */
#pricelist .pl-led-h{margin:24px 0 0;font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--bone)}
#pricelist .pl-led{margin-top:12px;border:1px solid var(--pl-edge);border-radius:var(--radius);overflow:hidden;background:var(--pl-tint)}
#pricelist .pl-grp,
#pricelist .pl-t__grp th{box-sizing:border-box;padding:10px 14px 9px;background:var(--pl-band);font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left}
#pricelist .pl-led__grp + .pl-led__grp .pl-grp{border-top:1px solid var(--pl-rule)}
#pricelist .pl-led__row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:50px;padding:10px 14px;border-top:1px solid var(--pl-rule)}
#pricelist .pl-led__dest{min-width:0;font-size:16px;font-weight:500;line-height:1.35;color:var(--bone)}
#pricelist .pl-led__fare{flex:none;text-align:right;white-space:nowrap;font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--bone)}

/* fare rows: a 150ms tint on hover only. Nothing under a price moves. */
#pricelist .frow{transition:background-color 150ms ease-out}
@media (hover:hover){#pricelist .frow:hover,#pricelist .frow.pl-hover{background:var(--navy-800)}}
#pricelist .frow:focus-within{background:var(--navy-800)}

/* --------------------------------------------------------------------------
   Disclosures: native <details>, so every rule and every fare is in the
   markup. They open at once: no height animation over prices.
   -------------------------------------------------------------------------- */
#pricelist summary{cursor:pointer;transition:background-color 150ms ease-out}
@media (hover:hover){#pricelist summary:hover{background-color:rgba(132,185,255,.06)}}
#pricelist .pl-ic{flex-shrink:0;transition:transform 150ms ease-out,color 150ms ease-out}
#pricelist details[open]>summary .pl-ic{transform:rotate(45deg);color:var(--teal-hi)}
#pricelist details[open]>summary .pl-chev{transform:rotate(180deg);color:var(--teal-hi)}
#pricelist .pl-all:not([open]) .pl-when-open,#pricelist .pl-all[open] .pl-when-closed{display:none}

#pricelist .pl-all{margin-top:10px}
#pricelist .pl-all__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 14px;
  border:1px solid var(--line-control);border-radius:var(--radius);font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.3;color:var(--bone)}
#pricelist .pl-cap{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}

/* --------------------------------------------------------------------------
   The full table: real tables of at most three areas (m09a: 3 and 3; with
   Zone G, D-176: 3, 2 and 2, never a table of one). Each table carries its
   area count as --pl-n, the table holder the total as --pl-total. Below 1024px
   each row is a grid: the destination on its own line, then its fares. The
   ARIA roles in the markup keep the table semantics through that change.
   -------------------------------------------------------------------------- */
#pricelist .pl-t{border-collapse:separate;border-spacing:0}
#pricelist :where(.pl-t th,.pl-t td){font-weight:inherit;padding:0}
#pricelist .pl-t__fare{text-align:right;white-space:nowrap;font-family:var(--font-display);font-variant-numeric:tabular-nums;color:var(--bone)}
#pricelist .pl-t__area{font-family:var(--font-display);font-weight:600;line-height:1.25;color:var(--bone)}
#pricelist .pl-t__dest{font-weight:600;line-height:1.35;color:var(--bone);text-align:left}

@media (max-width:1023px){
  #pricelist .pl-t,#pricelist .pl-t thead,#pricelist .pl-t tbody{display:block}
  #pricelist .pl-t{width:100%;margin-top:14px;border:1px solid var(--pl-edge);border-radius:var(--radius);overflow:hidden;background:var(--pl-tint)}
  #pricelist .pl-t colgroup{display:none}
  #pricelist .pl-t tr{display:grid;grid-template-columns:repeat(var(--pl-n,3),minmax(0,1fr));column-gap:8px}
  #pricelist .pl-t__head{align-items:end;padding:12px 14px 10px;background:var(--navy-800)}
  #pricelist .pl-t__going{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  #pricelist .pl-t__area{display:block;min-width:0;padding:0;text-align:right;font-size:14px}
  #pricelist .pl-t .pl-t__grp{display:block}
  #pricelist .pl-t__grp th{display:block;border-top:1px solid var(--pl-rule)}
  #pricelist .pl-t__row{padding:0 14px 10px;border-top:1px solid var(--pl-rule)}
  #pricelist .pl-t__dest{display:block;grid-column:1 / -1;padding:10px 0 2px;font-size:15px}
  #pricelist .pl-t__fare{display:block;min-width:0;padding:0;font-size:19px;font-weight:500;line-height:1.3}
}

#pricelist .pl-note{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}

/* The two filed lines under the fares: rendered from fares.js other[] */
#pricelist .pl-extras{margin-top:20px;border-top:1px solid var(--line-strong)}
#pricelist .pl-extra{padding:14px 0;border-bottom:1px solid var(--line-strong)}
#pricelist .pl-extra__h{margin:0;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.3;color:var(--bone)}
#pricelist .pl-extra__p{margin:3px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}

/* --------------------------------------------------------------------------
   Payment options and the D-122 sentence. Phone: after the fares (D-151).
   -------------------------------------------------------------------------- */
#pricelist .pl-pay{margin-top:24px}
#pricelist .pl-pay__h{margin:0 0 12px;font-family:var(--font-display);font-size:13px;font-weight:500;line-height:1.08;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#pricelist .pl-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
#pricelist .pl-chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 14px;border:1px solid transparent;border-radius:var(--radius);
  font-size:15px;font-weight:500;line-height:1.4;color:var(--bone)}
#pricelist .pl-chip svg{flex-shrink:0;color:var(--blue-300)}
#pricelist .pl-pay__dep{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}

/* --------------------------------------------------------------------------
   What's in the price: four one-line disclosures (smoked inner glass)
   -------------------------------------------------------------------------- */
#pricelist .pl-inprice{margin-top:32px}
#pricelist .pl-inprice__h{margin:0;font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.44px;color:var(--bone)}
#pricelist .pl-cards{margin-top:14px;display:flex;flex-direction:column;gap:8px}
#pricelist .pl-card{margin:0;border:1px solid transparent;border-radius:var(--radius)}
#pricelist .pl-card__sum{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border-radius:var(--radius)}
#pricelist .pl-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border:1px solid currentColor;border-radius:var(--radius)}
#pricelist .pl-badge svg{flex-shrink:0}
#pricelist .pl-badge--teal{color:var(--teal)}
#pricelist .pl-badge--blue{color:var(--blue-300)}
#pricelist .pl-badge--muted{color:var(--muted)}
#pricelist .pl-sum__txt{flex:1;min-width:0}
#pricelist .pl-sum__title{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.3;color:var(--bone)}
#pricelist .pl-sum__sub{display:block;margin-top:2px;font-size:15px;line-height:1.4;color:var(--muted)}
#pricelist .pl-card__sum .pl-ic{color:var(--bone)}
#pricelist details[open]>.pl-card__sum .pl-ic{color:var(--teal-hi)}
#pricelist .pl-list{margin:0;padding:4px 14px 18px 52px;list-style:none;display:flex;flex-direction:column;gap:14px}
#pricelist .pl-list--open{padding-bottom:0}
#pricelist .pl-li__title{display:block;font-size:16px;font-weight:600;line-height:1.35;color:var(--bone)}
#pricelist .pl-li__desc{display:block;margin-top:3px;font-size:15px;line-height:1.5;color:var(--muted)}
#pricelist .pl-card__foot{margin:16px 14px 18px 52px;padding-top:12px;border-top:1px dashed var(--line-strong);font-size:15px;font-weight:600;line-height:1.5;color:var(--bone)}
#pricelist .pl-card__p{margin:0;padding:4px 14px 18px 52px;font-size:16px;line-height:1.55;color:var(--muted)}
#pricelist .pl-card__lead{font-weight:600;color:var(--bone)}

/* --------------------------------------------------------------------------
   Waiting time and extra stops: the calculator (figures from fares.js)
   -------------------------------------------------------------------------- */
#pricelist .pl-calc{margin-top:16px}
#pricelist .pl-calc__body{padding:4px 14px 18px}
#pricelist .pl-calc__intro{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
#pricelist .pl-calc__grid{margin-top:20px;display:flex;flex-direction:column;gap:22px}
#pricelist .pl-calc__inputs{display:flex;flex-direction:column;gap:22px}
#pricelist .pl-calc__q{display:block;margin:0;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.3;color:var(--bone)}
#pricelist .pl-calc__pair{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#pricelist .pl-opt{display:block;width:100%;min-height:64px;padding:10px 12px;text-align:left;border-radius:var(--radius);background:var(--pl-off);border:1px solid var(--line-control)}
#pricelist .pl-opt__name{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.3;color:var(--bone)}
#pricelist .pl-opt__sub{display:block;margin-top:2px;font-family:var(--font-body);font-size:14px;line-height:1.4;color:var(--muted)}
#pricelist .pl-opt[aria-pressed="true"]{background:var(--blue-700);border-color:var(--blue-300)}
#pricelist .pl-opt[aria-pressed="true"] .pl-opt__sub{color:var(--bone)}

/* minutes: phone puts the value beside the slider, desktop beside the label */
#pricelist .pl-calc__mins{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;
  grid-template-areas:"label label" "range value" "rule rule"}
#pricelist .pl-calc__mlabel{grid-area:label}
#pricelist .pl-calc__mval{grid-area:value;min-width:96px;text-align:right;font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.2;color:var(--bone);white-space:nowrap}
#pricelist .pl-calc__range{grid-area:range;display:block;width:100%;min-width:0;height:44px;margin:4px 0 0;accent-color:var(--blue-300);cursor:pointer}
#pricelist .pl-calc__rule{grid-area:rule;margin:0;font-size:15px;line-height:1.5;color:var(--muted)}

#pricelist .pl-calc__stepper{margin-top:10px;display:flex;align-items:center;gap:12px}
#pricelist .pl-step{display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid var(--line-control);border-radius:var(--radius);color:var(--bone)}
#pricelist .pl-step[aria-disabled="true"]{cursor:default}
#pricelist .pl-step__n{min-width:2ch;text-align:center;font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--bone)}
#pricelist .pl-step__note{font-size:14px;line-height:1.45;color:var(--muted)}

#pricelist .pl-result{padding:18px 16px;border:1px solid transparent;border-radius:var(--radius)}
#pricelist .pl-result__label{margin:0;font-size:15px;line-height:1.4;color:var(--muted)}
#pricelist .pl-result__total{margin:6px 0 0;font-family:var(--font-display);font-size:44px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--bone)}
#pricelist .pl-result__rows{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-strong);display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.4}
#pricelist .pl-result__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
#pricelist .pl-result__k{color:var(--muted)}
#pricelist .pl-result__v{font-weight:600;color:var(--bone)}
#pricelist .pl-result__foot{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  #pricelist summary,#pricelist .pl-ic,#pricelist .frow{transition:none!important}
}

/* --------------------------------------------------------------------------
   768 to 1023: the phone layout with more room
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  #pricelist{padding:clamp(24px,calc(-48px + 9.375vw),48px) 0 clamp(48px,calc(-96px + 18.75vw),96px)}
  #pricelist .pl-wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
  #pricelist .pl-panel{padding:40px 32px 44px}
  #pricelist .pl-book{align-items:flex-start}
  #pricelist .pl-book .nv-book{width:auto;min-width:260px}
  #pricelist .pl-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  /* seven areas (D-176, Petersfield as Zone G): four across, so the rows go 4 and 3 with no card left
     alone, here and on desktop; with six the boards' 3 and 6 across stand */
  #pricelist .pl-areas:has(> :nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   1024 and up: the desktop board (d09a)
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  #pricelist{padding:48px 0 96px;--pl-namecol:244px;--pl-cellx:8px}
  #pricelist .pl-wrap{padding-left:40px;padding-right:40px}
  #pricelist .pl-panel{padding:clamp(32px,calc(12.5vw - 96px),64px);
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:start}
  #pricelist .pl-panel > *{grid-column:1 / -1;min-width:0}
  #pricelist .pl-panel > .pl-h2{grid-column:1;grid-row:1}
  #pricelist .pl-panel > .pl-pay{grid-column:1;grid-row:2;margin-top:20px}
  #pricelist .pl-panel > .pl-book{grid-column:2;grid-row:1 / span 2;margin:0;align-items:flex-end}

  #pricelist .pl-book .nv-book{width:auto;min-width:0;min-height:48px}
  #pricelist .pl-promise{max-width:34ch;font-size:14px;text-align:right}
  #pricelist .pl-promise__lead{font-weight:700}

  #pricelist .pl-chips{gap:10px}
  #pricelist .pl-pay__dep{margin-top:12px;max-width:62ch;font-size:14px;line-height:1.5}

  #pricelist .pl-intro{margin-top:32px;font-size:17px}
  #pricelist .pl-areas{margin-top:24px;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  #pricelist .pl-area{min-height:64px;padding:11px 12px 11px 14px}
  #pricelist .pl-area__count{padding-top:3px}
  #pricelist .pl-area__tick{top:auto;right:11px;bottom:12px}

  #pricelist .pl-led-h{margin-top:40px;font-size:26px}
  #pricelist .pl-led{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;border:0;border-radius:0;overflow:visible;background:none}
  #pricelist .pl-led__grp{border:1px solid var(--pl-edge);border-radius:var(--radius);overflow:hidden;background:var(--pl-tint)}
  #pricelist .pl-led__grp + .pl-led__grp .pl-grp{border-top:0}
  #pricelist .pl-grp{padding:12px 18px 11px}
  #pricelist .pl-led__row{gap:20px;min-height:58px;padding:12px 18px}
  #pricelist .pl-led__dest{font-size:17px}
  #pricelist .pl-led__fare{font-size:26px}

  #pricelist .pl-all{margin-top:16px}
  #pricelist .pl-all__sum{padding:12px 18px}
  #pricelist .pl-cap{margin-top:18px}

  /* The full table reads as the board's one grid: the tables side by side, each as wide as its share of
     the areas, the ones after the first with their destination column 0 wide and its names kept for
     screen readers. Fixed row heights keep the tables level. */
  #pricelist .pl-full{display:flex;margin-top:12px;border:1px solid var(--pl-edge);border-radius:var(--radius);overflow:hidden;background:var(--pl-tint)}
  #pricelist .pl-t{table-layout:fixed;margin:0}
  #pricelist .pl-t{flex:none;width:calc((100% - var(--pl-namecol)) * var(--pl-n,3) / var(--pl-total,6))}
  #pricelist .pl-t:first-child{width:calc(var(--pl-namecol) + (100% - var(--pl-namecol)) * var(--pl-n,3) / var(--pl-total,6))}
  #pricelist .pl-t:first-child .pl-t__namecol{width:var(--pl-namecol)}
  #pricelist .pl-t:not(:first-child) .pl-t__namecol{width:0}
  #pricelist .pl-t__head{height:62px;background:var(--navy-800)}
  #pricelist .pl-t__grp{height:38px}
  #pricelist .pl-t__row{height:49px}
  #pricelist .pl-t__going{vertical-align:bottom;padding:14px 16px 12px;text-align:left;font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  #pricelist .pl-t__area{vertical-align:bottom;padding:14px var(--pl-cellx) 12px;text-align:right;font-size:13px}
  #pricelist .pl-t__grp th{padding:12px 16px 10px;border-top:1px solid var(--pl-rule)}
  #pricelist .pl-t__dest{padding:13px 16px;font-size:15px;white-space:nowrap;border-top:1px solid var(--pl-rule)}
  #pricelist .pl-t__fare{padding:12px var(--pl-cellx);font-size:18px;font-weight:500;line-height:1.3;border-top:1px solid var(--pl-rule)}
  #pricelist .pl-t:not(:first-child) .pl-t__going,#pricelist .pl-t:not(:first-child) .pl-t__dest{padding:0;border-left:0;border-right:0}
  #pricelist .pl-t:not(:first-child) .pl-t__going-txt,#pricelist .pl-t:not(:first-child) .pl-t__dest-txt,#pricelist .pl-t:not(:first-child) .pl-t__grp-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* the second table's hidden labels are clipped and never painted, but the contrast meter reads clipped text as if
     painted (over the tinted column beside it): bone keeps the meter's reading true to what a reader can see */
  #pricelist .pl-t:not(:first-child) .pl-t__going-txt{color:var(--bone)}
  #pricelist .pl-t [data-sel="true"]{background:var(--pl-sel)}
  #pricelist .pl-t th[data-sel="true"]{box-shadow:inset 0 3px 0 var(--blue-300)}

  #pricelist .pl-note{margin-top:18px;max-width:72ch}
  #pricelist .pl-extras{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;border-bottom:1px solid var(--line-strong)}
  #pricelist .pl-extra{padding:16px 0;border-bottom:0}

  #pricelist .pl-inprice{margin-top:48px}
  #pricelist .pl-cards{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start}
  #pricelist .pl-card__sum{min-height:68px;padding:14px 18px}
  #pricelist .pl-sum__title{font-size:17px}
  #pricelist .pl-list{padding:4px 18px 20px 56px}
  #pricelist .pl-list--open{padding-bottom:0}
  #pricelist .pl-card__foot{margin:16px 18px 20px 56px}
  #pricelist .pl-card__p{padding:4px 18px 20px 56px}

  #pricelist .pl-calc__body{padding:4px 24px 24px}
  #pricelist .pl-calc__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:start}
  #pricelist .pl-calc__inputs{gap:24px}
  #pricelist .pl-opt{padding:12px 16px}
  #pricelist .pl-calc__mins{column-gap:16px;align-items:baseline;grid-template-areas:"label value" "range range" "rule rule"}
  #pricelist .pl-calc__mval{min-width:0}
  #pricelist .pl-step__note{font-size:15px;line-height:1.5}
  #pricelist .pl-result{padding:24px}
  #pricelist .pl-result__total{font-size:48px}
  #pricelist .pl-result__rows{margin-top:20px;padding-top:16px}
  #pricelist .pl-result__foot{margin-top:16px}

  /* light pools, placed from the 1280 board's centre */
  #pricelist .pl-glow--1{left:calc(50% + 420px);right:auto;top:-280px;width:560px;height:560px;background:radial-gradient(circle,rgba(0,95,214,.85) 0%,rgba(0,95,214,.42) 34%,rgba(0,95,214,0) 68%);filter:blur(36px)}
  #pricelist .pl-glow--2{left:calc(50% - 970px);top:520px;width:560px;height:560px;background:radial-gradient(circle,rgba(0,95,214,.80) 0%,rgba(132,185,255,.22) 34%,rgba(0,95,214,0) 68%);filter:blur(36px)}
  #pricelist .pl-glow--3{left:calc(50% + 370px);right:auto;top:1060px;width:540px;height:540px;background:radial-gradient(circle,rgba(0,95,214,.75) 0%,rgba(0,95,214,.42) 34%,rgba(0,95,214,0) 68%);filter:blur(36px)}
  #pricelist .pl-glow--4{left:calc(50% - 700px);top:1330px;width:220px;height:220px;filter:blur(22px)}
  #pricelist .pl-glow--5{left:calc(50% - 360px);top:365px;width:720px;height:720px;filter:blur(40px)}
}
@media (min-width:1280px){
  #pricelist{--pl-namecol:256px;--pl-cellx:12px}
  #pricelist .pl-t__area{font-size:14px}
}
/* Seven areas side by side (D-176, three tables): a slimmer destination column (the longest name, "Southampton
   Cruise Terminals", 195px at 14px) and tighter cells, so every area name fits its column ("Southampton" 80px at
   12px, 86px at 13px) and no row grows. With six areas none of this applies. */
@media (min-width:1024px){
  #pricelist .pl-full:has(> .pl-t:nth-child(3)){--pl-namecol:228px;--pl-cellx:6px}
  #pricelist .pl-full:has(> .pl-t:nth-child(3)) .pl-t__dest{font-size:14px}
  #pricelist .pl-full:has(> .pl-t:nth-child(3)) .pl-t__area{font-size:12px}
}
@media (min-width:1280px){
  #pricelist .pl-full:has(> .pl-t:nth-child(3)) .pl-t__area{font-size:13px}
}