/* ============================================================
   Klukkan — shared core styles (conservative)
   ------------------------------------------------------------
   Design tokens, page chrome (header/nav), the button family, and the
   SVG clock primitives that are identical across apps. App-specific
   layout (clock-area grids, config strips, quiz slots, dial animations)
   stays in each app's own <style>.

   Fonts are loaded by each page's <head> (Fraunces / Spline Sans /
   JetBrains Mono).
   ============================================================ */

:root {
  --paper: #fff; /*#f3ecdd;*/
  --paper-2: #eee; /* #ebe3d2; */
  --ink: #1a2238;
  --ink-soft: #4a526b;
  --line: #c8bea7;
  --gold: #c89846;
  --ok: #4a7d3a;
  --err: #b14a3a;
  /*--shadow: 0 1px 2px rgba(26,34,56,.06), 0 8px 24px rgba(26,34,56,.08);*/

  /* Past / to (yfir / í) arc colours — blue clockwise / red counter-clockwise.
     Canonical names are --past / --to; --past-hour / --next-hour are kept as
     aliases so inngangur's existing rules (which use the *-hour names) work
     unchanged. To switch to the warm coral/teal scheme, change the two values
     here; both naming schemes will follow. */
  --past: #2f5fa3;
  --to:   #c43d2f;
  --past-hour: var(--past);
  --next-hour: var(--to);
  --past-soft: #d4e1f0;
  --next-soft: #f6dcd6;
  /* Opaque arc fills — the visual equivalent of --past / --to drawn at 75%
     over the clock face, baked solid. Used so an arc and its round end-cap can
     overlap without the semi-transparent double-darkening artifact. Bump these
     toward the brighter raw --past/--to for a more vivid look if desired. */
  --arc-past: #6285b4;
  --arc-to:   #d26b5e;
  /* Alternate warm scheme, kept for easy switching:
     --past: #d9633c;  --to: #2d8a88; */
  --coral: #d97757;
  --teal:  #4d8a82;

  --watch-face: #fbf9f6;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Spline Sans', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(216,200,160,.18), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(216,200,160,.16), transparent 45%);
  min-height: 100vh;
  padding: 32px 20px 64px;
}

/* Page chrome — title + family nav. The exact h1 size and .sub spacing differ
   per app and stay inline; the nav itself is shared. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.site-nav {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  font-family: 'Fraunces', serif;
 /* font-style: italic;*/
  font-size: 1rem;
  margin-bottom: 1em;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: .25rem .6rem;
  border-radius: 999px;
  transition: all .15s;
}
.site-nav a:hover { background: var(--paper-2); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.site-nav .sep { color: var(--line); }
/* Home link sits slightly apart from the four-app group. */
.site-nav a.nav-home { color: var(--ink-soft); }
.site-nav a.nav-home:hover { color: var(--ink); }

/* Shared structure */
.wrap {
    max-width: 1080px;
    margin: 0 auto;
  }
  .sub {
    color: var(--ink-soft);
    margin: 0 0 2rem;
    font-size: .95rem;
  }

/* Headers */
 h1 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3rem);
 /*   font-style: italic; */
    margin: 0 0 .25rem;
    letter-spacing: -.01em;
  }

/* Button family. Base padding 10px 18px; inngangur widens to 10px 20px inline
   where it wants roomier nav buttons. */
button.action {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all .15s;
}
button.action:hover { background: var(--ink-soft); }
button.action.alt {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
button.action.alt:hover { background: var(--paper-2); }
button.action.primary { background: var(--gold); color: var(--paper); }
button.action.primary:hover { background: #b4842f; }

/* ------------------------------------------------------------
   Shared SVG clock primitives (identical across apps).
   ------------------------------------------------------------ */
/*.face { fill: #fbf6e9; stroke: var(--ink); stroke-width: 2; }*/
.face { fill: var(--watch-face); stroke: var(--ink); stroke-width: 2; }
.tick { stroke: var(--ink); }
.tick-major { stroke: var(--ink); stroke-width: 2.5; }
.tick-minor { stroke: var(--ink); stroke-width: 1; opacity: .5; }

.hour-num {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 22px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
}
/* Hour marker ("merkja klukkustund" / tutorial hour highlight): a soft-tint
   chip behind the hour number plus a bold, coloured digit. Shared by all apps;
   .passed = the hour you read FROM before the half hour (blue), .next = the
   hour you read TO after it (red). The chip is a <circle class="num-highlight">
   sitting under the number; the digit gets .passed/.next on the <text>. */
.num-highlight {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  transition: all .3s ease;
  pointer-events: none;
}
.num-highlight.passed { fill: var(--past-soft); stroke: var(--past-hour); }
.num-highlight.next   { fill: var(--next-soft); stroke: var(--next-hour); }
.hour-num.passed { fill: var(--past-hour); font-weight: 700; }
.hour-num.next   { fill: var(--next-hour); font-weight: 700; }
.min-num {
  font-family: 'Spline Sans', sans-serif;
  fill: var(--ink-soft);
  text-anchor: middle;
  dominant-baseline: central;
}

.hand {
  stroke-linecap: round;
  transition: filter .15s;
  pointer-events: none;   /* clicks go to the wide transparent hitbox below */
}
.hand-hour { stroke: var(--ink); stroke-width: 8; }
.hand-minute { stroke: var(--ink); stroke-width: 4; }
.hand-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 40;
  stroke-linecap: round;
  cursor: grab;
}
.hand-hitbox:active, .hand-hitbox.dragging { cursor: grabbing; }
.hand-hitbox.dragging + .hand { filter: brightness(.7); }
.center-dot { fill: var(--ink); }

/* ------------------------------------------------------------
   Answer feedback (shared by the practice action-bar and the streak bar):
   a whole-bar shake on a wrong answer, and a triple-gold "ta-ta-da" flash
   on a correct one. Applied by toggling .fb-shake / .fb-correct on the bar.
   ------------------------------------------------------------ */
@keyframes klukkan-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@keyframes klukkan-flash-gold3 {
  0%   { background: var(--paper-2); }
  8%   { background: #f0d99a; }
  16%  { background: var(--paper-2); }
  28%  { background: #f0d99a; }
  36%  { background: var(--paper-2); }
  48%  { background: #eccd7e; }
  62%  { background: var(--paper-2); }
  100% { background: var(--paper-2); }
}
.fb-shake { animation: klukkan-shake .4s ease; }
.fb-correct { animation: klukkan-flash-gold3 .9s ease; }

/* ------------------------------------------------------------
   Word-picker — the structured spoken-form input for the "→ veldu orð"
   (a2l / d2l) directions. Built by Klukkan.makePicker() into a host with a
   #picker-shapes (radio shape selector) and #picker-sentence (the sentence
   with inline slot-machine wheels). The host card's own placement (grid-area
   etc.) stays in each app; everything here is shared chrome.
   ------------------------------------------------------------ */
.picker-shapes {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--paper);
  border-radius: 10px;
  padding: 3px;
  border: 1px solid var(--line);
  align-self: start;
}
.picker-shapes label {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 8px;
  font-size: .9rem;
  color: var(--ink-soft);
  transition: all .15s;
  white-space: nowrap;
}
.picker-shapes input { display: none; }
.picker-shapes input:checked + span {
  display: block;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 12px;
  border-radius: 8px;
  margin: -6px -12px;
}
.picker-sentence {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 1.3rem;
  /*background: #fbf6e9; border-radius: 12px; border-left: 4px solid var(--gold);*/
  background: var(--watch-face); border-radius: 12px; border-left: 4px solid var(--gold);
  padding: .9rem 1rem; min-height: 3.4rem;
}
.picker-sentence .ph { color: var(--ink-soft); opacity: .55; }
.picker-sentence .fixed { white-space: nowrap; }
/* No-break group: the opening clause stays glued to the M wheel; the only
   break point is before the relation word + hour. */
.picker-sentence .pgroup {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
}
/* slot-machine wheel */
.pwheel { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; vertical-align: middle; }
.pwheel button {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  height: 22px; width: 100%; cursor: pointer; color: var(--ink-soft); font-size: .8rem;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.pwheel button:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.pwheel .window {
  display: flex; flex-direction: column; align-items: center; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: .15rem .6rem; overflow: hidden;
}
.pwheel .peek { font-size: .78rem; color: var(--ink-soft); opacity: .5; font-style: normal;
  font-family: 'Spline Sans', sans-serif; height: 1.1em; white-space: nowrap; }
.pwheel .cur { font-size: 1.05rem; font-style: italic; color: var(--ink); height: 1.5em;
  display: flex; align-items: center; white-space: nowrap; }
.pwheel.wheel-H .window { min-width: 4.5em; }
.pwheel.wheel-M .window { min-width: 8em; }