/* 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.
*/

:root {
  --focus-ring: var(--petrol);
  --paper: #edf0ee;
  --paper-deep: #e2e7e4;
  --card: #ffffff;
  --ink: #122630;
  --ink-2: #4e6470;
  --ink-3: #8a9aa2;
  --line: #d5ddd9;
  --petrol: #0e5c5a;
  --petrol-dark: #093f3e;
  --petrol-wash: #e4efee;
  --marker: #ffd64a;
  --brick: #a8352a;
  --brick-wash: #f8e9e7;
  --moss: #1c6f46;
  --moss-wash: #e6f1eb;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(18, 38, 48, .06), 0 8px 24px -12px rgba(18, 38, 48, .18);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, 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;
}

.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, 68rem); }
.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__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 ------------------------------------------------------------ */

.field { 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 { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: .4rem; }

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); }
.error-text { 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; }

/* --- 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 front door is not a tool, so it does not look like one: a petrol panel
   that states the offer, two white cards that are the two doors, and the
   sequence on the bare paper underneath. Three grounds, three jobs. */
.home { display: flex; flex-direction: column; gap: 2.75rem; }

/* 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 {
  background: var(--petrol);
  color: #fff;
  --focus-ring: var(--marker);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.hero a { color: #fff; }
.hero__title { font-size: clamp(2rem, 1.1rem + 2.7vw, 3rem); text-wrap: balance; }
.hero__lede { margin: .8rem 0 0; font-size: 1.12rem; color: rgba(255, 255, 255, .85); max-width: 32ch; }
/* The amount on its own line with the words under it, the way the lobby
   poster sets it -- and the only setting that survives a phone, where the
   sentence otherwise breaks after a one-letter preposition. 5.9:1 for the
   words, 7.8:1 for the number. */
.hero__price { margin: 1.6rem 0 0; color: rgba(255, 255, 255, .85); line-height: 1.4; }
.hero__price .num {
  display: block; font-size: 2.2rem; font-weight: 700; color: #fff;
  letter-spacing: -.03em; line-height: 1.1;
}

/* The shelf drawing: stacks of packs on a board, a size label under each
   stack the way a storeroom labels a shelf. Decoration, so it is
   aria-hidden -- but it is the only part of the page that says what the
   product is without needing to be translated three times. */
.shelfart { width: 100%; max-width: 22rem; margin-inline: auto; }
.shelfart__board {
  display: flex; align-items: flex-end; gap: 1.1rem;
  border-bottom: 3px solid rgba(255, 255, 255, .5);
  padding-bottom: .6rem;
}
.shelfart__stack { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; }
/* Flat on its back with the printed face upward, which is how a bale of
   nappies is stacked and why these are wide and shallow. The gradient and the
   soft bottom edge are what keep them from reading as sheets of paper. */
.shelfart__pack {
  position: relative; height: 1.6rem; border-radius: 5px;
  background: linear-gradient(rgba(255, 255, 255, .97), rgba(255, 255, 255, .84));
  box-shadow: inset 0 -3px 0 rgba(9, 63, 62, .10);
}
/* The band printed across the pack. Off-centre, because a centred rule down
   the middle of every block is what makes a stack read as a bar chart. */
.shelfart__pack::after {
  content: ""; position: absolute; left: 14%; width: 34%; top: 42%;
  height: 3px; border-radius: 2px;
  background: var(--petrol); opacity: .26;
}
.shelfart__labels { display: flex; gap: 1.1rem; margin-top: .55rem; }
.shelfart__label {
  flex: 1 1 0; text-align: center;
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  color: rgba(255, 255, 255, .8);
}

/* 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(19rem, 1fr)); gap: 1rem; }
.door { display: flex; flex-direction: column; gap: .8rem; }
.door > p { margin: 0; }
/* The actions follow the sentence that explains them rather than being pushed
   to the floor of the card: pinning the feet lines up the card bottoms, which
   is the one thing nobody looks at, and leaves the two buttons at different
   heights whenever one card carries a footnote and the other does not. */
.door__foot {
  padding-top: .3rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
}
.door__foot p { margin: 0; }

/* The sequence, on the paper rather than in a card: it is the one block here
   that is read rather than acted on. A rule and a numeral instead of the
   petrol-wash chip used elsewhere -- that chip is nearly invisible on paper. */
.how__title { margin-bottom: 1.4rem; }
.how__steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem;
}
.how__step { border-top: 2px solid var(--ink); padding-top: .8rem; }
.how__num {
  display: block; margin-bottom: .55rem;
  font-family: var(--mono); font-size: 1.45rem; font-weight: 700;
  line-height: 1; color: var(--petrol);
}
.how__step h3 { margin: 0 0 .3rem; }
.how__step p { margin: 0; color: var(--ink-2); font-size: .93rem; }

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 1.9rem; padding: 1.9rem 1.6rem; }
  .hero__lede { max-width: none; }
  .shelfart { max-width: 20rem; margin-inline: 0; }
}

/* A list of things that are true, not a list of things to do: the tick is
   the point, so it is drawn rather than bulleted. */
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ticks li { position: relative; padding-left: 1.6rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: .5rem; height: .85rem; border: solid var(--petrol);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* The honeypot. Off-screen rather than display:none -- some bots skip what is
   hidden, and every one of them fills what it can reach. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* A row that has been dealt with. Still readable, no longer asking. */
tr.is-quiet td { opacity: .55; }

/* --- 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; }
}