/* ============================================================
   WAYFINDER v2 kit -- SYC redesign, thread 01
   Source of truth: SYC redesign COMPONENT SPEC 2026-08-08.txt
   (sections 0-20). Consumed by every v2 page; v2 pages load
   ONLY this sheet (self-contained tokens, both themes).
   Pure ASCII on purpose.
   ============================================================ */

:root{
  --bg:#F4F3F0; --surface:#FFFFFF; --surface2:#FBFBFA; --inset:#EFEEEA;
  --ink:#16181D; --ink2:#4A4F5A; --ink3:#6E7480; --line:#E7E6E1; --line2:#DBDAD4;
  --brand:#E11D2A; --brand-50:#FDF0F1; --ok:#036B4E; --ok-bg:#EFF9F5;
  --warn:#B45309; --warn-bg:#FEF3E2; --danger:#DC2626; --danger-bg:#FDF1F1;
  --info:#1D4ED8; --info-bg:#EDF2FE;
  --hp:#7F69F7; --hp-bg:#F2F2FF; --jtr:#803782; --jtr-bg:#FBEFFB; --che:#9B7A00; --che-bg:#F8F4E5;
  --roy:#3242C1; --roy-bg:#EEF3FF; --ult:#00A86B; --ult-bg:#E8F8F0; --gho:#0098CE; --gho-bg:#E7F7FF;
  --brick:#A53400; --brick-bg:#FEF1E6; --litt:#007051; --litt-bg:#E7F8F2; --aga:#E952B1; --aga-bg:#FFEFF7;
  --sh:0 2px 4px rgba(22,24,29,.11),0 6px 16px rgba(22,24,29,.13);
  --sh-lg:0 12px 36px rgba(22,24,29,.24);
  --r:14px; --r-lg:20px; --r-full:999px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --hfont:'Plus Jakarta Sans',var(--font);
  --dur-1:120ms; --dur-2:200ms; --ease:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#0C0E12; --surface:#171A20; --surface2:#1E222A; --inset:#252A33;
  --ink:#EDEFF2; --ink2:#B9BFC9; --ink3:#8A909C; --line:#272C35; --line2:#363C46;
  --brand:#FF4D57; --brand-50:#2A1416; --ok:#34D399; --ok-bg:#0E2A22;
  --warn:#F59E0B; --warn-bg:#2C2008; --danger:#F87171; --danger-bg:#2A1416;
  --info:#60A5FA; --info-bg:#12233F;
  --hp:#998FFF; --hp-bg:#24233A; --jtr:#A139A3; --jtr-bg:#311E31; --che:#B89A00; --che-bg:#2C260C;
  --roy:#485FD9; --roy-bg:#1E253B; --ult:#00F2AA; --ult-bg:#102C20; --gho:#4AD0FF; --gho-bg:#0C2A36;
  --brick:#A35000; --brick-bg:#34210F; --litt:#009872; --litt-bg:#0B2D24; --aga:#F168BC; --aga-bg:#351D2A;
  --sh:0 1px 2px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.42);
  --sh-lg:0 8px 30px rgba(0,0,0,.66);}}
:root[data-theme="dark"]{
  --bg:#0C0E12; --surface:#171A20; --surface2:#1E222A; --inset:#252A33;
  --ink:#EDEFF2; --ink2:#B9BFC9; --ink3:#8A909C; --line:#272C35; --line2:#363C46;
  --brand:#FF4D57; --brand-50:#2A1416; --ok:#34D399; --ok-bg:#0E2A22;
  --warn:#F59E0B; --warn-bg:#2C2008; --danger:#F87171; --danger-bg:#2A1416;
  --info:#60A5FA; --info-bg:#12233F;
  --hp:#998FFF; --hp-bg:#24233A; --jtr:#A139A3; --jtr-bg:#311E31; --che:#B89A00; --che-bg:#2C260C;
  --roy:#485FD9; --roy-bg:#1E253B; --ult:#00F2AA; --ult-bg:#102C20; --gho:#4AD0FF; --gho-bg:#0C2A36;
  --brick:#A35000; --brick-bg:#34210F; --litt:#009872; --litt-bg:#0B2D24; --aga:#F168BC; --aga-bg:#351D2A;
  --sh:0 1px 2px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.42);
  --sh-lg:0 8px 30px rgba(0,0,0,.66);}
:root[data-theme="light"]{
  --bg:#F4F3F0; --surface:#FFFFFF; --surface2:#FBFBFA; --inset:#EFEEEA;
  --ink:#16181D; --ink2:#4A4F5A; --ink3:#6E7480; --line:#E7E6E1; --line2:#DBDAD4;
  --brand:#E11D2A; --brand-50:#FDF0F1; --ok:#036B4E; --ok-bg:#EFF9F5;
  --warn:#B45309; --warn-bg:#FEF3E2; --danger:#DC2626; --danger-bg:#FDF1F1;
  --info:#1D4ED8; --info-bg:#EDF2FE;
  --hp:#7F69F7; --hp-bg:#F2F2FF; --jtr:#803782; --jtr-bg:#FBEFFB; --che:#9B7A00; --che-bg:#F8F4E5;
  --roy:#3242C1; --roy-bg:#EEF3FF; --ult:#00A86B; --ult-bg:#E8F8F0; --gho:#0098CE; --gho-bg:#E7F7FF;
  --brick:#A53400; --brick-bg:#FEF1E6; --litt:#007051; --litt-bg:#E7F8F2; --aga:#E952B1; --aga-bg:#FFEFF7;
  --sh:0 2px 4px rgba(22,24,29,.11),0 6px 16px rgba(22,24,29,.13);
  --sh-lg:0 12px 36px rgba(22,24,29,.24);}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--font)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
a{color:var(--info)}
.num{font-variant-numeric:tabular-nums}
/* a11y baseline: keyboard focus is always visible; wrapped headings break well */
:focus-visible{outline:2px solid var(--info);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
h1,h2,h3{text-wrap:pretty}

/* -- nav rail (thread 02 IA: 12 links, grouped by cadence) -- */
.v2nav{position:fixed;top:0;left:0;bottom:0;width:212px;z-index:45;overflow-y:auto;
  background:var(--surface);border-right:1px solid var(--line);padding:14px 12px 20px;
  display:flex;flex-direction:column;gap:1px}
.v2nav .nvhome{display:block;padding:4px 6px 12px}
.v2nav .nvhome img{width:100%;aspect-ratio:778/252;object-fit:cover;object-position:center 53.3%;display:block}
:root[data-theme="dark"] .v2nav .nvhome img{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .v2nav .nvhome img{filter:invert(1) hue-rotate(180deg)}}
.nvgrp{font:800 8.5px var(--font);letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);
  padding:14px 8px 5px}
.nvl{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:10px;
  font:600 13px var(--font);color:var(--ink2);text-decoration:none;min-height:44px}
.nvl svg{width:17px;height:17px;flex:0 0 auto;opacity:.75}
.nvl:hover{background:var(--inset);color:var(--ink)}
.nvl.on{background:var(--brand-50);color:var(--ink);font-weight:800}
.nvl.on svg{opacity:1;color:var(--brand)}
.nvtag{margin-left:auto;font:800 8px var(--font);font-style:normal;letter-spacing:.06em;
  text-transform:uppercase;background:var(--inset);color:var(--ink3);border-radius:5px;padding:2px 5px}
.nvl.on .nvtag{background:var(--brand);color:#fff}
.nvtag[data-skin],.nvl .nvtag{letter-spacing:.04em}
.nvfoot{margin-top:auto;font:600 9.5px var(--font);color:var(--ink3);padding:14px 8px 0}
.v2navscrim{position:fixed;inset:0;background:rgba(10,11,14,.45);z-index:44;opacity:0;
  pointer-events:none;transition:opacity 200ms}
body.hasnav .v2shell{margin-left:212px}
#navBtn{display:none}
@media (max-width:1099px){
  .v2nav{transform:translateX(-100%);transition:transform 240ms var(--ease);box-shadow:var(--sh-lg)}
  body.navopen .v2nav{transform:none}
  body.navopen .v2navscrim{opacity:1;pointer-events:auto}
  body.hasnav .v2shell{margin-left:0}
  #navBtn{display:inline-flex}
}

/* global search: one glass, every page */
.v2find{position:fixed;right:18px;bottom:18px;z-index:46;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px rgba(22,24,29,.26),0 14px 30px rgba(22,24,29,.18)}
.v2find:hover{transform:translateY(-2px)}
.v2find svg{width:21px;height:21px}
.v2findwrap{position:fixed;inset:0;z-index:60;display:none;background:rgba(10,11,14,.45);
  padding:6vh 20px 20px}
body.findopen .v2findwrap{display:block}
.v2findbox{max-width:880px;margin:0 auto;background:var(--surface);border:1px solid var(--line2);
  border-radius:18px;box-shadow:var(--sh-lg);overflow:hidden;max-height:80vh;display:flex;flex-direction:column}
.v2findbox input{border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  font:600 16px var(--font);padding:16px 18px;outline:none}
#v2findout{overflow-y:auto}
.v2findsec{font:800 9px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  padding:12px 18px 5px}
.v2findrow{display:block;padding:9px 18px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
.v2findrow:hover{background:var(--inset)}
.v2findrow b{display:block;font:700 13.5px var(--font)}
.v2findrow span{display:block;font:600 11.5px var(--font);color:var(--ink3)}
.v2findhint{padding:16px 18px;font:600 12.5px var(--font);color:var(--ink3)}
@media (max-width:1099px){ .v2find{bottom:76px} }

/* -- shell / top bar (logo prominent per section 18b) -- */
/* The shell fills whatever is left of the rail rather than centring inside a
   1240px column. Centring left a dead gutter on the right that the sticky
   header could not paint over, so the header read as a floating slab with
   gaps at both ends (Ferry 2026-08-10). A calendar wants the width anyway --
   more departures per row. */
.v2shell{margin:0 auto;padding:0 16px 70px}
/* the whole toolbar follows you down the page -- filters always one tap away.
   It bleeds out through the shell's own gutter so its background, its rule
   and its shadow run edge to edge, while its CONTENTS stay on the same 16px
   grid as the cards beneath it. */
.v2head{position:sticky;top:0;z-index:30;background:var(--bg);
  padding:14px 16px 8px;margin:0 -16px 10px;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 18px -14px rgba(22,24,29,.5)}
.v2top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
/* the logo sits ON the page, never on a plate. The artwork is dark ink +
   red pin on transparent, so dark mode inverts and rotates the hue back. */
/* the artwork is 778x252 of ink inside an 800x800 canvas -- crop the empty
   margins so "25% of the width" is 25% of the LOGO, not of its padding */
.v2top .logo{width:25%;min-width:190px;max-width:330px;aspect-ratio:778/252;height:auto;
  object-fit:cover;object-position:center 53.3%;display:block;flex:0 0 auto}
@media (min-width:1100px){ .v2top .logo{display:none} }
@media (prefers-color-scheme:dark){:root:not([data-theme]) .v2top .logo,
  :root:not([data-theme]) .gate img{filter:invert(1) hue-rotate(180deg)}}
:root[data-theme="dark"] .v2top .logo,
:root[data-theme="dark"] .gate img{filter:invert(1) hue-rotate(180deg)}
.gate img{height:64px}
.v2top h1{font:800 20px/1.1 var(--hfont);letter-spacing:-.02em;margin:0}
.v2top .sub{font:600 11px var(--font);color:var(--ink3)}
.v2top .spacer{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prevpill{font:800 9.5px var(--font);letter-spacing:.07em;text-transform:uppercase;
  background:var(--warn-bg);color:var(--warn);border-radius:var(--r-full);padding:4px 10px}

/* -- buttons: darkest shadow tier (section 19a) -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 13px var(--font);
  padding:8px 15px;border-radius:var(--r-full);border:1px solid var(--line2);background:var(--surface);
  color:var(--ink);cursor:pointer;min-height:44px;
  transition:background var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1);
  box-shadow:0 3px 7px rgba(22,24,29,.20),0 8px 18px rgba(22,24,29,.14)}
.btn.ghost{background:transparent;box-shadow:0 2px 5px rgba(22,24,29,.14)}
.btn.pin{background:var(--brand-50);font-weight:700;
  box-shadow:0 4px 9px rgba(22,24,29,.24),0 10px 22px rgba(22,24,29,.16)}
.btn.pin:hover{border-color:var(--brand);box-shadow:0 6px 12px rgba(22,24,29,.28),0 12px 26px rgba(22,24,29,.18)}
.btn.pin:active{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.sm{min-height:44px;padding:5px 12px;font-size:12px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.pinglyph{width:12px;height:15px;flex:0 0 auto}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-full);overflow:hidden;background:var(--surface)}
.seg button{font:600 12px var(--font);padding:7px 14px;border:none;background:transparent;color:var(--ink2);cursor:pointer;min-height:36px}
.seg button[aria-pressed="true"]{background:var(--inset);color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)}

/* -- pills / chips -- */
.pill{display:inline-flex;align-items:center;gap:4px;font:700 10.5px var(--font);padding:3px 9px;
  border-radius:var(--r-full);background:var(--inset);color:var(--ink2);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.danger{background:var(--danger-bg);color:var(--danger)} .pill.info{background:var(--info-bg);color:var(--info)}
.tchip{display:inline-flex;font:700 10px var(--font);letter-spacing:.02em;padding:2.5px 8px;border-radius:6px;
  color:var(--tc,var(--ink2));background:var(--tbg,var(--inset))}
.cty{font:700 8.5px var(--font);color:var(--ink3);letter-spacing:.05em;text-transform:uppercase}

/* -- departure cards (sections 8/10/12/17/19) -- */
/* start-aligned: an expanded card grows on its own. With stretch, its row
   neighbours grew to match and read as empty broken cards (Ferry 2026-08-09). */
.slotgrid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);align-items:start}
/* an opened card takes the full row -- the detail gets the width, and the
   grid never shows a tall gap beside it */
@media (min-width:760px){ .slotgrid > .slot.open{grid-column:1/-1} }
@media (min-width:760px){.slotgrid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}}
.slot{min-width:0;background:color-mix(in srgb, var(--tcv,var(--ink3)) 4%, var(--surface));
  border:1px solid var(--line);border-left:5px solid var(--tcv,var(--line2));
  border-radius:5px 16px 16px 5px;box-shadow:var(--sh);padding:12px 14px;cursor:pointer;
  transition:border-color var(--dur-1),transform var(--dur-2) var(--ease)}
.slot:hover{transform:translateY(-2px);border-color:var(--line2)}
.slot.nd{--tcv:var(--danger)}
.slot .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.slot .t{font:800 15px var(--hfont);font-variant-numeric:tabular-nums}
.slot .t.tstrike{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink3)}
.slot .nm{font:600 13px var(--font);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .row2{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.slot .pax{font:600 12px var(--font);font-variant-numeric:tabular-nums;color:var(--ink2)}
.slot .pax b{color:var(--ink)}
.slot .gl{font:600 12px var(--font);color:var(--ink);margin-top:6px;padding-top:6px;
  border-top:1px dashed var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .gl .gu{color:var(--danger);font-weight:800}
.slot .gl .gq{color:var(--ink3);font-weight:500}
.slot.shut,.wdep.shut{opacity:.7;filter:saturate(.55)}
.slot.shut .t,.wdep.shut .l1>span:first-child{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink3)}
.leg.shut{opacity:.7}
.slot.past{background:var(--surface2);border-left-color:var(--line2)!important}
.slot.past .t,.slot.past .nm{color:var(--ink3)}

/* needs-a-guide beacon (section 17d): first flex item, never absolute */
.ndot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:var(--danger);
  border:2px solid var(--ink);animation:beaconfy 1.1s ease-in-out infinite}
@keyframes beaconfy{0%,100%{background:var(--danger);box-shadow:0 0 0 0 rgba(220,38,38,0)}
  50%{background:#FFC400;box-shadow:0 0 0 4px rgba(255,196,0,.35)}}
@media (prefers-reduced-motion:reduce){.ndot{animation:none;background:var(--danger)}}

/* forecast bullet (section 9): booked solid, predicted light, LY tick. no capacity */
.bviz{display:block;flex:1;width:100%;min-width:90px;height:10px;border-radius:5px;position:relative;
  background:color-mix(in srgb, var(--ink3) 18%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink3) 26%, transparent)}
.bviz .bk{position:absolute;top:0;bottom:0;left:0;border-radius:5px}
.bviz .pd{position:absolute;top:0;bottom:0;border-radius:0 5px 5px 0;opacity:.4}
.bviz .ly{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ink2);border-radius:2px}

/* collapsed multi-language group = CURLED PAGE (section 19b) */
.slot.grp{border-left-width:6px;position:relative;margin-bottom:16px;
  box-shadow:0 6px 14px rgba(22,24,29,.22),0 14px 30px rgba(22,24,29,.18)}
.slot.grp::before{content:"";position:absolute;left:12px;right:5px;bottom:-8px;height:8px;
  background:color-mix(in srgb, var(--tcv,var(--ink3)) 7%, var(--surface2));
  border:1px solid var(--line2);border-top:none;
  border-radius:0 0 14px 6px;box-shadow:0 5px 12px rgba(22,24,29,.24);z-index:-1;
  transform:rotate(-.5deg);transform-origin:100% 0}
.slot.grp::after{content:"";position:absolute;right:0;bottom:0;width:30px;height:30px;
  border-radius:0 0 16px 4px;pointer-events:none;
  background:linear-gradient(315deg, color-mix(in srgb, var(--tcv,var(--ink3)) 5%, var(--surface)) 0 30%, var(--surface2) 44%,
    rgba(22,24,29,.28) 50%, rgba(22,24,29,.10) 53%, transparent 56%);
  filter:drop-shadow(-2px -2px 3px rgba(22,24,29,.10))}
.slot.grp.open{border-left-width:3px;margin-bottom:0;box-shadow:var(--sh-lg)}
.slot.grp.open::before,.slot.grp.open::after{display:none}

/* expanded legs */
.legs{margin-top:9px;border-top:1px solid var(--line);padding-top:2px}
.leg{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);
  min-height:40px;flex-wrap:wrap;font:600 12px var(--font)}
.leg:last-child{border-bottom:none}
.leg.click{cursor:pointer;border-radius:8px}
.leg.click:hover{background:color-mix(in srgb, var(--tc,var(--ink3)) 7%, transparent)}
.leg .drill{margin-left:auto;font:800 15px var(--font);color:var(--ink3)}
.leg .lg{color:var(--ink);font-weight:600}
.leg .lmeta{color:var(--ink3);font-weight:500;font-size:11.5px}
.slice{font:700 9px var(--font);background:var(--inset);color:var(--ink3);border-radius:5px;padding:2px 6px}
.slice.w{background:var(--warn-bg);color:var(--warn)}
.banddots{display:inline-flex;gap:2.5px}
.banddots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.28}
.banddots i.on{opacity:1}

/* -- filter button + inline panel (sections 17b/c) -- */
.fbtn{font:800 13px var(--font);padding:10px 18px;border-radius:var(--r-full);border:1px solid var(--line2);
  background:var(--surface);color:var(--ink);cursor:pointer;min-height:42px;display:inline-flex;gap:8px;
  align-items:center;box-shadow:0 4px 9px rgba(22,24,29,.24),0 10px 24px rgba(22,24,29,.16);
  transition:transform 140ms var(--ease)}
.fbtn:hover{transform:translateY(-2px)}
.fbadge{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);
  background:var(--brand);color:#fff;font:800 10.5px var(--font);align-items:center;justify-content:center}
.fpanel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:13px 15px;
  margin:10px 0 4px;box-shadow:var(--sh-lg);display:none;position:relative}
body.fopen .fpanel{display:block;animation:fdrop 240ms var(--ease)}
@keyframes fdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.fpanel .fx{position:absolute;top:9px;right:11px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink3);font-size:13px;cursor:pointer}
.fpanel .frow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:5px 0}
.fpanel .flab{font:800 9.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  width:72px;flex:0 0 auto}
.fch{font:800 10.5px var(--font);letter-spacing:.02em;padding:5px 11px;border-radius:8px 13px 13px 8px;
  border:1.5px solid var(--line2);background:var(--surface);color:var(--ink2);cursor:pointer;min-height:32px}
.fch.on{background:var(--tbg,var(--inset));border-color:var(--tc,var(--ink));color:var(--tc,var(--ink))}
.fseg{display:inline-flex;border:1.5px solid var(--line2);border-radius:var(--r-full);overflow:hidden}
.fseg.wrap{flex-wrap:wrap;border-radius:16px}
.fsel{font:700 11.5px var(--font);border:1px solid var(--line2);border-radius:var(--r-full);
  padding:7px 13px;min-height:34px;background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:0 3px 7px rgba(22,24,29,.20),0 8px 18px rgba(22,24,29,.14)}
.fseg button{font:700 10.5px var(--font);padding:6px 12px;border:none;background:var(--surface);
  color:var(--ink2);cursor:pointer;min-height:32px}
.fseg button.on{background:var(--inset);color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)}
.fsum{font:700 11px var(--font);color:var(--ink2)}
.legend{font:500 11.5px var(--font);color:var(--ink3);margin:8px 0 14px;display:flex;gap:14px;
  flex-wrap:wrap;align-items:center}
.legend .np{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 0 3px var(--danger-bg);margin-right:4px;vertical-align:-1px}
.legend .lbk{display:inline-block;width:16px;height:6px;border-radius:3px;background:var(--ink2);
  margin-right:4px;vertical-align:1px}
.legend .lpd{display:inline-block;width:16px;height:6px;border-radius:3px;background:var(--ink3);
  opacity:.4;margin-right:4px;vertical-align:1px}
.legend .lly{display:inline-block;width:2px;height:11px;border-radius:1px;background:var(--ink3);
  margin-right:4px;vertical-align:-2px}

/* -- week band grid (sections 12/17f) -- */
.wkwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:14px}
/* the day/date row is part of the header -- it follows you down the week */
/* bleeds through the gutter the same way .v2head does, so the two sticky
   layers form one continuous header instead of a wide bar over a narrow one */
.wkheads{position:sticky;top:var(--headh,120px);z-index:20;background:var(--bg);
  padding:6px 16px 4px;margin:0 -16px;box-shadow:0 10px 14px -12px rgba(22,24,29,.5)}
.bandgrid{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:10px;min-width:1040px}
.bandlab{font:800 9px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  display:flex;align-items:center;gap:7px;margin:14px 0 2px;min-width:1040px}
.bandlab::after{content:"";flex:1;height:1px;background:var(--line2)}
.wkhead{display:flex;align-items:baseline;gap:6px;padding:2px 2px 6px;border-bottom:2px solid var(--line2);
  cursor:pointer}
.wkhead b{font:800 13px var(--hfont)}
.wkhead .wp{font:600 11px var(--font);color:var(--ink3);font-variant-numeric:tabular-nums;margin-left:auto}
.wkcol.today .wkhead{border-bottom-color:var(--brand)}
.wkcol.today .wkhead b::after{content:"today";font:700 8.5px var(--font);letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand);margin-left:5px;vertical-align:2px}
.nblip{display:inline-flex;min-width:17px;height:17px;padding:0 5px;border-radius:var(--r-full);
  background:var(--danger);color:#fff;font:800 10px var(--font);align-items:center;justify-content:center}
/* compact week card: same grammar, smaller */
.wdep{background:color-mix(in srgb, var(--tcv,var(--ink3)) 4%, var(--surface));
  border:1px solid var(--line);border-left:5px solid var(--tcv,var(--line2));
  border-radius:5px 14px 14px 5px;padding:7px 9px;margin:8px 0;cursor:pointer;position:relative;
  box-shadow:0 3px 8px rgba(22,24,29,.17),0 8px 18px rgba(22,24,29,.12);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2)}
.wdep:hover{transform:translateY(-3px);z-index:2;
  box-shadow:0 3px 8px rgba(22,24,29,.08),0 14px 30px -8px rgba(22,24,29,.25)}
.wdep.nd{--tcv:var(--danger);background:color-mix(in srgb, var(--danger) 9%, var(--surface))}
.wdep .l1{display:flex;align-items:center;gap:6px;row-gap:3px;flex-wrap:wrap;min-width:0;
  font:800 12.5px var(--hfont);font-variant-numeric:tabular-nums}
.wdep .px{margin-left:auto;font:800 13px var(--hfont);font-variant-numeric:tabular-nums}
.wdep.nd .px{color:var(--danger)}
.wdep .l3{font:600 12px var(--font);color:var(--ink);margin-top:5px;padding-top:5px;
  border-top:1px dashed var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wdep .l3 .gu{color:var(--danger);font-weight:800}
.wdep.grp{border-left-width:6px;margin-bottom:14px;
  box-shadow:0 5px 12px rgba(22,24,29,.24),0 12px 26px rgba(22,24,29,.18)}
.wdep.grp::before{content:"";position:absolute;left:9px;right:4px;bottom:-7px;height:7px;
  background:color-mix(in srgb, var(--tcv,var(--ink3)) 7%, var(--surface2));
  border:1px solid var(--line2);border-top:none;
  border-radius:0 0 12px 5px;box-shadow:0 4px 10px rgba(22,24,29,.24);z-index:-1;
  transform:rotate(-.5deg);transform-origin:100% 0}
.wdep.open{box-shadow:var(--sh-lg)}
.wdep.grp.open{border-left-width:3px;margin-bottom:8px}
.wdep.grp.open::before,.wdep.grp.open::after{display:none}
.wdep .legs .leg{min-height:34px;padding:5px 0;font-size:11.5px}
.wdep.grp::after{content:"";position:absolute;right:0;bottom:0;width:24px;height:24px;
  border-radius:0 0 14px 4px;pointer-events:none;
  background:linear-gradient(315deg, color-mix(in srgb, var(--tcv,var(--ink3)) 5%, var(--surface)) 0 30%, var(--surface2) 44%,
    rgba(22,24,29,.28) 50%, rgba(22,24,29,.10) 53%, transparent 56%);
  filter:drop-shadow(-2px -2px 3px rgba(22,24,29,.10))}

/* labelled bar -- the hover-card graphic, used inline wherever a total is
   shown (day headers, month cells, manifest hero). Figures sit where they
   fall; two figures that land close merge into one "21/26" label. */
.bbar{position:relative;height:32px;margin:0 12px}
.bbar .bbt{position:absolute;left:0;right:0;top:22px;height:10px;border-radius:5px;
  background:color-mix(in srgb, var(--ink3) 18%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink3) 26%, transparent)}
.bbar .bbk{position:absolute;top:22px;height:10px;border-radius:5px;left:0}
.bbar .bbp{position:absolute;top:22px;height:10px;border-radius:0 5px 5px 0;opacity:.4}
.bbar .bbm{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap}
.bbar .bbm b{font:800 11.5px var(--font);font-variant-numeric:tabular-nums;display:block}
.bbar .bbm i{display:block;width:2px;height:7px;margin:1px auto 0;border-radius:1px;
  background:currentColor;opacity:.55}
.bbar.sm{height:27px;margin:0 9px}
.bbar.sm .bbt,.bbar.sm .bbk,.bbar.sm .bbp{top:19px;height:8px}
.bbar.sm .bbm b{font-size:10px}
.bbar.sm .bbm i{height:5px}

/* -- day view time-window bands (same split as week, Ferry 2026-08-09) -- */
.dayband{font:800 9px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  display:flex;align-items:center;gap:8px;margin:20px 0 8px}
.dayband::after{content:"";flex:1;height:1px;background:var(--line2)}
.dayband:first-child{margin-top:6px}
/* collapsed languages, chip format in the tour's colour (replaces "xN") */
.lgset{display:inline-flex;gap:3px;flex-wrap:wrap}
.lgset i{font:800 9px var(--font);font-style:normal;letter-spacing:.03em;padding:2px 6px;
  border-radius:5px;color:var(--tc,var(--ink2));background:var(--tbg,var(--inset));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tc,var(--ink3)) 22%, transparent)}
.lgset i.shut{opacity:.5;text-decoration:line-through}
/* day totals bar under each week column head */
.daybar{margin:5px 0 2px}
.daybar .bviz{min-width:0;height:8px}
/* -- month view -- */
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.mdow{font:800 9px var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  text-align:center;padding-bottom:2px}
.mcell{min-height:96px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:8px 9px;cursor:pointer;display:flex;flex-direction:column;gap:5px;
  box-shadow:var(--sh);transition:transform var(--dur-2) var(--ease),border-color var(--dur-1)}
.mcell:hover{transform:translateY(-2px);border-color:var(--ink3)}
.mcell.out{opacity:.4}
.mcell.today{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-50),var(--sh)}
.mcell .mday{display:flex;align-items:baseline;gap:6px}
.mcell .mnum{font:800 14px var(--hfont);font-variant-numeric:tabular-nums}
.mcell .mpax{margin-left:auto;font:700 12px var(--font);font-variant-numeric:tabular-nums;color:var(--ink2)}
.mcell .mmeta{font:600 10px var(--font);color:var(--ink3)}
.mcell .mtours{display:flex;gap:3px;flex-wrap:wrap;margin-top:auto}
.mcell .mtours i{width:100%;max-width:22px;height:4px;border-radius:2px;display:block}
/* date picker */
.dpick{font:700 12px var(--font);border:1px solid var(--line2);border-radius:var(--r-full);
  padding:8px 13px;min-height:44px;background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:0 3px 7px rgba(22,24,29,.20),0 8px 18px rgba(22,24,29,.14)}
.dpick::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}

/* -- manifest bottom sheet -- */
.msheet{position:fixed;left:50%;transform:translate(-50%,105%);bottom:0;width:min(680px,96vw);
  background:var(--surface);border:1px solid var(--line2);border-bottom:none;border-radius:18px 18px 0 0;
  box-shadow:var(--sh-lg);max-height:82vh;display:flex;flex-direction:column;
  padding:14px 16px 18px;z-index:40;transition:transform 260ms var(--ease)}
.msheet.on{transform:translate(-50%,0)}
.msheet .mhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;padding-right:40px}
.msheet .mbody{overflow-y:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@supports (height:100dvh){.msheet{max-height:82dvh}}
.msheet .fx{position:absolute;top:10px;right:12px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink3);font-size:14px;cursor:pointer}
/* manifest hero + action row (write-shaped actions are inert in preview) */
.mhero{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.mhero .mtime{font:800 21px var(--hfont);font-variant-numeric:tabular-nums}
.mhero .mdate{font:600 11.5px var(--font);color:var(--ink3)}
.mhero .mtitle{flex:1;min-width:0;font:600 13px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mact{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 8px}
/* action groups wear the Staffing segmented style (Ferry 2026-08-09) --
   shared by the manifest action row and the filter panel's bulk row */
.fseg.act button{font:700 11.5px var(--font);padding:8px 15px;min-height:36px;
  border-right:1.5px solid var(--line2)}
.fseg.act button:last-child{border-right:none}
.fseg.act.sm button{font:700 10.5px var(--font);padding:5px 11px;min-height:30px}
/* cascade bar: the ask funnel as one bar -- declined | awaiting | still to
   ask | eligible-but-unavailable, with a countdown to the next batch */
.cbar{position:relative;height:30px;margin:6px 0 2px;display:flex;align-items:flex-end;gap:8px}
.cbwrap{position:relative;flex:1;min-width:0;height:30px}
.cbt{position:absolute;left:0;right:0;top:20px;height:10px;border-radius:5px;overflow:hidden;
  display:flex;background:color-mix(in srgb, var(--ink3) 18%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink3) 26%, transparent)}
.cbt i{display:block;height:100%}
.cbt i.dec{background:var(--danger)}
.cbt i.awa{background:var(--ok)}
.cbt i.yet{background:color-mix(in srgb, var(--ok) 42%, var(--surface))}
.cbm{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap}
.cbm b{font:800 11px var(--font);font-variant-numeric:tabular-nums;display:block}
.cbm i{display:block;width:2px;height:6px;margin:1px auto 0;border-radius:1px;background:currentColor;opacity:.55}
.cbtimer{flex:0 0 auto;font:800 10px var(--font);letter-spacing:.03em;white-space:nowrap;
  background:var(--inset);color:var(--ink2);border-radius:var(--r-full);padding:4px 9px;margin-bottom:1px}
.cbtimer.due{background:var(--danger-bg);color:var(--danger)}
.cbkey{font:600 9.5px var(--font);color:var(--ink3);display:flex;gap:9px;flex-wrap:wrap;margin:1px 0 4px}
.cbkey span{display:inline-flex;align-items:center;gap:3px}
.cbkey i{width:8px;height:5px;border-radius:3px;display:inline-block}
/* the one-line reason under the tour name */
.why{font:700 11.5px var(--font);color:var(--ink2);margin-top:3px}
.why.need{color:var(--danger)}
/* how long until it goes */
.tmr{margin-left:auto;font:800 11px var(--font);font-variant-numeric:tabular-nums;color:var(--ink2);
  background:var(--inset);border-radius:var(--r-full);padding:3px 9px;white-space:nowrap}
.tmr.soon{background:var(--warn-bg);color:var(--warn)}
/* count chips inside the section tabs */
.seg .cnt{font-style:normal;font:800 10px var(--font);margin-left:5px;background:var(--inset);
  color:var(--ink3);border-radius:5px;padding:1px 5px}
.seg button[aria-pressed="true"] .cnt{background:var(--brand);color:#fff}
.seg .cnt:empty{display:none}
.fseg.act button:hover{background:var(--inset)}
.fseg.act button.dngr{color:var(--danger)}
.fseg.act button.okb{color:var(--ok)}
/* bulk "Assign" opens a guide list right under the button */
.gddwrap{position:relative;display:inline-flex}
.gdd{position:absolute;top:calc(100% + 6px);left:0;z-index:12;display:none;
  background:var(--surface);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--sh-lg);padding:6px;min-width:210px;max-height:260px;overflow-y:auto}
.gdd.on{display:block}
.gdd button{display:block;width:100%;text-align:left;font:600 12px var(--font);
  border:none;background:transparent;color:var(--ink);padding:7px 10px;border-radius:9px;cursor:pointer}
.gdd button:hover{background:var(--inset)}
.gdd .gddlab{font:800 9px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);padding:6px 10px 4px}
/* floating guide picker -- same list wherever an Assign is offered */
.gpick{position:fixed;z-index:70;display:none;background:var(--surface);
  border:1px solid var(--line2);border-radius:14px;box-shadow:var(--sh-lg);
  padding:6px;min-width:210px;max-height:280px;overflow-y:auto}
.gpick.on{display:block}
.gpick button{display:block;width:100%;text-align:left;font:600 12px var(--font);
  border:none;background:transparent;color:var(--ink);padding:7px 10px;border-radius:9px;cursor:pointer}
.gpick button:hover{background:var(--inset)}
.gpick .gddlab{font:800 9px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);padding:6px 10px 4px}
/* clear sits apart from the options, top-right beside the close X */
.fclear{position:absolute;top:11px;right:56px;font:700 11.5px var(--font);
  border:1.5px solid var(--line2);background:var(--surface);color:var(--ink2);
  border-radius:var(--r-full);padding:6px 14px;min-height:32px;cursor:pointer;
  box-shadow:0 2px 5px rgba(22,24,29,.14)}
.fclear:hover{color:var(--ink);border-color:var(--ink3)}
/* forecast bar hover card: figures sit where they fall on the bar */
.bvtip{position:fixed;z-index:80;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity 120ms,transform 120ms;background:var(--surface);
  border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh-lg);
  padding:9px 11px 7px;min-width:190px}
.bvtip.on{opacity:1;transform:none}
.bvtip .bvhead{font:800 9px var(--font);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:7px}
/* the scale is inset so a figure at 0% or 100% still fits inside the card */
.bvtip .bvscale{position:relative;height:33px;margin:0 15px}
.bvtip .bvbar{position:absolute;left:0;right:0;top:24px;height:7px;border-radius:4px;
  background:color-mix(in srgb, var(--ink3) 16%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink3) 22%, transparent)}
.bvtip .bvfill{position:absolute;top:24px;height:7px;border-radius:4px;left:0}
.bvtip .bvpd{position:absolute;top:24px;height:7px;border-radius:0 4px 4px 0;opacity:.35}
.bvtip .bvmark{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap}
.bvtip .bvmark i{display:block;width:2px;height:8px;margin:0 auto;border-radius:1px;background:currentColor;opacity:.5}
.bvtip .bvnum{font:800 11.5px var(--font);font-variant-numeric:tabular-nums;display:block;margin-bottom:1px}
.bvtip .bvkey{display:flex;gap:10px;margin-top:6px;font:600 9.5px var(--font);
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink3)}
.bvtip .bvkey span{display:inline-flex;align-items:center;gap:4px}
.bvtip .bvkey i{width:9px;height:5px;border-radius:3px;display:inline-block}
/* language tag beside the tour-name chip */
.lchip{font:700 9.5px var(--font);letter-spacing:.04em;color:var(--ink3);
  background:var(--inset);border-radius:5px;padding:2.5px 7px}
/* history: who did what, when */
details.hist{margin-top:12px;border-top:1px dashed var(--line);padding-top:8px}
details.hist>summary{font:700 12px var(--font);color:var(--ink2);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:6px;padding:4px 0}
details.hist>summary::before{content:"\25B8";color:var(--ink3);font-size:10px}
details.hist[open]>summary::before{content:"\25BE"}
details.hist>summary::-webkit-details-marker{display:none}
.hrow{display:flex;gap:9px;align-items:flex-start;padding:6px 2px;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:none}
.hdot{flex:0 0 auto;min-width:34px;text-align:center;font:800 9px var(--font);text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink3);background:var(--inset);border-radius:5px;padding:3px 5px}
.hlab{font:600 12px var(--font);color:var(--ink)}
.hdet{color:var(--ink3);font-weight:500}
.htime{font:500 11px var(--font);color:var(--ink3)}
.htime b{color:var(--ink2);font-weight:700}
.mnote{font:500 11px var(--font);color:var(--ink3);border-bottom:1px dashed var(--line);
  padding-bottom:8px;margin-bottom:4px}
.msum{font:600 12.5px var(--font);color:var(--ink2);margin:6px 0 4px}
.msum b{color:var(--ink)}
/* guest rows speak the card grammar (spec section 20): tour spine + tint */
.grow{display:flex;align-items:flex-start;gap:8px;padding:8px 11px;margin:6px 0;min-width:0;
  background:color-mix(in srgb, var(--tc,var(--ink3)) 3%, var(--surface));
  border:1px solid var(--line);border-left:3px solid var(--tc,var(--line2));
  border-radius:4px 10px 10px 4px}
.grow .gname{font:700 13px var(--font)}
.grow .gpax{font:800 12.5px var(--font);font-variant-numeric:tabular-nums;white-space:nowrap}
.grow .gmeta{font:500 11.5px var(--font);color:var(--ink3)}
.grow.canc{opacity:.55}
.grow.click{cursor:pointer;transition:border-color var(--dur-1),transform var(--dur-1)}
.grow.click:hover{border-color:var(--ink3);transform:translateY(-1px)}
.gacts{display:inline-flex;gap:5px;margin-left:auto;align-items:center}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--ink2);
  cursor:pointer;box-shadow:0 2px 5px rgba(22,24,29,.14);text-decoration:none;
  font:800 8.5px var(--font)}
/* destructive icon button (manifest cancel, 2026-08-18) */
.ibtn.danger{color:#c0392b}
.ibtn.danger:hover{background:rgba(192,57,43,.12)}

.ibtn:hover{border-color:var(--ink3)}
.ibtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn.dngr{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 45%, var(--line2))}
.scrim{position:fixed;inset:0;background:rgba(10,11,14,.4);opacity:0;pointer-events:none;
  transition:opacity 200ms;z-index:39}
.scrim.on{opacity:1;pointer-events:auto}

/* ============================================================
   PEOPLE / GUIDES page -- the directory plus everything that is
   ABOUT a guide (kudos, reviews, HR) in one place, with the
   availability lookup in the corner where you reach for it.
   ============================================================ */
.gsearch{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gsearch input{font:600 13px var(--font);border:1px solid var(--line2);border-radius:var(--r-full);
  padding:9px 15px;min-height:44px;min-width:190px;background:var(--surface);color:var(--ink);
  box-shadow:0 2px 5px rgba(22,24,29,.12)}
.gcards{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:760px){.gcards{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}}
/* one guide, one card: who they are, what they can run, how loaded they are */
.gpcard{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--tcv,var(--line2));
  border-radius:5px 16px 16px 5px;box-shadow:var(--sh);padding:13px 14px;cursor:pointer;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-1)}
.gpcard:hover{transform:translateY(-2px);border-color:var(--ink3)}
.gpcard .gpname{font:800 15px var(--hfont)}
.gpcard .gpmeta{font:600 11.5px var(--font);color:var(--ink3);margin-top:2px}
.gpcard .gprow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:9px}
.gpcard.inactive{opacity:.55}
.gload{display:flex;align-items:center;gap:7px;margin-top:9px}
.gload .lbar{flex:1;height:8px;border-radius:4px;position:relative;
  background:color-mix(in srgb, var(--ink3) 18%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink3) 26%, transparent);overflow:hidden}
.gload .lbar i{display:block;height:100%;background:var(--ok);border-radius:4px}
.gload .lbar i.over{background:var(--warn)}
.gload .lnum{font:800 11px var(--font);font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
/* availability search results */
.avres{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.avres{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
.avhit{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--tcv,var(--line2));border-radius:4px 12px 12px 4px;padding:9px 11px;
  box-shadow:var(--sh);font:600 12.5px var(--font)}
.avhit b{font-weight:800}
.avhit .why{margin-left:auto;font:600 10.5px var(--font);color:var(--ink3);white-space:nowrap}

/* ============================================================
   GUIDE APP -- phone-first. Bigger type, bigger targets, one
   column, bottom tab bar. A guide reads this one-handed, often
   outdoors, often in a hurry: nothing here is denser than it
   has to be.
   ============================================================ */
.gapp{max-width:520px;margin:0 auto;padding:0 14px 96px;min-height:100vh}
.gapp .ghead{position:sticky;top:0;z-index:20;background:var(--bg);padding:14px 0 10px;
  display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.gapp .ghead img{width:150px;aspect-ratio:778/252;object-fit:cover;object-position:center 53.3%}
:root[data-theme="dark"] .gapp .ghead img{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .gapp .ghead img{filter:invert(1) hue-rotate(180deg)}}
.ghello{font:800 22px/1.15 var(--hfont);letter-spacing:-.02em;margin:16px 0 2px}
.gsub{font:600 12.5px var(--font);color:var(--ink3);margin-bottom:14px}
/* a guide's departure card: time and tour first, everything else after */
.gcard{background:color-mix(in srgb, var(--tcv,var(--ink3)) 5%, var(--surface));
  border:1px solid var(--line);border-left:6px solid var(--tcv,var(--line2));
  border-radius:6px 18px 18px 6px;box-shadow:var(--sh);padding:14px 15px;margin-bottom:12px;
  cursor:pointer;transition:transform var(--dur-2) var(--ease)}
.gcard:active{transform:scale(.99)}
.gcard .gtime{font:800 26px/1 var(--hfont);font-variant-numeric:tabular-nums}
.gcard .gtop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gcard .gwhen{margin-left:auto;font:800 12px var(--font);color:var(--ink2);
  background:var(--inset);border-radius:var(--r-full);padding:4px 10px}
.gcard .gwhen.now{background:var(--ok-bg);color:var(--ok)}
.gcard .gname{font:700 15px var(--font);margin-top:6px}
.gcard .gmeet{font:600 12.5px var(--font);color:var(--ink2);margin-top:5px}
.gcard .grow{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.gcard .gpaxbig{font:800 17px var(--hfont);font-variant-numeric:tabular-nums}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  font:800 15px var(--font);padding:14px 18px;border-radius:16px;border:1px solid var(--line2);
  background:var(--brand-50);color:var(--ink);cursor:pointer;min-height:54px;margin-top:12px;
  box-shadow:0 4px 9px rgba(22,24,29,.24),0 10px 22px rgba(22,24,29,.16)}
.gbtn:active{background:var(--brand);border-color:var(--brand);color:#fff}
.gbtn.quiet{background:var(--surface);font-weight:700}
/* cover board -- the live guide-app design, unchanged, plus the v2 shadow.
   A cover offer is the one thing on Today that is ABOUT to expire, so it
   keeps its own square-ish card and does NOT wear the tour-coloured spine. */
.cb-card{background:var(--surface);border:1px solid var(--line);border-radius:13px;
  padding:12px 13px;box-shadow:var(--sh);margin-bottom:10px}
.cb-r1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cb-ttl{font:650 15px var(--font);letter-spacing:-.1px}
.cb-time{color:var(--ink2);font-weight:600;font-variant-numeric:tabular-nums;font-size:14px}
.cb-meta{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 11px}
.cb-meta span{font:600 12px var(--font);color:var(--ink2);background:var(--inset);
  border-radius:var(--r-full);padding:2px 9px}
.cb-meta span.lang{background:var(--brand-50);color:var(--brand);font-weight:700}
.cb-actions{display:flex;gap:8px}
.cb-take{flex:1;background:var(--brand);color:#fff;border:none;border-radius:11px;
  padding:10px;font:700 14px var(--font);cursor:pointer;box-shadow:var(--sh)}
.cb-no{background:var(--surface);color:var(--ink2);border:1px solid var(--line2);
  border-radius:11px;padding:10px 12px;font:700 14px var(--font);cursor:pointer}
.cb-bin{margin-top:6px;border-top:1px solid var(--line);padding-top:10px}
.cb-bin>summary{cursor:pointer;color:var(--ink3);font:700 13px var(--font);
  list-style:none;padding:4px 2px}
.cb-bin>summary::-webkit-details-marker{display:none}
.cb-bin .cb-card{background:var(--surface2);opacity:.92;margin-top:8px;box-shadow:none}
.cb-bring{width:100%;background:var(--surface);color:var(--info);
  border:1px solid color-mix(in srgb, var(--info) 34%, var(--surface));
  border-radius:11px;padding:9px;font:700 14px var(--font);cursor:pointer}
/* bottom tab bar -- thumb reach, four destinations, never more */
.gtabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:var(--surface);border-top:1px solid var(--line2);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 20px -12px rgba(22,24,29,.5)}
.gtabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;background:transparent;color:var(--ink3);cursor:pointer;
  font:700 10px var(--font);padding:7px 4px;border-radius:12px;min-height:52px}
.gtabs button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.gtabs button[aria-pressed="true"]{color:var(--brand);background:var(--brand-50)}
.gtabs .tblip{position:absolute;transform:translate(14px,-6px);min-width:16px;height:16px;
  border-radius:999px;background:var(--danger);color:#fff;font:800 9.5px var(--font);
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
/* add-to-home-screen banner + the FAQ lightbulbs that sit beside features */
.a2hs{display:flex;gap:11px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:11px 12px;margin:12px 0;box-shadow:var(--sh)}
.a2hs b{font:800 13px var(--font);display:block}
.a2hs p{font:600 11.5px var(--font);color:var(--ink3);margin:2px 0 0}
.a2hs a{font:800 12px var(--font);color:var(--brand)}
.a2hs .x{margin-left:auto;border:none;background:transparent;color:var(--ink3);font-size:15px;cursor:pointer;padding:2px 4px}
.bulb{border:none;background:transparent;cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;
  filter:grayscale(1) opacity(.55)}
.bulb:hover{filter:none}
.gsec{font:800 9.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  margin:22px 0 8px;display:flex;align-items:center;gap:6px}
/* month: availability sessions + the tours actually on */
.gmonth{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.gmonth .mdow{font:800 8.5px var(--font);color:var(--ink3);text-align:center}
.gday{min-height:92px;background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:6px 6px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--sh)}
.gday.out{opacity:.35;box-shadow:none}
.gday.today{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-50),var(--sh)}
.gday .d{font:800 12px var(--hfont);font-variant-numeric:tabular-nums}
.gday .ses{display:flex;gap:3px}
.gday .ses i{font:800 8px var(--font);font-style:normal;color:var(--ok);background:var(--ok-bg);
  border-radius:4px;padding:1px 3px;letter-spacing:.03em}
.gday .ses i.off{color:var(--ink3);background:var(--inset)}
/* time on its own line, then the tour's short code in its own colour */
.gday .tt{display:block;border-radius:5px;padding:2px 4px;text-align:center;line-height:1.25;
  background:var(--tbg,var(--inset))}
.gday .tt span{display:block;font:700 8.5px var(--font);color:var(--ink3);font-variant-numeric:tabular-nums}
.gday .tt b{display:block;font:800 9.5px var(--font);color:var(--tc,var(--ink2));letter-spacing:.02em}
.aveditor .gday{min-height:62px}
.gnav{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.gnav b{font:800 19px var(--hfont)}
.gnav button{width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);
  font-size:15px;cursor:pointer;box-shadow:var(--sh)}
/* availability editor */
.aveditor .gday{min-height:56px;cursor:pointer}
.aveditor .gday.avail{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.aveditor .gday.dayoff{background:var(--brand-50);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.avprefs{margin-top:16px}
.avrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.avrow label{font:700 13.5px var(--font);flex:1}
.avrow input{width:96px;font:800 14px var(--font);text-align:center;border:1px solid var(--line2);
  border-radius:12px;padding:9px;background:var(--surface);color:var(--ink)}
.avdays{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.avdays button{flex:1;min-width:56px;font:700 12px var(--font);padding:9px 4px;border-radius:11px;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink2);cursor:pointer}
.avdays button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* kudos */
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 14px;
  margin-bottom:10px;box-shadow:var(--sh)}
.kcard .kwho{display:flex;align-items:baseline;gap:7px;font:800 13.5px var(--font)}
.kcard .kwho .ago{margin-left:auto;font:600 11px var(--font);color:var(--ink3)}
.kcard .kmsg{font:500 13.5px/1.5 var(--font);color:var(--ink);margin:7px 0 9px}
.kcard .kchips{display:flex;gap:6px;flex-wrap:wrap}
.ktile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 14px;box-shadow:var(--sh)}
.ktile.hot{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,var(--line))}
.ktile b{display:block;font:800 26px var(--hfont);font-variant-numeric:tabular-nums}
.ktile.hot b{color:var(--warn)}
.ktile span{font:600 12px var(--font);color:var(--ink3)}
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gnote{font:500 11.5px/1.5 var(--font);color:var(--ink3);background:var(--inset);border-radius:12px;
  padding:10px 12px;margin-top:10px}
/* me: tour list, income, details */
.trow{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);font:600 13px var(--font)}
.trow:last-child{border-bottom:none}
.trow i{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.trow b{margin-left:auto;font-variant-numeric:tabular-nums}
.inc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--sh)}
.inc .big{font:800 32px var(--hfont);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.inc .lbl{font:800 13px var(--font);margin:8px 0 4px}
.inc p{font:600 12.5px/1.5 var(--font);color:var(--ink2);margin:3px 0}
.inc .caveat{font:500 11.5px/1.5 var(--font);color:var(--ink3);margin-top:9px}
.dtable{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);
  padding:2px 14px}
.dtable .dr{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font:600 13px var(--font)}
.dtable .dr:last-child{border-bottom:none}
.dtable .dr span{color:var(--ink3)}
.dtable .dr b{margin-left:auto;text-align:right;font-weight:700;word-break:break-word}
/* ---- report card: one card per topic, its numbers INSIDE it ----
   (Ferry 2026-08-09: figures grouped by what they are about, not one
   floating tile per number) */
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh);padding:16px 18px;margin-bottom:14px}
.rhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rhead h3{font:800 17px var(--hfont);margin:0}
.rhead .rcount{font:700 11.5px var(--font);color:var(--ink2);background:var(--inset);
  border-radius:var(--r-full);padding:3px 10px}
.rsub{font:600 12px var(--font);color:var(--ink3);margin:5px 0 12px}
.rstats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rstat{background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.rstat .k{font:800 9px var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.rstat .v{font:800 24px var(--hfont);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:3px}
.rstat .n{font:600 11px var(--font);color:var(--ink3);margin-top:2px}
.rstat.warnish{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 25%,var(--line))}
.rfoot{font:500 11.5px/1.55 var(--font);color:var(--ink3);margin-top:12px;
  border-top:1px dashed var(--line);padding-top:10px}
.rrows{margin-top:12px}
.rrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);
  font:600 13px var(--font)}
.rrow:last-child{border-bottom:none}
.rrow .rlab{min-width:118px;flex:0 0 auto}
.rrow .rval{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.rrow .rnote{font:600 11px var(--font);color:var(--ink3)}
/* a horizontal bar that is actually a bar -- its own element, so it can never
   pick up the round-dot rule that .trow i carries */
.hbar{flex:1;min-width:60px;height:10px;border-radius:5px;overflow:hidden;display:block;
  background:color-mix(in srgb, var(--ink3) 15%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink3) 22%, transparent)}
.hbar>span{display:block;height:100%;border-radius:5px 0 0 5px;background:var(--info)}
.hbar>span.full{border-radius:5px}

/* review / tips slider */
.rvwrap{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.rvcard{flex:0 0 88%;scroll-snap-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:20px 18px;text-align:center;box-shadow:var(--sh)}
.rvcard h3{font:800 19px var(--hfont);margin:0 0 4px}
.rvcard .who{font:800 26px var(--hfont);color:var(--info);margin:6px 0}
.rvcard .qr{background:#fff;border-radius:16px;padding:14px;display:inline-block;margin:10px 0}
.rvdots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.rvdots i{width:7px;height:7px;border-radius:50%;background:var(--line2)}
.rvdots i.on{background:var(--ink2)}

/* the director's viewing-as banner -- never shown to a guide */
.asbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--warn-bg);color:var(--warn);border-bottom:1px solid var(--line2);
  padding:8px 12px;font:700 11.5px var(--font)}
.asbar select{font:700 12px var(--font);border:1px solid var(--line2);border-radius:var(--r-full);
  padding:5px 10px;background:var(--surface);color:var(--ink);min-height:32px}
/* phone frame, so a director sees it at guide size on a desktop screen */
@media (min-width:760px){
  .gframe{max-width:430px;margin:18px auto 30px;border:12px solid #16181D;border-radius:44px;
    overflow:hidden;box-shadow:var(--sh-lg);background:var(--bg);height:860px;position:relative}
  .gframe .gapp{height:100%;overflow-y:auto;max-width:none}
  .gframe .gtabs{position:absolute}
}

/* -- toast (inert-write notice) -- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);background:var(--ink);
  color:var(--bg);font:700 12.5px var(--font);border-radius:var(--r-full);padding:11px 20px;
  box-shadow:var(--sh-lg);z-index:60;transition:transform 240ms var(--ease);pointer-events:none}
.toast.on{transform:translate(-50%,0)}

/* -- gate screens -- */
.gate{max-width:430px;margin:12vh auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:26px;text-align:center}
.gate img{height:52px;margin-bottom:10px}
.gate h2{font:800 17px var(--hfont);margin:0 0 6px}
.gate p{font:500 13px var(--font);color:var(--ink2);margin:0 0 14px}
.demoflag{position:fixed;top:0;left:0;right:0;background:var(--warn-bg);color:var(--warn);
  font:800 10px var(--font);letter-spacing:.08em;text-transform:uppercase;text-align:center;
  padding:4px;z-index:70}
.hint{font:500 12px var(--font);color:var(--ink3)}
.err{color:var(--danger);font-weight:600}
.skel{color:var(--ink3);font:500 13px var(--font);padding:18px 4px}