/* CBSC 2.3.1 – design system + app shell.
   Rules for the bars: opaque colours only – no translucency, no backdrop-filter, no text-shadow, no filter.
   All bar sizes are integer px; the status-bar strip is exactly env(safe-area-inset-top). System fonts only. */
:root {
  color-scheme: light dark;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --bar-h: 56px;
  --tab-h: 60px;
  --nav-w: 0px;
  --tl-free: 0px;
  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --gutter: 16px;
  /* radius */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
  /* type */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 26px;
  /* palette – light (brand navy #0b3a5e, brand blue #0a5c9e, signal red #c8102e) */
  --bar: #0b3a5e;
  --bar-fg: #ffffff;
  --bar-muted: #c3d3e2;
  --bar-line: #2b5679;
  --bar-press: #164a72;
  --bg: #f1f4f8;
  --surface: #ffffff;
  --surface-2: #f4f7fa;
  --surface-3: #e8eef4;
  --fg: #14212e;
  --muted: #536273;
  --faint: #5f6e7e;
  --line: #e1e7ee;
  --line-strong: #c9d3de;
  --primary: #0a5c9e;
  --primary-hover: #084f89;
  --primary-press: #07457a;
  --primary-soft: #e3eef8;
  --primary-fg: #ffffff;
  --red: #c8102e;
  --red-strong: #c8102e;
  --red-soft: #fbeaed;
  --ok: #1d7a3a;
  --ok-soft: #e4f3e9;
  --warn-y: #f2c200;
  --warn-o: #ec7a00;
  --warn-r: #d0021b;
  --ad: #6b3fa0;
  --ad-fg: #ffffff;
  --ad-soft: #f4effa;
  --sp: #0a7d5a;
  --sp-fg: #ffffff;
  --sp-soft: #eaf5f0;
  --focus: #0a5c9e;
  --shadow: 0 1px 2px rgba(16, 35, 55, .06), 0 1px 4px rgba(16, 35, 55, .05);
  --map-sea: #d4e6f4; --map-land: #ebe4cf; --map-coast: #8aa3b8;
}
@media (prefers-color-scheme: dark) {
  /* dark slate, never black */
  :root {
    --bar: #18212c;
    --bar-fg: #eef3f8;
    --bar-muted: #a9b8c8;
    --bar-line: #34404f;
    --bar-press: #263241;
    --bg: #1e2833;
    --surface: #26313e;
    --surface-2: #2c3846;
    --surface-3: #344252;
    --fg: #e7edf3;
    --muted: #a6b4c3;
    --faint: #93a3b4;
    --line: #344150;
    --line-strong: #435263;
    --primary: #6db3ec;
    --primary-hover: #84c0f0;
    --primary-press: #9acbf3;
    --primary-soft: #24384d;
    --primary-fg: #0c1a27;
    --red: #ff8a98;
    --red-strong: #b3263b;
    --red-soft: #3a2a33;
    --ok: #5cc883;
    --ok-soft: #233a30;
    --ad: #c9a8f0;
    --ad-fg: #1c1230;
    --ad-soft: #2f2a40;
    --sp: #7dd3b0;
    --sp-fg: #0d2219;
    --sp-soft: #22352f;
    --focus: #84c0f0;
    --shadow: none;
    --map-sea: #1a3247; --map-land: #2d3642; --map-coast: #4e6072;
  }
}
/* iPad window mode / desktop: keep the top-left corner free for the system window controls (physical left, also in RTL) */
@media (min-width: 600px) { :root { --tl-free: 76px; --gutter: 24px; } }
@media (min-width: 1000px) { :root { --nav-w: 252px; --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg);
  font: var(--fs)/1.5 var(--font);
  overscroll-behavior-y: none; overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
[lang="ja"] body, [lang|="zh"] body, [lang="ko"] body { line-break: strict; word-break: normal; overflow-wrap: anywhere; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
svg.i.sm { width: 18px; height: 18px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ================= shell ================= */
.statusbar { position: fixed; top: 0; left: 0; right: 0; height: var(--sat); background: var(--bar); z-index: 30; }
.topbar {
  position: fixed; top: var(--sat); left: 0; right: 0; height: var(--bar-h); z-index: 30;
  background: var(--bar); color: var(--bar-fg);
  display: flex; align-items: center; gap: var(--s2);
  padding-top: 0; padding-bottom: 0;
  padding-left: max(12px, calc(var(--sal) + 8px), var(--tl-free));
  padding-right: max(12px, calc(var(--sar) + 8px));
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; height: 44px; }
.brand:hover { color: inherit; }
.brand img { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.brand-name { font-weight: 650; font-size: 17px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-name .long { display: none; }
@media (min-width: 720px) { .brand-name .long { display: inline; } .brand-name .short { display: none; } }
.topbar .tb-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 0;
  background: transparent; color: var(--bar-fg); cursor: pointer; text-decoration: none; font-weight: 600; font-size: var(--fs-md);
}
.topbar .tb-btn::before { content: ""; position: absolute; inset: -2px; } /* 44px hit area */
.topbar .tb-btn:hover { background: var(--bar-press); color: var(--bar-fg); }
.topbar .sos-btn { background: var(--red-strong); color: #fff; }
.topbar .sos-btn:hover { background: #a90d27; color: #fff; }
.lang-wrap { position: relative; display: inline-flex; align-items: center; }
.lang-wrap select {
  appearance: none; -webkit-appearance: none; border: 1px solid var(--bar-line); background: var(--bar); color: var(--bar-fg);
  height: 40px; border-radius: 10px; padding: 0 10px 0 34px; max-width: 132px; font-size: var(--fs-md); cursor: pointer;
}
.lang-wrap select:hover { background: var(--bar-press); }
[dir="rtl"] .lang-wrap select { padding: 0 34px 0 10px; }
.lang-wrap svg { position: absolute; inset-inline-start: 10px; pointer-events: none; color: var(--bar-muted); }

.ptr {
  position: fixed; left: 0; right: 0; top: calc(var(--sat) + var(--bar-h)); height: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--bg); color: var(--muted); font-size: var(--fs-sm); gap: 8px;
}
.ptr.spin svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main {
  /* flex column + min-height: keep #footer at the bottom of the first screen
     even while JS views are still empty — avoids the CLS Lighthouse attributes to the footer */
  display: flex; flex-direction: column;
  min-height: 100dvh; min-height: 100vh;
  padding-top: calc(var(--sat) + var(--bar-h) + var(--s4));
  padding-bottom: calc(var(--tab-h) + var(--sab) + var(--s6));
  padding-left: max(var(--gutter), calc(var(--sal) + 8px));
  padding-right: max(var(--gutter), calc(var(--sar) + 8px));
}
.view, .footer, .sponsorline { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.view:not([hidden]) {
  flex: 1 0 auto;
  /* First-screen reservation: keep #footer at/below the fold while JS fills the view,
     so the remaining tiny footer shift no longer counts toward CLS. */
  min-height: calc(100svh - var(--sat) - var(--bar-h) - var(--s4));
}
.view.wide { max-width: 1120px; }

/* bottom tab bar (phone) */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: var(--sab); padding-left: var(--sal); padding-right: var(--sar);
  display: flex; justify-content: center;
}
.tabbar .tabs { display: flex; width: 100%; max-width: 640px; height: var(--tab-h); }
.tabbar a {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; padding: 4px 2px;
}
.tabbar a svg.i { width: 52px; height: 28px; padding: 3px 15px; border-radius: var(--r-pill); }
.tabbar a span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a[aria-current="page"] { color: var(--primary); }
.tabbar a[aria-current="page"] svg.i { background: var(--primary-soft); }
.tabbar .sub, .tabbar .nav-sep { display: none; }
.tabbar a[data-tab="more"] { order: 6; }

/* desktop / large tablet: side navigation instead of the bottom bar */
@media (min-width: 1000px) {
  .tabbar {
    top: calc(var(--sat) + var(--bar-h)); bottom: 0; right: auto; left: 0;
    width: calc(var(--nav-w) + var(--sal)); border-top: 0; border-right: 1px solid var(--line);
    padding: var(--s4) 12px calc(var(--sab) + var(--s4)) calc(var(--sal) + 12px);
    display: block; overflow-y: auto;
  }
  [dir="rtl"] .tabbar { left: auto; right: 0; width: calc(var(--nav-w) + var(--sar)); border-right: 0; border-left: 1px solid var(--line); padding-left: 12px; padding-right: calc(var(--sar) + 12px); }
  .tabbar .tabs { flex-direction: column; height: auto; max-width: none; gap: 2px; }
  .tabbar a {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 44px; padding: 0 12px;
    border-radius: 10px; font-size: var(--fs-md); font-weight: 550; color: var(--fg); text-align: start;
  }
  .tabbar a svg.i { width: 20px; height: 20px; padding: 0; border-radius: 0; color: var(--muted); background: none !important; }
  .tabbar a span { white-space: normal; overflow: visible; line-height: 1.25; padding: 6px 0; }
  .tabbar a:hover { background: var(--surface-2); color: var(--fg); }
  .tabbar a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
  .tabbar a[aria-current="page"] svg.i { color: var(--primary); }
  .tabbar .sub { display: flex; order: 8; }
  .tabbar .nav-sep { display: block; order: 7; height: 1px; background: var(--line); margin: var(--s3) 12px; }
  .tabbar a[data-tab="more"] { order: 9; }
  main { padding-bottom: calc(var(--sab) + var(--s7)); padding-left: calc(var(--nav-w) + var(--sal) + var(--gutter)); }
  [dir="rtl"] main { padding-left: max(var(--gutter), calc(var(--sal) + 8px)); padding-right: calc(var(--nav-w) + var(--sar) + var(--gutter)); }
  .toast { bottom: calc(var(--sab) + 24px) !important; }
}

/* ================= content ================= */
.view[hidden] { display: none !important; }
h1.vt { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: var(--s2) 0 var(--s2); }
h2 { font-size: var(--fs-lg); font-weight: 650; margin: 0 0 var(--s3); line-height: 1.3; }
h3 { font-size: var(--fs-md); font-weight: 650; margin: var(--s4) 0 var(--s2); }
h3:first-child { margin-top: 0; }
p { margin: 0 0 var(--s3); }
.lead { color: var(--muted); margin: 0 0 var(--s5); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.card {
  background: var(--surface); border-radius: var(--r-lg); padding: var(--s4); margin: 0 0 var(--s3);
  box-shadow: var(--shadow);
}
.card > :last-child, .acc-body > :last-child { margin-bottom: 0; }
.card .posrow + .hint, .card .toolbar + .hint { margin-top: var(--s2); }
@media (prefers-color-scheme: dark) { .card, .acc { border: 1px solid var(--line); } }
.card.flush { padding: 0; overflow: hidden; }
.card > h2 { display: flex; align-items: center; gap: 10px; }
.card > h2 > svg.i { color: var(--primary); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.spacer { flex: 1; }
.toolbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s2); }
.toolbar .sel { flex: 1 1 180px; min-width: 0; }
.hint { font-size: var(--fs-xs); color: var(--faint); margin: 0 0 var(--s4); }
.cols > * { break-inside: avoid; }
@media (min-width: 1200px) {
  .cols { column-count: 2; column-gap: var(--s4); }
  .cols > * { display: inline-block; width: 100%; vertical-align: top; }
}

/* buttons: primary / secondary (default) / ghost / danger */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 var(--s4);
  border-radius: 10px; border: 1px solid transparent; background: var(--surface-3); color: var(--fg);
  font-weight: 600; font-size: var(--fs-md); line-height: 1.2; cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--line-strong); color: var(--fg); }
.btn:active { background: var(--line-strong); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary { background: var(--primary); color: var(--primary-fg); }
.btn.primary:hover { background: var(--primary-hover); color: var(--primary-fg); }
.btn.primary:active { background: var(--primary-press); }
.btn.ghost { background: transparent; color: var(--primary); padding: 0 var(--s3); }
.btn.ghost:hover { background: var(--primary-soft); color: var(--primary); }
.btn.danger { background: transparent; color: var(--red); padding: 0 var(--s3); }
.btn.danger:hover { background: var(--red-soft); color: var(--red); }
.btn.icon { width: 44px; padding: 0; }
.btn.block { display: flex; width: 100%; }
.btn.sm { min-height: 36px; font-size: var(--fs-sm); padding: 0 var(--s3); }
@media (pointer: coarse) { .btn.sm { min-height: 44px; } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; margin: var(--s2) 0 var(--s4); }

/* form fields */
select.sel, input.inp {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); padding: 6px 12px; max-width: 100%;
}
select.sel { appearance: none; -webkit-appearance: none; padding-inline-end: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23536273' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
[dir="rtl"] select.sel { background-position: left 14px center; }
select.sel:hover, input.inp:hover { border-color: var(--muted); }
input.inp:focus-visible, select.sel:focus-visible { outline-offset: 0; }

/* chips + segmented choice */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s1) 0 var(--s3); align-items: center; }
.chips > .lbl { font-size: var(--fs-sm); color: var(--muted); margin-inline-end: var(--s1); }
.scroll-x { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--s1)); margin-right: calc(-1 * var(--s1)); padding: 2px var(--s1); }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { flex: none; }
/* 2.3.1: Service tab jump marks – label on its own line, all chips wrap (no horizontal scrolling), 44 px targets */
.chips.jump { flex-wrap: wrap; overflow: visible; gap: var(--s2); }
.chips.jump > .lbl { flex: 0 0 100%; margin-inline-end: 0; }
.chips.jump > .chip { min-height: 44px; max-width: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); border-radius: var(--r-pill); min-height: 36px;
  padding: 0 14px; font-weight: 550; font-size: var(--fs-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
}
@media (pointer: coarse) { .chip { min-height: 44px; } }
.chip:hover { background: var(--surface-2); color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.chip.static { cursor: default; min-height: 30px; background: var(--surface-2); border-color: transparent; }
.seg { display: flex; flex-wrap: wrap; gap: var(--s1); background: var(--surface-2); padding: var(--s1); border-radius: var(--r); margin: var(--s1) 0 var(--s4); }
.seg .chip { flex: 1 1 auto; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: auto; text-align: center; line-height: 1.2; padding: 4px 10px; justify-content: center; border-color: transparent; background: transparent; min-height: 40px; border-radius: 9px; }
@media (pointer: coarse) { .seg .chip { min-height: 44px; } }
.seg .chip[aria-pressed="true"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); border-color: var(--line); }
.field-l { font-size: var(--fs-sm); color: var(--muted); font-weight: 550; margin: 0; }

/* badges */
.badge { display: inline-flex; align-items: center; border-radius: 6px; padding: 1px 7px; font-size: var(--fs-xs); font-weight: 650; line-height: 1.5; background: var(--surface-3); color: var(--fg); white-space: nowrap; }
.badge.yellow { background: var(--warn-y); color: #1a1400; }
.badge.orange { background: var(--warn-o); color: #1a0b00; }
.badge.red { background: var(--warn-r); color: #fff; }
.badge.blue { background: var(--primary-soft); color: var(--primary); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.notice { border-inline-start: 3px solid var(--warn-o); background: var(--surface-2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); margin: 0 0 var(--s3); font-size: var(--fs-sm); }
.notice.info { border-color: var(--primary); }
.stamp { font-size: var(--fs-xs); color: var(--faint); margin-top: var(--s3); }
.stamp .notice { color: var(--fg); }
.pre { white-space: pre-wrap; font: 13px/1.5 var(--mono); background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s3); overflow-x: auto; max-width: 100%; margin: 0 0 var(--s2); }

/* disclosure (native details) */
details.more { border-top: 1px solid var(--line); margin-top: var(--s3); }
details.more > summary, details.how > summary {
  display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--primary); list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details.more > summary::after, details.how > summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; margin-inline-start: 2px;
}
details[open].more > summary::after, details[open].how > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.how { padding-top: var(--s1); padding-bottom: var(--s1); }
details.how > summary { color: var(--fg); }

/* accordion (checklist topics and other secondary sections) */
.accs { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s4); }
.acc { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); margin: 0 0 var(--s3); }
.accs > .acc { margin: 0; }
.acc-h { margin: 0; font-size: inherit; }
.acc-btn {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s2) var(--s4);
  background: transparent; border: 0; border-radius: var(--r-lg); cursor: pointer; text-align: start; color: var(--fg);
}
.acc-btn:hover { background: var(--surface-2); }
.acc-btn > svg.i:first-child { color: var(--primary); }
.acc-t { flex: 1; min-width: 0; font-size: var(--fs); font-weight: 650; }
.acc-meta { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.acc-meta.complete { color: var(--ok); }
.acc-chev { color: var(--faint); transition: transform .18s ease; }
.acc-btn[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
.acc-btn[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.acc-body { padding: var(--s1) var(--s4) var(--s4); }
.acc-body[hidden] { display: none; }
.acc-sub { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .acc-chev { transition: none; } }

/* lists */
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain > li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
ul.plain > li:first-child { padding-top: 0; }
ul.plain > li:last-child { border-bottom: 0; padding-bottom: 0; }
.list > li { padding: var(--s3) var(--s4) !important; }
.list > li:first-child { padding-top: var(--s3) !important; }
.list > li:last-child { padding-bottom: var(--s3) !important; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); align-items: center; }
.kv > span, .kv > label { color: var(--muted); font-size: var(--fs-sm); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s2); }
.tile { background: var(--surface-2); border-radius: var(--r); padding: var(--s2) var(--s3); }
.tile .small { color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s1) var(--s3); }
.tablewrap { overflow-x: auto; max-width: 100%; }
table.t { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.t th { font-weight: 600; color: var(--muted); font-size: var(--fs-xs); text-transform: none; }
table.t th, table.t td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.num, table.t th.num { text-align: end; font-variant-numeric: tabular-nums; }
.arrow { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; color: var(--primary); }
.vhead { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s1); }
.vhead h1.vt { flex: 1; min-width: 0; }
.vhead .btn { flex: none; margin-inline-start: calc(-1 * var(--s2)); }

/* ================= checklist ================= */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s5); }
.split-aside { min-width: 0; }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "main aside"; align-items: start; }
  .split-main { grid-area: main; min-width: 0; }
  .split-aside { grid-area: aside; position: sticky; top: calc(var(--sat) + var(--bar-h) + var(--s4)); }
}
.summary { display: flex; flex-direction: column; gap: var(--s2); }
.summary .row { justify-content: space-between; }
.pct { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary); }
.progress { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 99px; transition: width .25s ease; }
.items { list-style: none; margin: 0; padding: 0; }
.item { display: flex; gap: var(--s3); align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; min-height: 44px; }
.item:first-child { border-top: 0; padding-top: var(--s1); }
.item span { padding-top: 1px; }
.item input {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none; cursor: pointer;
  border: 2px solid var(--line-strong); border-radius: 7px; background: var(--surface) center / 14px 14px no-repeat;
  transition: background-color .12s ease, border-color .12s ease;
}
.item input:checked { background-color: var(--ok); border-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { .item input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102a1b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } }
.item.done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.sppresented { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); margin: 0 0 var(--s3); }

/* ================= emergency ================= */
.sos-list { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s4); }
.sos-list a.call {
  display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-lg); min-height: 60px;
  background: var(--surface); box-shadow: var(--shadow); color: var(--fg); text-decoration: none;
}
@media (prefers-color-scheme: dark) { .sos-list a.call { border: 1px solid var(--line); } }
.sos-list a.call b { font-size: 24px; min-width: 64px; color: var(--red); font-variant-numeric: tabular-nums; }
.sos-list a.call > svg.i { color: var(--red); }
.sos-list a.call.main { background: var(--red-soft); box-shadow: inset 0 0 0 2px var(--red); }
.sos-list a.call:hover { background: var(--surface-2); }
.sos-list a.call.main:hover { background: var(--red-soft); }
.pos { font: 650 20px/1.35 var(--mono); direction: ltr; unicode-bidi: isolate; margin: 0 0 var(--s2); }
ol.mayday { padding-inline-start: 22px; margin: 0; }
ol.mayday li { margin-bottom: var(--s2); }

/* ================= fuel ================= */
.station .row { flex-wrap: nowrap; align-items: baseline; }
.station h3 { margin: 0; font-size: var(--fs); flex: 1; min-width: 0; }
.station .dist { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.station .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: var(--fs-sm); }
.prices { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: var(--fs-sm); }
.prices .p { color: var(--muted); }
.prices .p b { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 650; }
.prices .p.blue b { color: var(--muted); font-weight: 500; }
.lnk { font-size: var(--fs-sm); font-weight: 550; text-decoration: none; }
.lnk:hover { text-decoration: underline; }

/* ================= map ================= */
.mapbox { position: relative; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; touch-action: none; box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { .mapbox { border: 1px solid var(--line); } }
.mapbox svg.map { display: block; width: 100%; height: auto; max-height: 70vh; }
.map .sea { fill: var(--map-sea); }
.map .land { fill-rule: evenodd; fill: var(--map-land); stroke: var(--map-coast); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.map .m { stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer; }
.map .m.fuel { fill: #e67e00; } .map .m.hm { fill: #c8102e; } .map .m.aci { fill: #1f5fbf; } .map .m.nw { fill: #f2c200; stroke: #1a1400; } .map .m.me { fill: #1d9a4a; }
.map .m.biz { fill: #6b3fa0; stroke: #fff; } .map .m.sp { fill: #0a7d5a; stroke: #fff; }
/* 2.3.0: free directory entries; "approx" = position is the town centre, drawn hollow and dashed so it does not pose as an exact spot */
.map .m.dir { fill: #5a6b7d; stroke: #fff; }
.map .m.dir.approx { fill: var(--surface); stroke: #5a6b7d; stroke-width: 1.5; stroke-dasharray: 2 2; }
/* 2.3.0: trip estimate */
.map.picking { cursor: crosshair; }
.map .route { fill: none; stroke: #d0217a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map .m.ea { fill: #1d9a4a; } .map .m.eb { fill: #d0217a; }
.est h2 { margin: 0 0 var(--s1); }
.estpts { display: grid; gap: var(--s2) var(--s4); margin-top: var(--s3); }
@media (min-width: 600px) { .estpts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.estpt .estname { display: block; margin: 2px 0 0; overflow-wrap: anywhere; }
.estpt .actions { margin: var(--s2) 0 0; }
.boatf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: var(--s1) 0 var(--s3); }
.boatf .fld { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.est > .field-l { display: block; margin-top: var(--s3); }
.boatf input.inp { width: 100%; min-width: 0; }
.estsaved { margin: var(--s3) 0 0; }
.estsaved .routes { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: var(--s1); }
.estsaved .routes li { display: flex; gap: var(--s1); align-items: stretch; min-width: 0; }
.estsaved .routes .grow { flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-align: start; }
.estsaved .routes .grow span { overflow-wrap: anywhere; }
.xfer .qr { max-width: 280px; }
.xfer textarea.inp { width: 100%; min-height: 88px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }
.estres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.estres div { background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s2) var(--s3); min-width: 0; }
.estres dt { font-size: var(--fs-sm); color: var(--muted); }
.estres dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
button.linkbtn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; cursor: pointer; vertical-align: middle; }
button.linkbtn:hover { text-decoration: underline; }
/* 2.3.0: device sync */
.qr { display: block; width: 220px; height: 220px; max-width: 100%; margin: var(--s3) auto; border-radius: var(--r-sm); background: #fff; }
#view-sync .toolbar input.inp { flex: 1 1 200px; min-width: 0; }
.map .lbl { font-size: 11px; fill: var(--fg); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.mapctl { position: absolute; inset-inline-end: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mapctl button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 20px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.mapctl button:hover { background: var(--surface-2); }
.legend { margin: var(--s3) 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mapinfo { margin-top: var(--s2); }
.mapinfo h3 { margin: 0 0 var(--s1); }

/* ================= more / menu ================= */
.rules > section + section { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s4); }
.rules h2 { font-size: var(--fs); margin: 0 0 var(--s2); }
.rules p { max-width: 68ch; }
.rules p:last-child { margin-bottom: 0; }
.menu { padding: var(--s1) 0; }
.menu a { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s4); border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; font-weight: 550; }
.menu a:first-child { border-top: 0; }
.menu a:hover { background: var(--surface-2); color: var(--fg); }
.menu a > svg.i:first-child { color: var(--primary); }
.menu a .chev { margin-inline-start: auto; color: var(--faint); }
[dir="rtl"] .menu a .chev, [dir="rtl"] .flip { transform: scaleX(-1); }

/* ================= footer (quiet) ================= */
/* Hide footer until JS has filled the active view — shifts during hydration
   do not count toward CLS when the element is not visible. */
/* Hidden until data-ready; CSS fallback reveals after 2s if JS never sets the attribute. */
@keyframes cbsc-reveal-footer { to { visibility: visible; } }
html:not([data-ready]) .footer,
html:not([data-ready]) .sponsorline {
  visibility: hidden;
  animation: cbsc-reveal-footer 0s 2s forwards;
}
.footer { margin-top: auto; flex-shrink: 0; text-align: center; font-size: var(--fs-xs); color: var(--faint); padding: var(--s7) 0 var(--s2); line-height: 1.6; min-height: 6rem; }
.footer p { margin: 0; }
.footer a { color: var(--faint); text-decoration: none; }
.footer a:hover { color: var(--muted); text-decoration: underline; }
.footer .tiny { font-size: 11px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--sab) + 12px); z-index: 40;
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: var(--r); font-size: var(--fs-sm); max-width: calc(100% - 32px);
  display: flex; gap: 12px; align-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.toast button { background: transparent; border: 1px solid currentColor; border-radius: 8px; min-height: 32px; padding: 0 10px; color: inherit; cursor: pointer; font-weight: 600; }
.toast[hidden] { display: none; }

/* ================= business directory – ads always visibly labelled ================= */
.badge.ad { background: var(--ad); color: var(--ad-fg); letter-spacing: .02em; }
.badge.sp { background: var(--sp); color: var(--sp-fg); }
.badge.ad, .badge.sp { white-space: nowrap; flex: 0 0 auto; }
.adbox { background: var(--ad-soft); box-shadow: none; border: 1px solid transparent; }
@media (prefers-color-scheme: dark) { .adbox { border-color: #43395a; } }
.adbox h2, .spcard h2 { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2); }
.adbox ul.plain > li { border-color: var(--line); }
.bizlist li, .adbox li { padding: var(--s3) 0; }
.biz .row { flex-wrap: nowrap; align-items: center; gap: var(--s2); }
.biz .row > svg.i { color: var(--faint); }
.biz .bizname { overflow-wrap: anywhere; font-weight: 600; }
.biz .d { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; margin-inline-start: auto; }
.biz .sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.biz .links { font-size: var(--fs-sm); margin-top: 4px; }
.searchbox { position: relative; display: flex; align-items: center; margin: 0 0 var(--s3); }
.searchbox svg.i { position: absolute; inset-inline-start: 12px; color: var(--faint); pointer-events: none; }
.searchbox .inp { width: 100%; padding-inline-start: 40px; }
.posrow { display: flex; gap: var(--s2); margin-top: var(--s2); }
.posrow .inp { flex: 1; min-width: 0; }
.bizlogo { width: 64px; height: 64px; object-fit: contain; border-radius: var(--r-sm); background: #fff; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.photos img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--r-sm); }
.shopsec { scroll-margin-top: calc(var(--sat) + var(--bar-h) + 12px); }
.shopsec > h2 svg.i { color: var(--primary); }
.adnote { border-color: var(--ad); }
/* sponsor (labelled, discreet) */
.sponsorline { margin-top: var(--s6); text-align: center; font-size: var(--fs-xs); color: var(--faint); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.sponsorline[hidden] { display: none; }
.splogo { height: 22px; width: auto; max-width: 140px; vertical-align: middle; }
.splogo.sm { height: 18px; }
.splogo.lg { height: 32px; max-width: 160px; }
.spcard { background: var(--sp-soft); box-shadow: none; }
.spcard .row { flex-wrap: wrap; }
.coupon { font-family: var(--mono); font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--surface); border: 1px dashed var(--sp); }
.preview { color: var(--red); font-weight: 700; }

/* ================= print: clean checklist as real text (Save as PDF) ================= */
.print-only { display: none; }
@media print {
  :root { --bg: #fff; --surface: #fff; --fg: #000; --muted: #333; --line: #bbb; --shadow: none; }
  html, body { background: #fff; color: #000; }
  .statusbar, .topbar, .tabbar, .ptr, .toast, .no-print, .footer, .sponsorline { display: none !important; }
  main { padding: 0 !important; }
  .view { display: none !important; max-width: none; }
  #view-check { display: block !important; }
  .split { display: block; }
  .print-only { display: block; }
  .acc { box-shadow: none; border: 0 !important; margin: 0 0 10px; break-inside: avoid; }
  .acc-btn { min-height: 0; padding: 6px 0; }
  .acc-meta, .acc-chev { display: none; }
  .acc-body, .acc-body[hidden] { display: block !important; padding: 0; }
  .item { padding: 4px 0; break-inside: avoid; min-height: 0; }
  .item.done span { text-decoration: none; color: #000; }
  .item input { border-color: #000; }
}

/* ================= legal pages ================= */
.legal-page main { padding-bottom: calc(var(--sab) + 32px); max-width: 760px; margin: 0 auto; padding-left: max(var(--gutter), calc(var(--sal) + 8px)) !important; padding-right: max(var(--gutter), calc(var(--sar) + 8px)) !important; }
.legal { line-height: 1.6; }
.legal h1 { font-size: var(--fs-2xl); margin: 4px 0 12px; }
.legal h2 { font-size: var(--fs-lg); margin: 28px 0 8px; }
.legal h3 { font-size: var(--fs); margin: 18px 0 6px; }
.legal p, .legal li { line-height: 1.6; max-width: 70ch; }
.legal address { font-style: normal; line-height: 1.6; }
.legal .langnav { display: flex; gap: 12px; margin: 0 0 12px; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }