/* morse.is — the ground every page stands on: colours, faces, the wordmark
   and the header. A page in the new look loads this and ui/morse.css; an
   older page loads this, its own stylesheet, and ui/sidur.css, which maps
   its colours onto these. Nothing here styles a bare element, so it can sit
   beside any page's own rules. After the ElÝsa brand book ("Reykjanes").

   Text is pure black on light and pure white on dark: never grey, never a
   colour. Hierarchy comes from size and weight. Colour is for marks — lines,
   bars, the dashes in the wordmark — and Ljós (amber) is used sparingly, for
   what should stand out: the newest point, the chosen item, the main button.

   Chart marks were checked for contrast against the card: Kísill itself is
   too light for bars on white (1.9:1), so light mode draws with a deeper
   step of it; Ljós is only ever a marked point with its value beside it. */

:root {
  color-scheme: light;
  --text: #000000;
  --text-inv: #FFFFFF;
  --bg: #F2F5F4;            /* Snjór */
  --surface: #FFFFFF;
  --ink: #15202B;           /* Basalt */
  --head: #15202B;          /* the header band */
  --line: #D5DEDD;
  --grid: #E4EAE9;
  --ljos: #E8A317;
  --ljos-soft: #FBEBC6;
  --kisill: #8FC7C3;
  --kisill-soft: #DDEFEC;
  --mosi: #5B6E4C;
  /* chart marks */
  --mark-price: #15202B;
  --mark-volume: #3F8F89;
  --mark-accent: #E8A317;
  --track: #DDEFEC;

  --display: "Michroma", "Figtree", system-ui, sans-serif;   /* headings: the wordmark's face */
  --body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --radius: 10px;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text: #FFFFFF; --text-inv: #000000;
    --bg: #0F151C; --surface: #17212B; --ink: #E6EDEB; --head: #0A0F14;
    --line: #27333E; --grid: #22303B;
    --ljos: #F2B33D; --ljos-soft: #3A2D10; --kisill-soft: #1C3336; --mosi: #8FA37D;
    --mark-price: #E6EDEB; --mark-volume: #8FC7C3; --mark-accent: #F2B33D; --track: #1C3336;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --text: #FFFFFF; --text-inv: #000000;
  --bg: #0F151C; --surface: #17212B; --ink: #E6EDEB; --head: #0A0F14;
  --line: #27333E; --grid: #22303B;
  --ljos: #F2B33D; --ljos-soft: #3A2D10; --kisill-soft: #1C3336; --mosi: #8FA37D;
  --mark-price: #E6EDEB; --mark-volume: #8FC7C3; --mark-accent: #F2B33D; --track: #1C3336;
}

/* ---------------------------------------------------------- wordmark ----
   MORSE.IS in Michroma, wide and sharp. Under the M, two dashes in Ljós:
   – – is M in morse. The full stop is a square of the same colour. These
   are the mark's only ornaments, and the logo is the one place colour may
   touch the letters.

   <a class="wm"><span class="mm">M<b></b><b></b></span>ORSE<i></i>IS</a>
   The bottom padding keeps the dashes inside the mark's own box. */
.wm {
  font-family: "Michroma", var(--body); font-weight: 400; letter-spacing: .02em; line-height: 1;
  white-space: nowrap; display: inline-flex; align-items: baseline; padding-bottom: .34em; text-decoration: none;
}
.wm .mm { position: relative; display: inline-block; }
.wm .mm b { position: absolute; left: .02em; bottom: -.26em; height: .08em; width: .36em; background: var(--ljos); }
.wm .mm b + b { left: .5em; }
.wm i { display: inline-block; width: .15em; height: .15em; background: var(--ljos); margin: 0 .1em; }

/* ------------------------------------------------------------ header ---- */
.site-head { background: var(--head); color: #FFFFFF; }
.site-head .bar { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); box-sizing: border-box; display: flex; align-items: center; gap: 12px 28px; min-height: 60px; flex-wrap: wrap; }
.site-head .wm { font-size: 1.3rem; color: #FFFFFF; padding-top: .34em; }
.site-head nav { margin: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.site-head nav::-webkit-scrollbar { display: none; }
.site-head nav > a, .site-head nav > span {
  position: relative; padding: 18px 10px 17px; font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; color: #FFFFFF;
}
.site-head nav > a:hover { text-decoration: underline; }
.site-head nav > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ljos);
}
.site-head nav > span { cursor: default; }
.soon { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 99px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; font-weight: 500; }
.site-head .who { display: flex; align-items: center; gap: 12px; font-size: .9rem; margin-left: auto; }
.site-head .who button { background: none; border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; padding: 4px 12px; cursor: pointer; color: #FFFFFF; }
.site-head .who button:hover { border-color: #FFFFFF; }
/* Narrower than the whole row: wordmark and name on top, the parts below,
   scrolling sideways inside the header if they must — never the page. */
@media (max-width: 1080px) {
  .site-head .bar { padding-top: 12px; }
  .site-head nav { order: 3; flex-basis: 100%; margin-inline: calc(-1 * var(--gutter)); padding-inline: 6px; }
  .site-head nav > a, .site-head nav > span { padding: 8px 10px 12px; }
}
/* An older page's own rules for bare elements must not reach into the header */
.site-head, .site-head * { box-sizing: border-box; }
.site-head { font: 16px/1.55 var(--body); margin: 0; }
.site-head a { color: #FFFFFF; }
.site-head nav { border: 0; background: none; }
.site-head button { font: inherit; }
.tip[hidden] { display: none; }

/* ---------------------------------------------------------- tooltip ---- */
.tip { position: fixed; z-index: 10; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
       padding: 8px 10px; font-size: .8rem; line-height: 1.4; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); pointer-events: none; }
.tip strong { display: block; font-weight: 700; }