/* ==========================================================================
   Guvnor Core — Design tokens + shared components
   Scoped to .guvnor to avoid polluting existing styles
   ========================================================================== */

/* ── Design Tokens ───────────────────────────────────────────────────────
   These `--guvnor-*` tokens are the legacy (pre-rebrand) naming kept so the
   /your-rules/ product templates and feature CSS (guvnor-map/calendar/check…)
   don't all need rewriting. As of the rebrand alignment they are ALIASES onto
   the canonical three-layer tokens in main.css — the old hard-coded orange
   (#e85d26) / cool-navy (#1a2332) / GOV.UK severity palette is gone. Because
   the rebrand semantic tokens already flip for dark mode, the `.dark .guvnor`
   block below only needs to override what's genuinely bespoke (badges).
   --------------------------------------------------------------------------- */
.guvnor {
    /* Each alias carries an on-brand hex fallback so this file degrades
       gracefully if main.css's tokens aren't in scope (the old block was
       self-contained; these fallbacks preserve that, de-oranged). */
    --guvnor-bg: var(--color-bg-page, #FAF6F1);
    --guvnor-accent: var(--color-accent, #10B981);              /* fill: emerald-500 / -400 dark */
    --guvnor-accent-dark: var(--p-emerald-700, #047857);        /* hover: darkens in both modes */
    --guvnor-navy: var(--color-text-primary, #1E293B);          /* ink — 11/12 uses are text */
    --guvnor-navy-light: var(--color-bg-inset, #F1F5F9);
    --guvnor-text: var(--color-text-primary, #1E293B);
    --guvnor-text-secondary: var(--color-text-secondary, #64748B);
    --guvnor-text-muted: var(--color-text-muted, #94A3B8);
    --guvnor-border: var(--color-border, #E2E8F0);
    --guvnor-border-light: var(--color-border, #E2E8F0);
    --guvnor-card-bg: var(--color-bg-surface, #FFFFFF);
    --guvnor-card-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
    --guvnor-card-shadow-hover: var(--shadow-md, 0 4px 6px -1px rgba(15, 23, 42, 0.06));
    --guvnor-radius: 6px;
    --guvnor-radius-lg: 10px;

    /* Severity — fg from semantic status tokens; bg derived via color-mix so the
       tint tracks the surface and lightens correctly in dark mode (no separate
       dark override needed). Inner var() fallbacks keep color-mix valid if the
       tokens are ever absent. */
    --guvnor-critical: var(--color-danger, #DC2626);
    --guvnor-critical-bg: color-mix(in srgb, var(--color-danger, #DC2626) 10%, var(--color-bg-surface, #FFFFFF));
    --guvnor-warning: var(--color-warning, #EAB308);
    --guvnor-warning-bg: color-mix(in srgb, var(--color-warning, #EAB308) 12%, var(--color-bg-surface, #FFFFFF));
    --guvnor-info: var(--color-info, #2563EB);
    --guvnor-info-bg: color-mix(in srgb, var(--color-info, #2563EB) 10%, var(--color-bg-surface, #FFFFFF));
    --guvnor-success: var(--color-success, #10B981);
    --guvnor-success-bg: color-mix(in srgb, var(--color-success, #10B981) 10%, var(--color-bg-surface, #FFFFFF));

    /* Spacing */
    --guvnor-space-xs: 4px;
    --guvnor-space-sm: 8px;
    --guvnor-space-md: 16px;
    --guvnor-space-lg: 24px;
    --guvnor-space-xl: 32px;
    --guvnor-space-2xl: 48px;

    /* Badges — light-mode palette */
    --guvnor-badge-regulator-bg: #eef2f7;
    --guvnor-badge-regulator-fg: #2d4a7a;
    --guvnor-badge-legislation-bg: #f0ebf8;
    --guvnor-badge-legislation-fg: #4c2c92;
    --guvnor-badge-duty-bg: #d4e5f7;
    --guvnor-badge-duty-fg: #144e81;
    --guvnor-badge-offence-bg: #f6d7d2;
    --guvnor-badge-offence-fg: #942514;
    --guvnor-badge-sector-bg: #e6f3ec;
    --guvnor-badge-sector-fg: #00703c;
    --guvnor-badge-upcoming-bg: #fef4ed;
    --guvnor-badge-upcoming-fg: #c25614;
    --guvnor-badge-penalty-bg: var(--guvnor-warning-bg);
    --guvnor-badge-penalty-fg: #8b4513;
    --guvnor-badge-severe-bg: var(--guvnor-critical-bg);
    --guvnor-badge-severe-fg: var(--guvnor-critical);
    --guvnor-badge-triggered-bg: var(--guvnor-critical-bg);
    --guvnor-badge-triggered-fg: var(--guvnor-critical);
    --guvnor-badge-not-triggered-bg: #f7f7f7;
    --guvnor-badge-not-triggered-fg: var(--guvnor-text-muted);

    background: var(--guvnor-bg);
    color: var(--guvnor-text);
    padding: var(--guvnor-space-xl) 20px var(--guvnor-space-2xl);
    max-width: 960px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .guvnor {
        padding: var(--guvnor-space-2xl) 32px var(--guvnor-space-2xl);
    }
}

/* Visually hidden — for screen-reader-only severity labels etc. */
.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;
}

/* Inline anchor-styled button (for JS-only triggers in body copy) */
.guvnor-link-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.guvnor-link-button:focus-visible {
    outline: 2px solid var(--guvnor-info, #1d70b8);
    outline-offset: 2px;
}

/* ── Typography ────────────────────────────────────────────────────────── */
.guvnor h1 {
    font-family: var(--font-heading, "Bricolage Grotesque", sans-serif);
    font-size: 36px;
    font-weight: 700;
    color: var(--guvnor-navy);
    letter-spacing: -0.02em;
    margin: 0 0 var(--guvnor-space-sm);
    line-height: 1.15;
}

.guvnor h2 {
    font-family: var(--font-heading, "Bricolage Grotesque", sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--guvnor-navy);
    letter-spacing: -0.01em;
    margin: var(--guvnor-space-xl) 0 var(--guvnor-space-md);
    line-height: 1.2;
}

.guvnor h3 {
    font-family: var(--font-heading, "Bricolage Grotesque", sans-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--guvnor-navy);
    margin: 0 0 var(--guvnor-space-xs);
    line-height: 1.3;
}

.guvnor p {
    color: var(--guvnor-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--guvnor-space-md);
}

.guvnor__subtitle {
    font-size: 19px;
    color: var(--guvnor-text-secondary);
    margin: 0 0 var(--guvnor-space-xl);
    max-width: 640px;
}

/* ── Profile Bar ───────────────────────────────────────────────────────── */
.guvnor-profile-bar {
    /* bg-inverse stays slate-800 in both themes (matches header/footer/sidebar);
       --guvnor-navy is now an ink token so it can't back a dark bar. */
    background: var(--color-bg-inverse, #1E293B);
    color: #fff;
    padding: var(--guvnor-space-sm, 8px) 20px;
    font-size: 14px;
}

@media (min-width: 768px) {
    .guvnor-profile-bar {
        padding: var(--guvnor-space-sm, 8px) 32px;
    }
}

.guvnor-profile-bar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--guvnor-space-xs, 4px) var(--guvnor-space-sm, 8px);
    max-width: 960px;
    margin: 0 auto;
}

.guvnor-profile-bar__label {
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
}

.guvnor-profile-bar__value {
    font-weight: 500;
}

.guvnor-profile-bar__value--empty {
    opacity: 0.6;
    font-style: italic;
}

.guvnor-profile-bar__sep {
    opacity: 0.4;
}

.guvnor-profile-bar__edit {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 2px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.guvnor-profile-bar__edit:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Hero Stats ────────────────────────────────────────────────────────── */
.guvnor-hero-stats {
    display: flex;
    gap: var(--guvnor-space-lg);
    margin: var(--guvnor-space-lg) 0 var(--guvnor-space-xl);
    flex-wrap: wrap;
}

/* Left-aligned, de-templated stat group (ISS/audit #4): the old centred 42px
   accent number + small uppercase label read as a generic "hero metric" block.
   Now a tighter left-aligned summary — prominent but not shouting. */
.guvnor-hero-stat {
    text-align: left;
}

.guvnor-hero-stat__number {
    display: block;
    font-family: var(--font-heading, "Bricolage Grotesque", sans-serif);
    font-size: 30px;
    font-weight: 700;
    color: var(--guvnor-accent);
    line-height: 1.05;
}

.guvnor-hero-stat__label {
    display: block;
    font-size: 14px;
    color: var(--guvnor-text-muted);
    margin-top: 2px;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.guvnor-card {
    background: var(--guvnor-card-bg);
    border-radius: var(--guvnor-radius);
    box-shadow: var(--guvnor-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
}

@media (prefers-reduced-motion: no-preference) {
    .guvnor-card:hover {
        box-shadow: var(--guvnor-card-shadow-hover);
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .guvnor-card:hover {
        box-shadow: var(--guvnor-card-shadow-hover);
    }
}

/* Severity is shown as a small status dot before the title — replacing the old
   4px coloured side-bar (audit #4: a side-stripe reads as a generic AI/admin
   tell). Severity is still conveyed to assistive tech via the .guvnor-visually-
   hidden text and the penalty badges (Imprisonment/Prosecution/fine), so the dot
   is a purely visual at-a-glance cue. */
.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(--guvnor-text-muted);
}

.guvnor-card[data-severity="critical"] .guvnor-card__title::before {
    background: var(--guvnor-critical);
}

.guvnor-card[data-severity="warning"] .guvnor-card__title::before {
    background: var(--guvnor-warning);
}

.guvnor-card[data-severity="info"] .guvnor-card__title::before {
    background: var(--guvnor-info);
}

.guvnor-card__content {
    padding: var(--guvnor-space-md);
    flex: 1;
    min-width: 0;
}

.guvnor-card__title {
    font-size: 17px;
}

.guvnor-card__desc {
    font-size: 15px;
    color: var(--guvnor-text-secondary);
    margin: var(--guvnor-space-xs) 0 var(--guvnor-space-sm);
    line-height: 1.5;
}

.guvnor-card__why {
    font-size: 13px;
    color: var(--guvnor-text-muted);
    margin: var(--guvnor-space-xs) 0 0;
    line-height: 1.5;
}

.guvnor-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--guvnor-space-xs);
    margin-top: var(--guvnor-space-sm);
}

.guvnor-card__link {
    display: inline-block;
    margin-top: var(--guvnor-space-sm);
    font-size: 15px;
    /* accent-text (emerald-700/-400), not the vivid fill accent — meets AA as
       link text on surface; the fill emerald is ~2.5:1 and fails. */
    color: var(--color-accent-text, #047857);
    text-decoration: none;
    font-weight: 500;
}

.guvnor-card__link:hover {
    text-decoration: underline;
}

/* ── Badges ────────────────────────────────────────────────────────────── */
.guvnor-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
}

.guvnor-badge--regulator {
    background: var(--guvnor-badge-regulator-bg);
    color: var(--guvnor-badge-regulator-fg);
}

.guvnor-badge--penalty {
    background: var(--guvnor-badge-penalty-bg);
    color: var(--guvnor-badge-penalty-fg);
}

.guvnor-badge--severe {
    background: var(--guvnor-badge-severe-bg);
    color: var(--guvnor-badge-severe-fg);
}

.guvnor-badge--legislation {
    background: var(--guvnor-badge-legislation-bg);
    color: var(--guvnor-badge-legislation-fg);
}

.guvnor-badge--duty {
    background: var(--guvnor-badge-duty-bg);
    color: var(--guvnor-badge-duty-fg);
}

.guvnor-badge--offence {
    background: var(--guvnor-badge-offence-bg);
    color: var(--guvnor-badge-offence-fg);
}

.guvnor-badge--sector {
    background: var(--guvnor-badge-sector-bg);
    color: var(--guvnor-badge-sector-fg);
}

.guvnor-badge--upcoming {
    background: var(--guvnor-badge-upcoming-bg);
    color: var(--guvnor-badge-upcoming-fg);
}

.guvnor-badge--triggered {
    background: var(--guvnor-badge-triggered-bg);
    color: var(--guvnor-badge-triggered-fg);
    font-weight: 700;
}

.guvnor-badge--not-triggered {
    background: var(--guvnor-badge-not-triggered-bg);
    color: var(--guvnor-badge-not-triggered-fg);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.guvnor-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--guvnor-radius);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.guvnor-btn:focus-visible {
    outline: 2px solid var(--guvnor-info, #1d70b8);
    outline-offset: 2px;
}

.guvnor-btn--primary {
    /* Deep-emerald fill carries white at 5.5:1 in both modes — matches the
       estate-wide bg-accent-fill convention (NOT the bright --guvnor-accent,
       which only reaches ~2.5:1 with white). */
    background: var(--color-accent-fill, #047857);
    color: #fff;
}

.guvnor-btn--primary:hover {
    background: var(--color-accent-fill-hover, #064E3B);
}

.guvnor-btn--secondary {
    background: var(--guvnor-card-bg);
    color: var(--guvnor-navy);
    border: 1px solid var(--guvnor-border);
}

.guvnor-btn--secondary:hover {
    background: #f5f0eb;
}

.guvnor-btn--small {
    padding: 10px 14px;
    font-size: 14px;
    min-height: 44px;
}

/* ── Grid Layouts ──────────────────────────────────────────────────────── */
.guvnor-grid {
    display: grid;
    gap: var(--guvnor-space-md);
}

.guvnor-grid--2 {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.guvnor-grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Details/Summary (Regulator groups) ────────────────────────────────── */
.guvnor-group {
    border: 1px solid var(--guvnor-border-light);
    border-radius: var(--guvnor-radius);
    background: var(--guvnor-card-bg);
    margin-bottom: var(--guvnor-space-md);
    overflow: hidden;
}

.guvnor-group > summary {
    padding: var(--guvnor-space-md);
    min-height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--guvnor-space-sm);
    font-weight: 600;
    font-size: 17px;
    color: var(--guvnor-navy);
    list-style: none;
    user-select: none;
}

.guvnor-group > summary::-webkit-details-marker {
    display: none;
}

.guvnor-group > summary:focus-visible {
    outline: 2px solid var(--guvnor-info, #1d70b8);
    outline-offset: 2px;
}

.guvnor-group > summary::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--guvnor-text-muted);
    border-bottom: 2px solid var(--guvnor-text-muted);
    transform: rotate(-45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.guvnor-group[open] > summary::before {
    transform: rotate(45deg);
}

.guvnor-group__count {
    font-size: 13px;
    font-weight: 400;
    color: var(--guvnor-text-muted);
    margin-left: auto;
}

.guvnor-group__body {
    padding: 0 var(--guvnor-space-md) var(--guvnor-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--guvnor-space-sm);
}

/* ── Section ───────────────────────────────────────────────────────────── */
.guvnor-section {
    margin-top: var(--guvnor-space-xl);
}

/* ── Empty State ───────────────────────────────────────────────────────── */
.guvnor-empty {
    text-align: center;
    padding: var(--guvnor-space-2xl) var(--guvnor-space-lg);
    max-width: 480px;
    margin: var(--guvnor-space-xl) auto;
}

.guvnor-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--guvnor-space-md);
    color: var(--guvnor-border);
}

.guvnor-empty__icon svg {
    width: 100%;
    height: 100%;
}

.guvnor-empty__title {
    font-size: 22px;
    margin: 0 0 var(--guvnor-space-sm);
}

.guvnor-empty__message {
    font-size: 16px;
    margin-bottom: var(--guvnor-space-lg);
}

/* ── Nav tabs ──────────────────────────────────────────────────────────── */
.guvnor-nav {
    display: flex;
    gap: 2px;
    background: var(--guvnor-border-light);
    border-radius: var(--guvnor-radius);
    padding: 3px;
    margin-bottom: var(--guvnor-space-xl);
    overflow-x: auto;
}

.guvnor-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--guvnor-text-secondary);
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.guvnor-nav__link:focus-visible {
    outline: 2px solid var(--guvnor-info, #1d70b8);
    outline-offset: -2px;
}

.guvnor-nav__link:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--guvnor-navy);
}

.guvnor-nav__link--active {
    background: var(--guvnor-card-bg);
    color: var(--guvnor-navy);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ── Dark Mode ─────────────────────────────────────────────────────────────
   Surfaces, accent, ink, borders, card and severity tokens all alias rebrand
   semantic tokens (or color-mix off them) that already flip in dark mode, so
   they need NO override here. Only the bespoke badge palette — colours that
   don't exist in the rebrand token set — is overridden for dark. */
.dark .guvnor {
    /* Badges — dark-mode palette */
    --guvnor-badge-regulator-bg: rgba(29, 112, 184, 0.15);
    --guvnor-badge-regulator-fg: #93C5FD;
    --guvnor-badge-legislation-bg: rgba(76, 44, 146, 0.15);
    --guvnor-badge-legislation-fg: #C4B5FD;
    --guvnor-badge-duty-bg: rgba(20, 78, 129, 0.15);
    --guvnor-badge-duty-fg: #93C5FD;
    --guvnor-badge-offence-bg: rgba(148, 37, 20, 0.15);
    --guvnor-badge-offence-fg: #FCA5A5;
    --guvnor-badge-sector-bg: rgba(0, 112, 60, 0.15);
    --guvnor-badge-sector-fg: #6EE7B7;
    --guvnor-badge-upcoming-bg: rgba(194, 86, 20, 0.15);
    --guvnor-badge-upcoming-fg: #FDBA74;
    --guvnor-badge-penalty-bg: rgba(244, 119, 56, 0.15);
    --guvnor-badge-penalty-fg: #FBBF24;
    --guvnor-badge-severe-bg: rgba(220, 38, 38, 0.15);
    --guvnor-badge-severe-fg: #FCA5A5;
    --guvnor-badge-triggered-bg: rgba(220, 38, 38, 0.15);
    --guvnor-badge-triggered-fg: #FCA5A5;
    --guvnor-badge-not-triggered-bg: rgba(100, 116, 139, 0.15);
    --guvnor-badge-not-triggered-fg: var(--guvnor-text-muted);
}

/* Buttons — dark mode overrides */
.dark .guvnor-btn--secondary {
    background: var(--color-bg-surface, #1E293B);
    color: var(--color-text-primary, #F1F5F9);
    border-color: var(--color-border, #334155);
}

.dark .guvnor-btn--secondary:hover {
    background: var(--color-bg-elevated, #283548);
}

/* Nav tabs — dark mode */
.dark .guvnor-nav {
    background: var(--color-border, #334155);
}

.dark .guvnor-nav__link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dark .guvnor-nav__link--active {
    background: var(--color-bg-surface, #1E293B);
    color: var(--color-text-primary, #F1F5F9);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .guvnor h1 {
        font-size: 28px;
    }

    .guvnor-hero-stats {
        gap: var(--guvnor-space-md);
    }

    .guvnor-hero-stat__number {
        font-size: 26px;
    }

    .guvnor-profile-bar__inner {
        font-size: 13px;
    }

    .guvnor-grid--2,
    .guvnor-grid--3 {
        grid-template-columns: 1fr;
    }
}