/* Radius by Boom12. Built to docs/radiusdesign.md: phone first, WCAG 2.2 AA.
   Every size, radius, and colour comes from the tokens below; components are defined
   once, in this order: base, layout, components, then each area of the app. */

@font-face {
    font-family: "Outfit";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("/assets/fonts/outfit-500-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Quicksand";
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    src: url("/assets/fonts/quicksand-latin.woff2") format("woff2");
}

/* Tokens */
:root {
    /* Colour */
    --ink: #1D201F;
    --paper: #F7F7F2;
    --card: #FFFFFF;
    --pink: #F78FCA;
    --sky: #CDEFFD;       /* strokes, and text on ink; never a background behind text on paper */
    --lime: #CAF291;      /* strokes and the Done pill; never a page background */
    --muted: #5F5E5A;
    --hairline: #E4E4DC;  /* borders on cards that aren't controls */
    --rule: #EEEEE6;      /* row dividers */
    --late: #CC2936;      /* overdue only: the edge, the days-late pill, and the overdue count (Scott, 15 October) */
    --sona: #77A149;      /* partner brand: SONA's green and charcoal, on its partner card only (Scott, 18 October) */
    --sona-ink: #2B2D33;

    /* Type: two families, seven sizes */
    --head: "Outfit", system-ui, sans-serif;
    --body: "Quicksand", system-ui, sans-serif;
    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-20: 1.25rem;
    --fs-28: 1.75rem;
    --fs-40: 2.5rem;
    --fs-56: 3.5rem;

    /* Radii: small parts, controls, cards */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-card: 16px;

    /* Targets */
    --target: 44px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-weight: 400;
    font-size: var(--fs-16);
    line-height: 1.5;
}
h1, h2, h3 { font-family: var(--head); font-weight: 500; line-height: 1.2; }
h1 { font-size: var(--fs-28); margin: 0 0 0.75rem; overflow-wrap: anywhere; }
h2 { font-size: var(--fs-20); color: var(--ink); margin: 2rem 0 0.75rem; }   /* section headings */
p { margin: 0 0 0.75rem; }
strong { font-weight: 600; }
.small { font-size: var(--fs-14); font-weight: 500; }
.muted { color: var(--muted); }
.plain { margin: 0; padding-left: 1.25rem; }
.pre-line { white-space: pre-line; margin: 0; }
.figures { font-family: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; }
meter { display: block; width: 100%; height: 0.75rem; margin-top: 0.375rem; }

.visually-hidden, .phone-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.desktop-only { display: none; }

/* Links and focus: a 2px ink ring with a 2px offset; paper on ink */
a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Fields show the ring on any focus. A date field's calendar button sits inside it, so
   the field also keeps the ring while that button has focus (:focus-within). */
.form input:focus, .form select:focus, .form textarea:focus, .form input[type="date"]:focus-within,
.inline-form select:focus, .deal-move select:focus, .form input[type="file"]:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.on-ink :focus-visible, .site-header-inner :focus-visible,
.on-ink .form input:focus, .on-ink .form select:focus, .on-ink .form textarea:focus { outline-color: var(--paper); }
main:focus { outline: none; }   /* the skip link's target, not a control */

.skip-link {
    position: absolute; left: 16px; top: -100px; z-index: 10;
    display: inline-flex; align-items: center; min-height: var(--target); padding: 0 1rem;
    background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius);
    font-family: var(--head); font-weight: 500;
}
.skip-link:focus { top: 6px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Header: ink, wordmark left, badges right */
.site-header { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.site-header-inner, .staff-nav { position: relative; }   /* above the rings */
.header-rings { display: none; }

/* Rings: thin strokes in sky and lime spreading from a pink dot. Decoration only. */
.header-rings circle, .band-rings circle { fill: none; stroke-width: 1.5; }
.ring-sky { stroke: var(--sky); stroke-opacity: 0.4; }
.ring-lime { stroke: var(--lime); stroke-opacity: 0.28; }
.ring-faint { stroke-opacity: 0.2; }
.ring-fainter { stroke-opacity: 0.1; }
.site-header-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
    max-width: 480px; margin: 0 auto; padding: 0.625rem 16px; min-height: 56px;
}
.wordmark { font-family: var(--head); font-weight: 500; font-size: var(--fs-28); line-height: 1.2; color: var(--paper); }
.wordmark .dot { color: var(--pink); }
.badges { display: flex; gap: 0.5rem; }
.header-account { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; flex-basis: 100%; }
.header-client { font-family: var(--head); font-weight: 500; }
.header-account .link-button { color: var(--paper); }
.header-switch {
    display: inline-flex; align-items: center; min-height: var(--target);
    color: var(--paper); font-family: var(--head); font-weight: 500;
}

/* Page */
.wrap { max-width: 480px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.staff .site-header-inner, .staff .wrap { max-width: 640px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.page-head h1 { margin: 0; }
.page-head .button { width: auto; }

/* Components */

/* Cards: white, a hairline border, the card radius. Every card-shaped surface shares this. */
.card, .rows, .deal-card, .doc-section, .narrative-group, .tax-row, .thread-item, .checklist, .tip, .table, .plan {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}
.card { padding: 12px 14px; margin: 0 0 0.75rem; }
.card > :last-child { margin-bottom: 0; }
.card-emphasis { border: 2px solid var(--ink); }
.card-heading { font-family: var(--head); font-weight: 500; font-size: var(--fs-16); color: var(--ink); margin: 0 0 0.75rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.cards > li.card { margin: 0; }

/* Dark card: ink, paper text; at most one per screen */
.card-dark { background: var(--ink); color: var(--paper); border-radius: var(--radius-card); padding: 16px; margin: 0 0 1rem; }
.card-dark h2 { color: var(--sky); margin-top: 0; }
.card-dark p { margin: 0 0 0.75rem; }
.card-dark a { color: var(--paper); }
.card-dark .button-primary { color: var(--ink); margin-bottom: 0.25rem; }

/* Rows inside one card, with rule dividers; a row may be a link */
.rows { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.rows > li + li { border-top: 1px solid var(--rule); }
.row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    min-height: var(--target); padding: 10px 14px;
    color: var(--ink); text-decoration: none;
}
a.row:hover .row-title { text-decoration: underline; }
.rows > li:first-child .row { border-top-left-radius: calc(var(--radius-card) - 1px); border-top-right-radius: calc(var(--radius-card) - 1px); }
.rows > li:last-child .row { border-bottom-left-radius: calc(var(--radius-card) - 1px); border-bottom-right-radius: calc(var(--radius-card) - 1px); }
.rows a.row[aria-current="page"] { background: var(--ink); color: var(--paper); }
.rows a.row[aria-current="page"] .muted { color: var(--paper); }
.rows a.row[aria-current="page"]:focus-visible { outline-color: var(--ink); }
.rows-flat .row { padding-top: 8px; padding-bottom: 8px; }
.rows-flat .row a.row-title { display: inline-flex; align-items: center; min-height: var(--target); }
.row-main { min-width: 0; overflow-wrap: anywhere; }
.row-main p { margin: 0; }
.row-title { font-family: var(--head); font-weight: 500; }
.row a.row-title { color: var(--ink); display: inline-flex; align-items: center; min-height: var(--target); }
.row-end { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; font-family: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; }
.row-end svg { width: 20px; height: 20px; flex-shrink: 0; }
.row form { flex-shrink: 0; }
.row-wrap { flex-wrap: wrap; align-items: flex-start; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
/* Subscriptions: a card per service, its fields in a grid that widens on desktop */
.plain-list { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.plain-list li + li { margin-top: 0.25rem; }
.subscription-row { padding: 14px 16px 6px; margin-bottom: 1rem; }
/* The legend floats so it sits inside the card, not on its border */
.subscription-row legend { float: left; width: 100%; margin-bottom: 0.5rem; }
.subscription-row > :not(legend) { clear: both; }
.sub-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.sub-grid .field { min-width: 0; }
.subscription-row label.check { margin: 0 0 0.5rem; }
.seed-client { scroll-margin-top: 16px; }
.seed-client .row-title { font-size: var(--fs-16); }
.seed-client .row-main { flex: 1 1 320px; }
@media (min-width: 720px) {
    .sub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sub-grid .sub-wide { grid-column: 1 / -1; }
}
/* A row that's a link, with a button beside it (a time entry's Delete) */
.row-split { display: flex; align-items: center; }
.row-split > .row { flex: 1 1 auto; min-width: 0; }
.row-split > form { flex-shrink: 0; margin: 0 6px 0 0; }
.list-label { font-family: var(--head); font-weight: 500; font-size: var(--fs-14); color: var(--muted); margin: 1rem 0 0.375rem; }
.list-label:first-child { margin-top: 0; }

/* Tables (staff): muted column headings, rule dividers, numbers in Outfit, right-aligned */
.table { width: 100%; border-collapse: collapse; overflow: hidden; margin: 0 0 1rem; }
.table th, .table td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--rule); }
.table thead th { font-family: var(--head); font-weight: 500; font-size: var(--fs-12); color: var(--muted); border-top: 0; padding-top: 12px; padding-bottom: 8px; }
.table .num { text-align: right; font-family: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .table-group th { font-family: var(--head); font-weight: 500; font-size: var(--fs-14); color: var(--muted); background: var(--paper); }
.table td a { display: inline-flex; align-items: center; min-height: var(--target); margin: -10px 0; font-family: var(--head); font-weight: 500; }

/* Details and totals */
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.375rem 1rem; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.totals { display: grid; gap: 0.5rem; margin: 0; }
.totals div { display: flex; justify-content: space-between; align-items: baseline; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-family: var(--head); font-weight: 500; font-size: var(--fs-20); font-variant-numeric: tabular-nums; }

/* Icon chip: 32px, a 1.5px outline in sky, lime, or pink, ink icon */
.chip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: var(--radius); border: 1.5px solid var(--sky); color: var(--ink); background: var(--card);
}
.chip-icon svg { width: 18px; height: 18px; }
.chip-icon.lime { border-color: var(--lime); }
.chip-icon.pink { border-color: var(--pink); }

/* Buttons. Primary: pink, ink text, one per screen. Secondary: an ink outline. */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: var(--target); padding: 0.5rem 1.125rem;
    font-family: var(--head); font-weight: 500; font-size: var(--fs-16); line-height: 1.2;
    border-radius: var(--radius); text-decoration: none; cursor: pointer;
}
.button-primary { width: 100%; min-height: 48px; background: var(--pink); color: var(--ink); border: 0; }
.button-primary:hover { text-decoration: underline; }
.button-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.button-secondary:hover { background: var(--card); text-decoration: underline; }
.button-on-ink { background: transparent; color: var(--paper); border: 1.5px solid var(--paper); }
.button-on-ink:hover { text-decoration: underline; }
.button-compact { width: auto; min-height: var(--target); padding: 0.5rem 1.25rem; }
.button-small { width: auto; min-height: var(--target); padding: 0 0.75rem; font-size: var(--fs-16); }
.button-full { width: 100%; justify-content: center; }
.link-button {
    display: inline-flex; align-items: center; min-height: var(--target); min-width: var(--target);
    padding: 0; background: none; border: 0; cursor: pointer;
    font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em;
}
.link-block { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--target); min-width: var(--target); }
.link-block svg { width: 20px; height: 20px; flex-shrink: 0; }
.icon-button, .check-spacer {
    display: inline-flex; align-items: center; justify-content: center; width: var(--target); height: var(--target);
    padding: 0; color: var(--ink); background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.icon-button:hover { background: var(--paper); }
.icon-button svg { width: 20px; height: 20px; }
.actions, .button-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0.75rem 0; }
.button-row { margin: 0.5rem 0 0; }

/* Pills you press: chips, stage tabs, and checklist status. One shape, a 1.5px ink
   outline; selected is ink with paper text. */
.chip, .stage-picker a, .status-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    min-height: var(--target); min-width: var(--target); padding: 0 1rem;
    font-family: var(--head); font-weight: 500; font-size: var(--fs-16); color: var(--ink); text-decoration: none;
    background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer;
}
.chip:hover, .stage-picker a:hover, .status-pill:hover { text-decoration: underline; }
.chip[aria-pressed="true"], .stage-picker a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0; }

/* Tags that only say something: one small pill, 1px border in the text colour */
.badge, .deal-tag, .doc-tag, .task-new, .timer-state, .check-when.is-late, .pub-tag {
    display: inline-block; padding: 0 0.5rem;
    font-family: var(--body); font-weight: 600; font-size: var(--fs-14); line-height: 1.5;
    border: 1px solid currentColor; border-radius: 999px; vertical-align: 0.1em;
}
.badge { color: var(--sky); padding: 0.125rem 0.625rem; vertical-align: baseline; }
.deal-tag { margin-left: 0.375rem; }
.doc-tag { margin-left: 0.25rem; font-size: var(--fs-12); }
.task-new { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.check-when.is-late { background: var(--late); color: var(--card); border-color: var(--late); }
.task-new { margin-left: 0.25rem; }
.timer-state { margin-left: 0.5rem; color: var(--paper); }

/* Forms: visible labels, ink borders on every control */
.form { margin: 0.5rem 0 0; }
.field { display: grid; gap: 0.375rem; margin-bottom: 1rem; }
.field label, fieldset legend { font-family: var(--head); font-weight: 500; font-size: var(--fs-16); color: var(--ink); }
.optional { font-family: var(--body); font-weight: 500; font-size: var(--fs-14); color: var(--muted); }
.hint { font-size: var(--fs-14); font-weight: 500; color: var(--muted); margin: 0; }
.form input[type="email"], .form input[type="text"], .form input[type="url"], .form input[type="search"],
.form input[type="tel"], .form input[type="date"], .form textarea {
    width: 100%; min-height: 48px;
    padding: 0.625rem 0.75rem;
    font-family: var(--body); font-weight: 500; font-size: var(--fs-16); line-height: 1.4;   /* 16px stops phones zooming */
    color: var(--ink); background: var(--card);
    border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.form input[type="search"] { min-height: var(--target); padding: 0.5rem 0.75rem; -webkit-appearance: none; appearance: none; }
.form textarea { resize: vertical; min-height: 4.75rem; }
.form [aria-invalid="true"] { border-width: 3px; }

/* The one select: ink outline, our own chevron */
.form select, .inline-form select, .deal-move select {
    min-height: var(--target); padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    font-family: var(--body); font-weight: 500; font-size: var(--fs-16); line-height: 1.4; color: var(--ink);
    background-color: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius);
    appearance: none; -webkit-appearance: none;
    background-image: url("/assets/icons/chevron-down.svg");   /* a file, not a data URI: the security policy allows images from Radius only */
    background-repeat: no-repeat; background-position: right 0.875rem center;
}
.form select { width: 100%; min-height: 48px; padding-top: 0.625rem; padding-bottom: 0.625rem; }

.form input[type="file"] {
    width: 100%; min-height: var(--target); padding: 6px 8px; font: inherit; color: var(--ink);
    background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.form input[type="file"]::file-selector-button {
    min-height: 32px; margin-right: 0.75rem; padding: 0 0.875rem; font-family: var(--head); font-weight: 500; font-size: var(--fs-16);
    color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); cursor: pointer;
}
.field-error { display: flex; gap: 0.375rem; align-items: flex-start; font-weight: 600; margin: 0; }
.field-error svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.2em; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: 0.375rem; }
.choice-options { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.choice-options label, label.check {
    display: inline-flex; align-items: center; gap: 0.625rem; min-height: var(--target);
    font-family: var(--body); font-weight: 500; font-size: var(--fs-16);
}
.choice-options input, label.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.choice-stack { display: grid; gap: 0.25rem; }
.choice-stack label { display: flex; align-items: flex-start; gap: 0.625rem; min-height: var(--target); padding: 0.375rem 0; font-family: var(--body); font-weight: 400; }
.choice-stack input { width: 22px; height: 22px; margin: 0.15rem 0 0; accent-color: var(--ink); flex-shrink: 0; }
fieldset:disabled .choice-stack label { color: var(--muted); }
.inline-label { font-family: var(--head); font-weight: 500; font-size: var(--fs-16); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.input-with-button { display: flex; gap: 0.5rem; }
.input-with-button input { flex: 1 1 auto; min-width: 0; }
.input-with-button .button { flex-shrink: 0; width: auto; }
.person-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 0.75rem; }
.person-picker .field { flex: 1; min-width: 200px; margin-bottom: 0.75rem; }
.person-picker .button { margin-bottom: 0.75rem; }
/* Hidden by radius.js once due dates save on their own; .button's display would otherwise win. */
[data-autosubmit-fallback][hidden] { display: none; }

/* Notices */
.notice { display: flex; gap: 0.5rem; align-items: flex-start; }
.notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15em; }

/* Tips: a calm card in the page, once, with Got it */
.tip { margin: 0 0 1rem; padding: 12px 14px; border-left: 4px solid var(--sky); }
.tip-label { margin: 0 0 0.25rem; font-family: var(--head); font-weight: 500; font-size: var(--fs-14); color: var(--muted); }
.tip-text { margin: 0 0 0.625rem; }
.tip form { margin: 0; }
.tip .button { width: auto; }
.field + .tip { margin-top: -0.25rem; }

/* Month navigation */
.month-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.month-nav .current { flex: 1; text-align: center; padding: 0 0.5rem; font-family: var(--head); font-weight: 500; }

/* The client picker (radius.js makes it from a select): a text field with a list under
   it, in sections, the option under the keyboard or pointer with an ink focus ring. */
.combo { position: relative; }
.combo-field { position: relative; }
.form .combo-input, .combo-input { width: 100%; padding-right: 3rem; }
.combo-toggle {
    position: absolute; top: 0; right: 0; bottom: 0; width: var(--target); display: inline-flex; align-items: center; justify-content: center;
    padding: 0; color: var(--ink); background: none; border: 0; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}
.combo-toggle svg { width: 20px; height: 20px; transform: rotate(90deg); }
.combo[data-open] .combo-toggle svg { transform: rotate(-90deg); }
.combo-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    max-height: 19rem; overflow-y: auto; margin: 0; padding: 4px;
    background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.combo-list[hidden] { display: none; }
.combo-list ul { list-style: none; margin: 0; padding: 0; }
.combo-list ul + ul { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rule); }
.combo-group { padding: 8px 12px 4px; font-family: var(--head); font-weight: 500; font-size: var(--fs-14); color: var(--muted); }
.combo-option {
    display: flex; align-items: center; gap: 0.5rem; min-height: var(--target); padding: 6px 12px;
    border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere;
}
.combo-option.is-active { background: var(--paper); outline: 2px solid var(--ink); outline-offset: -2px; }
.combo-option[aria-selected="true"] { font-family: var(--head); font-weight: 500; }
.combo-option[aria-selected="true"]::after { content: ""; width: 0.5rem; height: 0.5rem; margin-left: auto; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
.combo-empty { padding: 10px 12px; margin: 0; color: var(--muted); }

/* The pink dot: a timer that's open, here */
.live-dot { position: relative; display: inline-block; flex-shrink: 0; width: 0.75rem; height: 0.75rem; margin-right: 0.375rem; border-radius: 50%; background: var(--pink); border: 1.5px solid var(--ink); vertical-align: 0; }
.live-dot.is-paused { background: var(--card); }
/* Running: a slow ring spreads from the dot, every 1.6 seconds. Still rings with reduced motion. */
.live-pulse::before, .live-pulse::after {
    content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--pink);
    animation: ring-out 3.2s ease-out infinite;
}
.live-pulse::after { animation-delay: 1.6s; }
@keyframes ring-out { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .live-pulse::before { transform: scale(2.2); opacity: 0.4; }
    .live-pulse::after { transform: scale(3.2); opacity: 0.2; }
}

/* Staff navigation. Phone: sections on paper under the header. Desktop: the ink sidebar. */
.staff-nav {
    background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.125rem;
    padding: 0 max(16px, calc((100% - 608px) / 2));   /* full-width paper, content lined up with the page */
}
.staff-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.125rem; }
.staff-nav a, .staff-nav button {
    display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); min-width: var(--target);
    font-family: var(--head); font-weight: 500; font-size: var(--fs-16); color: var(--ink);
    border: 0; border-bottom: 3px solid transparent; padding: 3px 0 0; background: none;
}
.staff-nav a { text-decoration: none; }
.staff-nav a:hover { text-decoration: underline; }
.staff-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.staff-nav button { cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
.nav-section { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.125rem; }
.nav-heading { margin: 0; font-family: var(--head); font-weight: 500; font-size: var(--fs-16); color: var(--ink); }
.staff-nav .nav-section a { font-size: var(--fs-14); }
.nav-end { display: flex; flex-wrap: wrap; gap: 0 1.125rem; margin-left: auto; }
.nav-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin-left: 6px; padding: 0 7px;
    border-radius: 999px; background: var(--pink); color: var(--ink); font-family: var(--body); font-weight: 600; font-size: var(--fs-14); line-height: 1;
}
.staff-nav .nav-end form { margin: 0; }

/* The open timer on every staff page, at every width: the elapsed time first and large,
   Pause or Resume and the pink Stop beside it; then client and service; then the note,
   editable in place; Adjust time quiet at the far end. */
.timer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 10px 16px; background: var(--ink); color: var(--paper); }
.timer-bar a { color: var(--paper); }
.timer-bar-time { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.timer-bar .live-dot { margin: 0 0.5rem 0 0.25rem; border-color: var(--pink); }
.timer-bar .live-dot.is-paused { background: transparent; border-color: var(--paper); }
.timer-bar-time form { margin: 0; }
.timer-bar-clock { font-family: var(--head); font-weight: 500; font-size: var(--fs-28); line-height: 1; font-variant-numeric: tabular-nums; min-width: 4.5ch; }
.timer-bar-what { display: flex; flex-direction: column; min-width: 0; flex: 1 1 150px; line-height: 1.3; font-size: var(--fs-16); }
.timer-bar-what span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-bar-client { font-family: var(--head); font-weight: 500; }
.timer-bar-service { color: var(--sky); font-size: var(--fs-14); font-weight: 500; }
/* A task's timer: the bar's client, service, and task are one link to the task. */
.timer-bar-link { justify-content: center; min-height: var(--target); color: var(--paper); text-decoration: none; border-radius: var(--radius-sm); }
.timer-bar-link .timer-bar-service { text-decoration: underline; text-underline-offset: 0.15em; }
.timer-bar-note { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 260px; min-width: 0; margin: 0; }
.timer-bar-note label { color: var(--sky); font-family: var(--head); font-weight: 500; font-size: var(--fs-14); }
.timer-bar-note input {
    flex: 1 1 auto; width: 0; min-width: 0; min-height: var(--target); padding: 0.375rem 0.75rem;
    font: inherit; font-size: var(--fs-16); color: var(--paper); background: var(--ink); border: 1.5px solid var(--paper); border-radius: var(--radius);
}
.timer-bar-note input:focus { outline: 2px solid var(--paper); outline-offset: 2px; }
.timer-bar-adjust { display: inline-flex; align-items: center; min-height: var(--target); margin-left: auto; color: var(--paper); font-size: var(--fs-14); }
.timer-choices .button { width: auto; }
.timer-choices form { margin: 0 0 0.375rem; }

/* "Did you forget to stop this?" after eight hours, on every staff page */
.forgot { margin-bottom: 1.25rem; }
.forgot .forgot-form { margin-top: 0.5rem; }
.forgot .field { margin-bottom: 0.75rem; }

/* Client dashboard */
.greeting { font-family: var(--head); font-weight: 500; font-size: var(--fs-16); color: var(--muted); margin: 0 0 0.25rem; }

/* Figures: the number large, its label under it */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 1.5rem 0 0; }
.stat-row > div {
    display: flex; flex-direction: column-reverse; gap: 4px; min-width: 0; padding: 14px 18px;
    background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-card);
}
.stat-row dt { color: var(--muted); }
.stat-row .is-late dd { color: var(--late); }
.stat-row dd { margin: 0; font-family: var(--head); font-weight: 500; font-size: var(--fs-40); line-height: 1; font-variant-numeric: tabular-nums; }
/* Client dashboard: an ink band with the business at the centre of the rings, then the
   cards, rising into the band when the first thing is waiting on the client. */
body.client.dashboard .wrap { max-width: none; padding: 0; }
.dash-band { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.dash-band-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 28px 16px 40px; }
.dash-band .greeting { color: var(--sky); font-size: var(--fs-20); margin-bottom: 0.5rem; }
.dash-band h1 { margin: 0; max-width: 14ch; font-size: var(--fs-40); line-height: 1.05; letter-spacing: -0.02em; color: var(--paper); }
.band-rings { position: absolute; right: -420px; top: -420px; width: 900px; height: 900px; pointer-events: none; }
.band-rings .band-dot { fill: var(--pink); stroke: none; }
.band-rings .band-pulse { stroke: var(--pink); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: band-spread 6s ease-out infinite; }
.band-pulse-two { animation-delay: 3s; }
@keyframes band-spread { from { transform: scale(0.2); opacity: 0.6; } to { transform: scale(1); opacity: 0; } }
.dash-body { position: relative; max-width: 1200px; margin: 0 auto; padding: 28px 16px 48px; }
.dash-body.rises { margin-top: -28px; padding-top: 0; }
.dash-grid section { margin-bottom: 40px; }
.dash-grid h2 { margin-top: 0; }
.waiting-panel, .need-card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius-card); padding: 20px; }
.waiting-panel h2 { margin: 0 0 0.375rem; font-size: var(--fs-14); color: var(--muted); }
.waiting-list { list-style: none; margin: 0; padding: 0; }
.waiting + .waiting { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.waiting p { margin: 0; }
.waiting .muted { margin-top: 0.25rem; }
.waiting .button { margin-top: 0.75rem; }
.waiting-title { font-family: var(--head); font-weight: 500; font-size: var(--fs-20); line-height: 1.25; }
.need-card h2 { margin: 0 0 0.5rem; }
.need-card p { margin: 0 0 1.125rem; }
.service { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; }
.service p { margin: 0; }
.service-name { font-family: var(--head); font-weight: 500; font-size: var(--fs-20); line-height: 1.3; margin: 0; }
.dashboard .chip-icon { width: 44px; height: 44px; background: var(--ink); border: 0; color: var(--sky); }
.dashboard .chip-icon.lime { color: var(--lime); }
.dashboard .chip-icon.pink { color: var(--pink); }
.dashboard .chip-icon svg { width: 22px; height: 22px; }
.help { margin-top: 0; }
.help p { margin: 0 0 1rem; }
.request-pill {
    flex-shrink: 0; padding: 1px 11px; border: 1px solid var(--ink); border-radius: 999px; white-space: nowrap;
    font-family: var(--body); font-weight: 600; font-size: var(--fs-14); color: var(--ink); background: var(--card);
}
.request-pill.is-working { background: var(--sky); border-color: var(--sky); }
.request-pill.is-waiting { background: var(--pink); border-color: var(--pink); }
.request-pill.is-done { background: var(--lime); border-color: var(--lime); }
.signed-in { margin-top: 0; }

/* Choose a business */
.choose-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.625rem; }
.choose-button {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 56px; padding: 12px 14px;
    background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius-card);
    font: inherit; text-align: left; cursor: pointer;
}
.choose-button:hover .choose-name { text-decoration: underline; }
.choose-button[aria-current="true"] { border-width: 2px; }
.choose-name { flex: 1; font-family: var(--head); font-weight: 500; font-size: var(--fs-16); }
.choose-current { font-size: var(--fs-14); font-weight: 500; color: var(--muted); }
.choose-button svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Time: Tracking and Tracked */
body.staff.time-page .wrap { max-width: none; }
.table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; }
.table-head h2 { margin-bottom: 0.5rem; }
.table-head .time-views ul { margin: 1.25rem 0 0.5rem; }
.time-table .time-note { overflow-wrap: anywhere; }
.time-table tr.is-open td, .rows .live-dot + * { font-family: var(--head); font-weight: 500; }
.time-task { font-family: var(--head); font-weight: 500; }
.switch-card { padding: 14px; }
.switch-label { margin: 0 0 0.375rem; font-family: var(--head); font-weight: 500; font-size: var(--fs-14); color: var(--muted); }
.switch-recent { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.switch-recent form { margin: 0; }
.switch-pair {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: var(--target); padding: 8px 12px;
    font: inherit; text-align: left; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); cursor: pointer;
}
.switch-pair:hover { background: var(--paper); }
.switch-client { font-family: var(--head); font-weight: 500; }
.switch-service { font-size: var(--fs-14); color: var(--muted); }
.switch-search { margin-top: 0; }

/* Pipeline */
.stage-picker ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.time-tabs ul, .time-views ul { margin-bottom: 0.75rem; }   /* tabs that reuse the stage picker */
.stage-picker a { padding: 0 0.875rem; }
.stage-count { font-variant-numeric: tabular-nums; }
.board-column { display: none; }
.board-column.is-current { display: block; }
.board-column h2 { margin: 0; font-size: var(--fs-16); }
.column-summary { margin: 0 0 0.75rem; }
.column-total { display: block; font-family: var(--head); font-weight: 500; font-size: var(--fs-28); line-height: 1.15; font-variant-numeric: tabular-nums; }
.column-count { font-size: var(--fs-14); color: var(--muted); }
/* Won and lost look finished: won in a lime outline, lost quiet on paper. */
.board-column.is-won .deal-card { border: 2px solid var(--lime); }
.board-column.is-won .column-total { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.board-column.is-lost .deal-card { background: var(--paper); border-style: dashed; border-color: var(--muted); }
.board-column.is-lost .deal-value { color: var(--muted); text-decoration: line-through; }
.deal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.deal-card { padding: 12px 14px; }
.deal-card p { margin: 0.125rem 0; }
.deal-name { display: inline-flex; align-items: center; min-height: var(--target); font-family: var(--head); font-weight: 500; font-size: var(--fs-16); color: var(--ink); }
.deal-value { font-family: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; }
.deal-move { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin-top: 0.5rem; }
.deal-move label { font-family: var(--head); font-weight: 500; font-size: var(--fs-14); }
.deal-move select { flex: 1; min-width: 8rem; }
.deal-move .button { margin: 0; }
.deal-card[draggable="true"] { cursor: grab; }
.deal-card.is-dragging { opacity: 0.5; }
.board-column.is-drop-target { outline: 2px dashed var(--ink); outline-offset: 4px; border-radius: var(--radius-card); }
.board-column:target, .deal-card:target { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Requests: the conversation, filters, and assignment */
body.client.requests-page .wrap { max-width: 720px; }
.request-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0 0 1rem; }
.request-status .deal-tag { margin-left: 0; }
.request-details { margin-bottom: 0.5rem; }
.thread { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.625rem; }
.thread-item { padding: 12px 14px; }
.thread-item.from-client { border-left: 4px solid var(--ink); }
.thread-item.is-note { background: var(--paper); border: 1.5px dashed var(--ink); }
.thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin: 0 0 0.375rem; }
.thread-who { font-family: var(--head); font-weight: 500; }
.thread-body p { margin: 0 0 0.625rem; line-height: 1.55; overflow-wrap: anywhere; }
.thread-body p:last-child { margin-bottom: 0; }
.thread-files { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.thread-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; }
.thread-files a { overflow-wrap: anywhere; }
.thread-event { padding: 0 14px; color: var(--muted); font-size: var(--fs-14); }
.thread-event strong { color: var(--ink); font-weight: 600; }
.thread-event.is-internal { font-style: italic; }
.request-filters { display: grid; gap: 0 12px; }
.request-filters .button { justify-self: start; margin-bottom: 1rem; }
.inline-assign .field { margin-bottom: 0.75rem; }

/* Tasks: My list, All tasks, Months, a task's page, and a client's tasks */
/* A task row: progress ring, title and who, when it's due, then the timer button. */
.task-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 0 18px; align-items: center; padding: 14px 18px; min-height: 76px; }
.task-row .row-main { overflow-wrap: anywhere; }
.task-row .row-title { font-size: var(--fs-16); }
.task-meta { display: block; margin-top: 2px; font-size: var(--fs-14); color: var(--muted); }
.task-meta strong { color: var(--ink); font-weight: 600; }
.task-when { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.task-late {
    padding: 0 0.625rem; border-radius: 999px; background: var(--late); color: var(--card);
    font-family: var(--body); font-weight: 600; font-size: var(--fs-14); line-height: 1.6; white-space: nowrap;
}
.task-act form { margin: 0; }
.task-timing { display: inline-flex; align-items: center; justify-content: center; width: var(--target); height: var(--target); }
.task-timing .live-dot { margin: 0; }
.play-button { border: 1.5px solid var(--ink); background: var(--card); }
.play-button svg { width: 18px; height: 18px; }
/* Every task list has a straight ink edge down its left, clipped by the card's rounded
   corner (Scott, 15 October: "the nicest detail"). Overdue turns it red; the days-late
   pill says so in words. */
.task-rows, .checklist { overflow: hidden; }
.task-rows > li, .month-task, .check-item.is-late { position: relative; }
.month-task { overflow: hidden; }
.task-rows > li::before, .month-task::before, .check-item.is-late::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--ink); pointer-events: none;
}
.task-rows > li.is-overdue::before, .month-task.is-overdue::before, .check-item.is-late::before { background: var(--late); }
/* A task's due checklist items sit openly under it, divided by dashed lines: no card of their own. */
.task-rows .checklist-due { margin: 0 18px 10px 66px; background: none; border: 0; border-radius: 0; }
.task-rows .checklist-due > li { padding: 2px 0; border-top: 1px dashed var(--hairline); }
.task-rows .checklist-due > li + li { border-top-style: dashed; border-top-color: var(--hairline); }
.task-rows .checklist-due .check-item.is-late::before { content: none; }   /* the task's own edge already says it */
.task-rows .checklist-due .check-due label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The progress ring: an ink outline that fills like a clock as the checklist is ticked;
   lime inside when it's all done. The words beside it say the same. */
.progress-ring { width: 30px; height: 30px; }
.progress-ring circle { fill: none; }
.progress-track { stroke: var(--ink); stroke-width: 1.5; }
.progress-track.is-full { fill: var(--lime); }
.progress-fill { stroke: var(--ink); stroke-width: 13; }
.progress-fill.is-full { stroke: var(--lime); }

/* My list's groups: Overdue, Due today, Coming up, No date */
.task-group { margin-top: 2.25rem; }
.group-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 0.75rem; }
.group-head h2 { margin: 0; }
.group-count { font-family: var(--head); font-weight: 500; color: var(--muted); }
.task-actions > * + * { margin-top: 0.75rem; }
.task-actions p { margin-bottom: 0; }
.task-actions form { margin: 0; }
/* Assigned to, in the actions card: the label on its own line, the select taking the rest of the row beside Assign */
.task-assign label { flex-basis: 100%; font-family: var(--head); font-weight: 500; }
.task-assign select { flex: 1 1 8rem; min-width: 0; }
.task-details { margin-bottom: 1.25rem; }
.task-notes { margin-bottom: 1rem; }
.task-side { margin-bottom: 1.5rem; }
.task-templates { margin: 1rem 0 0; }
.task-templates .form { margin: 0.5rem 0 1rem; }
.template-items { margin: 0 0 0.75rem; padding-left: 1.5rem; }
.template-card { margin-bottom: 0.75rem; }

/* The checklist. Each item: the box and text toggle Done; then the status pill, the due
   date, the time, and a one-tap timer, all changeable in place. Desktop: one line where
   it fits. Phone: the controls go under the text. */
.checklist { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.checklist > li { display: flex; align-items: center; gap: 0.25rem; padding: 2px 8px; }
.checklist > li + li { border-top: 1px solid var(--rule); }
.checklist > li.check-item { flex-wrap: wrap; gap: 0 0.5rem; }
.check-form { flex: 1 1 auto; min-width: 0; margin: 0; }
.check-item .check-form, .check-item > .check-toggle.is-static { flex: 1 1 16rem; min-width: 0; }
.check-toggle {
    display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; min-height: var(--target); padding: 10px 4px;
    font: inherit; text-align: left; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.check-toggle.is-static { cursor: default; }
.check-box {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
    border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: var(--card);
}
.check-box svg { width: 16px; height: 16px; stroke-width: 3; }
.is-done .check-box { background: var(--ink); color: var(--paper); }
.is-done .check-text { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.check-text { overflow-wrap: anywhere; }
.check-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0 0 6px; }
.check-meta form { margin: 0; }
.status-pill { min-width: 7.25rem; padding: 0 0.875rem; font-size: var(--fs-14); }
.status-pill.is-doing { background: var(--sky); }
.status-pill.is-done { background: var(--lime); }
.status-pill.is-static { min-height: 32px; cursor: default; border-width: 1px; }
.status-pill.is-static:hover { text-decoration: none; }
.check-due { display: inline-flex; align-items: center; gap: 0.375rem; }
.check-due label { font-family: var(--head); font-weight: 500; font-size: var(--fs-14); }
.check-due input[type="date"] {
    min-height: var(--target); padding: 0 0.5rem; font-family: var(--body); font-weight: 500; font-size: var(--fs-16);
    color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.check-when { font-family: var(--head); font-weight: 500; font-size: var(--fs-14); }
.check-time { display: inline-flex; align-items: center; gap: 0.375rem; }
.check-timer { border: 1.5px solid var(--ink); }
.check-timer svg { width: 18px; height: 18px; }
/* Your timer on a checklist item: the pink dot in the play button's place. */
.check-timing {
    display: inline-flex; align-items: center; justify-content: center; width: var(--target); height: var(--target);
    font-family: var(--head); font-weight: 500; font-size: var(--fs-14);
}
.check-timing .live-dot { margin-right: 0; }
.check-timing .live-dot.is-paused { background: var(--card); }
.check-arrange { display: flex; flex-shrink: 0; }
.check-arrange form { margin: 0; }
.check-add { margin-top: 0.5rem; }


/* The month view: "Quinprint, October", then each task as a card with its checklist. */
.month-group { margin: 0 0 1.5rem; }
.month-heading { margin: 1.25rem 0 0.125rem; }
.month-task { margin-bottom: 0.75rem; }
.month-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin-bottom: 0.5rem; }
.month-task-head > p { margin: 0; }
.month-task-head .muted { flex: 1 1 14rem; }
.month-task-title { flex-basis: 100%; }
.month-task-title .row-title { display: inline-flex; align-items: center; min-height: var(--target); }
.month-task.is-done .row-title { color: var(--muted); }
.month-task .checklist { margin-bottom: 0; }
.month-task-empty { margin: 0; }
.month-fold { margin: 0 0 0.75rem; }
.month-fold > summary, .task-templates > summary, .task-history-fold > summary, .ad-week > summary, .ad-resolve > summary {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 0.375rem; min-height: var(--target); cursor: pointer;
    font-family: var(--head); font-weight: 500;
}
.month-fold-label, .task-templates > summary, .task-history-fold > summary, .ad-resolve > summary, .ad-week-label { text-decoration: underline; text-underline-offset: 0.15em; }
.month-fold > summary .muted, .ad-week > summary .muted { font-family: var(--body); }

/* Ad reviews, on a client's staff page: the latest week's reviews as cards, past weeks
   folded; each suggestion's done or dismiss form folded under it. */
.ad-review { margin-bottom: 1rem; }
.ad-review .card-heading { margin-bottom: 0.125rem; }
.ad-summary { margin: 0.5rem 0 0.75rem; }
.ad-findings { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.ad-findings li + li { margin-top: 0.375rem; }
.ad-suggestions { list-style: none; margin: 0; padding: 0; }
.ad-suggestion { padding: 0.75rem 0; border-top: 1px solid var(--rule); }
.ad-suggestion p { margin: 0 0 0.5rem; }
.ad-suggestion p.ad-task { margin-bottom: 0.25rem; }
.ad-suggestion form { margin: 0; }
.ad-suggestion-title .deal-tag { margin-left: 0.5rem; }
.ad-suggestion.is-resolved .row-title { color: var(--muted); }
.ad-effect-label { font-family: var(--head); font-weight: 500; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-start; }
.ad-actions .button, .ad-resolve .actions .button { width: auto; }
.ad-resolve { flex: 1 1 16rem; }
.ad-resolve .actions { margin-bottom: 0; }
.ad-week, .ad-resolve > form { margin: 0 0 0.75rem; }
.ad-task a { display: inline-flex; align-items: center; min-height: var(--target); }

/* Staff proposal screens */
.proposal-step .card-heading { margin-top: 0; }
.link-list li { margin: 0.25rem 0; }
.link-list a, .link-list .link-button { display: inline-flex; align-items: center; min-height: var(--target); }
.link-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-14); overflow-wrap: anywhere; user-select: all; }
.proposal-totals { margin: 0.25rem 0 0.75rem; }
.proposal-totals dt { font-size: var(--fs-14); }
.proposal-totals dd { font-size: var(--fs-16); }
.narrative-group { margin: 0 0 1.25rem; padding: 12px 14px; }
.narrative-group legend { float: left; width: 100%; margin-bottom: 0.75rem; font-size: var(--fs-16); }
.narrative-group legend + * { clear: both; }
.tax-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin: 0 0 0.5rem; padding: 10px 14px 0; }
.tax-row legend { float: left; width: 100%; grid-column: 1 / -1; margin: 0 0 0.5rem; font-size: var(--fs-16); }
.tax-row .field { margin-bottom: 0.75rem; }
.tax-row select, .tax-row input[type="text"] { width: 100%; }

/* Proposals (docs/radiusproposals.md): an ink cover, numbered sections opening with an
   ink band, clean tables. The same markup prints to the PDF (see @media print below). */
body.client.proposal-page .wrap { max-width: 880px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 0 1.25rem; align-items: center; margin: 0 0 0.5rem; }
.doc-actions p { margin: 0; }
.proposal { margin: 0 0 2rem; }
.doc-cover {
    display: grid; gap: 1.75rem; margin: 0 0 1rem; padding: 20px 18px 24px;
    background: var(--ink); color: var(--paper); border-radius: var(--radius-card);
}
.doc-wordmark { margin: 0; font-family: var(--head); font-weight: 500; font-size: var(--fs-20); }
.doc-wordmark .dot { color: var(--pink); }
.doc-kicker { margin: 0 0 0.5rem; color: var(--sky); font-family: var(--head); font-weight: 500; font-size: var(--fs-14); }
.doc-cover h1 { margin: 0 0 0.5rem; font-size: var(--fs-40); line-height: 1.1; color: var(--paper); }
.doc-subtitle { margin: 0; font-size: var(--fs-20); }
.doc-cover-meta { display: grid; gap: 0.75rem; margin: 0; }
.doc-cover-meta dt { color: var(--sky); font-family: var(--head); font-weight: 500; font-size: var(--fs-14); }
.doc-cover-meta dd { margin: 0; font-family: var(--head); font-weight: 500; }
.doc-section { margin: 0 0 1rem; overflow: hidden; }
.doc-band { margin: 0; padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: var(--fs-20); }
.doc-num { margin-right: 0.375rem; color: var(--sky); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.doc-body { padding: 16px 18px 18px; }
.doc-body > :last-child { margin-bottom: 0; }
.doc-body h3 { margin: 1.5rem 0 0.5rem; font-size: var(--fs-20); }
.doc-body > h3:first-child, .doc-outcome h3, .doc-phase:first-child h3 { margin-top: 0; }
.doc-prose p, .doc-outcome p { margin: 0 0 0.875rem; line-height: 1.6; max-width: 68ch; }
.doc-outcomes { display: grid; gap: 1.25rem; }
.doc-outcome p { margin-bottom: 0; }
.doc-phase + .doc-phase { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.doc-phase-sub { margin-left: 0.25rem; font-family: var(--body); font-weight: 500; font-size: var(--fs-14); color: var(--muted); }
.doc-label { display: block; margin: 0.875rem 0 0.25rem; font-family: var(--head); font-weight: 500; font-size: var(--fs-14); color: var(--muted); }
.doc-deliverables { margin: 0; padding-left: 1.25rem; }
.doc-deliverables li { margin-bottom: 0.5rem; line-height: 1.5; }
.doc-invest { margin: 0.75rem 0 0; font-family: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; }
.doc-invest .doc-label { margin-top: 0; }
.doc-table-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.25rem; }
.doc-table { margin-bottom: 0.5rem; }
.doc-table tbody th { font-family: var(--head); font-weight: 500; }
.doc-table .is-fee th { font-family: var(--body); font-weight: 500; }
.doc-table .is-declined th, .doc-table .is-declined td { color: var(--muted); }
.doc-table tfoot th, .doc-table tfoot td, .invoice-totals th, .invoice-totals td { font-family: var(--head); font-weight: 500; }
.doc-table .doc-total th, .doc-table .doc-total td { border-top: 2px solid var(--ink); font-size: var(--fs-16); }
.doc-col-desc { display: none; }
.doc-desc-inline { display: block; margin-top: 0.125rem; font-family: var(--body); font-weight: 400; font-size: var(--fs-14); }
.doc-after-table { margin: 0 0 1rem; }
.doc-notes { display: grid; gap: 0.75rem; margin: 0; }
.doc-notes dt { font-family: var(--head); font-weight: 500; }
.doc-notes dd { margin: 0.125rem 0 0; line-height: 1.55; }
.doc-steps { margin: 0; padding-left: 1.5rem; }
.doc-steps li { margin-bottom: 0.625rem; line-height: 1.55; }
.prose-list, .doc-team { margin: 0 0 0.875rem; padding-left: 1.25rem; }
.prose-list li, .doc-team li { margin-bottom: 0.5rem; line-height: 1.55; }
.doc-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-14); overflow-wrap: anywhere; }
.doc-record { margin: 0; }
.accept-form { margin: 0; }
.accept-form .button-primary { margin-top: 0.25rem; }

/* Service agreements: the proposal's cover, bands, and tables, with the clauses numbered
   1.1, 1.2, and their items (a), (b), as in Boom12's standard wording. */
.agr-party { margin-left: 2rem; }
.agr-recitals { margin: 0 0 0.875rem; padding-left: 1.5rem; max-width: 68ch; }
.agr-recitals li { margin-bottom: 0.5rem; line-height: 1.55; }
.agr-num { margin-right: 0.25rem; font-family: var(--head); font-weight: 500; font-variant-numeric: tabular-nums; }
.agr-items { list-style: none; counter-reset: agr; margin: -0.375rem 0 0.875rem; padding-left: 2.25rem; max-width: 68ch; }
.agr-items li { position: relative; counter-increment: agr; margin-bottom: 0.375rem; line-height: 1.55; }
.agr-items li::before { content: "(" counter(agr, lower-alpha) ")"; position: absolute; left: -2.25rem; }
.agreement .doc-body h4 { margin: 1.25rem 0 0.5rem; font-size: var(--fs-16); }
.agr-signatures { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.agr-link input { width: 100%; }
@media (min-width: 720px) { .agr-signatures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Invoices: the document's header (wordmark and number, then From, Billed to, and the
   dates), then the proposal's bands and tables. It prints on paper from the first page.
   Its totals are a second tbody, not a tfoot: Chrome moves a tfoot to the next page on a
   named page. */
.invoice-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.invoice-top h1 { margin: 0; }
.invoice-parties { display: grid; gap: 1rem; }
.invoice-parties p { margin: 0; line-height: 1.5; }
.invoice-parties .doc-label { margin-top: 0; }
.invoice-detail { display: block; margin-top: 0.125rem; font-family: var(--body); font-weight: 400; font-size: var(--fs-14); }
@media (min-width: 720px) { .invoice-parties { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Phone only, under 720px */
@media (max-width: 719px) {
    .timer-bar-note { flex-basis: 100%; }
    /* A task row on a phone: ring, title, and timer on top; when it's due under the title. */
    .task-row { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ring main act" ". when when"; gap: 6px 14px; padding: 12px 14px; }
    .task-row .progress-ring { grid-area: ring; align-self: start; margin-top: 2px; }
    .task-row .row-main { grid-area: main; }
    .task-row .task-act { grid-area: act; align-self: start; }
    .task-when { grid-area: when; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; text-align: left; }
    .task-rows .checklist-due { margin: 0 14px 10px; }
    .checklist.is-arranging > li { flex-wrap: wrap; }
    .checklist.is-arranging .check-form { flex-basis: 100%; }
    .checklist.is-arranging .check-arrange { margin-left: auto; }
    /* The checklist's controls use the row's full width under the text, so the status
       and the due date share a line, and the time and timer follow. */
    .check-item .check-form, .check-item > .check-toggle.is-static { flex-basis: 100%; }
    .check-meta { padding-left: 0; gap: 0.375rem 0.5rem; }
    .status-pill { min-width: 6.75rem; padding: 0 0.625rem; }
    .check-due input[type="date"] { padding: 0 0.375rem; }
    .check-meta .check-time:empty, .check-meta .check-when-slot:empty { display: none; }
}

/* Desktop, 720px and up */
@media (min-width: 720px) {
    .phone-only { display: none !important; }
    .desktop-only { display: revert; }
    .phone-visually-hidden { position: static !important; width: auto; height: auto; margin: 0 0 0.75rem; overflow: visible; clip: auto; white-space: normal; }

    /* Staff: the header becomes an ink sidebar, about 200px */
    body.staff .shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; }
    body.staff .site-header {
        position: sticky; top: 0; height: 100vh; overflow-y: auto;
        display: flex; flex-direction: column; padding: 16px 12px;
    }
    body.staff .site-header-inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 28px; min-height: 0; margin: 0; max-width: none; }
    body.staff .badges { margin-top: 0; }
    body.staff .staff-nav .nav-count { margin-left: auto; }
    body.staff .timer-bar { border-left: 1px solid color-mix(in srgb, var(--paper) 18%, var(--ink)); }
    body.staff .staff-nav {
        background: none; border: 0; padding: 0; flex: 1;
        display: flex; flex-direction: column; align-items: stretch;
    }
    body.staff .staff-nav ul { flex-direction: column; gap: 2px; }
    body.staff .staff-nav a, body.staff .staff-nav button {
        width: 100%; justify-content: flex-start; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
        color: var(--paper);
    }
    body.staff .staff-nav a[aria-current="page"] { background: var(--paper); color: var(--ink); }
    body.staff .staff-nav :focus-visible { outline-color: var(--paper); }
    /* Section headings in sky, larger than their items (Scott, 12 October); the current
       item is a full-width band, its focus ring just inside so the edge can't cut it off. */
    body.staff .staff-nav .nav-section { display: block; margin: 0 0 0.5rem; }
    body.staff .staff-nav .nav-heading { margin: 0.75rem 0 0.125rem; padding: 0 12px; font-size: var(--fs-16); color: var(--sky); }
    body.staff .staff-nav .nav-section a { width: calc(100% + 24px); margin: 0 -12px; padding: 0 24px; border-radius: 0; font-size: var(--fs-14); }
    body.staff .staff-nav .nav-section a:focus-visible { outline-offset: -4px; }
    body.staff .staff-nav .nav-section a[aria-current="page"]:focus-visible { outline-color: var(--ink); }
    /* Where you are: the pink dot (the band and aria-current say it too) */
    body.staff .staff-nav .nav-section a[aria-current="page"]::before {
        content: ""; flex-shrink: 0; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 1.5px var(--ink);
    }
    body.staff .header-rings { display: block; position: absolute; left: -64px; top: -96px; width: 260px; height: 260px; pointer-events: none; }
    body.staff main h1 { font-size: var(--fs-40); line-height: 1.1; letter-spacing: -0.01em; }
    body.staff .staff-nav .nav-end { flex-direction: column; margin: auto 0 0; gap: 2px; }
    body.staff .main-area { min-width: 0; }
    body.staff .wrap { max-width: 1200px; padding: 1.75rem 32px 3rem; margin: 0; }

    .timer-bar { padding: 10px 32px; min-height: 72px; }
    .timer-bar form { flex-shrink: 0; }
    .timer-bar-clock { font-size: var(--fs-40); }
    .forgot .forgot-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; }
    .forgot .forgot-form .field { flex: 0 1 280px; margin-bottom: 0; }

    /* Time: the entries about two thirds on the left, Switch to and the totals on the right */
    .time-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); grid-template-areas: "entries switch" "entries totals"; gap: 0 32px; align-items: start; }
    .time-switch { grid-area: switch; }
    .time-entries { grid-area: entries; }
    .time-totals { grid-area: totals; }
    .time-switch h2, .time-entries .table-head h2 { margin-top: 0; }
    .table-head .time-views ul { margin-top: 0; }

    /* Client screens: the list on the left, the selected client on the right */
    .split { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 0 32px; align-items: start; }
    .split-list .rows-compact .row { padding: 6px 12px; }
    .split-detail > p:first-child .link-block { margin-top: -10px; }
    body.staff .split-list { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 2px; }

    /* Client dashboard: ink header with business name and Sign out; two columns below */
    body.client .site-header-inner, body.client .wrap { max-width: 1200px; }
    body.client .wrap { padding: 2rem 32px 3rem; }
    body.client .site-header-inner { padding-left: 32px; padding-right: 32px; }   /* lines the wordmark up with the content */
    body.client:not(.dashboard) .wrap { max-width: 480px; }   /* sign-in and other single pages stay narrow */
    body.client.requests-page .wrap { max-width: 720px; }
    body.client.proposal-page .wrap { max-width: 880px; }
    .header-account { flex-basis: auto; margin-left: auto; }
    .dash-band-inner { padding: 48px 32px 96px; }
    .dash-band h1 { font-size: var(--fs-56); }
    .band-rings { right: -260px; top: -300px; }
    .dash-body { padding: 40px 32px 64px; }
    .dash-body.rises { margin-top: -52px; padding-top: 0; }
    .dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 0 32px; align-items: start; }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .waiting-panel, .need-card { padding: 22px 24px; }
    .waiting { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
    .waiting > .button { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

    /* Pipeline: the five stages side by side; the board scrolls on its own when narrow */
    body.staff.pipeline .wrap { max-width: none; }
    .board {
        display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 0 16px; align-items: start;
        overflow-x: auto; padding: 4px 4px 12px;
    }
    .board-column { display: block; min-width: 0; }
    /* The stage label is read, not shown: the card's select says Stage to screen readers. */
    .board-column .deal-move label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .board-column .deal-move { margin-top: 0.75rem; }

    /* Requests */
    .request-filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
    .request-filters .field, .request-filters .button { margin-bottom: 1rem; }
    .inline-assign { display: flex; align-items: flex-end; gap: 12px; }
    .inline-assign .field { flex: 1; max-width: 320px; margin-bottom: 0; }

    /* Tasks: a task's page is details and checklist on the left, its actions on the right */
    body.staff.task-page .wrap { max-width: none; }
    .task-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); grid-template-areas: "head side" "main side"; gap: 0 32px; align-items: start; }
    .task-head { grid-area: head; }
    .task-main { grid-area: main; }
    .task-side { grid-area: side; position: sticky; top: 16px; margin-bottom: 0; }
    .task-filters { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; align-items: end; }
    .task-filters .button { margin-bottom: 1rem; }
    .month-filters.task-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
    /* Checklist controls line up from row to row. */
    .check-when-slot { min-width: 5.75rem; }
    .check-time { min-width: 3.5rem; justify-content: flex-end; }

    /* Proposals */
    .doc-cover { min-height: 340px; padding: 32px 40px 36px; align-content: space-between; }
    .doc-cover h1 { font-size: var(--fs-56); }
    .doc-subtitle { font-size: var(--fs-20); }
    .doc-cover-meta { grid-template-columns: repeat(3, max-content); gap: 0 2.5rem; }
    .doc-band { padding: 14px 32px; }
    .doc-body { padding: 22px 32px 26px; }
    .doc-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
    .doc-col-desc { display: table-cell; }
    .doc-desc-inline { display: none; }
    .doc-table th[scope="col"]:first-child { width: 32%; }
}

/* Print: the proposal PDF */
@media print {
    @page { size: Letter; margin: 0.6in 0.65in 0.7in; background: #F7F7F2; @bottom-right { content: counter(page); font-family: "Outfit", sans-serif; font-size: 9pt; color: #5F5E5A; } }
    @page :first { margin: 0; background: #1D201F; @bottom-right { content: none; } }
    html, body { background: var(--paper); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { font-size: 10.5pt; }
    .skip-link, .site-header, .timer-bar, .doc-actions, .accept-form, .notice, body > .visually-hidden[role="status"] { display: none !important; }
    .wrap, body.client.proposal-page .wrap, body.staff .wrap { max-width: none; padding: 0; margin: 0; }
    .proposal { margin: 0; }
    .doc-cover {
        height: 11in; margin: 0; padding: 0.9in 0.8in; border-radius: 0; break-after: page;
        display: flex; flex-direction: column; justify-content: space-between;
    }
    .doc-cover h1 { font-size: 40pt; }
    .doc-subtitle { font-size: 16pt; }
    .doc-cover-meta { grid-template-columns: repeat(3, max-content); gap: 0 0.5in; }
    /* The major sections start a page; the shorter ones follow on. */
    .doc-section { margin: 0.4in 0 0; border: 0; border-radius: 0; background: none; overflow: visible; }
    .doc-section.doc-break { break-before: page; margin-top: 0; }
    .doc-band { padding: 14px 20px; border-radius: var(--radius); font-size: 16pt; break-after: avoid; }
    .doc-body { padding: 18px 0 0; }
    .doc-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
    .doc-outcome, .doc-phase, .doc-notes > div, .doc-record, tr, .agr-clause { break-inside: avoid; }
    .agr-signatures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* An invoice has no cover: its first page is paper, with margins, like the rest. */
    @page invoice { margin: 0.6in 0.65in 0.7in; background: #F7F7F2; @bottom-right { content: counter(page); font-family: "Outfit", sans-serif; font-size: 9pt; color: #5F5E5A; } }
    .invoice-print { page: invoice; }
    .invoice-doc .doc-table th[scope="col"]:first-child { width: auto; }
    .invoice-parties { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .doc-body h3 { break-after: avoid; }
    .doc-col-desc { display: table-cell; }
    .doc-desc-inline { display: none; }
    .doc-table th[scope="col"]:first-child { width: 32%; }
    .table { border-radius: var(--radius-sm); }
    a { color: inherit; }
}

/* Templates area and work groups (15 October) */
.template-task { margin: 0 0 0.75rem; }
.template-task legend { font-family: var(--head); font-weight: 500; padding: 0 0.25rem; }
.template-list { padding-left: 2.25rem; }
.month-subheading { margin: 1rem 0 0.5rem; }
.month-work { margin: 0 0 0.5rem; }
.month-task.is-waiting { border-style: dashed; }
.stage-move { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; }
.task-waiting { margin-bottom: 1rem; }
.task-waiting form { margin-top: 0.5rem; }
.task-form-group { margin: 0 0 1rem; }
@media (min-width: 720px) {
    /* A sidebar taller than the window scrolls rather than squeezing its header into the nav. */
    body.staff .site-header > * { flex-shrink: 0; }
}

/* Public pages (roadmap item 7, 18 October): /services and a page for each service, in
   their own layout (templates/site/). The app's tokens, type, cards, buttons, tags, and
   rings at a larger scale: ink bands with the rings, 40 and 56px headings, 48px icon
   chips. Pink is the band's main button, a form's own submit, and the dot for where you are. */
body.pub { background: var(--paper); }
.pub main:focus { outline: none; }
.pub-header-inner, .pub-hero-inner, .pub-section, .pub-band-inner, .pub-questions-inner, .pub-footer-inner {
    max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px;
}
.pub-header, .pub-hero, .pub-band, .pub-footer, .pub-cta { background: var(--ink); color: var(--paper); }
.pub-header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding-top: 0.625rem; padding-bottom: 0.625rem; }
.pub-wordmark {
    display: inline-flex; align-items: center; min-height: var(--target); margin: 0;
    font-family: var(--head); font-weight: 500; font-size: var(--fs-28); line-height: 1.2; color: var(--paper); text-decoration: none;
}
.pub-wordmark .dot { color: var(--pink); }
.pub-nav { margin-left: auto; }
.pub-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.pub-nav a:not(.button) {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--target); padding: 0 0.75rem;
    font-family: var(--head); font-weight: 500; color: var(--paper); text-decoration: none;
}
.pub-nav a:not(.button):hover { text-decoration: underline; }
.pub-nav a[aria-current]::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.pub-nav .button { margin-left: 0.25rem; }

/* The top band: the rings spread from behind the right edge */
.pub-hero, .pub-band, .pub-cta { position: relative; overflow: hidden; }
.pub-hero-inner, .pub-band-inner, .pub-cta-text, .pub-cta .button { position: relative; }
.pub-hero-inner { padding-top: 2.5rem; padding-bottom: 4rem; }
.pub-rings { position: absolute; pointer-events: none; }
.pub-rings circle { fill: none; stroke-width: 1.5; }
.pub-rings .ring-sky { stroke-opacity: 1; }
.pub-rings .ring-lime { stroke-opacity: 1; }
.pub-rings .pub-dot { fill: var(--pink); stroke: none; }
.pub-rings-hero { right: -600px; top: -600px; width: 800px; height: 800px; }   /* phone: only the outer rings, in the top-right corner */
.pub-rings-band { display: none; right: -480px; top: -300px; width: 760px; height: 760px; }   /* desktop: top right, clear of the heading; the cards cover the rest */
.pub-rings-card { left: -410px; bottom: -370px; width: 500px; height: 500px; }   /* only the outer rings show, in the corner, clear of the text */
.pub-crumbs ol { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; font-family: var(--head); font-weight: 500; font-size: var(--fs-14); color: var(--sky); }
.pub-crumbs a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--sky); }
.pub-eyebrow { margin: 0 0 1rem; font-family: var(--head); font-weight: 500; color: var(--sky); }
.pub-display { max-width: 14ch; margin: 0 0 1.5rem; font-size: var(--fs-40); line-height: 1.05; letter-spacing: -0.02em; color: var(--paper); }
.pub-lede { max-width: 38rem; margin: 0 0 1rem; font-size: var(--fs-20); color: var(--muted); }
.pub-hero .pub-lede, .pub-band .pub-lede { color: var(--paper); }
.pub-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.pub-actions .button { width: auto; min-height: 48px; padding: 0.5rem 1.5rem; }
.pub-facts {
    list-style: none; margin: 3rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--muted);
    display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; font-family: var(--head); font-weight: 500; color: var(--sky);
}

/* Sections */
.pub-section { padding-top: 4rem; padding-bottom: 1.5rem; }
.pub-section-last { padding-bottom: 4rem; }
.pub-title { margin: 0 0 0.75rem; font-size: var(--fs-28); line-height: 1.15; letter-spacing: -0.01em; }
.pub-band .pub-title { color: var(--paper); }
.pub-section .pub-lede, .pub-band .pub-lede { margin-bottom: 2.5rem; }
.pub-label { margin: 0 0 0.25rem; font-weight: 600; font-size: var(--fs-14); color: var(--muted); }
.chip-icon.chip-large { width: 48px; height: 48px; }
.chip-large svg { width: 24px; height: 24px; }
.pub-tag { padding: 0.125rem 0.75rem; color: var(--ink); }
.pub-tag.is-muted { color: var(--muted); }
.pub-tag-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pub-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* What we look after: two large cards, then two smaller */
.pub-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.card.pub-service { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin: 0; padding: 24px; }
.pub-service h3 { margin: 0; font-size: var(--fs-20); }
.pub-service.is-wide h3 { font-size: var(--fs-28); }
.pub-service p { margin: 0; }
.pub-price { font-family: var(--head); font-weight: 500; }
.pub-service.is-wide .pub-price { font-size: var(--fs-20); }
.pub-service > a { margin-top: auto; }
.pub-service .button svg, .pub-more svg { width: 18px; height: 18px; }
.pub-more { font-family: var(--head); font-weight: 500; }

/* How it works */
.pub-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.5rem 3rem; }
.pub-steps li { padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.pub-steps h3 { margin: 0 0 0.5rem; font-size: var(--fs-20); }
.pub-steps p { margin: 0; }
.pub-steps .pub-step-number { margin: 0 0 1rem; font-family: var(--head); font-weight: 500; font-size: var(--fs-56); line-height: 1; }

/* The partner card, and "Already with us?" (the one dark card) */
.card.pub-partner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 0; padding: 24px; }
.pub-partner-text { flex: 1 1 320px; min-width: 0; }
.pub-partner h2 { margin: 0 0 0.25rem; }
.pub-partner p { margin: 0; }
/* SONA's card in its own colours: its logo, a green edge, and its green button with charcoal text (4.6:1) */
.card.pub-partner.is-sona { border: 2px solid var(--sona); }
.pub-partner-logo { display: block; width: 180px; height: auto; }
.button-sona { background: var(--sona); color: var(--sona-ink); border: 1.5px solid var(--sona); }
.button-sona:hover { text-decoration: underline; }
.pub-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 32px 24px; border-radius: var(--radius-card); }
.pub-cta-text { max-width: 40rem; }
.pub-cta h2 { margin: 0 0 0.5rem; font-size: var(--fs-28); color: var(--paper); }
.pub-cta p { margin: 0; }
.pub-cta .button { min-height: 48px; }

/* Plans: three cards, the featured one with the 2px ink border; the price from the catalogue */
.pub-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 1rem; padding: 28px 24px; color: var(--ink); }
.plan-featured { border: 2px solid var(--ink); }
.pub-band .plan { border-color: var(--card); }
.plan h3 { margin: 0; font-size: var(--fs-28); }
.plan p { margin: 0; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.375rem; }
.plan-from { flex-basis: 100%; font-family: var(--head); font-weight: 500; font-size: var(--fs-14); color: var(--muted); }
.plan-amount { font-family: var(--head); font-weight: 500; font-size: var(--fs-56); line-height: 1; font-variant-numeric: tabular-nums; }
.pub-plans.is-compact .plan-amount { font-size: var(--fs-40); }
.plan-amount.is-missing, .pub-plans.is-compact .plan-amount.is-missing { font-size: var(--fs-20); color: var(--muted); }
.plan-note { font-size: var(--fs-14); font-weight: 500; color: var(--muted); }
.plan-features { list-style: none; margin: 0.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.625rem; }
.plan-features li { display: flex; gap: 0.625rem; align-items: flex-start; }
.plan-lead { font-weight: 600; }
.pub-tick { width: 22px; height: 22px; flex-shrink: 0; }
.pub-tick circle { fill: none; stroke: var(--lime); stroke-width: 1.5; }
.pub-tick path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.on-ink .plan :focus-visible, .on-ink .pub-price-card :focus-visible { outline-color: var(--ink); }
.pub-after-plans { margin: 1.5rem 0 0; color: var(--muted); }

/* What every plan includes, and features */
.pub-includes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 2rem 3rem; }
.pub-includes li { display: flex; gap: 1rem; align-items: flex-start; }
.pub-includes h3 { margin: 0 0 0.25rem; font-size: var(--fs-20); }
.pub-includes p { margin: 0; color: var(--muted); }

/* Ink bands: business email, domains and licences, full service */
.pub-band { margin-top: 3rem; }
.pub-band-inner { padding-top: 4rem; padding-bottom: 4rem; }
.pub-band-aside { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin: 2rem 0 0; }
.pub-band-aside strong { font-family: var(--head); font-weight: 500; font-size: var(--fs-20); }
.pub-band-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.pub-band-split .pub-lede { margin-bottom: 0; }
.card.pub-price-card { margin: 0; padding: 8px 8px 16px; color: var(--ink); }
.pub-price-rows { border: 0; margin: 0 0 0.75rem; }
.pub-price-rows .row-end { gap: 0.375rem; font-size: var(--fs-20); }
.pub-price-rows .row-end .muted { font-family: var(--body); font-size: var(--fs-16); }
.pub-price-card .plan-note { padding: 0 14px; }

/* Questions, and SONA's rate analysis */
.pub-questions { border-top: 1px solid var(--hairline); margin-top: 3rem; }
.pub-band + .pub-questions { border-top: 0; margin-top: 0; }
.pub-questions-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 4rem; padding-bottom: 4rem; }
.pub-questions .pub-lede { margin-bottom: 1rem; }
.card.pub-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0 16px; margin: 0; padding: 24px; }
.pub-form .field-wide, .pub-form fieldset { grid-column: 1 / -1; }
.pub-form > .field-error { margin-bottom: 1rem; }
.pub-form .button-primary { width: auto; padding: 0.5rem 1.5rem; }
.pub-form > p:last-child { margin: 0.25rem 0 0; }
.pub-sent { align-self: start; margin: 0; padding: 20px 24px; font-size: var(--fs-20); }
.pub-sent svg { margin-top: 0.3em; }
.pub-sent p { margin: 0; }

/* The terms: one readable column */
.pub-prose { max-width: 46rem; }
.pub-prose h2 { margin: 2.5rem 0 0.75rem; }
.pub-prose section:first-child h2 { margin-top: 0; }

/* Footer */
.pub-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-top: 3rem; padding-bottom: 3rem; }
.pub-footer-line { margin: 0; font-size: var(--fs-14); font-weight: 500; color: var(--sky); }
.pub-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.pub-footer nav a { display: inline-flex; align-items: center; min-height: var(--target); padding: 0 0.5rem; color: var(--paper); }

@media (min-width: 720px) {
    .pub-header-inner, .pub-hero-inner, .pub-section, .pub-band-inner, .pub-questions-inner, .pub-footer-inner { padding-left: 32px; padding-right: 32px; }
    .pub-hero-inner { padding-top: 3rem; padding-bottom: 6.5rem; }
    .pub-rings-hero { right: -260px; top: -240px; }
    .pub-rings-band { display: block; }
    .pub-display { font-size: var(--fs-56); }
    .pub-title { font-size: var(--fs-40); }
    .pub-section { padding-top: 6rem; }
    .pub-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card.pub-service { padding: 32px; }
    .pub-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plan { padding: 32px; }
    .card.pub-partner, .pub-cta { padding: 32px 40px; }
    .pub-band-inner { padding-top: 6rem; padding-bottom: 6rem; }
    .pub-band-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
    .pub-questions-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; padding-top: 6rem; padding-bottom: 6rem; }
    .card.pub-form { padding: 32px; }
}

/* Website › Pages (staff): the prices table's long {tokens} wrap rather than widen a phone screen */
.price-tokens { table-layout: fixed; }
.price-tokens td { overflow-wrap: anywhere; }