/* ---------------------------------------------------------------------------
   Portal shell — HQ, partners, customers. Same branding, different menus.

   Palette (2026-08-14): near-black, dark grey, white, lime #84f000. High contrast,
   with a lime glow on active nav, lime buttons and stats that need a decision.
   Layout follows the Caddy admin (sidebar + avatar header) without its colours.
   --------------------------------------------------------------------------- */

:root {
    --sp-black: #0b0b0b;
    --sp-ink: #111111;
    --sp-panel: #171717;
    --sp-card: #1c1c1c;
    --sp-line: #2a2a2a;
    --sp-text: #f4f4f4;
    --sp-muted: #9a9a9a;
    --sp-lime: #84f000;
    --sp-lime-dim: rgba(132, 240, 0, .14);
    --sp-glow: 0 0 18px rgba(132, 240, 0, .45);
}

* { box-sizing: border-box; }

body.hq {
    margin: 0;
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--sp-text);
    background: var(--sp-black);
    display: flex;
    min-height: 100vh;
    color-scheme: dark;
}

a { color: var(--sp-lime); }

/* --- Sidebar --------------------------------------------------------------- */

.hq-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--sp-ink);
    color: var(--sp-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--sp-line);
    z-index: 20;
}

.hq-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid var(--sp-line);
}

.hq-logo img { height: 34px; width: auto; }
.hq-logo span { font-weight: 700; letter-spacing: .4px; color: var(--sp-lime); }

.hq-sidebar nav { flex: 1; padding: 12px 0; overflow-y: auto; }

.hq-sidebar nav a {
    display: block;
    padding: 11px 20px;
    color: var(--sp-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.hq-sidebar nav a:hover { color: #fff; background: rgba(255, 255, 255, .04); }

.hq-sidebar nav a.on {
    color: var(--sp-lime);
    border-left-color: var(--sp-lime);
    background: var(--sp-lime-dim);
    font-weight: 600;
    text-shadow: 0 0 12px rgba(132, 240, 0, .55);
}

.hq-sidebar-foot {
    padding: 16px 20px;
    border-top: 1px solid var(--sp-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.hq-sidebar-foot a { color: var(--sp-muted); text-decoration: none; font-size: 13px; }
.hq-sidebar-foot a:hover { color: var(--sp-lime); }

.hq-sidebar-foot button {
    background: none;
    border: 1px solid var(--sp-line);
    color: var(--sp-muted);
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}

.hq-sidebar-foot button:hover {
    border-color: var(--sp-lime);
    color: var(--sp-lime);
    box-shadow: var(--sp-glow);
}

/* --- Frame + top bar (Caddy header-with-avatar) ----------------------------- */

.hq-frame { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.hq-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    background: var(--sp-ink);
    border-bottom: 1px solid var(--sp-line);
    position: sticky;
    top: 0;
    z-index: 10;
}

.hq-menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--sp-line);
    color: var(--sp-text);
    font-size: 18px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.hq-top-copy { flex: 1; }
.hq-top-kicker {
    margin: 0;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sp-lime);
}
.hq-top-place { margin: 0; color: var(--sp-muted); font-size: 13px; }

.hq-who {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
}

.hq-who img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sp-lime);
    box-shadow: var(--sp-glow);
    background: var(--sp-lime);
}

.hq-who strong { display: block; font-size: 14px; }
.hq-who span { display: block; font-size: 12px; color: var(--sp-muted); }

/* --- Main ------------------------------------------------------------------ */

.hq-main { flex: 1; padding: 30px 36px 60px; max-width: 1200px; }

.hq-main h1 { margin: 0 0 6px; font-size: 26px; color: #fff; }
.hq-main h2 { margin: 34px 0 12px; font-size: 18px; color: var(--sp-lime); }
.hq-sub { color: var(--sp-muted); margin: 0 0 24px; }

.hq-flash {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-weight: 500;
}

.hq-flash.ok  { background: var(--sp-lime-dim); border: 1px solid var(--sp-lime); color: var(--sp-lime); }
.hq-flash.err { background: #3a1512; border: 1px solid #e57368; color: #ffb4ab; }

/* --- Cards / stats ----------------------------------------------------------- */

.hq-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 20px 0; }

.hq-stat {
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    display: block;
}

.hq-stat:hover { border-color: var(--sp-lime); box-shadow: var(--sp-glow); }
.hq-stat strong { display: block; font-size: 30px; color: #fff; line-height: 1.2; }
.hq-stat span { color: var(--sp-muted); font-size: 13px; }
.hq-stat.alert {
    border-color: var(--sp-lime);
    box-shadow: var(--sp-glow);
}
.hq-stat.alert strong { color: var(--sp-lime); }

.hq-card {
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    padding: 22px 24px;
    margin-bottom: 24px;
}

/* --- Tables ------------------------------------------------------------------ */

.hq-table { width: 100%; border-collapse: collapse; background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: 10px; overflow: hidden; }

.hq-table th, .hq-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sp-line);
    vertical-align: top;
}

.hq-table th { background: var(--sp-panel); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--sp-muted); }
.hq-table tr:last-child td { border-bottom: none; }
.hq-table td small { color: var(--sp-muted); display: block; }
.hq-table a { color: var(--sp-lime); }

/* --- Badges ------------------------------------------------------------------- */

.hq-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.hq-badge.pending  { background: #3a2e10; color: #f0c14a; }
.hq-badge.approved { background: var(--sp-lime-dim); color: var(--sp-lime); }
.hq-badge.rejected,
.hq-badge.hidden,
.hq-badge.cancelled,
.hq-badge.dismissed { background: #3a1512; color: #ffb4ab; }
.hq-badge.paid,
.hq-badge.live,
.hq-badge.active,
.hq-badge.done { background: #111; color: var(--sp-lime); border: 1px solid var(--sp-lime); }
.hq-badge.free,
.hq-badge.sub,
.hq-badge.paused,
.hq-badge.open { background: #2a2a2a; color: #ccc; }

/* --- Forms ---------------------------------------------------------------------- */

.hq-main label { display: block; font-size: 13px; font-weight: 600; color: #ccc; margin-bottom: 4px; }

/*
 * Styled by exclusion rather than by listing every type.
 *
 * The old list named seven types, so a tel field rendered as a raw browser box in the
 * middle of a styled form — and the next new type would have done the same. Naming the
 * handful that must NOT get the treatment is the shorter list and does not go stale.
 */
.hq-main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]),
.hq-main select,
.hq-main textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sp-line);
    border-radius: 5px;
    font: inherit;
    background: #111;
    color: var(--sp-text);
}

/* Date and time pickers render their own icon, invisible on a dark field without this. */
.hq-main input[type="date"]::-webkit-calendar-picker-indicator,
.hq-main input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(.8);
    cursor: pointer;
}

.hq-main input:focus, .hq-main select:focus, .hq-main textarea:focus {
    outline: 2px solid var(--sp-lime);
    outline-offset: 0;
    border-color: var(--sp-lime);
}

.hq-main input[type="checkbox"], .hq-main input[type="radio"] { width: auto; accent-color: var(--sp-lime); }

/* File inputs: the native control cannot be restyled, so style its button. */
.hq-main input[type="file"] {
    width: 100%;
    font: inherit;
    color: var(--sp-muted);
}

.hq-main input[type="file"]::file-selector-button {
    font: inherit;
    padding: 8px 14px;
    margin-right: 12px;
    border: 1px solid var(--sp-line);
    border-radius: 5px;
    background: var(--sp-ink);
    color: var(--sp-text);
    cursor: pointer;
}

.hq-main input[type="file"]::file-selector-button:hover {
    border-color: var(--sp-lime);
    color: #fff;
}

.hq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; }
.hq-grid .wide { grid-column: 1 / -1; }
.hq-field { margin-bottom: 4px; }

.hq-switch-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 16px;
}

.hq-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
}

.hq-switch input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.hq-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.hq-days label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    padding: 12px 14px;
    font-weight: 600;
    cursor: pointer;
}
.hq-days input:checked + span { color: var(--sp-lime); }

/* --- Buttons ---------------------------------------------------------------------- */

.hq-btn {
    display: inline-block;
    background: #222;
    color: #fff;
    border: 1px solid var(--sp-line);
    border-radius: 5px;
    padding: 9px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.hq-btn:hover { border-color: var(--sp-lime); color: var(--sp-lime); }

.hq-btn.lime {
    background: var(--sp-lime);
    color: #111;
    border-color: var(--sp-lime);
    box-shadow: var(--sp-glow);
}
.hq-btn.lime:hover { background: #9aff1a; color: #111; }

.hq-btn.small { padding: 4px 12px; font-size: 13px; font-weight: 500; }
.hq-btn.ghost { background: none; }
.hq-btn.danger { background: none; border-color: #7a2018; color: #ffb4ab; }
.hq-btn.danger:hover { background: #3a1512; }

.hq-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hq-actions form { margin: 0; }

/* --- Filter bar -------------------------------------------------------------------- */

.hq-pagehead { margin-bottom: 8px; }
.hq-pagehead-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.hq-pagehead-title h1 { margin: 0; }

.hq-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sp-lime);
    color: #111;
    box-shadow: var(--sp-glow);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
}
.hq-add:hover { background: #9aff1a; color: #111; }

.hq-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hq-filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.hq-filters .hq-field { margin: 0; min-width: 170px; }
.hq-filters .hq-field-grow { flex: 1; min-width: 220px; }

.hq-searchbar-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    max-width: 920px;
}
.hq-searchbar {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    background: #111;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    overflow: hidden;
}
.hq-searchbar:focus-within {
    border-color: var(--sp-lime);
    box-shadow: var(--sp-glow);
}
.hq-main .hq-searchbar select,
.hq-main .hq-searchbar input[type="search"] {
    width: auto;
    height: 48px;
    margin: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sp-text);
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}
.hq-main .hq-searchbar select {
    flex: 0 0 190px;
    max-width: 42%;
    padding-right: 40px;
    border-right: 1px solid var(--sp-line);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2384f000' d='M1.2 0 6 5.2 10.8 0 12 1.2 6 8 0 1.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}
.hq-main .hq-searchbar input[type="search"] {
    flex: 1 1 180px;
    min-width: 0;
}
.hq-main .hq-searchbar input[type="search"]::-webkit-search-decoration,
.hq-main .hq-searchbar input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.hq-main .hq-searchbar select:focus,
.hq-main .hq-searchbar input[type="search"]:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}
.hq-searchbar button[type="submit"] {
    height: 48px;
    padding: 0 28px;
    border: 0;
    background: var(--sp-lime);
    color: #111;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-left: auto;
}
.hq-searchbar button[type="submit"]:hover { background: #9aff1a; }
.hq-searchbar-clear {
    flex-shrink: 0;
    color: var(--sp-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.hq-searchbar-clear:hover { color: #fff; }

.hq-copyrow { display: flex; gap: 8px; align-items: center; margin: 6px 0 8px; }
.hq-copyrow input { flex: 1; min-width: 0; font-size: 13px; }

/* --- Modal (native <dialog>, no Bootstrap JS on the portal) -------------------- */

.hq-modal {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 0 22px 22px;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    background: var(--sp-card);
    color: var(--sp-text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
}
.hq-modal::backdrop { background: rgba(0, 0, 0, .72); }
.hq-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    background: var(--sp-card);
    padding: 18px 0 10px;
}
.hq-modal-head h2 { margin: 0; font-size: 20px; }
.hq-modal h3 { margin: 0 0 6px; font-size: 15px; }
.hq-modal-close {
    background: none;
    border: 0;
    color: var(--sp-muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.hq-modal-close:hover { color: #fff; }
.hq-modal-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.hq-modal-rule { border: 0; border-top: 1px solid var(--sp-line); margin: 18px 0 14px; }
.hq-modal select[size] { height: 180px; }

.hq-tabs { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; }

.hq-tabs a {
    padding: 7px 16px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--sp-muted);
    border: 1px solid var(--sp-line);
}

.hq-tabs a:hover { color: #fff; border-color: #555; }
.hq-tabs a.on { background: var(--sp-lime); color: #111; font-weight: 600; border-color: var(--sp-lime); box-shadow: var(--sp-glow); }

/* --- Login -------------------------------------------------------------------------- */

body.hq-login {
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at top, rgba(132, 240, 0, .12), transparent 55%),
        var(--sp-black);
}

/*
 * Centre the sign-in card.
 *
 * The rule above centres .hq-frame as a flex item, but the frame is flex:1 and fills the
 * width, so it never moved anything — and .hq-main is a left-aligned block with a
 * max-width, which is what left the card pinned to the corner. Centring has to happen on
 * .hq-main, the box's actual parent.
 *
 * Column direction so a flash message stacks above the card rather than beside it.
 * padding rather than margin keeps the card off the edge on a short window, where
 * centring would otherwise clip the top out of reach.
 */
body.hq-login .hq-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    padding: 24px;
}

.hq-login-box {
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    padding: 36px;
    width: 380px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}

.hq-login-box img { height: 48px; margin-bottom: 18px; }
.hq-login-box h1 { font-size: 20px; margin: 0 0 18px; color: #fff; }
.hq-login-box .hq-btn { width: 100%; margin-top: 14px; }
.hq-login-note { font-size: 13px; color: var(--sp-muted); margin-top: 16px; }
.hq-login-box label { color: #ccc; }
.hq-login-box input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sp-line);
    border-radius: 5px;
    font: inherit;
    background: #111;
    color: var(--sp-text);
}

.hq-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--sp-lime);
    vertical-align: middle;
    margin-right: 8px;
}

/* --- Small screens -------------------------------------------------------------------- */

@media (max-width: 900px) {
    body.hq { flex-direction: column; }
    .hq-sidebar {
        width: 100%;
        height: auto;
        position: static;
        display: none;
    }
    body.hq-nav-open .hq-sidebar { display: flex; height: auto; }
    .hq-sidebar nav { display: flex; flex-wrap: wrap; padding: 0; }
    .hq-sidebar nav a { border-left: none; border-bottom: 3px solid transparent; }
    .hq-sidebar nav a.on { border-bottom-color: var(--sp-lime); }
    .hq-menu-toggle { display: inline-block; }
    .hq-main { padding: 20px; }
    .hq-table { display: block; overflow-x: auto; }
    .hq-top { padding: 12px 16px; }
    .hq-searchbar-wrap { max-width: none; }
    .hq-main .hq-searchbar select { flex-basis: 140px; max-width: 38%; padding-left: 16px; }
}

/* --- Scheduling board (build plan §7.6) ------------------------------------------------ */

.sp-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    margin-bottom: 16px;
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 10px;
}
.sp-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 56px;
    opacity: .35;
    filter: grayscale(1);
    cursor: default;
    transition: opacity .15s, filter .15s;
}
.sp-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sp-line);
}
.sp-avatar span { font-size: 11px; color: var(--sp-muted); text-align: center; }
.sp-avatar.is-on {
    opacity: 1;
    filter: none;
    cursor: grab;
}
.sp-avatar.is-on img { border-color: var(--sp-lime); box-shadow: var(--sp-glow); }

.sp-crew-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sp-crew-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    color: var(--sp-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.sp-crew-tab::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--crew-colour, var(--sp-lime));
    flex-shrink: 0;
}
.sp-crew-tab.is-active {
    background: var(--crew-colour, var(--sp-lime));
    border-color: var(--crew-colour, var(--sp-lime));
    color: #08110a;
}
.sp-crew-tab.is-active::before { background: #08110a; }

.sp-nav { display: flex; gap: 10px; margin-bottom: 16px; }

.sp-board {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 24px;
}
.sp-day {
    flex: 0 0 220px;
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    overflow: hidden;
}
.sp-day.is-monday { background: #1c1a12; }
.sp-day-head {
    padding: 8px 10px;
    font-weight: 600;
    font-size: 13px;
    background: var(--sp-panel);
    border-bottom: 1px solid var(--sp-line);
}
.sp-day-note { display: block; font-weight: 400; font-size: 11px; color: #f0c14a; }
.sp-lane {
    border-top: 3px solid var(--sp-line);
    padding: 8px;
    min-height: 60px;
}
.sp-lane + .sp-lane { border-top-width: 3px; }
.sp-lane-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--sp-muted); margin-bottom: 6px; }
.sp-lane.is-dropping { background: var(--sp-lime-dim); }

.sp-job-block {
    background: #111;
    border: 1px solid var(--sp-line);
    border-left: 4px solid var(--sp-lime);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    font-size: 12px;
    cursor: grab;
}
.sp-job-block.is-pending { opacity: .5; }
.sp-job-block.is-dragging { opacity: .4; }
.sp-job-block.is-selected { box-shadow: 0 0 0 2px var(--sp-lime); }
.sp-job-head { display: flex; justify-content: space-between; gap: 6px; }
.sp-job-head strong { font-size: 12.5px; }
.sp-job-mins { color: var(--sp-lime); font-weight: 600; white-space: nowrap; }
.sp-job-addr, .sp-job-meta { margin: 2px 0 0; color: var(--sp-muted); font-size: 11px; }
.sp-job-flag { color: #f0c14a; }

.sp-job-avatars { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sp-chip { position: relative; display: inline-block; }
.sp-chip img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--sp-lime);
}
.sp-chip-empty {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed var(--sp-line);
}
.sp-chip form.sp-crew-remove {
    position: absolute;
    top: -6px;
    right: -6px;
}
.sp-chip form.sp-crew-remove button {
    width: 16px;
    height: 16px;
    line-height: 14px;
    padding: 0;
    border-radius: 50%;
    background: #3a1512;
    color: #ffb4ab;
    border: 1px solid var(--sp-line);
    font-size: 11px;
    cursor: pointer;
}

.sp-job-manage { margin-top: 6px; }
.sp-job-manage summary {
    font-size: 11px;
    color: var(--sp-muted);
    cursor: pointer;
}
.sp-job-manage form { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.sp-job-manage select, .sp-job-manage input[type="date"], .sp-job-manage input[type="time"] {
    background: #111;
    color: var(--sp-text);
    border: 1px solid var(--sp-line);
    border-radius: 4px;
    font-size: 11px;
    padding: 3px 4px;
}
.sp-job-manage .sp-unassign { border-color: #7a2018; color: #ffb4ab; }

.sp-lunch {
    text-align: center;
    font-size: 10px;
    color: var(--sp-muted);
    border: 1px dashed var(--sp-line);
    border-radius: 4px;
    padding: 3px;
    margin-bottom: 6px;
}

.sp-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    min-height: 60px;
}
.sp-tray.is-dropping { background: var(--sp-lime-dim); }
.sp-tray-empty { color: var(--sp-muted); margin: 0; }
.sp-tray-card {
    width: 220px;
    background: #111;
    border: 1px solid var(--sp-line);
    border-left: 4px solid var(--sp-muted);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    cursor: grab;
}
.sp-tray-card.is-pending { opacity: .5; }
.sp-tray-card.is-dragging { opacity: .4; }

/* --- Scheduling board: days as columns, ruled in clock time (rebuilt 2026-08-18) -------- */

.sp-board {
    display: flex;
    align-items: flex-start;
    overflow: auto;              /* days scroll sideways, the working day scrolls down */
    max-height: 68vh;
    background: var(--sp-card);
    border: 1px solid var(--sp-line);
    border-radius: 10px;
    margin-bottom: 24px;
    overscroll-behavior: contain;
}

/* Both heads must agree exactly or the columns start half a tick out of true. */
.sp-col-head {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 42px;
    box-sizing: border-box;
    padding: 6px 10px;
    background: var(--sp-panel);
    border-bottom: 1px solid var(--sp-line);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.sp-col-head.is-today { box-shadow: inset 0 -2px 0 var(--sp-lime); }
.sp-col-day { display: inline-block; }
.sp-col-count {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: var(--sp-muted);
    font-size: 10px;
    font-weight: 600;
}
.sp-col-head .sp-day-note { display: block; margin-top: 1px; font-size: 9.5px; }

.sp-axis-col {
    position: sticky;
    left: 0;
    z-index: 30;                 /* above the day columns sliding under it */
    flex: 0 0 52px;
    background: var(--sp-panel);
    border-right: 1px solid var(--sp-line);
}
.sp-axis-body { position: relative; }
.sp-axis-label {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--sp-muted);
}

.sp-day-col {
    flex: 0 0 200px;
    border-right: 1px solid var(--sp-line);
    background: var(--sp-card);
}
.sp-day-col.is-monday { background: #1c1a12; }
.sp-day-col.is-monday .sp-col-head { background: #241f14; }

.sp-day-body { position: relative; }
.sp-tick {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--sp-line);
    opacity: .3;
    pointer-events: none;
}
.sp-tick.is-hour { opacity: .65; }

.sp-day-body .sp-lane {
    position: absolute;
    inset: 0;
    padding: 0;
    border-top: none;
    min-height: 0;
}
.sp-day-body .sp-lane.is-dropping { background: var(--sp-lime-dim); }

.sp-now {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px solid #e5484d;
    z-index: 25;
    pointer-events: none;
}
.sp-now::before {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e5484d;
}

.sp-day-body .sp-lunch {
    position: absolute;
    left: 3px;
    right: 3px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    z-index: 5;
}

.sp-day-body .sp-job-block {
    position: absolute;
    left: 3px;
    right: 3px;
    margin: 0;
    padding: 3px 6px;
    overflow: hidden;
    z-index: 10;
    line-height: 1.25;
}
.sp-day-body .sp-job-block.is-dragging { opacity: .35; }
.sp-day-body .sp-job-head { gap: 4px; }
.sp-day-body .sp-job-head strong {
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-day-body .sp-job-mins { font-size: 10px; }
.sp-day-body .sp-job-flag { display: block; font-size: 9.5px; }

/* The dragged copy, flying over everything — appended to <body> so the board's own
   overflow cannot clip it on its way to another column or down to the tray. */
.sp-drag-helper {
    z-index: 500;
    opacity: .95;
    box-shadow: 0 6px 20px rgba(0,0,0,.6);
    pointer-events: none;
}
.sp-drag-helper .sp-job-manage { display: none; }

.sp-job-manage summary {
    list-style: none;
    cursor: pointer;
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 13px;
    line-height: 1;
    color: var(--sp-muted);
    padding: 2px 4px;
    border-radius: 4px;
}
.sp-job-manage summary::-webkit-details-marker { display: none; }
.sp-job-manage summary:hover { color: var(--sp-text); background: rgba(255,255,255,.08); }

/* Sized to sit inside one day column: the board is an overflow:auto scroller, so a panel
   wider than a column would be clipped rather than overhang its neighbour. */
.sp-job-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 182px;
    z-index: 60;
    background: #111;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    padding: 9px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.sp-job-panel .sp-job-addr,
.sp-job-panel .sp-job-meta { white-space: normal; }
.sp-job-panel form { margin-top: 5px; }
.sp-job-panel select,
.sp-job-panel input[type="date"],
.sp-job-panel input[type="time"] { flex: 1 1 100%; min-width: 0; }

/* An open block must rise above its neighbours, or the panel slides under the next job. */
.sp-day-body .sp-job-block:has(details[open]) { z-index: 70; overflow: visible; }

/* A dragged block's live time readout, following the cursor. */
.sp-drag-time {
    position: fixed;
    z-index: 200;
    background: var(--sp-lime);
    color: #08110a;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    pointer-events: none;
    white-space: nowrap;
}

/* --- Worker's own schedule (read-only, build plan §3) ----------------------------------- */

.sp-worker-days {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}
.sp-worker-days .sp-day { flex: 0 0 240px; }
.sp-worker-days .sp-job-block { cursor: default; }
.sp-worker-days .sp-job-block.is-complete { border-color: rgba(132,240,0,.4); }
.sp-job-actions { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-job-flag.is-done { color: var(--sp-lime); }

/* --- The job block's face (reworked 2026-08-19) -----------------------------------------

   The board is a diary, so a block's height is its duration and cannot be negotiated for
   the sake of fitting more text in. What CAN change is how much text is attempted: the
   partial picks is-compact / is-mid / is-full from the pixel height, and these rules make
   each tier legible rather than clipped. Everything hidden here is still one click away in
   the "⋯" panel and the job card.                                                        */

.sp-job-addr-line,
.sp-job-meta-line {
    margin: 1px 0 0;
    color: var(--sp-muted);
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The shortest blocks have to earn every pixel: at 1.8px/min a 20-minute job is 36px, and
   the head plus a second row has to fit inside that or the row is clipped by the block's
   own overflow:hidden — which is what made the job-card link unclickable on exactly the
   jobs people most often had a quick question about. Tightened until both fit. */
.sp-day-body .sp-job-block.is-compact { padding: 2px 5px; line-height: 1.15; }
.sp-day-body .sp-job-block.is-compact .sp-job-head strong { font-size: 11px; }
.sp-day-body .sp-job-block.is-compact .sp-job-avatars { margin-top: 1px; gap: 2px; }
.sp-day-body .sp-job-block.is-compact .sp-chip img { width: 14px; height: 14px; }
.sp-day-body .sp-job-block.is-compact .sp-chip-empty { display: none; }
.sp-day-body .sp-job-block.is-compact .sp-job-ticks { font-size: 9px; padding: 0 5px; }
.sp-day-body .sp-job-block.is-mid .sp-chip img { width: 18px; height: 18px; }

/* A signed-off visit reads as settled rather than pending: lime edge, nothing shouting. */
.sp-job-block.is-complete { border-color: rgba(132,240,0,.45); background: rgba(132,240,0,.06); }

/* The job card link AND how much of it is ticked off, as one pill on the right of the
   avatar row. Sitting beside the avatars rather than on a line of its own is what makes it
   reachable on a 20-minute block, which has no line of its own to give it. */
.sp-job-ticks {
    margin-left: auto;
    align-self: center;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--sp-lime);
    background: rgba(132,240,0,.12);
    border: 1px solid rgba(132,240,0,.35);
    border-radius: 999px;
    padding: 1px 7px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.sp-job-ticks:hover { background: rgba(132,240,0,.25); }
.sp-job-ticks.is-all { color: #08110a; background: var(--sp-lime); border-color: var(--sp-lime); }

/* --- The job card modal (2026-08-19) ----------------------------------------------------

   A native <dialog>, styled in the portal's own palette. Bootstrap is vendored in this
   repo but belongs to the SP2024 marketing theme — linking it here to get one panel would
   restyle every screen in the dark portal.                                               */

.sp-modal {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow: auto;
    background: var(--sp-panel, #141414);
    color: var(--sp-text);
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,.7);
}
.sp-modal::backdrop { background: rgba(0,0,0,.66); }
.sp-modal-title { margin: 0 0 14px; font-size: 15px; color: var(--sp-muted); font-weight: 600; }
.sp-modal-close {
    float: right;
    background: none;
    border: 0;
    color: var(--sp-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.sp-modal-close:hover { color: var(--sp-text); }

.sp-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.sp-card-head h3 { margin: 0; font-size: 18px; }
.sp-card-where { margin: 3px 0 0; color: var(--sp-muted); font-size: 13px; }
.sp-card-when { margin: 0; text-align: right; font-size: 13px; white-space: nowrap; }
.sp-card-when span { display: block; color: var(--sp-muted); font-size: 12px; }
.sp-card-meta { margin: 10px 0 0; color: var(--sp-muted); font-size: 12.5px; }

.sp-card-crew { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.sp-card-crew .sp-chip img { width: 26px; height: 26px; }
.sp-card-crew-names { color: var(--sp-muted); font-size: 12px; }

.sp-card-access,
.sp-card-notes { margin: 10px 0 0; font-size: 12.5px; color: var(--sp-muted); }

.sp-card-head h3 a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.35); }
.sp-card-head h3 a:hover { color: var(--sp-lime); border-bottom-color: var(--sp-lime); }

/* What the visit is worth and whether it has been paid for — managers and up only. */
.sp-card-money { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.sp-card-money strong { font-size: 16px; }
.sp-card-paid { color: var(--sp-muted); font-size: 12px; }

/* Who ticked this item, and when. The line that settles a dispute. */
.sp-task-by { display: block; color: var(--sp-lime); font-size: 11px; opacity: .8; }

/* The customer page's three job-card tables. */
.sp-job-history td { vertical-align: middle; }
.sp-job-history td small { display: block; color: var(--sp-muted); }
.sp-job-history .sp-job-ticks { position: static; display: inline-block; }

/* The line that explains why the checkboxes are or are not live — the single most useful
   sentence on the card when somebody taps a tick and nothing happens. */
.sp-card-state {
    margin: 12px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    background: rgba(255,255,255,.05);
    color: var(--sp-muted);
}
.sp-card-state.is-waiting { background: rgba(240,193,74,.10); color: #f0c14a; }
.sp-card-state.is-done { background: rgba(132,240,0,.10); color: var(--sp-lime); }

.sp-card-progress { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 12px; color: var(--sp-muted); }
.sp-card-bar { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.sp-card-bar span { display: block; height: 100%; background: var(--sp-lime); }

.sp-tasks { list-style: none; margin: 6px 0 0; padding: 0; }
.sp-task { border-top: 1px solid var(--sp-line); }
.sp-task.is-empty { padding: 14px 2px; color: var(--sp-muted); font-size: 12.5px; }
.sp-task-form { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 2px; }

/* Big enough to hit with a thumb, in gloves, in a garden. */
.sp-task-tick {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--sp-line);
    background: rgba(255,255,255,.04);
    color: #08110a;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.sp-task-tick:disabled { opacity: .4; cursor: not-allowed; }
.sp-task.is-done .sp-task-tick { background: var(--sp-lime); border-color: var(--sp-lime); }
.sp-task-body { flex: 1; min-width: 0; font-size: 13px; }
.sp-task-body strong { display: block; }
.sp-task.is-done .sp-task-body strong { text-decoration: line-through; color: var(--sp-muted); }
.sp-task-detail { display: block; color: var(--sp-text); font-size: 12px; }
.sp-task-note { display: block; color: var(--sp-muted); font-size: 11.5px; }
.sp-task-mins { flex: 0 0 auto; color: var(--sp-muted); font-size: 11.5px; padding-top: 2px; }

.sp-card-foot { margin-top: 16px; }
.sp-card-close label { display: block; font-size: 12px; color: var(--sp-muted); margin-bottom: 4px; }
.sp-card-close textarea {
    width: 100%;
    background: #0d0d0d;
    color: var(--sp-text);
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    padding: 8px;
    font: inherit;
    font-size: 13px;
    margin-bottom: 10px;
}
/* Its own line rather than trailing the button: on a phone the button fills the width, so
   an inline note breaks across it as "2" beside the button and "still unticked" beneath. */
.sp-card-warn { display: block; margin: 8px 0 0; color: #f0c14a; font-size: 12px; }
.sp-card-page .sp-card { max-width: 620px; }

/* --- Start time and real duration (2026-08-20) ------------------------------------------ */

/* Both ends of the visit, side by side on the sign-off form. Asked here rather than by an
   on-site button at the gate, because a button pressed on the doorstep gets pressed on the
   way out. Start defaults to the booked time, finish to now. */
.sp-card-times {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.sp-card-time { flex: 1 1 130px; min-width: 120px; }
.sp-card-time label { display: block; font-size: 13px; margin-bottom: 4px; }
.sp-card-times-hint { margin: 0 0 12px; }
.sp-card-time input[type="time"] {
    width: 100%;
    background: #0d0d0d;
    color: var(--sp-text);
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 15px;          /* 16px or above stops iOS zooming the page on focus */
    min-height: 44px;         /* a thumb target, not a mouse one */
    color-scheme: dark;       /* so the native clock pops up dark rather than white */
}
.sp-card-hint { display: block; color: var(--sp-muted); font-size: 11.5px; }

/* What the two boxes add up to, said out loud before the button is pressed — "4h 25m"
   under a 20-minute hedge trim is much harder to press past than two plausible times. */
.sp-card-span { color: var(--sp-lime); }
.sp-card-span.is-odd { color: #f0c14a; }
.sp-card-span.is-bad { color: #ffb4ab; }

/* Estimated against actual, managers only — the reason the start time is collected. */
.sp-card-timing {
    margin: 0 0 12px;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--sp-line);
    background: rgba(255, 255, 255, .03);
}
.sp-card-timing.is-over  { border-color: #f0c14a; }
.sp-card-timing.is-under { border-color: var(--sp-lime); }

/* --- Date pickers that suit a phone (2026-08-20) ---------------------------------------- */

/* Native inputs kept on purpose — the OS picker beats any library on a phone. What these
   add is the size and contrast to be usable with a thumb in daylight. */
.hq-field input[type="date"],
.hq-field input[type="time"],
.sp-bday select {
    min-height: 44px;
    font-size: 15px;
    color-scheme: dark;
}

/* Day / Month / Year, because a calendar opens on today and a birthday is 40 years back. */
.sp-bday { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-bday select { flex: 1 1 90px; min-width: 84px; }

/* Two taps for the cases that are most of the traffic: a week off from Monday, and so on. */
.sp-daychips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.sp-daychips-label { color: var(--sp-muted); font-size: 12px; }
.sp-daychips .hq-btn { min-height: 40px; }

.sp-daycount {
    margin: 10px 0 0;
    color: var(--sp-lime);
    font-size: 13px;
    min-height: 18px;         /* reserved, so filling it in does not shift the button */
}

.hq-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hq-inline-ask {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.hq-inline-ask input[type="date"] {
    min-height: 40px;
    font-size: 14px;
    color-scheme: dark;
}

/* A holiday already behind us is still worth showing, just not worth reading first. */
.hq-table tr.is-past td { opacity: .55; }

/* --- Staff detail changes awaiting approval (§7.5, 2026-08-19) --------------------------- */

.sp-approvals td { vertical-align: middle; }
.sp-approve-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-approve-actions form { margin: 0; }

/* On the person's own form, beside the field they asked to change — so they can see the
   request is in hand without a second screen, and that the box still shows the old value. */
.sp-pending-note {
    margin: 5px 0 0;
    font-size: 11.5px;
    color: #f0c14a;
}

/* --- Holiday allowance (2026-08-20) ------------------------------------------------------ */

/* What is left of the year, first thing on the holidays page. A balance nobody can find is
   a balance nobody plans around — and the whole reason for showing it to crew members is
   that seasonal work rewards saving days for the winter. */
.sp-allowance-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.sp-allowance-big { font-size: 34px; line-height: 1; color: var(--sp-lime); }
.sp-allowance-head span { color: var(--sp-muted); font-size: 13px; }

.sp-allowance-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);   /* the remainder shows through as the track */
}
.sp-allowance-bar span { display: block; height: 100%; }
.sp-allowance-bar .is-taken   { background: var(--sp-lime); }
.sp-allowance-bar .is-booked  { background: rgba(132, 240, 0, .45); }
.sp-allowance-bar .is-pending { background: #f0c14a; }

.sp-allowance-key {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    color: var(--sp-muted);
}
.sp-allowance-key li { display: flex; align-items: center; gap: 6px; }
.sp-allowance-key span {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.sp-allowance-key .is-taken   { background: var(--sp-lime); }
.sp-allowance-key .is-booked  { background: rgba(132, 240, 0, .45); }
.sp-allowance-key .is-pending { background: #f0c14a; }
.sp-allowance-key .is-left    { background: rgba(255, 255, 255, .12); }

.sp-allowance-note { margin: 12px 0 0; font-size: 13px; color: var(--sp-muted); }
.sp-allowance-note.is-warn { color: #f0c14a; }

.sp-daycount.is-over { color: #f0c14a; }
.sp-over { color: #f0c14a; }

/* --- Resigning (2026-08-20) -------------------------------------------------------------- */

/* Outline, not filled. This is the one control in the office that must never be pressed by
   accident, and a solid red button reads as "press me" in a way an outline does not. */
.hq-btn.danger-outline {
    background: none;
    border: 1px solid #e57368;
    color: #ffb4ab;
    box-shadow: none;
}
.hq-btn.danger-outline:hover {
    background: #3a1512;
    border-color: #ffb4ab;
    box-shadow: none;
}

.sp-leave-head { color: #ffb4ab !important; }

.sp-resign-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.sp-resign-live h3 { margin: 0 0 10px; font-size: 16px; }
.sp-resign-live p  { margin: 0 0 10px; }
.sp-resign-live form { margin-top: 14px; }
.sp-resign-reason { font-size: 13px; color: var(--sp-muted); }

/* Amber while it waits on the person's own inbox — the state somebody pranked lands on,
   so it should look like something needing attention rather than like a done deal. */
.sp-resign-live.is-unconfirmed { border-color: #f0c14a; }
.sp-resign-live.is-confirmed   { border-color: #e57368; }
.sp-resign-live.is-accepted    { border-color: var(--sp-line); }

/* The resignation dialog reuses .sp-modal from the job card, so only the width differs. */
#sp-resign-modal { max-width: 520px; }
#sp-resign-modal textarea {
    width: 100%;
    background: #0d0d0d;
    color: var(--sp-text);
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    padding: 10px;
    font: inherit;
    font-size: 15px;
}

/* --- Selling an area (2026-08-20) -------------------------------------------------------- */

/* A licensee does not resign — they own the business. The terms of a sale are the thing
   worth reading here, so they get a list rather than a paragraph. */
.sp-exit-terms {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--sp-muted);
    font-size: 13.5px;
}
.sp-exit-terms li { margin-bottom: 8px; }
.sp-exit-terms strong { color: var(--sp-text); }

.sp-exit-figures {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    font-size: 13.5px;
}
.sp-exit-figures strong { color: var(--sp-lime); }

/* --- The Ideas pool (2026-08-20) ---------------------------------------------------------- */

/* Four states, four different jobs — a reading queue, a calendar to sanity-check, a
   reference, and a record of what was turned down. Tabs, not one long list. */
.sp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 22px; border-bottom: 1px solid var(--sp-line); }
.sp-tabs a {
    padding: 10px 16px;
    color: var(--sp-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    white-space: nowrap;
}
.sp-tabs a:hover { color: var(--sp-text); }
.sp-tabs a.on { color: var(--sp-lime); border-bottom-color: var(--sp-lime); font-weight: 600; }
.sp-tabs .hq-badge { margin-left: 6px; }

.sp-pool-item { padding: 18px 20px; }
.sp-pool-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.sp-pool-head h2 { margin: 0 0 4px; font-size: 17px; color: var(--sp-text); }
.sp-pool-head h2 a { color: inherit; text-decoration: none; }
.sp-pool-head h2 a:hover { color: var(--sp-lime); }
.sp-pool-head .hq-sub { margin: 0; font-size: 12.5px; }

.sp-pool-desc { margin: 10px 0 0; color: var(--sp-muted); font-size: 14px; }
.sp-pool-note { margin: 10px 0 0; font-size: 13px; color: #f0c14a; }

.sp-pool-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.sp-pool-when { display: flex; gap: 6px; align-items: center; }
.sp-pool-when input[type="datetime-local"] {
    background: #0d0d0d; color: var(--sp-text);
    border: 1px solid var(--sp-line); border-radius: 6px;
    padding: 7px 9px; font: inherit; font-size: 13px; color-scheme: dark;
}
.sp-pool-reason { flex: 1 1 220px; min-width: 180px; }

/* Shown exactly once — the plaintext is never stored, so there is no second chance. */
.sp-key {
    display: block;
    margin-top: 10px;
    padding: 10px 12px;
    background: #0d0d0d;
    border: 1px dashed var(--sp-lime);
    border-radius: 6px;
    font-size: 13px;
    word-break: break-all;
    user-select: all;   /* one click selects the whole key */
}

/* Monospace, because it is markup being read as markup. */
.sp-editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    width: 100%;
}

/* An HQ account in its OWN area gets a quiet line, not a warning — see layouts/admin.php. */
.hq-owner-note { margin: -6px 0 20px; font-size: 13px; }

/* --- The article editor (2026-08-20) ------------------------------------------------------ */

/* Hand-written rather than a library: licensees and managers are not going to write HTML,
   but Quill is ~200 KB for a toolbar of forty buttons where seven will do. */
.sp-rte {
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    overflow: hidden;
    background: #0d0d0d;
}
.sp-rte-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: var(--sp-panel);
    border-bottom: 1px solid var(--sp-line);
}
.sp-rte-bar button {
    background: #0d0d0d;
    color: var(--sp-text);
    border: 1px solid var(--sp-line);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    min-width: 34px;
}
.sp-rte-bar button:hover { border-color: var(--sp-lime); color: var(--sp-lime); }

/* Roughly the measure the article will actually be read at, so a paragraph that looks
   long here looks long on the site too. */
.sp-rte-area {
    padding: 18px 20px;
    min-height: 320px;
    max-height: 60vh;
    overflow-y: auto;
    font: 15px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--sp-text);
    outline: none;
}
.sp-rte-area:focus { box-shadow: inset 0 0 0 2px rgba(132, 240, 0, .35); }
.sp-rte-area h2 { font-size: 21px; margin: 1.4em 0 .4em; color: #fff; }
.sp-rte-area h3 { font-size: 17px; margin: 1.2em 0 .3em; color: #fff; }
.sp-rte-area p  { margin: 0 0 1em; }
.sp-rte-area ul, .sp-rte-area ol { margin: 0 0 1em; padding-left: 1.4em; }
.sp-rte-area blockquote {
    margin: 1.2em 0;
    padding-left: 16px;
    border-left: 3px solid var(--sp-lime);
    color: #fff;
}
.sp-rte-area a { color: var(--sp-lime); }

.sp-rte-count {
    display: block;
    padding: 7px 12px;
    background: var(--sp-panel);
    border-top: 1px solid var(--sp-line);
    font-size: 12px;
    color: var(--sp-muted);
}
/* 120 words is the floor Post::submit() enforces — said here rather than after a round
   trip that comes back "content_short". */
.sp-rte-count.is-short { color: #f0c14a; }

/* The textarea still posts; it is only hidden so nobody edits the same text twice. */
.sp-rte-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* --- Images and embeds inside the editor (2026-08-20) ------------------------------------- */

.sp-rte-area figure { margin: 1.4em 0; }
.sp-rte-area figure img { max-width: 100%; border-radius: 8px; }
.sp-rte-area figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--sp-muted);
    text-align: center;
}

/* An embed placeholder is empty by design — it becomes the real thing at display time —
   so the editor has to draw it as something, or the writer sees a blank gap and deletes it. */
.sp-rte-area .sp-embed {
    display: block;
    padding: 22px;
    margin: 1.4em 0;
    border: 1px dashed var(--sp-lime);
    border-radius: 8px;
    background: var(--sp-lime-dim);
    text-align: center;
    color: var(--sp-lime);
    font-size: 13px;
}
.sp-rte-area .sp-embed::before {
    content: "▶ " attr(data-embed) " embed — shown on the published page";
}

/* Drag a photo anywhere onto the article. */
.sp-rte-area.is-dropping {
    box-shadow: inset 0 0 0 3px var(--sp-lime);
    background: var(--sp-lime-dim);
}

/* --- Candidate survey card (2026-08-25) --------------------------------------
   The one screen that shows a number and its working. The bars exist because a
   licensee decision is not a single score: 70% overall with 90% on wanting to
   run their own thing and 70% with 30% on it are different people, and a row of
   numbers hides that where five bars do not. */

.hq-score {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.hq-score b { font-size: 46px; line-height: 1; color: var(--sp-lime); }
.hq-score span { font-size: 18px; color: var(--sp-text); }
.hq-score small { color: var(--sp-muted); }

.hq-bars { margin: 18px 0 0; }

.hq-bar { display: grid; grid-template-columns: 180px 1fr 48px; gap: 12px; align-items: center; margin-bottom: 9px; }
.hq-bar span { color: var(--sp-muted); font-size: 13px; }
.hq-bar b { font-size: 13px; text-align: right; color: var(--sp-text); }

.hq-bar i {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--sp-line);
    overflow: hidden;
}

.hq-bar i em { display: block; height: 100%; background: var(--sp-lime); }

/* The trait a licence actually turns on. */
.hq-bar.key span { color: var(--sp-text); font-weight: 600; }

/* One question and what they picked. The chosen answer is marked; the rest are
   there because "what else was on offer" is half of what an answer means. */
.hq-answers { margin: 0; padding: 0; list-style: none; }

.hq-answers > li { padding: 16px 0; border-bottom: 1px solid var(--sp-line); }
.hq-answers > li:last-child { border-bottom: 0; }
.hq-answers h3 { margin: 0 0 10px; font-size: 15px; color: var(--sp-text); }
.hq-answers ul { margin: 0; padding: 0; list-style: none; }

.hq-answers ul li {
    padding: 4px 10px;
    border-left: 3px solid transparent;
    color: var(--sp-muted);
    font-size: 14px;
}

.hq-answers ul li.picked {
    border-left-color: var(--sp-lime);
    background: var(--sp-lime-dim);
    color: var(--sp-text);
}

.hq-answers ul li b { color: var(--sp-lime); font-weight: 600; margin-left: 6px; }
.hq-answers .trait { float: right; font-size: 12px; color: var(--sp-muted); font-weight: 400; }

/* --- Recruitment stages (2026-08-25) -----------------------------------------
   The stage was a lime-outlined pill directly above two buttons, so it read as a
   third button and nothing said which way "Back to candidate" went. The state is
   now plainly a state — no border, no pill — and the actions sit apart from it
   with room to breathe. */

.hq-stage-key { font-size: 13px; line-height: 21px; }
.hq-stage-key strong { color: var(--sp-text); }

/* Fixed rather than min-width: the explanation sentence would otherwise stretch
   the column and squeeze Notes down to two characters a line. */
.hq-stage { width: 200px; }

.hq-stage-now {
    margin: 0 0 2px;
    font-weight: 600;
    font-size: 14px;
    color: var(--sp-muted);
}

.hq-stage-now:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--sp-line);
}

/* Prospective licensee: the one worth spotting from across the room. */
.hq-stage-now.on { color: var(--sp-lime); }
.hq-stage-now.on:before { background: var(--sp-lime); box-shadow: var(--sp-glow); }

.hq-stage-what {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 18px;
    color: var(--sp-muted);
}

.hq-stage-do { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hq-stage-do form { margin: 0; }
.hq-stage-do .hq-btn { white-space: nowrap; }

/* Outreach notes need room to be readable; without a floor the column collapses
   to a couple of characters a line whenever the table is tight. */
.hq-table textarea { min-width: 190px; }