/* Venocast — the design system.
 *
 * Established in work package 03.1 and approved before any interface was
 * built on it. Every later stage uses these tokens and these components;
 * adding an eighth component is a conversation, not a default.
 *
 * Light only, deliberately. The admin is used in daylight in a clubhouse
 * office, and a second theme is a second set of contrast measurements to
 * maintain for a benefit nobody has asked for. Every colour is set
 * explicitly so the page never borrows a ground from its surroundings.
 */

/* ── Type (R1) ────────────────────────────────────────────────────────── */
/* Montserrat, as the design reference sets it, **served by Venocast itself**:
 * the five weights the reference uses, byte-identical to @fontsource/montserrat
 * 5.3.0 (latin), under the SIL Open Font Licence (static/fonts/OFL.txt). No
 * request leaves Venocast for a font, and `font-src 'self'` already says so. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap;
             src: url("fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
    /* Brand, from Brand Colours.png, measured not eyeballed.
     *
     * --accent (#499DA0) reaches only 3.2:1 on white and therefore never
     * carries text or a small control. It is a surface and a mark. --primary
     * (#256C71) reaches 6.1:1 and is what text, links and buttons use. This
     * is the single most important line in this file. */
    /* R1: the design reference's own values (venocast-admin.css). */
    --brand-accent:   #4A9BA0;
    --brand-primary:  #227073;
    --brand-deep:     #123640;
    --brand-ink:      #2D2D2D;
    --brand-paper:    #F4F7F7;

    /* Neutrals, biased very slightly toward the brand's teal so they sit
     * with it rather than beside it. */
    --ground:         var(--brand-paper);
    --surface:        #FFFFFF;
    --sunken:         #F1F5F6;
    /* --border separates surfaces and is decorative: a card is identified by
     * its content and its spacing, not by its edge. --border-strong is the
     * boundary of a control — the thing that tells someone where an input
     * begins — so it is held to 3:1 and measures 3.6:1 on white. It looks
     * darker than a fashionable hairline because a fashionable hairline is
     * not findable by someone with low vision. */
    --border:         #E1E7E9;
    --border-strong:  #7D8A8C;

    --ink:            var(--brand-ink);
    --ink-strong:     var(--brand-deep);
    /* Headings are the reference's ink, not the deep teal. */
    --ink-heading:    var(--brand-ink);
    --ink-muted:      #56636A;

    --primary:        var(--brand-primary);
    --primary-hover:  #1A5A5D;
    --on-primary:     #FFFFFF;
    --accent:         var(--brand-accent);
    --accent-soft:    #E3F1F1;

    /* Status. Deliberately outside the brand palette: a brand teal for
     * "fine" and a brand teal for "needs attention" is not a distinction
     * anyone can make across a room. Never used without its word. */
    --ok:             #17614F;
    --ok-soft:        #E1F1EE;
    --warn:           #7A4D06;
    --warn-soft:      #FCEFD6;
    --idle:           #4F5C62;
    --idle-soft:      #ECEFF0;
    /* R1: the reference's blue for what starts later. */
    --upcoming:       #244F7C;
    --upcoming-soft:  #E5EEF8;

    /* The four tones, by meaning (UI/UX pass). Three are the colours above
     * under the names the pages now speak in; *stopped* is new, a brick red
     * kept outside the brand for the same reason as the others, and used only
     * for something that is not happening and for the confirm button inside a
     * confirmation panel. The word always carries the meaning; colour and the
     * pill's mark shape carry only urgency. Ratios are in the report for this
     * pass, measured rather than eyeballed. */
    --tone-fine:            var(--ok);
    --tone-fine-soft:       var(--ok-soft);
    --tone-attention:       var(--warn);
    --tone-attention-soft:  var(--warn-soft);
    --tone-stopped:         #9E2A2B;
    --tone-stopped-soft:    #FBEAEA;
    --tone-neutral:         var(--idle);
    --tone-neutral-soft:    var(--idle-soft);

    /* A chosen chip, and the hover on a table row. */
    --selected:       var(--accent-soft);
    --row-hover:      var(--sunken);

    /* Type. One system stack — no web font, no build step, nothing to host.
     * Five sizes and three weights; scale discipline does more for
     * typography than an interesting typeface does. */
    --font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --t-xs:   0.78125rem; /* 12.5 — eyebrows, table headers */
    --t-sm:   0.875rem;  /* 14 — secondary text */
    --t-base: 1rem;      /* 16 — body, table cells */
    --t-lg:   1.375rem;  /* 22 — section headings */
    --t-xl:   2.375rem;  /* 38 — page titles */
    /* The eyebrow grey: the reference's #6a777b is 4.49:1 on its table header
     * (#fafcfc), a hair under AA; this is the nearest that passes. */
    --eyebrow:        #66737A;

    /* Space, on a 4px base. */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    --r-sm: 8px;
    --r-ctl: 10px;       /* buttons and inputs */
    --r:    14px;        /* cards, sections, tables */
    --r-pill: 999px;

    /* Borders, not shadows — with one exception spent by role: the open row
     * menu floats over the rows beneath it, and an edge alone does not lift
     * it off them. */
    --shadow-pop: 0 4px 16px rgb(18 54 63 / 0.12);
    --z-menu: 10;

    --shell: 1328px;     /* 1440 less the reference's 56px page padding */
}

/* ── Reset and base ───────────────────────────────────────────────────── */

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

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--t-base);
    font-weight: 500;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink-heading); margin: 0; text-wrap: balance; }
/* `overflow-wrap: anywhere` because a page title is often a club's own business
 * name, and a long unbroken one ran off a 390px screen. */
h1 { font-size: var(--t-xl); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; overflow-wrap: anywhere; }
h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.0625rem; font-weight: 700; }
p  { margin: 0; }

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

img, svg { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--ink-strong);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* **`display` in a class defeats the `hidden` attribute**, and 06.6 found that
 * the hard way: `.preview__media { display: block }` left the hidden <video>
 * occupying half the preview as a dark slab beside the picture, and
 * `.upload__progress { display: flex }` left a full progress bar on screen after
 * the upload had finished. Both looked like script faults and were neither.
 *
 * `!important` is the right tool exactly once: `hidden` is the platform's own way
 * of saying "not here", and nothing in this stylesheet should be able to
 * contradict it. */
[hidden] { display: none !important; }

.muted { color: var(--ink-muted); }
.small { font-size: var(--t-sm); }
.tabular { font-variant-numeric: tabular-nums; }

/* A figure in a column: right-aligned and tabular, so digits line up. */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Read by a screen reader, not drawn. The standard clip pattern — `display:
 * none` would hide it from the screen reader too, which is the one reader it
 * exists for. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Application frame (R1: the reference's dark bar) ─────────────────── */
/* One bar, 68px, brand deep: the lockup, the sections inline, the venue and
 * the person on the right. Values are the reference's (venocast-admin.css):
 * nav text #b4ccd0 on #123640 is 7.7:1, the venue #e3eef0 is 10.9:1. */

.appbar { background: var(--brand-deep); color: #E3EEF0; }
.appbar__inner {
    max-width: calc(var(--shell) + 72px);
    min-height: 68px;
    margin: 0 auto;
    padding: 0 36px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wordmark { display: flex; align-items: center; flex: none; text-decoration: none; }
.wordmark__lockup { display: block; height: 28px; width: auto; }
.wordmark__mark { display: none; height: 30px; width: 30px; }
.appbar__venue { display: none; }

/* Navigation. Seven items, flat, no nesting, inline in the bar. */
.nav {
    display: flex; gap: 4px; margin-left: 36px;
    overflow-x: auto; scrollbar-width: none;
    /* Tidy-up 1: the sections never give way to the club's name. Measured
     * clipping *Reports* at 1280 behind a long name, and *Settings* and
     * *Reports* below 1240 behind any name. */
    flex: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    color: #B4CCD0;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}
.nav a[href]:hover { color: #FFFFFF; background: rgb(255 255 255 / 0.07); }
.nav a[aria-current="page"] { color: #FFFFFF; background: rgb(255 255 255 / 0.13); }

/* Sections that later stages build (F2). In the reference's places, visibly
 * not yet: a control that looks like a working one and does nothing is worse
 * than no control at all. */
.nav a[aria-disabled="true"] { opacity: 0.5; cursor: default; }

/* The venue and the person (F3), with *Switch venue* and *Sign out* behind
 * them in a native disclosure. */
.account { margin-left: auto; position: relative; flex: 0 1 auto; min-width: 0; }
.account__summary {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    list-style: none; cursor: pointer;
    color: #E3EEF0; font-size: 15px; font-weight: 600;
    padding: 4px; border-radius: var(--r-pill);
}
.account__summary::-webkit-details-marker { display: none; }
.account__summary:focus-visible { outline-color: #FFFFFF; }
/* A long club name gives way, not the sections: it ends in an ellipsis, and the
 * whole name is on Home's own header and in the phone bar. */
.account__venue { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Too narrow for the seven sections beside the lockup and the club (below
 * 1240): the sections take a row of their own under them, as the phone bar
 * does, and scroll there only when even a row is too narrow. */
@media (min-width: 761px) and (max-width: 1239px) {
    .appbar__inner { flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
    .nav { order: 3; flex: 1 1 100%; min-width: 0; margin: 0 -14px; padding-bottom: 8px; }
    .nav a { padding: 10px 12px; }
}
/* F1: a neutral disc where the club's own colours will be (Stage 08). */
.clubdot {
    width: 30px; height: 30px; flex: none; border-radius: 50%;
    background: var(--brand-accent); border: 2px solid #E3EEF0;
}
.avatar {
    width: 36px; height: 36px; flex: none; border-radius: 50%;
    background: var(--brand-accent); color: #FFFFFF;
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.account__menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-menu);
    min-width: 14rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: var(--r-ctl);
    box-shadow: var(--shadow-pop);
    padding: var(--s2);
}
.account__who { padding: var(--s2) var(--s3); font-size: var(--t-sm); color: var(--ink-muted); }
.account__menu form { margin: 0; }
.account__item {
    display: block; width: 100%; text-align: left;
    padding: var(--s2) var(--s3); border-radius: var(--r-sm);
    font: inherit; font-weight: 600; font-size: 15px;
    color: var(--ink-strong); background: none; border: 0; cursor: pointer;
    text-decoration: none;
}
.account__item:hover { background: var(--sunken); color: var(--ink-strong); }

main {
    max-width: calc(var(--shell) + 112px);
    margin: 0 auto;
    padding: 40px 56px 56px;
}

/* The reference's phone bar: the mark and the venue's name, the person on the
 * right, and the sections scrolling beneath in the same dark band. */
@media (max-width: 760px) {
    .appbar__inner { flex-wrap: wrap; padding: 0 18px; min-height: 60px; row-gap: 0; }
    .wordmark__lockup { display: none; }
    .wordmark__mark { display: block; }
    .appbar__venue {
        display: block; flex: 1 1 0; min-width: 0;
        color: #FFFFFF; font-size: 17px; font-weight: 700;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        margin-left: 4px;
    }
    .account { order: 2; margin-left: 0; }
    .account__summary { padding: 12px 0; }
    .account__venue, .clubdot { display: none; }
    .nav { order: 3; flex-basis: 100%; margin: 0 -6px; padding-bottom: 10px; }
    .nav a { font-size: 14px; padding: 9px 12px; }
    main { padding: 24px 16px 48px; }
}

/* ── 1. Page header ───────────────────────────────────────────────────── */
/* Title, one line of description, at most one primary action. */

.page-header {
    display: flex;
    align-items: flex-end;
    gap: var(--s4);
    flex-wrap: wrap;
    margin-bottom: var(--s5);
}
.page-header__text { flex: 1 1 20rem; min-width: 0; }
.page-header p { color: var(--ink-muted); margin-top: var(--s1); }
/* R1: the reference's lede — 17px/500, 8px under the title. */
.page-header__text > p:not(.small):not(.meta),
.page-header__lede { font-size: 1.0625rem; font-weight: 500; margin-top: 8px; line-height: 1.5; }
.page-header { margin-bottom: 28px; }

/* The named parts (UI/UX pass). `.page-header p` above still styles the pages
 * written before them. A title with a pill beside it — a retired record, a
 * sponsor's status — sits in `__heading`, which wraps the pill under the title
 * when the title is long rather than squeezing either. */
.page-header__heading {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s2) var(--s3);
}
.page-header__title { overflow-wrap: anywhere; min-width: 0; }
.page-header__lede { max-width: 44rem; }
.page-header__meta { font-size: var(--t-sm); }
/* Rendered only when the role has an action. A viewer's header has no
 * `__actions` at all, so there is no empty flex gap to leave behind. */
.page-header__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
/* ── Back link ─────────────────────────────────────────────────────────── */
/* One level up, never a trail. The link text is the destination's name; the
 * chevron is drawn, not typed, so it is not read out and carries no copy. */

.backlink {
    display: flex; align-items: center; gap: 6px;
    width: fit-content;
    min-height: 24px;
    margin-bottom: 10px;
    font-size: var(--t-sm); font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
/* R1: the reference's arrow. Drawn by CSS, so it is not read out. */
.backlink::before { content: "←"; font-weight: 600; }
/* The older pages write their back link as a quiet button in a small
 * paragraph; it takes the same crumb look. */
.page-header p.small { margin: 0 0 10px; }
.page-header p.small > .btn--quiet {
    padding: 0; min-height: 0; font-size: var(--t-sm); font-weight: 600;
    display: inline; white-space: normal; overflow-wrap: anywhere;
}
.backlink:hover { color: var(--primary-hover); text-decoration: underline; }

/* ── 2. Card ──────────────────────────────────────────────────────────── */
/* The only container. Border rather than shadow: a shadow on every block
 * flattens hierarchy rather than creating it. */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 24px 28px;
}
.card + .card { margin-top: var(--s4); }

/* A card asking the person to look before they continue — today, the duplicate
 * business name at 06.3. The edge carries it rather than a fill, so the record
 * inside reads as a record rather than as a warning banner. */
.card--attention { border-color: var(--warn); background: var(--warn-soft); }
/* 0028: a video being prepared. Information, not a fault. */
.card--info { border-color: #BFDCD9; background: var(--accent-soft); }

/* Internal notes, which are typed with line breaks and should keep them.
 *
 * On this class rather than on a bare `span` rule: a selector matching `span`
 * would reach every customer-supplied value on every page in the application,
 * and 06.2's guard refuses one for exactly that reason. */
.notes { white-space: pre-wrap; color: var(--ink-strong); }

/* Spacing utilities. They exist because a Content-Security-Policy that permits
   inline style attributes permits an injected one too, and `style-src 'self'`
   blocks the attribute form outright — there is no nonce for an attribute. Two
   classes cost less than a weaker policy. */
.spaced      { margin-top: var(--s4); }
.spaced-wide { margin-top: var(--s5); }
.card__title { margin-bottom: var(--s4); }

.stack   { display: flex; flex-direction: column; gap: var(--s4); }
.row     { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }

/* ── Section (UI/UX pass) ─────────────────────────────────────────────── */
/* One question per block on a record's page — *who is this*, *what have they
 * bought*, *what is going out*. The card's look, with named parts, so a page
 * gets its rhythm from the component rather than from `.spaced` utilities.
 * `.card` and `.section-head` stay for the pages written before it.
 *
 * A section never holds another bordered box: a warning inside one is a
 * callout (a left rule, not a card), and a table or list inside one uses
 * `--flush`, where the table's own edge is dropped and the section's becomes
 * it. That is the double border the old `.card > .list` drew. */

.section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 24px 28px;
}
.section + .section,
.section + .card,
.card + .section,
.callout + .section,
.section + .confirm,
.confirm + .section { margin-top: var(--s4); }

.section__head {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    margin-bottom: var(--s4);
}
.section__title { font-size: var(--t-lg); }
.section__count { font-size: var(--t-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.section__actions {
    margin-left: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
/* Empty: one muted sentence where the body would be. The heading stays, so the
 * page keeps its shape and the reader learns the thing exists. */
.section__empty { color: var(--ink-muted); max-width: 44rem; }
.section__foot { margin-top: var(--s4); font-size: var(--t-sm); color: var(--ink-muted); }
.section__body > * + * { margin-top: var(--s4); }

.section--flush { padding: 0; }
.section--flush > .section__head { padding: 22px 28px 0; }
.section--flush > .section__empty,
.section--flush > .section__foot,
.section--flush > .callout { margin: var(--s4) 28px; }
.section--flush > .section__foot { margin-top: 0; padding-top: var(--s4); }
.section--flush > .table-wrap,
.section--flush > .list,
.section--flush > .empty--inline {
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--r) var(--r);
}
.section--flush > .table-wrap:first-child,
.section--flush > .list:first-child { border-top: 0; border-radius: var(--r); }

/* ── 3. List ──────────────────────────────────────────────────────────── */
/* Rows rather than a table: a screen is an object you open, and a table of
 * two columns pretending to be data is a table for its own sake. */

.list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}
.list__row {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.list__row:last-child { border-bottom: 0; }
.list__row:hover { background: var(--sunken); }
.list__main { flex: 1 1 12rem; min-width: 0; }
/* `overflow-wrap` for a long unbroken business name at 390 (UI/UX pass). */
.list__name { font-weight: 500; color: var(--ink-strong); overflow-wrap: anywhere; }
.list__meta { font-size: var(--t-sm); color: var(--ink-muted); }
.list__go { color: var(--ink-muted); font-size: var(--t-sm); }

/* One advertising period: its summary, its state and the controls that act on
 * it, grouped so that a status badge cannot read as belonging to the period
 * above. Found by looking at the rendered page. */
/*
 * UI/UX pass: the same thing, generalised as `.records` / `.record` (C14b) — a
 * record's own sub-records in reading order, one edited in place. An `<ol>` of
 * `<li>`, so `:last-child` counts records rather than every `<div>` sibling the
 * way `.period:last-of-type` does. `.period*` stays, sharing every rule, for
 * the page that uses it until it moves. */
.records { list-style: none; margin: 0; padding: 0; }
.period,
.record { padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.records > .record:first-child { padding-top: 0; }

/* A period that has finished is a record, not a plan. Set back so the running
 * period is what the eye lands on — its controls stay, because correcting the
 * dates on last season's entry is a real thing a club does at audit time. */
.period--ended .list__name,
.period--ended .list__meta,
.record--ended .record__title,
.record--ended .record__meta { color: var(--ink-muted); }

/* The one being changed, marked so a form on a page of summaries is visibly
 * attached to the period above it. */
.period--editing,
.record--editing {
  background: var(--sunken);
  margin: 0 calc(var(--s4) * -1);
  padding: var(--s4);
  border-radius: var(--r);
  border-bottom: 0;
}
.records > .record--editing:first-child { padding-top: var(--s4); }
.period:last-of-type,
.records > .record:last-child { border-bottom: 0; padding-bottom: 0; }
.records > .record--editing:last-child { padding-bottom: var(--s4); }
.period__head,
.record__head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.period__actions,
.record__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s2); font-size: var(--t-sm); }

.record__main { flex: 1 1 12rem; min-width: 0; }
.record__title { font-weight: 500; color: var(--ink-strong); overflow-wrap: anywhere; }
.record__meta { font-size: var(--t-sm); color: var(--ink-muted); }

/* Secondary metadata — when a record was added, and when it was retired. It
 * belongs under the title rather than in a card of its own. */
.meta { color: var(--ink-muted); font-size: var(--t-sm); margin-top: var(--s1); }

/* A heading with one action beside it, inside a card. */
.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4);
}
.section-head .card__title { margin-bottom: 0; }

/* Progressive disclosure, native. `<details>` needs no JavaScript, survives a
 * failed submission, and keeps the uncommon field out of the common path. */
.disclosure summary {
    cursor: pointer; font-size: var(--t-sm); font-weight: 500;
    color: var(--primary); width: fit-content;
}
.disclosure summary:hover { color: var(--primary-hover); }
.disclosure[open] summary { margin-bottom: var(--s3); }

/* A rare, destructive action. It is reachable and it is not prominent: the
 * explanation and the confirmation appear only once somebody chooses it.
 *
 * The button form is for a destructive control that is already behind a
 * deliberate step — deleting a period from inside that period's edit state. It
 * reads as the quiet link it is, rather than borrowing `.btn--quiet`, which is
 * the same teal as Cancel and gave the two equal weight. */
.destructive { margin-top: var(--s5); }
.destructive a { color: var(--ink-muted); }
.destructive a:hover { color: var(--warn); }
.destructive button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--ink-muted); text-decoration: underline;
}
.destructive button:hover { color: var(--warn); }

/* Three short fields on one line, for editing a period's dates and value in
 * place. They stack on a narrow screen because `.row` already wraps. */
.field--inline { max-width: 11rem; }

/* A list of choices — radio buttons that read as rows rather than as a form.
 * Used where the options carry more than a word each: a club choosing an
 * advertising package is comparing prices and entitlements, which a dropdown
 * shows one at a time. */
.choices { max-width: 34rem; border: 0; padding: 0; margin: 0; }
.choices legend { font-weight: 500; font-size: var(--t-sm); color: var(--ink-strong); padding: 0; }
.choice {
    display: flex; align-items: baseline; gap: var(--s3);
    padding: var(--s3); margin-top: var(--s2);
    border: 1px solid var(--border-strong); border-radius: var(--r-sm);
    background: var(--surface); cursor: pointer;
}
.choice:hover { background: var(--sunken); }
/* `.field input` makes every text input fill its field, and a radio inside a
 * `.field` inherited that — so the control was stretched and the label pushed
 * halfway across the box. Visible in a browser, invisible in the template. */
.choice input[type="radio"] { width: auto; flex: none; margin: 0; }
.choices legend + .choice { margin-top: var(--s2); }
.choice__text { display: flex; flex-direction: column; gap: var(--s1); flex: 1 1 auto; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--accent-soft); }

/* Definition pairs, for detail pages. */
.pairs { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.pair dt { font-size: var(--t-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
/* `overflow-wrap` because 06.3 put the first genuinely long value in a pair: an
 * email address has no space to break at, so it ran straight over the column
 * beside it and printed one value on top of another. Found by rendering the page,
 * not by reading the template. */
.pair dd { margin: var(--s1) 0 0; color: var(--ink-strong); overflow-wrap: anywhere; }

/* ── 4. Form field ────────────────────────────────────────────────────── */

/* R1: the reference's fields — 15px/700 labels, 50px inputs with a 10px
 * radius and a 1.5px edge, and its 3px focus ring. **The edge is held at
 * 3:1** (--border-strong) where the reference's #cbd5d8 is 1.5:1: the edge is
 * how someone with low vision finds where an input begins (WCAG 1.4.11). */
.field { display: flex; flex-direction: column; gap: 8px; max-width: 34rem; }
.field label { font-weight: 700; font-size: 15px; color: var(--ink-heading); }
.field input, .field select, .field textarea {
    font: inherit;
    font-weight: 500;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--r-ctl);
    padding: 0 14px;
    min-height: 50px;
    width: 100%;
}
.field textarea { padding: 12px 14px; min-height: 110px; line-height: 1.5; }
.field input[type="radio"], .field input[type="checkbox"] { min-height: 0; width: auto; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 0; border-color: var(--primary); }
/* `.field__hint` and `.field__error` are the named forms (UI/UX pass); `.hint`
 * and `.error` inside a field keep working for the forms written before them.
 * `.choices .error` because a radio group is a fieldset, not a `.field`, and
 * its message was rendering as unstyled body text. */
.field .hint,
.field__hint { font-size: var(--t-sm); font-weight: 500; color: #667378; line-height: 1.5; }
.field .error,
.field__error,
.choices .error { font-size: var(--t-sm); color: var(--warn); font-weight: 500; }
.choices .error,
.choices .field__error { display: block; margin-top: var(--s2); }
/* Invalid looks the same on every control: an input, a dropdown, a text area
 * and a group of radio rows. The message beside it is what says what is wrong;
 * the edge only says where. */
.field--invalid input,
.field--invalid select,
.field--invalid textarea,
.choices.field--invalid .choice,
.field--invalid .choices .choice { border-color: var(--warn); }
.field--invalid input:not([type="radio"]):not([type="checkbox"]),
.field--invalid select,
.field--invalid textarea { box-shadow: inset 0 0 0 1px var(--warn); }

/* ── 5. Button ────────────────────────────────────────────────────────── */
/* Three, not seven. */

/* R1: the reference's buttons — 46px, 16px/700, a 10px radius. */
.btn {
    font: inherit;
    font-size: var(--t-base);
    font-weight: 700;
    line-height: 1.2;
    min-height: 46px;
    padding: 0 22px;
    border-radius: var(--r-ctl);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.btn--primary   { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover  { background: var(--primary-hover); color: var(--on-primary); }
.btn--secondary { background: var(--surface); color: var(--ink-strong); border-color: #CBD5D8; }
.btn--secondary:hover { background: var(--sunken); color: var(--ink-strong); }
.btn--quiet     { background: transparent; color: var(--primary); padding-inline: var(--s2); font-weight: 600; }
.btn--quiet:hover { color: var(--primary-hover); text-decoration: underline; }

/* Additions (UI/UX pass). Variants, not new buttons. */

/* For a section head or a toolbar, where a full-size button outweighs the
 * heading it sits beside. Still a 32px target. */
.btn--sm {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.90625rem;   /* 14.5 */
    border-radius: var(--r-sm);
}

/* A row of buttons. The submit comes first in the markup and on the page. */
.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.btn-group > form { margin: 0; }

/* **Only for a working state** — *Saving…* while an upload finishes. Never for
 * a role: a person who cannot do something is not shown the button at all
 * (docs/UX.md, roles), rather than shown one that refuses. */
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.btn--primary:disabled:hover,
.btn--primary[aria-disabled="true"]:hover { background: var(--primary); }
.btn--secondary:disabled:hover,
.btn--secondary[aria-disabled="true"]:hover { background: var(--surface); }

/* The confirming button inside a confirmation panel, and nowhere else. Named
 * for the act, never "OK". An outline rather than a red fill: the panel has
 * already asked the question, and a filled red button is a louder claim than a
 * removal the club can mostly undo. */
.btn--confirm-remove {
    background: var(--surface);
    color: var(--tone-stopped);
    border-color: var(--tone-stopped);
}
.btn--confirm-remove:hover { background: var(--tone-stopped-soft); color: var(--tone-stopped); }

/* ── 6. Status ────────────────────────────────────────────────────────── */
/* A mark and a word, always. Never colour alone — about one man in twelve
 * cannot rely on it, and a screen's health is exactly the thing they need.
 *
 * UI/UX pass: four meanings, `.pill--fine | --attention | --stopped |
 * --neutral`, each with its own mark shape — a filled circle, a filled
 * diamond, a filled square, a hollow ring — so the tone survives greyscale and
 * colour-vision deficiency before the word is even read. The word is always
 * sufficient on its own; the mark is decoration and is not read out.
 *
 * `.status` and `.status--ok / --warn / --idle` are the same component under
 * its first names, kept because pages outside this pass (and a test) use them.
 * They take the new marks with it: ok is fine, warn is needs attention, idle is
 * neutral. A pill is produced by the macros in `_components/status.html`, never
 * typed by hand, so a state maps to its tone in one place. */

/* R1: the reference's pills — 14px/700, 6px 12px, and a mark per meaning
 * drawn in its own colour: running a green dot, ending soon an amber
 * triangle, starting later a blue ring, none a grey square, ended a grey
 * dash, paused two grey bars. The word always carries the meaning. */
.pill,
.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-sm);
    font-weight: 700;
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 30px;
    white-space: nowrap;
}
.pill::before,
.status::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2A9A82;
    flex: none;
}
.pill--fine,
.status--ok   { color: var(--tone-fine);   background: var(--tone-fine-soft); }

.pill--attention,
.status--warn { color: var(--tone-attention); background: var(--tone-attention-soft); }
.pill--attention::before,
.status--warn::before {
    width: 0; height: 0; border-radius: 0; background: none;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 9px solid #C98A1C;
}

.pill--stopped { color: var(--tone-stopped); background: var(--tone-stopped-soft); }
.pill--stopped::before { width: 8px; height: 8px; border-radius: 2px; background: currentColor; }

.pill--neutral,
.status--idle { color: var(--tone-neutral); background: var(--tone-neutral-soft); }
.pill--neutral::before,
.status--idle::before { width: 9px; height: 9px; border-radius: 2px; background: transparent; border: 2px solid #7F8C91; }

.pill--upcoming { color: var(--upcoming); background: var(--upcoming-soft); }
.pill--upcoming::before { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 2px solid #3F6FA3; }

.pill--ended::before { width: 10px; height: 2px; border: 0; border-radius: 0; background: #7F8C91; }
.pill--paused::before {
    width: 9px; height: 10px; border-radius: 0; background: transparent;
    border: 0; border-left: 3px solid #7F8C91; border-right: 3px solid #7F8C91;
}


/* ── 7. Empty state ───────────────────────────────────────────────────── */
/* A new venue meets these before it meets anything else. Heading, one
 * sentence, one action. */

.empty {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: var(--s7) var(--s5);
    text-align: center;
}
.empty h2 { margin-bottom: var(--s2); }
.empty p { color: var(--ink-muted); max-width: 34rem; margin: 0 auto var(--s5); }
/* A viewer's empty state has no button after its sentence (UI/UX pass). */
.empty p:last-child { margin-bottom: 0; }

/* Filtered empty (UI/UX pass): a chip matched nothing. Left-aligned and quiet,
 * where the table would have been, with the toolbar still above it so the
 * person can change the filter. No heading — the page already has one. The
 * page-empty form above stays for "nothing recorded at all". */
.empty--inline {
    text-align: left;
    padding: var(--s5);
}
.empty--inline p { max-width: 44rem; margin: 0 0 var(--s2); }
.empty--inline p:last-child { margin-bottom: 0; }

/* ── Data table (UI/UX pass) ─────────────────────────────────────────── */
/* For a record set a club compares and sorts — every sponsor, by when their
 * sponsorship ends or what it is worth. Rows (`.list`) stay right for objects
 * opened one at a time and for the report's breakdowns (docs/UX.md).
 *
 * **No `overflow: hidden` on the wrapper**, and none may be added: the row menu
 * opens out of the last row and past the table's edge, and would be clipped.
 * The rounded corners are kept by rounding the corner cells instead.
 *
 * At phone width the table is **never a sideways scroll**. Each row becomes a
 * block — name first, status under it — and every value is labelled by a real
 * text node in its cell (`.table__label`), shown only then. A label in a
 * `data-` attribute drawn with `content: attr()` would escape the rendered
 * vocabulary sweep; a text node does not. */

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--t-base);
    line-height: 1.45;
    color: #3D4A4E;
}
.table th,
.table td {
    padding: 15px 20px;
    text-align: left;
    /* First lines share one baseline across the row — the name, the pill's
     * word, the date and the figure — whether the name takes one line or two. */
    vertical-align: baseline;
    border-bottom: 1px solid #EEF2F3;
    font-weight: 500;
}
.table thead th {
    padding-block: 14px;
    background: #FAFCFC;
    font-size: var(--t-xs);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eyebrow);
    white-space: nowrap;
    vertical-align: middle;
}
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* A date or a figure never breaks across lines: "16 October / 2026" read as
 * two values. Put `.table__nowrap` on a date cell; `.num` cells have it. Not
 * the default for every cell, because an advert's name in a cell must wrap. */
.table .num,
.table__nowrap { white-space: nowrap; }
.table tbody tr:hover > * { background: var(--row-hover); }
.table tbody:last-child > tr:last-child > * { border-bottom: 0; }

/* The corners the wrapper's radius would otherwise have clipped. Named by
 * section rather than `:first-child`, because the `<caption>` comes first. */
.table > thead > tr:first-child > :first-child { border-top-left-radius: calc(var(--r) - 1px); }
.table > thead > tr:first-child > :last-child { border-top-right-radius: calc(var(--r) - 1px); }
.table > tbody:last-child > tr:last-child > :first-child,
.table > tfoot > tr:last-child > :first-child { border-bottom-left-radius: calc(var(--r) - 1px); }
.table > tbody:last-child > tr:last-child > :last-child,
.table > tfoot > tr:last-child > :last-child { border-bottom-right-radius: calc(var(--r) - 1px); }

/* The two-line primary cell: the record's own name, a link, over one
 * qualifier. It removes a column and makes the row easier to scan. Line 2 is
 * left out, not dashed, when there is nothing to say. */
.table__primary { min-width: 10rem; }
.table__name {
    display: block;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-strong);
    text-decoration: none;
    overflow-wrap: anywhere;
}
a.table__name:hover { color: var(--primary-hover); text-decoration: underline; }
.table__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

/* A cell of several lines — every one shown, never "+2 more". */
.table__lines { list-style: none; margin: 0; padding: 0; }
.table__lines > li + li { margin-top: 2px; }

/* Set back: an ended or retired record in a mixed list. */
.table__row--ended > *,
.table__row--ended .table__name { color: var(--ink-muted); }

/* In-cell labels, real text, shown only when the row is stacked. */
.table__label { display: none; }
/* A missing value: read out above 640 ("Not recorded"), drawn only when the
 * row is stacked and the column header is no longer above it. Never a lone
 * dash, which reads as zero. */
.table__none { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sortable headers. The header is a link that reloads the page with the new
 * order; `aria-sort` is on the sorted column only. The mark is drawn, and
 * decorative: faint up-and-down on a column that can be sorted, one solid
 * triangle on the column that is. */
.table__sort a {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: 24px;
    color: inherit;
    text-decoration: none;
}
.table__sort a:hover { color: var(--ink-strong); text-decoration: underline; }
.table__sort[aria-sort] a { color: var(--ink-strong); }
.table__sort-mark {
    position: relative;
    display: inline-block;
    width: 8px; height: 10px;
    flex: none;
}
.table__sort-mark::before,
.table__sort-mark::after {
    content: "";
    position: absolute; left: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.45;
}
.table__sort-mark::before { top: 0; border-bottom: 4px solid currentColor; }
.table__sort-mark::after { bottom: 0; border-top: 4px solid currentColor; }
.table__sort[aria-sort] .table__sort-mark::before,
.table__sort[aria-sort] .table__sort-mark::after { opacity: 1; }
.table__sort[aria-sort="ascending"] .table__sort-mark::after,
.table__sort[aria-sort="descending"] .table__sort-mark::before { display: none; }
.table__sort[aria-sort="ascending"] .table__sort-mark::before { top: 3px; }
.table__sort[aria-sort="descending"] .table__sort-mark::after { bottom: 3px; }

/* A blank cell — no date, no value recorded — is a muted dash, never an empty
 * hole that reads as a rendering fault. The words are there for a screen
 * reader (`.visually-hidden` inside). Stacked, the whole cell is
 * left out: a label over a dash says nothing. */
.table__blank { color: var(--ink-muted); }

/* The actions column: as narrow as its menu, and absent entirely — header and
 * all — when no row has an action the role may take. */
.table__actions { width: 1%; white-space: nowrap; text-align: right; vertical-align: top; }
.table tbody .table__actions { padding-block: calc(var(--s3) - 6px); }

/* The foot: a count of the rows shown, or money in the sponsor database, and
 * never `N×` — a ratio, and ratios do not sum. When some rows have no value
 * the note says how many the total covers. */
.table tfoot th,
.table tfoot td {
    background: var(--sunken);
    border-bottom: 0;
    color: var(--ink-strong);
    font-weight: 600;
}
.table__total-note { display: block; font-weight: 400; color: var(--ink-muted); }

/* ── Filter chips (UI/UX pass) ───────────────────────────────────────── */
/* Links that narrow **one** list, with the choice in the URL so Back undoes it.
 * Not tabs: they never switch to another dataset. A zero chip is still shown
 * and still a link — hiding it would hide the fact. They wrap at phone width
 * rather than scroll, because a chip scrolled out of sight is a filter nobody
 * knows is there. The chosen chip is marked by a heavier edge and weight as
 * well as its fill, so the choice does not rest on colour. */

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
/* R1: the reference's chips — 15px/600 on white with a 1.5px edge; the
 * chosen one filled brand deep. */
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    border: 1.5px solid #D9E1E3;
    border-radius: 30px;
    background: var(--surface);
    color: #3D4A4E;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.chip:hover { background: var(--sunken); color: var(--ink-strong); }
.chip[aria-current="true"] {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    color: #FFFFFF;
}
.chip[aria-current="true"]:hover { background: var(--brand-deep); color: #FFFFFF; }
.chip__count { color: #5F6B6F; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip[aria-current="true"] .chip__count { color: #9FC6CA; }

/* ── Row menu (UI/UX pass) ───────────────────────────────────────────── */
/* Secondary actions for one table row, on a native `<details>`: no script, so
 * it opens and closes on its own trigger, does not close on an outside click
 * or Esc, and several can be open at once. That is accepted, not a defect to
 * fix with JavaScript. Links only — a removal item leads to the record's own
 * confirmation, never to a form that removes. Not `role="menu"`, which would
 * promise arrow keys nothing here provides.
 *
 * The trigger's name is composed with `aria-labelledby` from a hidden "More
 * actions for" and the row's name cell, so a customer's name is never built
 * into an attribute. */

.menu { position: relative; display: inline-block; text-align: left; }
.menu__trigger {
    list-style: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    cursor: pointer;
}
.menu__trigger::-webkit-details-marker { display: none; }
.menu__trigger::marker { content: ""; }
.menu__trigger:hover,
.menu[open] > .menu__trigger {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink-strong);
}
/* Three dots, drawn. */
.menu__dots {
    display: block;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -6px 0 0 currentColor, 6px 0 0 currentColor;
}
.menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + var(--s1));
    z-index: var(--z-menu);
    min-width: 12rem;
    margin: 0;
    padding: var(--s1) 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-pop);
}
.menu__item {
    display: flex; align-items: center;
    min-height: 32px;
    padding: var(--s1) var(--s4);
    color: var(--ink-strong);
    font-size: var(--t-sm);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
.menu__item:hover { background: var(--sunken); color: var(--ink-strong); text-decoration: underline; }
.menu__item:focus-visible { outline-offset: -2px; }

/* ── Confirmation panel (UI/UX pass) ─────────────────────────────────── */
/* The step between choosing a rare, irreversible-sounding act and doing it.
 * Its own shape — a plain panel with a brick-red left rule — so a
 * confirmation no longer looks identical to a fault the way it did in the
 * amber attention card. The entry to it stays the quiet `.destructive` link. */

.confirm {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--tone-stopped);
    border-radius: var(--r);
    padding: var(--s5);
}
.confirm__title { font-size: var(--t-lg); margin-bottom: var(--s2); }
.confirm > p { max-width: 44rem; }
.confirm > p + p { margin-top: var(--s2); }
.confirm > .btn-group { margin-top: var(--s4); }
/* S1: the sponsor's remove panel sits under the two columns, not against the
 * last line of the left one. */
.sponsor-split + .confirm { margin-top: var(--s6); }
.confirm > form.spaced { margin-top: var(--s3); }

/* ── Split layout and summary card (UI/UX pass) ──────────────────────── */
/* The table stays the dominant object; a small summary sits beside it from
 * 1200px and after it below that (from 960 the Sponsors table and the
 * summary did not both fit). After, because that is also its place in the
 * markup: what is seen and what is read out are in the same order at every
 * width. The summary holds nothing the table does not, so moving it below
 * loses nothing. */

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.split__main,
.split__aside { min-width: 0; }
@media (min-width: 1200px) {
    .split { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
}

.summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: var(--s4) var(--s5) var(--s5);
}
.summary__title { font-size: var(--t-base); margin-bottom: var(--s3); }
.summary__list { margin: 0; }
.summary__item {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 0 var(--s3);
    padding: var(--s2) 0;
    border-top: 1px solid var(--border);
    font-size: var(--t-sm);
}
.summary__item:first-child { border-top: 0; padding-top: 0; }
.summary__item dt { color: var(--ink-strong); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.summary__item dd { margin: 0; color: var(--ink-muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.summary__empty { font-size: var(--t-sm); color: var(--ink-muted); }
.summary__foot {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid var(--border);
    font-size: var(--t-sm);
}

/* The value summary on Sponsors: money in the sponsor database, never a
 * figure a screen reported. The meter is decoration for the eye only
 * (`aria-hidden`); every number is text beside it. The ending-soon part is
 * hatched as well as coloured, so the split survives colour-vision deficiency
 * and print. */
.summary + .summary { margin-top: var(--s4); }
.value__figure {
    margin: 0;
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
}
.value__figure--none { font-size: var(--t-base); font-weight: 500; color: var(--ink-muted); }
.meter { display: block; width: 100%; height: 10px; margin: var(--s3) 0 var(--s2); overflow: visible; }
.meter__part { stroke: var(--surface); stroke-width: 2px; }
.meter__part--fine { fill: var(--tone-fine); }
.meter__part--attention { fill: url(#meter-hatch); }
.meter__hatch-ground { fill: var(--tone-attention-soft); }
.meter__hatch-line { stroke: var(--tone-attention); stroke-width: 2px; }
.value__parts .summary__item { flex-direction: column; align-items: flex-start; gap: var(--s1); }
.value__parts .summary__item dd { color: var(--ink-strong); font-weight: 600; }
.value__note { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--ink-muted); }

/* ── Callout (UI/UX pass) ────────────────────────────────────────────── */
/* Something is wrong or needs a decision, and the fix — in that order. A left
 * rule and a soft fill rather than a bordered card, so it can sit inside a
 * section without making a box inside a box. Three tones and no fourth:
 * `--attention` (a person should act), `--stopped` (something is not
 * happening), `--info` (neutral context). The title is Venocast's sentence.
 *
 * `p.error`, the one-line page-level error, takes the stopped look here: it
 * used to borrow its only styling from the scaffolding section below, which is
 * due to be deleted, and four live messages would have lost it. **Inside the
 * application shell only** (`main:not(.shell)`): the signed-out pages render in
 * `base.html`'s `main.shell`, are outside this pass, and keep the scaffolding's
 * look until they are rebuilt. Every property is set here, so nothing in the
 * app shell depends on the scaffolding surviving. */

.callout,
main:not(.shell) p.error {
    border-left: 4px solid var(--tone-neutral);
    border-radius: var(--r-sm);
    background: var(--tone-neutral-soft);
    color: var(--ink);
}
.callout { padding: var(--s4) var(--s5); }
main:not(.shell) p.error {
    padding: var(--s3) var(--s4);
    margin-top: var(--s3);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-strong);
}
.callout--attention { border-left-color: var(--tone-attention); background: var(--tone-attention-soft); }
.callout--stopped,
main:not(.shell) p.error { border-left-color: var(--tone-stopped); background: var(--tone-stopped-soft); }
.callout--info { border-left-color: var(--tone-neutral); background: var(--tone-neutral-soft); }
.callout__title { font-weight: 600; color: var(--ink-strong); }
.callout__body { margin-top: var(--s1); max-width: 44rem; }
.callout__action { margin-top: var(--s3); }
.callout + .callout { margin-top: var(--s3); }
/* S1 (F3): the line that says a save worked. Above the page's own header, in
 * the tone every "fine" state already uses. */
.notice {
    margin-bottom: var(--s4);
    padding: var(--s3) var(--s4);
    border-left: 4px solid var(--tone-fine);
    border-radius: var(--r-sm);
    background: var(--tone-fine-soft);
    color: var(--ink-strong);
    font-weight: 600;
    font-size: var(--t-sm);
}
/* Package 2B r2 (reference screen 15): one sponsor's adverts in the Scheduler.
 * The box, the strip of their next turns, and a card per advert. Structure
 * only; the look-and-feel pass restyles it with everything else. */
.freq-pill {
    display: inline-block; vertical-align: middle; margin-left: var(--s2);
    padding: 2px var(--s3); border-radius: var(--r-pill);
    background: var(--accent-soft); color: var(--ink-strong);
    font-size: var(--t-sm); font-weight: 500;
}
.eyebrow {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--eyebrow);
}
/* R2 (reference screen 15): the box is text on the left in a 420px column and
 * the strip on the right; the strip's turns are the reference's 64 × 36; the
 * cards are three to a row with the artwork 230px tall across the top. */
.turns-box { display: flex; align-items: center; gap: 26px; }
.turns-box__text { width: 420px; flex: 0 0 auto; }
.turns-box__text .section__title { font-size: 18px; }
.turns-box__text .section__empty { font-size: 15px; font-weight: 500; line-height: 1.55; margin-top: 6px; }
.turns-box__turns { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.turns-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.turns-strip__turn {
    width: 64px; height: 36px; border-radius: 7px; overflow: hidden;
    background: var(--brand-deep);
}
.turns-strip__turn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.turns-strip__more { font-size: 20px; font-weight: 700; color: #7F8C91; padding-left: 4px; }
.turns-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; font-weight: 600; color: #3D4A4E; }
.artwork-cards {
    list-style: none; margin: 26px 0 0; padding: 0;
    display: grid; gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.artwork-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.artwork-card .tile__frame { border-radius: 0; aspect-ratio: auto; height: 230px; }
.artwork-card .tile__image { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.artwork-card--paused { background: #FAFCFC; }
.artwork-card--paused .tile__frame { opacity: 0.55; }
.artwork-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.artwork-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.artwork-card__name { font-size: 17px; font-weight: 700; color: var(--ink-heading); margin: 0; }
.artwork-card--paused .artwork-card__name { color: #3D4A4E; }
.artwork-card__meta { font-size: 14px; font-weight: 500; color: #667378; margin: 0; }
.artwork-card__body > .row { margin-top: auto; gap: 10px; }
.freq--lg { font-size: 15px; }
@media (max-width: 1100px) {
    .turns-box { flex-direction: column; align-items: stretch; }
    .turns-box__text { width: auto; }
    .artwork-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .artwork-cards { grid-template-columns: minmax(0, 1fr); }
    .artwork-card .tile__frame { height: auto; aspect-ratio: 16 / 9; }
}

.section__body > .callout + *,
.section > .callout + * { margin-top: var(--s4); }

/* ── Connection code entry ────────────────────────────────────────────── */
/* A variant of the form field, not an eighth component.
 *
 * The code is generated and shown by the screen itself, and typed in here —
 * never the other way round. A television has no keyboard, so any flow that
 * asks someone to type at the display is a flow that cannot be completed.
 *
 * Set large and spaced because it is copied from across a room, often from a
 * photograph on a phone, and in a monospace face so O and 0 are distinct. */

.field--code input {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
    padding: var(--s3);
    max-width: 11rem;
}

/* ── Narrow screens ───────────────────────────────────────────────────── */
/* A manager checking whether a screen is online, from the car park. */

@media (max-width: 640px) {
    :root { --t-xl: 1.5rem; }
    main { padding-block: var(--s5) var(--s7); }
    .card, .empty { padding: var(--s4); }
    .page-header { gap: var(--s3); }
    /* The header's ACTION goes full width — not everything in the header that
     * happens to be a button. The child combinator matters: the back link sits
     * inside `.page-header__text`, and without it every page's "← Sponsors"
     * became a centred, full-width block above a left-aligned heading. */
    .page-header > .btn { width: 100%; text-align: center; }
    .field--code input { font-size: 1.5rem; letter-spacing: 0.16em; }

    /* The status belongs under the name here, not beside it: side by side at
     * this width, the meta line wraps around the pill and the row stops
     * reading as one object. The whole row is tappable, so the arrow is
     * carrying nothing. */
    .list__row { padding: var(--s4); flex-direction: column; align-items: flex-start; gap: var(--s2); }
    .list__go { display: none; }

    /* flex-basis applies to the main axis, and the main axis here is vertical.
     * Left at 12rem the row's text block claims 192px of HEIGHT, so every row
     * becomes three times as tall as its content with a hole between the name
     * and the status. Found by rendering at 360px — it is invisible in the
     * code, and it is invisible at any width where the row is still a row. */
    .list__main { flex-basis: auto; }

    /* Venue and person move to their own line. They fit beside the wordmark
     * at 360px today only because this club's name is short. */
    .appbar__right { margin-left: 0; flex-basis: 100%; }

    /* ── UI/UX pass components, at phone width ── */

    .page-header__actions { width: 100%; }
    .page-header__actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
    .section, .confirm { padding: var(--s4); }
    .section--flush { padding: 0; }
    .section--flush > .section__head { padding: var(--s4) var(--s4) 0; }
    .section--flush > .section__empty,
    .section--flush > .section__foot,
    .section--flush > .callout { margin-inline: var(--s4); }
    .section__actions { margin-left: 0; }
    /* A record's state under its summary, as a list row's is under its name
     * — side by side, one record's pill wrapped under it and the next one's
     * squeezed its dates into three lines. */
    .period__head, .record__head { flex-direction: column; align-items: flex-start; gap: var(--s2); }
    .record__main { flex-basis: auto; }
    .callout { padding: var(--s4); }
    .empty { padding: var(--s6) var(--s4); }
    .empty--inline { padding: var(--s4); }
    .btn-group--stack-narrow > .btn,
    .btn-group--stack-narrow > form,
    .btn-group--stack-narrow > form > .btn { width: 100%; text-align: center; }

    /* R1: the reference's 16px/700 buttons are wider than the old ones, and a
     * long label ("Check for plays outside this advertising period") ran off
     * a 390px screen. At phone width a label wraps rather than overflows. */
    .btn { white-space: normal; text-align: center; max-width: 100%; }

    /* Targets grow to 44px where a thumb is doing the pointing. */
    .btn--sm, .chip, .menu__item { min-height: 44px; }
    .menu__trigger { width: 44px; height: 44px; }

}

/* ── The week (Package 2B, S5; the reference's bars since R2) ─────────────────
 * Club content over seven days, as reference screen 13 draws it: a 300 px column
 * with the item's picture, name and when it runs, then one bar across the days
 * it is scheduled, coloured by its label, with its state written inside. A
 * native table: the bar is one cell spanning its days (`colspan`), so the words
 * have the whole run to sit in and no inline style is needed (CSP). Today's
 * column is tinted through its `<col>`, and its heading carries
 * `aria-current="date"` for anyone not seeing the tint.
 *
 * **The bar colours are the reference's hues, darkened only as far as white
 * text needs** (4.5:1, WCAG 1.4.3): Notice #3F9884 → #358170, Promotion #D98A3A →
 * #A66420, Course footage #4F8F4A → #488243. Event's #123640 is used as drawn. */
.week-nav { display: flex; align-items: center; gap: 6px; }
.week-nav__label { margin: 0; padding: 0 8px; font-size: 15px; font-weight: 700; color: var(--ink-heading); }
.week-nav__step { min-width: 38px; padding: 0 12px; font-size: 18px; }
.week-nav__back { margin-left: var(--s2); font-size: 15px; font-weight: 700; }
.week-card { overflow: hidden; }
.week {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    line-height: 1.4;
}
.week__col-item { width: 300px; }
/* Today's column, tinted behind the bars as the reference does. A row
 * background placed over that day, because a `<col>` background is not painted
 * under cells that span it. */
.week { --today-tint: rgba(74, 155, 160, 0.07); }
.week-wrap--today-0 .week tbody tr { background: linear-gradient(90deg, transparent calc(300px + (100% - 300px) * 0 / 7), var(--today-tint) calc(300px + (100% - 300px) * 0 / 7), var(--today-tint) calc(300px + (100% - 300px) * 1 / 7), transparent calc(300px + (100% - 300px) * 1 / 7)); }
.week-wrap--today-1 .week tbody tr { background: linear-gradient(90deg, transparent calc(300px + (100% - 300px) * 1 / 7), var(--today-tint) calc(300px + (100% - 300px) * 1 / 7), var(--today-tint) calc(300px + (100% - 300px) * 2 / 7), transparent calc(300px + (100% - 300px) * 2 / 7)); }
.week-wrap--today-2 .week tbody tr { background: linear-gradient(90deg, transparent calc(300px + (100% - 300px) * 2 / 7), var(--today-tint) calc(300px + (100% - 300px) * 2 / 7), var(--today-tint) calc(300px + (100% - 300px) * 3 / 7), transparent calc(300px + (100% - 300px) * 3 / 7)); }
.week-wrap--today-3 .week tbody tr { background: linear-gradient(90deg, transparent calc(300px + (100% - 300px) * 3 / 7), var(--today-tint) calc(300px + (100% - 300px) * 3 / 7), var(--today-tint) calc(300px + (100% - 300px) * 4 / 7), transparent calc(300px + (100% - 300px) * 4 / 7)); }
.week-wrap--today-4 .week tbody tr { background: linear-gradient(90deg, transparent calc(300px + (100% - 300px) * 4 / 7), var(--today-tint) calc(300px + (100% - 300px) * 4 / 7), var(--today-tint) calc(300px + (100% - 300px) * 5 / 7), transparent calc(300px + (100% - 300px) * 5 / 7)); }
.week-wrap--today-5 .week tbody tr { background: linear-gradient(90deg, transparent calc(300px + (100% - 300px) * 5 / 7), var(--today-tint) calc(300px + (100% - 300px) * 5 / 7), var(--today-tint) calc(300px + (100% - 300px) * 6 / 7), transparent calc(300px + (100% - 300px) * 6 / 7)); }
.week-wrap--today-6 .week tbody tr { background: linear-gradient(90deg, transparent calc(300px + (100% - 300px) * 6 / 7), var(--today-tint) calc(300px + (100% - 300px) * 6 / 7), var(--today-tint) calc(300px + (100% - 300px) * 7 / 7), transparent calc(300px + (100% - 300px) * 7 / 7)); }
.week th, .week td { border-bottom: 1px solid #EEF2F3; text-align: left; font-weight: 400; }
.week tbody tr:last-child > * { border-bottom: 0; }
.week thead th { background: #FAFCFC; border-bottom-color: #E8EDEE; padding: 12px 0; vertical-align: middle; }
.week thead th.week__item { padding: 12px 20px; }
.week thead th.week__day { text-align: center; font-size: 13px; font-weight: 700; color: #6A777B; text-transform: uppercase; }
.week__weekday, .week__date { display: inline; }
.week__date { margin-left: 4px; }
.week thead th.week__day--today { background: var(--selected); color: var(--brand-deep); font-weight: 800; }
.week tbody th.week__item { padding: 0; vertical-align: middle; }
.week__link {
    display: flex; align-items: center; gap: 14px; padding: 14px 20px;
    color: inherit; text-decoration: none;
}
.week__link:hover .table__name { text-decoration: underline; }
.week__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.week__link .table__name { font-size: 15.5px; font-weight: 700; color: var(--ink-heading); overflow-wrap: anywhere; }
.week__hint { font-size: 14px; font-weight: 500; color: #667378; }
.week__cell { padding: 20px 0; vertical-align: middle; }
.week td.week__cell--note { text-align: right; padding-right: 16px; }
.week__on {
    display: block;
    height: 32px; line-height: 32px;
    padding: 0 12px;
    margin-inline: 0;
    background: #358170; color: #FFFFFF;
    font-size: 13.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 7 October 2026 (`0027`): the bar takes its picture's colour, drawn by an SVG
 * fill beneath the words (`_components/colour_fill.html`), and its words are
 * white or dark, whichever reads. */
.colour-fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.week__on { position: relative; background: none; }
.week__words { position: relative; }
.week__on--light { color: #FFFFFF; }
.week__on--dark { color: #23282B; }
/* A pale picture's bar (a white card) still has an edge on the white page. The
 * fill covers the padding box, so a border shows around it. */
.week__on--dark { border: 1px solid rgb(35 40 43 / 0.22); line-height: 30px; }
.sharing__dot { position: relative; overflow: hidden; border: 1px solid rgb(35 40 43 / 0.18); }
.htile--fill { position: relative; overflow: hidden; }
.htile--fill > .htile__bar { position: relative; }
.htile--dark > .htile__bar { background: rgb(35 40 43 / 0.55); }
.htile--dark { border: 1px solid rgb(35 40 43 / 0.18); }
.sched-time { margin: 0 0 var(--s5); }
.week__on--start { margin-left: 4px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.week__on--end { margin-right: 4px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.week-ended { margin-top: var(--s2); }
.week-ended > summary { cursor: pointer; font-weight: 600; color: var(--ink-strong); padding-block: var(--s2); }
.week-ended > .list { margin-top: var(--s2); }

@media (max-width: 640px) {
    /* Each row becomes the item on top and its seven days on one line under
     * it, lined up with the day headings, which keep their own line. The bar
     * keeps its span through `grid-column`, set per span by class. */
    .week thead tr, .week tbody tr {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .week colgroup { display: none; }
    .week tbody tr { background: none !important; }
    .week tbody td.week__cell--today { background: var(--today-tint); }
    .week thead th.week__item { display: none; }
    .week__weekday { display: block; }
    .week__date { display: block; margin: 0; }
    .week tbody th.week__item { grid-column: 1 / -1; border-bottom: 0; }
    .week__link { padding: 12px 12px 8px; }
    .week thead th { padding-inline: 0; font-size: 12px; }
    .week__cell { padding: 0 0 12px; }
    .week__cell[colspan="2"] { grid-column: span 2; }
    .week__cell[colspan="3"] { grid-column: span 3; }
    .week__cell[colspan="4"] { grid-column: span 4; }
    .week__cell[colspan="5"] { grid-column: span 5; }
    .week__cell[colspan="6"] { grid-column: span 6; }
    .week__cell[colspan="7"] { grid-column: span 7; }
    .week td.week__cell--note { text-align: left; padding-left: 12px; }
    .week__on { font-size: 12.5px; padding: 0 8px; }
}

/* Tables stack from 760px down, before everything else does at 640: the
 * sponsor table's five columns need about 690px with each status on one line,
 * and below 760 the row form reads better than a table at its border. */
@media (max-width: 760px) {
    /* R1: the header row's tint is for a table's own header; stacked, it is a
     * row of sort links and the tint drew three grey boxes. */
    .table thead th { background: transparent; }
    .table td.table__blank { display: none; }
    /* The table, stacked. Each row is a block: the name first, the status
     * under it (it is the second column), then every other value behind its
     * in-cell label. The header survives as a bar of the sortable columns'
     * links, so sorting is the same control at both widths; with no sortable
     * column there is no bar. The actions menu sits at the row's top right. */
    .table, .table thead, .table tbody, .table tfoot,
    .table tr, .table th, .table td { display: block; }
    .table thead tr {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--s1) var(--s4);
        padding: var(--s2) var(--s4);
        border-bottom: 1px solid var(--border);
    }
    .table thead:not(:has(.table__sort)) { display: none; }
    .table thead th { padding: 0; border: 0; }
    .table thead th:not(.table__sort) { display: none; }
    .table__sort a { min-height: 44px; }
    .table .num { text-align: left; }
    .table tbody tr,
    .table tfoot tr {
        position: relative;
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--s1);
        padding: var(--s4);
        border-bottom: 1px solid var(--border);
    }
    .table tbody:last-child > tr:last-child { border-bottom: 0; }
    .table tbody th,
    .table tbody td,
    .table tfoot th,
    .table tfoot td { padding: 0; border: 0; width: auto; background: none; }
    .table tbody tr:hover > * { background: none; }
    .table tbody tr:hover { background: var(--row-hover); }
    .table tfoot tr { background: var(--sunken); border-bottom: 0; border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px); }
    .table tfoot td:empty { display: none; }
    .table__primary { min-width: 0; align-self: stretch; }
    .table tr:has(> .table__actions) > .table__primary { padding-right: 52px; }
    .table tbody .table__actions {
        position: absolute; top: var(--s3); right: var(--s3);
        padding: 0;
    }
    .table__label {
        display: inline-block;
        min-width: 5.5rem;
        margin-right: var(--s2);
        font-size: var(--t-xs);
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ink-muted);
    }
    .table__none { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; color: var(--ink-muted); }
    .table .col--wide { display: none; }
}

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

/* ── Adverts: the picker, the preview, the tiles (06.6) ──────────────── */

.upload { display: flex; flex-direction: column; gap: var(--s3); }

/* A file input cannot be restyled across browsers without replacing it, which
 * costs the keyboard and screen-reader behaviour the native control already
 * has. So it is left native and only given room. */
.upload input[type="file"] {
    font: inherit; font-size: var(--t-sm);
    padding: var(--s3); width: 100%;
    background: var(--sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
}
.upload input[type="file"]:disabled { opacity: 0.6; }

/* **The preview is the shape the screen will give it**, so a portrait photo
 * shows its bars here rather than in the clubhouse. 16:9 is the screen; the
 * sponsor region's exact geometry is Stage 08's and is not guessed at here. */
.preview { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
/* Capped, not full width. A preview exists to answer "is this the right file and
 * how will it sit on the screen?", and at the card's full width it pushed the
 * Save button below the fold on a laptop — which made the page read as an upload
 * tool rather than as a short form with a picture in it. */
.preview__frame {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 480px;
    background: var(--brand-deep);
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
/* `contain`, never `cover`: cropping a sponsor's advert to fill a frame is a
 * change to their artwork, and the letterboxing is the thing worth showing. */
.preview__media {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain; display: block;
}
.preview__note { margin: 0; }

.upload__progress { margin: 0; display: flex; align-items: center; gap: var(--s3); }
.upload__progress label { font-size: var(--t-sm); color: var(--ink-muted); }
.upload__progress progress {
    flex: 1; height: 8px; appearance: none; border: 0;
    border-radius: 999px; background: var(--sunken); overflow: hidden;
}
.upload__progress progress::-webkit-progress-bar { background: var(--sunken); }
.upload__progress progress::-webkit-progress-value { background: var(--primary); }
.upload__progress progress::-moz-progress-bar { background: var(--primary); }

/* Tiles, because what a club recognises is the picture rather than the name.
 * `auto-fill` rather than a fixed count: three across on a laptop, one on a
 * phone, with no breakpoint to maintain. */
.tiles {
    list-style: none; margin: var(--s4) 0 0; padding: 0;
    display: grid; gap: var(--s4);
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.tile__link {
    display: flex; flex-direction: column; gap: var(--s1);
    text-decoration: none; color: inherit;
}
.tile__frame {
    aspect-ratio: 16 / 9;
    background: var(--brand-deep);
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.tile__image { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.tile__blank { color: var(--surface); font-size: var(--t-xs); opacity: 0.75; }
.tile__name { font-weight: 500; color: var(--ink-strong); }
.tile__meta { font-size: var(--t-xs); color: var(--ink-muted); }
.tile__link:hover .tile__name { color: var(--primary-hover); text-decoration: underline; }
/* Paused reads as set back rather than as an error: it is a state somebody
 * chose, not a fault. */
.tile--paused .tile__frame { opacity: 0.45; }

/* ── The pages that already exist ─────────────────────────────────────── */
/* Sign in, forgot, reset, choose venue and the 02.5 venue page were written
 * against the plain stylesheet this file replaces. They are rebuilt properly
 * at 03.5 and Stage 09; until then these rules keep them looking like the
 * same product rather than leaving them unstyled. Delete this section as each
 * page is rebuilt — it is scaffolding, not part of the system. */

.shell { max-width: 30rem; }
.shell .card { margin-top: var(--s7); }
.shell h1 { margin-bottom: var(--s1); }
.shell form { margin-top: var(--s4); }
/* R1: the reference's signed-out form — 15px/700 labels, 50px inputs, and a
 * full-width 46px button. The input edge is held at 3:1 (see *Form field*). */
.shell label { display: block; font-weight: 700; font-size: 15px; color: var(--ink-heading); margin-top: 22px; }
.shell input[type="email"],
.shell input[type="password"],
.shell input[type="text"] {
    font: inherit; font-weight: 500; width: 100%; margin-top: 8px;
    min-height: 50px;
    color: var(--ink); background: var(--surface);
    border: 1.5px solid var(--border-strong); border-radius: var(--r-ctl);
    padding: 0 14px;
}
.shell input:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 0; border-color: var(--primary); }
.shell button {
    font: inherit; font-size: var(--t-base); font-weight: 700;
    margin-top: 22px; min-height: 46px; padding: 0 22px;
    border-radius: var(--r-ctl); border: 1.5px solid transparent; cursor: pointer;
    background: var(--primary); color: var(--on-primary);
}
.shell button:hover { background: var(--primary-hover); }
.shell button.secondary { background: var(--surface); color: var(--ink-strong); border-color: var(--border-strong); }
.shell button.secondary:hover { background: var(--sunken); }

.notice, p.error {
    border-radius: var(--r-sm);
    padding: var(--s3);
    font-size: var(--t-sm);
    font-weight: 500;
    margin-top: var(--s3);
}
.notice   { background: var(--ok-soft);   color: var(--ok); }
p.error   { background: var(--warn-soft); color: var(--warn); }

.venues { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.venue-choice {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
    width: 100%; margin-top: 0; text-align: left;
    background: var(--surface); color: var(--ink-strong);
    border: 1px solid var(--border-strong);
}
.venue-choice:hover { background: var(--sunken); }
/* Package 1 (T5): `.shell button` (0,1,1) was beating `.venue-choice` (0,1,0), so the
 * chooser rendered teal and the role beside each venue — now *Manager*, *Staff* or
 * *Viewer* — was grey on teal and unreadable. Scoped to win, restoring the design
 * above rather than changing it. */
.shell .venue-choice { background: var(--surface); color: var(--ink-strong); border: 1px solid var(--border-strong); }
.shell .venue-choice:hover { background: var(--sunken); }

/* R1 — *Which club today?* (reference screen 25), at the reference's own
 * values: 110px down, a 64px mark, a 34px title, 560px of club cards 14px
 * apart, each 20px 22px with a 48px disc (a neutral placeholder until the
 * club's colours exist, F1), an 18px name and a chevron; *Sign out* a link. */
.choose { min-height: 100vh;
          background: radial-gradient(1200px 800px at 50% 0%, #FFFFFF 0%, #EEF2F3 60%, #E2E8EA 100%);
          display: flex; flex-direction: column; align-items: center; padding: 110px 16px 48px; }
.choose__mark { width: 64px; height: 64px; display: block; }
.choose h1 { font-size: 2.125rem; margin-top: 26px; text-align: center; }
.choose__lede { color: var(--ink-muted); font-size: 16px; margin-top: 8px; text-align: center; }
.choose__form { width: 100%; max-width: 560px; }
.choose__list { list-style: none; padding: 0; margin: 34px 0 0; width: 100%;
                display: flex; flex-direction: column; gap: 14px; }
.choose__club {
    display: flex; align-items: center; gap: 18px; width: 100%;
    padding: 20px 22px; text-align: left; cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r);
    font: inherit; color: var(--ink);
}
.choose__club:hover { border-color: #CBD5D8; }
.choose__club .clubdot { width: 48px; height: 48px; border: 3px solid var(--surface);
                         box-shadow: 0 0 0 1px var(--border); }
.choose__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.choose__name { font-weight: 700; color: var(--primary); font-size: 18px; }
.choose__meta { font-size: 14px; font-weight: 500; color: #667378; }
.choose__go { width: 9px; height: 9px; flex: none; border-right: 2.4px solid var(--primary);
              border-top: 2.4px solid var(--primary); transform: rotate(45deg); margin-right: 6px; }
.choose__signout { margin-top: 30px; }
.choose__signout button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
                          font-size: 15px; font-weight: 700; color: var(--primary); text-decoration: underline;
                          text-underline-offset: 3px; }

/* ── Reports (07.6) ───────────────────────────────────────────────────── */

/* A breakdown row is a record, not a destination. `.list` is the approved
 * component and its rows are normally links; these are not, so the hover
 * affordance is removed rather than left to suggest something is clickable.
 *
 * **Not an eighth component.** A data table was the alternative and was
 * rejected: at 360px — the width a club manager reads this at — a four-column
 * table becomes a sideways scroll, and the export already carries the columns
 * for anyone who wants to sort them (docs/UX.md §Components). */
.list--static .list__row { cursor: default; }
.list--static .list__row:hover { background: var(--surface); }

/* A row whose meta line is a sentence rather than a word.
 *
 * Elsewhere the name and its meta sit inline, and that is right when the meta
 * is a contact's name or a price. A report's meta is three labelled figures,
 * and inline it wraps around the name until the row stops reading as one
 * object — visible at 390px, invisible in the template. Found by rendering. */
.list--stacked .list__main { display: flex; flex-direction: column; gap: 2px; }

/* Shown only on paper. The application frame carries the club's name on screen
 * and is hidden when printing, so the document would otherwise go to a sponsor
 * with no indication of whose club it came from. */
.print-only { display: none; }

/* ── Print ────────────────────────────────────────────────────────────── */
/* **A sponsor's report on paper, with no new dependency** (D3). No PDF library,
 * no layout engine, no chart — the club presses Print and gets the document.
 *
 * `.no-print` is the club's half of the page: navigation, the download and
 * period controls, and D2's reconciliation check. The check is a club's
 * question about its own data and must never appear in the sponsor-facing
 * printed report, which is exactly what this rule guarantees — the requirement
 * is in the stylesheet rather than in a template somebody might copy. */
@page {
    /* The paper's own margin, which is the mechanism for it — a padding on
     * `main` would be added to this one on every sheet. Note that an emulated
     * print screenshot does not apply `@page`, so the rendered evidence for
     * this package shows the content flush to the edge and a real printer does
     * not. */
    margin: 16mm 14mm;
}

/* ── Package 1 ────────────────────────────────────────────────────────── */

/* The venue page's links to the pages that exist (until Home, Package 3). */
.venue-links { list-style: none; margin: var(--s4) 0 0; padding: 0;
               display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

/* P5 — *Want another screen?* Venocast's own contact details, at the foot of
 * Screens. It follows a card or the empty state, so it sets its own space. */
.contact-venocast { margin-top: var(--s6); }
.contact-venocast__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
                           margin-top: var(--s3); font-weight: 500; }

/* U3 — the signed-out pages. The mark alone on the brand grey, the form beside
 * it; at phone width the panel becomes a band above the form. `#2D2D2D` is the
 * brand grey from the supplied brand colours, used here and nowhere else. */
/* R1: the reference's proportions (the panel is 880 of 1440), the faint rings
 * around the mark, the 34px title, the full-width button and the centred
 * link beneath it. The rings are drawn by gradients — decoration, no asset. */
.signin { min-height: 100vh; display: grid; grid-template-columns: 1fr 560px; }
.signin__brand {
    background-color: #2D2D2D;
    background-image:
        radial-gradient(circle at center, transparent 199px, rgb(255 255 255 / 0.05) 200px, transparent 201px),
        radial-gradient(circle at center, transparent 319px, rgb(255 255 255 / 0.05) 320px, transparent 321px),
        radial-gradient(circle at center, transparent 449px, rgb(255 255 255 / 0.05) 450px, transparent 451px);
    display: flex; align-items: center; justify-content: center; padding: var(--s6);
    overflow: hidden;
}
.signin__mark { width: clamp(120px, 16vw, 232px); height: auto; display: block; }
.signin__form { align-self: stretch; display: flex; align-items: center; width: 100%; max-width: none;
                margin: 0; padding: 0 72px; background: #F8F9FA; }
.signin__form .card { border: 0; background: transparent; padding: 0; margin-top: 0; width: 100%; }
.signin__form h1 { font-size: 2.125rem; }
.signin__form h1 + p { font-size: 16px; margin-top: 8px; font-weight: 500; }
.signin__form button { width: 100%; }
.signin__form p.small { margin-top: 22px; text-align: center; font-size: 15px; font-weight: 700; }
.signin__form .notice {
    background: #E3F1F1; color: #1F4F53; font-size: 15px; font-weight: 600; line-height: 1.5;
    border-radius: 12px; padding: 16px 18px; margin-top: 22px;
}
/* 09.2: the invitation link, on the sign-in panel. Its sentences are spaced as
 * sentences, its one action is as wide as Sign in's, and the password hint sits
 * under its field rather than centred like the panel's own small links. */
.invite > p + p { margin-top: 12px; }
.invite > p + form, .invite > p + .btn { margin-top: 20px; }
.invite > .btn { display: flex; width: 100%; justify-content: center; }
.signin__form p.invite__hint { margin-top: 6px; font-size: var(--t-sm); font-weight: 400; text-align: left; }
@media (max-width: 720px) {
    .signin { grid-template-columns: 1fr; min-height: 0; }
    .signin__brand { padding: var(--s6) var(--s4); }
    .signin__mark { width: 96px; }
    .signin__form { padding: var(--s6) var(--s4) var(--s7); }
    .signin__brand { background-image: none; }
}

/* ── Package 2A ───────────────────────────────────────────────────────── */

/* Radio rows side by side, for a short choice between Venocast's own values
 * (the picture time). Wraps at phone width rather than scrolling. */
.choices--inline { display: flex; flex-wrap: wrap; gap: var(--s2); max-width: none; }
.choices--inline .choice,
.choices--inline legend + .choice { margin-top: 0; }
.choices--inline { align-items: stretch; }
/* A checkbox row (Keep running) sized like a radio row. */
.choice input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.choice--inline { display: inline-flex; max-width: 34rem; }
/* A hint that stands on its own line under a row of fields. */
p.hint { font-size: var(--t-sm); color: var(--ink-muted); margin-top: var(--s2); }

@media print {
    body { background: #FFF; color: #000; }

    .appbar,
    .nav,
    .no-print { display: none !important; }

    .print-only { display: block; }

    main { max-width: none; padding: 0; }

    /* Borders and fills are screen furniture. On paper the hierarchy comes from
     * the headings and the space, and a page of boxed cards wastes both. */
    .card, .empty, .list { border: 0; padding: 0; background: transparent; }
    .card + .card, .card.spaced { margin-top: var(--s5); }
    .list__row { padding: var(--s2) 0; border-bottom: 1px solid #CCC; }

    /* A breakdown split across a page break is a table of figures a reader
     * cannot follow. Sections stay whole where the paper allows. */
    .card, .list__row, .pair { break-inside: avoid; }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.15rem; }

    /* UI/UX pass components. A section prints as a card does; a table keeps
     * its rows but loses its box, its fills and its row menus; a callout keeps
     * its rule — the rule is what says it is a warning — and loses its fill. */
    .section, .table-wrap, .summary { border: 0; padding: 0; background: transparent; }
    .section + .section { margin-top: var(--s5); }
    .section, .table tr, .record { break-inside: avoid; }
    .table th, .table td { border-bottom: 1px solid #CCC; background: transparent !important; }
    .table__actions, .menu, .table__sort-mark { display: none; }
    .callout, main:not(.shell) p.error { background: transparent; }
}

/* ── RC: package colours ─────────────────────────────────────────────────
 * The design reference's six (`.k-*`), as a dot beside a package's name and as
 * the swatches on its form. **A label, never the meaning**: the dot is
 * aria-hidden and the name is always beside it. #8FCFD1 and #C7E6E7 are under
 * 3:1 on white, so every dot carries a ring in the deep brand colour at low
 * alpha, which keeps the pale two visible without changing the dark four. */
.pkgdot {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    flex: 0 0 auto; vertical-align: -1px; margin-right: 8px;
    box-shadow: inset 0 0 0 1px rgba(18, 54, 64, 0.35);
}
.pkgdot--8fcfd1 { background: #8FCFD1; }
.pkgdot--4a9ba0 { background: #4A9BA0; }
.pkgdot--123640 { background: #123640; }
.pkgdot--227073 { background: #227073; }
.pkgdot--c7e6e7 { background: #C7E6E7; }
.pkgdot--2d2d2d { background: #2D2D2D; }
/* The reference greys a retired package's dot on its packages list. */
.pkgdot.pkgdot--retired { background: #C9D1D4; }
.list__name .pkgdot { width: 14px; height: 14px; vertical-align: -2px; }

/* The Colour choice: the reference's `.pal` swatches, as native radios. */
/* The legend reads as every other field's label (R1: 15/700). */
.swatches legend { font-weight: 700; font-size: 15px; color: var(--ink-heading); }
.swatches .hint { margin: var(--s1) 0 0; font-size: var(--t-sm); font-weight: 500; color: #667378; }
.swatches__row {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin-top: var(--s3);
}
.swatch {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--r-ctl);
    font-size: 14px; font-weight: 600; color: #3D4A4E; background: var(--surface);
}
.swatch:hover { background: var(--sunken); }
.swatch input[type="radio"] { width: auto; min-height: 0; margin: 0; flex: none; accent-color: var(--brand-deep); }
.swatch__chip {
    width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(18, 54, 64, 0.35);
}
.swatch:has(input:checked) { border-color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-deep); }
.swatch:has(input:focus-visible) { outline: 3px solid #9FD3D5; outline-offset: 1px; }
.swatches.field--invalid .swatch { border-color: var(--warn); }

/* The reference's *Package colours* card on the packages page. */
.pal {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    list-style: none; padding: 0; margin: var(--s4) 0 0;
}
.pkg-foot {
    display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 28px;
    align-items: start; margin-top: 28px;
}
.pkg-foot > .card { margin: 0; }
.pkg-foot .hint { font-size: var(--t-sm); font-weight: 500; color: #667378; margin-top: var(--s1); }
.pal__item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #3D4A4E; min-width: 0; }
.pal__item .swatch__chip { flex: 0 0 auto; }
.pal__names { overflow-wrap: anywhere; }
.pal__free { color: var(--ink-muted); font-weight: 500; }

@media (max-width: 64rem) {
    .pkg-foot { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}
@media (max-width: 40rem) {
    .swatches__row, .pal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── R2: the Advert/Content Scheduler (reference screen 13) ──────────────────
 * The reference's parts, by name: the screen-time strip with its segmented
 * control, the page's two headed areas (Club content, Sponsor adverts), and a
 * block per group of sponsors with a row per sponsor — picture, name and what
 * they have, then the pills. */

/* The screen-time strip. */
.strip {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px;
    padding: 18px 24px;
}
.strip__icon { color: var(--primary); flex: 0 0 auto; }
.strip__title { font-size: 17px; font-weight: 700; color: var(--ink-heading); }
.strip__label { font-size: 15.5px; font-weight: 600; color: #3D4A4E; }
.strip__value { font-size: 15px; font-weight: 700; color: var(--brand-deep); }
.strip__hint { margin: 0 0 0 auto; }
.hint { font-size: 14px; font-weight: 500; color: #667378; line-height: 1.5; }

/* The reference's segmented control, as native submit buttons. The pressed one
 * is the current value; pressing another saves it. */
.seg { display: inline-flex; background: #EEF2F3; border-radius: 10px; padding: 4px; gap: 4px; margin: 0; }
.seg__option {
    font: inherit; font-size: 15px; font-weight: 700; color: #3D4A4E;
    background: transparent; border: 0; border-radius: 8px;
    padding: 10px 18px; min-height: 40px; cursor: pointer;
}
.seg__option:hover { color: var(--brand-deep); }
.seg__option[aria-pressed="true"] { background: #FFFFFF; color: var(--brand-deep); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.seg__option:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 1px; }

/* The page's two areas, and the space between everything on it. */
.sched { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.strip + .sched, .callout + .strip { margin-top: 30px; }
.sched__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.sched__head > .section__title { flex: 1 1 auto; font-size: 22px; }
.sched__head--sponsors { margin-top: 36px; align-items: baseline; }
.sched__link { font-size: 15px; font-weight: 700; }
.blk { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
.sched__head--sponsors + .blk, .sched__head--sponsors + .empty { margin-top: 14px; }
.blk__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.blk__title { font-size: 19px; font-weight: 700; color: var(--ink-heading); }
.blk > .hint { margin-top: -6px; }
.card--flush { padding: 0; overflow: hidden; }

/* A picture standing for an advert or an item. The reference's 150 × 84 (16:9)
 * in a row, 72 × 40 in the week; a plain tile with the word when there is no
 * picture to show. */
.thumb {
    width: 150px; height: 84px; flex: 0 0 auto;
    border-radius: 9px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-deep);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb--sm { width: 72px; height: 40px; border-radius: 7px; }
.thumb__word { color: #FFFFFF; opacity: 0.8; font-size: 12px; font-weight: 600; }
.thumb--sm .thumb__word { font-size: 10.5px; }
.thumb--drop {
    background: #FAFCFC; border: 2px dashed #B7C6CA; color: #7F8C91;
}

/* One sponsor per row. */
.arow {
    display: flex; align-items: center; gap: 22px;
    padding: 18px 22px; border-bottom: 1px solid #EEF2F3;
    color: inherit; text-decoration: none;
}
.arow:last-child { border-bottom: 0; }
a.arow:hover { background: #FAFCFC; }
a.arow:hover .arow__name { text-decoration: underline; }
.arow__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.arow__name { font-size: 18px; font-weight: 700; color: var(--ink-heading); overflow-wrap: anywhere; }
.arow__meta { font-size: 15px; font-weight: 500; color: #5B6568; }
.arow > .pill, .arow > .freq, .arow > .btn { flex: 0 0 auto; }

/* The package pill: ● Major · 5×. */
.freq {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14.5px; font-weight: 600; color: #1F5F63;
    background: #E3F1F1; border-radius: 30px; padding: 6px 12px;
    white-space: nowrap;
}
.freq b { font-weight: 800; color: var(--brand-deep); }
.freq .pkgdot { margin-right: 0; }

/* The not-going list keeps its reasons, one line each, beside the picture. */
.list--arow { border: 0; border-radius: 0; }
.list--arow .list__row { align-items: flex-start; gap: 22px; padding: 18px 22px; }
.list--arow .list__main { display: flex; flex-direction: column; gap: 3px; }
.list--arow .list__name { font-size: 17px; font-weight: 700; color: var(--ink-heading); }

/* The quiet card: sponsors with no digital advertising. */
.quiet-card { background: #F8FAFA; padding: 22px 24px; display: flex; gap: 18px; align-items: flex-start; }
.quiet-card > .pill { margin-top: 2px; }
.quiet-card__body { flex: 1 1 auto; min-width: 0; }
.quiet-card__title { font-size: 17px; font-weight: 700; color: var(--ink-heading); }
.quiet-card .muted { font-size: 15px; font-weight: 500; margin-top: 6px; line-height: 1.55; }
.quiet-card__names { font-size: 15px; font-weight: 600; margin-top: 10px; color: #3D4A4E; overflow-wrap: anywhere; }
.quiet-card__names a { color: inherit; }

@media (max-width: 760px) {
    .strip__hint { margin-left: 0; flex-basis: 100%; }
    .arow { flex-wrap: wrap; gap: 12px 16px; padding: 16px; }
    .arow .thumb:not(.thumb--sm) { width: 96px; height: 54px; }
    .arow__main { flex: 1 1 calc(100% - 112px); }
    .arow > .pill, .arow > .freq, .arow > .btn { margin-left: 112px; }
    .arow > .pill + .freq { margin-left: 0; }
    .list--arow .list__row { gap: 12px 16px; padding: 16px; }
    .list--arow .thumb { width: 96px; height: 54px; }
    .quiet-card { flex-direction: column; gap: 10px; }
}

/* ── R2: a form with its preview beside it (reference screens 14 and 17) ─────
 * The form on the left in a card, what it will look like on the right. Stacks
 * below 1100px, preview first under the form. */
.form-pair { display: grid; grid-template-columns: minmax(0, 780px) minmax(0, 1fr); gap: 28px; align-items: start; }
.form-pair__form { padding: 32px 36px; }
.form-pair__form.stack > * + * { margin-top: 28px; }
.form-pair__for { font-size: 16px; color: var(--ink); }
.form-pair__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.preview-slot { border-radius: 14px; overflow: hidden; background: #EEF2F3; box-shadow: 0 20px 50px rgba(6, 30, 36, 0.16); }
.preview-slot .preview { margin: 0; }
.preview-slot .preview__note:empty { display: none; }
.preview-slot__empty {
    aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
    padding: var(--s4); text-align: center; font-size: 15px; font-weight: 600; color: #667378;
}
.preview-slot:has(.preview:not([hidden])) .preview-slot__empty { display: none; }
.note-card { background: #EAF4F4; border-color: #CFE6E4; padding: 18px 20px; }
.note-card p { font-size: 15.5px; font-weight: 600; line-height: 1.55; color: #1F4F53; }
.field select {
    appearance: none; -webkit-appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, #56636A 50%), linear-gradient(135deg, #56636A 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* The reference's drop zone. The file input covers it, invisible, so a drop or
 * a click anywhere on it chooses a file; the focus ring shows on the zone. */
.drop {
    position: relative;
    border: 2px dashed #B7C6CA; border-radius: 14px; background: #FAFCFC;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; padding: 28px 20px; min-height: 150px;
    color: #7F8C91;
}
.field .drop__input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; min-height: 0; border: 0; padding: 0;
}
.drop:hover { background: #F3F7F7; border-color: var(--accent); }
.drop:focus-within { outline: 3px solid #9FD3D5; outline-offset: 2px; border-color: var(--primary); }
.drop__title { font-size: 16px; font-weight: 700; color: var(--ink-heading); }
.drop__choose { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.drop .hint { max-width: 34rem; }

/* The chosen file, as the reference's card: name, bar, *Uploaded*. */
.upload-card {
    display: flex; align-items: center; gap: 16px; margin-top: 12px;
    border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.upload-card[hidden] { display: none; }
.upload-card__main { flex: 1 1 auto; min-width: 0; }
.upload-card__name { font-size: 15.5px; font-weight: 700; color: var(--ink-heading); overflow-wrap: anywhere; }
.upload-card .upload__progress { margin-top: 8px; }

@media (max-width: 1100px) {
    .form-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .form-pair__form { padding: var(--s4); }
    .form-pair__form.stack > * + * { margin-top: 22px; }
}
.sched-lede { max-width: none; }

/* ── R2: an advert (reference screen 16) ──────────────────────────────────── */
.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.strong-link { font-weight: 700; }
.reasons { margin: -8px 0 var(--s4); display: flex; flex-direction: column; gap: 2px; }
/* A package's page (7 October): its form, and its details beside it, level. */
.pkg-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.pkg-page__main { min-width: 0; }
/* The question asked at the top of a page (7 October) stands clear of what follows. */
.card--attention#remove { margin-bottom: 24px; }
.pkg-page__main > .card:first-child, .pkg-page__side > .card { margin-top: 0; }
.pkg-page__facts .pairs { grid-template-columns: 1fr; }
@media (max-width: 900px) {
    .pkg-page { grid-template-columns: minmax(0, 1fr); }
    .pkg-page__side { order: -1; }
    .pkg-page__facts .pairs { grid-template-columns: 1fr 1fr; }
}

.artwork-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.artwork-page__art { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.artwork-page__frame .preview__frame { max-width: none; border-radius: 14px; box-shadow: 0 20px 50px rgba(6, 30, 36, 0.18); }
.artwork-page__frame .preview__media { width: 100%; height: 100%; object-fit: contain; }
.preview-slot .preview__frame { max-width: none; border-radius: 0; }
.preview-slot .preview__media { width: 100%; height: 100%; object-fit: contain; }
.artwork-page__file { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.artwork-page__line { flex: 1 1 auto; margin: 0; }
.artwork-page__hold { font-size: 15px; color: #3D4A4E; }
.artwork-page__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.artwork-page__side > .card + .card { margin-top: 0; }
.kv { margin: 6px 0 0; }
.kv__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #EEF2F3; font-size: 15px; }
.kv__row:last-child { border-bottom: 0; }
.kv__row dt { flex: 0 0 auto; max-width: 45%; color: #56636A; font-weight: 600; }
.kv__row dd { margin: 0; flex: 1 1 auto; min-width: 0; text-align: right; color: var(--ink-heading); font-weight: 700; overflow-wrap: anywhere; }
.remove-note { padding: 0 4px; }
.remove-note .hint { margin-top: 8px; }
@media (max-width: 1100px) {
    .artwork-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .kv__row { flex-direction: column; gap: 2px; }
    .kv__row dt { max-width: none; }
    .kv__row dd { text-align: left; }
}

/* ── R2: Schedule content (reference screen 14) ───────────────────────────── */
.chip-choices, .when { border: 0; padding: 0; margin: 0; min-width: 0; }
.chip-choices legend, .when__legend { font-weight: 700; font-size: 15px; color: var(--ink-heading); padding: 0; margin-bottom: 8px; }
.chip-choices__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-choice__word {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border: 1.5px solid #CBD5D8; border-radius: 30px; background: #FFFFFF;
    font-size: 15px; font-weight: 600; color: #3D4A4E; cursor: pointer;
}
.chip-choice:hover .chip-choice__word { background: var(--sunken); }
.chip-choice:has(input:checked) .chip-choice__word { background: var(--brand-deep); border-color: var(--brand-deep); color: #FFFFFF; }
.chip-choice:has(input:focus-visible) .chip-choice__word { outline: 3px solid #9FD3D5; outline-offset: 1px; }
.chip-choices .hint, .chip-choices .error { display: block; margin-top: 8px; }
.chip-choices.field--invalid .chip-choice__word { border-color: var(--warn); }

/* Keep running or Set dates: the reference's segmented choice, as radios. */
.seg--choice { align-self: flex-start; }
.seg__word {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
    border-radius: 8px; font-size: 15px; font-weight: 700; color: #3D4A4E; cursor: pointer;
}
.seg__choice:has(input:checked) .seg__word { background: #FFFFFF; color: var(--brand-deep); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.seg__choice:has(input:focus-visible) .seg__word { outline: 3px solid #9FD3D5; outline-offset: 1px; }
.when > .hint, .when > .row { margin-top: 10px; }
.when:has(input[name="keep_running"][value="1"]:checked) .when__ends,
.when:has(input[name="keep_running"][value="1"]:checked) .when__both { display: none; }
.when:has(input[name="keep_running"][value="0"]:checked) .when__keep { display: none; }

.screens-note {
    display: flex; align-items: center; gap: 12px;
    background: #F3F7F7; border-radius: 12px; padding: 14px 16px;
    font-size: 15px; font-weight: 600; color: #3D4A4E;
}
.screens-note svg { color: var(--primary); flex: 0 0 auto; }

.sharing { display: flex; flex-direction: column; gap: 8px; }
.sharing__title { font-size: 17px; font-weight: 700; color: var(--ink-heading); }
.sharing .muted { font-size: 15px; font-weight: 500; line-height: 1.55; }
.sharing__list { list-style: none; margin: 6px 0 0; padding: 0; }
.sharing__item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #EEF2F3; font-size: 15px; font-weight: 600; }
.sharing__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sharing__item--new .sharing__name { font-weight: 700; }
.sharing__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: #C9D1D4; }
.tag { display: inline-block; font-size: 12.5px; font-weight: 700; color: #4F5C62; background: #ECEFF0; border-radius: 6px; padding: 3px 8px; }
.turns-legend__off { color: #7F8C91; }
.title-row .freq { white-space: normal; }
.form-pair__form .field { max-width: none; }

/* ── R2: the Scheduler's sidebar (Jason, 29 September) ───────────────────────
 * Going and Starting later on the left; what is not going, sponsors with no
 * advert, and no digital advertising in a 360px column on the right. Below
 * 1100px the sidebar follows the main list. */
.sched-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 14px; }
.sched-split__main > .blk:first-child { margin-top: 0; }
.sched-split__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.side-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.side-card__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.side-card__title { font-size: 17px; font-weight: 700; color: var(--ink-heading); }
.side-card__empty { margin: 0; }
.list--side { border: 0; border-radius: 0; margin: 0 -20px; }
.list--side .list__row { align-items: flex-start; gap: 12px; padding: 12px 20px; border-top: 1px solid #EEF2F3; border-bottom: 0; }
.list--side .list__main { display: flex; flex-direction: column; gap: 2px; }
.list--side .list__name { font-size: 15px; font-weight: 700; color: var(--ink-heading); }
.list--side .list__meta { font-size: 13.5px; }
.list--side .thumb--sm { width: 64px; height: 36px; }
.side-fold > summary { cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--ink-strong); padding-block: 4px; }
.side-fold > .hint { margin: 6px 0 8px; }
.side-list { list-style: none; margin: 0 -20px; padding: 0; }
.side-list__row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid #EEF2F3; }
.side-list__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.side-list__name { font-size: 15px; font-weight: 700; color: var(--ink-heading); overflow-wrap: anywhere; }
.side-list__meta { font-size: 13.5px; font-weight: 500; color: #5B6568; }
.side-list__link { font-size: 13.5px; font-weight: 600; }
.side-list__row > .btn { flex: 0 0 auto; }
.sched-split__side .quiet-card { flex-direction: column; gap: 10px; padding: 18px 20px; }
.sched-split__side .quiet-card > .pill { align-self: flex-start; margin: 0; }
@media (max-width: 1100px) {
    .sched-split { grid-template-columns: minmax(0, 1fr); }
}
.thumb--sm .thumb__word { text-align: center; line-height: 1.1; padding: 0 3px; font-size: 10px; }

/* R2 r3 (Jason, 29 September): the sidebar's first card starts level with the
 * main column's first card, below its heading — the heading row is fixed at
 * 27px and the gap under it is the block's 14px. */
.sched-split .blk__head { min-height: 27px; }
.sched-split .blk__title { line-height: 27px; }
.sched-split__side { margin-top: 41px; }
/* Sponsors with no advert, collapsible: the whole heading row is the toggle. */
.side-collapse { display: flex; flex-direction: column; }
.side-collapse > .hint { margin: 10px 0; }
.side-collapse__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.side-collapse__summary::-webkit-details-marker { display: none; }
.side-collapse__summary::before {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
    transform: rotate(-45deg); transition: transform 0.15s;
}
.side-collapse[open] > .side-collapse__summary::before { transform: rotate(45deg); }
.side-collapse__summary:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 3px; border-radius: 6px; }
@media (max-width: 1100px) {
    .sched-split__side { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .side-collapse__summary::before { transition: none; }
}

/* ── R3a: Sponsors (reference screens 08 and 27) ─────────────────────────────
 * The table on the left; the value box and the packages on the right, 400px
 * wide as the reference's. On a phone the value box comes first, then the
 * list as one card per sponsor, then the packages. */
@media (min-width: 1200px) {
    .split--sponsors { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; }
}
/* Below the reference's 1440 the table needs the room: at 1280 its longest
 * status (*No current agreement*) and an *Ended …* date overran it by 13px,
 * and below 1280 the two cannot sit side by side at all. */
@media (min-width: 1200px) and (max-width: 1279px) {
    /* Too narrow for the table beside the box (its longest row is 727px), so
     * the page stacks here as below 1200. */
    .split--sponsors { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    .split--sponsors { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
    .table--sponsors th, .table--sponsors td { padding-inline: 16px; }
    .split--sponsors .srow__name { width: 128px; }
    .split--sponsors .pkg-box__row { gap: 10px; }
    .split--sponsors .pkg-box__count { min-width: 0; }
}
.table .table__ends--soon { color: #7A4D06; font-weight: 700; }
/* A retired sponsor reads as history, as the reference greys it. */
.table--sponsors .table__row--retired .table__primary .table__name { color: #6F7B7F; }
.table__value--none { color: var(--ink-muted); }
.table--sponsors .table__primary .table__name { font-weight: 700; color: var(--ink-heading); }

.value-box { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 18px; }
.value-box .eyebrow { margin: 0; }
.value-box__title { font-size: 22px; font-weight: 700; color: var(--ink-heading); margin-top: 8px; }
.value-box__figure { font-size: 46px; font-weight: 800; color: var(--brand-deep); letter-spacing: -0.015em; line-height: 1; font-variant-numeric: tabular-nums; }
.value-box__figure--none { font-size: 22px; }
.value-box__sub { font-size: 15px; font-weight: 600; color: var(--ink-muted); margin-top: 8px; }
.vbar { display: block; width: 100%; height: 22px; border-radius: 6px; background: #EEF2F3; overflow: hidden; }
.vbar__part { stroke: #FFFFFF; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.vbar__part--running0, .srow__bar--running0 { fill: #227073; }
.vbar__part--running1, .srow__bar--running1 { fill: #4A9BA0; }
.vbar__part--ending0, .srow__bar--ending0 { fill: #D9A441; }
.vbar__part--ending1, .srow__bar--ending1 { fill: #E7BF6F; }
.value-box__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.value-tile { border-radius: 12px; padding: 14px 16px; }
.value-tile--running { background: #EAF4F4; }
.value-tile--ending { background: #FCF3E1; }
.value-tile__label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.value-tile--running .value-tile__label { color: #1F5F63; }
.value-tile--ending .value-tile__label { color: #7A4D06; }
.value-tile__figure { font-size: 24px; font-weight: 800; color: var(--brand-deep); margin-top: 6px; font-variant-numeric: tabular-nums; }
.value-tile__sub { font-size: 13.5px; font-weight: 600; color: var(--ink-muted); margin-top: 2px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.sw--running { background: #4A9BA0; }
.sw--ending { background: #D9A441; }
.value-box__rule { height: 1px; background: #EEF2F3; }
.value-box__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.srow { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; }
.srow__name { width: 150px; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-heading); }
.srow__track { flex: 1 1 auto; height: 8px; border-radius: 4px; overflow: hidden; }
.srow__bg { fill: #EEF2F3; }
.srow--ending .srow__name { color: #7A4D06; }
.srow__value { width: 72px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; color: var(--brand-deep); }
.value-box__notes { display: flex; flex-direction: column; gap: 6px; }
.value-box__notes .hint { margin: 0; }

.pkg-box { padding: 22px 26px; }
.split--sponsors .split__aside > * + * { margin-top: 20px; }
.pkg-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pkg-box__head .summary__title { font-size: 19px; font-weight: 700; margin: 0; }
.pkg-box__manage { font-size: 15px; font-weight: 700; }
.pkg-box__list { list-style: none; margin: 0; padding: 0; }
.pkg-box__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #EEF2F3; }
.pkg-box__row .pkgdot { margin: 0; }
/* Only the name gives way: the figures never shrink under one another. */
.pkg-box__row > :not(.pkg-box__name) { flex: none; }
.pkg-box__name { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--ink-heading); overflow-wrap: break-word; text-decoration: none; }
.pkg-box__name:hover { text-decoration: underline; }
.pkg-box__weight { width: 34px; white-space: nowrap; font-size: 14.5px; font-weight: 600; color: #56636A; }
.pkg-box__price { min-width: 54px; white-space: nowrap; text-align: right; font-size: 15px; font-weight: 700; }
.pkg-box__count { min-width: 82px; text-align: right; margin: 0; white-space: nowrap; }

@media (max-width: 1279px) {
    /* The aside's two parts separate: the value box leads, the packages close. */
    .split--sponsors .split__aside { display: contents; }
    .split--sponsors .value-box { order: -1; }
    .split--sponsors .pkg-box { order: 1; }
}
@media (max-width: 760px) {
    /* The reference's phone summary (27): the title and the figure on one
     * line, the bar, then *Running* and *Ending soon* as one legend line. The
     * coverage note stays: a total whose blanks are hidden reads as all of it. */
    .value-box { padding: 18px; gap: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .value-box > * { grid-column: 1 / -1; }
    .value-box > div:first-child { grid-column: 1; }
    .value-box > div:first-child + div { grid-column: 2; text-align: right; }
    .value-box > div:first-child .eyebrow, .value-box__sub { display: none; }
    .value-box__title { font-size: 16px; margin: 0; }
    .value-box__figure { font-size: 28px; }
    .value-box__figure--none { font-size: 16px; }
    .value-box__tiles { display: flex; flex-wrap: wrap; gap: 6px 18px; }
    .value-tile { display: flex; align-items: center; gap: 6px; padding: 0; background: none; border-radius: 0; }
    .value-tile__figure { font-size: 14px; font-weight: 700; margin: 0; color: inherit; }
    .value-tile--running .value-tile__figure { color: #1F5F63; }
    .value-tile--ending .value-tile__figure { color: #7A4D06; }
    .value-tile__sub { display: none; }
    .value-box__notes .hint { font-size: 13px; }
    .value-box__list, .value-box__list + .value-box__rule,
    .value-box > .eyebrow:not(:first-child) { display: none; }
    .value-box__rule:has(+ .eyebrow) { display: none; }
    .srow__name { width: 110px; }
    /* One card per sponsor: name and value on the first line, the status and
     * when it ends on the second, as the reference's phone list. */
    .table--sponsors tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px; row-gap: 8px; align-items: center;
    }
    .table--sponsors .table__primary { grid-column: 1; grid-row: 1; }
    .table--sponsors .table__value { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; color: var(--brand-deep); }
    .table--sponsors .table__status { grid-column: 1; grid-row: 2; }
    .table--sponsors .table__ends { grid-column: 2; grid-row: 2; text-align: right; font-size: 14px; font-weight: 600; color: #5B6568; }
    .table--sponsors .table__ends--soon { color: #7A4D06; font-weight: 700; }
    .table--sponsors .table__value .table__label,
    .table--sponsors .table__ends--ended .table__label,
    .table--sponsors .table__ends--none .table__label { display: none; }
    .table--sponsors .table__ends .table__label {
        display: inline; min-width: 0; margin-right: 4px;
        font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit;
    }
    .table--sponsors .table__value--none { font-weight: 600; color: var(--ink-muted); }
}

/* ── R3a: Advertising packages (reference screen 12) ─────────────────────────
 * One table, live packages then retired ones. Frequency is the reference's
 * squares in the package's colour, then `N×`. A retired row is greyed, its
 * squares too, and carries the *Retired package* tag where the count was. */
.table--packages th, .table--packages td { padding: 18px 26px; vertical-align: middle; }
.table--packages thead th { padding-block: 14px; }
.table--packages thead th:nth-child(1) { width: 24%; }
.table--packages thead th:nth-child(2) { width: 32%; }
.table--packages thead th:nth-child(5) { width: 80px; }
.table--packages .table__name { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: var(--ink-heading); }
.table--packages .table__name .pkgdot { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.sq { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sq__one { display: inline-block; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(18, 54, 64, 0.2); }
.sq__one.sq__one--retired { background: #D9DFE1; box-shadow: none; }
.sq__n { font-size: 15px; font-weight: 700; color: var(--brand-deep); }
.sq__one + .sq__n { margin-left: 8px; }
.table--packages .pkg-row__figure { font-size: 16px; font-weight: 600; color: var(--ink-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table--packages .pkg-row__act { text-align: right; white-space: nowrap; }
.pkg-row__act a, .pkg-row__button { font-size: 15px; font-weight: 700; }
.pkg-row__form { margin: 0; }
.pkg-row__button {
    border: 0; background: none; padding: 0; min-height: 0; cursor: pointer;
    font-family: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 3px;
}
.pkg-row__button:hover { color: var(--primary-hover); }
.pkg-row__button:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 2px; border-radius: 4px; }
.table--packages tbody tr.pkg-row--retired > * { background: #FAFCFC; }
.table--packages .pkg-row--retired .table__name, .table--packages .pkg-row--retired .pkg-row__figure, .pkg-row--retired .sq__n { color: #5E6B70; }
.pkg-foot .card__title { font-size: 19px; }

@media (max-width: 760px) {
    /* One card per package: the name and its action, then frequency, then
     * price and sponsors, each labelled by its column's word. */
    .table--packages thead { display: none; }
    .table--packages, .table--packages tbody { display: block; }
    .table--packages tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px; row-gap: 10px; align-items: center;
        padding: 16px 18px; border-bottom: 1px solid #EEF2F3;
    }
    .table--packages tbody tr:last-child { border-bottom: 0; }
    .table--packages tbody tr > * { padding: 0; border: 0; text-align: left; }
    .table--packages .pkg-row__name { grid-column: 1; grid-row: 1; }
    .table--packages .pkg-row__act { grid-column: 2; grid-row: 1; text-align: right; }
    .table--packages td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .table--packages td:nth-child(3) { grid-column: 1; grid-row: 3; }
    /* Across the whole row, pushed right, so the *Retired package* tag does
     * not widen the action column and squeeze the name above it. */
    .table--packages td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; justify-self: end; text-align: right; }
    .table--packages .table__name { font-size: 16.5px; }
    .table--packages tbody tr.pkg-row--retired { background: #FAFCFC; }
    .table--packages tbody tr.pkg-row--retired > * { background: none; }
}
.sq__words {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 760px) {
    .table--packages .table__label { min-width: 0; }
    .sq__words { position: static; width: auto; height: auto; margin: 0 0 0 6px; overflow: visible; clip-path: none; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
}

/* ── R3b: a sponsor, Add sponsor, Renew (reference screens 09, 28, 10, 11) ──
 * The sponsor page is two columns — agreements and adverts, then a 380px
 * column of contact, notes and lifetime — as the reference's. On a phone the
 * right column follows the left. */
.sponsor-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1100px) {
    .sponsor-split { grid-template-columns: minmax(0, 1fr) 380px; }
}
.sponsor-split__main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.sponsor-split__aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.agreements { display: flex; flex-direction: column; gap: 16px; }
.agreements__head { display: flex; align-items: center; gap: 12px; }
.agreements__title { flex: 1 1 auto; font-size: 22px; font-weight: 700; color: var(--ink-heading); margin: 0; }

/* One agreement: the reference's card. The running one is highlighted. */
.agree { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.agree--current { border-color: #B9DCD9; box-shadow: 0 0 0 3px rgba(74, 155, 160, 0.12); }
.agree__top, .agree__ad, .agree__actions, .agree__row, .agree__links, .agree__panel { padding: 22px 26px; }
.agree__top { display: flex; align-items: center; gap: 18px; }
.agree__when { flex: 1 1 auto; min-width: 0; }
.agree__eyebrow { color: #1F5F63; margin: 0; }
.agree__dates { font-size: 21px; font-weight: 700; color: var(--ink-heading); margin: 6px 0 0; }
.agree__dates--sm { font-size: 17px; color: #3D4A4E; margin: 0; }
.agree__value { text-align: right; flex: none; }
.agree__value .hint { margin: 2px 0 0; }
.agree__figure { font-size: 28px; font-weight: 800; color: var(--brand-deep); font-variant-numeric: tabular-nums; margin: 0; }
.agree__figure--none { font-size: 17px; font-weight: 600; color: var(--ink-muted); }
.agree__ads { border-top: 1px solid #EEF2F3; }
.agree__ad { display: flex; align-items: center; gap: 16px; }
.agree__ad + .agree__ad { border-top: 1px solid #EEF2F3; }
.agree__ad--ended { opacity: 0.7; }
.agree__icon { width: 24px; height: 24px; flex: none; fill: none; stroke: #227073; stroke-width: 1.8; stroke-linecap: round; }
.agree__ad-text { flex: 1 1 auto; min-width: 0; }
.agree__ad-title { font-size: 16px; font-weight: 700; color: var(--ink-heading); margin: 0; }
.agree__ad-dates { font-size: 15px; font-weight: 500; color: var(--ink-muted); margin: 4px 0 0; }
.agree__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px solid #EEF2F3; padding-block: 18px; }
.agree__end { margin-left: auto; font-size: 15px; font-weight: 700; color: #9A3B2E; }
.agree__end:hover { color: #7A2A20; }
.agree__panel { border-top: 1px solid #EEF2F3; background: #FAFCFC; border-radius: 0 0 var(--r) var(--r); }
.agree__panel-title { font-size: 16px; font-weight: 700; margin: var(--s5) 0 var(--s2); color: var(--ink-heading); }
.agree__panel-lede { margin: 0 0 var(--s2); color: #3D4A4E; }
.agree__arrangements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.agree__row { display: flex; align-items: center; gap: 18px; }
.agree__main { flex: 1 1 auto; min-width: 0; }
.agree__meta { font-size: 15px; font-weight: 500; color: var(--ink-muted); margin: 4px 0 0; }
.agree__meta .pkgdot { margin-right: 6px; }
.agree__num { width: 110px; flex: none; text-align: right; font-size: 20px; font-weight: 700; color: #3D4A4E; font-variant-numeric: tabular-nums; margin: 0; }
.agree__num--none { font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.agree__links { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: -8px 0 0; padding-top: 0; font-size: 14.5px; font-weight: 700; }
.agree--ended .agree__dates--sm { color: #56636A; }

/* The package cards: native radios as the reference's 2×2 picks. */
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: var(--s2); }
.pick {
    position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
    padding: 16px 18px 16px 46px; background: var(--surface);
    border: 1.5px solid var(--border); border-radius: 12px;
}
.pick input[type="radio"] { position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--brand-deep); }
.pick:hover { background: var(--sunken); }
.pick:has(input:checked) { border-color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand-deep); background: #F3F8F8; }
.pick:has(input:focus-visible) { outline: 3px solid #9FD3D5; outline-offset: 2px; }
.pick__title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; font-weight: 700; color: var(--ink-heading); }
.pick__title .pkgdot { margin: 0; }
.pick__meta { font-size: 15px; font-weight: 600; color: #56636A; }
.tag--current { background: #E3F1F1; color: #1F5F63; }
.field--invalid .pick { border-color: var(--warn); }

/* Adverts: the reference's rows. */
.artwork-rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.artwork-rows > li + li { border-top: 1px solid #EEF2F3; }
.artwork-row { display: flex; align-items: center; gap: 22px; padding: 18px 22px; color: inherit; text-decoration: none; }
.artwork-row:hover { background: var(--row-hover); }
.artwork-row:focus-visible { outline: 3px solid #9FD3D5; outline-offset: -3px; }
.artwork-row .thumb { width: 150px; height: 84px; flex: none; }
.artwork-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.artwork-row__name { font-size: 18px; font-weight: 700; color: var(--ink-heading); overflow-wrap: anywhere; }
.artwork-row__meta { font-size: 15px; font-weight: 500; color: var(--ink-muted); margin-top: 4px; }
.artwork-row--paused .artwork-row__name { color: #56636A; }

/* The right column's cards. */
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.side-card__head { display: flex; align-items: center; gap: 10px; }
.side-card__title { font-size: 19px; font-weight: 700; color: var(--ink-heading); margin: 0; }
.side-card__lock { width: 20px; height: 20px; flex: none; fill: none; stroke: #56636A; stroke-width: 1.8; stroke-linecap: round; }
.side-card .hint, .side-card .eyebrow, .side-card .notes { margin: 0; }
.side-card .notes { font-size: 15.5px; font-weight: 500; line-height: 1.6; color: #3D4A4E; }
.side-card__figure { font-size: 30px; font-weight: 800; color: var(--brand-deep); font-variant-numeric: tabular-nums; margin: 0; }
.side-card__figure--none { font-size: 18px; font-weight: 700; color: var(--ink-muted); }
.kv { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.kv__pair { display: flex; flex-direction: column; gap: 4px; }
.kv__pair dt { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow); }
.kv__pair dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-heading); overflow-wrap: anywhere; }

/* Forms beside a panel: Add sponsor (10) and Renew (11). */
.form-split { display: grid; grid-template-columns: minmax(0, 780px); gap: 28px; align-items: start; }
@media (min-width: 1100px) {
    .form-split--aside { grid-template-columns: minmax(0, 780px) minmax(0, 1fr); }
}
.form-split > .card { margin: 0; }
.form-card { padding: 32px 36px; }
.form-card__form { display: flex; flex-direction: column; gap: 26px; }
.form-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.form-group__legend { padding: 0; margin-bottom: 4px; font-weight: 700; font-size: 15px; color: var(--ink-heading); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.opt { font-weight: 500; color: var(--ink-muted); }
.field--narrow { max-width: 360px; }

/* *Record their agreement next*: a native checkbox drawn as the switch. */
.switch-row { display: flex; align-items: center; gap: 14px; cursor: pointer; background: #F3F7F7; border-radius: 12px; padding: 16px 18px; }
.switch-row__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-row__track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 13px; background: #C9D1D4; transition: background 0.15s; }
.switch-row__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.switch-row__input:checked + .switch-row__track { background: #227073; }
.switch-row__input:checked + .switch-row__track::after { transform: translateX(20px); }
.switch-row__input:focus-visible + .switch-row__track { outline: 3px solid #9FD3D5; outline-offset: 2px; }
.switch-row__text { display: flex; flex-direction: column; gap: 2px; }
.switch-row__title { font-size: 16px; font-weight: 700; color: var(--ink-heading); }
.switch-row__text .hint { margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .switch-row__track, .switch-row__track::after { transition: none; }
}

/* *Is this the same business?* (Q5), the reference's warm side panel. */
.same-panel { background: #FCF3E1; border: 1px solid #F0DCB1; border-radius: var(--r); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.same-panel__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: #6B4306; margin: 0; }
.same-panel__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: #A66420; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.same-panel__lede, .same-panel__foot { font-size: 15px; font-weight: 500; line-height: 1.55; color: #5A4A2C; margin: 0; }
.same-panel__card { background: var(--surface); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.same-panel__who { flex: 1 1 auto; min-width: 0; }
.same-panel__name { font-size: 15px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.same-panel__who .hint { margin: 2px 0 0; }

/* Renew's Summary (Q2): the chosen card's line, followed by CSS alone. */
.summary-card { padding: 24px 26px; margin: 0; }
.summary-card .eyebrow { margin: 0; }
.summary-card__title { font-size: 21px; font-weight: 700; color: var(--ink-heading); margin: 8px 0; overflow-wrap: anywhere; }
.summary-card__list { margin: 0; }
.summary-card__pair { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #EEF2F3; font-size: 15.5px; }
.summary-card__pair dt { font-weight: 600; color: #5B6568; }
.summary-card__pair dd { margin: 0; font-weight: 700; color: var(--ink-heading); text-align: right; }
.summary-card__note { margin-top: 14px; }
.sum-pick { display: none; }
.sum-pick--none { display: inline; color: var(--ink-muted); font-weight: 600; }
.agreement-form:has(.pick input:checked) .sum-pick--none { display: none; }
.agreement-form:has(.pick:nth-child(1) input:checked) .sum-pick:nth-child(2),
.agreement-form:has(.pick:nth-child(2) input:checked) .sum-pick:nth-child(3),
.agreement-form:has(.pick:nth-child(3) input:checked) .sum-pick:nth-child(4),
.agreement-form:has(.pick:nth-child(4) input:checked) .sum-pick:nth-child(5),
.agreement-form:has(.pick:nth-child(5) input:checked) .sum-pick:nth-child(6),
.agreement-form:has(.pick:nth-child(6) input:checked) .sum-pick:nth-child(7),
.agreement-form:has(.pick:nth-child(7) input:checked) .sum-pick:nth-child(8),
.agreement-form:has(.pick:nth-child(8) input:checked) .sum-pick:nth-child(9),
.agreement-form:has(.pick:nth-child(9) input:checked) .sum-pick:nth-child(10),
.agreement-form:has(.pick:nth-child(10) input:checked) .sum-pick:nth-child(11),
.agreement-form:has(.pick:nth-child(11) input:checked) .sum-pick:nth-child(12),
.agreement-form:has(.pick:nth-child(12) input:checked) .sum-pick:nth-child(13),
.agreement-form:has(.pick:nth-child(13) input:checked) .sum-pick:nth-child(14),
.agreement-form:has(.pick:nth-child(14) input:checked) .sum-pick:nth-child(15),
.agreement-form:has(.pick:nth-child(15) input:checked) .sum-pick:nth-child(16),
.agreement-form:has(.pick:nth-child(16) input:checked) .sum-pick:nth-child(17) { display: inline; }

@media (max-width: 760px) {
    .agree__top, .agree__ad, .agree__actions, .agree__row, .agree__links, .agree__panel { padding: 16px 18px; }
    .agree__top { align-items: flex-start; }
    .agree__dates { font-size: 18px; }
    .agree__figure { font-size: 24px; }
    .agree__ad { flex-wrap: wrap; }
    .agree__ad .freq { margin-left: 40px; }
    .agree__row { flex-wrap: wrap; gap: 10px 14px; }
    .agree__main { flex-basis: 100%; }
    .agree__num { width: auto; margin-left: auto; }
    .agree__end { margin-left: 0; }
    .picks, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .artwork-row { gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
    .artwork-row .thumb { width: 96px; height: 54px; }
    .artwork-row__text { flex-basis: calc(100% - 110px); }
    .artwork-row .pill { margin-left: 110px; }
    .form-card { padding: 22px 18px; }
    .side-card { padding: 20px; }
}
/* In the reference's form cards the fields run the card's width. */
.form-card .field { max-width: none; }
.form-card .field input:not([type="radio"]):not([type="checkbox"]),
.form-card .field textarea { max-width: none; width: 100%; }
.form-card .field--narrow { max-width: 360px; }
.form-group__hint { margin: -8px 0 0; }
.callout + .sponsor-split,
.section + .sponsor-split { margin-top: 28px; }

/* ── R4: Screens (reference screens 30, 31, 32 and 33) ─────────────────────── */

/* 30 · the list: one card per screen, a TV drawn in its state. */
.screen-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.screen-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: 22px 24px 24px; display: flex; flex-direction: column; min-width: 0;
}
.screen-card--attention { border: 2px solid #F3DDAA; box-shadow: 0 0 0 4px #FDF6E7; padding: 21px 23px 23px; }
.screen-card--removed .tv { opacity: 0.7; }
.screen-card__name { font-size: 19px; font-weight: 700; line-height: 1.3; margin-top: 22px; overflow-wrap: anywhere; }
.screen-card__name a { color: var(--ink-heading); text-decoration: none; }
.screen-card__name a:hover { color: var(--primary); text-decoration: underline; }
.screen-card__where { margin: 2px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-muted); overflow-wrap: anywhere; }
/* 08.5: which way the TV is mounted. */
.screen-card__mounted { margin: 2px 0 0; font-size: 13px; color: var(--ink-muted); }
.mounted { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.mounted__way { display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.mounted__way:has(input:checked) { border-color: var(--accent, #3F9884); background: rgba(63, 152, 132, 0.06); }
.mounted__way input { margin: 0; flex: none; }
.mounted__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mounted__words .hint { margin: 0; }
.mounted__tv { flex: none; width: 44px; height: 44px; position: relative; }
.mounted__tv::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 24px;
  margin: -12px 0 0 -20px; border: 3px solid var(--ink, #23282B); border-radius: 4px; box-sizing: border-box; }
.mounted__tv::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 3px;
  margin: 12px 0 0 -5px; background: var(--ink, #23282B); border-radius: 2px; }
.mounted__tv--portrait_right { transform: rotate(90deg); }
.mounted__tv--portrait_left { transform: rotate(-90deg); }
.screen-card__foot {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 10px; margin-top: auto; padding-top: 18px;
}
.screen-card__when { font-size: 14.5px; font-weight: 500; color: var(--ink-muted); }

/* The TV: a screen inside a bezel, 16:9. */
.tv {
    aspect-ratio: 16 / 9; border-radius: 8px; border: 6px solid #1E2527;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px;
}
.tv--on   { background: #173E48; }
.tv--dark { background: #262B2E; }
.tv--empty { background: #EEF2F3; border-color: #D5DEE0; }
.tv__icon { display: inline-flex; }
.tv__icon--ok   { color: #7FC9C3; }
.tv__icon--warn { color: #E4A636; }
.tv__word { font-size: 15px; font-weight: 700; color: #56636A; }
.tv__word--light { color: #D6E7EA; }

.removed-link { margin: 36px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14.5px; }
.removed-link .strong-link { text-decoration: underline; }

/* Want another screen? — the reference's tinted box. */
.card.contact-venocast {
    margin-top: 30px; background: #EAF3F3; border-color: #D3E6E5; padding: 28px 32px;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px 28px;
}
.contact-venocast__icon {
    width: 56px; height: 56px; border-radius: 12px; background: var(--surface);
    display: inline-flex; align-items: center; justify-content: center; color: var(--primary);
}
.contact-venocast__title { font-size: 19px; font-weight: 700; }
.contact-venocast__text p { margin: 4px 0 0; font-size: 16px; font-weight: 500; line-height: 1.55; }
.card.contact-venocast .contact-venocast__links {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0;
}
.contact-venocast__links a { color: var(--ink-strong); font-weight: 700; text-decoration: none; }
.contact-venocast__links a:hover { text-decoration: underline; }

/* 31 · one screen: the state and what to do on the left, History on the right. */
.screen-split { display: grid; grid-template-columns: minmax(0, 900px) minmax(340px, 1fr); gap: 28px; align-items: start; }
.screen-split__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.screen-split__main > .card + .card { margin-top: 0; }
.screen-split__side { min-width: 0; }

.state-card {
    display: flex; gap: 20px; align-items: flex-start;
    border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
    padding: 28px 30px;
}
.state-card--attention { background: #FDF5E6; border-color: #F1DAA9; }
.state-card--fine { background: var(--ok-soft); border-color: #C7E3DC; }
.state-card__badge {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.state-card--attention .state-card__badge { background: #FBE7C2; color: #8A5A0A; }
.state-card--fine .state-card__badge { background: #CDEAE2; color: var(--ok); }
.state-card__body { min-width: 0; }
.state-card__title { font-size: 26px; font-weight: 700; line-height: 1.25; }
.state-card--attention .state-card__title { color: #5C3B06; }
.state-card--fine .state-card__title { color: var(--ok); }
.state-card__body p { margin: 8px 0 0; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--ink); max-width: 44rem; }
.state-card--attention .state-card__body p { color: #4A3208; }
.state-card__body .state-card__lead { font-weight: 700; margin-top: 6px; }
.state-card__action { margin-top: 18px; }
.state-card__body > .btn.state-card__action { display: inline-flex; }

.fix-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 18px 0; }
.fix-row + .fix-row { border-top: 1px solid #E8EDEF; }
.fix-row:first-of-type { padding-top: 4px; }
.fix-row:last-child { padding-bottom: 0; }
.fix-row__title { font-size: 16px; font-weight: 700; color: var(--ink-heading); }
.fix-row__text { min-width: 0; }
.fix-row__text p { margin: 2px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-muted); line-height: 1.5; }
.fix-row > form { margin: 0; flex: 0 0 auto; }
.fix-row > .btn { flex: 0 0 auto; }

.remove-screen { margin: 4px 0 0; }
.remove-screen__go {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--tone-stopped); text-decoration: underline;
    text-underline-offset: 2px; min-height: 24px;
}
.remove-screen__go:hover { color: #7C1F20; }
.remove-screen p { margin: 4px 0 0; }

.history .card__title { font-size: 24px; margin-bottom: 8px; }
.history .kv { gap: 0; margin-top: 4px; }
.history .kv__row { padding: 14px 0; font-size: 16px; }
.history dt { color: var(--ink-muted); font-weight: 500; }
.history dd { margin: 0; font-weight: 700; color: var(--ink-heading); text-align: right; }

/* 32 · Add a screen: the form, and what happens next beside it. */
.add-screen { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 28px; align-items: start; }
.add-screen__form { padding: 36px; }
.add-screen__form .field { max-width: none; }
.add-screen__form .stack { gap: 24px; }
.add-screen > .card + .card { margin-top: 0; }
.next-steps .card__title { font-size: 24px; margin-bottom: 18px; }
.next-steps__list { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 20px; }
.next-steps__list li {
    counter-increment: step; position: relative; padding-left: 48px;
    font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--ink);
}
.next-steps__list li::before {
    content: counter(step); position: absolute; left: 0; top: -3px;
    width: 32px; height: 32px; border-radius: 50%; background: #E3F0F0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: var(--ink-strong);
}

/* 33 · Connect: six boxes, and the TV showing where the code appears.
 *
 * **One input drawn as six boxes.** A monospace face, so every character has the
 * same advance (1ch); the boxes are one SVG laid behind the first 20ch, each 3ch
 * wide with 0.4ch between, and `letter-spacing` puts one character in the middle
 * of each. Measured in ch, so the boxes follow whichever monospace face the
 * browser has. The input is 22ch wide so the spacing after the sixth character
 * never scrolls the field. No script. */
.field--code input.code-boxes {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: 2rem; font-weight: 700; color: var(--ink-heading);
    text-transform: uppercase; text-align: left;
    width: 22ch; max-width: 100%; height: 76px; min-height: 0;
    padding: 0 0 0 1ch; letter-spacing: 2.4ch;
    border: 0; border-radius: 0; box-shadow: none; outline: none;
    caret-color: var(--primary);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 76' preserveAspectRatio='none'%3E%3Cg fill='%23FFFFFF' stroke='%237D8A8C' stroke-width='1.5' vector-effect='non-scaling-stroke'%3E%3Crect x='0.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='34.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='68.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='102.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='136.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='170.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 20ch 100%;
}
/* Focus: every box takes the brand edge and a tint, so the whole code reads as
 * the field in use (the input's own outline would run past the sixth box). */
.field--code input.code-boxes:focus-visible {
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 76' preserveAspectRatio='none'%3E%3Cg fill='%23F2F9F9' stroke='%23227073' stroke-width='2.5' vector-effect='non-scaling-stroke'%3E%3Crect x='0.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='34.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='68.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='102.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='136.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='170.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
}
.field--invalid input.code-boxes,
.field--invalid input.code-boxes:focus-visible {
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 76' preserveAspectRatio='none'%3E%3Cg fill='%23FFFFFF' stroke='%237A4D06' stroke-width='2' vector-effect='non-scaling-stroke'%3E%3Crect x='0.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='34.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='68.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='102.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='136.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3Crect x='170.5' y='1' width='29' height='74' rx='4.5' ry='9' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
}

.connect { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 28px 94px; align-items: start; }
.connect__form { padding: 36px 40px; margin-top: 24px; }
.connect__form .field { max-width: none; }
.connect__form .stack { gap: 30px; }
.connect__aside { display: flex; flex-direction: column; gap: 22px; max-width: 560px; min-width: 0; }
.connect__help { padding: 0 8px; }
.connect__help-title { font-size: 16px; font-weight: 700; }
.connect__help p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }

/* The TV, showing the code screen `player/screen.py` draws (Q1). */
.tv-code { margin: 0; }
.tv-code__set {
    border: 12px solid #1E2426; border-radius: 16px; background: #1E2426;
    box-shadow: 0 24px 50px rgba(6, 30, 36, 0.22);
}
.tv-code__screen {
    aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden;
    background: radial-gradient(ellipse at 50% 30%, #1E5563 0%, #154552 45%, #12363F 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 16px; text-align: center; color: #FFFFFF;
}
.tv-code__mark { width: 44px; height: 44px; }
.tv-code__line { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: #D7E6E9; }
.tv-code__code { margin: 8px 0 0; font-size: 52px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.1; }
.tv-code__caption { margin-top: 16px; text-align: center; font-size: 14.5px; font-weight: 500; color: var(--ink-muted); }

@media (max-width: 1279px) {
    .screen-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .connect { gap: 28px 48px; }
}
@media (max-width: 1099px) {
    .screen-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .screen-split, .add-screen, .connect { grid-template-columns: minmax(0, 1fr); }
    .connect__form { margin-top: 0; }
    .card.contact-venocast { grid-template-columns: auto minmax(0, 1fr); }
    .card.contact-venocast .contact-venocast__links { align-items: flex-start; grid-column: 2; }
    .contact-venocast__go { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
    .screen-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .screen-card { padding: 18px; }
    .screen-card--attention { padding: 17px; }
    .tv { max-width: 320px; }
    .removed-link { margin-top: 24px; }
    .card.contact-venocast { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 14px; }
    .contact-venocast__icon { width: 48px; height: 48px; }
    .card.contact-venocast .contact-venocast__links,
    .contact-venocast__go { grid-column: 1; }
    .state-card { padding: 20px; gap: 14px; flex-direction: column; }
    .state-card__title { font-size: 22px; }
    .fix-row { flex-direction: column; align-items: flex-start; }
    .add-screen__form, .connect__form { padding: 22px 18px; }
    .field--code input.code-boxes { font-size: 1.5rem; height: 62px; }
    .tv-code__code { font-size: 34px; }
    .tv-code__line { font-size: 12.5px; }
    .tv-code__mark { width: 32px; height: 32px; }
    .tv-code__set { border-width: 8px; }
    .history .kv__row { flex-direction: row; gap: 16px; }
    .history .kv__row dd { text-align: right; }
}

/* ── R5a: the sponsor delivery report (reference screens 19 and 29) ─────────── */

.report-page { max-width: 1128px; margin: 0 auto; }
.report-head .page-header__text > p.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.13em; color: var(--primary); margin: 0 0 6px; line-height: 1.4; }
.report-head .backlink { margin-bottom: 8px; }

.report-agreements { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: -8px 0 18px; font-size: 14.5px; font-weight: 600; }
.report-agreements__label { color: var(--ink-muted); }
.report-agreements__item--on { color: var(--ink-heading); font-weight: 700; }

.report-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 26px; }
.tabs { display: inline-flex; flex-wrap: wrap; background: #E9EFF0; border-radius: 10px; padding: 4px; gap: 4px; }
.tabs__tab {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px;
    border-radius: 8px; font-size: 15px; font-weight: 700; color: #3D4A4E; text-decoration: none;
}
.tabs__tab:hover { color: var(--brand-deep); }
.tabs__tab[aria-current="page"] { background: var(--surface); color: var(--brand-deep); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.report-bar__bought { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.freq-tag { background: #E3F1F1; color: #1F5F62; font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); }
.freq-tag b { font-weight: 800; }
.report-bar__ends { font-size: 15px; font-weight: 500; color: var(--ink-muted); }

.range-form { margin: 0 0 22px; padding: 22px 26px; }
.range-form__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.range-form .field { max-width: 15rem; flex: 1 1 12rem; }
.range-form .error, .range-form .hint { margin: 12px 0 0; }
.range-form .error { color: var(--warn); font-weight: 600; font-size: var(--t-sm); }

.report-card { padding: 30px 32px; }
.report-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.report-tile { background: #F1F5F6; border-radius: 14px; padding: 20px 20px 18px; min-width: 0; }
.report-tile__label, .report-sub {
    font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5E6B70;
}
.report-tile__label { margin: 0; }
.report-tile__figure { margin: 6px 0 0; font-size: 38px; font-weight: 800; line-height: 1.1; color: var(--brand-deep); overflow-wrap: anywhere; }
.report-sub { margin: 30px 0 12px; }

.month-chart { display: block; width: 100%; height: auto; }
.month-chart__grid { stroke: #E5EBEC; stroke-width: 1; }
.month-chart__tick { font-size: 13px; font-weight: 600; fill: #56636A; }
.month-chart__bar { fill: #4A9BA0; }
.month-chart__bar--current { fill: #227073; }
.month-chart__value { font-size: 17px; font-weight: 700; fill: #12363F; }
.month-chart__label { font-size: 14px; font-weight: 600; fill: #2D2D2D; }
.month-chart__note { margin: 6px 0 0; font-size: 14px; color: var(--ink-muted); }
.month-bars { display: none; list-style: none; margin: 0; padding: 0; }
.month-bars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.month-bars__name { font-size: 15px; font-weight: 700; color: var(--ink-heading); }
.month-bars__figure { font-size: 15px; font-weight: 700; color: var(--ink-heading); }
.month-bars__track { grid-column: 1 / -1; display: block; width: 100%; height: 12px; }
.month-bars__ground { fill: #EEF2F3; }
.month-bars__fill { fill: #4A9BA0; }
.month-bars__fill--current { fill: #227073; }

.report-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.report-table th[scope="row"] { font-weight: 700; color: var(--ink-heading); }
.report-table__note {
    display: inline-block; margin: 4px 0 0 6px; padding: 1px 8px; border-radius: 6px;
    background: #EEF2F3; font-size: 13px; font-weight: 700; color: #4F5C62; white-space: nowrap;
}

.report-note {
    display: flex; gap: 12px; align-items: flex-start; margin: 28px 0 0; padding: 16px 20px;
    background: #F1F5F6; border-radius: 12px; font-size: 15.5px; font-weight: 500; line-height: 1.6; color: var(--ink);
}
.report-note__icon { flex: 0 0 auto; margin-top: 3px; color: #56636A; }

.report-foot-export { display: none; }
.report-empty { margin-top: 0; }

.card.report-bought { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 26px; padding: 26px 28px; }
.report-bought__title { font-size: 19px; }
.report-bought p { margin: 4px 0 0; font-size: 15.5px; font-weight: 500; color: var(--ink-muted); }
.report-bought .btn { flex: 0 0 auto; }

.report-check { margin-top: 22px; font-size: 15px; }
.report-check p { margin: 0; }
.report-check p + p { margin-top: 4px; }
.report-check__title { font-weight: 700; color: var(--ink-heading); }

@media (max-width: 1099px) {
    .report-tables { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .report-head__export { display: none; }
    .report-bar { flex-direction: column; align-items: flex-start; }
    .tabs { width: 100%; }
    .tabs__tab { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 14px; }
    .report-card { padding: 20px; }
    .report-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .report-tile { padding: 16px; }
    .report-tile__figure { font-size: 24px; white-space: nowrap; }
    .month-chart { display: none; }
    .month-bars { display: flex; flex-direction: column; gap: 14px; }
    /* The tables become the reference's rows: the name, then the two figures. */
    .report-table thead { display: none; }
    .report-table, .report-table tbody { display: block; }
    .table.report-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline;
        gap: 2px 6px; padding: 12px 16px; border-bottom: 1px solid #EEF2F3;
    }
    .table.report-table tbody tr:last-child { border-bottom: 0; }
    .table.report-table tbody th, .table.report-table tbody td { display: block; padding: 0; border: 0; }
    .table.report-table tbody td { font-weight: 700; color: var(--ink-heading); }
    .table.report-table tbody td + td::before { content: "· "; }
    .report-foot-export { display: flex; width: 100%; margin-top: 16px; }
    .card.report-bought { flex-direction: column; align-items: flex-start; padding: 20px; }
}
@media print {
    .report-page { max-width: none; }
    .month-bars { display: none !important; }
    .month-chart { display: block !important; }
    .report-tile { background: transparent; border: 1px solid #CCC; }
}

/* ── R5b: Reports and the sponsor database report (reference 18 and 20) ─────── */

.report-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.report-cards > .card + .card { margin-top: 0; }
.report-card-link { padding: 30px 32px; }
.report-card-link__head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; }
.report-card-link__icon {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.report-card-link__icon--teal { background: #E3F1F1; color: var(--primary); }
.report-card-link__icon--sand { background: #FCEFD6; color: #8A5A0A; }
.report-card-link__title { font-size: 24px; }
.report-card-link__lede { margin: 4px 0 0; font-size: 16px; font-weight: 500; color: var(--ink-muted); line-height: 1.45; }
.report-card-link__note { margin: 0 0 18px; }
.report-card-link__empty { border-top: 1px solid #EEF2F3; padding-top: 18px; }
.report-card-link__empty-title { margin: 0; font-weight: 700; color: var(--ink-heading); }
.report-card-link__empty .muted { margin: 4px 0 16px; }

.report-pick { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.report-pick__fields { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.report-pick .field { max-width: none; }
.report-pick__period { border: 0; margin: 0; padding: 0; min-width: 0; }
.report-pick__legend { font-weight: 700; font-size: 15px; color: var(--ink-heading); padding: 0; margin-bottom: 8px; }
.report-pick .seg { flex-wrap: wrap; }

.report-now { width: 100%; border-top: 1px solid #EEF2F3; margin-top: 24px; padding-top: 22px; }
.report-now .eyebrow { margin: 0 0 8px; }
.report-now__list { list-style: none; margin: 0; padding: 0; }
.report-now__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid #EEF2F3; }
.report-now__row:last-child { border-bottom: 0; }
.report-now__name { flex: 1 1 11rem; font-weight: 700; font-size: 16px; text-decoration: none; min-width: 0; overflow-wrap: break-word; }
.report-now__name:hover { text-decoration: underline; }
.report-now .freq-tag { flex: 0 0 auto; }

/* The program's colours: running teal, ending amber, starting blue, ended grey. */
.pbar { display: block; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; margin: 4px 0 12px; }
.pbar--wide { height: 18px; border-radius: 9px; margin: 24px 0 18px; }
.pbar__part--running { fill: #4A9BA0; }
.pbar__part--ending { fill: #D9A441; }
.pbar__part--starting { fill: #8FB0DA; }
.pkey { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; font-weight: 600; color: var(--ink-heading); }
.pkey li { display: inline-flex; align-items: center; gap: 8px; }
.pkey__sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.pkey__sw--running { background: #4A9BA0; }
.pkey__sw--ending { background: #D9A441; }
.pkey__sw--starting { background: #8FB0DA; }
.pkey__sw--ended { background: #A5AFB3; }

.program-card { padding: 28px 30px; }
.program-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.program-tile { border-radius: 14px; padding: 22px 22px 20px; min-width: 0; }
.program-tile--running { background: #E3F1F1; }
.program-tile--ending { background: #FCF1DE; }
.program-tile--starting { background: #EAF1FA; }
.program-tile--ended { background: #EEF0F1; }
.program-tile__label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; }
.program-tile--running .program-tile__label { color: #1F5F62; }
.program-tile--ending .program-tile__label { color: #7A4D06; }
.program-tile--starting .program-tile__label { color: #244F7C; }
.program-tile--ended .program-tile__label { color: #4F5C62; }
.program-tile__figure { margin: 10px 0 0; font-size: 36px; font-weight: 800; line-height: 1.1; color: var(--brand-deep); overflow-wrap: anywhere; }
.program-tile__sub { margin: 6px 0 0; font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.program-notes { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.program-notes p { margin: 0; }
.program-card:not(:has(.pbar)) .program-notes { margin-top: 20px; }

.program-head { display: flex; align-items: baseline; gap: 14px; margin: 36px 0 14px; }
.program-head .eyebrow { margin: 0; }
.program-table th[scope="row"] { font-weight: 700; }
.program-table__soon { color: #7A4D06; font-weight: 700; }

@media (max-width: 1099px) {
    .report-cards { grid-template-columns: minmax(0, 1fr); }
    .program-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .report-card-link, .program-card { padding: 20px; }
    .report-card-link__head { gap: 14px; }
    .report-card-link__icon { width: 44px; height: 44px; }
    .report-card-link__title { font-size: 21px; }
    .program-tiles { gap: 12px; }
    .program-tile { padding: 16px; }
    .program-tile__figure { font-size: 26px; }
    .program-tile__label { font-size: 14px; }
    .program-notes { flex-direction: column; }
}
@media print {
    .program-tile { border: 1px solid #CCC; }
}

/* ── A sponsor's page, as Jason described it (1 October 2026) ──────────────
 * The header's total; three boxes (dates and value, advert content, Live
 * Display) beside the contact and the packages. One column below 1100px. */
.sp-total { margin-top: var(--s4); }
.sponsor-head .sp-total__label { margin: 0; }
.sponsor-head .sp-total__figure { margin: 2px 0 0; font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.sponsor-head .sp-total__parts { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-muted); }
.sp-confirm, .sp-edit { margin-bottom: var(--s5); }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) { .sp-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; } }
.sp-main, .sp-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 26px; }
.box__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.box__title { font-size: 19px; font-weight: 700; color: var(--ink-heading); margin: 0; }
.box__eyebrow { margin: 0 0 6px; }
.box__lede { margin: 8px 0 0; }
.box__dates { font-size: 22px; font-weight: 800; color: var(--ink-heading); margin: 0; }
.box__dates--none { font-size: 18px; color: var(--ink-muted); }
.box__figure { text-align: right; flex: none; }
.box__figure .hint { margin: 0; }
.box__money { margin: 0; font-size: 28px; font-weight: 800; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.box__notes { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.box__notes .eyebrow { margin: 0; }
.box__notes .notes { margin: 6px 0 0; font-size: 15.5px; line-height: 1.6; color: #3D4A4E; white-space: pre-wrap; }
.box__actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.box > .error { margin-top: 12px; }

/* Advert content: one tile per photo or video, and the tile that adds one. */
.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.tile { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.tile__art { aspect-ratio: 16 / 9; background: #EEF2F3; display: flex; align-items: center; justify-content: center; }
.tile__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile__word { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.tile--paused .tile__art { opacity: 0.55; }
.tile__x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(18, 54, 64, 0.82); color: #fff; font-size: 18px; line-height: 30px; text-align: center; text-decoration: none; }
.tile__x:hover, .tile__x:focus-visible { background: var(--tone-stopped); color: #fff; }
.tile__meta { margin: 0; padding: 8px 12px; font-size: 13.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.tile__name { font-weight: 700; color: var(--ink-heading); }
.tile--add { border: 2px dashed #B7C6CA; background: #FAFCFC; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tile--add .drop { min-height: 120px; padding: 14px 10px; border: 0; background: transparent; }
.tile--add .drop .hint { display: none; }
/* 7 October: the one line a club needs before choosing, even on the small tile. */
.tile--add .drop .hint.drop__best { display: block; font-size: 12.5px; margin-top: 4px; }
.tile--add .field > label { font-size: 15px; }
.tile--add > .btn { align-self: flex-start; }
.sp-ask { margin-top: 16px; border-left: 4px solid var(--tone-stopped); background: #FFF7F5; border-radius: 10px; padding: 16px 18px; }
.sp-ask p { margin: 0 0 12px; }

/* Live Display. */
.live-state { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-weight: 700; font-size: 16px; color: var(--ink-heading); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone-fine); box-shadow: 0 0 0 4px var(--tone-fine-soft); flex: none; }
.live-dot--off { background: #A9B4B8; box-shadow: 0 0 0 4px #EEF1F2; }
.live-sub { margin: 6px 0 0 20px; color: var(--ink-muted); font-size: 15px; }
.live-pkg { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
/* On a phone the line can be wider than the box (*Clubhouse naming · 3× advertising
 * frequency* was 47 px past a 390 screen; Jason, 7 October 2026): it wraps there,
 * inside the box, instead of pushing the page sideways. */
@media (max-width: 760px) {
    .live-pkg .freq { display: inline-block; max-width: 100%; white-space: normal;
        line-height: 1.45; border-radius: 14px; }
    .live-pkg .freq .pkgdot { margin-right: 6px; vertical-align: -1px; }
}
.warnline { margin: 14px 0 0; border-left: 4px solid var(--tone-attention); background: var(--tone-attention-soft); border-radius: 8px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-strong); }
.live-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.form-narrow { max-width: 360px; }

/* Red, for the two buttons that take something away (Jason, 1 October). */
.btn--danger { color: var(--tone-stopped); border: 1.5px solid #D9A39C; background: var(--surface); }
.btn--danger:hover { background: var(--tone-stopped-soft); border-color: var(--tone-stopped); color: var(--tone-stopped); }

/* The packages box on a sponsor's page: their package, highlighted. */
.pkg-box__row--theirs { background: #EEF6F6; box-shadow: inset 3px 0 0 var(--brand-deep); border-radius: 8px; padding-inline: 10px; margin-inline: -10px; flex-wrap: wrap; }
.pkg-box__row--theirs .tag { order: 9; }

/* The Sponsors list's Live Display column. */
.table__live .live-yes { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--tone-fine); }
.table__live .live-yes::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.table__live .live-no { color: var(--ink-muted); }
@media (min-width: 1280px) and (max-width: 1439px) {
  .table--sponsors th, .table--sponsors td { padding-inline: 12px; }
}
@media (max-width: 760px) {
  .table--sponsors .table__live { grid-column: 1 / -1; grid-row: 3; font-size: 14px; }
  .table--sponsors .table__live .live-no { display: none; }
  .table--sponsors .table__live .live-yes::after { content: " on Live Display"; font-weight: 600; }
}

/* Sponsor pages: the packages box. A package name wraps between words, never
 * inside one. Where the row is too narrow for a name beside the sponsor count
 * (a phone, and the sponsor page's side column), the count drops to its own
 * line rather than breaking the name. */
@media (min-width: 1280px) and (max-width: 1439px) { .split--sponsors .pkg-box__row { gap: 8px; } }
.sp-aside .pkg-box__row { flex-wrap: wrap; row-gap: 2px; }
.sp-aside .pkg-box__name { flex: 1 1 0; }
.sp-aside .pkg-box__count { order: 8; flex-basis: 100%; min-width: 0; text-align: left; padding-left: 24px; }
@media (max-width: 760px) {
  .split--sponsors .pkg-box__row { flex-wrap: wrap; row-gap: 2px; }
  .split--sponsors .pkg-box__name { flex: 1 1 0; }
  .split--sponsors .pkg-box__count { order: 8; flex-basis: 100%; min-width: 0; text-align: left; padding-left: 24px; }
}
.pkg-box__row--theirs .tag { order: 9; margin-left: 24px; }
.box > .box__title + form { margin-top: 18px; }
.tile__name { color: inherit; font-weight: 700; text-decoration: none; }
.tile__name:hover { text-decoration: underline; }
.content-note { margin: 14px 0 0; }

/* Step B (0022): a screen tick per screen, for a sponsor's Live Display and a
 * club item. Native checkboxes; the label is the whole tick. */
.ticks { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 6px; }
.tick { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-weight: 600; color: var(--ink-heading); cursor: pointer; }
.tick input { width: 18px; height: 18px; accent-color: var(--brand-deep); margin: 0; }
.tick:has(input:checked) { border-color: var(--brand-deep); background: #F3F8F8; }
.tick:has(input:focus-visible) { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
.screens-pick legend { font-weight: 600; }
.sched-screens { color: var(--ink-muted); }

/* ── R6: Home (reference screens 01 and 26) ──────────────────────────────
 * Two independent columns at desktop — the main column's three cards and the
 * aside's three, each stacking at its own height, as the reference does. On a
 * phone the columns dissolve (`display: contents`) and the cards take one
 * order: the attention rows as cards, Screens, Running now, Coming up, Value,
 * and the Live Display placeholder last. */
.home-header { margin-bottom: 28px; }
.home-header .eyebrow { margin: 0 0 10px; }
.home-header__title { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; }
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1100px) { .home { grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; } }
.home__col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.home-card { min-width: 0; }
.home-card .box__head { align-items: baseline; }
.home-card__link { font-size: 15px; font-weight: 700; flex: none; }
.home-card__empty { margin: 14px 0 0; font-size: 15.5px; font-weight: 500; color: var(--ink-muted); line-height: 1.55; }
.home-card__empty + .btn { margin-top: 16px; }
.home-count {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: 3px;
    min-width: 26px; height: 24px; padding: 0 7px; margin-left: 6px; border-radius: 7px;
    background: var(--sunken); color: var(--ink-muted); font-size: 13px; font-weight: 700;
}

/* Needs attention: icon, sentence and detail, one button. */
.home-attn:not(.home-attn--empty) { padding-bottom: 6px; }
.attn { list-style: none; margin: 10px -26px 0; padding: 0; }
.attn__row { display: flex; align-items: center; gap: 20px; padding: 22px 26px; border-top: 1px solid var(--border); }
.attn__row:first-child { border-top: 0; }
.attn__icon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--accent-soft); color: var(--brand-primary);
}
.attn__icon--warn { background: var(--warn-soft); color: var(--warn); }
.attn__text { flex: 1 1 auto; min-width: 0; }
.attn__pill { display: none; margin: 0 0 12px; }
.attn__title { font-size: 17px; font-weight: 700; color: var(--ink-heading); margin: 0; overflow-wrap: anywhere; }
.attn__detail { margin: 4px 0 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: #56636A; overflow-wrap: anywhere; }
.attn__go { flex: none; }

/* Running now: a tile and two lines per row. The tiles are decoration — the
 * label's colour (the Scheduler's week colours) or the sponsors' package dots. */
.hlist { list-style: none; margin: 14px 0 0; padding: 0; }
.hlist__row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #EEF2F3; }
.hlist__row:first-child { border-top: 0; padding-top: 4px; }
.hlist__text { display: flex; flex-direction: column; min-width: 0; }
.hlist__name { font-size: 16px; font-weight: 700; color: var(--ink-heading); overflow-wrap: anywhere; }
.hlist__meta { font-size: 14.5px; font-weight: 500; color: #56636A; margin-top: 2px; overflow-wrap: anywhere; }
.hlist__more { padding: 4px 0 12px 100px; font-size: 14.5px; font-weight: 600; }
.htile {
    flex: none; width: 84px; height: 48px; border-radius: 9px;
    display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 10px;
    background: var(--brand-primary);
}
.htile__bar { display: block; height: 7px; border-radius: 2px; background: rgb(255 255 255 / 0.85); }
.htile__bar:first-child { width: 60%; }
.htile--dots { flex-direction: row; align-items: center; justify-content: center; gap: 5px; background: var(--accent-soft); }
.htile--dots > .htile__dot { width: 11px; height: 11px; border-radius: 50%; }

/* Sponsors coming up: date, sentence, pill. */
.coming { list-style: none; margin: 12px 0 0; padding: 0; }
.coming__row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #EEF2F3; }
.coming__row:first-child { border-top: 0; }
.coming__date { flex: 0 0 64px; font-weight: 700; color: var(--ink-heading); }
.coming__what { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 500; color: #3D4A4E; overflow-wrap: anywhere; }
.coming__what a { color: var(--ink-heading); font-weight: 600; text-decoration: none; }
.coming__what a:hover { text-decoration: underline; }
.coming__pill { flex: none; }

/* Screens: the count, then each screen with the Screens page's own pill. */
.home-screens__count { margin: 14px 0 6px; font-size: 16px; font-weight: 600; color: #3D4A4E; }
.home-screens__count b { font-size: 26px; font-weight: 800; color: var(--brand-deep); }
.home-screens__list { list-style: none; margin: 0; padding: 0; }
.home-screens__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.home-screens__name { font-weight: 600; color: var(--ink-heading); min-width: 0; overflow-wrap: anywhere; }

/* Live Display (08.4a): a small copy of the Preview, when it last changed,
 * and the way in. The frame is never interactive: the link around it takes
 * the click. Also used beside Branding. */
.home-live { display: flex; flex-direction: column; gap: 12px; }
.home-live__preview { display: block; border-radius: 8px; overflow: hidden; background: #0B1F24;
    box-shadow: 0 0 0 1px rgba(11,31,36,.12); }
.home-live__preview iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; pointer-events: none; }
/* The small Preview in every Live Display tab's side space (7 October,
 * `live_display/_now.html`). */
.ld-now { display: flex; flex-direction: column; gap: 12px; }
.ld-now .box__title { margin-bottom: 0; }
.ld-now__full { align-self: flex-start; }
/* 08.5: the small preview in the shapes of the club's screens
 * (`live_display/_shapes.html`). Some of each sits side by side at the same
 * height: 16:9 and 9:16 at one height are widths in the ratio 256:81, and with
 * a zero basis the gap comes off before the share, so the heights match
 * exactly. Portrait alone is half the width, centred. */
.live-shapes { display: flex; gap: 10px; align-items: flex-start; justify-content: center; }
.live-shapes__item { margin: 0; min-width: 0; }
.live-shapes--both .live-shapes__item--landscape { flex: 256 1 0; }
.live-shapes--both .live-shapes__item--portrait { flex: 81 1 0; }
.live-shapes:not(.live-shapes--both) .live-shapes__item--portrait { flex: 0 0 50%; }
.live-shapes__item--portrait iframe { aspect-ratio: 9 / 16; }
.live-shapes__label { margin-top: 6px; font-size: 13px; font-weight: 600; color: #56636A; }
.ld-now__fulls { display: flex; flex-wrap: wrap; gap: 8px; }

.home-live__text { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: #56636A; }
.home-live__go { align-self: flex-start; }

/* Sponsorship value: the Sponsors box's figures, shorter. */
.home-value .vbar { margin-top: 16px; }
.home-value__figure { margin: 16px 0 0; font-size: 40px; font-weight: 800; line-height: 1; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.home-value__figure--none { font-size: 20px; }
.home-value__legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; font-weight: 700; color: var(--ink-heading); }
.home-value__legend li { display: flex; align-items: center; gap: 8px; }
.home-value .hint { margin: 14px 0 0; }

@media (max-width: 760px) {
    .home-header__title { font-size: 28px; }
    .home-header__wide { display: none; }
    .home { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
    .home__col { display: contents; }
    .home-attn { order: 1; }
    .home-screens { order: 2; }
    .home-running { order: 3; }
    .home-coming { order: 4; }
    .home-value { order: 5; }
    .home-live { order: 6; }
    .box.home-card { padding: 22px 20px; }
    /* The attention rows become cards of their own, as 26 draws them. */
    .home-attn:not(.home-attn--empty) { background: none; border: 0; padding: 0; }
    .home-attn:not(.home-attn--empty) > .box__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .attn { margin: 0; display: flex; flex-direction: column; gap: 20px; }
    .attn__row {
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
        padding: 22px 20px;
    }
    .attn__row:first-child { border-top: 1px solid var(--border); }
    .attn__icon { display: none; }
    .attn__pill { display: block; }
    .attn__go { margin-top: 18px; width: 100%; justify-content: center; }
    .hlist__more { padding-left: 0; }
    .home-card .box__head { flex-wrap: wrap; gap: 4px 16px; }
    .htile { width: 64px; height: 40px; padding: 0 8px; gap: 5px; }
    .htile__bar { height: 6px; }
    .coming__row { flex-wrap: wrap; gap: 6px 14px; }
    .coming__date { flex-basis: auto; }
    .coming__what { flex-basis: 100%; order: 3; }
    .coming__pill { margin-left: auto; }
}

/* Tidy-up 1: between the phone layout and 900px the Sponsors table (six
 * columns since 1 October) and the Packages table were wider than the page,
 * and the whole page scrolled sideways (72px and 21px at 761). Tighter cells
 * there; nothing else moves. */
@media (min-width: 761px) and (max-width: 899px) {
    .table--sponsors th, .table--sponsors td { padding-inline: 9px; }
    .table--packages th, .table--packages td { padding-inline: 14px; }
}

/* ── 08.1: Live Display, the Content tab (reference 02, 03) ──────────────── */
.ld-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) { .ld-top { grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; } }
.ld-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* A plan of the layout: boxes and labels, not a picture of the display. */
.ld-plan { margin: 0; }
.ld-plan__frame {
    border: 10px solid var(--brand-deep); border-radius: 18px; background: #E9EFF0;
    padding: 14px; display: flex; flex-direction: column; gap: 10px; aspect-ratio: 16 / 9;
}
.ld-plan__cell {
    display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
    border-radius: 8px; background: #FFFFFF; border: 1px solid #D6DEE0;
    font-size: 14px; font-weight: 600; color: #56636A; padding: 6px; min-width: 0;
}
.ld-plan__head { display: grid; grid-template-columns: 1fr 3fr 1fr; gap: 10px; flex: 0 0 14%; }
.ld-plan__mid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1 1 46%; }
/* The parts a club can't change here are drawn flat, as areas of the plan
 * rather than cards, so only the four boxes look like something to press
 * (Jason, 7 October). */
.ld-plan__head .ld-plan__cell, .ld-plan__mid .ld-plan__cell {
    background: #D9E2E4; border-color: transparent; color: #5B686E; font-weight: 500;
    cursor: default; user-select: none;
}
.ld-plan__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: 1 1 30%; }
.ld-plan__row { list-style: none; margin: 0; padding: 0; }
.ld-plan__slot { display: flex; min-width: 0; }
.ld-plan__slot > .ld-plan__cell { flex: 1 1 auto; }
.ld-plan__cell--box { flex-direction: column; color: var(--ink-heading); font-weight: 700; }
.ld-plan__cell--link { font: inherit; font-weight: 700; color: var(--ink-heading); cursor: pointer; border-style: dashed; border-color: #9FBFC2; }
.ld-plan__cell--link:hover { background: #F4FAFA; border-color: var(--primary); color: var(--ink-heading); }
.ld-plan__cell--link:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 2px; }
/* Dragging a box onto another (7 October): the dragged one follows the
 * pointer, above the rest, and the one it would swap with is outlined. */
.ld-plan__slot { position: relative; }
.ld-plan__slot.is-dragging { z-index: 2; opacity: .85; pointer-events: none; }
.ld-plan__slot.is-dragging .ld-plan__cell { box-shadow: 0 8px 22px rgba(11,31,36,.25); }
.ld-plan__slot.is-drop .ld-plan__cell { border-color: var(--primary); border-style: solid; background: #EAF5F5; }
.ld-plan__row.is-dragging-row { cursor: grabbing; user-select: none; }
/* A box (16 October): the box itself opens its section's editor, and *Change*
 * sits on it as its own button. The box's button covers the whole box, under
 * *Change*, so anywhere but *Change* edits. */
.ld-plan__cell--box { position: relative; }
.ld-plan__open {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
    text-decoration: none; min-width: 0;
}
.ld-plan__open::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.ld-plan__open:focus-visible { outline: none; }
.ld-plan__open:focus-visible::after { outline: 3px solid #9FD3D5; outline-offset: 2px; }
.ld-plan__cell--box:hover { background: #F4FAFA; border-color: var(--primary); }
.ld-plan__change {
    position: relative; z-index: 1; margin: 0; padding: 2px 6px; border: 0; border-radius: 6px; background: none;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--primary); text-decoration: underline; cursor: pointer;
}
.ld-plan__change:hover { background: #E3F1F1; }
.ld-plan__change:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 1px; }
.ld-plan__row b, .ld-num-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 26px; height: 26px; border-radius: 7px; background: var(--brand-deep); color: #FFFFFF;
    font-size: 13px; font-weight: 800;
}
.ld-num-badge--off { background: var(--sunken); color: var(--ink-muted); }
.ld-plan figcaption { margin-top: 10px; }

/* A box's menu: the browser's own popover (no script), centred over the page. */
.ld-pop {
    width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
    margin: auto; padding: 22px 24px 24px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(13, 43, 51, .28);
}
.ld-pop::backdrop { background: rgba(13, 43, 51, .35); }
.ld-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ld-pop__title { font-size: 20px; font-weight: 800; margin: 0; }
.ld-pop .hint { margin: 6px 0 14px; }
.ld-pop__list { display: flex; flex-direction: column; gap: 6px; }
.ld-pop__option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    min-height: 48px; margin: 0; padding: 8px 14px; border: 1px solid #DCE4E6; border-radius: 10px;
    background: var(--surface); font: inherit; text-align: left; cursor: pointer;
}
button.ld-pop__option:hover { border-color: var(--primary); background: #F4FAFA; }
button.ld-pop__option:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 1px; }
.ld-pop__option--here { cursor: default; border: 2px solid var(--brand-deep); background: var(--accent-soft); }
.ld-pop__name { font-weight: 600; font-size: 15px; color: var(--ink-heading); }
.ld-pop__note { font-size: 13.5px; font-weight: 500; color: var(--ink-muted); text-align: right; }
/* A section's editor in its pop-up (16 October): wider than a menu, for the
 * forms; on a phone it fills the screen and scrolls inside. */
.ld-pop--editor { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.ld-pop--editor { padding-top: 0; }
/* Its title and Close stay in view while a long form scrolls under them. */
.ld-pop--editor .ld-pop__head {
    position: sticky; top: 0; z-index: 2; background: var(--surface);
    align-items: flex-start; padding: 22px 0 10px; border-bottom: 1px solid #EEF2F3;
}
.ld-pop--editor .ld-pop__where { margin: 2px 0 0; }
.ld-pop--editor .ld-read { margin-top: 16px; }
/* The form's own close: a link where the editor is drawn in its row, a button
 * that closes the pop-up where it is in one. */
.ld-pop .ld-in-row, .ld-editor--in-row .ld-in-pop { display: none; }
.ld-label { font-weight: 700; font-size: 15px; color: var(--ink-heading); }
.ld-seg { display: inline-flex; flex-wrap: wrap; gap: 14px; min-height: 44px; align-items: center; }
.ld-seg label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-heading); }
.ld-always { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; font-weight: 500; color: #3D4A4E; }
.ld-always li { display: flex; gap: 12px; align-items: baseline; }
.ld-tag { flex: none; min-width: 3.2rem; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); background: var(--sunken); border-radius: 6px; padding: 2px 8px; }

.ld-section { margin-top: 36px; }
.ld-section__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 14px; }
.ld-section__title { font-size: 22px; font-weight: 800; }
.ld-section__head .hint { margin: 0; }
.ld-section__eyebrow { margin-bottom: 14px; }
.ld-cards { display: flex; flex-direction: column; gap: 14px; }

.ld-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.ld-card--open { border-color: #B9D9DB; box-shadow: 0 0 0 3px #EEF7F7; }
/* A row is a button that opens its section's pop-up (16 October), or, for the
 * section drawn open, a link that closes it. Either way it looks like the row. */
.ld-card__summary {
    display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none;
    width: 100%; margin: 0; border: 0; border-radius: var(--r); background: none;
    font: inherit; color: inherit; text-align: left; text-decoration: none;
}
button.ld-card__summary:hover { background: #F7FBFB; }
.ld-card__summary:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 2px; border-radius: var(--r); }
.ld-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-card__title { font-size: 17px; font-weight: 700; color: var(--ink-heading); }
.ld-card__meta { font-size: 14.5px; font-weight: 500; color: #56636A; overflow-wrap: anywhere; }
.ld-card__chev { flex: none; width: 10px; height: 10px; border-right: 2px solid #56636A; border-bottom: 2px solid #56636A; transform: rotate(-45deg); margin-right: 6px; }
.ld-card--open .ld-card__chev { transform: rotate(-135deg); margin-right: 4px; }
.ld-card__body { padding: 4px 22px 22px 64px; border-top: 1px solid #EEF2F3; }

.ld-form { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
.ld-form__row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start; }
.ld-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.ld-form legend { font-weight: 700; font-size: 15px; color: var(--ink-heading); margin-bottom: 8px; width: 100%; padding: 0; }
.ld-form fieldset label, .ld-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-heading); }
.ld-form .hint { margin: 0; }
.ld-num { width: 5.5rem; }
.ld-form input[type="text"], .ld-form input[type="number"], .ld-form input[type="date"], .ld-form input[type="time"] {
    min-height: 44px; padding: 0 12px; font: inherit; border: 1px solid #CBD5D8; border-radius: var(--r-ctl);
    background: var(--surface); color: var(--ink); min-width: 0;
}
.ld-form input[type="color"] { width: 52px; height: 44px; padding: 3px; border: 1px solid #CBD5D8; border-radius: var(--r-ctl); background: var(--surface); }
.ld-form input:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 0; border-color: var(--primary); }
.ld-tees__chips { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.tee-chip { border: 1px solid #CBD5D8; border-radius: var(--r-pill); padding: 8px 14px; }
.tee-chip:has(input:checked) { border-color: var(--brand-deep); background: #F3F8F8; }
.tee-chip input { margin: 0; }
.tee-dot { flex: none; vertical-align: -2px; margin-right: 4px; }
/* A tee of the club's own: a chip like the rest, with *Remove* (5 October). */
.tee-chip--own { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 14px; }
.ld-form .tee-chip__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-heading); cursor: pointer; }
.tee-chip__remove {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; margin-left: 4px; border: 0; border-radius: 50%;
    background: transparent; color: #56636A; cursor: pointer;
}
.tee-chip__remove:hover { background: #E6EEEF; color: var(--warn); }
.tee-chip__remove:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 1px; }
.ld-default-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
/* Closed holes (7 October): one small square per hole, ticked when shut. */
.ld-closed-holes { border: 0; padding: 0; margin: 0; min-width: 0; }
.ld-closed-holes legend { font-weight: 700; color: var(--ink-heading); margin-bottom: 4px; }
.ld-closed-holes__grid { box-sizing: border-box; width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; max-width: 560px; margin-top: 8px; }
.ld-hole { position: relative; display: flex; }
.ld-hole input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ld-hole__n { flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid #CBD5D8; border-radius: 8px; background: var(--surface); font-weight: 700; color: var(--ink-strong); }
.ld-hole input:checked + .ld-hole__n { background: var(--tone-stopped-soft); border-color: var(--tone-stopped); color: var(--tone-stopped); text-decoration: line-through; }
.ld-hole input:focus-visible + .ld-hole__n { outline: 3px solid #9FD3D5; outline-offset: 2px; }
.ld-list { display: flex; flex-direction: column; gap: 10px; }
/* 7 October: *Add a row* under a list, and *Saved* beside the button after a save. */
.ld-add-row { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; align-self: flex-start; }
.ld-saved { margin-left: var(--s1, 4px); }
.ld-list__head { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 11rem 2.25rem; gap: 10px; font-size: 13px; font-weight: 700; color: var(--eyebrow); }
.ld-list__head--hio { grid-template-columns: minmax(0, 1fr) 5.5rem 11rem 2.25rem; }
.ld-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; }
.ld-list__row--3 { grid-template-columns: 9rem minmax(0, 1fr) 11rem 2.25rem; }
.ld-list__row--2 { grid-template-columns: minmax(0, 1fr) 9rem 2.25rem; }
.ld-list__row--2w { grid-template-columns: minmax(0, 1fr) 11rem 2.25rem; }
.ld-list__row--2d { grid-template-columns: 11rem minmax(0, 1fr) 2.25rem; }
.ld-list__row--hio { grid-template-columns: minmax(0, 1fr) 5.5rem 11rem 2.25rem; }
.ld-list__row .error { grid-column: 1 / -1; }
/* A row's Remove (7 October): a small square at the row's end. */
.ld-row-remove { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border: 1px solid #CBD5D8; border-radius: 8px; background: var(--surface); color: var(--ink-muted); cursor: pointer; padding: 0; }
.ld-row-remove:hover { color: var(--tone-stopped); border-color: var(--tone-stopped); background: var(--tone-stopped-soft); }
.ld-row-remove:focus-visible { outline: 3px solid #9FD3D5; outline-offset: 2px; }
.ld-form .error { color: var(--warn); font-weight: 600; font-size: 14px; }
.ld-tees .ld-list__row { grid-template-columns: minmax(0, 16rem) auto 7.5rem auto; justify-content: start; }
.ld-read { margin: 16px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: #3D4A4E; }
ul.ld-read { list-style: disc; }
.ld-read__heading { margin: 16px 0 0; font-weight: 700; }

@media (max-width: 760px) {
    .ld-plan__frame { border-width: 6px; padding: 8px; gap: 6px; }
    .ld-plan__cell { font-size: 11px; padding: 3px; }
    .ld-plan__row b { width: 20px; height: 20px; font-size: 11px; }
    .ld-plan__cell--box { gap: 3px; }
    .ld-plan__change { font-size: 10.5px; padding: 2px 4px; }
    .ld-card__summary { padding: 16px; gap: 12px; }
    .ld-card__body { padding: 4px 16px 18px; }
    .ld-list__head { display: none; }
    .ld-list__row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ld-list__row--3 input[type="text"] { grid-column: 1 / -1; grid-row: 1; }
    .ld-list__row--2w, .ld-list__row--2d, .ld-list__row--hio { grid-template-columns: minmax(0, 1fr); }
    /* On a phone the Remove sits at the row's top right, beside its first field. */
    .ld-list__row--3, .ld-list__row--2, .ld-list__row--2w, .ld-list__row--2d, .ld-list__row--hio { position: relative; padding-right: 2.75rem; }
    .ld-list .ld-row-remove { position: absolute; top: 0; right: 0; }
    .ld-list__row--2 { grid-template-columns: minmax(0, 1fr) 7rem; }
}
.ld-pop__note { flex: none; white-space: nowrap; }
@media (max-width: 760px) {
    .ld-pop { padding: 18px 16px 18px; }
    .ld-pop--editor { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
    .ld-pop--editor { padding-top: 0; }
    .ld-pop--editor .ld-pop__head { padding-top: 18px; }
    .ld-plan__open { gap: 3px; }
    .ld-pop__option { padding: 8px 12px; }
    .ld-pop__note { font-size: 12.5px; }
}

/* ── Live Display: tabs, pictures, Branding and Venue (08.2) ─────────────── */

/* The reference's underlined tabs (02, 06, 07): links, each its own page. */
/* The grey rule is an inset shadow, not a border the tabs overlap with a
   negative margin: that overlap made the row 1px taller than itself, and with
   `overflow-x: auto` a desktop browser drew a vertical scroll bar's arrows
   beside the tabs (Jason, 5 October). Nothing here overflows vertically now,
   and `overflow-y: hidden` says so. */
.page-tabs {
    display: flex; gap: 4px; margin: -8px 0 28px;
    box-shadow: inset 0 -1px 0 var(--border);
    overflow-x: auto; overflow-y: hidden;
}
.page-tabs__tab {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    font-weight: 700; font-size: 16px; color: #56636A; text-decoration: none;
    border-bottom: 3px solid transparent; white-space: nowrap;
}
.page-tabs__tab:hover { color: var(--brand-deep); }
.page-tabs__tab[aria-current="page"] { color: var(--ink-heading); border-bottom-color: var(--primary); }
.page-tabs__tab:focus-visible { outline: 3px solid #9FD3D5; outline-offset: -3px; border-radius: 6px; }

.ld-tab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) { .ld-tab { grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; } }
.ld-tab__side .eyebrow { margin-bottom: 10px; }
.ld-tab__note p { margin: 0; color: #3D4A4E; }
.ld-venue { max-width: 920px; }
.ld-venue__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.ld-venue__fixed { margin: 6px 0 2px; font-weight: 600; color: var(--ink-heading); min-height: 28px; }
.ld-venue__fixed.muted { color: var(--ink-muted); }
/* The course's opening hours on the Venue tab (15 October 2026, D3). The
 * times for the chosen way show; the others wait. Without :has() (old
 * browsers) both show, and the server reads only the chosen one. */
.ld-hours-hint { flex-basis: 100%; margin: -6px 0 0; }
.ld-tab__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ld-hours { max-width: 920px; }
.ld-hours__note { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; background: #FFF7E6;
    color: #6B4E16; font-weight: 500; }
.ld-hours__mode { margin: 6px 0 16px; border: 0; padding: 0; }
.ld-hours__mode legend { padding: 0; margin-bottom: 6px; }
.ld-hours__times, .ld-hours__day { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ld-hours__times label, .ld-hours__day label { display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--ink-heading); }
.ld-hours input[type="time"] { min-height: 44px; padding: 6px 10px; border: 1px solid #C9D3D6;
    border-radius: 8px; font: inherit; }
.ld-hours__days { display: flex; flex-direction: column; gap: 10px; }
.ld-hours__day { padding: 8px 0; border-top: 1px solid #E3E9EB; }
.ld-hours__name { width: 108px; font-weight: 700; color: var(--ink-heading); }
.ld-hours__closed { font-weight: 500 !important; }
.ld-hours__same, .ld-hours__days { margin-bottom: 18px; }
.ld-hours:has(input[name="hours"][value="none"]:checked) .ld-hours__same,
.ld-hours:has(input[name="hours"][value="none"]:checked) .ld-hours__days,
.ld-hours:has(input[name="hours"][value="same"]:checked) .ld-hours__days,
.ld-hours:has(input[name="hours"][value="days"]:checked) .ld-hours__same { display: none; }

/* 08.3: the weather location. The place and its weather now, Clear beside it;
 * then Find, then the matches as rows. */
.ld-weather__now { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 14px; }
.ld-weather__place { min-width: 0; }
.ld-weather__place .hint { margin: 2px 0 0; }
.ld-weather__line { margin: 2px 0 0; font-size: 17px; font-weight: 600; color: var(--ink-heading); }
.ld-weather__line--off { color: var(--ink-muted); }
.ld-weather__row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ld-weather__row input[type="text"] { flex: 1 1 10rem; max-width: 24rem; }
.ld-weather__pick { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.ld-weather__none { margin: 16px 0 0; color: var(--ink); }
.ld-weather__credit { margin: 18px 0 0; }
.ld-weather__credit a { color: var(--ink-muted); }

/* A picture: what is there now, beside its words, then the picker. */
.ld-pic { display: flex; flex-direction: column; gap: 12px; }
.ld-pic__row { display: flex; align-items: center; gap: 18px; }
.ld-pic__text { min-width: 0; }
.ld-pic__text .hint, .ld-pic__text .small { margin: 0; }
.ld-pic__now {
    flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-radius: 10px; background: #EEF2F3; border: 1px solid var(--border);
}
.ld-pic__now img { display: block; width: 100%; height: 100%; }
.ld-pic__now--photo { width: 160px; aspect-ratio: 4 / 3; }
.ld-pic__now--background { width: 160px; aspect-ratio: 16 / 9; }
.ld-pic__now--photo img, .ld-pic__now--background img { object-fit: cover; }
.ld-pic__now--logo { width: 96px; height: 96px; background: #FFFFFF; padding: 8px; }
.ld-pic__now--logo img { object-fit: contain; }
.ld-pic__now--read { width: 280px; margin-top: 16px; }
.ld-pic__empty { font-size: 13px; font-weight: 600; color: var(--ink-muted); text-align: center; padding: 6px; }
.ld-pic__upload .field label { font-weight: 700; color: var(--ink-heading); }

/* The preview takes the display's shape: the Photo box fills a 4:3 box,
   cropped evenly from the centre (D1, D2); the background fills the 16:9 screen;
   the logo is shown whole on white. */
.ld-pic__preview--photo .preview__frame { aspect-ratio: 4 / 3; max-width: 320px; }
.ld-pic__preview--background .preview__frame { aspect-ratio: 16 / 9; max-width: 400px; }
.ld-pic__preview--photo .preview__media, .ld-pic__preview--background .preview__media {
    width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover;
}
/* The logo's crop box (7 October). The picture at its own shape, the box over
 * it, everything outside the box dimmed. Positions are set by the script as
 * percentages of the picture, through the CSSOM (the policy allows that). */
.crop { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.crop__frame { align-self: flex-start; max-width: 100%; padding: 12px; overflow: hidden; border-radius: 8px; background: #0B1F24; }
.crop__stage { position: relative; display: inline-block; vertical-align: top; max-width: 100%;
    background: repeating-conic-gradient(#E6ECEE 0% 25%, #FFFFFF 0% 50%) 0 0 / 16px 16px; touch-action: none; user-select: none; }
.crop__image { display: block; pointer-events: none; }
.crop__box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: move;
    box-shadow: 0 0 0 9999px rgba(11,31,36,.55); outline: 2px solid #FFFFFF; outline-offset: -1px; }
.crop__box:focus-visible { outline: 3px solid #9FD3D5; }
.crop__handle { position: absolute; width: 18px; height: 18px; background: #FFFFFF; border: 2px solid var(--brand-deep); border-radius: 4px; }
.crop__handle--nw { left: -9px; top: -9px; cursor: nwse-resize; }
.crop__handle--ne { right: -9px; top: -9px; cursor: nesw-resize; }
.crop__handle--sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
.crop__handle--se { right: -9px; bottom: -9px; cursor: nwse-resize; }
.ld-pic__preview--logo .preview__frame { aspect-ratio: auto; height: 120px; max-width: 320px; background: #FFFFFF; border: 1px solid var(--border); padding: 10px; }
.ld-pic__remove { margin: 6px 0 0; }
.ld-pic__removes { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
.ld-pic__removes .ld-pic__remove { margin: 0; }

.ld-branding { gap: 26px; }
.ld-form .ld-colours { border: 0; padding: 0; margin: 0; display: grid; align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ld-colours legend { font-weight: 700; font-size: 15px; color: var(--ink-heading); margin-bottom: 8px; padding: 0; }
.ld-colours .hint { grid-column: 1 / -1; margin: 0; }
.ld-colour {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px;
    border: 1.5px solid var(--border-strong); border-radius: var(--r-ctl); padding: 10px 14px;
}
.ld-colour input[type="color"] { width: 44px; height: 44px; padding: 2px; border: 1px solid #CBD5D8; border-radius: 10px; background: var(--surface); cursor: pointer; }
.ld-colour__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ld-form .ld-colour__name { display: block; font-weight: 700; color: var(--ink-heading); cursor: pointer; }
.ld-form input.ld-colour__code, .ld-form input.ld-tee-code {
    width: 7.5rem; min-height: 36px; padding: 0 10px; font-size: 15px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
    border: 1.5px solid var(--border-strong); border-radius: 8px; background: var(--surface);
}
.ld-form input.ld-tee-code { min-height: 44px; }
.ld-colour .error { grid-column: 1 / -1; }
.ld-colour.field--invalid { border-color: var(--warn); }
.ld-swatch { vertical-align: middle; }

.ld-facts { margin: 16px 0 0; display: flex; flex-direction: column; gap: 14px; }
.ld-facts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 12px; align-items: center; }
.ld-facts dt { font-weight: 700; color: var(--ink-heading); }
.ld-facts dd { margin: 0; overflow-wrap: anywhere; }
.ld-facts__colours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ld-facts__colour { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

@media (max-width: 760px) {
    .page-tabs { margin-top: -4px; }
    .page-tabs__tab { padding: 0 12px; font-size: 15px; }
    .ld-form .ld-colours, .ld-venue__pair { grid-template-columns: minmax(0, 1fr); }
    .ld-pic__row { align-items: flex-start; }
    .ld-pic__now--photo, .ld-pic__now--background { width: 120px; }
    .ld-pic__now--read { width: 100%; }
    .ld-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 760px) {
    .ld-tees .ld-list__row { grid-template-columns: auto 6.5rem auto; }
    .ld-tees .ld-list__row input[type="text"]:first-child { grid-column: 1 / -1; }
    .ld-form input.ld-tee-code { width: 100%; }
}

/* 08.4a: Live Display · Preview. The display in a TV's dark bezel, at the
 * width of the page and the shape of a TV. The display itself is its own
 * document (the frame), drawn by the TV's renderer. */
.ld-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }
.ld-preview__bezel { width: 100%; max-width: 1220px; padding: 16px; border-radius: 20px;
    background: linear-gradient(160deg, #2A2D2F, #0D0E0F); box-shadow: 0 30px 70px rgba(6,30,36,.25); }
.ld-preview__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; background: #0B1F24; }
/* 08.5: the Preview's portrait shape, and its switch. */
.ld-preview__bezel--portrait { max-width: 520px; }
.ld-preview__bezel--portrait .ld-preview__frame { aspect-ratio: 9 / 16; }
.ld-preview__shape { display: flex; gap: 6px; }
.ld-preview__note { max-width: 1220px; width: 100%; margin: 0; }
@media (max-width: 640px) {
    .ld-preview__bezel { padding: 8px; border-radius: 12px; }
}

/* 09.2: Settings · People. One row a person: who, then what they can do, with a
 * Manager's controls on the right; stacked on a phone. */
.people__list { list-style: none; margin: 0; padding: 0; }
.people__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
    padding: 14px 0; border-bottom: 1px solid var(--border); }
.people__row:last-child { border-bottom: 0; }
.people__who { flex: 1 1 16rem; min-width: 0; }
.people__name { margin: 0; font-weight: 700; color: var(--ink-heading); overflow-wrap: anywhere; }
.people__email, .people__seen { margin: 2px 0 0; font-size: var(--t-sm); color: var(--ink-muted); overflow-wrap: anywhere; }
.people__you { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700; color: var(--primary); background: var(--accent-soft); vertical-align: 2px; }
.people__expired { color: var(--warn); font-weight: 700; }
.people__access { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.people__role { font-weight: 700; color: var(--ink-heading); }
/* Changing what someone can do opens above the list, as removing does; it is
 * not destructive, so its rule is the primary colour, not the remove red. */
.confirm.people__change { border-left-color: var(--primary); }
.people__change .choices { margin-top: var(--s3); }
.people__change .btn-group { margin-top: var(--s4); }
.people__access .people__role { margin-right: var(--s2); }
.people__error { flex-basis: 100%; margin: 0; }
.people__note { margin-top: var(--s4); }
.people__invite { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s3); }
.people + .people, .people + .box, .confirm + .people { margin-top: var(--s4); }
@media (max-width: 760px) {
    .people__access { flex-basis: 100%; }
}

/* 09.3: Settings · Your account. Four boxes, one after another; each form a
 * column of fields with its button under them. */
.account-page + .account-page { margin-top: var(--s4); }
.account-page__form { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s3); }
.account-page__form .hint { margin: 0; }
.account-page__email { margin: 0; overflow-wrap: anywhere; }
.account-page__limit, .account-page__switch { margin: var(--s3) 0 0; }
.account-page__out { margin-top: var(--s3); }

/* 09.4: Venocast support. The banner says support can come in, and until when;
 * the list is what it changed, newest first. */
.support-banner { margin: 0 0 var(--s4); padding: var(--s4); border-radius: var(--r);
    background: var(--accent-soft); border-left: 4px solid var(--primary); }
.support-banner__title { margin: 0; font-size: var(--t-lg); color: var(--ink-heading); }
.support-banner__why { margin: var(--s2) 0 0; overflow-wrap: anywhere; }
.support-banner__note { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--ink-muted); }
.support-banner .btn-group { margin-top: var(--s3); }
.support-changes__list { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.support-changes__list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.support-changes__list li:last-child { border-bottom: 0; }
.support-changes__when { display: inline-block; min-width: 9.5rem; font-size: var(--t-sm); color: var(--ink-muted); }
.support-ask { margin-top: var(--s4); }
.support-ask .btn { margin-top: var(--s3); }
.support-changes + .people, .support-banner + .people, .people + .support-ask,
.people__note + .support-ask, .people__note + .confirm, .box + .confirm#help { margin-top: var(--s4); }
.account-page .box__head + p { margin-top: var(--s1); }

/* Renew for another year (15 October 2026, D4): under the sponsor's dates. */
.sp-renew { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.sp-renew .hint { margin: 0; }
.sp-renewed { margin: 8px 0 0; font-weight: 500; color: #3d4a50; }
.sp-renewed__label { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px;
    background: #E3F1EF; color: #1F6B5E; font-size: 13px; font-weight: 700; }