/* Årebladet — deadline. Mobile-first; the phone is the primary device (capture happens
   during a call). Newsprint palette, one masthead red, an urgency scale for deadlines. */

:root {
  --paper: #faf9f7;
  --paper-raised: #ffffff;
  --ink: #1b1b1f;
  --ink-soft: #5d5f68;
  --ink-faint: #8b8d96;
  --rule: #dedbd5;
  --rule-strong: #c4c0b8;
  --red: #c1272d;
  --red-soft: #fdeceb;
  --amber: #a86a00;
  --amber-soft: #fdf3e2;
  --green: #2b6b45;
  --green-soft: #eaf4ee;
  --blue: #1f4e79;
  --focus: #1f4e79;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 18, 15, 0.06), 0 4px 14px rgba(20, 18, 15, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15161a;
    --paper-raised: #1e2026;
    --ink: #ecebe8;
    --ink-soft: #a7a9b2;
    --ink-faint: #7b7d86;
    --rule: #31333c;
    --rule-strong: #454852;
    --red: #ef6a63;
    --red-soft: #3a1f1f;
    --amber: #e0a44a;
    --amber-soft: #33280f;
    --green: #74c496;
    --green-soft: #17301f;
    --blue: #7fb0dd;
    --focus: #7fb0dd;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

/* The hidden attribute must always win: any `display` rule on the same element
   (e.g. .flags-edit's flex) silently overrides the UA's display:none. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: 4rem;
}

a { color: var(--blue); }

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 3px double var(--rule-strong);
  background: var(--paper-raised);
  position: sticky;
  top: 0;
  z-index: 20;
}

.masthead-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.wordmark {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark span { color: var(--red); }

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.9rem;
}
.masthead nav a { color: var(--ink-soft); text-decoration: none; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--red); }
.masthead nav form { margin: 0; }
.masthead nav button {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--ink-faint); cursor: pointer;
}

main { max-width: 60rem; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0.6rem 0 0.2rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 0.6rem; }
.sub { color: var(--ink-soft); margin: 0 0 1rem; font-size: 0.95rem; }

/* ---------- cards / panels ---------- */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ---------- forms ---------- */

label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.25rem; }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
  width: 100%;
  /* Set long-hand: `font: 16px/1.4 inherit` is not a valid shorthand, and a textarea that
     silently keeps its UA monospace default looks like a bug to everyone who sees it.
     16px specifically, because anything smaller makes iOS Safari zoom the viewport on focus. */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}

.field { margin-bottom: 0.8rem; }
.row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.row > .field { flex: 1 1 8rem; margin-bottom: 0.8rem; }

.check { display: flex; align-items: center; gap: 0.5rem; }
.check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--red); }
.check label { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }

button, .btn {
  font: 600 1rem/1 inherit;
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { filter: brightness(1.06); }
button.secondary, .btn.secondary {
  background: var(--paper-raised);
  color: var(--ink);
  border-color: var(--rule-strong);
}
button.link {
  background: none; border: 0; color: var(--blue); padding: 0.2rem;
  font-weight: 500; text-decoration: underline;
}

.hint { font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.25rem; }

/* ---------- (i) tooltips ---------- */
/* Explanation on demand. Visible prose is reserved for state Pär cannot see any other way;
   everything that merely explains hides here and comes back on hover, on keyboard focus,
   or on tap (the span is focusable, which is what makes touch work). No JavaScript. */

.label-row { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.25rem; }
.label-row label { margin-bottom: 0; }

.info { position: relative; display: inline-flex; cursor: help; vertical-align: middle; }
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  color: var(--ink-faint);
  font: italic 700 0.72rem/1 Georgia, "Times New Roman", serif;
  /* The icon lives inside uppercase <dt>s and 0.82rem <label>s — none of that inherits. */
  letter-spacing: 0;
  text-transform: none;
}
.info:hover .info-icon, .info:focus .info-icon { border-color: var(--red); color: var(--red); }
.info:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 999px; }

.info-text {
  position: absolute; z-index: 40; top: calc(100% + 0.4rem); left: 0;
  width: max-content; max-width: min(19rem, 68vw);
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0.5rem 0.6rem;
  /* Reset the surroundings: these icons sit in <label>s and uppercase <dt>s. Long-hand,
     because `font: 400 0.82rem/1.4 inherit` is not a valid shorthand — `inherit` is not a
     font-family — and the whole declaration would be dropped. */
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-transform: none; letter-spacing: normal; text-align: left; white-space: normal;
  visibility: hidden; opacity: 0;
  transition: opacity 0.12s ease;
}
.info:hover .info-text, .info:focus .info-text, .info:focus-within .info-text {
  visibility: visible; opacity: 1;
}
/* For icons at the right-hand end of a row, where a left-anchored bubble runs off a phone. */
.info-right .info-text { left: auto; right: 0; }

/* The one action the whole tool exists for. Full width, thumb-sized, first thing on the
   landing page — capture happens standing up with a phone in one hand. */
.primary-action {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
  padding: 1.05rem 1.2rem;
  border-radius: var(--radius);
  margin: 0.4rem 0 1.4rem;
  box-shadow: var(--shadow);
}

.year-picker { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 1rem; font-size: 0.9rem; }
.year-picker a { text-decoration: none; color: var(--ink-soft); }
.year-picker a[aria-current="page"] { color: var(--red); font-weight: 700; }

.archive-link { margin: 1.4rem 0 0; }
.archive-link a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
.archive-link a:hover { color: var(--red); }

.error {
  background: var(--red-soft);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
}

/* ---------- urgency ---------- */

.pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pill.now  { background: var(--red-soft);   color: var(--red); }
.pill.soon { background: var(--amber-soft); color: var(--amber); }
.pill.calm { background: var(--green-soft); color: var(--green); }
.pill.past { background: var(--rule);       color: var(--ink-soft); }

/* ---------- login ---------- */

.login-wrap { max-width: 22rem; margin: 12vh auto; padding: 1rem; }
.login-wrap .wordmark { font-size: 1.6rem; display: block; margin-bottom: 0.2rem; }
.login-wrap .sub { margin-bottom: 1.4rem; }
.login-wrap button { width: 100%; }

/* PocketID is the front door; the password lane below it is break-glass, so it reads as
   a footnote rather than a second equal choice. */
.pocketid-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.85rem 1.1rem;
}
.breakglass { margin-top: 1.6rem; }
.breakglass > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-faint);
  list-style: none;
}
.breakglass > summary::-webkit-details-marker { display: none; }
.breakglass > summary::before { content: "⌁ "; }
.breakglass > summary:hover { color: var(--ink-soft); }
.breakglass[open] > summary { margin-bottom: 0.8rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ===================================================================
   Booking surfaces. Mobile-first: everything below stacks by default
   and only becomes columnar above 40rem.
   =================================================================== */

.breadcrumb { margin: 0 0 0.5rem; font-size: 0.9rem; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--red); }

.flash {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  border: 1px solid var(--green);
  background: var(--green-soft);
  color: var(--green);
  font-weight: 600;
}
.flash.error { border-color: var(--red); background: var(--red-soft); color: var(--red); }

.empty { color: var(--ink-faint); font-style: italic; }
.req { color: var(--red); }
.count-badge {
  font-size: 0.8rem; font-weight: 700; color: var(--ink-soft);
  background: var(--rule); border-radius: 999px; padding: 0.1rem 0.5rem;
  vertical-align: middle;
}

/* ---------- year strip ---------- */

/* Stretched link: the card is a <div> and .current-head is the anchor, whose ::after
   overlay makes the whole card one click target. That keeps the (i) in the stats a sibling
   of the link rather than a focusable element nested inside it (invalid, and un-tappable —
   the tap would follow the link). z-index lifts it back above the overlay. */
.current-edition { display: block; position: relative; text-decoration: none; color: inherit; border-color: var(--rule-strong); }
.current-edition:hover { border-color: var(--red); }
.current-edition .info { z-index: 1; }
.current-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; text-decoration: none; color: inherit; }
.current-head::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.current-head h2 { margin: 0.1rem 0 0; font-size: 1.6rem; }
.current-head h2 em { font-style: normal; color: var(--red); }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }

.stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0.9rem 0 0; }
.stats div { margin: 0; }
.stats dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.stats dd { margin: 0.1rem 0 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.edition-list { list-style: none; padding: 0; margin: 0; }
.edition-row + .edition-row { border-top: 1px solid var(--rule); }
.edition-row a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.7rem;
  padding: 0.7rem 0.5rem; text-decoration: none; color: inherit;
}
.edition-row a:hover { background: var(--paper-raised); }
.edition-row.is-current { border-left: 3px solid var(--red); }
.edition-row .week { font-weight: 800; font-size: 1.05rem; min-width: 3.4rem; }
.edition-row .meta { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.edition-row .nr, .edition-row .type { font-size: 0.8rem; color: var(--ink-soft); }
.edition-row .ship { font-size: 0.8rem; color: var(--ink-faint); white-space: nowrap; }
.edition-row .type { font-weight: 700; color: var(--red); }
.edition-row .numbers {
  margin-left: auto; display: flex; gap: 0.9rem; font-size: 0.9rem;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.edition-row .money { font-weight: 700; color: var(--ink); }
.edition-row .pages { display: none; }
@media (min-width: 40rem) { .edition-row .pages { display: inline; } }

/* Back to the edition — a proper tap target, because this is the most-travelled route out
   of a booking and the phone is where it gets tapped. */
.back-to-edition { padding: 0.6rem 1rem; font-size: 0.95rem; }

/* Duplicera sits with Öppna in the row's meta line: a plain submit styled as a link, so a
   POST that copies an ad never looks like navigation. */
.booking-duplicate { display: inline; margin: 0; }

/* ---------- capture form ---------- */

.capture-card { border-color: var(--rule-strong); }
.capture-card h2 { margin-top: 0; }
.advertiser-field { position: relative; }
.check-field { display: flex; flex-direction: column; justify-content: center; }
.form-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.9rem; }
.form-actions button { flex: 1 1 auto; }
@media (min-width: 40rem) { .form-actions button { flex: 0 0 auto; } }

.flags-edit { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0.8rem 0; }

.secondary-field { margin: 0.9rem 0 0; border-top: 1px solid var(--rule); padding-top: 0.6rem; }
.secondary-field summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.secondary-field .field { margin-top: 0.6rem; }

.duplicera-action { display: flex; align-items: flex-end; flex: 0 0 auto; }

.danger-zone { border-color: var(--rule-strong); }
.danger-zone p { margin-top: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- autocomplete ---------- */

.suggestions:not(:empty) {
  position: absolute; z-index: 30; left: 0; right: 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 8px; box-shadow: var(--shadow);
  margin-top: 0.15rem; max-height: 16rem; overflow-y: auto;
}
.suggestion-list { list-style: none; margin: 0; padding: 0.25rem; }
.suggestion {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 0.55rem 0.6rem; border-radius: 6px; color: var(--ink);
  font: inherit; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap;
}
.suggestion:hover, .suggestion:focus { background: var(--rule); filter: none; }
.suggestion-name { font-weight: 600; }
.suggestion-alias { font-size: 0.8rem; color: var(--ink-faint); }
.suggestion-empty { padding: 0.6rem; margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- bookings ---------- */

.booking-list { list-style: none; padding: 0; margin: 0; }
.booking {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.55rem;
}
/* Stretched link: the whole card opens the booking, while the advertiser name and the flag
   toggles stay independently clickable above the overlay. No wrapping <a>, so nothing
   interactive is nested inside a link, and every target is a real focusable element. */
.booking { position: relative; }
/* .booking-open must NOT be positioned: an absolutely-positioned ::after is bounded by its
   nearest POSITIONED ancestor, so `position: relative` here made the overlay the size of the
   "Öppna" link itself and the promised card-wide target never existed. Unpositioned, the
   ::after resolves against .booking and covers the card. [Codex C7] */
.booking-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.booking:hover { border-color: var(--rule-strong); }
/* Everything genuinely interactive is positioned WITH a z-index, so it paints above the
   overlay (which sits at z-index auto) and keeps its own click target. */
.booking-name, .booking-edition, .booking-flags {
  position: relative; z-index: 1;
}
.booking-open { margin-left: auto; font-size: 0.8rem; color: var(--ink-faint); text-decoration: none; }
.booking-open:hover { color: var(--red); text-decoration: underline; }

.booking.cancelled { opacity: 0.62; }
.booking.cancelled .booking-name, .booking.cancelled .booking-money { text-decoration: line-through; }

.booking-main { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.booking-name { font-weight: 700; text-decoration: none; color: var(--ink); }
.booking-name:hover { color: var(--red); }
.booking-money { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

.booking-meta { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; margin-top: 0.3rem; }
.booking-comment { font-size: 0.85rem; color: var(--ink-soft); }

.tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem; border-radius: 4px;
  background: var(--rule); color: var(--ink-soft); white-space: nowrap;
}
.tag.ttpa { background: var(--amber-soft); color: var(--amber); }
.tag.discount { background: var(--green-soft); color: var(--green); }
.tag.cancelled-tag { background: var(--red-soft); color: var(--red); }
.tag.done { background: var(--green-soft); color: var(--green); }
.tag.known { background: var(--green-soft); color: var(--green); }

/* fit-content, so the strip claims only the width of its own toggles. Full-width it sat
   above the card overlay across the whole row and stole that area from the card-wide click
   target — while the toggles themselves still need to sit above it. [Codex C7] */
.booking-flags {
  display: flex; gap: 0.35rem; margin-top: 0.5rem; align-items: center; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
}
.booking-flags form { margin: 0; }
.flag {
  font-size: 0.78rem; font-weight: 700; padding: 0.32rem 0.6rem;
  border-radius: 999px; border: 1px solid var(--rule-strong);
  background: var(--paper); color: var(--ink-faint); cursor: pointer;
}
.flag:hover { filter: none; border-color: var(--ink-faint); }
.flag.on { background: var(--green-soft); border-color: var(--green); color: var(--green); }

/* ---------- recurring advertisers ---------- */

.recurring-card { border-color: var(--rule-strong); }
.recurring-card h2 { margin-top: 0; }
.recurring-list { list-style: none; padding: 0; margin: 0; }
.recurring-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.6rem; flex-wrap: wrap;
  padding: 0.55rem 0;
}
.recurring-row + .recurring-row { border-top: 1px solid var(--rule); }
.recurring-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 10rem; }
.recurring-name { font-weight: 700; text-decoration: none; color: var(--ink); }
.recurring-name:hover { color: var(--red); }
.recurring-terms { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.recurring-money { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.recurring-money.none { color: var(--ink-faint); font-weight: 500; }
.recurring-from { font-size: 0.8rem; color: var(--ink-faint); }
.recurring-actions { display: flex; gap: 0.4rem; align-items: center; margin-left: auto; }
.recurring-actions form { margin: 0; }
.recurring-actions button, .recurring-actions .btn { font-size: 0.85rem; padding: 0.45rem 0.7rem; }

.recurring-choice { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.tag.recurring { background: var(--blue); color: var(--paper-raised); }
.tag.bokio { background: var(--amber-soft); color: var(--amber); }
.tag.warn { background: var(--amber-soft); color: var(--amber); }

.filters { padding-bottom: 0.6rem; }
.filter-checks { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.filter-checks button, .filter-checks .btn { font-size: 0.85rem; padding: 0.45rem 0.8rem; }
.booking-edition {
  font-weight: 800; text-decoration: none; color: var(--red);
  margin-right: 0.45rem; white-space: nowrap;
}

/* ---------- advertisers ---------- */

.advertiser-list { list-style: none; padding: 0; margin: 0; }
.advertiser-list li + li { border-top: 1px solid var(--rule); }
.advertiser-list a {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.65rem 0.5rem; text-decoration: none; color: inherit;
}
.advertiser-list a:hover { background: var(--paper-raised); }
.advertiser-name { font-weight: 600; }
.advertiser-hint { font-size: 0.8rem; color: var(--ink-faint); }
.advertiser-list .numbers {
  margin-left: auto; display: flex; gap: 0.9rem;
  font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--ink-soft);
}

.edition-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.edition-head h1 em { font-style: normal; color: var(--red); }
.edition-head h1 .nr { font-size: 0.85rem; font-weight: 500; color: var(--ink-faint); }

.booking-money.none { color: var(--ink-faint); font-weight: 500; }

/* The förening toggle deserves its own line on a phone — squeezed beside the format
   select it wraps mid-label. */
@media (max-width: 40rem) {
  .row > .check-field { flex-basis: 100%; }
}

/* Validation summary above the form — the save was refused, so say so loudly. */
.error ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-weight: 500; }
.error li + li { margin-top: 0.2rem; }