:root,[data-theme="light"]{
  --bg:#E8EDEB; --surface:#FFFFFF; --surface-2:#F2F5F3; --frost:rgba(238,243,241,.82);
  --glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.55);
  --ink:#12201D; --ink2:#556661; --ink3:#8A9793;
  --line:rgba(18,32,29,.12); --line2:rgba(18,32,29,.22); --hair:rgba(18,32,29,.06);
  --accent:#0A6E66; --accent2:var(--accent); --accent-ink:#085850; --flow:#36AEA3;
  --g1:#0A6E66; --g2:#1F6FD9;
  --aur1:rgba(10,110,102,.12); --aur2:rgba(31,111,217,.08); --aur3:rgba(10,110,102,.07);
  --fill-top:rgba(10,110,102,.22); --fill-bot:rgba(10,110,102,.01);
  --sun:var(--ink2); --sun-ink:var(--ink2); --night:rgba(18,32,29,.05); --strip-night:rgba(18,32,29,.17);
  --good:var(--accent); --hw:var(--ink); --lw:var(--ink2); --accent-warm:var(--accent); --now-glow:rgba(10,110,102,.35);
  --moon-lit:#E4E4DC; --moon-dark:#C0C5BF;
  --sh-sm:0 1px 3px rgba(18,32,29,.07),0 1px 2px rgba(18,32,29,.05);
  --sh:0 2px 8px rgba(18,32,29,.08),0 1px 3px rgba(18,32,29,.06);
  --sh-lg:0 16px 48px rgba(18,32,29,.14),0 4px 12px rgba(18,32,29,.08);
  --edge:inset 0 1px 0 rgba(255,255,255,.65);
  --r:12px; --r-sm:8px; --r-lg:18px;
}
[data-theme="dark"]{
  --bg:#070F0E; --surface:#101A18; --surface-2:#141E1C; --frost:rgba(8,16,15,.72);
  --glass:rgba(16,27,25,.62); --glass-2:rgba(21,32,30,.5);
  --ink:#E6EEEA; --ink2:#8A9C97; --ink3:#5E6E6A;
  --line:rgba(230,238,234,.11); --line2:rgba(230,238,234,.20); --hair:rgba(230,238,234,.06);
  --accent:#38C8BC; --accent2:var(--accent); --accent-ink:#7AE8E0; --flow:#6EE0D6;
  --g1:#3BE8D8; --g2:#5B9CFF;
  --aur1:rgba(56,200,188,.16); --aur2:rgba(91,156,255,.10); --aur3:rgba(56,200,188,.07);
  --fill-top:rgba(56,200,188,.30); --fill-bot:rgba(56,200,188,.01);
  --sun:var(--ink2); --sun-ink:var(--ink2); --night:rgba(0,0,0,.35); --strip-night:rgba(0,0,0,.48);
  --good:var(--accent); --hw:var(--ink); --lw:var(--ink2); --accent-warm:var(--accent); --now-glow:rgba(56,200,188,.40);
  --moon-lit:#E4E4DC; --moon-dark:#141E1C;
  --sh-sm:0 1px 3px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.18);
  --sh:0 2px 8px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.20);
  --sh-lg:0 20px 60px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.35);
  --edge:inset 0 1px 0 rgba(230,238,234,.06);
  --r:12px; --r-sm:8px; --r-lg:18px;
}
*{box-sizing:border-box;margin:0;}
/* aurora atmosphere lives on the ROOT background: the colour propagates to the whole canvas
   (below short content, overscroll, during resize) — no fixed layer, so no repaint glitches.
   no-repeat is essential: the gradient image is sized to the root box and would otherwise TILE
   below the content with visible seams. Glows sit near the top only, so nothing clips below.
   Vertical anchors in PX, not % (% scale with document height — the glows sat visibly lower on
   the long SEO landing pages, which share these exact values; keep the two in sync).
   The tiled SVG grain on top dithers the faint gradients — without it they band visibly in 8-bit.
   Known trade-off (owner's call): Safari drops SVG filters in background images, so the grain
   doesn't apply there and the gradients band slightly — accepted; do not swap to a PNG tile. */
html{-webkit-text-size-adjust:100%;font-size:clamp(15px,2.6vw,17px);min-height:100%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
    radial-gradient(900px 540px at 82% -90px, var(--aur1), transparent 62%),
    radial-gradient(720px 460px at 4% 300px, var(--aur2), transparent 60%)
    var(--bg);
  background-repeat:repeat,no-repeat,no-repeat;}
body{font-family:"Helvetica Neue",Helvetica,"Inter",Arial,system-ui,sans-serif;color:var(--ink);background:transparent;
  line-height:1.45;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;
  /* app-like: rapid taps on the nav arrows used to double-click-select the date heading etc.
     Treat the whole UI as chrome (no text selection); inputs re-enabled just below. */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea{-webkit-user-select:text;user-select:text;}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);}
.disp{letter-spacing:-.02em;}
.tnum{font-variant-numeric:tabular-nums;}
/* --gutter er EINI lárétti viðmiðunarpunkturinn fyrir allt sem liggur við brún gluggans: efsti
   borðinn í báðum hömum, hnattardálkurinn og spássía efnisins. Áður voru þrjár ólíkar tölur --
   28px í borðanum, 22px í kortaham og 14px á hnattardálknum. Heitir --gutter en EKKI --edge:
   það nafn var þegar tekið af innri ljósröndinni (inset 0 1px 0 …) sem níu box-shadow-reglur nota,
   og að endurskilgreina það gerði þær allar ógildar -- ljósröndin hvarf af hverju korti á síðunni -- svo lógóið hoppaði 6px þegar höfn
   var valin og þemahnappurinn stóð 8px innar en hnappar sem áttu að raðast undir hann. */
:root{--gutter:18px;}
/* Kortavalið setur overflow:hidden á rótina, og þá hvarf skrunstikan -- allt hægra megin hoppaði
   15px út. Gáttin er frátekin alltaf, svo hamirnir tveir standi á sama stað. Á kerfum með
   yfirlagsstiku (macOS sjálfgefið, símar) tekur hún ekkert pláss og reglan gerir ekkert. */
html{scrollbar-gutter:stable;}
.wrap{max-width:580px;margin:0 auto;padding:0 var(--gutter) 64px;}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:10px 14px;border-radius:var(--r-sm);z-index:80;}
.skip:focus{left:12px;top:12px;}
button{font-family:inherit;color:inherit;cursor:pointer;}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:13px var(--gutter) 12px;margin:0 calc(-1 * var(--gutter)) 18px;
  background:var(--frost);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);}
.brand{font-weight:700;font-size:1.3rem;letter-spacing:-.04em;
  background:linear-gradient(115deg,var(--ink),var(--ink) 45%,var(--accent-ink) 85%,var(--g2) 130%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:tideflow 7s ease-in-out infinite alternate;
  display:flex;align-items:center;gap:.38rem;flex:0 0 auto;}
/* Lógóið er takki („heim í hnöttinn“) en h1-merkingin helst. Takkinn erfir lit og text-fill,
   svo klippti bakgrunnur h1-sins sjáist áfram í gegnum stafina — ekkert færist til. */
.brand-btn{font:inherit;letter-spacing:inherit;color:inherit;-webkit-text-fill-color:inherit;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  display:flex;align-items:center;gap:.38rem;}
.brand .dot{width:.48rem;height:.48rem;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent),0 0 12px color-mix(in srgb,var(--accent) 55%,transparent);
  animation:brandpulse 2.8s ease-out infinite;}
/* shared breathing drift for the clipped-gradient text (logo · time · metres) */
@keyframes tideflow{from{background-position:0% 50%;}to{background-position:100% 50%;}}
@keyframes brandpulse{
  0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent),0 0 12px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent);}
  70%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent),0 0 12px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 9px transparent;}
  100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent),0 0 12px color-mix(in srgb,var(--accent) 55%,transparent),0 0 0 0 transparent;}}
.locbtn{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:9px 13px;box-shadow:var(--sh-sm);transition:border-color .15s,box-shadow .15s;}
.locbtn:hover{border-color:var(--line2);box-shadow:var(--sh);}.locbtn:active{border-color:var(--accent);}
.loc-pin{flex:0 0 auto;align-self:center;color:var(--accent);width:14px;height:14px;display:block;}
.locbtn .loc-name{flex:0 1 auto;min-width:0;font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;}
.loc-region{color:var(--ink2);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loc-caret{margin-left:auto;align-self:center;flex:0 0 auto;color:var(--ink2);width:15px;height:15px;display:block;}
.icon-btn{flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  color:var(--ink2);font-size:1rem;display:grid;place-items:center;box-shadow:var(--sh-sm);transition:border-color .15s,color .15s,box-shadow .15s;}
.icon-btn:hover{border-color:var(--line2);color:var(--ink);box-shadow:var(--sh);}.icon-btn:active{border-color:var(--accent);}
.lang-btn{font-size:.74rem;font-weight:700;letter-spacing:.03em;}
/* Málvalið: hnappurinn sýnir málið sem er í gangi og listinn hangir undir honum, hvert mál undir eigin heiti.
   .lang-wrap er flex-barn stikunnar í stað hnappsins, svo hann má ekki skreppa saman frekar en hnappurinn. */
.lang-wrap{position:relative;flex:0 0 auto;}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:120;min-width:168px;padding:4px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--sh-lg);}
.lang-menu[hidden]{display:none;}
.lang-it{display:flex;align-items:center;width:100%;padding:9px 12px;border:0;background:none;border-radius:var(--r-sm);
  color:var(--ink);font:inherit;font-size:.92rem;text-align:left;cursor:pointer;}
.lang-it:hover{background:var(--surface-2);}
.lang-it.on{color:var(--accent-ink);font-weight:700;}
.lang-it.on::after{content:"✓";margin-left:auto;padding-left:14px;font-weight:400;}

/* ---- App Store-röð (leysti tímabundna myrkvaborðann af hólmi 1.9.2026) ----
   Sami stíll og kassarnir í kring svo hún falli inn í stæðuna í stað þess að
   hrópa: rúnnaður rammi, gler-bakgrunnur, texti flúttar við hina kassana. */
.app-row{display:flex;align-items:center;gap:10px;margin-top:8px;padding:13px 16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--glass);
  color:var(--ink2);font-size:.88rem;text-decoration:none;
  box-shadow:var(--sh-sm),var(--edge);transition:border-color .18s,color .18s;}
/* display:flex hér að ofan yfirkeyrir sjálfgefna [hidden]{display:none} reglu vafrans,
   svo hidden-eigindin ein dugar ekki — myrkvaborðinn stóð eftir af nákvæmlega þeirri
   ástæðu. Haldið þótt röðin sé nú föst, svo gildran komi ekki aftur. */
.app-row[hidden]{display:none;}
.app-row:hover{border-color:var(--accent);color:var(--ink);}
.app-row b{color:var(--ink);font-weight:650;}
.app-row .ea{margin-left:auto;flex:0 0 auto;color:var(--accent);}
.app-mark{flex:0 0 auto;color:var(--ink);}
@media(max-width:480px){.app-more{display:none;}}

/* ---- segmented (tabs) ---- */
.seg{display:flex;gap:4px;background:var(--glass-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:var(--r);padding:4px;margin-bottom:18px;border:1px solid var(--line);box-shadow:var(--edge);}
.seg-b{flex:1;border:none;background:transparent;border-radius:var(--r-sm);padding:8px 0;
  font-weight:500;font-size:.9rem;letter-spacing:.01em;color:var(--ink2);transition:color .15s,background .15s,box-shadow .15s;}
.seg-b:hover{color:var(--ink);}
.seg-b.on{color:var(--accent-ink);background:var(--surface);font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent),0 2px 12px color-mix(in srgb,var(--accent) 22%,transparent);}

/* ---- nav ---- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.navbtn{width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  color:var(--ink2);box-shadow:var(--sh-sm);transition:border-color .15s,color .12s,box-shadow .15s;}
.navbtn svg{display:block;pointer-events:none;}
.navbtn:hover{border-color:var(--line2);color:var(--ink);box-shadow:var(--sh);}
.navbtn:active{border-color:var(--accent);color:var(--accent);}
.navc{text-align:center;flex:1;min-width:0;}
.nav-main{font-weight:700;font-size:1.08rem;letter-spacing:-.02em;}
.nav-rel{font-size:.66rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:1px;}
.todaywrap{text-align:center;height:24px;margin:8px 0 14px;}
.today-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink2);font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;padding:5px 16px;border-radius:var(--r-sm);box-shadow:var(--sh-sm);transition:border-color .15s,color .15s;}
.today-btn:hover{color:var(--ink);border-color:var(--line2);}
.todaywrap[data-empty]{height:4px;margin:0;}

/* ---- now block ---- */
/* 0 að neðan: bylgju-SVG-ið ber sjálft ~18px innskot efst (y0=16 af 210), svo sjónræna bilið
   frá kassanum að bylgjunni verður 18px — sami taktur og restin af stæðunni. Var 20px ofan á
   innskotið = ~38px, áberandi stærra en hin bilin. Breiðskjár yfirskrifar þetta í @media. */
.now{margin:4px 0 0;position:relative;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));border-radius:var(--r-lg);
  padding:18px 18px 16px;box-shadow:var(--sh),var(--edge);}
.now::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px 140px at 12% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);}
.now-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
.now-l{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink2);font-weight:700;}
.now-main{display:flex;align-items:baseline;gap:14px;}
.now-time{font-weight:700;font-size:3.1rem;line-height:.96;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(115deg,var(--ink),var(--ink) 45%,var(--accent-ink) 85%,var(--g2) 130%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:tideflow 7s ease-in-out infinite alternate;
  /* clipped-text paints only inside the box; line-height<1 leaves glyph edges outside it —
     pad the paint box out and pull the layout back in so digits don't get shaved */
  padding:.06em .05em .1em 0;margin:-.06em -.05em -.1em 0;}
.now-h{font-weight:600;font-size:1.2rem;font-variant-numeric:tabular-nums;
  background:linear-gradient(115deg,var(--g1),var(--g2) 50%,var(--g1) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:tideflow 7s ease-in-out infinite alternate;}
.now-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:9px;font-size:.86rem;color:var(--ink2);}
.now-cd{font-weight:700;color:var(--ink);}
.now-tr{color:var(--ink2);} .now-tr.up{color:var(--accent);} .now-tr.down{color:var(--ink2);}
.now-range{color:var(--ink2);}
.streymi{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 9px;border:1px solid var(--line);
  border-radius:var(--r-sm);white-space:nowrap;flex:0 0 auto;color:var(--ink2);background:var(--surface-2);}
.streymi.spring{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--surface));}
.streymi.neap{color:var(--ink2);}
.streymi.mid{color:var(--ink3);border-color:var(--hair);}
.streymi.peak{font-weight:700;}
.streymi.peak.spring{background:linear-gradient(120deg,var(--g1),var(--g2));color:var(--surface);border-color:transparent;box-shadow:0 2px 12px color-mix(in srgb,var(--accent) 40%,transparent);}
.streymi.peak.neap{background:var(--ink2);color:var(--surface);border-color:var(--ink2);}
.now-twocol{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:14px;padding-top:13px;border-top:1px solid var(--hair);}
.tc-l{display:block;font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);font-weight:700;margin-bottom:3px;}
.tc-v{font-weight:500;font-size:1.08rem;margin-right:10px;font-variant-numeric:tabular-nums;}

/* ---- wave ---- */
.wave{position:relative;margin-left:-16px;margin-right:-16px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab;}
.wave:active{cursor:grabbing;}
.scrub{position:absolute;inset:0;pointer-events:none;}
.scrub[hidden]{display:none;}
.scrub-line{position:absolute;top:4px;bottom:4px;left:0;width:1.5px;background:linear-gradient(180deg,transparent,var(--accent) 18%,var(--accent) 82%,transparent);
  box-shadow:0 0 9px color-mix(in srgb,var(--accent) 55%,transparent);
  transform:translateX(calc(var(--x,0) - .75px));} /* -half width: centre the line on --x like the dot (was left-edge-aligned → dot sat .75px off) */
.scrub-dot{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--accent);border:1.5px solid var(--surface);transform:translate(calc(var(--x,0) - 5.5px),calc(var(--y,0) - 5.5px));}
.scrub-read{display:none;position:absolute;top:5px;left:0;transform:translate(calc(var(--rx,0) - 50%),0);background:linear-gradient(120deg,var(--g1),var(--g2));color:var(--surface);font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:var(--r-sm);white-space:nowrap;
  box-shadow:0 2px 14px color-mix(in srgb,var(--accent) 45%,transparent);}
.scrub.on .scrub-read{display:block;}
.scrub:not(.on) .scrub-dot{box-shadow:0 0 0 3px var(--now-glow),0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);animation:nowpulse 2.8s ease-out infinite;}
.scrub:not(.on) .scrub-line{opacity:.75;} /* idle: clearly readable (was .5 — too faint over night shading); scrubbing still snaps to 1 as the active-state cue */
.scrub-dot::after{content:'';}
@keyframes nowpulse{
  0%{box-shadow:0 0 0 3px var(--now-glow),0 0 14px color-mix(in srgb,var(--accent) 70%,transparent),0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent);}
  70%{box-shadow:0 0 0 3px var(--now-glow),0 0 14px color-mix(in srgb,var(--accent) 70%,transparent),0 0 0 14px transparent;}
  100%{box-shadow:0 0 0 3px var(--now-glow),0 0 14px color-mix(in srgb,var(--accent) 70%,transparent),0 0 0 0 transparent;}}
.now.scrubbing .now-time{background:linear-gradient(115deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;}
.now.scrubbing .now-l{color:var(--accent);}
.wave-strip{width:1500%;will-change:transform;}
.tcurve{display:block;width:100%;height:auto;}
.tcurve .dayline{stroke:var(--line2);stroke-width:1;}
.tcurve .datelab{fill:var(--ink2);font-weight:700;font-size:8px;letter-spacing:.01em;}
.tcurve .datelab.td{fill:var(--accent);}
.tcurve .grid{stroke:var(--hair);stroke-width:.6;} .tcurve .grid.faint{stroke:var(--hair);stroke-width:.5;}
.tcurve .ylab,.tcurve .xlab{fill:var(--ink3);font-size:7.5px;}
.tcurve .curveline{stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
svg.strip-svg .curveline{stroke:url(#lineGrad);}
.tcurve .lg-past{stop-color:var(--ink);stop-opacity:1;}
.tcurve .lg-future{stop-color:var(--ink);stop-opacity:.32;}
.tcurve .curveflow{stroke:url(#flowGrad);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.tcurve .cf-future{opacity:.4;}
.tcurve .hw{fill:var(--accent);stroke:var(--surface);stroke-width:1.4;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 65%,transparent));}
.tcurve .lw{fill:var(--surface);stroke:var(--ink);stroke-width:1.6;}
.tcurve .ptlab{fill:var(--ink);font-weight:500;font-size:9px;font-variant-numeric:tabular-nums;}
/* almyrkva-merkið 12.8.2026 */
.tcurve .eclx{stroke:var(--ink2);stroke-width:1;stroke-dasharray:3 4;opacity:.65;}
.tcurve .eclx-ring{fill:none;stroke:var(--accent);stroke-width:1.3;}
.tcurve .eclx-disc{fill:#000;opacity:.88;}
.tcurve .eclx-lbl{fill:var(--ink);font-weight:700;font-size:9px;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.tcurve .sunline{stroke:var(--ink3);stroke-width:.7;stroke-dasharray:2 3;opacity:.7;}
.tcurve .sunlab{fill:var(--ink2);font-size:8px;}
.tcurve .flood{fill:var(--accent);opacity:.5;}
.tcurve .nowline{stroke:var(--accent);stroke-width:1.3;}
.tcurve .nowdot{fill:var(--accent);stroke:var(--surface);stroke-width:1.6;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 75%,transparent));}
.wave-hint{font-size:.68rem;color:var(--ink3);text-align:center;margin:8px 0 16px;letter-spacing:.01em;}

/* ---- events row ---- */
.evrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px;}
.ev{padding:13px 6px;text-align:center;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm),var(--edge);transition:border-color .15s;}
/* preview affordance: :hover only on true hover devices (on touch it sticks after a tap);
   .pv is the JS-driven pressed state for the touch press-and-hold preview */
@media(hover:hover){.ev[data-t]:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));}}
.ev.pv{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));}
.ev.h{box-shadow:inset 0 2px 0 -0.5px color-mix(in srgb,var(--accent) 55%,transparent),var(--sh-sm);}
.ev-ic{font-size:.63rem;display:block;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);font-weight:700;margin-bottom:3px;}
.ev.h .ev-ic{color:var(--accent);text-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent);} .ev.l .ev-ic{color:var(--ink3);}
.ev-t{font-weight:700;font-size:1.05rem;display:block;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.ev-h{font-size:.76rem;color:var(--ink2);margin-top:2px;} .ev-h small{font-size:.64rem;}
.ev-empty{background:transparent;border-color:var(--line);box-shadow:none;}

/* ---- facts ---- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px;}
.fact{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 12px;box-shadow:var(--sh-sm),var(--edge);transition:opacity .12s,box-shadow .18s,border-color .18s,transform .18s;}
.fact:active{opacity:.6;}
.fact:hover{box-shadow:var(--sh),0 4px 18px color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));transform:translateY(-1px);}
.fact-k{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);font-weight:700;}
.fact-v{font-weight:500;font-size:.92rem;display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;}
.fact-v .moon{vertical-align:middle;}
.fact-v .nd{font-size:.58em;color:var(--ink3);vertical-align:super;font-weight:700;margin-left:1px;}
.moonlit{fill:var(--moon-lit);}
.moondark{fill:var(--moon-dark);}
.moonring{fill:none;stroke:var(--line2);stroke-width:1;}
.fact-s{font-size:.74rem;color:var(--ink2);font-variant-numeric:tabular-nums;line-height:1.3;text-align:center;}
.fact-v>span{text-align:center;}
.sun-glyph{flex:0 0 auto;fill:none;stroke:var(--ink2);stroke-width:1.4;stroke-linecap:round;}

/* ---- more (details) ---- */
.more{margin:0 0 8px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm),var(--edge);}
.more>summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;font-size:.88rem;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:center;}
.more>summary::-webkit-details-marker{display:none;}
.more>summary::after{content:'+';color:var(--ink3);font-weight:400;font-size:1.1rem;transition:transform .2s;}
.more[open]>summary::after{content:'\2212';}
.more-body{padding:0 16px 16px;}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.mb-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;}
.mb-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink2);margin-bottom:9px;}
.mb-h .sun-ic{color:var(--ink2);}
.mb-row{display:flex;justify-content:space-between;gap:8px;font-size:.86rem;padding:3px 0;color:var(--ink2);}
.mb-row b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;}

/* ---- week ---- */
/* Vikusýn appsins (WeekView.swift), flutt hingað 2.10.2026: raðir með hárlínu á milli, ekki spjöld.
   Röðin nær 10px út fyrir efnið báðum megin svo rammi valins dags og sveimliturinn fái loft án þess
   að textinn hliðrist; hárlínan er ::after og fylgir efninu, ekki rammanum. */
.weekwrap{display:flex;flex-direction:column;}
.wrow{position:relative;display:flex;align-items:center;gap:14px;margin:0 -10px;padding:13px 10px;text-align:left;
  background:none;border:0;border-radius:var(--r);transition:background .12s;}
.wrow::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:1px;background:var(--line);}
.wrow:last-child::after{display:none;}
.wrow:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}
.wrow.on{background:color-mix(in srgb,var(--surface-2) 70%,transparent);box-shadow:inset 0 0 0 1px var(--accent);}
.wrow.on::after{display:none;}
.wrow-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px;}
.wrow-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:19px;}
.wrow-d{font-weight:500;font-size:.9rem;}
.wrow.today .wrow-d{font-weight:700;color:var(--accent);}
.wrow-td{font-style:normal;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);}
.wrow-h .wstr{margin-left:auto;}
.wrow-ev{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 12px;font-variant-numeric:tabular-nums;}
.wrow-ev i{font-style:normal;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);white-space:nowrap;}
.wrow-ev i.h{color:var(--accent-ink);}
.wes{white-space:nowrap;font-size:.84rem;font-weight:500;color:var(--ink);}
.we{display:inline-block;margin-right:10px;}
.we small{font-size:.66rem;font-weight:400;color:var(--ink3);margin-left:1px;}
.wbar{display:block;height:3px;}
.wbar i{display:block;height:3px;min-width:10px;border-radius:1.5px;background:linear-gradient(90deg,var(--g1),color-mix(in srgb,var(--g2) 35%,transparent));}
.wrow-r{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.wrow-rng{font-size:.74rem;color:var(--ink2);font-variant-numeric:tabular-nums;}
.spark{display:block;width:92px;height:34px;} .spk{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.5;}
.wrow.today .spk{opacity:.9;}
.spk-now{stroke:var(--accent);stroke-width:1.5;}
.wstr{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border:1px solid var(--line);border-radius:20px;white-space:nowrap;color:var(--ink2);}
.wstr.spring{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 7%,transparent);}
.wstr.neap{color:var(--ink2);}
.wstr.peak{border:0;}
.wstr.peak.spring{background:linear-gradient(120deg,var(--g1),var(--g2));color:var(--surface);}
.wstr.peak.neap{background:var(--ink2);color:var(--surface);}
/* Borð: röðin er allt að 1000px breið. Smábylgjan fær 44% af henni og verður að raunverulegri
   dagsbylgju í stað þess að standa ein úti í horni með autt bil á milli. */
@media (min-width:720px){
  .wrow{gap:32px;}
  .wrow-r{flex:0 0 44%;}
  .spark{width:100%;height:44px;}
}

/* ---- month ---- */
.calwrap{padding:4px 0 0;}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;}
.cal-h{text-align:center;font-size:.66rem;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cal-x{aspect-ratio:1/1.15;}
.cal-c{position:relative;aspect-ratio:1/1.15;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--glass);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:6px 0 0 7px;overflow:hidden;
  box-shadow:var(--sh-sm);transition:border-color .15s,box-shadow .15s;}
.cal-c:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:var(--sh),0 3px 14px color-mix(in srgb,var(--accent) 12%,transparent);}
.cal-c[disabled]{opacity:.25;pointer-events:none;box-shadow:none;}
.cal-c.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),var(--sh-sm);}
.cal-c.today .cal-n{color:var(--accent);font-weight:700;}
/* Ramminn merkir aðeins valinn dag (.on). Stórstreymisdagar höfðu líka ramma, daufan á hverjum
   stórstreymum degi og sterkan á mesta stórstreymi, svo sama merkið þýddi tvennt — punkturinn,
   stjarnan og súlan segja þetta þegar (notendaprófun 23.9.2026). */
.cal-c.spring .cal-fill{background:var(--accent);}
.cal-c.spring::after{content:'';position:absolute;top:6px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.cal-c.neap .cal-fill{background:var(--accent);}
.cal-c.peak-max::after{content:'\2605';position:absolute;top:4px;right:5px;width:auto;height:auto;background:none;font-size:.78rem;line-height:1;color:var(--accent);}
.cal-c.peak-min::after{content:'';position:absolute;top:6px;right:5px;width:9px;height:9px;border-radius:50%;border:1.6px solid var(--ink2);background:transparent;}
.cal-n{font-weight:500;font-size:.84rem;line-height:1;font-variant-numeric:tabular-nums;}
/* Súlan fyllir reitinn á breiddina og talan stendur efst til vinstri, eins og í appinu (MonthView.swift). */
.cal-bar{position:absolute;bottom:0;left:0;right:0;height:100%;padding:0 4px 4px;display:flex;align-items:flex-end;justify-content:center;}
.cal-fill{width:100%;border-radius:1px;background:var(--accent);}
.cal-legend{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:.7rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;}
.cal-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:10px;font-size:.74rem;color:var(--ink2);}
.cal-key span{display:inline-flex;align-items:center;gap:6px;}
.cal-key i{font-style:normal;flex:0 0 auto;display:inline-block;}
.ck-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
.ck-star{font-size:.85rem;line-height:1;color:var(--accent);}
.ck-ring{width:10px;height:10px;border-radius:50%;border:1.8px solid var(--ink2);box-sizing:border-box;}
.cl-bar{flex:1 1 64px;max-width:220px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--g1),color-mix(in srgb,var(--g2) 25%,transparent));box-shadow:0 0 8px color-mix(in srgb,var(--accent) 30%,transparent);}

/* Bylgja alls mánaðarins undir dagatalinu (buildMonthWave). */
.mwave-card{margin-top:18px;padding:12px 14px 14px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm),var(--edge);}
.mw-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-height:1.1rem;margin-bottom:8px;}
.mw-read{font-size:.74rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.mw-name{margin-left:auto;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mwave{position:relative;height:96px;touch-action:pan-y;cursor:crosshair;}
.mwave svg{display:block;width:100%;height:100%;}
.mw-line{stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;opacity:.85;}
.mwave i{position:absolute;pointer-events:none;font-style:normal;}
.mw-pk.s{top:-3px;transform:translateX(-50%);font-size:.6rem;line-height:1;color:var(--accent);}
.mw-pk.n{bottom:1px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;border:1.3px solid var(--ink2);}
.mw-now,.mw-scrub{top:2px;bottom:2px;width:1.5px;margin-left:-.75px;background:var(--accent);}
.mw-scrub,.mw-dot{display:none;}
.mw-scrub{top:0;bottom:0;}
.mw-dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--accent);border:1.5px solid var(--surface);}
.mwave.scrub .mw-scrub,.mwave.scrub .mw-dot{display:block;}
.mwave.scrub .mw-now{opacity:.4;}
/* Borð: reitirnir fá fasta hæð í stað þess að stækka með breiddinni (þeir urðu 160px háir í 1000px
   dálki), og bylgjan fær meiri hæð. */
@media (min-width:720px){
  .cal-c,.cal-x{aspect-ratio:auto;height:72px;}
  .mwave{height:130px;}
}

/* ---- map overlay ---- */
/* Yfirlögnin er heilskjár: hnötturinn fyllir bakgrunninn og listinn liggur ofan á honum —
   neðst fyrir miðju, í síma sem í tölvu (val eigandans 16.9.2026 — listinn fyllti áður vinstri
   kantinn í tölvubreidd). Hausinn flýtur ofan á svo lógó, tungumál og þema hverfi ekki. */
/* Gegnsæ: áran á html-rótinni er bakgrunnur hnattarins (val eigandans 16.9.2026 — varanleg,
   ekki bara á meðan feidið keyrir). Óhætt því striginn hreinsar sig gegnsæjan (clearRect),
   fyllir ekki, og body.picking felur síðuefnið sem annars sæist í gegn. */
.overlay{position:fixed;inset:0;z-index:90;padding:0;background:transparent;
  /* Ósamhverft: hægt inn (2s, skilgreint á .open) en hægar út (.55s hér). Ekki 2s líka, þá sæti
     valda höfnin hulin á bak við feidið í tvær sekúndur.
     .55s en ekki .25s af því ÞETTA er innkoman í flóðatöfluna. Taflan sjálf má ekki feida: hún er
     inni í .wrap ásamt borðanum og núkassanum sem bera backdrop-filter, og forfaðirsfeid slekkur á
     því (sjá #globeCv neðar). Þess vegna birtist hún strax og hnötturinn leysist upp ofan á henni
     í staðinn — sama mýkt, engin snerting við frostglerið. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s linear;}
/* Opnun er SAMSTUNDIS — engin ógegnsæishreyfing á yfirlögninni. Þetta er mælt, ekki smekkur
   (eigandinn 17.9.2026): vafrar sleppa backdrop-filter á meðan forfaðir er að feida og kveikja
   á honum fyrst þegar hreyfingin stöðvast, svo blur-þekjan á spjaldinu skall á í einu höggi í
   lokin — eins í Safari, Chrome og Brave. Með feidið af er hún lifandi alla leiðina.
   Innkoman sjálf er áfram til staðar: hnötturinn snýst og skalast inn á striganum, og spjaldið
   rennur upp neðan frá eftir sekúndu. Lokun heldur .25s feidinu úr grunnreglunni. */
.overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:none;}
.overlay-card{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:3;
  display:flex;flex-direction:column;width:min(440px,calc(100% - 20px));max-height:46vh;
  /* EKKERT eigið feid (17.9.2026). Spjaldið er inni í yfirlögninni og feidar því með henni
     hvort eð er; sitt eigið ógegnsæisferli ofan á það gerði TVÖ hvort inni í öðru, ofan á
     striga sem endurteiknast á hverjum ramma — Chromium svaraði því með flökti fram og til
     baka, Safari með einu höggi. Í staðinn bíður spjaldið alveg fyrir neðan skjábrúnina og
     rennur upp, svo það nái aldrei sínu eigin opacity-1 augnabliki. */
  transform:translate(-50%,calc(100% + 28px));overflow:hidden;
  background:var(--glass);-webkit-backdrop-filter:saturate(160%) blur(20px);backdrop-filter:saturate(160%) blur(20px);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  /* will-change VERÐUR að standa á grunnreglunni en ekki á .open: lagið þarf að vera til
     ÁÐUR en tilfærslan hefst, annars kemur það í sömu stílaendurreikning og hún og er of
     seint á ferðinni. Spjaldið ber backdrop-filter, og nái ógegnsæið nákvæmlega 1 má vafrinn
     annars fella samsetningarlagið niður og skipta um aðferð við beitingu síunnar — það sést
     sem eins ramma högg (eigandinn 17.9.2026). Kostar minni á stóru blurruðu spjaldi, svo
     þetta fer út aftur reynist það ekki vera orsökin. */
  will-change:transform;
  transition:transform .35s ease;}   /* lokun: snöggt og án tafar */
/* Opnun: spjaldið bíður í 1s, rennur svo upp að neðan og feidar inn — lýkur rétt á undan
   yfirlögninni (1,8s á móti 2s). Töfin er HÉR en ekki á grunnreglunni svo hún gildi aðeins
   í opnunarátt; annars sæti spjaldið kyrrt í heila sekúndu áður en það hyrfi við lokun. */
.overlay.open .overlay-card{transform:translate(-50%,0);
  transition:transform .8s cubic-bezier(.22,1,.36,1) 1s;}
@media (min-width:900px){          /* spjaldið neðst en rýmra (hár, breiður gluggi) */
  .overlay-card{width:min(520px,calc(100% - 40px));max-height:min(42vh,460px);}
}
/* Breiður gluggi í landslagi (val eigandans 17.9.2026): spjaldið til vinstri UNDIR lógóinu — það
   var ástæðan fyrir að vinstri hliðin var yfirgefin á sínum tíma, spjaldið fór yfir lógóið — og
   hnötturinn stór hægra megin. Skilyrðið er breidd OG landslag: í háum glugga verður hnötturinn
   stærri með spjaldið neðst, svo hann heldur þeirri uppsetningu. Spjaldið vex niður með glugganum.
   Það rennur inn frá vinstri brún; tilfærslan sjálf (1s töf, .8s) kemur úr reglunum að ofan.
   layout() í bundle.js les hvar spjaldið lenti — breyttu skilyrðinu HÉR, ekki þar. */
@media (min-width:640px) and (min-aspect-ratio:1/1){
  .overlay-card{left:22px;top:calc(68px + env(safe-area-inset-top));bottom:auto;
    width:clamp(340px,36vw,400px);max-height:calc(100% - 90px - env(safe-area-inset-top));
    transform:translateX(calc(-100% - 40px));}
  .overlay.open .overlay-card{transform:translateX(0);}
}
/* Meðan valið stendur opið flýtur hausinn ofan á yfirlögninni (z-index 90). Hann er annars inni í
   .wrap, sem er 580px og miðjuð, svo hann þarf að verða heilbreiður til að lógóið standi í horninu.
   Stöðuhnappurinn víkur: höfnin er ekki valin fyrr en smellt er í listann. */
body.picking .topbar{position:fixed;left:0;right:0;top:0;z-index:95;margin:0;padding:13px var(--gutter) 12px;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;}
/* Hafnavalið er heill skjár — síðan undir á ekki að skrunast með. Það dugar EKKI að setja þetta
   aðeins á body: skrunið situr á rót-elementinu og stikan stóð eftir (mælt: 15px). */
html.picking,body.picking{overflow:hidden;}
/* Fela síðuefnið á meðan valið er opið. ÞETTA var raunveruleg orsök leiftursins 16.9.2026:
   yfirlögnin feidaði inn ofan á sýnilegri flóðatöflu. Með efnið falið má feidið keyra
   óhindrað, og gegnsæ yfirlögn hleypir árunni á html-rótinni í gegn sem bakgrunni hnattarins.
   #mapOverlay er systkini .wrap, ekki barn, svo þetta snertir valið ekki. */
/* Innkoman í töfluna speglar innkomuna í hnöttinn: grunnurinn og borðinn standa, og EFNIÐ feidar
   inn ofan á þá. Feidið liggur á börnum .wrap en aldrei á .wrap sjálfri -- borðinn er þar inni og
   ber backdrop-filter, sem forfaðirsfeid slekkur á (sjá #globeCv). Töfin bíður eftir að hnötturinn
   hverfi, svo grunnurinn sé hreinn þegar efnið byrjar. */
body.picking .wrap>:not(.topbar){visibility:hidden;opacity:0;transition:none;}
.wrap>:not(.topbar){transition:opacity .5s cubic-bezier(.33,1,.68,1) .18s;}
body.picking .locbtn{display:none;}
/* Hnattarhnappurinn í borðanum er leiðin TIL BAKA í kortið. Í kortaham er hann óþarfur -- sami
   hnappur stendur þegar í hnattardálknum hægra megin. */
body.picking #mapBtn{display:none;}
body.picking #langBtn{margin-left:auto;}
.ov-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 0;}

/* ---- hnötturinn í staðavali (leysti Íslandskortið af hólmi 16.9.2026) ---- */
:root,[data-theme="light"]{
  --ocean-hi:#FCFEFD; --ocean-lo:#CFDBD7; --land:#FFFFFF; --land-edge:rgba(18,32,29,.24);
  --grat:rgba(18,32,29,.075); --night:rgba(18,40,48,.20); --atmo:rgba(10,110,102,.20);
  --dot:#0A6E66; --dot-glow:rgba(10,110,102,.26); --halo:rgba(252,254,253,.9);
}
[data-theme="dark"]{
  --ocean-hi:#15302D; --ocean-lo:#040A09; --land:#1E302C; --land-edge:rgba(230,238,234,.17);
  --grat:rgba(230,238,234,.055); --night:rgba(0,4,8,.52); --atmo:rgba(56,200,188,.30);
  --dot:#6FEADF; --dot-glow:rgba(56,200,188,.38); --halo:rgba(7,15,14,.85);
}
#globeCv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;}
/* Feidið liggur á STRIGANUM en ekki á yfirlögninni, og það er ekki smekksatriði heldur mælt
   (Safari og Chrome, 17.9.2026): striginn er SYSTKINI spjaldsins, ekki forfaðir, og
   systkinafeid slekkur ekki á backdrop-filter spjaldsins — ólíkt feidi forföður, sem gerði
   frostglerið ósýnilegt alla innkomuna og lét það skella á í lokin.
   MÁ ALDREI færast aftur upp á .overlay: þá deyr blurið aftur.
   Hægt inn (2s) og hægar út (.55s) svo hnötturinn hverfi í takt við .overlay við lokun. */
#globeCv{opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);}
.overlay.open #globeCv{opacity:1;transition:opacity 2s ease;}
#globeCv.dragging{cursor:grabbing;}
#globeCv.hot{cursor:pointer;}        /* yfir höfn eða landi — bendillinn segir að hér megi smella */
/* Vísbending við bendilinn, eins og í world/globe.html. Fast staðsett og án bendilviðburða svo hún
   skyggi aldrei á smell; z-index 6 er innan yfirlagnarinnar, þ.e. ofan á spjaldinu (3). */
.tip{position:fixed;z-index:6;pointer-events:none;white-space:nowrap;
  padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line);box-shadow:var(--sh-sm);
  background:var(--glass);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  font-size:.82rem;color:var(--ink);transform:translate(12px,-50%);opacity:0;transition:opacity .12s ease;}
.tip.on{opacity:1;}
.tip b{font-weight:700;}
.tip span{color:var(--ink2);}
.globe-zoom{position:absolute;top:calc(66px + env(safe-area-inset-top));right:var(--gutter);z-index:2;
  display:flex;flex-direction:column;gap:6px;}
/* Sama stærð og .icon-btn í borðanum: hnappar sem standa í sömu lóðréttu röð mega ekki vera
   40px uppi og 36px niðri. */
.gz-btn{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--glass);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  color:var(--ink2);display:grid;place-items:center;box-shadow:var(--sh-sm);transition:border-color .15s,color .15s;}
.gz-btn:hover{border-color:var(--line2);color:var(--ink);}
.gz-btn svg{display:block;pointer-events:none;}
.overlay-title{font-weight:700;font-size:1.15rem;letter-spacing:-.02em;}
.ov-search{padding:12px 18px 10px;display:flex;gap:8px;}
/* Hafnarspjald: smellur á punkt á hnettinum sýnir höfnina hér með staðfestingartakka í stað þess
   að skipta um höfn strax, svo óvart-smellur sé afturkræfur. */
.ov-harb{padding:14px 18px 18px;display:flex;flex-direction:column;gap:3px;}
.ov-harb-name{font-weight:700;font-size:1.35rem;letter-spacing:-.02em;}
.ov-harb-sub{color:var(--ink2);font-size:.86rem;font-variant-numeric:tabular-nums;}
.ov-cta{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 16px;border:0;border-radius:var(--r-sm);font:inherit;font-weight:700;font-size:.95rem;
  /* --surface en EKKI --accent-ink: sá fasti er hreimliturinn sem texti á hlutlausum grunni, og
     ofan á fullan hreim mældist hann 1,36:1 í ljósu þema og 1,42:1 í dökku -- textinn hvarf inn í
     hnappinn. Hvítt eitt og sér dugar ekki heldur, því hreimurinn er bjartur túrkís í dökku þema og
     hvítt gæfi 2,07:1. --surface er hvítt í ljósu og nær svart í dökku: 6,11:1 og 8,59:1.
     Sama mynstur og .wstr.peak.spring notar þegar hún situr á hreimgrunni. */
  background:var(--accent);color:var(--surface);box-shadow:var(--sh-sm);transition:filter .15s;}
.ov-cta:hover{filter:brightness(1.06);}
.ov-harb-back{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink2);font:inherit;font-size:.86rem;
  transition:border-color .15s,color .15s;}
.ov-harb-back:hover{border-color:var(--line2);color:var(--ink);}
.loc-search-wrap{position:relative;flex:1;}
.loc-search-wrap input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px 9px 34px;
  font:inherit;font-size:.9rem;color:var(--ink);outline:none;transition:border-color .15s;}
.loc-search-wrap input:focus{border-color:var(--accent);}
/* Í mjóu spjaldi (sími á hlið) klippist leitartextinn — með úrfellingarpunktum í stað þess að
   skerast í miðju orði, á hvaða breidd og tungumáli sem er (enski textinn er lengri). */
#locSearch{text-overflow:ellipsis;}
.loc-search-wrap::before{content:'⌕';position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:1.1rem;pointer-events:none;}
.geo-btn{flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 12px;font:inherit;font-size:.82rem;font-weight:600;color:var(--accent);white-space:nowrap;
  display:flex;align-items:center;gap:5px;box-shadow:var(--sh-sm);transition:border-color .15s,background .15s;}
.geo-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface));}
.geo-btn.loading{color:var(--ink3);}
.ov-body{flex:1;overflow-y:auto;padding:0 10px 14px;}
.loc-sec{margin-bottom:4px;}
.loc-reg-head{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);
  padding:10px 8px 4px;position:sticky;top:0;background:var(--surface);z-index:1;}
.loc-item{display:flex;align-items:center;gap:8px;border-radius:var(--r-sm);padding:9px 10px;cursor:pointer;
  transition:background .12s,box-shadow .12s;border:1px solid transparent;}
.loc-item:hover{background:var(--surface-2);}
/* Fókushringurinn (2px, offset 2px) teiknast 4px út fyrir röðina og lenti undir límda
   flokksheitinu, sem er ógegnsætt og á z-index 1 — efstu 4px hringsins skárust af.
   Lyftum fókusaðri röð yfir heitið. Engin útlitsbreyting á röðum án fókuss. */
.loc-item:focus-visible{position:relative;z-index:2;}
.loc-item.on{background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.loc-fav{flex:0 0 auto;width:28px;height:28px;border:none;background:none;font-size:1rem;color:var(--ink3);
  display:grid;place-items:center;border-radius:var(--r-sm);transition:color .12s,background .12s;}
.loc-fav:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);}
.loc-fav.on{color:var(--accent);}
.loc-item-body{flex:1;min-width:0;display:flex;align-items:center;gap:7px;}
.loc-item-body .loc-name{font-weight:700;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loc-badge{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:2px 5px;flex:0 0 auto;}
.loc-badge.auth{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
.loc-dist{font-size:.76rem;color:var(--ink3);flex:0 0 auto;font-variant-numeric:tabular-nums;}
.loc-empty{padding:24px;text-align:center;color:var(--ink3);font-size:.88rem;}
/* heimsútgáfa: lönd → hafnir */
.ov-back[hidden]{display:none;}
.ov-back{display:inline-flex;align-items:center;gap:4px;margin-right:auto;padding:6px 8px 6px 2px;border:none;background:none;
  color:var(--accent-ink);font:inherit;font-size:.82rem;font-weight:500;cursor:pointer;border-radius:var(--r-sm);}
.ov-back:hover{background:var(--surface-2);}
.ov-back:not([hidden])+.overlay-title{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
button.loc-item{width:100%;font:inherit;color:inherit;text-align:left;background:none;border:1px solid transparent;}
.loc-country .loc-item-body{padding-left:4px;}
.loc-go{flex:0 0 auto;color:var(--ink3);}
.loc-country.sug{border-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.loc-cc{font-size:.76rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Nafn á frummáli staðarins við hlið umritunarinnar: 網走 hjá Abashiri, Πειραιάς hjá Piraievs.
   Örlítið stærra en .loc-cc af því kanji og taílenska verða ólæsileg á .76rem. Ekkert web-letur —
   kerfisstafagerðirnar bera CJK, grísku og arabísku, og síðan verður að virka án nets. */
.loc-native{font-size:.84rem;color:var(--ink3);white-space:nowrap;flex:0 0 auto;}
.ov-harb-native{font-size:1.05rem;color:var(--ink2);margin-top:2px;}
.small-note{margin:10px 0 0;font-size:.8rem;line-height:1.45;color:var(--ink2);}

/* ---- about/footer ---- */
.about{margin-top:8px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm),var(--edge);}
.about>summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);}
.about>summary::-webkit-details-marker{display:none;}
.about>summary::before{content:'+ ';color:var(--accent);}
.about[open]>summary::before{content:'\2212 ';}
.about-body{padding:0 16px 16px;font-size:.84rem;color:var(--ink2);line-height:1.55;}
.about-body p{margin:8px 0;} .about-body b{color:var(--ink);font-weight:700;}
footer{text-align:center;font-size:.72rem;color:var(--ink3);margin-top:24px;letter-spacing:.01em;}
footer a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line);}
footer a:hover{color:var(--ink2);}

:where(button,[tabindex],summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;}
/* Á þröngum skjá er borðinn fullur: lógó + staður + þrír hnappar. Bilin gefa eftir áður en
   staðarnafnið gerir það -- það er aðalsamhengi síðunnar og mátti ekki styttast í „Reykja…“. */
/* Á þröngum skjá minnka hnapparnir í 36px -- BÆÐI breidd og hæð, og bæði í borðanum og í
   hnattardálknum. Fyrri útgáfan setti aðeins breiddina og skildi hæðina eftir á 40, svo EN og
   þemahnappurinn urðu 36x40 ferhyrningar við hlið 40x40 ferninga í dálknum. Eigandinn sá það strax
   á síma. Ein stærð, hvorki meira né minna. */
@media (max-width:430px){
  .topbar{gap:7px;}
  .icon-btn,.gz-btn{width:36px;height:36px;}
}
@media (max-width:380px){.now-time{font-size:2.4rem;}.brand{font-size:1.15rem;}}
/* phones: drop the region so the full harbour name can stand alone (no "Rey… Höfuðborga…"),
   and tighten the button so even the longest name (Borgarfjörður eystri) fits without clipping */
@media (max-width:560px){.loc-region{display:none;}.locbtn{gap:7px;padding:9px 10px;}}
@media (min-width:720px){
  html{overflow-x:clip;}
  :root{--gutter:28px;}
  .wrap{max-width:1060px;padding:0 var(--gutter) 80px;}
  /* Wave spans the full content width across the top (row 1); below it a two-column layout —
     the now-box on the left, the cards + sun/moon + details on the right. The active day is
     centred in the wave with the day before/after peeking into the side gutters.
     height = 600 * 210/360 keeps each day square-true → no egg-shaped dots. */
  .day-view{display:grid;grid-template-columns:320px 1fr;gap:0 8px;}
  .day-view>.wave{
    grid-column:1/-1;grid-row:1;
    height:350px;margin:6px 0 0;
    transform:none;left:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .wave-strip{height:100%;}
  .tcurve.strip-svg{height:100%;width:100%;}
  .now-time{font-size:3.5rem;}
  /* Yfir 1060px fylgir borðinn efnisdálknum svo lógóið standi yfir efninu. Það á EKKI við í
     kortaham, þar sem hnötturinn fyllir skjáinn og ekkert efni er til að jafna við -- þess vegna
     heldur hann --gutter þar. Undir 1060px eru hamirnir tveir nákvæmlega eins. */
  body:not(.picking) .topbar{
    padding-left:calc(var(--gutter) + max(0px,(100vw - 1060px)/2));
    padding-right:calc(var(--gutter) + max(0px,(100vw - 1060px)/2));
    margin-left:calc(-1 * var(--gutter) - max(0px,(100vw - 1060px)/2));
    margin-right:calc(-1 * var(--gutter) - max(0px,(100vw - 1060px)/2));}
  .day-view>.now{grid-column:1;grid-row:2;margin:22px 0 0;}
  .day-view>.day-sub{
    grid-column:2;grid-row:2;margin:22px 0 0;
    display:flex;flex-direction:column;gap:8px;
  }
  .day-sub .evrow,.day-sub .facts,.day-sub .more{margin-bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
  .scrub:not(.on) .scrub-dot{animation:none;}
  .brand,.brand .dot,.now-time,.now-h{animation:none;}
  .fact:hover{transform:none;}
  html{scroll-behavior:auto!important;}}
/* ---- hafnarhlutinn (áfangi 3, 30.9.2026) ---- sama útlit og sýnishornið á Tókýó sem eigandinn samþykkti:
   spjöld eins og .fact, merkimiðar eins og .fact-k, og vikuraðirnar úr Vika-flipanum óbreyttar. */
.hinfo{display:grid;gap:8px;margin:8px 0 0;}
.hinfo:empty{display:none;}
.hi-card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm),var(--edge);padding:18px 20px;}
.hi-crumb{font-size:.78rem;color:var(--ink3);margin-bottom:10px;}
.hi-crumb a{color:var(--ink2);text-decoration:none;}
.hi-h1{font-size:1.55rem;letter-spacing:-.02em;margin:0;line-height:1.2;font-weight:700;}
.hi-h1 span{font-weight:400;color:var(--ink3);font-size:1.1rem;margin-left:6px;}
.hi-lead{color:var(--ink2);font-size:.97rem;line-height:1.6;margin:10px 0 0;max-width:62em;}
.hi-lead b{color:var(--ink);font-weight:700;}
.hi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:8px;}
.hi-k{margin:0 0 10px;font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);font-weight:700;}
.hi-facts{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0;font-size:.9rem;}
.hi-facts dt{color:var(--ink3);}
.hi-facts dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;}
/* Í Vika- og Mánuður-flipunum er vikan þegar fyrir ofan, svo spjaldið er falið þar og "Um höfnina"
   tekur alla breiddina (data-view er sett í renderHarbourInfo). */
.hinfo[data-view="week"] .hi-week,.hinfo[data-view="month"] .hi-week{display:none;}
.hinfo[data-view="week"] .hi-grid,.hinfo[data-view="month"] .hi-grid{grid-template-columns:1fr;}
.hi-chips{display:flex;flex-wrap:wrap;gap:8px;}
.hi-chip{display:inline-block;padding:6px 13px;border:1px solid var(--line);border-radius:20px;color:var(--ink);
  font-size:.88rem;background:var(--surface-2);text-decoration:none;transition:border-color .15s;}
.hi-chip:hover{border-color:var(--accent);}
.hi-links{margin:14px 0 0;font-size:.9rem;display:flex;gap:18px;flex-wrap:wrap;}
.hi-links a{color:var(--accent);text-decoration:none;}
/* Sími: allt í einum dálki, og vikan fær alla breiddina í stað spjalds inni í spjaldi (raðirnar voru of
   þröngar í sýnishorninu). */
@media (max-width:720px){
  .hi-grid{grid-template-columns:1fr;}
  .hi-week{background:none;border:0;box-shadow:none;padding:6px 0 0;}
  .hi-week .hi-k{margin-bottom:2px;}
  .hi-facts{grid-template-columns:1fr;gap:0;}
  .hi-facts dd{margin:0 0 9px;}
}