/* Nordcompare. Colours exist only in these token blocks; build.py fails on any hex elsewhere. */
@font-face { font-family: "Sora"; src: url(fonts/sora-latin-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url(fonts/geist-latin-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geistmono-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #F4F8FA; --panel: #FFFFFF; --panel2: #E9F1F4; --ink: #06202C; --ink2: #47606C; --line: #D4E0E5; --line2: #06202C;
  --accent: #067C80; --warn: #B26B00; --on-accent: #FFFFFF;
  --deep: #04161F; --deep2: #0A2B38; --h-ink: #F0FBFB; --h-ink2: #A9CBD2; --aqua: #4FE3D6; --buoy: #FFC23D; --glass: #0A2B38CC; --glass-line: #FFFFFF26;
  --sand-a: #C7A873; --sand-b: #4A3C2A; --sand-edge: #E9D2A3;
  --kelp-a: #2F7A4C; --kelp-b: #7FA33B; --coral-a: #F26B4E; --coral-b: #E9559B; --coral-c: #F2B134; --star: #F0793A; --shell: #F0A58E; --shell-rib: #B9583F;
  --abyss: #020C13; --abyss2: #06202B; --sonar: #58F0D8; --fog: #C9DCE0; --line-d: #FFFFFF22; --panel-d: #0B2F3DCC; --harbour-sand: #E9D9B4;
  --bob-red: #E5232E; --bob-white: #FBFBF6; --fish-a: #FFB02E; --fish-b: #F4F7F2; --fish-c: #2E6FB8; --bub: #FFFFFFCC; --bub-fill: #FFFFFF1F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #05171F; --panel: #0A2531; --panel2: #0E2F3D; --ink: #E8F5F7; --ink2: #9DBAC4; --line: #1A3F4D; --line2: #E8F5F7;
    --accent: #4FE3D6; --warn: #FFC23D; --on-accent: #04161F;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 "Geist", system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: "Sora", system-ui, sans-serif; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: .6em; }
h3 { font-size: 1.1rem; letter-spacing: -.015em; margin-bottom: .4em; }
p { margin: 0 0 1em; }
code { font: 500 .9em "Geist Mono", ui-monospace, monospace; }
.wrap { width: min(100% - 40px, 1180px); margin-inline: auto; }
.mono, .row-price, .tick, .mark-val, .s-val, .s-size { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500; font-feature-settings: "tnum"; }
.fine { font-size: .875rem; color: var(--ink2); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; background: var(--ink); color: var(--bg); padding: 8px 12px; }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: var(--deep); color: var(--h-ink); border-bottom: 1px solid var(--glass-line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 6px 20px; min-height: 60px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 1.16rem/1 "Sora", system-ui, sans-serif; letter-spacing: -.035em; text-decoration: none; }
.brand b { font-weight: 700; color: var(--aqua); }
.brand:hover { color: inherit; }
.top nav { display: flex; gap: 20px; font-size: .92rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.top nav a { text-decoration: none; white-space: nowrap; padding: 4px 0; color: var(--h-ink2); border-bottom: 2px solid transparent; }
.top nav a:hover { color: var(--h-ink); }
.top nav a[aria-current] { color: var(--h-ink); border-color: var(--aqua); }

/* hero */
.hero { position: relative; background: linear-gradient(var(--deep) 0, var(--deep2) 46%, var(--deep) 100%); color: var(--h-ink); overflow: hidden; isolation: isolate; }
#water { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.instrument-top { padding-top: clamp(22px, 3vw, 36px); position: relative; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 62%; pointer-events: none; z-index: -1; background: linear-gradient(var(--deep), transparent); opacity: .62; }
.hero :focus-visible, .deep :focus-visible, .top :focus-visible, .foot :focus-visible { outline-color: var(--aqua); }
.instrument h1 { font: 500 1rem/1.4 "Geist", system-ui, sans-serif; letter-spacing: 0; color: var(--h-ink2); margin-bottom: 14px; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 4px; }
.tab { flex: none; padding: 7px 14px; border-radius: 99px; font-size: .92rem; font-weight: 500; text-decoration: none; color: var(--h-ink); border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(8px); }
.tab:hover { color: var(--aqua); }
.tab[aria-selected=true] { background: var(--aqua); color: var(--deep); border-color: var(--aqua); }
.sentence { font: 600 clamp(2rem, 4.7vw, 3.7rem)/1.08 "Sora", system-ui, sans-serif; letter-spacing: -.045em; margin: 0 0 20px; max-width: 18em; text-wrap: balance; text-shadow: 0 2px 24px var(--deep); }
.val { color: var(--aqua); white-space: nowrap; }
.controls { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 14px 36px; align-items: end; padding: 16px 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(12px); }
.ctl { border: 0; padding: 0; margin: 0; min-width: 0; }
.ctl[hidden] { display: none; }
.ctl > label, .ctl legend { font-size: .85rem; color: var(--h-ink2); display: block; padding: 0; margin-bottom: 6px; }
.range-box { position: relative; --pos: .5; --tx: calc(16px + var(--pos) * (100% - 32px)); }
.range-box::before { content: ""; position: absolute; left: 16px; right: 16px; top: 15px; height: 6px; border-radius: 6px; background: var(--h-ink2); opacity: .45; }
.range-box::after { content: ""; position: absolute; top: 2px; left: calc(var(--tx) - 16px); width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--aqua); pointer-events: none; animation: ping 1.9s ease-out infinite; }
.touched .range-box::after { animation: none; opacity: 0; }
@keyframes ping { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.hint { position: absolute; left: var(--tx); bottom: 100%; transform: translate(-50%, 2px); margin-bottom: 4px; padding: 3px 11px; border-radius: 99px; background: var(--aqua); color: var(--deep); font-size: .82rem; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity .3s; z-index: 1; }
.hint::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--aqua); }
.hint i { font-style: normal; display: inline-block; animation: nudge 1.3s ease-in-out infinite; }
.hint i:last-child { animation-name: nudge-r; }
@keyframes nudge { 50% { transform: translateX(-3px); } }
@keyframes nudge-r { 50% { transform: translateX(3px); } }
.touched .hint { opacity: 0; }
input[type=range] { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; width: 100%; height: 36px; background: transparent; margin: 0; cursor: grab; display: block; touch-action: pan-y; }
input[type=range]:active { cursor: grabbing; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--aqua) var(--tx), transparent var(--tx)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: transparent; }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--aqua); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--h-ink), var(--aqua) 62%); border: 3px solid var(--deep); box-shadow: 0 0 0 2px var(--aqua), 0 0 22px var(--aqua); transition: transform .15s; }
input[type=range]:active::-webkit-slider-thumb, input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--aqua); border: 3px solid var(--deep); box-shadow: 0 0 0 2px var(--aqua), 0 0 22px var(--aqua); }
.stops { position: relative; height: 30px; font: 500 .8rem "Geist Mono", monospace; color: var(--h-ink2); }
.stops button, .stops span { position: absolute; left: calc(16px + var(--at, 0) * (100% - 32px)); transform: translateX(-50%); font: inherit; color: inherit; background: none; border: 0; padding: 4px 7px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.stops span { position: static; transform: none; }
.stops:not(:has(button)) { display: flex; justify-content: space-between; }
.stops button:hover { color: var(--aqua); }
.stops button.on { color: var(--deep); background: var(--aqua); font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--glass-line); border-radius: 99px; overflow: hidden; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 7px 14px; font-size: .9rem; white-space: nowrap; }
.seg input:checked + span { background: var(--aqua); color: var(--deep); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--h-ink); outline-offset: -4px; }
.ctl-eu { grid-column: 1 / -1; display: inline-flex; gap: 9px; align-items: center; font-size: .93rem; cursor: pointer; justify-self: start; }
.ctl-eu input { width: 17px; height: 17px; accent-color: var(--aqua); margin: 0; }

/* chart */
.chart { display: none; margin-top: 12px; }
.js .chart { display: block; }
.depth { display: block; width: 100%; }
.surface { fill: none; stroke: var(--aqua); stroke-opacity: .55; stroke-width: 1; }
.hero:not(.has-water) .surface { stroke-opacity: 1; }
.contour { stroke: var(--h-ink); stroke-opacity: .2; stroke-dasharray: 2 6; }
.has-water .bed { display: none; }
.life, .fish, .bub { pointer-events: none; }
.stem { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.leaf { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: .5 7; }
.kelp0 .stem, .kelp0 .leaf { stroke: var(--kelp-a); }
.kelp1 .stem, .kelp1 .leaf { stroke: var(--kelp-b); }
.coral { fill: none; stroke-width: 5.5; stroke-linecap: round; }
.c1 .coral { stroke: var(--coral-a); } .c2 .coral { stroke: var(--coral-b); } .c3 .coral { stroke: var(--coral-c); }
.star { fill: var(--star); stroke: var(--star); stroke-width: 2.5; stroke-linejoin: round; }
.shell { fill: var(--shell); }
.shell-rib { fill: none; stroke: var(--shell-rib); stroke-width: 1; }
.fish0 { fill: var(--fish-a); } .fish1 { fill: var(--fish-b); } .fish2 { fill: var(--fish-c); }
.bub { fill: var(--bub-fill); stroke: var(--bub); stroke-width: 1; }
.bed { fill: url(#sand); stroke: var(--sand-edge); stroke-opacity: .55; stroke-width: 1; }
.sand-a { stop-color: var(--sand-a); } .sand-b { stop-color: var(--sand-b); }
.b-eu-a { stop-color: var(--h-ink); } .b-eu-b { stop-color: var(--aqua); }
.b-x-a { stop-color: var(--h-ink); } .b-x-b { stop-color: var(--buoy); }
.tick { font-size: 11.5px; fill: var(--h-ink); paint-order: stroke; stroke: var(--deep2); stroke-width: 3.5px; stroke-linejoin: round; }
.lead { stroke: var(--h-ink); stroke-width: 1.2; stroke-opacity: .75; }
.weight { fill: var(--h-ink); }
.buoy { stroke: var(--deep); stroke-opacity: .35; }
.is-eu .buoy { fill: url(#b-eu); }
.is-x .buoy { fill: url(#b-x); }
.shine { fill: var(--deep); opacity: .38; }
.bob { display: none; }
.sel .bob { display: block; }
.sel .buoy { display: none; }
.bob-red { fill: var(--bob-red); }
.bob-white { fill: var(--bob-white); }
.bob-band { stroke: var(--deep); stroke-width: 1.4; }
.bob-stem { stroke: var(--bob-red); stroke-width: 2.2; stroke-linecap: round; }
.bob-shine { fill: var(--bob-white); opacity: .55; }
.sel .lead { stroke: var(--aqua); stroke-opacity: 1; stroke-width: 1.8; }
.sel .weight { fill: var(--aqua); }
.sel .mark-name { fill: var(--aqua); }
.is-free .weight, .is-free .lead { opacity: 0; }
.is-na .lead { stroke-dasharray: 3 4; }
.is-na .weight { opacity: 0; }
.is-alt .lead { stroke-dasharray: 7 3; }
.mark { cursor: pointer; }
.hit { fill: transparent; }
.mark-name { font: 600 13.5px "Sora", system-ui, sans-serif; letter-spacing: -.02em; fill: var(--h-ink); text-anchor: middle; }
.narrow .mark-name { font-size: 12px; text-anchor: start; }
.mark-val { font-size: 15px; font-weight: 700; fill: var(--deep); text-anchor: middle; }
.pill { fill: var(--h-ink); stroke: var(--deep); stroke-opacity: .3; filter: drop-shadow(0 2px 4px var(--deep)); }
.sel .pill { fill: var(--aqua); }
.sel .mark-val { fill: var(--deep); }
.narrow .mark-val { font-size: 12.5px; }
.is-na .mark-val { font: 600 11px "Geist", system-ui, sans-serif; }
.narrow .is-na .mark-val { font-size: 9.5px; }

/* results */
.results { padding-top: 22px; }
.chip[hidden], .rows[hidden] { display: none; }
#pick { scroll-margin-top: 96px; }
.pick { position: relative; margin-top: -52px; margin-bottom: 26px; z-index: 2; }
.pick[hidden] { display: none; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: 0 -4px 8px; }
.chip { flex: none; font: 500 .9rem "Geist", system-ui, sans-serif; padding: 7px 14px; border-radius: 99px; cursor: pointer; color: var(--h-ink); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); }
.chip:hover { border-color: var(--aqua); }
.chip[aria-pressed=true] { background: var(--aqua); color: var(--deep); border-color: var(--aqua); font-weight: 600; }
.pick-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) auto; gap: 18px 32px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; box-shadow: 0 18px 44px -24px var(--deep); }
.pick-main h2 { font-size: 1.5rem; margin-bottom: .35em; }
.pick-main p { margin: 0; font-size: .97rem; color: var(--ink2); }
.pick-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.pick-facts dt { font-size: .8rem; color: var(--ink2); }
.pick-facts dd { margin: 0; font-size: .95rem; }
#pick-price { font-size: 1.3rem; }
.pick-links { min-width: 170px; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .875rem; color: var(--ink2); margin-bottom: 16px; }
.key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.key-eu { background: var(--accent); }
.key-other { background: var(--warn); margin-left: 10px; }
.key-text { margin-left: 10px; }
.verdict { font: 600 clamp(1.15rem, 2.3vw, 1.5rem)/1.25 "Sora", system-ui, sans-serif; letter-spacing: -.025em; margin-bottom: 12px; }
.verdict:empty { display: none; }
.rows { list-style: none; margin: 0 0 14px; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.row { display: grid; grid-template-columns: minmax(130px, 1.3fr) 110px minmax(90px, .9fr) minmax(120px, 1fr) minmax(190px, 1.2fr); gap: 14px; align-items: baseline; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .2s; cursor: pointer; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--panel2); }
.row.on { box-shadow: inset 3px 0 0 var(--accent); background: var(--panel2); }
.row[hidden] { display: none; }
.row-name { font-weight: 600; text-decoration: none; }
.row-price { font-size: 1.06rem; }
.row-plan, .row-bill { font-size: .92rem; color: var(--ink2); }
.na { font: 400 .92rem "Geist", system-ui, sans-serif; color: var(--ink2); }
.eu { font-size: .92rem; }
.eu::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--warn); }
.eu-yes.eu::before { background: var(--accent); }

/* sections */
.block { padding: clamp(40px, 6vw, 76px) 0; }
.block + .block { border-top: 1px solid var(--line); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 72px); }
.head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 18px; flex-wrap: wrap; margin-bottom: .4em; }
.more { white-space: nowrap; }
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-weight: 500; font-size: .84rem; color: var(--ink2); border-bottom: 1px solid var(--line2); white-space: nowrap; }
tbody th { font-weight: 600; }
.group th { font: 600 .95rem "Sora", system-ui, sans-serif; letter-spacing: -.02em; padding-top: 20px; color: var(--accent); }
.log { list-style: none; padding: 0; margin: 0; }
.log li { display: grid; grid-template-columns: 150px minmax(0, 150px) minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.log p { margin: 0; }
.log time { font-size: .84rem; color: var(--ink2); padding-top: 2px; }
.log-short li { grid-template-columns: 150px minmax(0, 1fr); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cards a { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); text-decoration: none; height: 100%; transition: transform .25s, border-color .25s; }
.cards a:hover { transform: translateY(-3px); border-color: var(--accent); color: inherit; }
.cards strong { font: 600 1.2rem/1.2 "Sora", system-ui, sans-serif; letter-spacing: -.025em; }
.card-line { font-size: .95rem; color: var(--ink2); flex: 1; }
.card-foot { font-size: .875rem; margin-top: 8px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 24px; }
.fact { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; scroll-margin-top: 110px; }
.fact p { font-size: .97rem; }
.fact-list { margin: 14px 0 0; font-size: .92rem; }
.fact-list dt { color: var(--ink2); font-size: .8rem; margin-top: 9px; }
.fact-list dd { margin: 0; }

/* plain pages */
.page { padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 80px); }
.page-head { max-width: 780px; margin-bottom: 28px; }
.page h1, .tool h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.04em; margin-bottom: 14px; }
.lead { font-size: 1.17rem; line-height: 1.5; color: var(--ink2); max-width: 40em; }
.prose { max-width: 42em; }
.prose h2 { font-size: 1.5rem; margin-top: 1.5em; }
.prose ul { padding-left: 1.1em; }
.prose li { margin-bottom: .4em; }

/* tool page */
.tool { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0 clamp(32px, 5vw, 60px); padding: clamp(28px, 4vw, 52px) 0 72px; }
.tool-head { grid-column: 1; min-width: 0; }
.crumb { font-size: .9rem; margin-bottom: 12px; color: var(--ink2); }
.switch { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; padding: 3px; margin-inline: -3px; }
.switch a { flex: none; padding: 6px 13px; border-radius: 99px; font-size: .9rem; text-decoration: none; border: 1px solid var(--line); background: var(--panel); }
.switch a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.readout { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 84px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.readout dl { margin: 0 0 14px; }
.readout dt { font-size: .8rem; color: var(--ink2); }
.readout dd { margin: 0 0 10px; font-size: .95rem; }
.out { display: block; text-align: center; background: var(--accent); color: var(--on-accent); padding: 10px 16px; text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 99px; white-space: nowrap; }
.out:hover { color: var(--on-accent); filter: brightness(1.12); }
.src { display: block; text-align: center; font-size: .88rem; margin-top: 9px; }
.tool-body { grid-column: 1; min-width: 0; }
.tool-body section { margin-top: 42px; }
.tool-body section.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tool-body h2 { font-size: 1.5rem; }
.plain { margin: 0; padding-left: 1.05em; }
.plain li { margin-bottom: .45em; }
.sounding { margin: 0 0 22px; border-radius: 16px; overflow: hidden; background: linear-gradient(var(--deep2), var(--deep)); color: var(--h-ink); }
.sounding svg { display: block; width: 100%; max-width: 640px; margin-inline: auto; height: auto; }
.sounding figcaption { font-size: .8rem; color: var(--h-ink2); padding: 0 16px 12px; }
.s-surface { stroke: var(--aqua); stroke-width: 1.2; }
.s-line { stroke: var(--h-ink); stroke-width: 1.2; }
.s-na { stroke-dasharray: 3 4; }
.s-lead { fill: var(--aqua); }
.s-size { font-size: 12px; fill: var(--h-ink2); }
.s-val { font-size: 14px; fill: var(--h-ink); }
.s-naval { font: 400 11px "Geist", system-ui, sans-serif; }

/* the dive: sections below the calculator get darker as you scroll */
.deep { background: linear-gradient(var(--deep2), var(--deep) 30%, var(--abyss2) 62%, var(--abyss)); color: var(--h-ink); position: relative; overflow: hidden; }
.deep a { color: var(--aqua); }
.deep a:hover { color: var(--h-ink); }
.dive { padding: clamp(52px, 8vw, 104px) 0; position: relative; }
.dive-head { max-width: 37em; margin-bottom: 30px; color: var(--h-ink2); }
.dive-head h2 { color: var(--h-ink); font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -.04em; }
.dive-more { margin: 22px 0 0; }
.js [data-fallback] { display: none; }
.deep .table th, .deep .table td { border-color: var(--line-d); }
.deep .log li { border-color: var(--line-d); }
.deep .log time, .deep thead th { color: var(--h-ink2); }
.deep .cards a { background: var(--panel-d); border-color: var(--line-d); }
.deep .card-line { color: var(--h-ink2); }

/* compass */
.compass-wrap { display: grid; grid-template-columns: minmax(280px, 430px) minmax(0, 1fr); gap: clamp(24px, 6vw, 72px); align-items: center; }
.compass { position: relative; aspect-ratio: 1; width: 100%; }
.compass svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-ring { fill: none; stroke: var(--h-ink2); stroke-opacity: .4; }
.c-tick { stroke: var(--h-ink2); stroke-opacity: .55; }
.c-major { stroke: var(--aqua); stroke-opacity: 1; stroke-width: 2; }
.c-disc { fill: var(--panel-d); }
.needle { transform-origin: 200px 200px; transition: transform .9s cubic-bezier(.3, 1.6, .5, 1); }
.n-a { fill: var(--bob-red); } .n-b { fill: var(--h-ink); }
.c-hub { fill: var(--deep); stroke: var(--h-ink); stroke-width: 2; }
.c-btn { position: absolute; min-height: 40px; touch-action: manipulation; transform: translate(-50%, -50%); font: 600 .86rem "Sora", system-ui, sans-serif; letter-spacing: -.02em; padding: 7px 12px; border-radius: 99px; color: var(--h-ink); background: var(--deep2); border: 1px solid var(--line-d); cursor: pointer; white-space: nowrap; }
.c-btn:hover { border-color: var(--aqua); }
.c-btn[aria-pressed=true] { background: var(--aqua); color: var(--deep); border-color: var(--aqua); }
.c-panel h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.035em; color: var(--h-ink); margin-bottom: .4em; }
.c-panel p { color: var(--h-ink2); max-width: 32em; }
.c-range { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 500 clamp(1.5rem, 3.4vw, 2.2rem) "Geist Mono", monospace; color: var(--aqua); margin: 12px 0 2px; }
.c-range span { font: 400 .95rem "Geist", system-ui, sans-serif; color: var(--h-ink2); }
.c-note { font-size: .875rem; }
.deep .c-go { display: inline-block; margin-top: 14px; background: var(--aqua); color: var(--deep); padding: 10px 18px; border-radius: 99px; font-weight: 600; text-decoration: none; }
.deep .c-go:hover { background: var(--h-ink); color: var(--deep); }

/* sonar */
.sonar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 500px); gap: clamp(28px, 6vw, 80px); align-items: center; }
.sonar-grid .dive-head { margin-bottom: 0; }
.sonar { touch-action: pan-y; cursor: crosshair; position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, var(--abyss2), var(--abyss)); box-shadow: 0 0 0 1px var(--sonar), 0 0 60px -14px var(--sonar), inset 0 0 40px var(--abyss); }
.sonar[hidden], .harbour[hidden], .tide[hidden], .sonar-card[hidden] { display: none; }
.sonar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-ring { fill: none; stroke: var(--sonar); stroke-opacity: .28; }
.s-axis { stroke: var(--sonar); stroke-opacity: .18; }
.s-txt { font: 500 11px "Geist Mono", monospace; fill: var(--sonar); fill-opacity: .8; }
.s-quad { font: 600 12.5px "Sora", system-ui, sans-serif; fill: var(--h-ink); fill-opacity: .72; letter-spacing: -.01em; }
.sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 72%, color-mix(in srgb, var(--sonar) 34%, transparent) 100%); animation: spin 7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.blip { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.blip::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--sonar); opacity: calc(.42 + var(--glow, 0) * .58); box-shadow: 0 0 calc(var(--glow, 0) * 14px) var(--sonar); }
.blip[aria-pressed=true]::after { inset: 6px; background: var(--bob-red); opacity: 1; box-shadow: 0 0 0 3px var(--h-ink), 0 0 18px var(--bob-red); }
.blip-tag { position: absolute; z-index: 2; transform: translate(-50%, -38px); padding: 3px 10px; border-radius: 99px; background: var(--h-ink); color: var(--deep); font: 600 .82rem "Sora", system-ui, sans-serif; letter-spacing: -.02em; white-space: nowrap; pointer-events: none; transition: left .22s, top .22s; box-shadow: 0 4px 14px var(--abyss); }
.blip-tag.low { transform: translate(-50%, 18px); }
.sonar-card { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--panel-d); border: 1px solid var(--line-d); color: var(--h-ink2); font-size: .95rem; }
.sonar-card strong { display: block; font: 600 1.15rem "Sora", system-ui, sans-serif; letter-spacing: -.02em; color: var(--h-ink); }
.sonar-card .age { font: 500 1.05rem "Geist Mono", monospace; color: var(--sonar); }

/* harbours */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.filters button { font: 500 .9rem "Geist", system-ui, sans-serif; padding: 7px 13px; border-radius: 99px; color: var(--h-ink); background: var(--panel-d); border: 1px solid var(--line-d); cursor: pointer; }
.filters button[aria-pressed=true] { background: var(--aqua); color: var(--deep); border-color: var(--aqua); font-weight: 600; }
.ports { display: grid; grid-template-columns: 1.5fr 1.1fr 1fr .9fr; gap: 10px; }
.port { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 14px 18px; min-height: 240px; background: var(--panel-d); border: 1px solid var(--line-d); }
.port h3 { color: var(--h-ink); font-size: 1.05rem; margin-bottom: 2px; }
.port > p { font-size: .84rem; color: var(--h-ink2); margin: 0 0 12px; }
.port-yes { background: linear-gradient(180deg, var(--harbour-sand) 0 74px, var(--panel-d) 74px); }
.port-yes .boats { margin-top: 24px; }
.port-yes h3, .port-yes > p { color: var(--deep); }
.port-unknown::before, .port-unknown::after { content: ""; position: absolute; width: 190%; height: 70%; left: -45%; top: 28%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--fog) 26%, transparent), transparent); animation: fog 16s ease-in-out infinite alternate; }
.port-unknown::after { top: 52%; animation-duration: 23s; animation-direction: alternate-reverse; }
@keyframes fog { from { transform: translateX(-16%); } to { transform: translateX(16%); } }
.boats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.boat { display: inline-flex; align-items: center; gap: 6px; font: 500 .84rem "Geist", system-ui, sans-serif; color: var(--h-ink); background: var(--deep2); border: 1px solid var(--line-d); border-radius: 10px; padding: 5px 9px 5px 7px; cursor: pointer; animation: bob 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); transition: opacity .35s, translate .9s cubic-bezier(.2, .8, .2, 1); }
.boat svg { width: 18px; height: 14px; flex: none; }
.boat .hull { fill: var(--aqua); } .boat .sail { fill: var(--h-ink); }
.boat:hover { border-color: var(--aqua); }
.boat[aria-pressed=true] { background: var(--aqua); color: var(--deep); border-color: var(--aqua); }
.boat[aria-pressed=true] .hull { fill: var(--bob-red); } .boat[aria-pressed=true] .sail { fill: var(--deep); }
.boat.dim { opacity: .18; }
.harbour.out .boat { translate: -44px 0; opacity: 0; }
@keyframes bob { 50% { transform: translateY(-3px) rotate(-1.2deg); } }
.port-card { margin-top: 12px; padding: 16px 18px; border-radius: 14px; background: var(--panel-d); border: 1px solid var(--line-d); color: var(--h-ink2); font-size: .95rem; }
.port-card strong { color: var(--h-ink); font: 600 1.15rem "Sora", system-ui, sans-serif; letter-spacing: -.02em; }
.port-card p { margin: 5px 0 0; }

/* tide */
.tide svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-water { fill: var(--aqua); fill-opacity: .1; }
.t-line { fill: none; stroke: var(--aqua); stroke-width: 2; }
.t-today { stroke: var(--bob-red); stroke-width: 2; }
.t-next { stroke: var(--buoy); stroke-width: 2; stroke-dasharray: 4 5; }
.t-lab { font: 500 12px "Geist Mono", monospace; fill: var(--h-ink2); }
.t-dot { fill: var(--deep); stroke: var(--aqua); stroke-width: 3; cursor: pointer; }
.t-dot:hover, .t-dot:focus-visible { fill: var(--aqua); outline: none; }
.t-dot[aria-pressed=true] { fill: var(--aqua); stroke: var(--h-ink); }
.tide-card { margin-top: 12px; max-height: 300px; overflow: auto; padding: 4px 18px; border-radius: 14px; background: var(--panel-d); border: 1px solid var(--line-d); font-size: .95rem; color: var(--h-ink2); }
.tide-card div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 2px 14px; padding: 9px 0; border-bottom: 1px solid var(--line-d); }
.tide-card div:last-child { border: 0; }

/* footer */
.foot { background: var(--deep); color: var(--h-ink); padding: 38px 0 32px; }
.foot-in { display: flex; justify-content: space-between; gap: 24px 60px; flex-wrap: wrap; }
.foot-brand { max-width: 34em; font-size: .93rem; color: var(--h-ink2); }
.foot-brand strong { font: 600 1.15rem/1 "Sora", system-ui, sans-serif; letter-spacing: -.03em; display: block; margin-bottom: 8px; color: var(--h-ink); }
.foot a:hover { color: var(--aqua); }
.foot nav { display: flex; flex-direction: column; gap: 3px; font-size: .93rem; }

@media (max-width: 860px) {
  .compass-wrap, .sonar-grid { grid-template-columns: minmax(0, 1fr); }
  .compass { max-width: 340px; margin-inline: auto; }
  .sonar { max-width: 420px; width: 100%; margin-inline: auto; }
  .ports { grid-template-columns: 1fr 1fr; }
  .port { min-height: 0; }
  .tide-card div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pick-card { grid-template-columns: minmax(0, 1fr); }
  .pick-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .src { margin-top: 0; }
}
@media (max-width: 860px) {
  .controls { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; }
  .row-price { grid-column: 2; grid-row: 1; text-align: right; }
  .row-plan, .row-bill, .row-eu { grid-column: 1 / -1; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .tool { grid-template-columns: minmax(0, 1fr); }
  .readout { grid-column: 1; grid-row: auto; position: static; margin-top: 8px; }
  .tool-body section.two { grid-template-columns: minmax(0, 1fr); }
  .log li, .log-short li { grid-template-columns: minmax(0, 1fr); }
  table { font-size: .9rem; }
  .pick { margin-top: -30px; }
}
@media (max-width: 520px) {
  .ports { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .seg { display: flex; }
  .seg label { flex: 1; }
  .seg span { padding: 7px 4px; font-size: .8rem; text-align: center; }
  .controls { padding: 14px; }
  .top nav { gap: 15px; font-size: .875rem; }
  .stops { font-size: .7rem; }
  .stops button { padding: 3px 4px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .row, .cards a, .needle, .boat { transition: none; }
  .range-box::after, .hint i, .sweep, .boat, .port-unknown::before, .port-unknown::after { animation: none; }
}

/* compare two, shared views, page tools */
.ctl-period { min-width: 0; }
.share { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.share[hidden], .duel[hidden] { display: none; }
#copy-done { overflow-wrap: anywhere; }
.duel { margin-top: 44px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.duel h2 { font-size: 1.5rem; }
.duel-picks, .tool-ctl { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin: 14px 0; }
.duel-picks label, .tool-ctl label, .tool-ctl legend { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--ink2); }
.duel-picks select, .tool-ctl select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-width: 170px; max-width: 100%; }
.duel-verdict, .tool-out { font-size: 1.05rem; font-weight: 500; margin: 12px 0; min-height: 1.6em; }
.tool-box { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin-bottom: 36px; }
.tool-ctl fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tool-ctl .check { flex-direction: row; align-items: center; gap: 8px; font-size: .95rem; color: var(--ink); }
.tool-ctl .check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.tool-box .seg { border-color: var(--line); }
.tool-box .seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.tool-box tr[hidden] { display: none; }
.page-wide { max-width: 1180px; }
.eu-note { font-size: .92rem; min-width: 300px; }
.prose-wide { max-width: 800px; }
.prose-wide .table { margin: 0 0 1.2em; }
.sourced li { margin-bottom: .5em; }
.src-note { font-size: .8em; color: var(--ink2); white-space: nowrap; }
.fact h4 { font: 600 .95rem/1.3 "Sora", system-ui, sans-serif; margin: 16px 0 6px; }
.fact .table { margin-top: 10px; }
.ad-notice { margin: 0; padding: 8px 20px; font-size: .9rem; background: var(--panel2); color: var(--ink); text-align: center; }
.ad-mark { margin-left: 6px; font-size: .75rem; color: var(--ink2); }
.consent { position: fixed; inset: auto 12px 12px; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; max-width: 620px; margin-inline: auto; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.consent p { margin: 0; flex: 1 1 260px; font-size: .92rem; }
@media (max-width: 640px) {
  .duel, .tool-box { padding: 16px; }
  .duel-picks label, .tool-ctl label { flex: 1 1 100%; }
  .duel-picks select, .tool-ctl select { width: 100%; }
  .tool-box .seg span { padding: 7px 10px; font-size: .85rem; }
}