/*
 * Sjakkduell turneringskalender.
 *
 * The Modernist "Dyp blå + korall" design from skoleturnering.no, narrowed to
 * the calendar and the sign-up panel, and scoped under `.sjd`.
 *
 * EVERYTHING IS SCOPED, for two reasons that both bite in WordPress:
 *   - the theme owns the page, and a bare `.card` or `.tag` here would collide
 *     with whatever the theme calls its own;
 *   - the tokens are declared on `.sjd` rather than on `:root`, so the plugin
 *     cannot repaint the theme around it.
 *
 * The rules from the design package that are easy to break without noticing:
 *   - THE ACCENT IS NOT THE BUTTON COLOUR. Deep blue carries structure (month
 *     rules, the leaf, active tabs); coral carries action (the submit button).
 *     Swapping them reads as a different site.
 *   - No hex codes below the token block. Everything downstream reads a variable.
 */

/* ══════════════════════════════════════════════════════════════════════════
   Tokens — deliberately at LOW specificity, unlike everything below.
   --------------------------------------------------------------------------
   The component rules are all `.sjd.sjd` so a theme cannot accidentally break
   the layout. The tokens are the opposite: they are the surface this widget is
   MEANT to be redressed through, so they sit on a single `.sjd` (0,1,0) and
   anything more specific wins.

   To restyle the calendar and the wizard, redefine tokens — never component
   rules. A single class on an ancestor is enough:

       body.region-asker .sjd { --sjd-accent: #00694e; --sjd-btn-bg: #f0b323; }

   Both beat this block. Overriding `--sjd-accent` and `--sjd-btn-bg` alone
   carries most of the identity; the ramps below exist so the rest follows.

   The three regions are already defined that way further down — see "The three
   regions". Add a fourth by copying that block.
   ══════════════════════════════════════════════════════════════════════════ */

.sjd {
    --sjd-bg: #f7f8fb;
    /* What the cards, the calendar days and the form panels are painted on.
       `arv.js` overwrites this with the section's real background, so a widget
       dropped into a dark region page does not punch a white hole in it. */
    --sjd-surface: #fff;
    --sjd-text: #1c2433;
    --sjd-accent: #23459c;
    --sjd-divider: color-mix(in srgb, #23459c 25%, transparent);
    /* The edge of a form field. Deliberately NOT --sjd-divider: that one is a
       tint of the accent, and where the accent is itself a pale regional tint
       the result is a border nobody can see. Anchored to the ink instead, so a
       field always reads as a field.

       45% is chosen, not inherited: against the field's own fill it measures
       3.33:1, which clears the 3:1 WCAG asks of a user-interface boundary.
       For comparison — Enfold's own #e1e1e1 manages 1.23:1, and
       skoleturnering's blue-grey 1.57:1. This is a shade stronger than the
       school site on purpose, because faint boxes were the complaint. */
    --sjd-field-border: color-mix(in srgb, var(--sjd-text) 45%, transparent);

    --sjd-neutral-200: #e9e7f1;
    --sjd-neutral-300: #d8d5e6;
    --sjd-neutral-400: #b5b1cb;
    --sjd-neutral-600: #76718f;
    --sjd-neutral-700: #5a5573;
    --sjd-neutral-800: #403c55;

    --sjd-accent-200: #dbe4f7;
    --sjd-accent-100: #eef2fb;
    --sjd-accent-700: #1b3781;
    --sjd-accent-800: #142a64;

    /* THE RECEIPT'S CODE PANEL — a dark island with its own palette.
       It is the one place in the widget that is not drawn on the page's own
       ground, so nothing on it may come from colour inheritance: the page's
       button colour is chosen to read against the PAGE, and on Enfold that is
       black, which on navy is a hole rather than a button. Fixed here, and
       `arv.js` never touches these two.
       Only the bright colour on it follows the region.

       The blue is lighter than skoleturnering's #142a64, on request. White
       reads at 8.7:1 on it, so nothing is lost — but note that lightening was
       never what made this panel hard to read. See the ink rule below. */
    --sjd-code-bg: #23459c;
    --sjd-code-accent: #ff6b5a;
    --sjd-code-ink: #ffffff;

    /* The call to action. Deliberately NOT on the accent ramp: the palette
       pairs a deep blue ground with one warm accent. */
    --sjd-btn-bg: #ff6b5a;
    --sjd-btn-bg-hover: #f5573f;
    --sjd-btn-text: #2a1210;

    /* A date for the adults rather than for the children. Palette-independent
       on purpose, exactly as on skoleturnering.no: it marks what a row is for,
       and that meaning does not change with the region. */
    --sjd-seminar-amber: #e0a400;

    /* Status colours, shared by the calendar tags and the sign-up panel. */
    --sjd-ok-bg: #e2f1e8;
    --sjd-ok-ink: #1f5c3a;
    --sjd-done-bg: #efe6d8;
    --sjd-done-ink: #6b4f23;
    --sjd-warn-bg: #fdf1d8;
    --sjd-warn-ink: #8a5f0a;
    --sjd-error-bg: #fdecea;
    --sjd-error-ink: #c4291a;

    /* Inherits the theme's font on purpose — the calendar should read as part
       of sjakkduell.no, not as a panel imported from another site. Weight and
       size are set here; the family is the theme's. */
    --sjd-1: 4px;
    --sjd-2: 8px;
    --sjd-3: 12px;
    --sjd-4: 16px;
    --sjd-5: 20px;
    --sjd-6: 24px;
    --sjd-8: 32px;

    --sjd-radius-sm: 8px;
    --sjd-radius-md: 12px;
    --sjd-radius-lg: 20px;
    --sjd-radius-pill: 999px;

    --sjd-shadow-sm: 0 1px 2px color-mix(in srgb, #2a2739 14%, transparent);
    --sjd-shadow-md: 0 3px 10px color-mix(in srgb, #2a2739 16%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   The three regions
   --------------------------------------------------------------------------
   sjakkduell.no runs one project across Oslo, Bærum and Asker, and each has its
   own colour — the same one as its logo, and as the bands already on its pages:

       Oslo    #f9ca24    the page header
       Bærum   #badc58    the buttons
       Asker   #90defd    the calendar table

   Select one with the shortcode: [sjakkduell_kalender stil="asker"].

   THESE ARE TINTS, NOT INKS. All three are pale — light enough that white text
   on them is unreadable — so the accent is used as a background wherever it is
   used at all, ink on it is dark, and the reading colours are darkened mixes of
   the same hue rather than the hue itself.

   Runtime inheritance (arv.js) leaves the accent alone when one of these is set,
   and goes on supplying the surface and text colours from the surrounding
   Enfold section. Region identity here, site identity from the page.
   ══════════════════════════════════════════════════════════════════════════ */

.sjd-stil-oslo   { --sjd-region: #f9ca24; }
.sjd-stil-baerum { --sjd-region: #badc58; }
.sjd-stil-asker  { --sjd-region: #90defd; }

.sjd-stil-oslo,
.sjd-stil-baerum,
.sjd-stil-asker {
    --sjd-accent: var(--sjd-region);
    /* Dark ink, because every one of the three is a pale tint. */
    --sjd-on-accent: #16202e;
    --sjd-accent-100: color-mix(in srgb, var(--sjd-region) 22%, #fff);
    --sjd-accent-200: color-mix(in srgb, var(--sjd-region) 45%, #fff);
    /* Reading colours: the same hue taken down far enough to sit on white. */
    --sjd-accent-700: color-mix(in srgb, var(--sjd-region) 42%, #10161f);
    --sjd-accent-800: color-mix(in srgb, var(--sjd-region) 28%, #10161f);
    --sjd-divider: color-mix(in srgb, var(--sjd-region) 55%, transparent);
    /* The greys, too. The defaults are Zugzwang's violet-biased ramp, which
       beside a pale blue on a black-and-white site reads as lavender and looks
       imported. These are plain greys carrying a trace of the region's own hue —
       enough to belong, not enough to be a second colour. */
    --sjd-neutral-200: color-mix(in srgb, var(--sjd-region) 14%, #efefef);
    --sjd-neutral-300: color-mix(in srgb, var(--sjd-region) 14%, #dadada);
    --sjd-neutral-400: color-mix(in srgb, var(--sjd-region) 12%, #b3b3b3);
    --sjd-neutral-600: color-mix(in srgb, var(--sjd-region) 10%, #6b6b6b);
    --sjd-neutral-700: color-mix(in srgb, var(--sjd-region) 10%, #515151);
    --sjd-neutral-800: color-mix(in srgb, var(--sjd-region) 8%, #363636);
    /* The call to action keeps the region's colour with dark ink, which is how
       the Bærum buttons on the site already read. */
    --sjd-btn-bg: var(--sjd-region);
    --sjd-btn-bg-hover: color-mix(in srgb, var(--sjd-region) 80%, #000);
    --sjd-btn-text: #16202e;
    /* The receipt's dark panel keeps its navy on every region — it is the same
       panel on skoleturnering — and takes the region's colour as the bright one
       printed on it, where coral sits on the school site. */
    --sjd-code-accent: var(--sjd-region);
}

/* The container's own painted properties belong with the components, not with
   the tokens — a theme's `.entry-content { color: … }` would otherwise win. */
.sjd.sjd {
    color: var(--sjd-text);
    line-height: 1.55;

    /* CLEAR THE THEME'S COLUMNS.
       Enfold's grid is float-based: a 1/3 column is `float: left`, and anything
       placed after it in the builder — a Code Block holding this shortcode, for
       instance — flows up ALONGSIDE it unless it clears. The widget then renders
       across the column and over whatever sits above, and the column's footprint
       reads as an empty white band down one side.

       `clear: both` is the whole fix, and it costs nothing on a theme that does
       not float: there is no float to clear. `display: flow-root` would also
       contain floats INSIDE the widget, but there are none, and it would break
       margin behaviour against the theme's own spacing. */
    clear: both;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   Holding our own against the theme
   --------------------------------------------------------------------------
   Every selector in this file is doubled — `.sjd.sjd` rather than `.sjd`. It is
   the same trick the Zugzwang embed needs on skoleturnering.no, for the same
   reason: at EQUAL specificity the stylesheet that loads last wins, and a
   WordPress theme's stylesheet may load after a plugin's. A single `.sjd .thing`
   (0,2,0) ties with a theme's `.entry-content p` and loses the coin toss; the
   doubled form does not.
   ══════════════════════════════════════════════════════════════════════════ */

/* THE ONE RULE THIS WHOLE FILE CANNOT DO WITHOUT.
   Both views of the calendar, and all four steps of the wizard, are one document
   with everything but the current section carrying the `hidden` attribute. The
   UA stylesheet's `[hidden] { display: none }` is specificity 0,1,0 — a theme
   rule as ordinary as `.entry-content section { display: block }` beats it, and
   then every step renders at once and the page looks like it melted.

   This is what !important is for: the host page's CSS is unknown, unversioned
   and not ours to fix. Nothing here should ever set `display` on a hidden
   element by another route. */
.sjd.sjd [hidden],
.sjd.sjd[hidden] { display: none !important; }

/* Themes love to uppercase or letter-space headings. Ours are Norwegian
   sentences — "Hvilken skole er dere fra?" title-cased word by word reads as a
   different language. Set below every component rule in specificity (0,2,1), so
   the places that genuinely want uppercase — the month bands, the receipt
   labels — still override it. */
.sjd.sjd h1,
.sjd.sjd h2,
.sjd.sjd h3,
.sjd.sjd h4,
.sjd.sjd h5,
.sjd.sjd h6 {
    text-transform: none;
    letter-spacing: normal;
    font-style: normal;
}

.sjd.sjd .sjd-h2 { font-size: 30px; font-weight: 800; margin: 0 0 var(--sjd-3); line-height: 1.2; }
.sjd.sjd .sjd-h3 { font-size: 19px; font-weight: 700; margin: 0 0 var(--sjd-1); line-height: 1.3; }
.sjd.sjd .sjd-lede { font-size: 16px; color: var(--sjd-neutral-800); margin: 0 0 var(--sjd-6); }
.sjd.sjd .sjd-muted { font-size: 13px; color: var(--sjd-neutral-600); }
.sjd.sjd .sjd-loading { color: var(--sjd-neutral-600); font-size: 14px; margin: 0; }

/* ── Messages ─────────────────────────────────────────────────────────────── */

.sjd.sjd .sjd-msg {
    border-radius: var(--sjd-radius-md);
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: var(--sjd-4);
}
.sjd.sjd .sjd-msg-info { border: 1px solid var(--sjd-divider); background: var(--sjd-surface); color: var(--sjd-neutral-800); }
.sjd.sjd .sjd-msg-error {
    border: 1px solid color-mix(in srgb, var(--sjd-error-ink) 40%, transparent);
    background: var(--sjd-error-bg);
    color: var(--sjd-error-ink);
}

/* ── Tags ─────────────────────────────────────────────────────────────────── */

.sjd.sjd .sjd-tag {
    display: inline-block;
    border-radius: var(--sjd-radius-pill);
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.sjd.sjd .sjd-tag-open { background: var(--sjd-ok-bg); color: var(--sjd-ok-ink); }
.sjd.sjd .sjd-tag-done { background: var(--sjd-done-bg); color: var(--sjd-done-ink); }
.sjd.sjd .sjd-tag-tbd { background: var(--sjd-neutral-200); color: var(--sjd-neutral-700); }
.sjd.sjd .sjd-tag-accent { background: var(--sjd-accent-100); color: var(--sjd-accent-800); }
.sjd.sjd .sjd-tag-full { background: var(--sjd-warn-bg); color: var(--sjd-warn-ink); }

/* ── The calendar ─────────────────────────────────────────────────────────── */

.sjd.sjd .sjd-cal { display: flex; flex-direction: column; gap: var(--sjd-8); }
.sjd.sjd .sjd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sjd-4); }

.sjd.sjd .sjd-rule-head { display: flex; align-items: center; gap: var(--sjd-4); margin-bottom: var(--sjd-4); }
/* NO text-transform here.
   This heading is a month name in the calendar ("september") but a sentence in
   the wizard ("Hvilken skole er dere fra?"), and CSS `capitalize` cannot tell
   them apart — it upper-cases every word, turning the sentence into a book
   title and "Dato kommer" into "Dato Kommer". The month names are capitalised
   in JavaScript instead, first letter only, where the code knows what the
   string is. */
.sjd.sjd .sjd-rule-head h4 { margin: 0; font-size: 18px; font-weight: 700; }
.sjd.sjd .sjd-rule-head .sjd-rule { flex: 1; height: 2px; background: var(--sjd-accent-200); }

/* The date "leaf": a small torn-off calendar page. The one motif that repeats
   across the calendar, so it is a component rather than two lookalikes. */
.sjd.sjd .sjd-leaf {
    width: 58px;
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--sjd-neutral-300);
    text-align: center;
    background: var(--sjd-surface);
}
.sjd.sjd .sjd-leaf .mon {
    background: var(--sjd-accent);
    color: var(--sjd-on-accent, #fff);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 0;
}
.sjd.sjd .sjd-leaf .day {
    font-weight: 800;
    font-size: 22px;
    padding: 4px 0 6px;
    color: var(--sjd-text);
    line-height: 1.1;
}
.sjd.sjd .sjd-leaf-tbd { border-style: dashed; }
.sjd.sjd .sjd-leaf-tbd .mon { background: var(--sjd-neutral-200); color: var(--sjd-neutral-700); }
.sjd.sjd .sjd-leaf-tbd .day { color: var(--sjd-neutral-600); }

.sjd.sjd .sjd-card {
    background: var(--sjd-surface);
    border-radius: var(--sjd-radius-md);
    box-shadow: var(--sjd-shadow-sm);
    padding: var(--sjd-4) var(--sjd-5);
    display: flex;
    align-items: center;
    gap: var(--sjd-6);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    text-align: left;
    width: 100%;
    border: 0;
    font: inherit;
}
.sjd.sjd .sjd-card:hover { box-shadow: var(--sjd-shadow-md); }
.sjd.sjd .sjd-card .body { min-width: 0; }
.sjd.sjd .sjd-card .school { font-weight: 700; font-size: 15.5px; margin-bottom: 5px; }
/* Places left, under the status tag. Deliberately the quietest line on the
   card: the name and the date are what someone is scanning for. */
.sjd.sjd .sjd-card .places { margin-top: 4px; font-size: 12px; color: var(--sjd-neutral-700); }
.sjd.sjd .sjd-card .go { margin-left: auto; padding-right: var(--sjd-3); font-size: 18px; font-weight: 600; color: var(--sjd-accent-700); }

/* A school with no date yet. Quieter than a booked one — dashed rather than
   raised, so a full calendar still reads date-first. */
.sjd.sjd .sjd-card-pending {
    box-shadow: none;
    border: 2px dashed var(--sjd-neutral-400);
    background: transparent;
}
.sjd.sjd .sjd-card-pending:hover { box-shadow: none; border-color: var(--sjd-accent); background: var(--sjd-surface); }
.sjd.sjd .sjd-card-pending .school { color: var(--sjd-neutral-800); }
.sjd.sjd .sjd-card-static { cursor: default; }
.sjd.sjd .sjd-card-static:hover { box-shadow: var(--sjd-shadow-sm); }
.sjd.sjd .sjd-card-pending.sjd-card-static:hover { box-shadow: none; border-color: var(--sjd-neutral-400); background: transparent; }

/* ── The project's own dates ──────────────────────────────────────────────────

   A calendar does not only hold the mornings schools booked. A project has dates
   of its own — the final the school tournaments feed into, a seminar for the
   adults — and they are created in the admin panel on skoleturnering.no, which
   runs every project. Each carries an ACCENT and a STYLE, and this is where the
   two are drawn.

   Four accents, not a colour picker: a free colour would have to stay legible
   against black-on-white and against all three regional tints, and none of the
   people setting one can see the result before a visitor does. Each of these is
   built out of the tokens above, so a regional page keeps its own colour and an
   inherited one keeps the theme's. */

.sjd.sjd .sjd-leaf-seminar .mon { background: var(--sjd-seminar-amber); color: #16202e; }
.sjd.sjd .sjd-leaf-action .mon { background: var(--sjd-btn-bg); color: var(--sjd-btn-text); }
.sjd.sjd .sjd-leaf-quiet .mon { background: var(--sjd-neutral-300); color: var(--sjd-neutral-800); }

/* A FEATURE ROW: one row, full width, in a colour of its own — the row the
   cards above it lead to. */
.sjd.sjd .sjd-feature {
    background: var(--sjd-btn-bg);
    color: var(--sjd-btn-text);
    border-radius: var(--sjd-radius-md);
    padding: var(--sjd-5) var(--sjd-6);
    display: flex;
    align-items: center;
    gap: var(--sjd-6);
    cursor: pointer;
    text-decoration: none;
}
.sjd.sjd .sjd-feature:hover { filter: brightness(.96); }
.sjd.sjd .sjd-feature-action { background: var(--sjd-btn-bg); color: var(--sjd-btn-text); }
/* The accent carries structure rather than action, so a row in it reads as a
   heading for the month. Its ink comes from the same token the leaf uses, which
   is dark on a regional tint and white on the default navy. */
.sjd.sjd .sjd-feature-default { background: var(--sjd-accent); color: var(--sjd-on-accent, #fff); }
.sjd.sjd .sjd-feature-default .go { color: var(--sjd-on-accent, #fff); }
.sjd.sjd .sjd-feature-seminar { background: var(--sjd-seminar-amber); color: #16202e; }
.sjd.sjd .sjd-feature-quiet { background: var(--sjd-neutral-200); color: var(--sjd-text); }
/* Settled, but with nowhere to send anyone. It keeps its place and its colour
   and drops only the affordances, so it never invites a click that goes nowhere. */
.sjd.sjd .sjd-feature-static { cursor: default; }
.sjd.sjd .sjd-feature-static:hover { filter: none; }
.sjd.sjd .sjd-feature .sjd-leaf { width: 62px; border: 0; }
.sjd.sjd .sjd-feature .sjd-leaf .day { font-size: 24px; }
.sjd.sjd .sjd-feature .t { font-weight: 800; font-size: 19px; margin-bottom: 5px; }
.sjd.sjd .sjd-feature .d { font-size: 14px; font-weight: 600; }
.sjd.sjd .sjd-feature .go { margin-left: var(--sjd-4); font-size: 20px; font-weight: 600; color: inherit; }
/* The tag sits on the row's own colour rather than on the page, so it is the
   light one whatever the accent underneath it turns out to be. */
.sjd.sjd .sjd-feature .sjd-tag { background: rgba(255, 255, 255, .9); color: #16202e; }

/* ── The tournament page ──────────────────────────────────────────────────── */

.sjd.sjd .sjd-back {
    background: none;
    border: 0;
    padding: 0;
    margin-bottom: var(--sjd-6);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--sjd-accent);
    cursor: pointer;
}
.sjd.sjd .sjd-back:hover { color: var(--sjd-accent-700); }

/* STRETCH, not start: the sign-up box is meant to end level with the column
   beside it rather than wherever its own contents happen to finish. The row's
   height is the taller of the two, and both fill it. */
.sjd.sjd .sjd-detail-grid {
    display: grid;
    grid-template-columns: 1.35fr .95fr;
    gap: var(--sjd-8);
    align-items: stretch;
}
.sjd.sjd .sjd-detail-grid > aside { display: flex; flex-direction: column; }
.sjd.sjd .sjd-detail-head h2 { font-size: 34px; margin-bottom: var(--sjd-3); }
.sjd.sjd .sjd-detail-meta { display: flex; gap: var(--sjd-3); align-items: center; margin-bottom: var(--sjd-6); flex-wrap: wrap; }

.sjd.sjd .sjd-tabs {
    display: flex;
    gap: var(--sjd-6);
    border-bottom: 2px solid var(--sjd-divider);
    margin-bottom: var(--sjd-6);
    flex-wrap: wrap;
}
.sjd.sjd .sjd-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0 0 var(--sjd-3);
    font: inherit;
    font-size: 15px;
    color: var(--sjd-neutral-600);
    cursor: pointer;
}
.sjd.sjd .sjd-tab:hover { color: var(--sjd-text); }
.sjd.sjd .sjd-tab[aria-selected="true"] { font-weight: 600; color: var(--sjd-text); border-bottom-color: var(--sjd-accent); }

/* ── The standings table ──────────────────────────────────────────────────────
   Enfold styles tables through `#top table`, `#top th` and `#top td` — striped
   backgrounds, its own borders, its own font — and those are ID selectors, so
   the same fight as the form fields further down. The declarations that the
   theme would otherwise win carry !important for the same reason.

   A parent is looking for one name in a list of seventy, so the name column
   takes the room and everything numeric is pushed right and tabular; a column of
   scores that does not line up is a column nobody can compare down. The
   tie-break columns are the quietest thing here: they decide the order, but
   almost nobody reads them, and on a phone they scroll away first. */
.sjd.sjd .sjd-table-scroll { overflow-x: auto; }
.sjd.sjd .sjd-table {
    width: 100%;
    border-collapse: collapse !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: none !important;
    margin: 0 0 var(--sjd-5) !important;
    border: 0 !important;
}
.sjd.sjd .sjd-table th {
    text-align: left !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sjd-neutral-600) !important;
    padding: var(--sjd-2) !important;
    border: 0 !important;
    border-bottom: 2px solid var(--sjd-divider) !important;
    background: none !important;
    white-space: nowrap;
}
.sjd.sjd .sjd-table td {
    padding: var(--sjd-2) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sjd-divider) !important;
    background: none !important;
    color: var(--sjd-text) !important;
    vertical-align: middle !important;
}
.sjd.sjd .sjd-table tbody tr:hover td {
    background: color-mix(in srgb, var(--sjd-text) 4%, transparent) !important;
}
.sjd.sjd .sjd-table .num { text-align: right !important; font-variant-numeric: tabular-nums; }
.sjd.sjd .sjd-standings td:first-child { color: var(--sjd-neutral-700) !important; width: 1%; }
.sjd.sjd .sjd-standings td:nth-child(2) { font-weight: 600 !important; width: 99%; }
.sjd.sjd .sjd-standings th:nth-child(n+4),
.sjd.sjd .sjd-standings td:nth-child(n+4) {
    color: var(--sjd-neutral-600) !important;
    font-size: 13px !important;
}

.sjd.sjd .sjd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sjd-3); margin: 0 0 var(--sjd-6); }
.sjd.sjd .sjd-facts > div { background: var(--sjd-surface); border-radius: var(--sjd-radius-md); padding: var(--sjd-4); }
/* "SLIK SPILLES TURNERINGEN" is a label of the same kind as "DATO OG TID", so it
   is literally the same rule — one selector list rather than a copy, so the two
   cannot drift apart. It is NOT `.sjd-card-kicker`: that is the small blue label
   the design uses elsewhere, at a different size. */
.sjd.sjd .sjd-facts dt,
.sjd.sjd .sjd-howto-head {
    font-size: 13px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sjd-neutral-600) !important;
    margin: 0 0 var(--sjd-1) !important;
    font-weight: 700 !important;
}
.sjd.sjd .sjd-facts dd { font-weight: 600; font-size: 15px; margin: 0; }

.sjd.sjd .sjd-card-kicker {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sjd-accent-700);
    font-weight: 700;
}
.sjd.sjd .sjd-card:not(.sjd-card-pending) + .sjd-card { margin-top: 0; }
.sjd.sjd .sjd-tab-panel .sjd-card {
    display: block;
    cursor: default;
    padding: var(--sjd-5);
}
.sjd.sjd .sjd-card-body { margin: var(--sjd-2) 0 0; font-size: 14px; color: var(--sjd-neutral-800); }

/* "Slik spilles turneringen": five questions, each with a one-line answer. The
   question carries the weight because it is what a parent scans for. Enfold
   styles dt/dd itself, hence the doubled class and the margins stated rather
   than inherited. */
.sjd.sjd .sjd-howto {
    margin: var(--sjd-2) 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sjd-neutral-800);
    /* Two columns, and a GRID rather than CSS columns: multi-column flow would
       be free to break between a question and its answer, which is the one place
       a break must never fall. One pair is one cell, so it cannot. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sjd-4) var(--sjd-8);
    align-items: start;
}
.sjd.sjd .sjd-howto > div { margin: 0; }
/* The question in bold, the answer plain beneath it. The grid gap does the
   vertical spacing; the !important on dd is Enfold, which indents dd and would
   otherwise push every answer off the question it belongs to. */
.sjd.sjd .sjd-howto dt { font-weight: 700 !important; color: var(--sjd-text) !important; margin: 0 !important; }
.sjd.sjd .sjd-howto dd { margin: 0 !important; }

.sjd.sjd .sjd-note-box {
    border: 2px dashed var(--sjd-neutral-400);
    border-radius: var(--sjd-radius-md);
    padding: var(--sjd-6);
    font-size: 14px;
    line-height: 1.7;
    color: var(--sjd-neutral-800);
    margin-bottom: var(--sjd-6);
}

.sjd.sjd .sjd-btn {
    display: inline-block;
    background: var(--sjd-btn-bg);
    color: var(--sjd-btn-text);
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--sjd-radius-pill);
    padding: 12px 24px;
    text-decoration: none;
}
.sjd.sjd .sjd-btn:hover { background: var(--sjd-btn-bg-hover); color: var(--sjd-btn-text); }

/* The photo report. Tiles of one shape whatever the camera was held like — a
   mixed portrait/landscape grid reads as broken rather than as variety. */
.sjd.sjd .sjd-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sjd-4); }
.sjd.sjd .sjd-photo { margin: 0; }
.sjd.sjd .sjd-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--sjd-radius-md);
    display: block;
}
.sjd.sjd .sjd-photo figcaption { font-size: 13px; color: var(--sjd-neutral-700); margin-top: var(--sjd-2); }

/* ── The sign-up panel ────────────────────────────────────────────────────── */

.sjd.sjd .sjd-signup-card {
    border-radius: var(--sjd-radius-lg);
    padding: var(--sjd-6);
    background: var(--sjd-surface);
    box-shadow: var(--sjd-shadow-md);
    /* Fills the stretched aside, so the box ends where the column beside it
       does. The grid's own gap spaces the two once they stack on a phone. */
    flex: 1;
}
.sjd.sjd .sjd-signup-note {
    font-size: 13px;
    font-weight: 600;
    color: var(--sjd-accent-700);
    margin: 0 0 var(--sjd-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   The Zugzwang registration widget
   --------------------------------------------------------------------------
   The embed ships its own styling, themed from a handful of CSS variables on
   .zzreg. Overriding them here is what makes the form read as part of this page
   rather than as a foreign panel — no forking of the script, so it keeps
   picking up field changes made in Zugzwang.

   `.zzreg.zzreg` rather than `.zzreg`, and it matters: the embed script injects
   its own <style> into <head> at runtime, i.e. AFTER this file's <link>. At
   equal specificity the later rule wins, so a plain `.zzreg` block here would be
   silently ignored and the form would render in Zugzwang's own blue.
   ══════════════════════════════════════════════════════════════════════════ */

.sjd.sjd .zzreg.zzreg {
    --zz-fg: var(--sjd-text);
    --zz-muted: var(--sjd-neutral-700);
    /* --sjd-field-border, NOT --sjd-divider. The divider is a tint of the
       accent, and here the accent is itself a pale regional tint — a tint of a
       tint is a line nobody can see. Same reasoning, and the same token, as the
       wizard's own fields below. */
    --zz-border: var(--sjd-field-border);
    --zz-bg: transparent;
    --zz-field: var(--sjd-bg);
    --zz-accent: var(--sjd-accent);
    --zz-error: var(--sjd-error-ink);
    --zz-ok: var(--sjd-ok-ink);
    --zz-warn: var(--sjd-warn-ink);
    font-family: inherit;
    max-width: 100%;
}
/* Enfold styles `#top label` too — big, bold and in the heading colour, which is
   what turned these into headlines competing with the field they name. Same
   specificity problem as the boxes below, same answer. */
.sjd.sjd .zzreg .zzreg-label {
    display: block;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--sjd-neutral-700) !important;
    margin: 0 0 var(--sjd-1) !important;
}

/* ── THE EMBED'S FIELDS HAVE THE SAME FIGHT AS THE WIZARD'S ─────────────────
   The variables above do nothing on their own here. The embed declares its
   boxes as `.zzreg-input{border:1px solid var(--zz-border);background:var(--zz-field)}`
   — a single class, (0,1,0) — and Enfold declares `#top input[type="text"]`,
   which is (1,0,1) and wins outright. So the border and the fill were being
   thrown away and the form rendered as labels floating over nothing: no boxes
   at all, which is worse than the faint boxes the wizard started with.

   These are the same declarations `.sjd-input` carries further down, on the
   embed's own class names, and they carry `!important` for the same reason: the
   theme's rule is unreachable by any legitimate means, and a form whose boxes
   cannot be seen is not a cosmetic problem. Keep the two blocks in step — they
   are one design, drawn twice because the markup comes from two places.
   ─────────────────────────────────────────────────────────────────────────── */
.sjd.sjd .zzreg .zzreg-input,
.sjd.sjd .zzreg .zzreg-select,
.sjd.sjd .zzreg .zzreg-textarea {
    width: 100%;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--sjd-text) !important;
    caret-color: var(--sjd-accent);
    background: var(--sjd-bg) !important;
    border: 1px solid var(--sjd-field-border) !important;
    border-radius: var(--sjd-radius-sm) !important;
    box-shadow: none !important;
}
.sjd.sjd .zzreg .zzreg-input:hover,
.sjd.sjd .zzreg .zzreg-select:hover,
.sjd.sjd .zzreg .zzreg-textarea:hover {
    border-color: color-mix(in srgb, var(--sjd-text) 55%, transparent) !important;
}
.sjd.sjd .zzreg .zzreg-input:focus,
.sjd.sjd .zzreg .zzreg-select:focus,
.sjd.sjd .zzreg .zzreg-textarea:focus {
    border-color: var(--sjd-accent-700) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sjd-accent) 35%, transparent) !important;
    outline: none;
}
.sjd.sjd .zzreg .zzreg-textarea { min-height: 90px !important; resize: vertical; }

/* Enfold paints placeholders BLACK, which makes an empty field look like a
   filled one. Same fix, and the same three spellings, as the wizard's. */
.sjd.sjd .zzreg .zzreg-input::placeholder,
.sjd.sjd .zzreg .zzreg-textarea::placeholder {
    color: color-mix(in srgb, var(--sjd-text) 45%, transparent) !important;
    opacity: 1 !important;
}
.sjd.sjd .zzreg .zzreg-input::-webkit-input-placeholder,
.sjd.sjd .zzreg .zzreg-textarea::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--sjd-text) 45%, transparent) !important;
    opacity: 1 !important;
}
.sjd.sjd .zzreg .zzreg-input::-moz-placeholder,
.sjd.sjd .zzreg .zzreg-textarea::-moz-placeholder {
    color: color-mix(in srgb, var(--sjd-text) 45%, transparent) !important;
    opacity: 1 !important;
}
/* A field the visitor has to go back to. The embed marks the ROW invalid, so
   this reaches the box through it — and needs !important for the same reason. */
.sjd.sjd .zzreg .zzreg-row.zzreg-invalid .zzreg-input,
.sjd.sjd .zzreg .zzreg-row.zzreg-invalid .zzreg-select,
.sjd.sjd .zzreg .zzreg-row.zzreg-invalid .zzreg-textarea {
    border-color: var(--sjd-error-ink) !important;
    background: color-mix(in srgb, var(--sjd-error-bg) 60%, var(--sjd-bg)) !important;
}
.sjd.sjd .zzreg .zzreg-hint { font-size: 12.5px; color: var(--sjd-neutral-600) !important; }

/* The submit is the site's primary button: the region's colour, dark ink. */
.sjd.sjd .zzreg .zzreg-btn {
    background: var(--sjd-btn-bg);
    color: var(--sjd-btn-text);
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--sjd-radius-pill);
    padding: 14px;
    width: 100%;
    margin-top: var(--sjd-1);
}
.sjd.sjd .zzreg .zzreg-btn:hover { background: var(--sjd-btn-bg-hover); }

/* ══════════════════════════════════════════════════════════════════════════
   The booking wizard  —  [sjakkduell_bestilling]
   --------------------------------------------------------------------------
   One column of steps with nothing beside it, so it is centred and narrower
   than the page: a slot picker and a four-field form read badly across a full
   content width. Cards keep their own left-aligned insides — a centred form
   label is harder to scan, not easier.
   ══════════════════════════════════════════════════════════════════════════ */

.sjd.sjd-wizard { max-width: 820px; margin-inline: auto; }

/* — progress — */

.sjd.sjd .sjd-steps {
    display: flex;
    gap: var(--sjd-4);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 var(--sjd-8);
    padding: 0;
}
.sjd.sjd .sjd-step { display: flex; align-items: center; gap: var(--sjd-2); font-size: 13px; color: var(--sjd-neutral-600); }
.sjd.sjd .sjd-step .n {
    width: 26px;
    height: 26px;
    border-radius: var(--sjd-radius-pill);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12px;
    background: var(--sjd-neutral-200);
    color: var(--sjd-neutral-600);
}
.sjd.sjd .sjd-step.active { color: var(--sjd-text); font-weight: 600; }
.sjd.sjd .sjd-step.active .n { background: var(--sjd-btn-bg); color: var(--sjd-btn-text); }
.sjd.sjd .sjd-step.done .n { background: var(--sjd-accent); color: var(--sjd-on-accent, #fff); }

/* — cards and fields — */

.sjd.sjd .sjd-form-card {
    background: var(--sjd-surface);
    border-radius: var(--sjd-radius-lg);
    box-shadow: var(--sjd-shadow-md);
    padding: var(--sjd-8);
    margin-inline: auto;
}
.sjd.sjd .sjd-intro { font-size: 15px; line-height: 1.6; color: var(--sjd-neutral-800); margin: 0 0 var(--sjd-6); }

.sjd.sjd .sjd-field { display: flex; flex-direction: column; gap: var(--sjd-1); margin-bottom: var(--sjd-5); }
.sjd.sjd .sjd-field > label,
.sjd.sjd .sjd-field > .sjd-field-label { font-size: 12px; color: var(--sjd-neutral-700); font-weight: 500; }
.sjd.sjd .sjd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sjd-4); }

/* ══════════════════════════════════════════════════════════════════════════
   The fields, and the one place an ID selector has to be beaten
   --------------------------------------------------------------------------
   Enfold styles text inputs as:

       #top input[type="text"] { border: 1px solid #e1e1e1; padding: 8px 6px;
                                 font: 1em HelveticaNeue…; }

   That `#top` is an ID, specificity (1,0,1). NOTHING built out of classes can
   outrank it — `.sjd.sjd .sjd-input` is (0,3,0) and loses outright, so every
   border, padding and font declared here was being thrown away and the fields
   rendered in Enfold's #e1e1e1: a 1.16:1 line on white, which is why they were
   hard to see at all.

   So these carry `!important`, for the same reason `[hidden]` does — the host
   theme's rule is unreachable by any legitimate means, and a form whose boxes
   cannot be seen is not a cosmetic problem.

   The border is anchored to the TEXT colour rather than to the accent. On
   skoleturnering the accent is a deep blue and a 25% tint of it makes a visible
   line; here the accent is a pale regional tint, and a tint of a tint is
   invisible again. Derived from the ink, it has presence whatever the region.
   ══════════════════════════════════════════════════════════════════════════ */

.sjd.sjd .sjd-input {
    width: 100%;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--sjd-text) !important;
    caret-color: var(--sjd-accent);
    background: var(--sjd-bg) !important;
    border: 1px solid var(--sjd-field-border) !important;
    border-radius: var(--sjd-radius-sm) !important;
    box-shadow: none !important;
}
.sjd.sjd .sjd-input:hover {
    border-color: color-mix(in srgb, var(--sjd-text) 55%, transparent) !important;
}
.sjd.sjd .sjd-input:focus,
.sjd.sjd .sjd-input:focus-visible {
    border-color: var(--sjd-accent-700) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sjd-accent) 35%, transparent) !important;
    outline: none;
}
.sjd.sjd textarea.sjd-input { min-height: 90px !important; resize: vertical; }

/* The prompt inside an empty box. Enfold paints these BLACK
   (`.main_color ::-webkit-input-placeholder { color: #000 }`), which makes an
   empty field look like a filled one — the single most misleading thing a form
   can do. Translucent grey instead, so it reads as "type here" rather than as
   an answer somebody already gave. Both spellings, because Enfold targets the
   old WebKit one and a browser applies whichever it recognises. */
.sjd.sjd .sjd-input::placeholder {
    color: color-mix(in srgb, var(--sjd-text) 45%, transparent) !important;
    opacity: 1 !important;
}
.sjd.sjd .sjd-input::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--sjd-text) 45%, transparent) !important;
    opacity: 1 !important;
}
.sjd.sjd .sjd-input::-moz-placeholder {
    color: color-mix(in srgb, var(--sjd-text) 45%, transparent) !important;
    opacity: 1 !important;
}
.sjd.sjd .sjd-hint { font-size: 12.5px; color: var(--sjd-neutral-600); margin: var(--sjd-1) 0 0; }
.sjd.sjd .sjd-error { font-size: 12.5px; color: var(--sjd-error-ink); font-weight: 500; margin: var(--sjd-1) 0 0; }
/* A field the visitor has to go back to. `!important` for the same reason as
   the base border above — the theme's #top rule would otherwise keep its own. */
.sjd.sjd .sjd-field.invalid .sjd-input {
    border-color: var(--sjd-error-ink) !important;
    background: color-mix(in srgb, var(--sjd-error-bg) 60%, var(--sjd-bg)) !important;
}
.sjd.sjd .sjd-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 13.5px !important;
}

/* The access code is read off a letter and typed once — give it room. */
.sjd.sjd .sjd-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-align: center;
    padding: 16px 12px !important;
    min-height: 62px !important;
}

.sjd.sjd .sjd-btn-secondary {
    background: transparent;
    color: var(--sjd-text);
    border: 1px solid var(--sjd-divider);
}
.sjd.sjd .sjd-btn-secondary:hover { background: color-mix(in srgb, var(--sjd-text) 7%, transparent); color: var(--sjd-text); }
.sjd.sjd .sjd-btn:disabled { opacity: .45; cursor: not-allowed; }
.sjd.sjd button.sjd-btn { cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; border: 0; }

.sjd.sjd .sjd-actions { display: flex; justify-content: center; gap: var(--sjd-3); flex-wrap: wrap; margin-top: var(--sjd-6); }

.sjd.sjd .sjd-callout {
    background: var(--sjd-accent-100);
    border-radius: var(--sjd-radius-md);
    padding: var(--sjd-4) var(--sjd-6);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--sjd-accent-800);
    width: fit-content;
    margin: var(--sjd-6) auto 0;
}

/* — the slot picker as a month calendar —
   A school picks its date against a term plan it already has in its head, so
   the picker is laid out the way that plan is: weeks down the side, weekdays
   across. The week-number column is not decoration — it is the unit Norwegian
   schools schedule in, and it is what makes "the week after the autumn break"
   answerable without counting. */

.sjd.sjd .sjd-months { display: flex; flex-direction: column; gap: var(--sjd-8); }
.sjd.sjd .sjd-cal-month .sjd-rule-head h4 { font-size: 18px; }

.sjd.sjd .sjd-cal-table { width: 100%; border-collapse: separate; border-spacing: var(--sjd-2); table-layout: fixed; }
.sjd.sjd .sjd-cal-table thead th {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sjd-neutral-600);
    font-weight: 600;
    padding-bottom: var(--sjd-1);
    text-align: center;
}
.sjd.sjd .sjd-cal-table thead th abbr { text-decoration: none; }

/* The week number sits outside the grid of days: no card, no border, just the
   number — it labels the row rather than being part of it. */
.sjd.sjd .sjd-cal-week {
    width: 44px;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--sjd-neutral-600);
    text-align: center;
    vertical-align: middle;
}

.sjd.sjd .sjd-cal-day {
    background: color-mix(in srgb, var(--sjd-text) 3%, transparent);
    border-radius: var(--sjd-radius-md);
    padding: var(--sjd-2);
    vertical-align: top;
    height: 74px;
}
.sjd.sjd .sjd-cal-out { background: transparent; }
.sjd.sjd .sjd-cal-daynum {
    display: block;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--sjd-neutral-600);
    margin-bottom: var(--sjd-1);
    text-align: right;
}

/* A day that can actually be booked: white, raised and with its times on it.
   Everything else on the grid is context for these. */
.sjd.sjd .sjd-cal-day-free { background: var(--sjd-surface); box-shadow: var(--sjd-shadow-sm); }
.sjd.sjd .sjd-cal-day-free .sjd-cal-daynum { color: var(--sjd-text); font-weight: 700; }
.sjd.sjd .sjd-cal-slot {
    display: block;
    width: 100%;
    font: inherit;
    font-weight: 600;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    padding: 6px 4px;
    margin-top: 4px;
    border: 2px solid transparent;
    border-radius: var(--sjd-radius-sm);
    background: var(--sjd-accent-100);
    color: var(--sjd-accent-800);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}
.sjd.sjd .sjd-cal-slot:hover { background: var(--sjd-accent-200); }
.sjd.sjd .sjd-cal-slot[aria-pressed="true"] {
    background: var(--sjd-btn-bg);
    color: var(--sjd-btn-text);
    border-color: var(--sjd-btn-bg-hover);
}
.sjd.sjd .sjd-cal-slot-short { display: none; }

/* — the receipt — */

.sjd.sjd .sjd-confirmed {
    color: var(--sjd-ok-ink);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 var(--sjd-2);
}
.sjd.sjd .sjd-receipt-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sjd-3) var(--sjd-6);
    margin: 0 0 var(--sjd-6);
    font-size: 15px;
}
.sjd.sjd .sjd-receipt-facts dt {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sjd-neutral-600);
    padding-top: 3px;
}
.sjd.sjd .sjd-receipt-facts dd { margin: 0; color: var(--sjd-text); }

.sjd.sjd .sjd-copy-row { display: flex; gap: var(--sjd-3); align-items: center; flex-wrap: wrap; }
.sjd.sjd .sjd-copy-row .sjd-input { flex: 1; min-width: 260px; }

/* The code panel sizes itself to the code and the sentence that explains it,
   instead of stretching to the width of the receipt card and leaving a field of
   empty navy to the right of an eight-character code. */
.sjd.sjd .sjd-code-box {
    background: var(--sjd-code-bg);
    color: var(--sjd-code-ink);
    border-radius: var(--sjd-radius-lg);
    padding: var(--sjd-6);
    margin: var(--sjd-6) 0;
    width: fit-content;
    max-width: 100%;
}
/* EVERY piece of text on the panel takes the panel's own ink.
   This is what made the panel look half-empty. Enfold paints inline emphasis
   black for its main colour set —

       .main_color strong, .main_color b, .main_color a { color: #000000; }

   — so "Ta vare på den:" rendered black on blue at 1.54:1 while the plain text
   beside it sat at 13.6:1. One sentence in the paragraph was simply missing.

   Lightening the panel does not fix this: black on blue only reaches 3:1 even
   at a blue pale enough to break the coral. The ink has to be set. */
.sjd.sjd .sjd-code-box,
.sjd.sjd .sjd-code-box p,
.sjd.sjd .sjd-code-box h6,
.sjd.sjd .sjd-code-box strong,
.sjd.sjd .sjd-code-box b,
.sjd.sjd .sjd-code-box em,
.sjd.sjd .sjd-code-box a { color: var(--sjd-code-ink); }
.sjd.sjd .sjd-code-box a { text-decoration: underline; }

/* The button on the dark panel. It must NOT take the page's button colour —
   that one is chosen to read against the page, and on this site it is black,
   which on navy reads as a hole cut in the panel rather than as a control. */
.sjd.sjd .sjd-code-box .sjd-btn {
    background: var(--sjd-code-accent);
    color: #16202e;
}
.sjd.sjd .sjd-code-box .sjd-btn:hover {
    background: color-mix(in srgb, var(--sjd-code-accent) 82%, #fff);
    color: #16202e;
}
.sjd.sjd .sjd-code-box h6 {
    margin: 0 0 var(--sjd-3);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}
.sjd.sjd .sjd-code-box p { font-size: 14px; line-height: 1.6; margin: var(--sjd-4) 0 0; max-width: 52ch; }
.sjd.sjd .sjd-receipt-code {
    font: 700 30px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .2em;
    color: var(--sjd-code-accent);
    background: rgba(0, 0, 0, .22);
    padding: 10px 18px;
    border-radius: var(--sjd-radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   --------------------------------------------------------------------------
   EVERY SELECTOR IN HERE IS `.sjd.sjd`, NOT `.sjd`, AND THAT IS THE WHOLE
   POINT OF THIS COMMENT.

   The component rules above are all doubled — `.sjd.sjd .sjd-grid` — so a
   theme cannot break the layout. This block used to be written with a single
   `.sjd`, which is (0,2,0) against the components' (0,3,0): the media queries
   matched, and then lost. Nothing in here applied, at any width, ever. The
   widget rendered its desktop layout on a phone and ran ~900px wide inside a
   390px viewport, with half the calendar off the right-hand edge.

   So: if you add a rule here, double the class. A responsive rule that is one
   class short does not fail loudly — it fails by looking fine on your desktop.

   The breakpoints match skoleturnering.no's (1080 / 900 / 700 / 620) rather
   than being chosen afresh, because the two calendars are the same calendar
   and they should stop being three-across at the same moment. They fire a
   little early here, since the widget sits inside the theme's container and
   never has the whole viewport to itself — which is the safe direction to err.

   One assumption unwound per breakpoint rather than scaling the page down: at
   1080px the sidebar stops being a sidebar and the grids halve, at 900px
   everything goes one column, at 700px the month calendar gives up its full
   time spans, at 620px the cards tighten.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .sjd.sjd .sjd-detail-grid { grid-template-columns: 1fr; gap: var(--sjd-8); }
    .sjd.sjd .sjd-detail-head h2 { font-size: 28px; }
    .sjd.sjd .sjd-grid { grid-template-columns: repeat(2, 1fr); }
    .sjd.sjd .sjd-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .sjd.sjd .sjd-grid { grid-template-columns: 1fr; }
    .sjd.sjd .sjd-facts { grid-template-columns: 1fr; }
    .sjd.sjd .sjd-field-row { grid-template-columns: 1fr; }
    .sjd.sjd .sjd-form-card { padding: var(--sjd-6); }
    .sjd.sjd .sjd-h2 { font-size: 25px; }

    /* Two columns of answers in a single-column page is two narrow columns. */
    .sjd.sjd .sjd-howto { grid-template-columns: 1fr; gap: var(--sjd-3); }

    /* The feature row is a leaf, a title, a line of detail and a tag on one
       line. At this width it wraps instead, and the arrow goes: a row that has
       become two lines has stopped reading as something to click along. */
    .sjd.sjd .sjd-feature { flex-wrap: wrap; gap: var(--sjd-4); padding: var(--sjd-5); }
    .sjd.sjd .sjd-feature .go { display: none; }
    .sjd.sjd .sjd-feature .sjd-tag { margin-left: 0 !important; }
}

@media (max-width: 700px) {
    .sjd.sjd .sjd-photo-grid { grid-template-columns: 1fr; }

    /* A phone's day cell is about 55px wide. "10:00-12:00" cannot fit and would
       be clipped into a half-legible time, so the start alone is shown — the
       full span stays on the button's aria-label, which is what a screen reader
       announces either way. */
    .sjd.sjd .sjd-cal-slot-full { display: none; }
    .sjd.sjd .sjd-cal-slot-short { display: inline; }
    .sjd.sjd .sjd-cal-table { border-spacing: 3px; }
    .sjd.sjd .sjd-cal-week { width: 26px; font-size: 11px; }
    .sjd.sjd .sjd-cal-day { height: 62px; padding: 4px; }
    .sjd.sjd .sjd-cal-daynum { font-size: 11px; }
    .sjd.sjd .sjd-cal-slot { font-size: 11px; padding: 4px 2px; }
}

@media (max-width: 620px) {
    .sjd.sjd .sjd-card { gap: var(--sjd-4); padding: var(--sjd-3) var(--sjd-4); }
    .sjd.sjd .sjd-tabs { gap: var(--sjd-4); }
    .sjd.sjd .sjd-steps { gap: var(--sjd-3); }
    .sjd.sjd .sjd-step { font-size: 12px; }
    .sjd.sjd .sjd-receipt-code { font-size: 22px; letter-spacing: .15em; }
    .sjd.sjd .sjd-receipt-facts { grid-template-columns: 1fr; gap: var(--sjd-1) 0; }
    .sjd.sjd .sjd-receipt-facts dd { margin-bottom: var(--sjd-3); }

    /* The standings scroll sideways inside their own box rather than widening
       the page — the name and the points are what a parent came for, and the
       tie-break columns are the ones worth pushing off the edge. */
    .sjd.sjd .sjd-table { font-size: 13px !important; }
    .sjd.sjd .sjd-table th, .sjd.sjd .sjd-table td { padding: var(--sjd-2) var(--sjd-1) !important; }
    .sjd.sjd .sjd-standings td:nth-child(2) { min-width: 9em; }
}