:root {
    --color-primary: #1b3950;
    /* Darkened from the original #e3712e brand orange: white text on the
       original color measured ~3.1:1 contrast (fails WCAG AA's 4.5:1 for
       normal text), and it's used as both button background (white text)
       and link/button text color on a light background - this shade is
       the least darkening that passes 4.5:1 in both directions. */
    --color-accent: #b65318;
    --color-accent-hover: #9b4714;
    --color-bg: #f7f8fa;
    --color-text: #1f2933;
    --color-border: #d7dce1;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

/* Default for any link that isn't already given its own look (nav bar,
   footer, buttons, .brand, .skip-link all set their own color/decoration
   with higher specificity than this bare `a`, so they're unaffected).
   Replaces the browser's default blue-and-underlined look with the same
   accent color already used for buttons and the Logout/Resend
   link-buttons, so a plain in-text link reads as part of this site
   instead of a generic unstyled one. */
a {
    color: var(--color-accent);
    text-decoration: none;
}

:where(a:visited) {
    color: var(--color-accent);
}

a:hover {
    text-decoration: underline;
}

/* Persistent left sidebar for organization and admin pages (see
   base.html) — .app-main deliberately doesn't reuse .container (its own
   max-width/centering would fight this flex layout), so it carries the
   equivalent top/bottom padding directly instead. The header/footer keep
   their own separate .container (960px) untouched; only the area between
   them widens on org/admin pages. */
.app-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.app-sidebar {
    flex: 0 0 200px;
    padding-top: 2rem;
}

.app-sidebar-group {
    margin-bottom: 1.5rem;
}

.app-sidebar-group-header {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8125rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.app-sidebar a {
    display: block;
    padding: 0.35rem 0;
    font-size: 0.9rem;
}

.app-sidebar a.app-sidebar-group-header {
    font-size: 0.8125rem;
}

.app-sidebar a[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 600;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.app-sidebar-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
}

@media (max-width: 768px) {
    /* Originally the sidebar just stacked above the content as a plain
       full-width block on mobile (same "never hide a link, just reflow"
       principle as the header nav's breakpoint) — but with ~15 links
       stacked above the page, navigating to a new page landed the reader
       back at the top of that same long list, not at the new page's
       content, making it look like nothing had happened. Now it's
       collapsed behind the hamburger button (closed by default, same
       data-nav-toggle handler the header nav already uses) so a fresh
       page load shows the page's own header immediately. */
    .app-layout {
        flex-direction: column;
        /* Override the desktop row layout's align-items: flex-start (set
           above so the two columns don't stretch to equal height) — once
           stacked into a column, flex-start instead sizes each child to
           its content's shrink-to-fit width, so any intrinsically wide
           descendant (e.g. a <select> with a long option) silently
           widens .app-main past the viewport. Stretch pins both children
           to the container's width so nothing can push the page wider. */
        align-items: stretch;
        gap: 0;
        padding: 0 1.5rem;
    }

    .app-sidebar-toggle {
        display: inline-block;
        margin-top: 1rem;
    }

    .app-sidebar {
        display: none;
        width: 100%;
        padding-top: 1rem;
    }

    .app-sidebar.is-open {
        display: block;
    }

    .app-main {
        max-width: 100%;
    }
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-header {
    background-color: var(--color-primary);
    color: #ffffff;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}

/* A plain <img> of the navy-and-orange logo would go near-invisible here --
   .site-header's background is the exact same navy as the logo's dark
   elements -- so .brand carries a small white chip behind it instead of
   the plain-text styling this class used to hold. */
.brand {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    line-height: 0;
}

.brand-logo {
    height: 2.25rem;
    width: auto;
    display: block;
}

.footer-logo {
    height: 1.1em;
    width: auto;
    vertical-align: -0.15em;
    margin-right: 0.3rem;
}

.site-header nav {
    display: flex;
    align-items: center;
}

.site-header nav a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 1.5rem;
}

.site-header nav .inline-form {
    margin-left: 1.5rem;
}

.site-header nav .inline-form button[type="submit"] {
    /* Overrides the global form button[type="submit"] margin-top: this
       button (Logout) has no fields above it to be spaced away from — it's
       a nav item sitting next to plain <a> links, and that margin was
       pushing it visibly lower than the rest of the row. */
    margin-top: 0;
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.4rem 0.7rem;
}

.nav-toggle:hover {
    background: none;
}

.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;
}

main.container {
    padding-top: 2rem;
    padding-bottom: 3rem;
    min-height: 60vh;
}

.hero h1 {
    color: var(--color-primary);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

button {
    background-color: var(--color-accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
}

button:hover {
    /* A solid darker shade rather than opacity: opacity blends toward
       the page background, which (measured) drops white-on-accent
       contrast below the 4.5:1 minimum on hover; a flat darker color
       keeps contrast comfortably above it and reads as "pressed" rather
       than "faded out." */
    background-color: var(--color-accent-hover);
}

/* Visible everywhere, not just on the text inputs style.css already
   covered - buttons, links, and form controls otherwise fell back to
   whatever the browser's own default focus ring looks like, which is
   inconsistent across elements and can be hard to see against the dark
   header background. :focus-visible so a mouse click doesn't also
   trigger the ring, only real keyboard/AT navigation does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
    /* The default primary-blue ring is nearly invisible against the
       header's own dark-blue background. */
    outline-color: #ffffff;
}

.site-header .brand:focus-visible {
    /* .brand itself sits on a white chip (see .brand above), where a white
       outline would be as invisible as the unstyled default is against the
       header's dark-blue background -- back to the site's normal ring. */
    outline-color: var(--color-primary);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #ffffff;
    color: var(--color-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 6px 0;
    font-weight: 600;
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

.status-ok {
    color: #1a7f37;
    font-weight: 600;
}

.status-error {
    color: #b42318;
    font-weight: 600;
}

.debug-detail {
    background: #f3f4f6;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    white-space: pre-wrap;
}

.site-footer {
    color: #6b7280;
    font-size: 0.875rem;
    padding: 1.5rem 0;
}

/* Forms */
.auth-card {
    max-width: 420px;
}

form label {
    display: block;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

form input[type="text"],
form input[type="email"],
form input[type="password"] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
}

.field-hint {
    color: #6b7280;
    font-size: 0.8125rem;
    margin: 0.25rem 0 0;
}

.password-field {
    position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
    padding-right: 3.5rem;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 0.75rem;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--color-primary);
}

form button[type="submit"] {
    margin-top: 1.25rem;
}

.field-errors {
    color: #b42318;
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

.form-error-banner {
    background: #fdecea;
    border: 1px solid #f3b4ab;
    color: #7a271a;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.form-error-banner ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Same blue as .roadmap-status-in_progress -- this is a heads-up, not a
   problem, so it deliberately doesn't borrow form-error-banner's red/error
   tone. */
.roadmap-content-updated-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.roadmap-content-updated-banner p {
    margin: 0;
}

/* Buttons that look like links, used for logout / resend inside forms */
.link-button {
    background: none;
    border: none;
    color: var(--color-accent);
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
}

.link-button:hover {
    /* button:hover's background-color would otherwise win here (higher
       specificity than .link-button's own background: none) and paint
       a solid block behind what's supposed to stay a plain text link. */
    background: none;
    color: var(--color-accent-hover);
}

.site-header .link-button {
    color: #ffffff;
}

/* A text-styled destructive action (revoke, remove, cancel, archive,
   reject, delete) previously rendered identically to a harmless one like
   "Update role" - same underline, same accent color, no visual signal
   that it does something different. Same red as .button-danger so the
   two "this is destructive" treatments read as one consistent language
   instead of two unrelated ones. */
.link-button-danger {
    color: #b42318;
}

.link-button-danger:hover {
    background: none;
    color: #8c1b12;
}

.inline-form {
    display: inline;
}

.button-danger {
    background-color: #b42318;
}

/* Flash messages */
.flash-messages {
    margin-bottom: 1.5rem;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.flash-success {
    background: #e6f4ea;
    border: 1px solid #a6d8b5;
    color: #1a7f37;
}

.flash-error {
    background: #fdecea;
    border: 1px solid #f3b4ab;
    color: #7a271a;
}

/* Prompt 22: platform announcement banners (info/warning/critical) reuse
   .flash-success/.flash-error for "info"/"critical"; "warning" gets its own
   in-between color rather than being lumped in with either. */
.flash-warning {
    background: #fff8e6;
    border: 1px solid #f0d580;
    color: #7a5c00;
}

/* Profile page */
.profile-details dt {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8125rem;
    text-transform: uppercase;
    margin-top: 0.75rem;
}

.profile-details dd {
    margin: 0.15rem 0 0;
    font-size: 1rem;
}

@media (max-width: 768px) {
    /* Confirmed by measuring the rendered nav at 375px viewport width:
       with every logged-in link present it's ~814px wide - more than
       double the viewport - which forced the entire page to scroll
       horizontally, not just the nav. Below this breakpoint the nav is
       replaced by a collapsible dropdown behind the hamburger button
       (app.js's data-nav-toggle handler) instead of trying to shrink or
       wrap ~10 inline links into something usable. */
    .header-inner {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: inline-block;
    }

    .site-header nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        flex-basis: 100%;
        padding-bottom: 0.75rem;
    }

    .site-header nav.is-open {
        display: flex;
    }

    .site-header nav a,
    .site-header nav .inline-form {
        margin-left: 0;
        margin-top: 0.75rem;
    }

    .footer-nav {
        flex-wrap: wrap;
    }
}

/* Organizations */
.org-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.org-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.role-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    text-transform: capitalize;
    color: #6b7280;
}

/* Every <table> in the app is wrapped in this (see the template files) -
   confirmed on a real page at 375px width that an unwrapped wide table
   forces the *entire page* to scroll horizontally, not just the table.
   Scoping the scroll to the table itself keeps the rest of the page
   (nav, headings, surrounding text) usable on a narrow screen. */
.table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
}

.table-wrapper table {
    margin-top: 0;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.members-table th,
.members-table td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
    /* A long unbroken token (a detail message, an IPv6 address, a
       before/after diff value) has no spaces for the browser's default
       table layout to wrap on, so without this it just widens the whole
       column -- and therefore the whole table -- past the viewport
       instead of wrapping. */
    overflow-wrap: break-word;
}

/* Fixed, guaranteed-to-fit column proportions for the audit log's plain
   text/date columns -- table-layout: auto would still let a long Detail
   value or before/after diff push the table wider than the viewport even
   with overflow-wrap set, since auto-layout sizes columns from their
   preferred (unwrapped) content width first. */
.audit-log-table {
    table-layout: fixed;
}

.audit-log-table th:nth-child(1), .audit-log-table td:nth-child(1) { width: 13%; }
.audit-log-table th:nth-child(2), .audit-log-table td:nth-child(2) { width: 8%; }
.audit-log-table th:nth-child(3), .audit-log-table td:nth-child(3) { width: 13%; }
.audit-log-table th:nth-child(4), .audit-log-table td:nth-child(4) { width: 13%; }
.audit-log-table th:nth-child(5), .audit-log-table td:nth-child(5) { width: 43%; }
.audit-log-table th:nth-child(6), .audit-log-table td:nth-child(6) { width: 10%; }

.members-table select {
    padding: 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

form select {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
}

/* Marketing pages */
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.button-primary,
.button-secondary {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
}

.button-primary {
    background-color: var(--color-accent);
    color: #ffffff;
}

.button-primary:hover {
    opacity: 0.9;
}

.button-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.button-secondary:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

.cta-banner {
    background-color: var(--color-primary);
    color: #ffffff;
    border-radius: 8px;
    padding: 2rem;
    margin-top: 1.5rem;
    text-align: center;
}

.cta-banner h2 {
    margin-top: 0;
}

.cta-banner .cta-row {
    justify-content: center;
}

.cta-banner .button-secondary {
    color: #ffffff;
    border-color: #ffffff;
}

.cta-banner .button-secondary:hover {
    background-color: #ffffff;
    color: var(--color-primary);
}

.step-list {
    padding-left: 1.25rem;
}

.step-list li {
    margin-bottom: 0.75rem;
}

.feature-list {
    padding-left: 1.25rem;
    margin: 0.75rem 0;
}

.feature-list li {
    margin-bottom: 0.5rem;
}

/* Pricing */
.billing-toggle {
    display: inline-flex;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 0.25rem;
    background-color: #f3f4f6;
    border-radius: 8px;
}

.billing-toggle button {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.billing-toggle button[aria-pressed="true"] {
    background-color: #ffffff;
    color: var(--color-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.pricing-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.pricing-card h2 {
    margin-top: 0;
    color: var(--color-primary);
}

.plan-description {
    color: #6b7280;
    min-height: 3rem;
}

.plan-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0;
}

.plan-price-period {
    font-size: 1rem;
    font-weight: 400;
    color: #6b7280;
}

.plan-price-annual {
    color: #6b7280;
    margin-top: 0.25rem;
}

.plan-limits {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    font-weight: 600;
}

.pricing-card .button-primary {
    text-align: center;
    margin-top: auto;
}

/* Contact */
.contact-details dt {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8125rem;
    text-transform: uppercase;
    margin-top: 0.75rem;
}

.contact-details dd {
    margin: 0.15rem 0 0;
}

/* Onboarding */
.progress-bar {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    height: 0.75rem;
    overflow: hidden;
    margin: 0.75rem 0;
}

.progress-bar-fill {
    background: var(--color-accent);
    height: 100%;
}

.onboarding-steps {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.onboarding-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.onboarding-step-status {
    font-size: 0.8125rem;
    color: #6b7280;
}

.onboarding-step-status.is-complete {
    color: #1a7f37;
    font-weight: 600;
}

.checkbox-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.checkbox-list li {
    padding: 0.4rem 0;
}

.checkbox-list label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
    margin: 0;
}

form textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

form input[type="number"] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
}

/* Admin: dense inline-edit rows (each row is its own <form>, laid out with
   flexbox rather than a <table> — a <form> can't validly wrap multiple
   <td> cells in a <tr>). */
.editable-list {
    margin: 1rem 0;
}

.editable-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.editable-row-header {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8125rem;
    text-transform: uppercase;
}

.editable-row input[type="text"],
.editable-row input[type="number"],
.editable-row select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9rem;
}

.editable-row select {
    width: auto;
    flex: 0 0 auto;
}

.editable-row input[type="number"] {
    width: 4.5rem;
}

.editable-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

.editable-row textarea {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
}

/* Admin: roadmap block builder */
.roadmap-admin-block {
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0;
}

.roadmap-admin-block-inactive {
    opacity: 0.6;
}

.roadmap-admin-block-form {
    margin-top: 0.5rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
}

.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

.rich-text-toolbar button {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.rich-text-editor {
    min-height: 6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #fff;
}

.rich-text-editor:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.rich-text-editor h2, .rich-text-editor h3 { margin: 0.5rem 0 0.25rem; }
.rich-text-editor p { margin: 0 0 0.5rem; }
.rich-text-editor ul, .rich-text-editor ol { margin: 0 0 0.5rem 1.25rem; }

.roadmap-column-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.roadmap-column-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 8rem auto 1fr auto auto auto;
    gap: 0.4rem;
    align-items: center;
}

.roadmap-column-row input[type="text"],
.roadmap-column-row select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
    min-width: 0;
}

@media (max-width: 768px) {
    .roadmap-column-row {
        grid-template-columns: 1fr 1fr;
    }
}

.assessment-question {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

.assessment-question legend {
    font-weight: 600;
    padding: 0 0.4rem;
}

.review-section {
    margin-bottom: 1.5rem;
}

.review-section dt {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.8125rem;
    text-transform: uppercase;
    margin-top: 0.75rem;
}

.review-section dd {
    margin: 0.15rem 0 0;
}

/* Issue Coach rules admin: each rule's edit form is collapsed by default
   behind this summary row (see data-toggle-target in app.js) rather than
   all 190 rendering open at once. */
.admin-rule-summary {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0.6rem 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}

.admin-rule-summary:hover {
    color: var(--color-primary);
}

.admin-rule-summary .field-hint {
    font-weight: 400;
    margin-top: 0.2rem;
}

.lesson-content {
    white-space: pre-wrap;
    line-height: 1.6;
    margin: 1rem 0;
}

/* Footer navigation */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.footer-nav a {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.875rem;
}

.footer-nav a:hover {
    text-decoration: underline;
}

/* Roadmap redesign: block-based lesson/worksheet content builder and the
   customer-facing item workspace. */

.roadmap-header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.roadmap-header-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.roadmap-header-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
}

.roadmap-purpose {
    font-size: 1.0625rem;
    margin: 0.5rem 0 1rem;
}

.roadmap-header-forms {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.roadmap-header-forms .inline-form {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.roadmap-status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
}

.roadmap-status-in_progress { background: #dbeafe; color: #1e40af; }
.roadmap-status-blocked { background: #fee2e2; color: #991b1b; }
.roadmap-status-awaiting_approval { background: #fef3c7; color: #92400e; }
/* Matches in_progress rather than a red/error tone -- changes_requested
   still means "not done yet, keep working on it," the same family as
   in_progress, not a failure state. The red version made a routine
   revision request look identical to an error, and sat too close to the
   snake-path's orange "current step" glow to tell apart at a glance. */
.roadmap-status-changes_requested { background: #dbeafe; color: #1e40af; }
.roadmap-status-complete { background: #dcfce7; color: #166534; }
.roadmap-status-skipped { background: #f3f4f6; color: #6b7280; }

.roadmap-status-icon-attention {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #1e40af;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.roadmap-progress {
    margin: 1rem 0 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.roadmap-progress-bar {
    height: 0.5rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.roadmap-progress-fill {
    height: 100%;
    background: var(--color-primary);
    transition: width 0.2s ease;
}

/* ===== Roadmap visual journey (snake path) =====
   Two horizontal "slots" a milestone circle can sit in, expressed as CSS
   custom properties so the connector SVGs (which need the exact same
   numbers to line up) and the mobile override below both read from one
   source of truth instead of duplicating magic numbers. */
.roadmap-path {
    --roadmap-slot-left: 24%;
    --roadmap-slot-right: 76%;
    position: relative;
    max-width: 46rem;
    margin: 2.5rem auto 0;
}

.roadmap-regenerate-row {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.roadmap-endpoint {
    display: flex;
    justify-content: center;
}

.roadmap-endpoint span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1.25rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
}

.roadmap-endpoint-start span {
    background: var(--color-primary);
    color: #ffffff;
}

.roadmap-endpoint-success span {
    background: #dcfce7;
    color: #166534;
}

.roadmap-endpoint-success-reached span {
    background: #166534;
    color: #ffffff;
}

.roadmap-endpoint-connector {
    height: 2.5rem;
}

.roadmap-path-header {
    text-align: center;
}

.roadmap-path-stat {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0.25rem 0 0.75rem;
}

.roadmap-path-complete-note {
    color: #166534;
    font-weight: 600;
    margin-top: 0.75rem;
}

.roadmap-empty-path {
    text-align: center;
    color: #6b7280;
    padding: 2rem 0;
}

.roadmap-milestone-row {
    position: relative;
    display: flex;
    min-height: 10.5rem;
}

.roadmap-milestone-row.side-left { justify-content: flex-start; }
.roadmap-milestone-row.side-right { justify-content: flex-end; }

/* The circle IS the milestone — name and status both live inside it, and
   the whole shape is the link (its accessible name is just the task
   name text it already contains). Status is carried entirely by the
   ring/fill color, per the "keep it simple" brief, so there's no
   separate status word competing for space with the task name inside a
   fairly small shape. */
.roadmap-token {
    position: absolute;
    top: 50%;
    left: var(--roadmap-slot-left);
    transform: translate(-50%, -50%);
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.75rem;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
    z-index: 2;
}

.roadmap-token:hover {
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.14);
}

.side-right .roadmap-token { left: var(--roadmap-slot-right); }

.roadmap-token-name {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.roadmap-token-check {
    font-size: 1.5rem;
    line-height: 1;
}

.roadmap-token-complete {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.roadmap-token-skipped {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #9ca3af;
}

.roadmap-token-current {
    border-color: var(--color-accent);
    color: var(--color-accent);
    /* Decorative-only use of the true brand orange (not body text — see
       :root's comment on why --color-accent is a darkened, AA-passing
       shade): a soft glow ring is a large, low-contrast wash behind the
       token, never text a reader needs to parse. */
    box-shadow: 0 0 0 7px rgba(227, 113, 46, 0.18);
}

/* Same blue as .roadmap-status-changes_requested/in_progress, not a red
   error tone -- "needs changes" is still an in-progress state, and red
   here read too close to the "current step" orange glow to tell apart. */
.roadmap-token-attention {
    border-color: #1e40af;
    color: #1e40af;
}

.roadmap-token-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #1e40af;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

/* Same blue as .roadmap-token-alert -- a small corner badge rather than a
   stacked inline icon, since it layers on top of an already-solid-colored
   .roadmap-token-complete rather than replacing its checkmark. .roadmap-
   token is itself position: absolute, which already establishes the
   containing block this positions against. */
.roadmap-token-needs-review-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #1e40af;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #ffffff;
    z-index: 3;
}

.roadmap-connector {
    height: 2.5rem;
    margin: -0.25rem 0;
}

.roadmap-connector svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* A thin road-like line — solid, not dashed, and only just thicker than
   a hairline. */
.roadmap-connector path {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.roadmap-connector-traveled path {
    stroke: var(--color-primary);
}

/* Each connector renders both a desktop-shaped and a mobile-shaped path
   (computed server-side to match --roadmap-slot-left/-right at each
   breakpoint — see app/routes/roadmap.py's _connector_paths) and this
   toggles which one is actually shown, since a <path>'s d attribute can't
   respond to a media query on its own. */
.roadmap-connector-mobile-path {
    display: none;
}

@media (max-width: 768px) {
    .roadmap-connector-desktop-path {
        display: none;
    }

    .roadmap-connector-mobile-path {
        display: inline;
    }
}

.roadmap-phase-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
    z-index: 2;
}

.roadmap-phase-divider span {
    display: inline-block;
    background: var(--color-bg);
    padding: 0.3rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

@media (max-width: 768px) {
    .roadmap-path {
        /* Reduced horizontal movement, per spec — the circles sit closer
           to center on mobile rather than swinging to the far edges. */
        --roadmap-slot-left: 30%;
        --roadmap-slot-right: 70%;
    }

    .roadmap-milestone-row {
        min-height: 7.5rem;
    }

    .roadmap-token {
        width: 6.5rem;
        height: 6.5rem;
        padding: 0.5rem;
        border-width: 3px;
    }

    .roadmap-token-name {
        font-size: 0.8125rem;
        -webkit-line-clamp: 3;
    }

    .roadmap-token-check {
        font-size: 1.25rem;
    }

    .roadmap-endpoint span {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }
}

/* ===== Roadmap task detail page ===== */
.roadmap-back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.roadmap-detail-section-title {
    margin-top: 0;
}

.roadmap-completion-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* Roadmap simplification: one Markdown content field per item, rendered as
   a single clean document — comfortable reading width, generous spacing
   between headings/paragraphs/lists so numbered steps are easy to scan, and
   a real (though CSP-safe) horizontally-scrollable table rather than one
   that forces the whole page wider on mobile. */
.roadmap-content {
    max-width: 44rem;
    line-height: 1.7;
}

.roadmap-content h1, .roadmap-content h2, .roadmap-content h3, .roadmap-content h4 {
    margin: 1.75rem 0 0.75rem;
    line-height: 1.3;
}

.roadmap-content h1:first-child, .roadmap-content h2:first-child, .roadmap-content h3:first-child {
    margin-top: 0;
}

.roadmap-content p { margin: 0 0 1rem; }

.roadmap-content ul, .roadmap-content ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.roadmap-content li { margin: 0.4rem 0; }

.roadmap-content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
}

.roadmap-content a { color: var(--color-primary); }

.roadmap-content blockquote {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--color-border);
    color: #4b5563;
}

.roadmap-content code {
    background: #f3f4f6;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.roadmap-content pre {
    background: #f3f4f6;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
}

/* display:block on <table> (its rows/cells keep their normal table display)
   is what lets a wide table scroll horizontally within its own box instead
   of forcing the whole page wider — the same technique this app already
   relies on via .table-wrapper elsewhere, applied directly here since
   rendered Markdown has no wrapper element to hook. */
.roadmap-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
}

.roadmap-content th, .roadmap-content td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.roadmap-content th { background: #f9fafb; }

/* Admin content editor: Write/Preview tabs over the Markdown textarea. */
.roadmap-content-editor-tabs {
    display: flex;
    gap: 1rem;
    margin: 0.35rem 0;
}

.roadmap-content-editor-tabs [aria-pressed="true"] {
    font-weight: 700;
    color: var(--color-primary);
}

.roadmap-content-editor textarea {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}

.roadmap-content-preview {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    min-height: 12rem;
}

.roadmap-worksheet-admin-row {
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.roadmap-worksheet-admin-row .inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.roadmap-worksheets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.roadmap-worksheet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.roadmap-worksheet-info p { margin: 0.2rem 0 0; }

/* Every block gets consistent breathing room and a left accent so a long
   Build section reads as a sequence of distinct steps/fields rather than
   one continuous wall of text. */
.roadmap-block {
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: 8px;
}

.roadmap-block-heading {
    margin: 1.5rem 0 0.5rem;
}

.roadmap-block-content {
    border-left-color: var(--color-primary);
}

.roadmap-block-content h2, .roadmap-block-content h3 { margin-top: 0; }
.roadmap-block-content p:last-child,
.roadmap-block-content ul:last-child,
.roadmap-block-content ol:last-child { margin-bottom: 0; }

.roadmap-block-callout {
    border-left-color: var(--color-accent);
    background: #fff8f2;
}

.roadmap-callout-info { border-left-color: #2563eb; background: #eff6ff; }
.roadmap-callout-warning { border-left-color: #d97706; background: #fffbeb; }
.roadmap-callout-success { border-left-color: #16a34a; background: #f0fdf4; }
.roadmap-callout-tip { border-left-color: var(--color-accent); background: #fff8f2; }

.roadmap-block-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    border-left-color: var(--color-primary);
}

.roadmap-step-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
}

.roadmap-block-step p { margin: 0.25rem 0 0; }

.roadmap-block-media img {
    max-width: 100%;
    border-radius: 6px;
}

.roadmap-block-media figcaption {
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.roadmap-block-example {
    border-left-color: #16a34a;
    background: #f0fdf4;
}

.roadmap-block-input {
    border-left-color: #9ca3af;
}

.roadmap-block-missing {
    border-left-color: #dc2626;
}

.roadmap-required-flag {
    color: #b42318;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.roadmap-checklist-item {
    display: block;
    margin: 0.4rem 0;
    font-weight: 400;
}

.roadmap-autosave-status {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.roadmap-autosave-saving { color: #6b7280; }
.roadmap-autosave-saved { color: #166534; }
.roadmap-autosave-error { color: #b42318; }

.roadmap-data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 32rem;
}

.roadmap-data-table th,
.roadmap-data-table td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.roadmap-data-table th {
    background: #f9fafb;
    font-size: 0.8125rem;
}

.roadmap-data-table input[type="text"],
.roadmap-data-table input[type="date"],
.roadmap-data-table textarea {
    width: 100%;
    min-width: 8rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.3rem 0.4rem;
    font-size: 0.875rem;
    font-family: inherit;
}

.roadmap-table-row-actions {
    white-space: nowrap;
}

.roadmap-table-row-actions button {
    margin-right: 0.25rem;
}

.roadmap-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.25rem 0;
}

.roadmap-review-actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.roadmap-print-links {
    text-align: center;
    font-size: 0.9375rem;
}

@media (max-width: 768px) {
    .roadmap-header-forms {
        flex-direction: column;
        align-items: stretch;
    }

    .roadmap-block {
        padding: 0.85rem 1rem;
    }

    .roadmap-worksheet {
        flex-direction: column;
        align-items: stretch;
    }
}

@media print {
    .site-header, .site-footer, .roadmap-actions, .roadmap-review-actions,
    .roadmap-header-forms, .roadmap-print-links {
        display: none !important;
    }
}

/* Idle-logout warning (app/static/js/app.js shows/hides this by toggling
   the `hidden` attribute) */
.idle-logout-warning {
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 51, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

/* An author stylesheet's `display` always beats the browser's own
   `[hidden] { display: none }` default at equal specificity (origin
   precedence, not just specificity) -- without this override the box
   above was visible on every page load regardless of the `hidden`
   attribute, showing its static placeholder text forever and making
   app.js's hidden = true/false toggling have no visible effect at all. */
.idle-logout-warning[hidden] {
    display: none;
}

.idle-logout-warning-box {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 24rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(31, 41, 51, 0.25);
}

.idle-logout-warning-box p {
    margin: 0 0 1rem;
}

#idle-logout-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Onboarding banner (app/static/js/app.js shows/hides this by toggling
   the `hidden` attribute -- see the idle-logout comment above for why the
   [hidden] override below is required, not optional). A small corner
   banner rather than a full-viewport modal like idle-logout above, so it
   never blocks the page underneath it. */
.onboarding-banner {
    /* top: 5rem clears .site-header (~72px desktop, ~66px mobile) --
       position: fixed measures from the viewport, not the document flow,
       so anchoring at top: 1rem the way idle-logout's full-viewport modal
       can afford to would sit on top of the header bar, overlapping the
       brand logo on desktop and the hamburger toggle on mobile. */
    position: fixed;
    top: 5rem;
    left: 1rem;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 6px 20px rgba(31, 41, 51, 0.18);
    max-width: min(20rem, calc(100vw - 2rem));
}

.onboarding-banner[hidden] {
    display: none;
}

.onboarding-banner a {
    font-size: 0.875rem;
    font-weight: 600;
}

#onboarding-banner-dismiss {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

/* --- Culture Coach ------------------------------------------------- */

.culture-subnav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.culture-subnav a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-primary);
}

.culture-subnav a[aria-current="page"] {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.culture-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--color-accent);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.culture-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.75rem;
}

.culture-tag-list li {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text);
}

.culture-fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.75rem 0;
}

.culture-fact-grid dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-primary);
}

.culture-fact-grid dd {
    margin: 0;
}

.culture-goal-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.culture-goal-options label {
    display: inline-block;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
}

.culture-goal-options input {
    margin-right: 0.35rem;
}

/* --- Recognition Coach ---------------------------------------------- */

.recognition-subnav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.recognition-subnav a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-primary);
}

.recognition-subnav a[aria-current="page"] {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.accountability-subnav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.accountability-subnav a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-primary);
}

.accountability-subnav a[aria-current="page"] {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.performance-subnav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.performance-subnav a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-primary);
}

.performance-subnav a[aria-current="page"] {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.recognition-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--color-accent);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.recognition-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.75rem;
}

.recognition-tag-list li {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    color: var(--color-text);
}

.recognition-fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.75rem 0;
}

.recognition-fact-grid dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-primary);
}

.recognition-fact-grid dd {
    margin: 0;
}

.recognition-option-group {
    margin-bottom: 1rem;
}

.recognition-option-group legend {
    font-weight: 600;
    color: var(--color-primary);
}

.recognition-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.recognition-options label {
    display: inline-block;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
}

.recognition-options input {
    margin-right: 0.35rem;
}

.recognition-policy-note {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: 0.8rem;
    color: var(--color-text);
}

.recognition-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    margin: 0.75rem 0;
}

.recognition-stat-card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.recognition-stat-card .recognition-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Scorecards card grid: one flip card per metric, 3 to a row. */
.metric-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .metric-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .metric-card-grid { grid-template-columns: 1fr; }
}

.metric-card {
    perspective: 1000px;
    aspect-ratio: 2.5 / 3.5;
    min-height: 220px;
}

.metric-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.metric-card.is-flipped .metric-card-inner {
    transform: rotateY(180deg);
}

.metric-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.metric-card-back {
    transform: rotateY(180deg);
}

.metric-card-eyebrow {
    font-size: 0.8125rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.25rem;
}

.metric-card-title {
    margin: 0 0 0.5rem;
}

.metric-card-target,
.metric-card-current {
    margin: 0.15rem 0;
}

.metric-card-current {
    font-size: 1.4rem;
    font-weight: 700;
}

.metric-card-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
}

.metric-card-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-y: auto;
}

.metric-card-history-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.metric-status-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.metric-status-on_target,
.metric-status-complete {
    background: #e6f4ea;
    border: 1px solid #a6d8b5;
    color: #1a7f37;
}

.metric-status-at_risk {
    background: #fff8e6;
    border: 1px solid #f0d580;
    color: #7a5c00;
}

.metric-status-off_target,
.metric-status-incomplete {
    background: #fdecea;
    border: 1px solid #f3b4ab;
    color: #7a271a;
}

.metric-status-not_set {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #9ca3af;
}

/* Tasks: rolling action queue -- one plain row per task, not a table, so
   it can reflow to a single column on narrow screens without becoming a
   dense/horizontally-scrolling grid. */
.task-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

/* Grid, not flex: a flex row with wrapping main content would let the
   actions column drift to different x-positions row to row (it wraps
   onto its own line, flush-left, whenever a row's title/context content
   is long enough to need it). A fixed 2-column grid keeps the actions
   pinned to the same right-hand column on every row regardless of how
   much the main content wraps internally. */
.task-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
}

.task-row:last-child {
    border-bottom: none;
}

.task-row-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
}

.task-row-status {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 8.5rem;
}

/* Same danger red already used by .field-errors -- not a new color. */
.task-row-status-overdue {
    color: #b42318;
}

.task-row-title {
    font-weight: 600;
}

.task-row-context {
    font-size: 0.8125rem;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
}

.task-row-exact-due {
    margin: 0;
}

.task-row-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.task-row-actions form {
    margin: 0;
}

.task-row-actions form button[type="submit"] {
    /* Overrides the global form button[type="submit"] margin-top (same fix
       as .site-header nav .inline-form button[type="submit"] above): the
       Complete button has no fields above it to be spaced away from, but
       without this it sat 1.25rem lower than Reschedule right next to it. */
    margin-top: 0;
}

.task-row-reschedule {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
}

.task-row-reschedule form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.task-row-reschedule input[type="date"],
.task-row-reschedule input[type="time"] {
    padding: 0.35rem 0.5rem;
}

/* The JS-rendered "Task completed. Undo" bar that replaces a row on
   Complete -- same success green already used by .flash-success. */
.task-row-undo {
    justify-content: flex-start;
    gap: 0.5rem;
    color: #1a7f37;
}

/* Floating task-control widget (partials/_task_widget.html) -- fixed to
   the bottom-right corner of a task's destination page so Complete/
   Reschedule stay reachable without scrolling to find them. Collapses
   via the existing generic data-toggle-target handler. */
.task-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: min(360px, calc(100vw - 2.5rem));
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
    z-index: 500;
}

.task-float-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 0.7rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
}

.task-float-header:hover {
    background-color: var(--color-primary);
}

.task-float-chevron {
    transition: transform 0.15s ease;
}

.task-float-header[aria-expanded="false"] .task-float-chevron {
    transform: rotate(-90deg);
}

.task-float-body {
    margin: 0;
    padding: 0.25rem 1rem 0.5rem;
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

/* The widget's own width (min(360px, ...), see .task-float above) is
   narrow enough that .task-row's normal 2-column grid squeezes the main
   content column toward 0 -- the actions column is auto-sized to fit its
   flex content (the "Completes automatically" hint text plus the
   Reschedule button) at its full, unwrapped width, which alone can be
   wider than the whole widget. Same fix as the @media (max-width: 600px)
   single-column fallback below, applied unconditionally here since the
   widget stays this narrow regardless of viewport width. */
.task-float .task-row {
    grid-template-columns: 1fr;
}

.task-float .task-row-actions {
    width: 100%;
    justify-content: flex-start;
}

.task-row-complete-hint {
    margin: 0;
}

.task-scope-toggle {
    font-size: 0.9375rem;
}

.task-secondary-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .task-row {
        grid-template-columns: 1fr;
    }

    .task-row-actions {
        width: 100%;
        justify-content: flex-start;
    }
}