/* =========================================================================
   GUVNOR DS v4 — APP LAYER (T-253 re-skin)
   The personalised product surfaces (/your-rules/ family, /check/, /calendar/,
   /watchlist/, /my-business/, /map/) on the DS v4 "Two Voices" vocabulary.
   Replaces guvnor-core.css + the five legacy per-page sheets in one pass.

   Rules of the layer:
   · DS tokens only (foundations.css + core.css) — no bespoke palettes; every
     colour that isn't a semantic token is a color-mix off one, so dark mode
     mostly follows for free.
   · Chips ride the .sev pill grammar (legislation.css); cards ride the
     .snippet--card grammar; buttons ride the .btn pill grammar.
   · Loads AFTER ds4/core.css (linked from guvnor/_base.html), so ties break
     our way inside the app scope. NO bare `.guvnor h3` / `.guvnor p` generics
     — they were the specificity trap that re-inked DS components embedded in
     the app scope (brand-block, snippet cards); headings and prose are styled
     through their component classes instead.
   ========================================================================= */

/* ---- app shell ------------------------------------------------------------ */
.guvnor {
    background: var(--color-bg-page);
    color: var(--color-text-primary);
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}
@media (min-width: 768px) {
    .guvnor { padding: 40px 32px 80px; }
}
/* one vertical rhythm for the page stack (replaces the old Tailwind gap div) */
.guvnor-stack { display: flex; flex-direction: column; gap: calc(40px * var(--rk, 1)); }

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

/* ---- type ------------------------------------------------------------------ */
.guvnor h1 {
    font-family: var(--font-heading);
    font-size: 34px; line-height: 38px; letter-spacing: -0.02em;
    font-weight: 650; color: var(--color-text-primary);
    margin: 0 0 8px; max-width: 24ch; text-wrap: balance;
}
.guvnor h2 {
    font-family: var(--font-heading);
    font-size: 24px; line-height: 28px; letter-spacing: -0.015em;
    font-weight: 600; color: var(--color-text-primary);
    margin: 0 0 12px;
}
.guvnor__subtitle {
    font-size: 17px; line-height: 28px; color: var(--color-text-secondary);
    margin: 0 0 24px; max-width: var(--measure); text-wrap: pretty;
}
.guvnor-eyebrow {
    display: inline-block;
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase;
    color: var(--color-accent-text); margin: 0 0 12px;
}
.guvnor-eyebrow--name { letter-spacing: 0; text-transform: none; font-size: 13px; line-height: 20px; }
.guvnor-updated { font-size: 13px; line-height: 20px; color: var(--color-text-muted); margin: 8px 0 0; }
.guvnor-section { margin-top: 8px; }
.guvnor-section > p { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 0 0 16px; max-width: var(--measure); }

/* ---- profile bar (olive brand strip above the app) ------------------------- */
.guvnor-profile-bar {
    background: var(--color-bg-inverse);
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 20px;
    font-size: 14px; line-height: 20px;
}
@media (min-width: 768px) { .guvnor-profile-bar { padding: 8px 32px; } }
.guvnor-profile-bar__inner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
    max-width: 960px; margin: 0 auto;
}
.guvnor-profile-bar__label {
    font-size: 11px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase;
    color: var(--color-gold, #e3b563);
}
.guvnor-profile-bar__value { font-weight: 500; color: #fff; }
.guvnor-profile-bar__value--empty { color: rgba(255, 255, 255, 0.6); font-style: italic; font-weight: 400; }
.guvnor-profile-bar__sep { color: rgba(255, 255, 255, 0.4); }
.guvnor-profile-bar__edit {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.14); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 2px 14px; border-radius: var(--border-radius-pill);
    font-size: 13px; line-height: 20px; font-weight: 600;
    text-decoration: none; transition: background var(--transition-base);
}
.guvnor-profile-bar__edit:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* ---- sub-nav (the /your-rules family) -------------------------------------- */
.guvnor-subnav {
    display: flex; flex-wrap: wrap; gap: 4px 24px;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 8px;
}
.guvnor-subnav__link {
    display: inline-block; padding: 8px 0; margin-bottom: -1px;
    font-size: 15px; line-height: 20px; font-weight: 500;
    color: var(--color-text-secondary); text-decoration: none;
    border-bottom: 2px solid transparent;
}
.guvnor-subnav__link:hover { color: var(--color-text-primary); }
.guvnor-subnav__link--active {
    color: var(--color-text-primary); font-weight: 600;
    border-bottom-color: var(--color-accent);
}

/* ---- chips — the .sev pill grammar, app hues ------------------------------
   One chip shape estate-wide: pill, 12/16, 650. Hues are color-mix tints off
   fixed semantic hues (as legislation.css does), with .dark lifts below. */
.guvnor-badge {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--border-radius-pill);
    padding: 2px 10px; font-size: 12px; line-height: 16px; font-weight: 650;
    white-space: nowrap;
    background: color-mix(in srgb, #6b7c93 12%, transparent); color: #4d5d73;
}
.guvnor-badge--regulator { background: color-mix(in srgb, #2d4a7a 10%, transparent); color: #2d4a7a; }
.guvnor-badge--legislation { background: color-mix(in srgb, #4c2c92 9%, transparent); color: #4c2c92; }
.guvnor-badge--penalty { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #8a520a; }
.guvnor-badge--severe,
.guvnor-badge--triggered,
.guvnor-badge--overdue { background: color-mix(in srgb, #d4351c 10%, transparent); color: #b3261a; }
.guvnor-badge--upcoming { background: color-mix(in srgb, #c25614 12%, transparent); color: #a8460f; }
.guvnor-badge--watch,
.guvnor-badge--imminent { background: color-mix(in srgb, #c25614 12%, transparent); color: #a8460f; }
.guvnor-badge--ignore { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.guvnor-badge--source { background: color-mix(in srgb, #6b7c93 12%, transparent); color: #4d5d73; }
.guvnor-badge--estimated { background: color-mix(in srgb, #2563eb 10%, transparent); color: #1e3a8a; font-style: italic; }
/* confidence tiers (§4.4): central = accent green, cross-cutting = steel blue,
   reached = amber "worth checking" hedge */
.guvnor-badge--confidence-central { background: var(--color-accent-subtle); color: var(--color-accent-text); }
.guvnor-badge--confidence-cross_cutting { background: color-mix(in srgb, #2d4a7a 10%, transparent); color: #2d4a7a; }
.guvnor-badge--confidence-reached { background: color-mix(in srgb, #c25614 12%, transparent); color: #a8460f; }

.dark .guvnor-badge { background: color-mix(in srgb, #94a7bd 22%, transparent); color: #b9c6d6; }
.dark .guvnor-badge--regulator { background: color-mix(in srgb, #7fb3e8 18%, transparent); color: #a8cbf0; }
.dark .guvnor-badge--legislation { background: color-mix(in srgb, #a78bfa 18%, transparent); color: #c4b5fd; }
.dark .guvnor-badge--penalty { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #fcd34d; }
.dark .guvnor-badge--severe,
.dark .guvnor-badge--triggered,
.dark .guvnor-badge--overdue { background: color-mix(in srgb, #ef4444 22%, transparent); color: #fca5a5; }
.dark .guvnor-badge--upcoming,
.dark .guvnor-badge--watch,
.dark .guvnor-badge--imminent { background: color-mix(in srgb, #fb923c 20%, transparent); color: #fdba74; }
.dark .guvnor-badge--source { background: color-mix(in srgb, #94a7bd 22%, transparent); color: #b9c6d6; }
.dark .guvnor-badge--estimated { background: color-mix(in srgb, #60a5fa 18%, transparent); color: #bfdbfe; }
.dark .guvnor-badge--confidence-cross_cutting { background: color-mix(in srgb, #7fb3e8 18%, transparent); color: #a8cbf0; }
.dark .guvnor-badge--confidence-reached { background: color-mix(in srgb, #fb923c 20%, transparent); color: #fdba74; }

/* ---- buttons — the .btn pill grammar --------------------------------------- */
.guvnor-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 20px; border-radius: var(--border-radius-pill);
    font-family: inherit; font-size: 15px; line-height: 24px; font-weight: 600;
    text-decoration: none; border: 0; cursor: pointer;
    transition: background var(--transition-base);
}
.guvnor-btn--primary { background: var(--color-accent-fill); color: var(--color-accent-fill-ink, #fff); }
.guvnor-btn--primary:hover { background: var(--color-accent-fill-hover); color: var(--color-accent-fill-ink, #fff); }
.guvnor-btn--secondary {
    background: var(--color-bg-white); color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
.guvnor-btn--secondary:hover { background: var(--color-bg-elevated); }
.guvnor-btn--small { padding: 6px 14px; font-size: 14px; line-height: 20px; }

/* ---- cards — the .snippet--card grammar ------------------------------------ */
.guvnor-card {
    display: flex;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.guvnor-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); }
.guvnor-card__content { padding: 20px; flex: 1; min-width: 0; }
.guvnor-card__title {
    font-family: var(--font-heading);
    font-size: 17px; line-height: 24px; letter-spacing: -0.005em;
    font-weight: 650; color: var(--color-text-primary); margin: 0 0 4px;
}
.guvnor-card__desc { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 4px 0 8px; }
.guvnor-card__why { font-size: 13px; line-height: 20px; color: var(--color-text-muted); margin: 4px 0 0; }
.guvnor-card__why strong { color: var(--color-text-secondary); font-weight: 600; }
.guvnor-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.guvnor-card__date {
    display: block; margin-bottom: 4px;
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps-sm, 0.06em); text-transform: uppercase;
    color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.guvnor-card__link {
    display: inline-block; margin-top: 10px;
    font-size: 15px; line-height: 24px; font-weight: 600;
    color: var(--color-link); text-decoration: none;
}
.guvnor-card__link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* severity dot before obligation titles — a purely visual at-a-glance cue
   (the words are in the chips + visually-hidden text) */
.guvnor-card--obligation .guvnor-card__title::before {
    content: ""; display: inline-block; width: 9px; height: 9px;
    border-radius: 50%; margin-right: 8px; vertical-align: middle;
    background: var(--color-text-muted);
}
.guvnor-card[data-severity="critical"] .guvnor-card__title::before { background: #d4351c; }
.guvnor-card[data-severity="warning"] .guvnor-card__title::before { background: #f59e0b; }
.guvnor-card[data-severity="info"] .guvnor-card__title::before { background: #6b7c93; }
.guvnor-card__absorbed { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border-light); }
.guvnor-card__absorbed-heading {
    font-size: 11px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps-sm, 0.06em); text-transform: uppercase;
    color: var(--color-text-muted); margin: 0 0 6px;
}
.guvnor-card__absorbed-item { font-size: 13px; line-height: 20px; color: var(--color-text-secondary); margin: 0 0 6px; }
.guvnor-card__absorbed-item strong { font-weight: 650; }
.guvnor-card__absorbed-item .guvnor-badge { margin-left: 6px; }
/* my-business reflect-back rows */
.guvnor-card__label {
    display: block; font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase;
    color: var(--color-text-secondary); margin: 0 0 4px;
}
.guvnor-card__value { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.guvnor-card__hint, .guvnor-field__hint { display: inline-block; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--color-text-muted); }
/* ignore cards — quiet relief, no hover lift */
.guvnor-card--ignore { box-shadow: none; background: var(--color-bg-elevated); }
.guvnor-card--ignore:hover { box-shadow: none; border-color: var(--color-border-light); }

/* ---- grids ------------------------------------------------------------------ */
.guvnor-grid { display: grid; gap: 16px; }
.guvnor-grid--2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.guvnor-grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 640px) { .guvnor-grid--2, .guvnor-grid--3 { grid-template-columns: 1fr; } }

/* ---- notes, nudges, flashes ------------------------------------------------- */
.guvnor-nudge {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    padding: 14px 16px; margin: 0 0 16px;
    font-size: 15px; line-height: 24px; color: var(--color-text-secondary);
}
.guvnor-flash {
    background: var(--color-accent-subtle); color: var(--color-accent-text);
    border-radius: var(--border-radius-md);
    padding: 10px 16px; margin: 0 0 24px;
    font-size: 15px; line-height: 24px; font-weight: 600;
}
.guvnor-compliance-flash {
    background: color-mix(in srgb, #f59e0b 10%, var(--color-bg-white));
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
}
.guvnor-compliance-flash__title {
    margin: 0 0 6px; font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase;
    color: #8a520a;
}
.dark .guvnor-compliance-flash { background: color-mix(in srgb, #f59e0b 14%, var(--color-bg-white)); }
.dark .guvnor-compliance-flash__title { color: #fcd34d; }
.guvnor-compliance-flash__list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 24px; color: var(--color-text-primary); }
.guvnor-check-more { text-align: center; font-size: 15px; line-height: 24px; color: var(--color-text-muted); margin-top: 24px; }
.guvnor-check-more a { color: var(--color-link); text-decoration: none; font-weight: 600; }
.guvnor-check-more a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---- the verdict hero (§4.1) ------------------------------------------------ */
.guvnor-landscape__hero { display: flex; flex-direction: column; gap: 24px; }
.guvnor-verdict a {
    color: inherit; font-weight: 650; text-decoration: underline;
    text-decoration-color: var(--color-accent); text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.guvnor-verdict a:hover { color: var(--color-accent-text); }
.guvnor-verdict__read { margin: 8px 0 0; font-size: 17px; line-height: 28px; font-weight: 500; color: var(--color-text-primary); max-width: var(--measure); }
.guvnor-verdict__scope { font-size: 13px; line-height: 20px; color: var(--color-text-muted); margin: 8px 0 0; }
.guvnor-verdict__scope a { color: var(--color-link); font-weight: 500; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.guvnor-verdict__nudge { margin-top: 16px; }

/* profile summary strip — deflist-flavoured facts, not six cards. Plain white
   panel: no border-colour gap trick, so a ragged last row never exposes a
   coloured ground behind empty cells. */
.guvnor-landscape__summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}
.guvnor-landscape__summary-item { padding: 12px 16px; }
.guvnor-landscape__summary-label {
    display: block; font-size: 11px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps-sm, 0.06em); text-transform: uppercase;
    color: var(--color-text-muted); margin-bottom: 2px;
}
.guvnor-landscape__summary-value { display: block; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.guvnor-landscape__section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.guvnor-landscape__section-header h2 { margin-bottom: 0; }

/* ---- the act-now spine (§4.2) ---------------------------------------------- */
.guvnor-spine { list-style: none; margin: 16px 0 0; padding: 0; }
.guvnor-spine__row {
    display: flex; gap: 24px; padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light);
}
.guvnor-spine__row:first-child { border-top: 1px solid var(--color-border-light); }
.guvnor-spine__date {
    flex: 0 0 92px; padding-top: 3px;
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps-sm, 0.06em); text-transform: uppercase;
    color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.guvnor-spine__row[data-kind="threshold"] .guvnor-spine__date { color: #b3261a; }
.dark .guvnor-spine__row[data-kind="threshold"] .guvnor-spine__date { color: #fca5a5; }
.guvnor-spine__body { flex: 1; min-width: 0; }
.guvnor-spine__title {
    font-family: var(--font-heading);
    font-size: 16px; line-height: 24px; font-weight: 650;
    color: var(--color-text-primary); margin: 0 0 4px;
}
.guvnor-spine__action { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 0 0 6px; max-width: var(--measure); }
.guvnor-spine__note { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--color-text-muted); font-style: italic; }
@media (max-width: 560px) {
    .guvnor-spine__row { flex-direction: column; gap: 4px; }
    .guvnor-spine__date { flex-basis: auto; }
}

/* ---- standing rules: lens toggle + domain roll-ups (§4.4) ------------------- */
.guvnor-lens { position: relative; }
.guvnor-lens__radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.guvnor-lens__tab {
    display: inline-block; padding: 8px 2px; margin: 0 20px 16px 0;
    border-bottom: 2px solid transparent;
    font-size: 15px; line-height: 20px; font-weight: 500;
    color: var(--color-text-secondary); cursor: pointer;
}
.guvnor-lens__tab:hover { color: var(--color-text-primary); }
.guvnor-lens__radio:checked + .guvnor-lens__tab {
    color: var(--color-text-primary); font-weight: 600;
    border-bottom-color: var(--color-accent);
}
.guvnor-lens__radio:focus-visible + .guvnor-lens__tab {
    outline: 3px solid var(--color-focus, var(--color-accent)); outline-offset: 2px;
}
.guvnor-lens__panel { display: none; }
#lens-area:checked ~ .guvnor-lens__panel--area,
#lens-regulator:checked ~ .guvnor-lens__panel--regulator { display: block; }

.guvnor-domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .guvnor-domain-grid { grid-template-columns: 1fr; } }
.guvnor-domain-card {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}
.guvnor-domain-card--other { border-style: dashed; box-shadow: none; background: var(--color-bg-elevated); }
.guvnor-domain-card__title {
    font-family: var(--font-heading);
    font-size: 18px; line-height: 24px; letter-spacing: -0.005em;
    font-weight: 650; color: var(--color-text-primary); margin: 0;
}
.guvnor-domain-card__summary { margin: 0; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
.guvnor-domain-card__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.guvnor-domain-card__foot {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    margin-top: auto; padding-top: 8px; border-top: 1px solid var(--color-border-light);
}
.guvnor-domain-card__route, .guvnor-domain-card__all { margin-top: 2px; }

/* ---- the ONE standing-item component (T-260) -------------------------------- */
.guvnor-standing-item { padding: 14px 0 12px; border-top: 1px solid var(--color-border-light); }
.guvnor-standing-item:first-child { border-top: 0; padding-top: 2px; }
.guvnor-standing-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 4px; }
.guvnor-standing-item__title { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--color-text-primary); }
.guvnor-standing-item .guvnor-card__link { margin-top: 6px; font-size: 14px; line-height: 20px; }
.guvnor-standing-item .guvnor-card__why { margin: 2px 0 0; }
/* T-340: the devolved twins of one rule, folded behind the row that leads them */
.guvnor-standing-item__nations { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
.guvnor-standing-item__nations > summary { cursor: pointer; }
.guvnor-standing-item__nation-list { margin: 6px 0 0; padding-left: 18px; }
.guvnor-standing-item__nation { font-weight: 600; color: var(--color-text-primary); }
/* ---- rules with a clock (T-342) --------------------------------------------
   The rolling/event-driven timing rules under a rule card, on /check/ and the
   /your-rules/ standing card. Deliberately quieter than the rule's own title:
   a clock is a detail OF the rule, not a second rule. No colour carries
   meaning here — the timing is words. */
.guvnor-clocks { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--color-border-light); }
/* Sentence case, not the uppercase letterspaced eyebrow the first cut used:
   the head now names the instrument the clocks belong to ("Timing rules under
   the Gas Safety (Installation and Use) Regulations 1998"), and an Act title
   set in caps at 12px is a wall. It still passes the DS v4 delete test — strip
   it and the card asserts the clocks are the RULE's own, which is the one
   thing the join cannot support. */
.guvnor-clocks__head {
    font-size: 12px; line-height: 16px; font-weight: 400;
    color: var(--color-text-secondary); margin: 0 0 4px;
}
.guvnor-clocks__source { font-weight: 600; }
.guvnor-clocks__list { margin: 0; padding-left: 18px; list-style: disc; }
.guvnor-clock { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 0 0 4px; }
.guvnor-clock:last-child { margin-bottom: 0; }
.guvnor-clock__label { font-weight: 600; color: var(--color-text-primary); }
.guvnor-clock .guvnor-badge { margin-left: 6px; }

/* ---- per-area drill-down page (T-260) --------------------------------------- */
.guvnor-area { display: flex; flex-direction: column; gap: 24px; }
.guvnor-area__header h1 { margin-bottom: 4px; }
.guvnor-area__back { margin: 0 0 16px; font-size: 14px; line-height: 20px; }
.guvnor-area__back a { color: var(--color-text-secondary); text-decoration: none; font-weight: 500; }
.guvnor-area__back a:hover { color: var(--color-link); text-decoration: underline; }
.guvnor-area__count {
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase;
    color: var(--color-text-muted); margin: 0 0 12px;
}
.guvnor-area__why {
    font-size: 15px; line-height: 24px; color: var(--color-text-secondary);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    padding: 12px 16px; margin: 0 0 12px; max-width: var(--measure);
}
.guvnor-area__why strong { color: var(--color-text-primary); font-weight: 600; }
.guvnor-area__why-note { color: var(--color-text-muted); }
.guvnor-area__list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.guvnor-area__list .guvnor-standing-item { padding: 18px 0 16px; }
.guvnor-area__list .guvnor-standing-item__title { font-size: 16px; }
.guvnor-area__foot { max-width: var(--measure); }
.guvnor-area__foot .guvnor-check-more { text-align: left; }

/* ---- regulator groups (details) --------------------------------------------- */
.guvnor-group {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    margin-bottom: 12px; overflow: hidden;
}
.guvnor-group--cross-cutting { border-left: 3px solid #2d4a7a; }
.dark .guvnor-group--cross-cutting { border-left-color: #7fb3e8; }
.guvnor-group > summary {
    padding: 14px 20px; min-height: 44px; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-heading);
    font-weight: 650; font-size: 16px; line-height: 24px;
    color: var(--color-text-primary);
    list-style: none; user-select: none;
}
.guvnor-group > summary::-webkit-details-marker { display: none; }
.guvnor-group > summary::before {
    content: ""; display: inline-block; width: 8px; height: 8px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg); transition: transform 0.2s; flex-shrink: 0;
}
.guvnor-group[open] > summary::before { transform: rotate(45deg); }
.guvnor-group__body { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.guvnor-group__why { margin: 0; }
.guvnor-group__escape-hatch { margin: 0; font-size: 14px; line-height: 20px; }
.guvnor-group__escape-hatch .guvnor-card__link { margin-top: 0; }
.guvnor-group__lazy-status { margin: 0; }
.guvnor-landscape__more-regulators { margin-top: 8px; }
.guvnor-landscape__more-regulators > summary {
    min-height: 44px; display: flex; align-items: center; gap: 10px;
    cursor: pointer; font-weight: 600; font-size: 15px; line-height: 24px;
    color: var(--color-text-secondary); list-style: none; user-select: none;
    margin-bottom: 12px;
}
.guvnor-landscape__more-regulators > summary::-webkit-details-marker { display: none; }
.guvnor-landscape__more-regulators > summary::before {
    content: ""; display: inline-block; width: 8px; height: 8px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg); transition: transform 0.2s; flex-shrink: 0;
}
.guvnor-landscape__more-regulators[open] > summary::before { transform: rotate(45deg); }

/* ---- Ask Guv: per-card trigger + suggestion bar (§4.7) ---------------------- */
.guvnor-card__ask {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 10px; margin-left: 16px; padding: 0; border: 0; background: none;
    font: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
    color: var(--color-text-secondary); cursor: pointer;
}
.guvnor-card__ask:hover { color: var(--color-accent-text); text-decoration: underline; }
.guvnor-askbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 14px 20px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}
.guvnor-askbar__label {
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase;
    color: var(--color-accent-text);
}
.guvnor-askbar__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guvnor-askbar__chip {
    display: inline-block; padding: 6px 14px;
    font: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-pill); cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base);
}
.guvnor-askbar__chip:hover { border-color: var(--color-accent); color: var(--color-accent-text); }

/* ---- /check/ ranked list ---------------------------------------------------- */
.guvnor-check-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.guvnor-check-item {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
}
.guvnor-check-item__rank {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1;
    /* neutral disc (T-254) — severity is stated in words by the chips */
    background: var(--color-bg-inset, var(--color-bg-elevated));
    color: var(--color-text-secondary);
}
.guvnor-check-item__content { flex: 1; min-width: 0; }
.guvnor-check-item__content h3 {
    font-family: var(--font-heading);
    font-size: 16px; line-height: 24px; font-weight: 650;
    color: var(--color-text-primary); margin: 0 0 4px;
}
.guvnor-check-item__action { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 0 0 8px; }
@media (max-width: 640px) {
    .guvnor-check-item { gap: 12px; padding: 14px 16px; }
    .guvnor-check-item__rank { width: 28px; height: 28px; font-size: 14px; }
}

/* ---- /calendar/ timeline ----------------------------------------------------- */
.guvnor-calendar-month { margin-top: 32px; }
.guvnor-calendar-month:first-of-type { margin-top: 16px; }
.guvnor-calendar-month__heading {
    display: flex; align-items: baseline; gap: 16px;
    border-bottom: 2px solid var(--color-border-light); padding-bottom: 8px;
    margin-bottom: 16px;
}
.guvnor-calendar-month--urgent .guvnor-calendar-month__heading { border-bottom-color: #d4351c; }
.dark .guvnor-calendar-month--urgent .guvnor-calendar-month__heading { border-bottom-color: #ef4444; }
.guvnor-calendar-card { flex-direction: row; }
.guvnor-calendar-card__urgency-bar { width: 4px; flex-shrink: 0; background: var(--color-border-light); }
.guvnor-calendar-card[data-urgency="overdue"] .guvnor-calendar-card__urgency-bar { background: #d4351c; }
.guvnor-calendar-card[data-urgency="imminent"] .guvnor-calendar-card__urgency-bar { background: #f59e0b; }
.guvnor-calendar-card[data-urgency="upcoming"] .guvnor-calendar-card__urgency-bar { background: #6b7c93; }
.guvnor-calendar-card[data-urgency="overdue"] { background: color-mix(in srgb, #d4351c 5%, var(--color-bg-white)); }
.guvnor-calendar-card[data-urgency="imminent"] { background: color-mix(in srgb, #f59e0b 6%, var(--color-bg-white)); }
.guvnor-calendar-card__date {
    display: block; margin-bottom: 4px;
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps-sm, 0.06em); text-transform: uppercase;
    color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.guvnor-calendar-card[data-urgency="overdue"] .guvnor-calendar-card__date { color: #b3261a; }
.guvnor-calendar-card[data-urgency="imminent"] .guvnor-calendar-card__date { color: #8a520a; }
.dark .guvnor-calendar-card[data-urgency="overdue"] .guvnor-calendar-card__date { color: #fca5a5; }
.dark .guvnor-calendar-card[data-urgency="imminent"] .guvnor-calendar-card__date { color: #fcd34d; }
.guvnor-calendar-card__note { margin-top: 6px; font-size: 13px; line-height: 20px; font-style: italic; color: var(--color-text-muted); }
.guvnor-calendar-card__read-link { font-weight: 600; }

/* ---- /watchlist/ change cards ------------------------------------------------ */
.guvnor-change-card {
    display: flex; flex-direction: row; align-items: flex-start;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px; overflow: hidden;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.guvnor-change-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); }
.guvnor-change-card__date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 68px; min-width: 68px; padding: 16px 8px; text-align: center; flex-shrink: 0;
    background: var(--color-bg-elevated);
    align-self: stretch;
}
.guvnor-change-card__day {
    display: block; font-family: var(--font-heading);
    font-size: 26px; line-height: 1; font-weight: 700;
    color: var(--color-accent-text);
}
.guvnor-change-card__month {
    display: block; margin-top: 4px;
    font-size: 11px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps-sm, 0.06em); text-transform: uppercase;
    color: var(--color-text-muted);
}
.guvnor-change-card__content { flex: 1; min-width: 0; padding: 16px 20px; }
.guvnor-change-card__content h3 {
    font-family: var(--font-heading);
    font-size: 17px; line-height: 24px; letter-spacing: -0.005em;
    font-weight: 650; color: var(--color-text-primary); margin: 0 0 4px;
}
.guvnor-change-card__content h3 a { color: var(--color-link); text-decoration: none; }
.guvnor-change-card__content h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.guvnor-change-card__content p { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 0 0 8px; }
@media (max-width: 640px) {
    .guvnor-change-card { flex-direction: column; }
    .guvnor-change-card__date {
        width: 100%; flex-direction: row; gap: 6px; align-items: baseline;
        padding: 8px 16px; border-bottom: 1px solid var(--color-border-light);
    }
    .guvnor-change-card__day { font-size: 20px; }
    .guvnor-change-card__month { margin-top: 0; }
}

/* ---- /my-business/ forms ------------------------------------------------------ */
.guvnor-form { display: grid; gap: 16px; max-width: 520px; }
.guvnor-field { display: flex; flex-direction: column; gap: 6px; }
.guvnor-field label { font-size: 15px; line-height: 24px; font-weight: 600; color: var(--color-text-primary); }
.guvnor-field select,
.guvnor-field input {
    padding: 10px 14px; min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    font: inherit; font-size: 15px; line-height: 24px;
}
.guvnor-field select:focus-visible,
.guvnor-field input:focus-visible {
    outline: 3px solid var(--color-focus, var(--color-accent));
    outline-offset: 1px; border-color: var(--color-accent);
}
.guvnor-field--inline { flex: 1; }
.guvnor-form__row { display: flex; align-items: flex-end; gap: 16px; max-width: 520px; flex-wrap: wrap; }
.guvnor-form__actions { display: flex; gap: 10px; margin-top: 4px; }
.guvnor-form__status { color: #b3261a; font-size: 14px; line-height: 20px; font-weight: 600; margin: 6px 0 0; min-height: 20px; }
.dark .guvnor-form__status { color: #fca5a5; }
.guvnor-cta-row { margin-top: 32px; }

/* ---- the question step (T-314) ------------------------------------------------- */
/* Wider than the profile form: a question legend is a sentence, not a label. */
.guvnor-questions__form { max-width: 640px; gap: 24px; }
.guvnor-questions__roles { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 0 0 16px; }
.guvnor-questions__item {
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-white);
    padding: 16px; margin: 0;
}
.guvnor-questions__legend {
    font-size: 17px; line-height: 26px; font-weight: 600;
    color: var(--color-text-primary); padding: 0; margin: 0 0 6px;
}
.guvnor-questions__why,
.guvnor-questions__assumed,
.guvnor-questions__note {
    font-size: 14px; line-height: 22px; color: var(--color-text-muted); margin: 0 0 10px;
}
.guvnor-questions__assumed { font-style: italic; }
.guvnor-questions__choices { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.guvnor-questions__choices label {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; font-size: 15px; line-height: 24px; font-weight: 400;
    color: var(--color-text-primary); cursor: pointer;
}
.guvnor-questions__choices input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.guvnor-questions__choices input:focus-visible {
    outline: 3px solid var(--color-focus, var(--color-accent)); outline-offset: 2px;
}
.guvnor-questions__subheading { font-size: 16px; line-height: 24px; margin: 0 0 12px; }
.guvnor-questions__screen-two,
.guvnor-questions__review { display: grid; gap: 16px; }
.guvnor-questions__role-heading {
    font-size: 15px; line-height: 24px; font-weight: 600;
    color: var(--color-text-secondary); margin: 8px 0 0;
}
.guvnor-questions__fixed { font-size: 15px; line-height: 24px; margin: 0; }
.guvnor-questions__note { margin: 0; }

/* ---- multi-selects and the deferred list (T-325, ISS-621) ---------------------- */
/* A gateway and the other-activities step are checkbox groups, not radios, and the
   difference is not decoration: three radios are one answer read left to right,
   while nine product families are a list to be scanned. So they stack, one per
   line, each row its own 44px target. Everything else — the card, the legend, the
   why line — is the ordinary question's, because they ARE ordinary questions. */
.guvnor-questions__choices--multi { flex-direction: column; gap: 0; align-items: stretch; }
.guvnor-questions__choices--multi label { align-items: flex-start; padding: 4px 0; }
/* Nudge the box down onto the first line of a label that wraps to two. */
.guvnor-questions__choices--multi input { margin-top: 12px; flex: 0 0 auto; }
/* "None of these" is not another product family — it is the explicit no about all
   of them at once (questions.apply_gateway). The rule says so without a second
   heading. */
.guvnor-questions__choice--none {
    border-top: 1px solid var(--color-border-light);
    margin-top: 4px; padding-top: 4px;
}
/* An option the TRADE settled (T-325 round 6). A building contractor carries out
   construction work — that is what the words mean — so the tick arrives on and is
   not theirs to remove; the way out of it is to pick a different trade. Muted
   rather than hidden, because the point is to SHOW what we took as read: an
   assumption the business cannot see is one they cannot dispute. The reason sits
   under the label, not beside it, so it does not read as part of the question. */
.guvnor-questions__choice--locked { color: var(--color-text-muted); }
.guvnor-questions__locked-reason {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* The other-activities step: the same card, set apart from the review above it so
   it does not read as one more thing already told us. */
.guvnor-questions__secondary { margin-top: 8px; }

/* The fifth state. Not a control and deliberately not shaped like one: nothing here
   can be answered, and a bordered card with no inputs invites a click that does
   nothing. A quiet block with a rule down the side instead. */
.guvnor-questions__deferred {
    border-left: 3px solid var(--color-border-light);
    padding: 2px 0 2px 16px;
    color: var(--color-text-muted);
}
.guvnor-questions__deferred p { font-size: 14px; line-height: 22px; margin: 0 0 8px; }
.guvnor-questions__deferred-list {
    margin: 0; padding-left: 20px;
    font-size: 14px; line-height: 22px; color: var(--color-text-muted);
}
.guvnor-questions__deferred-list li { margin: 0 0 4px; }

/* ---- empty state --------------------------------------------------------------- */
.guvnor-empty { text-align: center; padding: 48px 24px; max-width: 480px; margin: 32px auto; }
.guvnor-empty__icon { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--color-border); }
.guvnor-empty__icon svg { width: 100%; height: 100%; }
.guvnor-empty__title { font-family: var(--font-heading); font-size: 22px; line-height: 28px; font-weight: 650; margin: 0 0 8px; color: var(--color-text-primary); }
.guvnor-empty__message { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); margin: 0 0 24px; }

/* ---- /map/ sector map ----------------------------------------------------------- */
.guvnor-map-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.guvnor-map-header__text { flex: 1; min-width: 0; }
.guvnor-map-header__switcher { flex-shrink: 0; padding-top: 4px; }
.guvnor-map-switcher__label {
    display: block; margin-bottom: 6px;
    font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: var(--tracking-caps-sm, 0.06em); text-transform: uppercase;
    color: var(--color-text-muted);
}
.guvnor-map-switcher__select {
    appearance: none; -webkit-appearance: none;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: 8px 36px 8px 14px; min-width: 200px;
    font: inherit; font-size: 15px; line-height: 24px; font-weight: 500;
    color: var(--color-text-primary); cursor: pointer;
    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 d='M1 1l5 5 5-5' stroke='%23808573' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    transition: border-color var(--transition-base);
}
.guvnor-map-switcher__select:hover { border-color: var(--color-accent); }
.guvnor-map-switcher__select:focus-visible { outline: 3px solid var(--color-focus, var(--color-accent)); outline-offset: 1px; }
.guvnor-map-leg {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--color-border-light);
}
.guvnor-map-leg:last-child { border-bottom: none; }
.guvnor-map-leg__title {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    font-size: 15px; line-height: 24px; font-weight: 600;
    color: var(--official-blue); text-decoration: none;
}
.guvnor-map-leg__title:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.dark .guvnor-map-leg__title { color: var(--official-blue-on-dark, #7fb3e8); }
.guvnor-map-overlaps { display: flex; flex-direction: column; gap: 12px; }
.guvnor-map-overlap-item {
    background: color-mix(in srgb, #f59e0b 6%, var(--color-bg-white));
    border: 1px solid color-mix(in srgb, #f59e0b 25%, transparent);
    border-radius: var(--border-radius-md);
    padding: 16px 20px;
}
.guvnor-map-overlap-item strong { font-size: 15px; line-height: 24px; font-weight: 650; color: var(--color-text-primary); }
.guvnor-map-overlap-item p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
@media (max-width: 640px) {
    .guvnor-map-header { flex-direction: column; }
    .guvnor-map-switcher__select { width: 100%; min-width: 0; }
}

/* ---- motion ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .guvnor-group > summary::before,
    .guvnor-landscape__more-regulators > summary::before { transition: none; }
}