/* ---------------------------------------------------------------------------
   Verðið á krónunni
   Base layer is the design's own <style> block, unchanged. Everything below
   the BASE marker is additive and scoped to narrow viewports, so the design
   renders byte-for-byte as authored at its native widths.
   --------------------------------------------------------------------------- */

/* ---- BASE (from the design) ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#ffffff;color:#0a2540;font-family:'Hanken Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p{margin:0}
a{color:#b07e10;text-decoration:none}
a:hover{color:#0a2540}
::selection{background:#f3c13a;color:#0a2540}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:left}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid #b07e10;outline-offset:2px}
svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes phraseA{from{opacity:0;transform:translateY(.14em)}to{opacity:1;transform:none}}
@keyframes phraseB{from{opacity:0;transform:translateY(.14em)}to{opacity:1;transform:none}}

/* ---- ADDITIONS ---- */

/* The page is a single horizontal column; nothing may push past the viewport.
   Individual wide things (ledger, nav) scroll inside their own box instead. */
html,body{max-width:100%;overflow-x:clip}

/* Long Icelandic compounds ("samgönguáætlun", "tryggingafræðilegu") overflow
   narrow columns; allow them to break rather than widen the page. */
@media (max-width:640px){
  h1,h2{hyphens:auto;-webkit-hyphens:auto}
}

/* The display figures are glued with non-breaking spaces on purpose — a sum
   must never wrap mid-number — so on a phone they can only be made to fit by
   getting smaller. "16.190 milljarðar kr." is 21 characters; these floors are
   set from that worst case (ISK is the longest of the three currencies) and
   the clamp maxima keep every viewport at or above 640px untouched. */
@media (max-width:640px){
  .num-hero{font-size:clamp(22px,7.2vw,42px) !important}
  .num-fund{font-size:clamp(24px,7.8vw,46px) !important}
  .num-cta {font-size:clamp(20px,6.8vw,30px) !important}
}

/* Both rules below are scoped to coarse pointers so a mouse still gets the
   design's own controls — the native range with accent-color, and the 14px
   select. Neither problem they solve exists with a cursor. */
@media (pointer:coarse){
  /* iOS zooms the page in when a focused control's text is under 16px. */
  select{font-size:16px !important}

  /* The native range thumb is around a 14px hit target; 22px with a padded
     control clears the ~44px minimum once the invisible track height counts. */
  input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:34px;margin:0;cursor:pointer;touch-action:pan-y}
  input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:rgba(255,255,255,.28)}
  input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:rgba(255,255,255,.28)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8.5px;border-radius:50%;background:#e7a81b;border:2px solid #0a2540;box-shadow:0 1px 3px rgba(0,0,0,.35)}
  input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#e7a81b;border:2px solid #0a2540;box-shadow:0 1px 3px rgba(0,0,0,.35)}
  input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid #ffffff;outline-offset:2px}
  input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid #ffffff;outline-offset:2px}
}

/* The page's grids are all repeat(auto-fit, minmax(Npx, 1fr)), with N as high
   as 330. A minmax floor cannot shrink below N, so on a 320px screen those
   tracks are wider than the section holding them and the cards push out past
   its padding. Below 420px every one of these grids is single-column anyway,
   so collapsing the track to 1fr changes only the overflow. */
@media (max-width:420px){
  [style*="repeat(auto-fit"]{grid-template-columns:1fr !important}
}

/* Header nav — six links will not sit on one line on a phone. Rather than
   wrapping into a four-line block, it becomes a single swipeable row. */
@media (max-width:820px){
  .site-nav{
    flex:1 1 100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;
    /* Fading the trailing edge is the only cue that the row keeps going. */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap;flex:0 0 auto}
}

/* The ledger is a genuine 8-column table; it scrolls rather than reflows.
   The inset shadow on the right edge is the only cue that it does. */
.ledger-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (max-width:900px){
  .ledger-scroll{
    background:
      linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/40px 100% no-repeat,
      linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(10,37,64,.16),transparent) left center/14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(10,37,64,.16),transparent) right center/14px 100% no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
  .ledger-scroll table{min-width:660px !important}
}

/* Touch tooltip: pinned above the touch point, allowed to wrap. The chart
   tooltips are nowrap by design, which is right for a cursor and wrong for a
   360px screen. */
@media (hover:none){
  .dc-tip{white-space:normal !important;max-width:min(78vw,300px) !important}
}

/* Charts own horizontal drags (a finger scrubs the series) but must not swallow
   vertical ones — pan-y leaves page scrolling to the browser. */
.dc-chart svg{-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.dc-chart .hit,.dc-chart .hitbar,.dc-chart .hitA{cursor:crosshair}

/* Print: charts and the ledger are the substance; the fixed tooltip is not. */
@media print{
  .dc-tip{display:none !important}
  body{background:#fff}
}