/* Badensgade site styles.
   Tokens, type, and components per design/Visual Style.html. One file,
   read top-to-bottom. No build step. No web fonts — system stacks only. */

:root {
    --ink:        #31414F;   /* slate-navy from the wordmark — body, rules, links */
    --ink-soft:   #5a6775;   /* muted navy — meta, dates, authors, captions */
    --paper:      #f6f1e7;   /* warm cream — page background */
    --paper-alt:  #ecdfc8;   /* deeper sand — pinned cards, footer */
    --paper-card: #fbf7ef;   /* lighter cream — default card surface */
    --accent:     #b5533a;   /* terracotta — primary action, pinned marker */
    --accent-dark:#8a3a25;   /* hover/active, kicker labels */
    --danger:     #9b2a1f;   /* destructive confirms / errors */
    --ok:         #3f6b3a;   /* saved / booked / confirmed */
    --rule:       #31414F;   /* hairline (same as ink) */

    --serif: "Iowan Old Style", "Source Serif Pro", "Source Serif", Georgia, serif;
    --sans:  ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; }
h1 { font-size: 42px; line-height: 1.15; letter-spacing: -0.005em; margin: 0 0 16px; }
h2 { font-size: 30px; line-height: 1.2; margin: 0 0 24px; }
h3 { font-size: 22px; line-height: 1.3; margin: 0 0 10px; }

/* ---------- Header ---------- */
.page-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 32px;
    padding: 28px 56px 20px;
    border-bottom: 1px solid var(--rule);
}
.identity {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: var(--ink);
}
.brand-illustration {
    display: block;
    height: 76px;
    width: auto;
    flex-shrink: 0;
}
.brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
}
.brand-wordmark {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 40px;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.brand-sub {
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-top: 6px;
}

.page-nav {
    justify-self: end;
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 4px;
}
.page-nav a {
    color: var(--ink);
    text-decoration: none;
    padding: 14px 16px; /* 44px+ tap target */
    display: inline-block;
}
.page-nav a:hover { color: var(--accent-dark); }
.page-nav a.current {
    color: var(--ink);
    border-bottom: 2px solid var(--accent);
}
.page-nav .sep {
    color: var(--ink-soft);
    padding: 0 2px;
    user-select: none;
}
.page-nav .user-name {
    color: var(--ink-soft);
    padding: 0 8px 0 16px;
    font-size: 16px;
}

/* ---------- Main ---------- */
.site-main {
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- Hero ---------- */
.hero {
    padding: 44px 56px 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    border-bottom: 1px solid var(--rule);
}
.hero h1 { margin: 0 0 16px; }
.hero p { margin: 0; font-size: 20px; line-height: 1.6; max-width: 44ch; }
.hero aside { border-left: 1px solid var(--rule); padding-left: 32px; }
.hero aside h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--ink);
}
.hero aside dl { margin: 0; font-size: 18px; line-height: 1.55; }
.hero aside dt {
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-top: 12px;
}
.hero aside dt:first-child { margin-top: 0; }
.hero aside dd { margin: 2px 0 0; color: var(--ink); }

/* ---------- Content board (opslag list) ---------- */
.board {
    padding: 40px 56px 48px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 56px;
    align-items: start;
}
/* Grid items default to min-width: auto, which makes them refuse to
   shrink below their content's intrinsic width. A long URL or <pre>
   inside an opslag body would push .board-main wider than its track,
   defeating overflow-wrap and forcing horizontal scroll on phones. */
.board > * { min-width: 0; }
.board-main h2 { margin-bottom: 24px; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.section-head h2 { margin: 0; }

/* ---------- Markdown editor / cheatsheet ---------- */
.markdown-cheatsheet {
    color: var(--ink-soft);
    font-size: 14px;
    margin: 8px 0 18px;
}
.markdown-cheatsheet code {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--paper-alt);
    padding: 1px 6px;
    border-radius: 3px;
}
/* EasyMDE's default skin uses pure white + dark-blue accents that
   clash with our cream/slate/terracotta palette. Just nudge the most
   visible bits — toolbar background, accent colour — and let the rest
   inherit. */
.EasyMDEContainer .editor-toolbar {
    background: var(--paper-card);
    border-color: var(--rule);
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
    background: var(--paper-alt);
    border-color: var(--rule);
}
.EasyMDEContainer .CodeMirror {
    border-color: var(--rule);
    background: #fff;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
    min-height: 240px;
}

/* ---------- Search ---------- */
.search-form input[type="search"] {
    /* Inherit the stacked form styling but keep the input visually distinct
       with a slightly larger size for the primary surface action. */
    font-size: 22px;
    padding: 14px 16px;
}
.search-results {
    list-style: none;
    padding: 0;
    margin: 12px 0 32px;
}
.search-results li {
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline-color, #e2d6b8);
}
.search-results li:last-child { border-bottom: 0; }
.search-results a { font-size: 18px; font-weight: 500; }
.search-results .meta {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ink-soft);
}

/* ---------- Public landing CTA (anonymous home) ---------- */
.public-cta {
    background: var(--paper-card);
    border: 1px solid var(--rule);
    padding: 32px 40px;
    margin: 0 auto;
    max-width: 720px;
}
.public-cta h2 { margin-top: 0; }
.public-cta p { margin: 0 0 16px; }
.public-cta .meta { color: var(--ink-soft); font-size: 15px; }

/* ---------- Single-column content (forms, simple pages) ---------- */
.single {
    padding: 40px 56px 64px;
    max-width: 720px;
}
/* Wider variant for pages where the body content benefits from horizontal
   space — currently the document detail page (PDF viewer is unreadable
   at 720 px). Keep the typography column readable by capping inline text
   inside the page rather than the page itself. */
.single.single-wide {
    max-width: 1200px;
}

/* ---------- Error pages (404 / 403 — 500 is standalone) ---------- */
.error-page .lead {
    font-size: 22px;
    line-height: 1.55;
    margin: 0 0 24px;
}
.error-page .meta {
    color: var(--ink-soft);
    font-size: 16px;
    margin-top: 32px;
}

/* ---------- Opslag images: form picker + detail render ---------- */
/* Existing-image grid in the edit form: thumbs with a delete checkbox. */
.opslag-image-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.opslag-image-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--rule);
}
.opslag-image-thumb {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}
.opslag-image-delete {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Detail-page image gallery: stacked figures, each captioned. Wide
   single-column so portrait phone shots don't blow out. */
.opslag-images-detail {
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.opslag-image {
    margin: 0;
}
.opslag-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    background: var(--paper-card);
}
.opslag-image figcaption {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 6px;
    font-style: italic;
}

/* ---------- Opslag card ---------- */
.opslag {
    border: 1px solid var(--rule);
    background: var(--paper-card);
    padding: 28px 30px 26px;
    margin-bottom: 20px;
    /* Belt-and-braces: don't let any descendant (long URL, <pre>, <img>)
       push the card wider than its parent grid track. */
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.opslag img { max-width: 100%; height: auto; }
.opslag table { display: block; max-width: 100%; overflow-x: auto; }
.opslag.pinned {
    background: var(--paper-alt);
    border-left: 6px solid var(--accent);
    padding-left: 26px;
}
.opslag .kicker {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin: 0 0 8px;
    font-weight: 600;
}
.opslag h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.25; }
.opslag .body {
    margin: 0 0 14px;
    font-size: 19px;
    line-height: 1.55;
    max-width: 62ch;
    /* Markdown filter wraps paragraphs in <p> and converts single
       newlines to <br>, so pre-wrap is no longer needed (and would
       cause double spacing alongside <p> margins). */
    /* Long URLs (especially from WP imports) can blow out the card
       on phones. overflow-wrap: anywhere lets the browser break a
       long token at any character when no natural break exists. */
    overflow-wrap: anywhere;
}
.opslag .body p { margin: 0 0 12px; }
.opslag .body p:last-child { margin-bottom: 0; }
.opslag .body ul,
.opslag .body ol { margin: 0 0 12px; padding-left: 24px; }
.opslag .body li { margin-bottom: 4px; }
.opslag .body blockquote {
    margin: 0 0 12px;
    padding: 6px 0 6px 16px;
    border-left: 3px solid var(--rule);
    color: var(--ink-soft);
}
.opslag .body code {
    background: var(--paper-alt);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.92em;
}
.opslag .body pre {
    background: var(--paper-alt);
    padding: 12px 14px;
    overflow-x: auto;
    border-radius: 3px;
}
.opslag .body pre code { background: transparent; padding: 0; }
.opslag .body h2,
.opslag .body h3,
.opslag .body h4 {
    font-family: var(--serif);
    margin: 16px 0 8px;
    line-height: 1.3;
}
.opslag .body h2 { font-size: 22px; }
.opslag .body h3 { font-size: 19px; }
.opslag .body h4 { font-size: 17px; }
/* Title in the feed card links to the detail page; render it as
   normal heading text in slate, with a hover underline so it's
   discoverable without competing visually with terracotta accents. */
.opslag h3 a.opslag-title-link {
    color: var(--ink);
    text-decoration: none;
}
.opslag h3 a.opslag-title-link:hover,
.opslag h3 a.opslag-title-link:focus {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 4px;
}

.opslag-attachments {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: var(--paper-alt);
    border-left: 3px solid var(--accent);
}
.opslag-attachments .kicker {
    margin: 0 0 6px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-dark);
}
.opslag-attachments ul { margin: 0; padding: 0; list-style: none; }
.opslag-attachments li { padding: 3px 0; }
.opslag-attachments li a { font-weight: 500; }
.opslag-attachments .meta { color: var(--ink-soft); font-size: 14px; }
.opslag .byline {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink-soft);
    border-top: 1px solid var(--paper-alt);
    padding-top: 12px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.opslag.pinned .byline { border-top-color: rgba(49, 65, 79, 0.2); }
.opslag .actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.opslag-empty {
    color: var(--ink-soft);
    font-style: italic;
    padding: 2rem 0;
}

/* ---------- Side column ---------- */
.side h2 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding-top: 10px;
    border-top: 1px solid var(--rule);
}
.side .section-head {
    align-items: baseline;
    margin: 0 0 12px;
}
.side .section-head h2 {
    margin: 0;
}
.upcoming-events {
    list-style: none;
    margin: 0;
    padding: 0;
}
.upcoming-events li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--rule);
}
.upcoming-events li:last-child {
    border-bottom: 0;
}
.upcoming-events a {
    display: block;
    font-weight: 600;
}
.upcoming-events .meta {
    display: block;
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 2px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 12px 18px;
    min-height: 44px;
    line-height: 1.3;
    border: 1px solid var(--rule);
    background: var(--paper-card);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
}
.btn:hover { background: var(--paper-alt); color: var(--ink); }
.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-link {
    border: none;
    background: none;
    padding: 12px 8px;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn-link:hover { color: var(--accent-dark); background: none; }
.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--paper-card);
}
.btn-danger:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.inline-form { display: inline; margin: 0; padding: 0; }

/* ---------- Forms ---------- */
form.stacked { max-width: 32rem; }
form.stacked p { margin: 0 0 18px; }
/* Two-column row inside a stacked form. Used for husnummer+etage on the
   register form so the etage select doesn't get visually swallowed by
   the longer husnummer field. Stacks back to one column on phones. */
form.stacked .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
form.stacked .field-row > p { margin: 0 0 18px; }
@media (max-width: 600px) {
    form.stacked .field-row { grid-template-columns: 1fr; }
}
form.stacked label {
    display: block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 6px;
}
form.stacked input[type="text"],
form.stacked input[type="email"],
form.stacked input[type="password"],
form.stacked input[type="tel"],
form.stacked input[type="number"],
form.stacked input[type="search"],
form.stacked input[type="date"],
form.stacked input[type="time"],
form.stacked input[type="datetime-local"],
form.stacked textarea,
form.stacked select {
    width: 100%;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.4;
    padding: 12px 14px;
    min-height: 48px;
    color: var(--ink);
    /* White so editable controls read as affordances on the cream page.
       Must be the `background` shorthand (not background-color) so it
       wins over any earlier shorthand declarations. */
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 0;
}
form.stacked input:focus,
form.stacked textarea:focus,
form.stacked select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
/* Native selects have a small default padding; match the text inputs so
   a select in a .field-row doesn't read as a visually-lighter control. */
form.stacked select {
    padding: 10px 12px;
    border: 1px solid var(--rule);
    border-radius: 2px;
}
form.stacked textarea { min-height: 12rem; line-height: 1.55; }
form.stacked .helptext {
    display: block;
    font-family: var(--sans);
    color: var(--ink-soft);
    font-size: 14px;
    margin-top: 4px;
}
form.stacked .errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    color: var(--danger);
    font-family: var(--sans);
    font-size: 15px;
}
form.stacked input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: middle;
}

altcha-widget {
    display: block;
    margin: 12px 0 18px;
    --altcha-color-base: var(--paper-card);
    --altcha-color-border: var(--rule);
    --altcha-color-text: var(--ink);
    --altcha-color-border-focus: var(--accent);
    --altcha-color-error-text: var(--danger);
    --altcha-border-radius: 4px;
    --altcha-max-width: 32rem;
}

/* ---------- Messages (Django messages framework) ---------- */
.messages {
    list-style: none;
    max-width: 1280px;
    margin: 16px auto 0;
    padding: 0 56px;
}
.msg {
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--rule);
    background: var(--paper-card);
    font-family: var(--sans);
    font-size: 16px;
}
.msg-success { border-color: var(--ok); color: var(--ok); }
.msg-error   { border-color: var(--danger); color: var(--danger); }

/* ---------- Footer ---------- */
.page-footer {
    border-top: 1px solid var(--rule);
    padding: 28px 56px 36px;
    background: var(--paper-alt);
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
}
.page-footer .foreningsnavn {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink);
    line-height: 1.35;
}
.page-footer .foreningsnavn small {
    display: block;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 6px;
}
.page-footer .colofon {
    color: var(--ink-soft);
    text-align: right;
    line-height: 1.5;
}

/* ---------- Visually-hidden helper (for screen-reader-only labels) ---------- */
.vh {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Documents: filter row, tag chips, document card ---------- */
.documents-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 20px;
}
/* Match the form.stacked editable-control affordance: white surface
   on the cream page so the search and sort controls read as
   interactive. var(--paper-card) was nearly identical to the page
   background and made the controls disappear. */
.documents-filters input[type="search"] {
    font-family: var(--serif);
    font-size: 17px;
    padding: 10px 14px;
    min-height: 44px;
    min-width: 14rem;
    flex: 1 1 14rem;
    background: #fff;
    border: 1px solid var(--rule);
    color: var(--ink);
}
.documents-filters select {
    font-family: var(--sans);
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
    background: #fff;
    border: 1px solid var(--rule);
    color: var(--ink);
}

.documents-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
}
.tag-chip,
.tag-chip-inline {
    display: inline-block;
    font-family: var(--sans);
    font-size: 14px;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    background: var(--paper-card);
    color: var(--ink);
    text-decoration: none;
    border-radius: 999px;
    line-height: 1.2;
}
.tag-chip:hover,
.tag-chip-inline:hover { background: var(--paper-alt); color: var(--ink); }
.tag-chip.current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.tag-chip-inline { font-size: 13px; padding: 3px 10px; }
.tag-description {
    color: var(--ink-soft);
    font-size: 16px;
    margin: 0 0 24px;
}

.document {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
    border-bottom: 1px solid var(--paper-alt);
    padding: 18px 0;
}
.document-main h3 {
    font-size: 21px;
    margin: 0 0 4px;
}
.document-main h3 a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
}
.document-main h3 a:hover { color: var(--accent-dark); }
.document-main .meta {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0 0 6px;
}
.document-main .tags {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.document-actions {
    align-self: center;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.document-superseded { opacity: 0.7; }
.document-superseded .document-main h3 a { color: var(--ink-soft); }

.badge-outdated {
    display: inline-block;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    margin-left: 8px;
    border-radius: 3px;
    color: #fff;
    background: var(--ink-soft);
    vertical-align: middle;
}

.document-admin-actions {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.pdf-viewer {
    margin: 24px 0 12px;
    border: 1px solid var(--rule);
    background: var(--paper-card);
    /* Aspect ratio close to A4 portrait, capped tall enough for laptops. */
    height: min(85vh, 1000px);
}
.pdf-viewer iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.document-actions-top {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Booking ---------- */
.asset-description { margin: 0 0 8px; }
.asset-location {
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink-soft);
}
.kicker {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 18px 0 8px;
}

.asset-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.asset-chip {
    font-family: var(--sans);
    font-size: 14px;
    padding: 8px 14px;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    line-height: 1.2;
}
.asset-chip:hover { color: #fff; opacity: 0.9; }

.month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 12px;
    flex-wrap: wrap;
}
.month-nav h2 { margin: 0; font-size: 26px; text-align: center; flex: 1; }

.calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 16px;
}
.calendar th {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid var(--rule);
}
.calendar td.day {
    vertical-align: top;
    border: 1px solid var(--paper-alt);
    background: var(--paper-card);
    padding: 6px;
    height: 7em;
    position: relative;
}
.calendar td.other-month { background: var(--paper); color: var(--ink-soft); }
.calendar td.past .day-num { color: var(--ink-soft); }
.calendar td.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.calendar td.booked { background: var(--paper-alt); }
.calendar .day-num {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
.calendar .booking-pill {
    background: var(--accent);
    color: #fff;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.25;
    padding: 4px 6px;
    border-radius: 3px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar .booking-pill a { color: #fff; text-decoration: none; }
.calendar .booking-pill a:hover { text-decoration: underline; }
.calendar .day-book {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-soft);
    text-decoration: none;
    margin-top: 4px;
}
.calendar td:hover .day-book { color: var(--accent-dark); text-decoration: underline; }
/* One click target per cell on the merged calendar — replaced the
   per-asset hover-only +T +B +D buttons. Always visible, generous tap
   target, picks the asset on the next page. */
.calendar .day-book-cell {
    display: block;
    margin-top: 6px;
    padding: 6px 4px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: center;
    text-decoration: none;
    border: 1px dashed transparent;
    border-radius: 3px;
}
.calendar td:hover .day-book-cell,
.calendar .day-book-cell:focus {
    color: var(--accent-dark);
    border-color: var(--rule);
    /* White lifts the affordance off the cream cell — `paper-card`
       was nearly the same colour as the cell, so on hover the
       button blended in instead of reading as "click me." */
    background: #fff;
}
.calendar-legend {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
}

/* ---------- Asset picker (booking step 1) ---------- */
.asset-picker {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    display: grid;
    gap: 14px;
}
.asset-picker-card {
    display: block;
    padding: 18px 20px;
    border: 1px solid var(--rule);
    border-left-width: 6px;
    background: var(--paper-card);
    text-decoration: none;
    color: var(--ink);
}
.asset-picker-card:hover,
.asset-picker-card:focus {
    background: var(--paper-alt);
    color: var(--ink);
}
.asset-picker-name {
    display: block;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
}
.asset-picker-desc {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink-soft);
    margin-top: 4px;
}
.asset-picker-meta {
    display: block;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 6px;
    letter-spacing: 0.02em;
}

.booking-detail {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    margin: 24px 0;
    font-family: var(--serif);
    font-size: 18px;
}
.booking-detail dt {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    align-self: baseline;
    padding-top: 4px;
}
.booking-detail dd { margin: 0; }

/* ---------- Form fieldsets + checkbox lines ---------- */
.form-fieldset {
    border: 1px solid var(--rule);
    padding: 14px 18px 16px;
    margin: 0 0 18px;
    background: var(--paper-card);
}
.form-fieldset legend {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0 6px;
}
.form-fieldset ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.form-fieldset ul li label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--serif);
    font-size: 17px;
}
.checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkbox-line label { display: inline; }
.checkbox-line .helptext { margin-left: 8px; }
/* Notification option: checkbox+label row, description indented below. */
.notify-option { margin-bottom: 14px; }
.notify-helptext {
    display: block;
    padding-left: 30px; /* checkbox 22px + gap 8px = aligns with label text */
}

/* ---------- Pin (fastgjort) toggle ---------- */
.pin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 2px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
    position: relative;
}
.pin-toggle:hover { background: var(--paper-alt); }
.pin-toggle.pin-toggle-active {
    background: var(--accent);
    color: #fff;
}
.pin-toggle.pin-toggle-active:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}
.pin-toggle .pin-icon { flex-shrink: 0; display: block; }
.pin-toggle .pin-label-on { display: none; }
.pin-toggle.pin-toggle-active .pin-label-off { display: none; }
.pin-toggle.pin-toggle-active .pin-label-on { display: inline; }
/* Hide the underlying checkbox but keep it in the focus order for keyboards. */
.pin-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.pin-toggle input[type="checkbox"]:focus-visible + .pin-icon {
    outline: 2px solid var(--accent-dark);
    outline-offset: 4px;
}

/* ---------- Tag pill toggles (clickable on the form) ---------- */
.tag-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.tag-pill-toggle {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.tag-pill-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.tag-pill-toggle input[type="checkbox"]:focus-visible + span {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}

/* ---------- Draft banner ---------- */
.draft-banner {
    background: var(--paper-alt);
    border-left: 3px solid var(--accent);
    padding: 10px 16px;
    margin: 0 0 20px;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}
.draft-banner small { color: var(--ink-soft); }
.draft-banner .draft-actions { margin-left: auto; }
.draft-banner .draft-actions a {
    color: var(--accent-dark);
    text-decoration: underline;
}

/* ---------- Document picker (opslag form) ---------- */
.doc-picker { padding-bottom: 8px; }
.doc-picker-master {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-size: 17px;
    margin-bottom: 8px;
}
.doc-picker-body {
    margin-top: 12px;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
}
.doc-picker-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.doc-picker-search {
    width: 100%;
    font-family: var(--serif);
    font-size: 17px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--rule);
}
.doc-picker-search:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.doc-picker-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.doc-picker-tagrow .tag-pill {
    cursor: pointer;
    font-family: var(--sans);
    border-width: 1px;
}
.doc-picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--rule);
    background: #fff;
}
.doc-option {
    border-bottom: 1px solid var(--rule);
}
.doc-option:last-child { border-bottom: 0; }
.doc-option label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
}
.doc-option label:hover { background: var(--paper-alt); }
.doc-option input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
}
.doc-option-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.doc-option-title {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    line-height: 1.3;
}
.doc-option-meta {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
}
.doc-option-empty,
.doc-picker-empty {
    padding: 14px;
    text-align: center;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 14px;
}
.doc-picker-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
}
.doc-picker-upload a { color: var(--accent-dark); }
.doc-picker-upload button {
    margin-left: auto;
    font-size: 14px;
    padding: 6px 12px;
}

/* ---------- Opslag tags / pills ---------- */
.tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 24px;
}
.tag-pill {
    display: inline-block;
    font-family: var(--sans);
    font-size: 14px;
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-card);
    color: var(--ink);
    text-decoration: none;
    line-height: 1.2;
}
.tag-pill:hover, .tag-pill:focus {
    background: var(--paper-alt);
    color: var(--ink);
}
.tag-pill-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.tag-pill-active:hover, .tag-pill-active:focus {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
}
.tag-pill-small {
    font-size: 12px;
    padding: 3px 9px;
}
.opslag-tags {
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ---------- Opslag archive ---------- */
.all-opslag-link {
    margin: 24px 0 0;
    font-family: var(--sans);
    font-size: 16px;
}
.all-opslag-link a {
    color: var(--accent-dark);
    text-decoration: none;
}
.all-opslag-link a:hover { text-decoration: underline; }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 32px 0 8px;
    flex-wrap: wrap;
}
.pager .btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.pager-status {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink-soft);
}

/* Hard safety net: prevent the whole page from scrolling sideways on
   any viewport. Inner overflow is allowed via overflow-x: auto on
   specific elements (pre/code blocks, the calendar table). Without
   this, a single overflowing element forces the entire page to grow
   wider than the viewport on phones. */
html, body { overflow-x: hidden; }

/* ---------- Responsive: stack everything below ~900px ---------- */
@media (max-width: 900px) {
    .page-header { grid-template-columns: 1fr; padding: 20px 24px 12px; gap: 12px; }
    .page-nav { justify-self: start; }
    .brand-illustration { height: 56px; }
    .brand-wordmark { font-size: 32px; }
    .hero { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; }
    .hero aside { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 24px; }
    .board { grid-template-columns: 1fr; padding: 28px 24px; gap: 36px; }
    .single { padding: 28px 24px; }
    .messages { padding: 0 24px; }
    .page-footer { grid-template-columns: 1fr; padding: 24px 24px 32px; }
    .page-footer .colofon { text-align: left; }
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    .document { grid-template-columns: 1fr; }
    /* Hide the iframed PDF viewer on phones - mobile browsers don't paginate
       an iframed PDF, so the "Vis PDF" button at the top of the page (which
       opens the PDF in its own tab) is the better path on small screens. */
    .pdf-viewer { display: none; }
    .calendar td.day { height: 5em; padding: 4px; }
    .calendar th { padding: 6px 2px; font-size: 11px; }
    .calendar .day-num { font-size: 13px; }
    .calendar .booking-pill { font-size: 11px; padding: 2px 4px; }
    .month-nav h2 { font-size: 22px; flex-basis: 100%; order: -1; }
}