/* Bleyjuáskrift
   ------------------------------------------------------------------
   The visual language borrows from the leikskóli lobby: chalky walls,
   laminated notices, and above all the merkimiði — the little name label on
   a child's cubby. That label is the signature element. The product replaces
   "your own labelled pack" with a shared shelf, so the name stays; only the
   pack goes away.

   Colour: petrol for anything you can act on, highlighter yellow only where
   a name or a chosen size needs marking. Never both in the same element.
*/



/* Self-hosted, not linked from Google's CDN. Hotlinking would send every
   parent's IP address to a third party on every page load, which is a
   processor this service would then have to name in docs/data_protection.md.
   Both families are OFL-licensed, so the files simply live here.

   Two subsets each: every Icelandic letter -- þ ð æ ö and the accents -- sits
   inside latin, but Polish needs latin-ext for ą ć ę ł ń ś ź ż. The
   unicode-range on each face is what stops a reader of one language
   downloading the other's alphabet.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/InstrumentSans-500-latin-265d6ea6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/InstrumentSans-500-latin-ext-83c16217.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/InstrumentSans-600-latin-265d6ea6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/InstrumentSans-600-latin-ext-83c16217.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/InstrumentSans-700-latin-265d6ea6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/InstrumentSans-700-latin-ext-83c16217.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/JetBrainsMono-600-latin-b9e0bab0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/JetBrainsMono-600-latin-ext-6af87c3b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --focus-ring: var(--petrol);
  --paper: #ecefee;
  --paper-deep: #e2e7e4;
  --card: #ffffff;
  --ink: #0e2a27;
  --ink-2: #3d4a48;
  --ink-3: #6b7876;
  --ink-4: #8a9694;
  --line: #e1e5e4;
  --line-strong: #d5dbd9;
  --petrol: #0b5c56;
  --petrol-dark: #08433f;
  --petrol-wash: #e4efee;
  /* On the petrol ground: eyebrows and meta in the paler tint, body copy in
     the warmer one. Both are readable on #0b5c56; neither is on white. */
  --petrol-tint: #9fd9d1;
  --petrol-body: #d7ebe8;
  --marker: #f6d64a;
  --marker-dark: #e9c93a;
  --brick: #a8352a;
  --brick-wash: #f8e9e7;
  --moss: #1c6f46;
  --moss-wash: #e6f1eb;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow: 0 1px 2px rgba(14, 42, 39, .06), 0 8px 24px -12px rgba(14, 42, 39, .18);

  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none at class-level specificity, so any
   of our own class rules that set display -- .btn, .row, .merkimidi -- quietly
   beat it and an element hidden from JavaScript stays on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography ------------------------------------------------------- */

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.022em; line-height: 1.15; }
h1 { font-size: 2rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--petrol); text-underline-offset: 3px; }

.eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .4rem;
}
/* The same label on the petrol ground, where --ink-3 is unreadable. */
.eyebrow--tint { color: var(--petrol-tint); }

.lede { font-size: 1.08rem; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* The highlighter swipe. Used on a child's name and nowhere else. */
.name-mark {
  background-image: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 94%, transparent 94%);
  padding: 0 .12em;
}

/* --- Layout ----------------------------------------------------------- */

.wrap { width: min(100% - 2rem, 44rem); margin-inline: auto; }
.wrap--wide { width: min(100% - 2rem, 71.5rem); }
/* A sign-in box, an invitation, a checkout: one short form and nothing else
   on the page. Centred, because a small card pinned to the left of a wide
   empty column reads as a layout that has gone wrong. */
.narrow { width: min(100%, 26rem); margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grow { flex: 1; }
main { padding: 1.5rem 0 4rem; }

/* --- Header ----------------------------------------------------------- */

.masthead {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 0; flex-wrap: wrap;
}
.brand {
  font-weight: 800; letter-spacing: -.03em; font-size: 1.05rem;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.brand__mark {
  width: 1.4rem; height: 1.4rem; border-radius: 5px;
  background: var(--petrol);
  position: relative; flex: none;
}
.brand__mark::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 9px; height: 3px;
  background: var(--marker); border-radius: 2px;
}
/* Nav colours come from tokens rather than the ink scale directly, because
   this same nav is rendered on a dark bar in the admin area. Hard-coding
   --ink here made hovered links black-on-black. */
.masthead { --nav-link: var(--ink-2); --nav-link-hover: var(--ink); --nav-rule: var(--line); }
.navlinks { display: flex; gap: 1rem; align-items: center; font-size: .9rem; }
.navlinks a { color: var(--nav-link); text-decoration: none; }
.navlinks a:hover, .navlinks a[aria-current] { color: var(--nav-link-hover); text-decoration: underline; }

/* The right-hand end of the bar: languages, then the nav, then whatever the
   nav ends with. One flex group rather than two children of space-between,
   which is what put the nav in the middle of the bar. */
.masthead__end { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.masthead__doors { display: flex; align-items: center; gap: .5rem; }
.masthead__end .langs + .navlinks {
  border-left: 1px solid var(--nav-rule); padding-left: 1.1rem;
}

/* Language choice sits with the masthead, not in the page: it applies to
   every page, and a reader who cannot read the page needs to find it fast. */
.langs { display: flex; gap: .55rem; align-items: center; font-size: .82rem; }
.langs a { color: var(--nav-link); text-decoration: none; opacity: .75; }
.langs a:hover { opacity: 1; text-decoration: underline; }
.langs a.is-current { opacity: 1; font-weight: 700; text-decoration: underline; }

/* --- Cards and panels ------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.card--flush { padding: 0; overflow: hidden; }
.card__head {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap;
}
.card__body { padding: 1.25rem; }
/* Two blocks in one card are two different things, so they get a line. */
.card__body + .card__body { border-top: 1px solid var(--line); }

.section-number {
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--petrol); background: var(--petrol-wash);
  border-radius: 999px; width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}

/* The merkimiði: one child, one name, one size. The unit of the portal list
   and the last thing a parent sees at signup. */
.merkimidi {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--petrol);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.merkimidi__name { font-weight: 700; font-size: 1.05rem; }
.merkimidi__meta { color: var(--ink-2); font-size: .85rem; }
.merkimidi--hero {
  border-left-width: 6px; padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
}
.merkimidi--hero .merkimidi__name { font-size: 1.6rem; letter-spacing: -.02em; }

.size-chip {
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  background: var(--paper-deep); border-radius: 8px;
  padding: .3rem .6rem; flex: none;
}

/* --- Status ----------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--paper-deep); color: var(--ink-2);
}
.pill--active { background: var(--moss-wash); color: var(--moss); }
.pill--paused { background: #fdf1d8; color: #8a5b00; }
.pill--pending { background: var(--petrol-wash); color: var(--petrol); }
.pill--cancelled { background: var(--paper-deep); color: var(--ink-3); }
.pill--inactive { background: var(--paper-deep); color: var(--ink-3); }
/* An order's life: saved, gone to the warehouse, picked, moving, arrived. */
.pill--scheduled { background: var(--petrol-wash); color: var(--petrol); }
.pill--ordered { background: #fdf1d8; color: #8a5b00; }
.pill--fulfilled { background: #fdf1d8; color: #8a5b00; }
.pill--dispatched { background: var(--petrol-wash); color: var(--petrol); }
.pill--delivered { background: var(--moss-wash); color: var(--moss); }
.pill--failed { background: var(--brick-wash); color: var(--brick); }

/* --- Forms ------------------------------------------------------------ */

/* A column, so the hint and any error can be ordered under the control while
   the markup keeps saying label, hint, input -- which is the order a screen
   reader should hear them in. Visually the hint belongs under the field: put
   it between the label and the box and it pushes the box down, so two fields
   side by side stop lining up, which is exactly what it did to Sími and
   Fjöldi barna on the enquiry form. */
.field { display: flex; flex-direction: column; margin-bottom: 1rem; }
.field:last-child { margin-bottom: 0; }
/* The label that names an input, above it. A checkbox row is the other
   shape -- the control first, its sentence beside it -- so it is excluded
   here rather than fighting this rule on specificity: `.field > label` is
   (0,1,1) and `.check` is (0,1,0), which quietly turned the row back into a
   block and left the text sitting on top of the box. */
.field > label:not(.check), .label {
  display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem;
}
.hint { order: 2; font-size: .82rem; color: var(--ink-2); margin: .35rem 0 0; }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .75rem;
  min-height: 48px; /* thumb-sized, for a phone held in one hand */
}
/* Without resetting the appearance the browser paints its own control on
   top of ours: a lighter border and a different height beside the number
   fields it sits next to. The chevron is inline SVG so it needs no asset. */
select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234e6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: .7rem;
  cursor: pointer;
}
select::-ms-expand { display: none; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
input::placeholder { color: var(--ink-3); }
input[inputmode=numeric] { font-family: var(--mono); }

.field--error input, .field--error select { border-color: var(--brick); background: var(--brick-wash); }
/* The honeypot on the enquiry form. It had no rule at all, so it has been on
   screen the whole time -- a labelled box saying "leave this empty" that a
   conscientious manager would dutifully fill, and a filled honeypot makes the
   controller return a thank-you and throw the enquiry away. Silently losing
   the customers who read forms carefully is an expensive way to stop bots.

   Off-screen rather than display:none: the crawlers worth stopping skip
   hidden inputs, and this has to look real to them. aria-hidden and
   tabindex=-1 on the markup keep it away from anyone using a screen reader
   or a keyboard. */
.trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}

.error-text { order: 3; color: var(--brick); font-size: .84rem; margin-top: .3rem; display: block; }

/* Two fields or three, whatever the row holds, collapsing on a narrow
   screen. Fixed at two columns it left a hole wherever a field was removed. */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }

/* A long form reads as groups, not as a column of boxes. */
.form-section { display: flex; flex-direction: column; gap: .75rem; }
.form-section + .form-section { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.form-section__title {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* A checkbox and the sentence it agrees to. The box is aligned to the first
   line rather than to the centre of a sentence that may wrap to three. */
.check {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .95rem; font-weight: 400; line-height: 1.5; cursor: pointer;
}
.check input {
  width: 1.35rem; height: 1.35rem; flex: none; accent-color: var(--petrol);
  /* Half the difference between the first line's box and the control's, so
     the two read as centred on each other. */
  margin: calc((1.5em - 1.35rem) / 2) 0 0;
}
.check span { min-width: 0; }

/* Size picker: the one choice a parent might get wrong, so it is the
   largest control on the page and states the weight range on the tile. */
.size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; }
.size-tile { position: relative; }
.size-tile input { position: absolute; opacity: 0; pointer-events: none; }
.size-tile label {
  display: block; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: .85rem .9rem; min-height: 5.2rem;
  transition: border-color .12s ease, background .12s ease;
}
.size-tile label:hover { border-color: var(--ink-3); }
.size-tile__size { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.size-tile__range { font-size: .85rem; color: var(--ink-2); }
.size-tile input:checked + label {
  border-color: var(--petrol); border-width: 2px; padding: calc(.85rem - .5px) calc(.9rem - .5px);
  background: var(--petrol-wash);
}
.size-tile input:checked + label .size-tile__size {
  background-image: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 96%, transparent 96%);
}
.size-tile input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.child-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.child-row input { flex: 1; }

/* --- Shipment line editor --------------------------------------------- */

.line-row {
  display: grid; grid-template-columns: 1fr auto 7rem; gap: 1rem;
  align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.line-row:first-of-type { padding-top: 0; }
.line-row__input input { width: 6.5rem; }
.line-row__input .label { margin-bottom: .2rem; font-size: .8rem; color: var(--ink-2); }
.line-row__units { text-align: right; color: var(--ink-2); font-size: .9rem; }
.line-total { border-top: 2px solid var(--ink); padding-top: .85rem; }

@media (max-width: 560px) {
  .line-row { grid-template-columns: 1fr auto; row-gap: .4rem; }
  .line-row__units { grid-column: 1 / -1; text-align: left; }
}

/* --- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 650;
  background: var(--petrol); color: #fff;
  border: 1.5px solid var(--petrol); border-radius: var(--radius);
  padding: .7rem 1.1rem; min-height: 48px;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--petrol-dark); border-color: var(--petrol-dark); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--petrol); }
.btn--ghost:hover { background: var(--petrol-wash); }
.btn--quiet {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
.btn--quiet:hover { background: var(--paper-deep); border-color: var(--ink-3); }
.btn--danger { background: transparent; color: var(--brick); border-color: var(--brick); }
.btn--danger:hover { background: var(--brick-wash); }
.btn--small { min-height: 38px; padding: .35rem .7rem; font-size: .88rem; }
/* The header pair: small enough not to compete with the masthead, big enough
   to be the two doors they are. */
.btn--tiny { min-height: 34px; padding: .5rem .875rem; font-size: .875rem; border-radius: 8px; font-weight: 650; }

/* The one yellow button in the application. Highlighter is for marking a name
   or a chosen size, and the front page's single loudest action is close
   enough to that -- but it earns its keep by being the only one, so do not
   reach for it on an interior screen. */
.btn--marker { background: var(--marker); color: var(--ink); border-color: var(--marker); }
.btn--marker:hover { background: var(--marker-dark); border-color: var(--marker-dark); }

/* On the petrol ground, where a petrol button would disappear. */
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn--on-dark:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }

/* On paper, beside a solid one: the second of two equal choices. */
.btn--outline { background: var(--card); color: var(--petrol); border-color: var(--petrol); }
.btn--outline:hover { background: var(--petrol-wash); }

/* A link that does a button's job without a button's weight. */
.textlink { font-size: .9375rem; font-weight: 650; color: var(--petrol); text-decoration: none; }
.textlink:hover { color: var(--petrol-dark); text-decoration: underline; }

/* --- Sticky commit bar ------------------------------------------------ */

/* The bar floats over whatever is above it, so anything scrolled into view
   has to clear it. Without this the signup form -- which grew a whole payer
   section -- can drop the field a parent just tapped underneath the bar, with
   the keyboard open and the text invisible. */
html { scroll-padding-bottom: 7rem; }

.commitbar {
  position: sticky; bottom: 0; z-index: 15;
  background: var(--card); border-top: 1px solid var(--line);
  padding: .8rem 0 max(.8rem, env(safe-area-inset-bottom));
  margin-top: 1.5rem;
}
.commitbar__inner { display: flex; align-items: center; gap: 1rem; }
.commitbar__price { line-height: 1.2; }
.commitbar__price strong { font-family: var(--mono); font-size: 1.15rem; display: block; }

/* --- Tables ----------------------------------------------------------- */

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th, table.data td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); }
table.data th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 700; white-space: nowrap;
}
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- Shelf map: the next order, as packs laid out by size --------------- */

/* One row per size, its length the number of packs. The rows share a scale,
   so a segment is one pack everywhere and the rows can be read against each
   other. Two lines rather than three columns: on a phone a middle column
   would leave the bar 120px wide, which is where the shape lives. */
.shelf { display: flex; flex-direction: column; gap: .9rem; }
.shelf__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; margin-bottom: .35rem;
}
.shelf__size { font-weight: 700; font-size: .95rem; }
.shelf__count { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }

.shelf__packs { display: flex; gap: 2px; height: 1.35rem; min-width: 2rem; }
.shelf__pack { flex: 1; border-radius: 3px; background: var(--petrol); }

/* The price on the signup page is the fact the parent is deciding on. */
.price-line {
  font-family: var(--mono); font-size: .95rem; color: var(--ink);
  background: var(--paper-deep); border-radius: var(--radius);
  padding: .55rem .75rem; display: inline-block;
}

/* --- Front page -------------------------------------------------------- */

/* The only page that is a shop window rather than a tool. Sections are 64px
   apart, which is the design's rhythm and twice the gap anywhere else. */
.front { display: flex; flex-direction: column; gap: 4rem; }
.section-head { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 1.5rem; }

/* An on-dark region, which in this stylesheet means declaring the tokens that
   assume a light ground -- petrol links and a petrol focus ring both vanish
   here. Same treatment as .admin-bar, for the same reason. */
.hero, .closing {
  background: var(--petrol);
  color: #fff;
  --focus-ring: var(--marker);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.hero {
  margin-top: 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.hero a { color: #fff; }
/* The art fades into the teal rather than ending at a hard edge, so the two
   halves read as one panel. When a photograph replaces the drawing the
   gradient is already sitting on top of it. */
.hero__art { position: relative; }
.hero__art picture, .hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 92, 86, 0) 70%, var(--petrol) 100%);
}
.hero__say {
  padding: 3.5rem 3.5rem 3.5rem 2rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
}
.hero__title {
  margin: 0; font-size: clamp(2.5rem, 1.4rem + 3.4vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.02em; text-wrap: balance;
}
.hero__lede { margin: 0; font-size: 1.19rem; line-height: 1.45; color: var(--petrol-body); max-width: 26rem; }
.hero__trust {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem;
  font-size: .875rem; color: var(--petrol-tint);
}

/* Two doors of equal size. Whichever one you are, yours is not the small one
   at the bottom of the page. */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; }
.door { display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem; }
.door > p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.door__head { margin: 0; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.01em; }
/* Pinned to the floor of the card so the two rows of buttons line up with
   each other, which is the one place in this stylesheet where aligning card
   bottoms is worth having: they are the same decision, twice. */
.door__foot { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.door__note { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-3); }

.price { margin: 0; display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.price .num { font-family: var(--mono); font-size: 2.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--petrol); }
.price span { font-size: .9375rem; color: var(--ink-3); }

/* Three facts a manager is weighing, each under its own rule. */
.stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.stats__cell { border-top: 2px solid var(--petrol); padding-top: .625rem; }
.stats dt { font-size: .875rem; font-weight: 700; line-height: 1.4; }
.stats dd { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--ink-3); }

/* The sequence, on the paper rather than in a card: it is the one block here
   that is read rather than acted on. */
.how__steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem;
}
.how__step { border-top: 2px solid var(--ink); padding-top: 1.125rem; display: flex; flex-direction: column; gap: .5rem; }
.how__num { font-family: var(--mono); font-size: 1.25rem; font-weight: 600; line-height: 1; color: var(--petrol); }
.how__step h3 { margin: 0; font-size: 1.0625rem; }
.how__step p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-3); }

/* The photograph and the questions, side by side and the same height. The
   photo is the wider of the two because it is the one doing the reassuring. */
.trust { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; align-items: stretch; }
.trust__photo { border-radius: var(--radius-lg); overflow: hidden; min-height: 300px; }
.trust__photo picture, .trust__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.faq { padding: 2rem; display: flex; flex-direction: column; }
.faq__list { margin: 0; display: flex; flex-direction: column; gap: .875rem; }
.faq__list dt { font-weight: 700; font-size: .9375rem; line-height: 1.5; }
.faq__list dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-3); }

.closing {
  padding: 3rem 3.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.closing h2 { margin: 0; font-size: 1.875rem; letter-spacing: -.02em; text-wrap: balance; }
.closing p { margin: .5rem 0 0; font-size: 1rem; color: var(--petrol-tint); }
.closing .row { flex: none; }

/* --- Site footer ------------------------------------------------------- */

.sitefoot { margin-top: 4rem; padding: 2rem 0 4rem; font-size: .875rem; line-height: 1.6; color: var(--ink-3); }
.sitefoot > .wrap { border-top: 1px solid var(--line-strong); padding-top: 2rem; }
.sitefoot__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.sitefoot__blurb { margin: .75rem 0 0; max-width: 19rem; }
.sitefoot h3 { margin: 0 0 .5rem; font-size: .875rem; font-weight: 700; color: var(--ink); }
.sitefoot ul { margin: 0; padding: 0; list-style: none; }
.sitefoot li + li { margin-top: .25rem; }
.sitefoot a { color: var(--ink-3); text-decoration: none; }
.sitefoot a:hover { color: var(--petrol-dark); text-decoration: underline; }
.sitefoot__legal { margin: 1.75rem 0 0; font-size: .8125rem; color: var(--ink-4); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__art { order: -1; height: 17.5rem; }
  /* Rotated, not dropped: stacked, the fade has to run into the copy below
     rather than off the right-hand edge. */
  .hero__art::after { background: linear-gradient(180deg, rgba(11, 92, 86, 0) 60%, var(--petrol) 100%); }
  .hero__say { padding: 2rem; }
  .hero__title { font-size: 2.5rem; }
  .trust { grid-template-columns: 1fr; }
  .trust__photo { min-height: 0; height: 15rem; }
  .closing { flex-direction: column; align-items: flex-start; }
  .sitefoot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .front { gap: 2.5rem; }
  .door, .faq, .closing { padding: 1.5rem; }
  .sitefoot__cols { grid-template-columns: 1fr; }
}

/* --- Flash ------------------------------------------------------------ */

.flash {
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem;
  border: 1px solid; font-size: .95rem;
}
.flash--notice { background: var(--moss-wash); border-color: #bcd9c8; color: #12482e; }
.flash--alert { background: var(--brick-wash); border-color: #e8bdb7; color: var(--brick); }

/* --- Empty states ----------------------------------------------------- */

.empty {
  border: 1.5px dashed var(--line); border-radius: var(--radius-lg);
  padding: 2rem 1.25rem; text-align: center; color: var(--ink-2);
}

/* --- Document layout (invoice, packing slip) -------------------------- */

.doc { background: #fff; color: #000; }
.doc .sheet {
  width: min(100% - 2rem, 46rem); margin: 2rem auto; background: #fff;
  padding: 2.5rem; border: 1px solid var(--line); border-radius: 4px;
}
.doc__head { display: flex; justify-content: space-between; gap: 2rem; border-bottom: 3px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.doc__title { font-size: 1.5rem; font-weight: 800; }
.doc dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.25rem; margin: 0; }
.doc dt { color: var(--ink-2); font-size: .85rem; }
.doc dd { margin: 0; font-size: .9rem; }
.doc .totals { margin-top: 1.25rem; margin-left: auto; width: min(100%, 20rem); }
.doc .totals tr:last-child { font-weight: 700; border-top: 2px solid var(--ink); }
.print-hide { }

/* What the subscription includes, on the front door. Ticks rather than
   bullets: each line is something the parent gets, not an item in a list. */
.points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.points li { position: relative; padding-left: 1.6rem; }
.points li::before {
  content: ""; position: absolute; left: .35rem; top: .42em;
  width: .38rem; height: .72rem;
  border: solid var(--petrol); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* A hint that this phone has signed up here before, not a warning: a shared
   phone or a cleared browser knows nothing, and the real guard is the
   kennitala check. */
.returning__device {
  margin: 0; padding: .6rem .8rem; border-radius: var(--radius);
  background: var(--petrol-wash); color: var(--petrol-dark); font-size: .92rem;
}

.is-negative { color: var(--brick); }

/* --- The pool ---------------------------------------------------------- */

/* What the parents have paid for and nobody has ordered yet. It sits above
   the order form because the form is an allocation, not a wish. */
/* One number with its name over it and a note under it. Named for the shape
   rather than for what it holds: it was .pool until there was no pool, and
   the enquiry page's price was never one anyway. */
.figure { display: flex; flex-direction: column; gap: .3rem; }
.figure__label {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.figure__amount { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.figure__amount .num { font-family: var(--mono); font-size: 2rem; letter-spacing: -.02em; }
.figure__amount span { color: var(--ink-2); }
.figure__hint { margin: 0; font-size: .88rem; color: var(--ink-2); }

/* A short sum with its parts named: label left, figure right, the figures in
   the mono face so a column of them lines up on the last digit. Used on the
   admin account block, which is the one place a sum is still laid out. */
.tally { display: flex; flex-direction: column; gap: .3rem; }
.tally__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tally dt { color: var(--ink-2); font-size: .88rem; }
.tally dd {
  margin: 0; flex: 0 0 auto; font-family: var(--mono); font-size: .88rem;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink);
}
.tally__row--total { border-top: 1px solid var(--line); padding-top: .4rem; margin-top: .1rem; }
.tally__row--total dt { color: var(--ink); font-weight: 600; }

/* One line of the roll: the name label, and the deild it is filed under.
   The select is the only control on the row -- everything that changes a
   subscription lives on the family's own page. */
.roll { display: flex; align-items: center; gap: .8rem; }
.roll__move { flex: 0 0 auto; }
.roll__move select { min-width: 10rem; }
/* Stacked on a phone, and deliberately tighter than the gap between rows:
   a select sitting halfway between two names belongs to neither. */
@media (max-width: 560px) {
  .roll { flex-wrap: wrap; gap: .35rem; }
  .roll__move, .roll__move select { width: 100%; }
}

/* --- Subscribers, grouped by the family that pays ---------------------- */

.family { display: flex; flex-direction: column; gap: 1rem; }
.family__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.family__payer { margin: 0; font-size: 1.1rem; }
.family__meta { margin: .2rem 0 0; color: var(--ink-2); font-size: .9rem; }
.family__meta .num { font-family: var(--mono); font-weight: 700; color: var(--ink); }

.family__children { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.family__children li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--line);
}
.family__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.family__note { margin: 0; }

/* --- Lobby poster ------------------------------------------------------ */

/* A4 portrait. Sized in millimetres because the output is paper, not a
   viewport: the QR has to come off the printer big enough to scan from a
   metre away, and type has to be readable from across a lobby. */
.poster {
  display: flex; flex-direction: column; gap: 10mm;
  min-height: 247mm; /* A4 less the document sheet's own margin */
  text-align: center;
}
.poster__head { display: flex; flex-direction: column; gap: 4mm; }
.poster__eyebrow {
  margin: 0; color: var(--petrol); font-weight: 700;
  font-size: 11pt; letter-spacing: .22em; text-transform: uppercase;
}
/* The headline three times over. Icelandic leads because the poster hangs in
   Iceland; the other two are the same size as each other, because there is no
   reason for one of them to come third. All three are legible at arm's length
   from the coat hooks, which is where a lobby poster is actually read. */
.poster__headline {
  margin: 0; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance;
}
.poster__headline--is { font-size: 30pt; letter-spacing: -.03em; }
.poster__headline--en,
.poster__headline--pl { font-size: 19pt; font-weight: 700; color: var(--ink-2); }

.poster__codes { display: flex; flex-direction: column; gap: 5mm; }
.poster__codes-row { display: flex; justify-content: center; gap: 6mm; align-items: flex-start; }
.poster__code {
  display: flex; flex-direction: column; align-items: center; gap: 1.5mm;
  flex: 1 1 0; max-width: 56mm;
}
.poster__code svg { display: block; }
.poster__lang { margin: 0; font-size: 12pt; font-weight: 700; }
.poster__scan {
  margin: 0; font-size: 10.5pt; line-height: 1.25; color: var(--ink-2); text-wrap: balance;
}
.poster__url {
  margin: 0; font-family: var(--mono); font-size: 8.5pt;
  color: var(--ink-2); word-break: break-all;
}

.poster__terms { display: flex; flex-direction: column; gap: 4mm; margin-top: auto; }
.poster__price { margin: 0; display: flex; flex-direction: column; gap: 1mm; }
.poster__price strong {
  font-family: var(--mono); font-size: 30pt; font-weight: 700; letter-spacing: -.02em;
}
.poster__price span { font-size: 11pt; color: var(--ink-2); line-height: 1.3; }
.poster__points {
  margin: 0; padding: 0; list-style: none;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1mm 5mm;
  font-size: 10.5pt; color: var(--ink-2);
}
.poster__points + .poster__points { margin-top: 1.5mm; }
/* A separator that is not a bullet character: bullets before the first item
   are a classic flex-wrap artefact, and ::before on every item but the first
   breaks the moment a line wraps. */
.poster__points li { position: relative; }
.poster__points li + li::before {
  content: ""; position: absolute; left: -3mm; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%; background: var(--ink-3);
}
.poster__foot { text-align: left; }

@media print {
  body { background: #fff; }
  .print-hide, .masthead, .commitbar { display: none !important; }
  .doc .sheet { border: 0; margin: 0; padding: 0; width: 100%; }

  /* A poster is one sheet or it is wrong. */
  @page { size: A4 portrait; margin: 12mm; }
  .poster { min-height: 0; page-break-inside: avoid; }
  /* Printers drop background colours by default, which would leave the name
     label as a floating line of text. The border carries it instead. */
  .poster__foot { border: 1px solid var(--ink-3); border-left: 4px solid var(--ink); }
}

/* --- Admin ------------------------------------------------------------ */

.admin body, body.admin { background: #f6f7f7; }
.admin-bar {
  background: var(--ink);
  color: #fff;
  /* 11.4:1 at rest, 15.6:1 hovered, against the bar's own background. */
  --nav-link: #cfe0e0;
  --nav-link-hover: #fff;
  /* The bar's own line, not the page's: --line is invisible on near-black. */
  --nav-rule: #35474f;
  /* Petrol on near-black is not a visible focus ring; the highlighter is. */
  --focus-ring: var(--marker);
}
.admin-bar a { color: var(--nav-link); }
.admin-bar .brand { color: #fff; }

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 480px) {
  h1 { font-size: 1.65rem; }
  .card { padding: 1rem; }
  .card__body { padding: 1rem; }
  .field-row { grid-template-columns: 1fr; }
  .home { gap: 2rem; }
  .hero { padding: 1.6rem 1.25rem; }
  .hero__price .num { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}