:root {
    /* ── Core palette ────────────────────────────────────────────────── */
    --cb-bg: #ebe3d2;
    --cb-surface: rgba(255, 255, 255, 0.88);
    --cb-surface-strong: rgba(21, 34, 46, 0.92);
    --cb-surface-muted: rgba(21, 34, 46, 0.035);
    --cb-text: #15222e;
    --cb-muted: #5c6773;
    --cb-accent: #0f766e;
    --cb-accent-strong: #115e59;
    --cb-border: rgba(21, 34, 46, 0.1);

    /* ── Semantic colour tokens ──────────────────────────────────────── */
    /* Success — green scale */
    --cb-success: #15803d;
    /* text / icon */
    --cb-success-strong: #166534;
    /* headings / emphasis */
    --cb-success-subtle: #16a34a;
    /* fills / decoration only — ~3.3:1 on white, too weak for text */
    --cb-success-bg: rgba(16, 185, 129, 0.14);
    /* Danger — red scale */
    --cb-danger: #b91c1c;
    /* text / icon (most common) */
    --cb-danger-strong: #991b1b;
    /* headings / emphasis */
    --cb-danger-bg: rgba(239, 68, 68, 0.12);
    --cb-danger-dot: #ef4444;
    /* status-dot fill */
    /* Info / link — blue scale */
    --cb-info: #1d4ed8;
    /* text / icon */
    --cb-info-bg: rgba(59, 130, 246, 0.12);
    /* Warning — amber */
    --cb-warning: #d97706;
    --cb-warning-strong: #92400e;
    /* text on warning backgrounds */
    --cb-warning-bg: rgba(245, 158, 11, 0.12);
    /* Neutral / muted badge */
    --cb-neutral: #64748b;

    /* ── Form focus tokens ───────────────────────────────────────────── */
    /* Static fallbacks equal the color-mix() results below for --cb-accent. */
    --cb-focus-border: #6fada8;
    --cb-focus-ring: rgba(15, 118, 110, 0.16);

    /* ── Shadow tokens ───────────────────────────────────────────────── */
    /* Generic card shadow used by .cb-shadow and similar utilities */
    --cb-shadow: 0 18px 42px rgba(21, 34, 46, 0.1);
    /* Elevated surface (modals, dropdowns, popovers) */
    --cb-shadow-elevated: 0 20px 48px -18px rgba(5, 23, 49, 0.3), 0 8px 18px rgba(5, 23, 49, 0.12);
    /* Subtle card / badge lift */
    --cb-shadow-sm: 0 2px 8px rgba(21, 34, 46, 0.08);
    /* Card hover / focus accent */
    --cb-shadow-accent: 0 4px 12px rgba(15, 118, 110, 0.08);
    /* Inline card (mobile list tiles) */
    --cb-shadow-card: 0 6px 16px -10px rgba(5, 23, 49, 0.25), 0 2px 6px rgba(5, 23, 49, 0.05);
    /* Panel medium lift */
    --cb-shadow-panel: 0 10px 20px rgba(21, 34, 46, 0.08);

    /* ── Transition duration tokens ─────────────────────────────────── */
    /* Fast interactions: hover colours, opacity toggles */
    --cb-duration-fast: 120ms;
    /* Standard UI transitions: buttons, inputs, nav links */
    --cb-duration-normal: 160ms;
    /* Slightly heavier transitions: toggles, dropdowns */
    --cb-duration-medium: 180ms;
    /* Fade-in/out of overlays and backdrops */
    --cb-duration-slow: 240ms;
    /* Panels sliding in (sidebar, modals) */
    --cb-duration-slide: 280ms;

    /* ── Layout ──────────────────────────────────────────────────────── */
    --cb-sidebar-width: 15.75rem;
    --cb-content-max: 110rem;
    --cb-gutter: 1rem;
    --cb-gutter-lg: 1.4rem;
    --cb-sidebar-nav-gap: 0.7rem;
    --cb-sidebar-link-block: 3.4rem;
    --cb-mobile-gutter-left: max(1.25rem, env(safe-area-inset-left));
    --cb-mobile-gutter-right: max(1.25rem, env(safe-area-inset-right));
    --cb-mobile-topbar-height: 3.5rem;
    --cb-footer-safe-gap: 0.75rem;
    --cb-footer-viewport-reserve: calc(3.55rem + 1rem + var(--cb-footer-safe-gap));
    --cb-app-main-vertical-padding: 2.5rem;
    /* Dashboard-derived distance from the page header to its first content surface. */
    --cb-page-stack-gap: 1rem;
    --cb-page-header-content-gap: 2.2rem;

    /* ── Feature-specific layout ─────────────────────────────────────── */
    --cb-ssllabs-site-column-width: clamp(11rem, 14vw, 14.5rem);
    --cb-ssllabs-scheduler-column-width: clamp(15rem, 19vw, 20rem);
    --cb-ssllabs-actions-column-width: 5.5rem;
    --cb-ssllabs-domain-grid: minmax(0, 1fr) var(--cb-ssllabs-scheduler-column-width) var(--cb-ssllabs-actions-column-width);
    --cb-table-control-size: 2rem;
    --cb-table-toolbar-size: 2.125rem;
    --cb-table-cell-padding-block: 0.375rem;
    --cb-table-action-gap: 0.375rem;
    --cb-sites-table-min-width: 48rem;
    --cb-sites-site-column-width: clamp(12rem, 24%, 15rem);
    --cb-sites-certificate-column-width: 15rem;
    --cb-sites-actions-column-width: 9.75rem;

    /* ── Z-index scale ───────────────────────────────────────────────── */
    --cb-z-backdrop: 1029;
    --cb-z-sidebar: 1030;
    --cb-z-mobile-toggle: 1040;
    /* Above Bootstrap's own --bs-toast-zindex (1090) so toasts win against the
       sidebar/backdrop, but below the skip link. */
    --cb-z-toast: 1095;
    --cb-z-skip-link: 1100;

    /* ── Pill / badge sizing ─────────────────────────────────────────── */
    /* Single source of truth for compact badge/pill sizing.
       Based on the .site-cert__days reference pill. */
    --cb-pill-min-height: 1.35rem;
    --cb-pill-padding-inline: 0.45rem;
    --cb-pill-gap: 0.3rem;
    --cb-pill-radius: 999px;
    --cb-pill-font-size: 0.74rem;
    --cb-pill-font-weight: 700;
}

@supports (color: color-mix(in srgb, black 50%, white 50%)) {
    :root {
        --cb-focus-border: color-mix(in srgb, var(--cb-accent) 60%, white 40%);
        --cb-focus-ring: color-mix(in srgb, var(--cb-accent) 16%, transparent);
    }
}

html,
body {
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: var(--cb-text);
}

/* Page backdrop is painted once on the root; body must be explicitly
   transparent (Bootstrap reboot paints it with --bs-body-bg) so the gradient
   shows through without being rasterised twice. */
html {
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.12), transparent 26%),
        radial-gradient(circle at right top, rgba(217, 119, 6, 0.12), transparent 18%),
        linear-gradient(180deg, #f6f1e7 0%, #e8dfd0 100%);
}

body {
    background: transparent;
}

html:has(body.app-body--menu-open),
body.app-body--menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.app-body--menu-open {
    touch-action: auto;
}

body.app-body--menu-open .sidebar-backdrop {
    touch-action: none;
}

body.app-body--menu-open .app-sidebar {
    overscroll-behavior: contain;
}

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

.app-skip-link:focus-visible {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    left: max(1rem, env(safe-area-inset-left));
    z-index: var(--cb-z-skip-link);
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.9rem 1.2rem;
    clip: auto;
    border-radius: 1rem;
    background: var(--cb-accent-strong);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--cb-shadow);
}

.app-shell {
    display: grid;
    min-height: 100dvh;
    overflow-x: hidden;
    grid-template-columns: var(--cb-sidebar-width) minmax(0, 1fr);
    grid-template-rows: minmax(100dvh, auto);
}

.app-shell--public {
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr);
}

.app-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(15, 118, 110, 0.92));
    color: #f8fafc;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-footer {
    margin-top: 1.5rem;
}

.brand-mark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    min-block-size: 2.5rem;
    padding: 0.4rem 0.35rem;
    color: inherit;
}

.brand-mark__kicker,
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    /* Small (0.72rem) uppercase label: rgba(...,0.55) lands at ~3.8:1 on the
       page background, below WCAG AA for small text. 0.65 reaches ~5:1. */
    color: rgba(15, 23, 42, 0.65);
}

.app-sidebar .brand-mark__kicker {
    /* Light label over the teal end of the sidebar gradient: 0.6 opacity is
       ~2.9:1. Strengthen to clear AA across the whole gradient. */
    color: rgba(248, 250, 252, 0.92);
}

.brand-mark__name {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
}

.brand-mark__logo-wrap {
    display: block;
    max-width: min(10.75rem, 100%);
}

.brand-mark__logo {
    display: block;
    width: 100%;
    height: auto;
}

.app-sidebar .brand-mark__logo {
    filter: brightness(0) invert(1);
    opacity: 0.96;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: var(--cb-sidebar-nav-gap);
}

.app-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.95rem;
    min-block-size: var(--cb-sidebar-link-block);
    padding: 0.85rem 1rem;
    /* Inactive nav label over the teal gradient end sits at ~3.9:1 at 0.78;
       0.92 clears AA without losing the active/inactive distinction (active
       links also gain a background highlight). */
    color: rgba(248, 250, 252, 0.92);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--cb-duration-normal) ease, color var(--cb-duration-normal) ease, box-shadow var(--cb-duration-normal) ease;
}

.app-nav__icon {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    flex: 0 0 auto;
}

.app-nav__label {
    min-width: 0;
}

.app-nav__link:hover,
.app-nav__link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.min-w-120 {
    min-width: 120px;
}

.cb-touch-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.375rem;
}

/* Global focus states using :where() for low specificity and maintainability */
:where(.brand-mark, .app-nav__link, .btn, .btn-close, .mobile-menu-toggle, .tag-input__remove):focus-visible {
    outline: 3px solid var(--cb-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.24);
}

@supports (color: color-mix(in srgb, black 50%, white 50%)) {
    :where(.brand-mark, .app-nav__link, .btn, .btn-close, .mobile-menu-toggle, .tag-input__remove):focus-visible {
        outline-color: color-mix(in srgb, var(--cb-accent) 72%, white 28%);
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cb-accent) 24%, transparent);
    }
}



.sidebar-user {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.sidebar-user__avatar {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-weight: 700;
}

.app-main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    gap: 1.1rem;
    min-height: 0;
    padding: 2rem 1.5rem 0.35rem;
}

.app-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
}

.app-content--public {
    min-height: 100vh;
    min-height: 100svh;
}

.app-main--public {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding:
        max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    overflow-y: auto;
    overflow-x: hidden;
}

.app-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 3.55rem;
    padding: 0 1.5rem max(1rem, env(safe-area-inset-bottom));
    margin-top: auto;
    margin-bottom: 0;
    font-size: 0.78rem;
    color: var(--cb-muted);
}

.app-footer__inner {
    display: flex;
    width: 100%;
    gap: 1rem;
    justify-content: center;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-footer__inner::-webkit-scrollbar {
    display: none;
}

.cb-footer-content {
    display: inline-flex;
    width: max-content;
    min-width: max-content;
    margin-inline: auto;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.cb-footer-text,
.cb-footer-separator {
    flex: 0 0 auto;
}

.cb-footer-separator {
    margin-inline-end: -0.12rem;
}

.cb-footer-link {
    color: inherit;
    transition: color 0.15s ease-in-out;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.45rem 0.3rem;
    border-radius: 999px;
}

.cb-footer-link:focus-visible {
    color: var(--cb-text);
}

.cb-footer-link-icon {
    flex: 0 0 auto;
    padding: 0;
    opacity: 0.8;
}

@media (max-width: 575.98px) {
    .app-footer {
        font-size: 0.72rem;
    }

    .cb-footer-content {
        gap: 0.28rem;
    }
}

/* The single-line footer is wider than 320px phones; let it wrap there. */
@media (max-width: 374.98px) {
    .cb-footer-content {
        width: auto;
        min-width: 0;
        flex-wrap: wrap;
        row-gap: 0;
        white-space: normal;
    }
}

.app-container {
    width: 100%;
    max-width: var(--cb-content-max);
    margin-inline: auto;
}

/* Toasts are anchored to the bottom of the viewport, not the top. Top-right put
   them straight over .app-page__header — covering (and blocking clicks on) the
   dashboard status pill and the page action buttons — and over the fixed
   .mobile-topbar between 576px and 991.98px. The bottom edge carries only the
   footer, and on touch devices it is the easier corner to reach. */
.app-toast-stack {
    z-index: var(--cb-z-toast);
    display: grid;
    gap: 0.75rem;
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
    max-width: min(100vw - 1.5rem, 24rem);
}

/* The grid gap owns the spacing between stacked toasts; Bootstrap's own
   --bs-toast-spacing margin would add another 1.5rem on top of it. */
.app-toast-stack> :not(:last-child) {
    margin-bottom: 0;
}

/* Off-screen rest position. App.setToastExitOffset sets the exact distance per
   toast; the fallback (before JS runs) clears the stack inset, the p-3 padding
   and the shadow. */
.app-toast-stack .toast.toast-slide {
    display: block;
    width: 100%;
    box-shadow: var(--cb-shadow-sm);
    will-change: transform;
    transform: translate3d(var(--cb-toast-exit-x, calc(100% + 2.5rem + env(safe-area-inset-right, 0px))), 0, 0);
    transition: transform var(--cb-duration-slide) cubic-bezier(0.22, 1, 0.36, 1);
}

.app-toast-stack .toast-body {
    padding-inline-end: 0.25rem;
}

/* The slide is driven by .is-entered (see App.initializeAutoDismissToasts), not
   by Bootstrap's Toast plugin: it sets .show and .showing together at the start
   of both its show and hide sequence, and .showing makes the toast transparent,
   so a slide keyed off those classes was never visible. */
.app-toast-stack .toast.toast-slide.is-entered {
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .app-toast-stack .toast.toast-slide {
        transition: none;
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .app-toast-stack {
        bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
        left: max(0.75rem, env(safe-area-inset-left)) !important;
        right: max(0.75rem, env(safe-area-inset-right)) !important;
        max-width: none;
        /* Bootstrap's .toast-container is width:max-content, so the left/right
           insets alone would not stretch a short message across the viewport. */
        width: auto;
    }
}

/* A full-width toast has no free edge to slide in from horizontally, so it rises
   from the bottom instead. Kept in its own query so the reduced-motion rule
   above is not overridden by source order. The toast's own height only clears
   the bottom one of a stack, so the per-toast --cb-toast-exit-y carries the
   distance from each toast to below the viewport; until JS sets it, a full
   viewport height clears every toast in the stack. */
@media (max-width: 575.98px) and (prefers-reduced-motion: no-preference) {

    .app-toast-stack .toast.toast-slide {
        transform: translate3d(0, var(--cb-toast-exit-y, calc(100vh + 1rem)), 0);
    }
}

/* Bootstrap's .btn-close is a 1em content box (~21px inside a toast), well under
   the ~44px pointer-target guidance in WCAG 2.5.8 / 2.5.5. */
.app-toast-stack .btn-close {
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0.15rem 0.15rem 0.15rem 0;
    padding: 0;
    background-position: center;
    background-size: 0.75rem;
    border-radius: 0.65rem;
}

/* Same 44px target for modal close buttons; the matching negative margin keeps
   the icon where Bootstrap puts it and the header at its original height. */
.modal-header .btn-close {
    padding: 0.875rem;
    margin: -0.875rem -0.875rem -0.875rem auto;
}

.app-page {
    --cb-page-header-margin-bottom: calc(var(--cb-page-header-content-gap) - var(--cb-page-stack-gap));
    display: grid;
    gap: var(--cb-page-stack-gap);
    min-width: 0;
}

.app-page__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    min-width: 0;
    margin-bottom: var(--cb-page-header-margin-bottom);
}

.app-page__lede {
    max-width: 72ch;
    min-width: 0;
}

.app-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.app-grid {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    margin-inline: 0;
    /* Grid item of the .app-page grid: without min-width:0 its automatic
       minimum is min-content, so wide scrollable children (the Caddyfile
       editor, the sites table) blow the layout past the viewport and get
       clipped by the shell's overflow-x:hidden instead of scrolling. */
    min-width: 0;
}

/* Bootstrap gutters belong between sibling panels, not between the first or
   last panel and its page heading. */
.app-grid> :first-child {
    padding-inline-start: 0;
}

.app-grid> :last-child {
    padding-inline-end: 0;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: stretch;
    min-width: 0;
}

/* Dashboard uses unified .app-page structure */

.dashboard-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    border: 1px solid var(--cb-border);
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--cb-muted);
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-status__meta {
    color: var(--cb-muted);
}

[data-ui-lint-dynamic] {
    min-width: 3ch;
}

.status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #94a3b8;
}

.status-dot--online {
    background: #10b981;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.15);
    }
}

.status-dot--offline {
    background: var(--cb-danger-dot);
}

.version-badge {
    font-family: var(--bs-font-monospace);
    font-size: 0.82em;
    background: rgba(0, 0, 0, 0.06);
    padding: 0.15em 0.4em;
    border-radius: 0.3rem;
}

[data-bs-theme="dark"] .version-badge {
    background: rgba(255, 255, 255, 0.1);
}

.dashboard-empty-state {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    width: auto;
    margin-inline: calc(0.85rem * 0.5);
}

/* Auth / Login */
.auth-shell {
    width: 100%;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.auth-card {
    width: calc(100% - 2rem);
    max-width: 400px;
    padding: 0;
    border-radius: 1.5rem;
    background: var(--cb-surface);
    box-shadow: var(--cb-shadow-elevated);
}

.auth-card--shake {
    animation: auth-card-shake 0.34s ease-in-out;
}

@keyframes auth-card-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-0.45rem);
    }

    40% {
        transform: translateX(0.4rem);
    }

    60% {
        transform: translateX(-0.3rem);
    }

    80% {
        transform: translateX(0.2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card--shake {
        animation: none;
    }
}

.auth-brand {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    margin-bottom: 2rem;
}

.auth-brand__logo-wrap {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: var(--cb-surface);
    border: 1px solid rgba(15, 118, 110, 0.1);
    box-shadow: var(--cb-shadow-accent);
}

.auth-brand__logo-wrap--wordmark {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-brand__logo {
    width: 2.5rem;
    height: 2.5rem;
}

.auth-brand__logo--wordmark {
    width: min(15rem, 100%);
    height: auto;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18)) drop-shadow(0 3px 6px rgba(15, 23, 42, 0.12));
}

@media (max-height: 48rem) {
    .app-main--public {
        align-items: flex-start;
    }
}

.auth-brand__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cb-muted);
}

.auth-card__header {
    margin-bottom: 1.75rem;
    text-align: center;
}

.auth-card__title {
    margin-bottom: 0.25rem;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.auth-card__subtitle {
    margin: 0;
    line-height: 1.5;
    font-size: 0.96rem;
    max-width: 30ch;
    margin-inline: auto;
}

.auth-form {
    display: block;
}

.cb-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.auth-form__group {
    display: grid;
    gap: 0;
}

.auth-form__group--last {
    margin-bottom: 0.25rem;
}

.auth-field-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cb-muted);
}

.auth-form__control {
    min-height: 3.35rem;
    border-radius: 0.95rem;
    border-color: rgba(21, 34, 46, 0.12);
    padding-inline: 0.95rem;
    background: rgba(255, 255, 255, 0.92);
}

.auth-form__control:focus {
    border-color: var(--cb-focus-border);
    box-shadow: 0 0 0 0.25rem var(--cb-focus-ring);
}

.app-page--narrow {
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
}

.auth-form__submit {
    min-height: 3.35rem;
    margin-top: 0.25rem;
    border-radius: 0.95rem;
    font-weight: 600;
}

.setup-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0.75rem;
}

.setup-check {
    font-size: 0.85rem;
    color: var(--cb-text-secondary, #6c757d);
    padding: 0.15rem 0 0.15rem 1.5rem;
    position: relative;
    transition: color 0.15s;
}

.setup-check::before {
    content: "○";
    position: absolute;
    left: 0;
    color: var(--cb-text-secondary, #6c757d);
}

.setup-check--pass {
    color: var(--cb-success, #198754);
}

.setup-check--pass::before {
    content: "✓";
    color: var(--cb-success, #198754);
}

.setup-check--fail {
    color: var(--cb-danger, #dc3545);
}

.setup-check--fail::before {
    content: "✗";
    color: var(--cb-danger, #dc3545);
}

@media (max-width: 575.98px) {
    .auth-shell {
        padding: 1rem;
    }

    .auth-card {
        padding: 1.5rem;
        border-radius: 1.4rem;
    }

    .setup-checklist {
        grid-template-columns: repeat(2, 1fr);
    }
}

.panel-card,
.metric-card {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: 1.15rem;
    box-shadow: var(--cb-shadow);
    padding: 1.05rem;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.metric-grid .metric-card,
.hero-metric {
    height: 100%;
}

@media (min-width: 768px) {
    .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.panel-card--table {
    padding: 0.85rem 0 0;
    overflow: hidden;
}

.panel-card--highlight {
    border-color: var(--bs-primary);
    border-width: 2px;
}

.panel-card--highlight .panel-card__header {
    color: var(--bs-primary);
}



.caddyfile-editor-panel__form,
.caddyfile-editor-panel__body {
    min-height: 0;
}

.panel-card__body {
    padding-top: 0.5rem;
}

.panel-card--table .panel-card__header {
    padding-inline: 1.05rem;
}

.panel-card--table .table-responsive {
    padding: 0 0.45rem 0.45rem;
}

.code-editor-textarea-source {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.cm-editor {
    background: var(--cb-surface);
    color: var(--cb-text);
}

.cm-editor .cm-scroller {
    overflow: auto;
}

.cm-editor .cm-activeLine {
    background: color-mix(in srgb, var(--cb-accent) 8%, transparent);
}

.cm-editor .cm-activeLineGutter {
    background: color-mix(in srgb, var(--cb-accent) 12%, transparent);
}

.cm-editor .cm-tooltip {
    border-color: var(--cb-border);
    border-radius: 0.5rem;
    box-shadow: var(--cb-shadow);
}

.cm-editor .cm-diagnostic-error {
    border-left-color: #dc3545;
}

/* Conditional backdrop-filter for performance */
@supports (backdrop-filter: blur(16px)) {

    .panel-card,
    .metric-card {
        backdrop-filter: blur(16px);
    }
}

/* Solid fallback for reduced transparency preference */
@media (prefers-reduced-transparency: reduce) {

    .panel-card,
    .metric-card {
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.95);
    }
}

.panel-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.85rem;
    min-width: 0;
}

.cb-onboarding-wizard {
    display: grid;
    gap: 1rem;
}

.cb-onboarding-wizard__progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cb-onboarding-wizard__steps {
    display: flex;
    gap: 0.85rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.cb-onboarding-wizard__step-button {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 11rem;
    border: 1px solid rgba(21, 34, 46, 0.1);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.55);
    color: var(--cb-text);
    padding: 0.8rem 0.95rem;
    text-align: left;
    transition: transform var(--cb-duration-medium) ease, background-color var(--cb-duration-medium) ease, border-color var(--cb-duration-medium) ease, box-shadow var(--cb-duration-medium) ease;
}

.cb-onboarding-wizard__step-button.is-inactive {
    opacity: 0.68;
    color: var(--cb-muted);
}

.cb-onboarding-wizard__step-button:hover:not(:disabled),
.cb-onboarding-wizard__step-button:focus-visible {
    border-color: rgba(21, 34, 46, 0.18);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--cb-shadow-panel);
    transform: translateY(-1px);
}

.cb-onboarding-wizard__step-button.is-active {
    border-color: rgba(15, 118, 110, 0.45);
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 0 3px 0 rgba(15, 118, 110, 0.92),
        0 14px 28px rgba(15, 118, 110, 0.12);
    color: var(--cb-text);
}

.cb-onboarding-wizard__step-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cb-onboarding-wizard__step-index {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.12);
    color: var(--cb-accent-strong);
    font-weight: 800;
    flex: 0 0 auto;
}

.cb-onboarding-wizard__step-button.is-inactive .cb-onboarding-wizard__step-index {
    background: rgba(92, 103, 115, 0.12);
    color: color-mix(in srgb, var(--cb-muted) 92%, white 8%);
}

.cb-onboarding-wizard__step-button.is-active .cb-onboarding-wizard__step-index {
    background: rgba(15, 118, 110, 0.12);
    color: var(--cb-accent-strong);
}

.cb-onboarding-wizard__step-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.cb-onboarding-wizard__step-title {
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.1;
}

.cb-onboarding-wizard__step-button.is-inactive .cb-onboarding-wizard__step-title,
.cb-onboarding-wizard__step-button.is-inactive .cb-onboarding-wizard__step-subtitle {
    color: var(--cb-muted);
}

.cb-onboarding-wizard__step-button.is-active .cb-onboarding-wizard__step-title {
    color: var(--cb-text);
}

.cb-onboarding-wizard__step-subtitle {
    font-size: 0.78rem;
    color: var(--cb-muted);
    line-height: 1.25;
}

.cb-onboarding-wizard__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.cb-runtime-status {
    display: grid;
    gap: 0.85rem;
}

.cb-runtime-status__row {
    display: grid;
    gap: 0.35rem;
}

.cb-runtime-status__row dt,
.cb-runtime-status__row dd {
    margin: 0;
}

.cb-onboarding-wizard__viewport {
    overflow: hidden;
}

.cb-onboarding-wizard__track {
    display: grid;
    gap: 1rem;
}

.cb-onboarding-step {
    margin: 0;
}

.cb-onboarding-step__locked {
    padding: 1.15rem 1.2rem;
    border: 1px dashed rgba(21, 34, 46, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.56);
    color: var(--cb-muted);
}

.cb-onboarding-detected {
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(21, 34, 46, 0.12);
    border-radius: 0.85rem;
    background: rgba(21, 34, 46, 0.035);
}

.cb-onboarding-detected__label {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cb-muted);
}

.cb-onboarding-detected__value {
    font-weight: 600;
    color: var(--cb-text);
}

.app-page__subtitle {
    max-width: 64ch;
    color: var(--cb-muted);
    font-size: 0.98rem;
    line-height: 1.45;
}

.cb-required-marker {
    color: var(--bs-danger);
    margin-inline-start: 0.2em;
}

.onboarding-confetti-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    color: var(--cb-success);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.6s ease 1.6s;
    white-space: nowrap;
}

.onboarding-confetti-banner.is-hiding {
    opacity: 0;
}

.cb-onboarding-field__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.cb-field-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(21, 34, 46, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--cb-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.cb-field-check__badge {
    display: grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.cb-field-check__spinner,
.cb-field-check__icon,
.cb-field-check__dot {
    display: none;
}

.cb-field-check__spinner {
    width: 1rem;
    height: 1rem;
    border-width: 0.12rem;
}

.cb-field-check__icon {
    width: 1rem;
    height: 1rem;
}

.cb-field-check__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: currentColor;
}

.cb-field-check[data-field-check-status="idle"] .cb-field-check__dot,
.cb-field-check[data-field-check-status="stale"] .cb-field-check__dot,
.cb-field-check[data-field-check-status="checking"] .cb-field-check__spinner,
.cb-field-check[data-field-check-status="passed"] .cb-field-check__icon--passed,
.cb-field-check[data-field-check-status="failed"] .cb-field-check__icon--failed {
    display: block;
}

.cb-field-check[data-field-check-status="checking"] {
    color: var(--cb-accent-strong);
    border-color: rgba(15, 118, 110, 0.22);
    background: rgba(15, 118, 110, 0.08);
}

.cb-field-check[data-field-check-status="passed"] {
    color: var(--cb-success-strong);
    border-color: rgba(22, 101, 52, 0.18);
    background: rgba(34, 197, 94, 0.12);
}

.cb-field-check[data-field-check-status="failed"] {
    color: var(--cb-danger);
    border-color: rgba(180, 35, 24, 0.16);
    background: rgba(244, 63, 94, 0.08);
}

.cb-field-check[data-field-check-status="stale"] {
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.16);
    background: rgba(245, 158, 11, 0.12);
}

/* Step-1 decision cards: each option carries a title + short explanation so the user is
 * not guessing what an option means. Two groups stack vertically (where Caddy runs, then
 * what to start from), each laid out as responsive cards. */
.cb-choice-group {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.cb-choice-group[hidden] {
    display: none;
}

.cb-choice-cards {
    display: grid;
    gap: 0.65rem;
}

.cb-choice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(21, 34, 46, 0.22);
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(21, 34, 46, 0.05);
    cursor: pointer;
    transition: border-color var(--cb-duration-normal) ease, background-color var(--cb-duration-normal) ease, box-shadow var(--cb-duration-normal) ease;
}

.cb-choice-card:hover {
    border-color: rgba(15, 118, 110, 0.35);
    background: rgba(255, 255, 255, 0.92);
}

.cb-choice-card:has(.cb-choice-card__input:focus-visible) {
    outline: 2px solid var(--cb-accent-strong);
    outline-offset: 2px;
}

.cb-choice-card:has(.cb-choice-card__input:checked) {
    border-color: rgba(15, 118, 110, 0.55);
    background: rgba(15, 118, 110, 0.07);
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.1);
}

.cb-choice-card__input {
    margin-top: 0.2rem;
}

.cb-choice-card__copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.cb-choice-card__title {
    font-weight: 600;
    color: var(--cb-text);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cb-choice-card__hint {
    font-size: 0.82rem;
    color: var(--cb-muted);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* The readiness panel is a helper, not the main task. Keep it visually secondary and
 * collapsible (it renders as <details>). */

.cb-onboarding-wizard.is-enhanced .cb-onboarding-wizard__viewport {
    touch-action: pan-y pinch-zoom;
}

/*
 * Render only the active step. The JS toggles the [hidden] attribute on the
 * non-active panels, so the track is a simple single-column container.
 *
 * Do NOT lay the panels out side by side and slide them with translateX:
 * because the inactive panels are display:none (hidden), the visible panel
 * always sits at offset 0, so translateX(-100%/-200%) pushes it off-screen and
 * blanks the viewport (showing only the page gradient). That regression made
 * step 2 / preflight render nothing and broke reload-safety.
 */
.cb-onboarding-wizard.is-enhanced .cb-onboarding-wizard__track {
    display: block;
}

.cb-onboarding-wizard.is-enhanced .cb-onboarding-step:not([hidden]) {
    animation: cb-onboarding-step-in 200ms ease both;
}

@keyframes cb-onboarding-step-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.cb-inline-history {
    border-top: 1px solid rgba(21, 34, 46, 0.08);
    padding-top: 1rem;
}

.cb-inline-history__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.cb-inline-history__summary::-webkit-details-marker {
    display: none;
}

.cb-inline-history__card {
    height: auto;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(15, 118, 110, 0.04);
    --bs-table-hover-bg: rgba(15, 118, 110, 0.05);
    margin-bottom: 0;
    font-size: 0.94rem;
}

.table> :not(caption)>*>* {
    padding: 0.8rem 0.7rem;
    border-bottom-color: rgba(21, 34, 46, 0.08);
}

.table thead th {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cb-muted);
    white-space: nowrap;
}

.table td code,
.table th code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.table-active>* {
    /* Bootstrap 5.3 fills cells via box-shadow using --bs-table-bg-state;
       the legacy --bs-table-accent-bg is kept only as a fallback. Set both
       so the active row uses our accent tint instead of Bootstrap's grey. */
    --bs-table-bg-state: rgba(15, 118, 110, 0.09);
    --bs-table-accent-bg: rgba(15, 118, 110, 0.09);
}

.cb-code-block {
    font-size: 0.85rem;
}

.cb-code-block--scroll-sm {
    max-height: 150px;
    overflow: auto;
}

.cb-code-block--scroll-md {
    max-height: 300px;
    overflow: auto;
}

.cb-code-block--scroll-lg {
    max-height: 400px;
    overflow: auto;
}

.cb-hidden {
    display: none;
}

.metric-card__label {
    display: block;
    color: var(--cb-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
}

.metric-card__value {
    display: block;
    margin-top: 0.15rem;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 0.95;
}

.metric-card__total {
    font-size: 0.6em;
    font-weight: 400;
    color: var(--cb-muted);
}

.home-hero {
    padding: 1.35rem;
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 246, 0.82));
}

.home-hero__header {
    align-items: flex-start;
}

.hero-metric {
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 7.25rem;
    padding: 1.15rem 1.2rem;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-metric {
        min-height: 6.55rem;
        padding: 0.95rem 1rem;
        gap: 0.6rem;
    }
}

.hero-metric__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.hero-metric__content {
    min-width: 0;
}

.hero-metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.95rem;
    background: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.78);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.hero-metric__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.hero-metric--domains {
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.12), rgba(255, 255, 255, 0.86));
}

.hero-metric--domains .hero-metric__icon {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
}

.hero-metric--valid {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.12), rgba(255, 255, 255, 0.86));
}

.hero-metric--valid .hero-metric__icon {
    background: rgba(22, 163, 74, 0.12);
    color: var(--cb-success);
}

.hero-metric--expired {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.12), rgba(255, 255, 255, 0.86));
}

.hero-metric--expired .hero-metric__icon {
    background: rgba(220, 38, 38, 0.12);
    color: var(--cb-danger);
}

.hero-metric__hint {
    color: var(--cb-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.hero-metric .metric-card__value {
    margin-top: 0.35rem;
    font-size: clamp(2rem, 3vw, 2.65rem);
}

@media (max-width: 767.98px) {
    .hero-metric {
        min-height: 5.25rem;
        padding: 0.85rem 0.95rem;
        gap: 0.5rem;
    }

    .hero-metric__main {
        gap: 0.65rem;
    }

    .hero-metric__icon {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 0.8rem;
    }

    .hero-metric__icon svg {
        width: 1.1rem;
        height: 1.1rem;
    }

    .hero-metric .metric-card__value {
        margin-top: 0.25rem;
        font-size: clamp(1.55rem, 6vw, 1.95rem);
    }
}

.page-title {
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

/* Unified compact pill/badge primitive.
   Every app pill derives its size from here; specialised classes
   below only set colour/meaning, never size. The zero-specificity
   :where() list keeps existing class colours intact while forcing
   one consistent geometry across the app. */
.cb-pill,
:where(.status-pill,
    .site-domain-badge,
    .site-handler-badge,
    .ssllabs-site-domain-badge,
    .site-cert__status,
    .site-cert__days,
    .ssllabs-result__grade,
    .ssllabs-result__status-badge,
    .ssllabs-endpoint-chip__grade) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cb-pill-gap);
    min-height: var(--cb-pill-min-height);
    padding-block: 0;
    padding-inline: var(--cb-pill-padding-inline);
    border-radius: var(--cb-pill-radius);
    font-size: var(--cb-pill-font-size);
    font-weight: var(--cb-pill-font-weight);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

/* Bootstrap .badge sets its own size tokens at higher specificity than the
   :where() baseline above, so re-assert the full pill geometry for app
   badges. Scoped to app pills only — other .badge usages stay untouched. */
.badge.cb-pill,
.badge.site-domain-badge,
.badge.site-handler-badge,
.badge.ssllabs-result__grade,
.badge.ssllabs-endpoint-chip__grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cb-pill-min-height);
    padding-block: 0;
    padding-inline: var(--cb-pill-padding-inline);
    border-radius: var(--cb-pill-radius);
    font-size: var(--cb-pill-font-size);
    line-height: 1;
    box-shadow: none;
}

.status-pill {
    text-transform: capitalize;
    background: rgba(148, 163, 184, 0.18);
}

.status-pill--online {
    background: var(--cb-success-bg);
    color: var(--cb-success-strong);
}

.status-pill--offline {
    background: var(--cb-danger-bg);
    color: var(--cb-danger-strong);
}

.status-pill--unknown {
    background: var(--cb-info-bg);
    color: var(--cb-info);
}

.status-pill--warning {
    background: rgba(245, 158, 11, 0.18);
    color: var(--cb-warning-strong);
}

.badge {
    box-shadow: var(--cb-shadow-sm);
}

/* .ssllabs-callout and #ssllabs-api-config need no height override —
   height is auto by default. */

/* Wrap instead of scrolling: the strip hid its scrollbar, so on phones the
   last tab was cut off at the viewport edge with no hint that it existed. */
.settings-tabs {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-tabs .nav-link {
    flex: 0 0 auto;
    padding: 0.4rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--cb-pill-radius);
    border: 1px solid var(--cb-border);
    background: var(--cb-surface);
    color: var(--cb-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--cb-duration-fast) ease, border-color var(--cb-duration-fast) ease,
        background-color var(--cb-duration-fast) ease;
}

.settings-tabs .nav-link:hover {
    color: var(--cb-text);
    border-color: var(--cb-accent);
}

.settings-tabs .nav-link:focus-visible {
    color: var(--cb-text);
    border-color: var(--cb-accent);
}

.settings-tabs .nav-link.active {
    color: #fff;
    background: var(--cb-accent);
    border-color: var(--cb-accent);
}

.settings-panel {
    height: 100%;
}

.settings-panel--primary {
    min-height: 100%;
}

.settings-panel__icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-inline-end: 0.5rem;
    vertical-align: -0.2rem;
}

/* Passkeys (Settings -> Passkey) */
.passkey-management__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.passkey-management__actions-icon,
.restart-onboarding__icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-inline-end: 0.35rem;
    vertical-align: -0.2rem;
}

.passkey-management__list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--cb-border);
    border-radius: 1rem;
    background: var(--cb-surface-muted);
}

.passkey-management__section-title {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cb-muted);
}

.passkey-empty {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.85rem;
    min-height: 7.5rem;
    color: var(--cb-muted);
}

.passkey-empty__icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    opacity: 0.65;
}

.passkey-empty__title {
    margin-bottom: 0.2rem;
    font-weight: 700;
    color: var(--cb-text);
}

.passkey-empty__text {
    max-width: 42ch;
    font-size: 0.84rem;
    line-height: 1.4;
}

.passkey-list {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.passkey-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--cb-border);
    border-radius: 0.85rem;
    background: var(--cb-surface-muted);
}

.passkey-list__info {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.passkey-list__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.passkey-list__meta {
    font-size: 0.78rem;
    color: var(--cb-muted);
    overflow-wrap: anywhere;
}

.passkey-list__remove-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.passkey-list__remove-form .form-control {
    width: 11rem;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .passkey-list__remove-form {
        flex: 1 1 100%;
    }

    .passkey-list__remove-form .form-control {
        flex: 1 1 auto;
        width: auto;
    }
}

/* Alternative sign-in block on the login page */
.auth-alt {
    margin-top: 1.25rem;
}

.auth-alt__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    color: var(--cb-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-alt__divider::before,
.auth-alt__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--cb-border);
}

.auth-alt__icon-row {
    display: flex;
    justify-content: center;
}

.auth-alt__icon-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.65rem 0.9rem;
}

.auth-alt__icon {
    width: 1.15rem;
    height: 1.15rem;
}

.auth-alt__icon-button .auth-alt__icon {
    inline-size: 1.4rem;
    block-size: 1.4rem;
}

.ssllabs-status-panel {
    display: grid;
    gap: 0.35rem;
}

.ssllabs-status-panel> :last-child {
    margin-bottom: 0;
}

#ssllabs-status {
    display: flex;
    align-items: center;
    min-height: 1.75rem;
}

#ssllabs-status .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cb-pill-min-height);
    line-height: 1;
    vertical-align: middle;
}

/* #ssllabs-settings and #ssllabs-retention-settings need no height override —
   height is auto by default. */

.ssllabs-callout__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.ssllabs-callout__content {
    flex: 1 1 auto;
    min-width: 0;
}

.ssllabs-callout__brand {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ssllabs-callout__logo {
    display: block;
    max-width: min(14rem, 30vw);
    width: 100%;
    height: auto;
}

.ssllabs-table {
    width: 100%;
    table-layout: fixed;
}

.ssllabs-table th,
.ssllabs-table td {
    min-width: 0;
}

.ssllabs-table td {
    vertical-align: top;
    /* The base .table cell padding is 0.8rem top/bottom, which — stacked on
       top of each domain card's own padding and min-height — makes the rows
       look very airy. Tighten the vertical rhythm here; the card border
       already provides visual separation between site rows. */
    padding-block: 0.35rem;
}

.table--management td {
    padding-block: var(--cb-table-cell-padding-block);
}

.ssllabs-table__site-col {
    width: var(--cb-ssllabs-site-column-width);
}

.ssllabs-table__domains-col {
    width: auto;
}

.ssllabs-table :where(.ssllabs-domain-list, .ssllabs-domain-card, .ssllabs-domain-card__controls) {
    min-width: 0;
}

.ssllabs-table__domains-headings {
    display: grid;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.ssllabs-table__scheduler-heading {
    flex: 0 0 auto;
}

.ssllabs-panel {
    display: flex;
    flex-direction: column;
    height: clamp(34rem, calc(100dvh - 15rem), 48rem);
    min-height: 28rem;
    overflow: hidden;
    container-name: ssllabs-panel;
    container-type: inline-size;
}

.ssllabs-panel__header {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.ssllabs-filterbar {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(9rem, 11rem) auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.35rem 1.05rem;
    border-bottom: 1px solid rgba(21, 34, 46, 0.08);
}

.ssllabs-filterbar .form-control,
.ssllabs-filterbar .form-select {
    min-height: var(--cb-table-toolbar-size);
    height: var(--cb-table-toolbar-size);
    padding-block: 0.5rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--cb-text);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(21, 34, 46, 0.12);
    border-radius: 999px;
    transition: border-color var(--cb-duration-normal) ease, box-shadow var(--cb-duration-normal) ease, background var(--cb-duration-normal) ease;
}

.ssllabs-filterbar .form-control {
    padding-inline: 0.75rem;
}

.ssllabs-filterbar .form-select {
    padding-inline: 0.75rem 2rem;
    appearance: none;
}

.ssllabs-filterbar .form-control:focus,
.ssllabs-filterbar .form-select:focus {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--cb-focus-border);
    box-shadow: 0 0 0 0.2rem var(--cb-focus-ring);
    outline: none;
}

/* Sized to its short label; the grid track may be wider than the button. */
.ssllabs-filterbar [data-ssllabs-clear-filters] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    min-block-size: var(--cb-table-toolbar-size);
    height: var(--cb-table-toolbar-size);
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1;
    border-radius: 999px;
}

.ssllabs-scrollbox {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0 0.45rem 0.3rem;
}

.ssllabs-scrollbox .ssllabs-table-wrap {
    overflow: visible;
    padding: 0;
}

.ssllabs-filter-empty {
    border-top: 1px solid rgba(21, 34, 46, 0.08);
}

/* SSL Labs scan rows use the panel itself as their primary surface. Individual
   domains are intentionally flat so repeated healthy results stay quiet. */
.ssllabs-table__result-col {
    width: auto;
}

.ssllabs-table__scheduler-col {
    width: var(--cb-ssllabs-scheduler-column-width);
}

.ssllabs-table__actions-col {
    width: var(--cb-ssllabs-actions-column-width);
}

.ssllabs-table td {
    padding-inline: 0.75rem;
    border-bottom-color: transparent;
}

/* Rows belonging to the same site sit close together; the border only
   reappears at the boundary to the next site so the eye reads "site group"
   rather than a uniform row list. */
.ssllabs-table tr[data-ssllabs-site-group-end] td {
    border-bottom-color: rgba(21, 34, 46, 0.08);
}

.ssllabs-table .ssllabs-site-cell {
    padding-inline: 0.9rem;
    background: rgba(21, 34, 46, 0.025);
    border-right: 1px solid rgba(21, 34, 46, 0.06);
}

.ssllabs-domain-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ssllabs-domain-card__host {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.ssllabs-domain-card__main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    min-height: 2.1rem;
    overflow: visible;
    white-space: nowrap;
}

.ssllabs-domain-card__muted {
    flex: 0 0 auto;
    color: var(--cb-muted);
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
}

.ssllabs-domain-card__quick-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cb-table-action-gap);
    min-width: 0;
    min-height: 2.1rem;
}

.ssllabs-result__status-badge--not-scanned {
    color: var(--cb-warning-strong);
    background: var(--cb-warning-bg);
    font-weight: 700;
}

.ssllabs-endpoint-chip {
    min-height: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.ssllabs-endpoint-chip__check {
    color: var(--cb-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.ssllabs-actions-cell .ssllabs-scan-action {
    --bs-btn-color: var(--cb-accent);
    --bs-btn-border-color: color-mix(in srgb, var(--cb-accent) 55%, transparent);
    --bs-btn-hover-bg: var(--cb-accent);
    --bs-btn-hover-border-color: var(--cb-accent);
    --bs-btn-hover-color: #fff;
}

/* Sites and SSL Labs share compact desktop controls in their repeated rows.
   Their larger standalone forms continue to use the default control sizing. */
.table--management .btn-sm.btn--icon-only {
    inline-size: var(--cb-table-control-size);
    min-inline-size: var(--cb-table-control-size);
    block-size: var(--cb-table-control-size);
    min-block-size: var(--cb-table-control-size);
    padding-inline: 0;
}

.ssllabs-schedule-form {
    min-width: 0;
}

.ssllabs-schedule-form__controls {
    display: flex;
    align-items: center;
    gap: var(--cb-table-action-gap);
    min-width: 0;
}

.table--management .ssllabs-schedule-form .form-select.form-select-sm {
    flex: 0 0 6.5rem;
    min-block-size: var(--cb-table-control-size);
    height: var(--cb-table-control-size);
    padding: 0.25rem 1.75rem 0.25rem 0.65rem;
    border-radius: 0.75rem;
    font-size: 0.82rem;
}

.ssllabs-schedule-form__next-run {
    min-width: 0;
    color: var(--cb-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.ssllabs-filterbar__search {
    max-width: 32rem;
}

/* The group outline is an inset shadow rather than a border so the group is
   exactly as tall as its buttons and lines up with the search, rating and
   clear controls (34px on desktop, 44px on touch). */
.ssllabs-filterbar__quick-filters {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.25rem;
    min-width: 0;
    border-radius: 999px;
    background: rgba(21, 34, 46, 0.025);
    box-shadow: inset 0 0 0 1px rgba(21, 34, 46, 0.1);
}

.ssllabs-quick-filter {
    min-block-size: var(--cb-table-toolbar-size);
    padding: 0.3rem 0.65rem;
    border: 0;
    border-radius: 999px;
    color: var(--cb-muted);
    background: transparent;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.ssllabs-quick-filter.is-active,
.ssllabs-quick-filter:hover {
    color: var(--cb-text);
    background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 67.999rem) {
    .ssllabs-filterbar {
        grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 11rem) auto;
    }

    .ssllabs-filterbar__quick-filters {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .ssllabs-filterbar {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked controls start at the left edge; a right-aligned Clear would
       float detached from the filters above it. */
    .ssllabs-filterbar [data-ssllabs-clear-filters] {
        justify-self: start;
    }

    .ssllabs-filterbar__search {
        max-width: none;
    }

    /* Drop out of table layout so the row grid below can lay each site out as a
       card; the head row and colgroup widths must not survive that switch. */
    .ssllabs-table colgroup,
    .ssllabs-table thead {
        display: none;
    }

    .ssllabs-table,
    .ssllabs-table tbody {
        display: block;
        width: 100%;
    }

    .ssllabs-table tr[data-ssllabs-site-row] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.45rem 0.75rem;
        padding: 0.8rem 0.9rem;
        margin-bottom: 0.65rem;
    }

    .ssllabs-table td,
    .ssllabs-table .ssllabs-site-cell {
        display: block;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .ssllabs-table .ssllabs-site-cell {
        grid-column: 1 / -1;
    }

    .ssllabs-table td[data-label="Domain / Result"] {
        grid-column: 1 / -1;
    }

    .ssllabs-table td[data-label="Schedule"] {
        grid-column: 1 / -1;
    }

    .ssllabs-table td[data-label="Actions"] {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .ssllabs-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.25rem;
        color: var(--cb-muted);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .ssllabs-table .ssllabs-site-cell::before,
    .ssllabs-table td[data-label="Domain / Result"]::before {
        display: none;
    }

    .ssllabs-domain-card__quick-actions {
        justify-content: flex-end;
    }

    .ssllabs-schedule-form__controls {
        flex-wrap: wrap;
    }

    .ssllabs-schedule-form__next-run {
        flex-basis: 100%;
        white-space: normal;
    }
}

@media (min-width: 1200px) {

    .ssllabs-page {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
    }

    .ssllabs-page>.app-grid {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-height: 0;
    }

    /* SSL Labs is a full-height table view: lock the shell to the viewport
       (like the Caddyfile/Sites pages) so the panel fills the available
       space and scrolls internally, instead of growing with its rows and
       pushing the footer past the viewport. */
    body:has(.ssllabs-page) .app-content {
        height: 100dvh;
        min-height: 0;
    }

    body:has(.ssllabs-page) .app-main {
        flex: 1 1 0;
        min-height: 0;
        padding-bottom: 1.5rem;
    }

    body:has(.ssllabs-page) .app-footer {
        flex: 0 0 auto;
    }

    body:has(.ssllabs-page) .app-container {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        height: 100%;
    }

    /* Sites edit view is a full-height editor layout (like the Caddyfile
       page). Lock the shell to the viewport height and let the inner panels
       flex, so the footer stays pinned to the bottom instead of being pushed
       past the viewport when the editor/list content is tall. A bare
       min-height on the page (the previous approach) is a floor, not a cap,
       so any extra overhead spilled the content — and the footer — below the
       fold. */
    body:has(.app-page--sites) .app-content {
        height: 100dvh;
        min-height: 0;
    }

    body:has(.app-page--sites) .app-main {
        flex: 1 1 0;
        min-height: 0;
        padding-bottom: 1.5rem;
    }

    body:has(.app-page--sites) .app-footer {
        flex: 0 0 auto;
    }

    body:has(.app-page--sites) .app-container {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        height: 100%;
    }

    .app-page--sites {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
    }

    .app-page--sites>.app-grid {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-height: 0;
    }

    .ssllabs-page>.app-grid>.col-12 {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .ssllabs-page>.app-grid>.col-12>.ssllabs-callout {
        flex: 0 0 auto;
    }

    .ssllabs-panel {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        max-height: none;
    }
}

.ssllabs-domain-list {
    display: grid;
    gap: 0.6rem;
}

.ssllabs-site-domains {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.site-domain-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.site-row-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* In the fixed-layout sites table the title must fill (and be bounded by) its
   cell, otherwise inline-flex sizes to its content, the name's ellipsis never
   engages, and the handler badge spills into the Domain column. Applies in
   table mode at every width (the <768px card mode media query overrides). */
.sites-list-scroll .sites-table .site-row-title {
    display: flex;
    width: 100%;
    min-width: 0;
}

.sites-list-scroll .sites-table .site-handler-badge {
    flex: 0 0 auto;
}

.sites-list-scroll .sites-table .site-row-title .fw-semibold {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-status-dot {
    flex: 0 0 auto;
    width: 0.65rem;
    height: 0.65rem;
    animation: pulse-dot 2s ease-in-out infinite;
    box-shadow: 0 0 0 0.2rem rgba(148, 163, 184, 0.12);
}

.site-status-dot.status-dot--online {
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.16);
}

.site-status-dot.status-dot--offline {
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.14);
}

.site-row-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0;
}

.site-domain-badge {
    background: rgba(15, 118, 110, 0.08);
    color: var(--cb-accent-strong);
}

.site-handler-badge {
    background: rgba(99, 102, 241, 0.10);
    color: #3730a3;
}

.sites-list-panel {
    padding-bottom: 0;
    container-name: sites-list-panel;
    container-type: inline-size;
}

/* .sites-form-panel needs no height override — panel-card base sets no
   fixed height, so auto is already the computed value. */

.sites-form-panel__form {
    min-height: 0;
    gap: 0.75rem;
}

.sites-form-panel__field,
.sites-form-panel .tag-input,
.sites-form-panel__config {
    display: grid;
    gap: 0.15rem;
}

.sites-form-panel #site-name.form-control {
    min-height: 3.125rem;
    height: 3.125rem;
}

.sites-form-panel .tag-input__shell {
    height: 3.125rem;
    min-height: 3.125rem;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 0.5625rem;
}

.sites-form-panel .tag-input__list {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
}

.sites-form-panel .tag-input__field {
    min-width: 12rem;
    height: 100%;
}

.sites-form-panel .form-label {
    margin-bottom: 0.15rem;
}

.sites-form-panel__form .form-text {
    margin-top: 0;
    font-size: 0.74rem;
    line-height: 1.05;
}

.sites-form-panel__config {
    min-height: 12rem;
    gap: 0.15rem;
}

.sites-form-panel__config .cm-content {
    min-height: 18rem;
}

.sites-form-panel__actions {
    margin-top: 0.15rem;
}

.sites-list-panel__header {
    flex: 0 0 auto;
}

.sites-list-panel__count {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid rgba(21, 34, 46, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--cb-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.sites-list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    padding: 0 0.45rem 0.45rem;
    scrollbar-gutter: stable;
}

.sites-list-scroll .table-responsive {
    overflow: visible;
    padding: 0;
    min-width: 100%;
}

.sites-list-scroll .table {
    table-layout: fixed;
}

.sites-list-scroll .sites-table {
    width: 100%;
    min-width: var(--cb-sites-table-min-width);
    table-layout: fixed;
}

.sites-list-scroll .sites-table th,
.sites-list-scroll .sites-table td {
    min-width: 0;
    vertical-align: middle;
}

.sites-table__site-col {
    width: var(--cb-sites-site-column-width);
}

.sites-table__domain-col {
    width: auto;
}

.sites-table__certificate-col {
    width: var(--cb-sites-certificate-column-width);
}

.sites-table__actions-col {
    width: var(--cb-sites-actions-column-width);
}

.sites-list-scroll .sites-table td[data-label="Actions"] {
    overflow: visible;
    padding-inline-end: 0.75rem;
}

.sites-list-scroll .sites-table .cell-actions {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.sites-list-scroll .sites-table .cell-actions form {
    flex: 0 0 auto;
}

.sites-list-scroll .sites-table .site-row-title .fw-semibold,
.sites-list-scroll .sites-table .site-domain-badge {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-cert {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: nowrap;
}

.site-cert__summary {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 0;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cb-text);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
}

.site-cert__summary--valid .site-cert__status {
    background: var(--cb-success-bg);
    color: #047857;
}

.site-cert__summary--expired .site-cert__status {
    background: var(--cb-danger-bg);
    color: var(--cb-danger);
}

.site-cert__summary--renewing .site-cert__status {
    background: var(--cb-info-bg);
    color: var(--cb-info);
}

.site-cert__summary .status-dot {
    flex: 0 0 auto;
}

.site-cert__days {
    background: rgba(148, 163, 184, 0.12);
    color: var(--cb-muted);
    opacity: 1;
}

.site-cert__meta {
    display: flex;
    align-items: center;
    color: var(--cb-muted);
    font-size: 0.79rem;
    line-height: 1.3;
    min-width: 0;
    padding-left: 0.2rem;
}

.site-cert__primary,
.site-cert__issued {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-cert__primary::before,
.site-cert__issued::before {
    display: none;
}

.site-cert__pending,
.site-cert__empty {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--cb-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.site-cert__error {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.site-cert__error-title {
    color: var(--cb-danger);
    font-size: 0.84rem;
    font-weight: 700;
}

.site-cert__error-message {
    color: var(--cb-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

@media (min-width: 1200px) {

    .app-page--sites .app-page__header,
    .ssllabs-page .app-page__header,
    .app-page--settings .app-page__header {
        flex: 0 0 auto;
    }

    .app-page--sites>.app-grid>.sites-form-column,
    .app-page--sites>.app-grid>.sites-list-column {
        min-height: 0;
    }

    .app-page--sites[data-site-form-open]>.app-grid>.sites-form-column {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .app-page--sites[data-site-form-open]>.app-grid>.sites-list-column {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .sites-form-column,
    .sites-list-column {
        display: flex;
        min-height: 0;
    }

    .sites-form-panel,
    .sites-list-panel {
        width: 100%;
        flex: 1 1 auto;
        min-height: 30rem;
    }

    .sites-form-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sites-list-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sites-form-panel__form {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .sites-form-panel__config {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .sites-form-panel__config textarea,
    .sites-form-panel__config .cm-editor {
        flex: 1 1 auto;
        min-height: 0;
    }

    .sites-form-panel__config .cm-editor {
        display: flex;
        flex-direction: column;
    }

    .sites-form-panel__config .cm-scroller {
        flex: 1 1 auto;
        min-height: 0;
    }

    .sites-form-panel__actions {
        flex: 0 0 auto;
        margin-top: auto;
    }

    body:has(.app-page--caddyfile) .app-content {
        height: 100dvh;
        min-height: 0;
        overflow: visible;
    }

    body:has(.app-page--caddyfile) .app-main {
        flex: 1 1 0;
        min-height: 0;
        overflow: visible;
        padding-bottom: 1.5rem;
    }

    body:has(.app-page--caddyfile) .app-footer {
        flex: 0 0 auto;
    }

    body:has(.app-page--caddyfile) .app-container {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        height: 100%;
        overflow: visible;
    }

    .app-page--caddyfile {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
    }

    .app-page--caddyfile .app-page__header {
        flex: 0 0 auto;
    }

    .app-page--caddyfile>.app-grid {
        display: flex;
        flex: 1 1 0;
        min-height: 0;
        overflow: visible;
    }

    .app-page--caddyfile>.app-grid>.col-12 {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
        /* Retain the editor's horizontal bleed without collapsing the shared
           header-to-content spacing through Bootstrap's vertical gutters. */
        padding-inline: 0.35rem;
        margin-inline: -0.35rem;
    }

    .app-page--caddyfile .caddyfile-editor-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1 1 auto;
        min-height: 30rem;
        height: auto;
        overflow: hidden;
        align-self: stretch;
    }

    .caddyfile-editor-panel__form {
        display: flex !important;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        gap: 0.75rem;
    }

    .caddyfile-editor-panel__body {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .caddyfile-editor-panel__body .form-label,
    .caddyfile-editor-panel__body .form-text {
        flex: 0 0 auto;
    }

    .caddyfile-editor-panel__textarea,
    .caddyfile-editor-panel .cm-editor {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
    }

    .caddyfile-editor-panel .cm-editor {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .caddyfile-editor-panel .cm-scroller {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .caddyfile-editor-panel .cm-content {
        min-height: 0;
    }

    .caddyfile-editor-panel__actions {
        flex: 0 0 auto;
    }
}

@media (max-width: 1199.98px), (hover: none), (pointer: coarse) {
    .table--management .btn-sm.btn--icon-only,
    .table--management .ssllabs-schedule-form .form-select.form-select-sm,
    .sites-search__input,
    .ssllabs-filterbar .form-control,
    .ssllabs-filterbar .form-select,
    .ssllabs-filterbar [data-ssllabs-clear-filters],
    .ssllabs-quick-filter {
        min-block-size: 2.75rem;
        min-inline-size: 2.75rem;
        height: 2.75rem;
    }

    :root {
        --cb-table-action-gap: 0.5rem;
    }
}

@media (min-width: 768px) {

    .sites-list-scroll .sites-table th:nth-child(3),
    .sites-list-scroll .sites-table td:nth-child(3) {
        width: var(--cb-sites-certificate-column-width);
    }

    .sites-list-scroll .sites-table th:nth-child(4),
    .sites-list-scroll .sites-table td:nth-child(4) {
        width: var(--cb-sites-actions-column-width);
    }
}

@media (max-width: 767.98px) {

    /* Flatten the list panel so the site cards aren't nested inside a second
       card, and let it grow with its content (the page scrolls naturally
       instead of a short, fixed-height inner scroll box).
       Scoped under .app-page--sites to outrank the generic .panel-card
       padding overrides in the wider mobile breakpoints below. */
    .app-page--sites .sites-list-panel {
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        overflow: visible;
    }

    .app-page--sites .sites-list-panel .panel-card__header {
        padding-inline: 0.25rem;
        margin-bottom: 0.75rem;
    }

    .app-page--sites .sites-list-scroll {
        padding: 0;
        overflow: visible;
    }

    .app-page--sites .sites-list-scroll .table-responsive {
        padding: 0;
    }

    .sites-list-scroll .sites-table {
        min-width: 0;
    }

    .sites-list-scroll .sites-table colgroup,
    .sites-list-scroll .table thead {
        display: none;
    }

    .sites-list-scroll .table,
    .sites-list-scroll .table tbody,
    .sites-list-scroll .table tr,
    .sites-list-scroll .table td {
        display: block;
        width: 100%;
    }

    /* Each site renders as a self-contained card / tile */
    .sites-list-scroll .table tr {
        padding: 1rem 1.05rem;
        margin-bottom: 0.85rem;
        border: 1px solid var(--cb-border);
        border-radius: 1.1rem;
        background: var(--cb-surface);
        box-shadow: var(--cb-shadow-card);
    }

    .sites-list-scroll .table tr:last-child {
        margin-bottom: 0;
    }

    .sites-list-scroll .table tr.table-active {
        border-color: var(--cb-accent);
        background: rgba(15, 118, 110, 0.05);
        box-shadow: 0 0 0 1px var(--cb-accent), 0 8px 20px -10px rgba(15, 118, 110, 0.3);
    }

    .sites-list-scroll .table td {
        padding: 0;
        border-bottom: 0;
        /* Reset Bootstrap's per-cell background fill (applied via inset
           box-shadow) so each field doesn't render its own grey box inside
           the card. The card <tr> owns the active/hover background. */
        background-color: transparent;
        box-shadow: none;
    }

    /* Divider + spacing between fields inside the card */
    .sites-list-scroll .table td+td {
        margin-top: 0.7rem;
        padding-top: 0.7rem;
        border-top: 1px solid var(--cb-border);
    }

    .sites-list-scroll .table td>* {
        min-width: 0;
    }

    /* Field labels sit above their value, not beside it */
    .sites-list-scroll .table td[data-label="Domain"]::before,
    .sites-list-scroll .table td[data-label="Certificate"]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.45rem;
        color: var(--cb-muted);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Site name is the card heading; actions need no label */
    .sites-list-scroll .table td[data-label="Site"]::before,
    .sites-list-scroll .table td[data-label="Actions"]::before {
        display: none;
    }

    .sites-list-scroll .table td[data-label="Site"] .site-row-title .fw-semibold {
        font-size: 1rem;
    }

    .sites-list-scroll .table .cell-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
    }

    /* Empty-state row keeps a plain look, not a tile */
    .sites-list-scroll .table tr td[colspan] {
        text-align: center;
    }

    .site-cert__summary {
        width: fit-content;
        max-width: 100%;
    }

    .site-cert__meta {
        max-width: 100%;
    }
}

/* Compact card layout via container query — fires when the right panel is
   narrow (e.g. form open on desktop) before the viewport hits 768px mobile */
@container sites-list-panel (max-width: 46rem) {

    .sites-list-scroll {
        overflow-x: hidden;
    }

    .sites-list-scroll .sites-table {
        min-width: 0;
    }

    .sites-list-scroll .sites-table colgroup,
    .sites-list-scroll .sites-table thead {
        display: none;
    }

    .sites-list-scroll .sites-table,
    .sites-list-scroll .sites-table tbody {
        display: block;
        width: 100%;
    }

    .sites-list-scroll .sites-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "site    actions"
            "domain  actions"
            "cert    actions";
        gap: 0.65rem 0.85rem;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--cb-border);
    }

    .sites-list-scroll .sites-table tr:first-child {
        border-top: 1px solid var(--cb-border);
    }

    .sites-list-scroll .sites-table td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: 0;
        /* Bootstrap applies the table-active background per-td via an inset
           box-shadow (and CSS vars); reset both here so each cell doesn't
           render its own grey box in grid layout — the <tr> owns it. */
        background-color: transparent;
        box-shadow: none;
    }

    .sites-list-scroll .sites-table tr.table-active {
        border-color: var(--cb-accent);
        background: rgba(15, 118, 110, 0.05);
        box-shadow: inset 0 0 0 1px var(--cb-accent);
    }

    .sites-list-scroll .sites-table td[data-label="Site"] {
        grid-area: site;
    }

    .sites-list-scroll .sites-table td[data-label="Domain"] {
        grid-area: domain;
    }

    .sites-list-scroll .sites-table td[data-label="Certificate"] {
        grid-area: cert;
    }

    .sites-list-scroll .sites-table td[data-label="Actions"] {
        grid-area: actions;
        align-self: start;
        overflow: visible;
        padding-inline-end: 0;
    }

    .sites-list-scroll .sites-table .cell-actions {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end;
    }

    /* Empty-state row: span full grid width */
    .sites-list-scroll .sites-table tr td[colspan] {
        grid-column: 1 / -1;
        text-align: center;
    }
}

/* A card in a desktop-width panel (the list beside the site form between 1200
   and 1599px) has room for the actions beside the site name. Stacking them in a
   column made every card as tall as three buttons, roughly 140px, while the
   four-column table would need horizontal scrolling at these widths. */
@container sites-list-panel (30rem < width <= 46rem) {

    .sites-list-scroll .sites-table tr {
        grid-template-areas:
            "site    actions"
            "domain  domain"
            "cert    cert";
        gap: 0.35rem 0.85rem;
        padding-block: 0.6rem;
    }

    .sites-list-scroll .sites-table td[data-label="Actions"] {
        align-self: center;
    }

    .sites-list-scroll .sites-table .cell-actions {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}

/* Sites search field */
.sites-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 8rem;
    min-width: 0;
    max-width: 18rem;
}

.sites-search__icon {
    position: absolute;
    left: 0.65rem;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--cb-muted);
}

.sites-search__input {
    width: 100%;
    min-height: var(--cb-table-toolbar-size);
    padding-block: 0.3rem;
    padding-inline: 2rem 0.75rem;
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--cb-text);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(21, 34, 46, 0.12);
    border-radius: 999px;
    outline: none;
    transition: border-color var(--cb-duration-normal) ease, box-shadow var(--cb-duration-normal) ease, background var(--cb-duration-normal) ease;
    appearance: none;
}

.sites-search__input:focus {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--cb-focus-border);
    box-shadow: 0 0 0 0.2rem var(--cb-focus-ring);
}

.sites-search__input::placeholder {
    color: var(--cb-muted);
    opacity: 0.75;
}

/* Hide rows filtered out by search */
.sites-table tbody tr[data-search-hidden] {
    display: none;
}

/* Site form modal: the relocated panel should blend into the modal chrome */
.sites-form-modal .modal-body {
    padding: 1rem 1.1rem 1.25rem;
}

.sites-form-modal .sites-form-panel {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.sites-form-modal .sites-form-panel .panel-card__header {
    display: none;
}

@media (max-width: 767.98px) {

    /* When the modal is active, the inline form column is empty — hide it. */
    .sites-modal-enabled .sites-form-column {
        display: none;
    }

    /* Search wraps below title row on narrow screens */
    .sites-list-panel__header {
        flex-wrap: wrap;
    }

    .sites-search {
        flex: 1 1 100%;
        max-width: 100%;
        order: 3;
    }

    .sites-form-modal .modal-dialog {
        align-items: stretch;
        max-width: none;
        width: 100%;
        /* Use the stable small-viewport height as the baseline and let the
           dialog grow with its content. Forcing height: 100dvh made the modal
           resize and jump on iOS as the URL bar / on-screen keyboard toggled;
           the modal body already handles its own scrolling. */
        min-height: 100svh;
        height: auto;
        margin: 0;
    }

    .sites-form-modal .modal-content {
        min-height: 100svh;
        border-radius: 0;
    }

    .sites-form-modal .modal-body {
        overflow-y: auto;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 767.98px) {
    .ssllabs-callout__body {
        flex-direction: column;
        align-items: flex-start;
    }

    .ssllabs-callout__brand {
        width: 100%;
    }

    .ssllabs-callout__logo {
        max-width: 11rem;
        margin-left: auto;
    }

    /* Flatten the panel so each site renders as a standalone card tile
       (mirroring the Sites list), and let the page scroll naturally instead
       of a short, fixed-height inner scroll box. */
    .ssllabs-panel {
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 0;
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    /* With the panel flattened, the cards run full-width to the panel edge.
       Pull the header and filter controls out to the same edge so the side
       spacing matches the cards (and the Sites list) instead of keeping the
       panel's 1.05rem inset, which left the search/filter looking narrower
       than the cards below them. */
    .ssllabs-page .ssllabs-panel .panel-card__header,
    .ssllabs-page .ssllabs-panel .ssllabs-filterbar {
        padding-inline: 0.25rem;
    }

    .ssllabs-page .ssllabs-panel .ssllabs-filterbar {
        border-bottom: 0;
        margin-bottom: 0.75rem;
    }

    .ssllabs-scrollbox {
        flex: 0 0 auto;
        overflow: visible;
        padding: 0;
        scrollbar-gutter: auto;
    }

    .ssllabs-table-wrap {
        overflow: visible;
        padding: 0;
    }

    .ssllabs-table tr[data-ssllabs-site-row]:last-child {
        margin-bottom: 0;
    }

    .ssllabs-table td {
        padding: 0;
        border-bottom: 0;
    }

    /* Site name is the card heading; no label needed */
    .ssllabs-table td[data-label="Site"]::before {
        display: none;
    }

    .ssllabs-table td[data-label="Site"] .site-row-title .fw-semibold {
        font-size: 1rem;
    }

    /* Empty-state row keeps a plain look, not a tile */
    .ssllabs-table tr td[colspan] {
        display: block;
        text-align: center;
    }

    .ssllabs-schedule-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .ssllabs-schedule-form .form-select {
        flex: 1 1 8rem;
    }

    .ssllabs-schedule-form .btn {
        flex: 0 0 auto;
    }

    .ssllabs-actions {
        width: 100%;
        justify-content: stretch;
    }

    .ssllabs-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
        white-space: normal;
    }

    .ssllabs-endpoint-chip {
        font-size: 0.75rem;
    }

}

@media (min-width: 768px) {

    .caddyfile-editor-panel__textarea,
    #site-caddy-directives {
        white-space: pre;
        overflow-wrap: normal;
        overflow-x: auto;
    }
}

@media (max-width: 767.98px) {

    .caddyfile-editor-panel__textarea,
    #site-caddy-directives {
        white-space: pre;
        overflow-wrap: normal;
        overflow-x: auto;
        min-height: 18rem;
    }

    .caddyfile-editor-panel .cm-scroller,
    .sites-form-panel__config .cm-scroller {
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: auto;
    }

    .caddyfile-editor-panel .cm-content,
    .sites-form-panel__config .cm-content {
        min-width: 0;
    }

    .caddyfile-editor-panel__actions {
        min-width: 0;
    }
}

.ssllabs-schedule-form {
    min-width: min(10rem, 100%);
}

.ssllabs-actions {
    min-width: min(14rem, 100%);
}

.timeline-list {
    display: grid;
    gap: 1rem;
}

.timeline-item {
    display: grid;
    grid-template-columns: 0.75rem 1fr;
    gap: 1rem;
    align-items: start;
}

.timeline-item__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    margin-top: 0.4rem;
    background: linear-gradient(135deg, #0f766e, #f59e0b);
}

.config-list .list-group-item {
    border: 0;
    border-bottom: 1px solid var(--cb-border);
    background: transparent;
}

.config-list .list-group-item.active {
    background: var(--cb-surface-strong);
    color: #f8fafc;
}

.history-stack {
    display: grid;
    gap: 0.8rem;
}

.history-item {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(21, 34, 46, 0.05);
}

/* Domain editor */

.domain-caddy-editor {
    min-height: 18rem;
    white-space: pre-wrap;
}

.domain-caddy-editor--compact {
    min-height: 0;
}

.domain-caddy-preview {
    max-width: 100%;
    min-height: 12rem;
    white-space: pre;
    overflow-x: auto;
    overflow-wrap: normal;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8rem;
}

.domain-preview-panel {
    position: sticky;
    top: 1.5rem;
}

.domain-preview-panel .domain-caddy-preview {
    background: rgba(21, 34, 46, 0.05);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    min-height: 20rem;
}

@media (max-width: 1199.98px) {

    /* Both columns are full width here, so the .app-grid gutter no longer sits
       between siblings: it would inset the stacked panels from the page header
       (the visually first panel is the DOM last child, so the generic
       :first-child/:last-child gutter reset does not reach it). */
    .app-page--sites>.app-grid>.sites-form-column,
    .app-page--sites>.app-grid>.sites-list-column {
        padding-inline: 0;
    }

    .sites-list-column {
        order: 1;
    }

    .sites-form-column {
        order: 2;
    }
}

.domain-preset-item {
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--cb-border);
    background: var(--cb-surface);
}

.tag-input {
    display: grid;
    gap: 0.625rem;
}

.tag-input__shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.125rem;
}

.tag-input__shell:focus-within {
    border-color: var(--cb-focus-border);
    box-shadow: 0 0 0 0.2rem var(--cb-focus-ring);
}

.tag-input__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-input__field {
    flex: 1 1 12rem;
    min-width: 10rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    outline: 0;
}

.tag-input__field:focus-visible {
    outline: none;
}

.tag-input__field::placeholder {
    color: var(--cb-muted);
}

.tag-input__token {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid rgba(13, 110, 253, 0.16);
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.08);
    color: var(--cb-text);
    font-size: 0.875rem;
    line-height: 1;
}

.tag-input__error {
    margin-top: -0.1rem;
}

.tag-input__remove {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}

/* Invisible 2rem hit area keeps the 20px glyph but clears the WCAG 2.2 AA
   24px target minimum; 2rem stays inside the token's inline padding so it
   does not steal taps from the neighbouring token. */
.tag-input__remove::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    transform: translate(-50%, -50%);
}

.tag-input__remove:hover,
.tag-input__remove:focus-visible {
    background: rgba(13, 110, 253, 0.14);
}

.form-control,
.form-select {
    border-radius: 0.85rem;
    border-color: rgba(21, 34, 46, 0.12);
    padding: 0.75rem 0.9rem;
}

.form-select {
    min-block-size: 2.75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cb-focus-border);
    box-shadow: 0 0 0 0.2rem var(--cb-focus-ring);
}

.table .cell-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--cb-table-action-gap);
    min-width: max-content;
}

/* iOS Safari zooms into any focused field rendered below 16px. On touch
   devices, lift the compact inputs to 1rem; desktop keeps the dense sizing. */
@media (hover: none) and (pointer: coarse) {

    .form-control,
    .form-select,
    .ssllabs-filterbar .form-control,
    .ssllabs-filterbar .form-select,
    .sites-search__input,
    .tag-input__field,
    .table--management .ssllabs-schedule-form .form-select.form-select-sm {
        font-size: 1rem;
    }
}

.form-label {
    margin-bottom: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cb-muted);
}

.form-text {
    font-size: 0.8rem;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.form-check-input {
    margin-top: 0.2rem;
}

.form-check-label {
    line-height: 1.4;
}

.site-enabled-label {
    color: var(--cb-muted);
    transition: color var(--cb-duration-normal) ease;
}

.form-check-input:checked+.site-enabled-label {
    color: var(--cb-text);
}

/* Keep Bootstrap button variables, but enforce flex centering for button content. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    gap: 0.35rem;
    border-radius: 999px;
    padding-inline: 0.95rem;
}

.btn svg {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: 0 0 auto;
}

.btn--icon-only {
    padding-inline: 0.78rem;
}

.panel-card__header .btn.btn-sm {
    padding-inline: 1.1rem;
}

.btn-primary {
    --bs-btn-bg: var(--cb-accent);
    --bs-btn-border-color: var(--cb-accent);
    --bs-btn-hover-bg: var(--cb-accent-strong);
    --bs-btn-hover-border-color: var(--cb-accent-strong);
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: max(0.6rem, env(safe-area-inset-top));
    left: var(--cb-mobile-gutter-left);
    z-index: var(--cb-z-mobile-toggle);
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 0.75rem;
    background: var(--cb-accent);
    color: #fff;
    box-shadow: var(--cb-shadow-accent);
    cursor: pointer;
    transition: transform var(--cb-duration-normal) ease, background-color var(--cb-duration-normal) ease;
}

.mobile-menu-toggle:hover {
    background: var(--cb-accent-strong);
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

.mobile-menu-toggle__icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin: auto;
}

.mobile-menu-toggle__icon--close {
    display: none;
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__icon--open {
    display: none;
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__icon--close {
    display: block;
}

/* Persistent mobile header with the brand logo (hidden on desktop, where the
   logo lives in the sidebar instead). */
.mobile-topbar {
    display: none;
}

.mobile-topbar__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.35rem;
    border-radius: 0.9rem;
}

.mobile-topbar__logo {
    display: block;
    height: 1.7rem;
    width: auto;
}

/* Mobile sidebar backdrop */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--cb-z-backdrop);
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--cb-duration-slow) ease, visibility var(--cb-duration-slow) ease;
}

@supports (backdrop-filter: blur(4px)) {
    .sidebar-backdrop {
        backdrop-filter: blur(4px);
    }
}

/* Must follow the blur above: same specificity, so an earlier override loses. */
@media (prefers-reduced-transparency: reduce) {
    .sidebar-backdrop {
        backdrop-filter: none;
    }
}

.sidebar-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 991.98px) {
    .cb-onboarding-wizard__progress {
        flex-direction: column;
        align-items: stretch;
    }

    .cb-onboarding-wizard__steps {
        padding-bottom: 0;
    }

    .cb-onboarding-wizard__step-button {
        min-width: min(16rem, calc(100vw - 4.5rem));
    }

    .mobile-menu-toggle {
        display: flex;
        top: max(0.75rem, env(safe-area-inset-top));
        left: var(--cb-mobile-gutter-left);
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.9rem;
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: calc(var(--cb-z-backdrop) - 1);
        height: calc(var(--cb-mobile-topbar-height) + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        padding-left: var(--cb-mobile-gutter-left);
        padding-right: var(--cb-mobile-gutter-right);
        /* Solid fallback first: where color-mix or backdrop-filter is
           unavailable (or the user prefers reduced transparency) the topbar
           must stay opaque enough to keep the logo legible over page content.
           Enhancements are layered on top behind feature/preference guards,
           mirroring the panel-card treatment elsewhere in this file. */
        background: var(--cb-bg);
        background: color-mix(in srgb, var(--cb-bg) 86%, transparent);
        border-bottom: 1px solid var(--cb-border);
    }

    @supports (backdrop-filter: blur(10px)) {
        .mobile-topbar {
            backdrop-filter: blur(10px);
        }
    }

    @media (prefers-reduced-transparency: reduce) {
        .mobile-topbar {
            background: var(--cb-bg);
            backdrop-filter: none;
        }
    }

    /* The logo now lives in the persistent top bar, so drop it from the flyout. */
    .app-sidebar .brand-mark {
        display: none;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--cb-z-sidebar);
        justify-content: space-between;
        gap: 0;
        width: min(78vw, 320px);
        max-width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        box-sizing: border-box;
        padding-top: max(3.8rem, env(safe-area-inset-top));
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform var(--cb-duration-slide) cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }

    .app-sidebar> :first-child {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .app-nav {
        --cb-sidebar-nav-gap: 0.45rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 0.5rem;
    }

    .sidebar-footer {
        flex: 0 0 auto;
        margin-top: 0.85rem;
        padding-top: 0.85rem;
    }

    .sidebar-user {
        gap: 0.75rem;
    }

    .app-nav__link {
        min-block-size: 3rem;
        justify-content: flex-start;
        text-align: left;
    }

    .app-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.25);
    }

    .app-main {
        gap: 0.9rem;
        padding-top: calc(var(--cb-mobile-topbar-height) + max(0.75rem, env(safe-area-inset-top)));
        padding-right: var(--cb-mobile-gutter-right);
        padding-bottom: 0.65rem;
        padding-left: var(--cb-mobile-gutter-left);
    }

    .app-footer {
        padding: 0 0.75rem max(0.85rem, env(safe-area-inset-bottom));
    }

    .dashboard-status {
        width: fit-content;
        white-space: normal;
        align-self: flex-end;
        margin-inline-start: auto;
    }

    .dashboard-empty-state {
        flex-direction: column;
        align-items: stretch;
    }

    .app-page {
        --cb-page-stack-gap: 0.9rem;
        --cb-page-header-content-gap: 0.9rem;
        overflow-x: hidden;
    }

    /* Bootstrap rows pay for their column gutters with negative inline margins,
       which reach 0.75rem past the clipped .app-page box above — content that
       is cut off instead of scrollable. Every settings column is full width at
       this breakpoint, so drop the gutter compensation and keep the panels
       aligned with the page header. */
    .app-page--settings .tab-pane>.row {
        margin-inline: 0;
    }

    .app-page--settings .tab-pane>.row>[class*="col-"] {
        padding-inline: 0;
    }

    .app-page__header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: var(--cb-page-header-margin-bottom);
        padding-top: 0.25rem;
        padding-inline-start: 0;
    }

    .app-page__lede {
        padding-inline-start: 0;
    }

    .app-page__actions {
        justify-content: flex-start;
    }

    .panel-card,
    .metric-card {
        padding: 0.95rem;
        border-radius: 1rem;
    }

    .panel-card--table {
        padding-top: 0.75rem;
    }

    .panel-card--table .panel-card__header {
        padding-inline: 0.95rem;
    }

    .panel-card--table .table-responsive {
        padding: 0 0.2rem 0.2rem;
    }

    .auth-panel {
        gap: 2rem;
    }

    .auth-panel__intro {
        margin-inline: auto;
        gap: 0.5rem;
    }

    .auth-panel__form {
        width: 100%;
    }
}

.ssllabs-endpoint-chip__label {
    color: var(--cb-muted);
    font-weight: 600;
}

.ssllabs-result__error {
    max-width: 28rem;
    margin-top: 0.1rem;
    color: var(--cb-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

/* Keep the same breathing room below the fixed mobile topbar that the toggle
   button has above it, so page headings do not look visually jammed under the
   bar at the smallest breakpoint. */
@media (max-width: 767.98px) {
    .app-main {
        padding-top: calc(var(--cb-mobile-topbar-height) + 0.75rem);
    }

    /* Mobile onboarding is a linear decision flow, not a shrunken desktop wizard:
 * surface only the active step, let every option wrap, and reduce gutters. */
    .cb-onboarding-wizard__steps {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.6rem;
        overflow: visible;
    }

    .cb-onboarding-wizard__step-button {
        min-width: 0;
        width: 100%;
    }

    .cb-onboarding-wizard__step-button.is-inactive:disabled {
        display: none;
    }

    .cb-onboarding-wizard__step-index {
        width: 1.9rem;
        height: 1.9rem;
    }

    .app-page--onboarding .panel-card {
        padding: 0.95rem;
    }

    .cb-choice-card {
        padding: 0.8rem 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .mobile-menu-toggle {
        top: max(0.75rem, env(safe-area-inset-top));
        left: var(--cb-mobile-gutter-left);
    }

    .auth-shell {
        align-items: center;
        padding: 0;
    }

    .page-title {
        font-size: 1.55rem;
    }

    .eyebrow,
    .brand-mark__kicker {
        font-size: 0.67rem;
    }

    .table {
        font-size: 0.9rem;
    }

    .table> :not(caption)>*>* {
        padding: 0.68rem 0.5rem;
    }

    .table .cell-actions {
        justify-content: flex-start;
    }

    .table .cell-actions .btn {
        min-block-size: 2.75rem;
        padding-inline: 0.75rem;
    }

    .auth-panel__form.panel-card {
        padding: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .panel-card,
    .metric-card {
        backdrop-filter: none !important;
    }

    .sidebar-backdrop {
        backdrop-filter: none !important;
    }

    .app-sidebar {
        transition: none !important;
    }
}

/* SSL Labs rank history chart */
.ssllabs-history-card {
    background: var(--cb-surface);
    border: 1px solid var(--cb-border);
    border-radius: 1.15rem;
    box-shadow: var(--cb-shadow);
}

.ssllabs-history-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--cb-border);
    padding: 1rem 1.15rem;
}

.ssllabs-history-card .card-body {
    padding: 1.15rem;
}

/* The loading shell resolves to either the chart or the empty state as soon as
   the (same-origin, usually sub-50ms) history fetch returns; without a fade
   that reveal is a hard visibility cut, which reads as a flicker rather than a
   load. Fading opacity in on reveal, with no fade back out, avoids that. */
.ssllabs-history-toolbar,
.ssllabs-history-inspector,
.ssllabs-problem-domains,
.ssllabs-focus-chart-wrap,
.ssllabs-history-periods,
#ssllabs-history-chart,
#ssllabs-history-empty {
    opacity: 1;
    transition: opacity var(--cb-duration-fast) ease;
}

.ssllabs-history-card--loading .ssllabs-history-toolbar,
.ssllabs-history-card--loading .ssllabs-history-inspector,
.ssllabs-history-card--loading .ssllabs-problem-domains,
.ssllabs-history-card--loading .ssllabs-focus-chart-wrap,
.ssllabs-history-card--loading .ssllabs-history-periods,
.ssllabs-history-card--loading #ssllabs-history-chart,
.ssllabs-history-card--loading #ssllabs-history-empty {
    visibility: hidden;
    opacity: 0;
}

.ssllabs-history-range {
    width: auto;
    min-width: 5rem;
}

.ssllabs-history-chart-wrap {
    position: relative;
    width: 100%;
    height: 320px;
    /* Matches the opacity fade above so the empty state's shorter height does
       not snap in underneath it. */
    transition: height var(--cb-duration-fast) ease;
}

.ssllabs-history-card.is-empty .ssllabs-history-chart-wrap {
    height: 9rem;
}

.ssllabs-history-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--cb-muted);
    font-size: 0.95rem;
    text-align: center;
    pointer-events: none;
}

.ssllabs-history-empty__icon {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--cb-muted);
    opacity: 0.55;
}

.ssllabs-history-empty__text {
    color: var(--cb-muted);
    font-weight: 400;
}

.ssllabs-history-periods,
.ssllabs-history-period {
    font-size: 0.85rem;
}

.ssllabs-history-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.ssllabs-history-period {
    border: 1px solid var(--cb-border);
    border-radius: 999px;
    background: var(--cb-surface);
    color: inherit;
    padding: 0.2rem 0.55rem;
}

.ssllabs-history-period[aria-pressed="true"] {
    border-color: var(--cb-accent, #0ea5e9);
    box-shadow: 0 0 0 1px var(--cb-accent, #0ea5e9) inset;
}

.ssllabs-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.85rem;
}

.ssllabs-grade-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.ssllabs-grade-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--cb-muted);
}

.ssllabs-grade-legend__swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    flex: 0 0 auto;
    background-color: var(--cb-neutral);
}

[data-grade-rank="7"] {
    background-color: var(--cb-success);
}

[data-grade-rank="6"] {
    background-color: #65a30d;
}

[data-grade-rank="5"] {
    background-color: #84cc16;
}

[data-grade-rank="4"] {
    background-color: #eab308;
}

[data-grade-rank="3"] {
    background-color: var(--cb-warning);
}

[data-grade-rank="2"] {
    background-color: #ea580c;
}

[data-grade-rank="1"] {
    background-color: #dc2626;
}

[data-grade-rank="0"] {
    background-color: var(--cb-danger-strong);
}

[data-grade-rank="-1"] {
    background-color: var(--cb-neutral);
}

.ssllabs-domain-search {
    min-width: 12rem;
    flex: 0 1 16rem;
}

.ssllabs-history-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 1.15rem;
    align-items: stretch;
}

.ssllabs-history-card.is-empty .ssllabs-history-grid {
    grid-template-columns: 1fr;
}

.ssllabs-history-inspector {
    border: 1px solid var(--cb-border);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--cb-surface-muted);
    font-size: 0.85rem;
    min-height: 0;
}

.ssllabs-history-inspector__date {
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.ssllabs-history-inspector__grades {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.75rem;
    margin: 0 0 0.75rem;
}

.ssllabs-history-inspector__grades dt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
}

.ssllabs-history-inspector__grades dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ssllabs-history-inspector__summary {
    list-style: none;
    margin: 0;
    padding: 0.6rem 0 0;
    border-top: 1px solid var(--cb-border);
}

.ssllabs-history-inspector__summary li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0;
    color: var(--cb-muted);
}

.ssllabs-history-inspector__summary strong {
    color: var(--cb-text, inherit);
    font-variant-numeric: tabular-nums;
}

.ssllabs-problem-domains {
    margin-top: 1rem;
}

.ssllabs-problem-domains__empty {
    margin: 0;
    color: var(--cb-muted);
    font-size: 0.85rem;
}

.ssllabs-problem-domains__heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cb-muted);
    margin-bottom: 0.4rem;
}

.ssllabs-problem-domains__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ssllabs-problem-domains__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--cb-border);
    border-radius: 999px;
    background: transparent;
    padding: 0.2rem 0.6rem 0.2rem 0.2rem;
    font-size: 0.8rem;
    color: inherit;
    cursor: pointer;
}

.ssllabs-problem-domains__item[aria-pressed="true"] {
    border-color: var(--cb-accent, #0ea5e9);
    box-shadow: 0 0 0 1px var(--cb-accent, #0ea5e9) inset;
}

.ssllabs-problem-domains__grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.ssllabs-focus-chart-wrap {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cb-border);
}

.ssllabs-pinned-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.ssllabs-pinned-domains__chip {
    border: 1px solid var(--cb-border);
    border-radius: 999px;
    background: transparent;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    color: inherit;
    cursor: pointer;
}

.ssllabs-pinned-domains__limit {
    font-size: 0.8rem;
    color: var(--cb-muted);
    align-self: center;
}

.ssllabs-retention-scale {
    display: grid;
    gap: 0.35rem;
}

.ssllabs-retention-track {
    position: relative;
}

/* Thinner track than the Bootstrap default (0.5rem); the thumb's margin-top is
   re-centered for the new track height using Bootstrap's own formula:
   -(thumb-height - track-height) / 2 = -(1rem - 0.3rem) / 2. */
#ssllabs-retention-slider.form-range::-webkit-slider-runnable-track {
    height: 0.3rem;
}

#ssllabs-retention-slider.form-range::-webkit-slider-thumb {
    margin-top: -0.35rem;
}

#ssllabs-retention-slider.form-range::-moz-range-track {
    height: 0.3rem;
}

.ssllabs-retention-ticks {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    padding-inline: 0.55rem;
    pointer-events: none;
    z-index: 2;
}

.ssllabs-retention-tick {
    grid-row: 1;
    justify-self: start;
    width: 0.8rem;
    height: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--cb-muted) 26%, var(--cb-surface));
    border-radius: var(--cb-pill-radius);
    background: color-mix(in srgb, var(--cb-muted) 15%, var(--cb-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-surface) 82%, transparent);
    transform: translateX(-50%);
}

.ssllabs-retention-tick:nth-child(1) {
    grid-column: 1;
}

.ssllabs-retention-tick:nth-child(2) {
    grid-column: 2;
}

.ssllabs-retention-tick:nth-child(3) {
    grid-column: 3;
}

.ssllabs-retention-tick:nth-child(4) {
    grid-column: 4;
}

.ssllabs-retention-tick:nth-child(5) {
    grid-column: 5;
}

.ssllabs-retention-tick:nth-child(6) {
    grid-column: 6;
}

.ssllabs-retention-tick:nth-child(7) {
    grid-column: 6;
    justify-self: end;
    transform: translateX(50%);
}

#ssllabs-retention-slider[data-active-index="0"]~.ssllabs-retention-ticks .ssllabs-retention-tick:nth-child(1),
#ssllabs-retention-slider[data-active-index="1"]~.ssllabs-retention-ticks .ssllabs-retention-tick:nth-child(2),
#ssllabs-retention-slider[data-active-index="2"]~.ssllabs-retention-ticks .ssllabs-retention-tick:nth-child(3),
#ssllabs-retention-slider[data-active-index="3"]~.ssllabs-retention-ticks .ssllabs-retention-tick:nth-child(4),
#ssllabs-retention-slider[data-active-index="4"]~.ssllabs-retention-ticks .ssllabs-retention-tick:nth-child(5),
#ssllabs-retention-slider[data-active-index="5"]~.ssllabs-retention-ticks .ssllabs-retention-tick:nth-child(6),
#ssllabs-retention-slider[data-active-index="6"]~.ssllabs-retention-ticks .ssllabs-retention-tick:nth-child(7) {
    visibility: hidden;
}

.ssllabs-retention-labels {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    padding-inline: 0.55rem;
    user-select: none;
    pointer-events: none;
}

.ssllabs-retention-label {
    grid-row: 1;
    justify-self: start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* The infinity glyph reads noticeably smaller than digits at the same font-size,
   so scale it up. The reduced line-height keeps its line box equal to the other
   labels (1.125 x 0.72 = 0.81rem) so the label row height stays unchanged. */
.ssllabs-retention-label:nth-child(1) {
    grid-column: 1;
    font-size: 1.125rem;
    line-height: 0.72;
}

.ssllabs-retention-label:nth-child(2) {
    grid-column: 2;
}

.ssllabs-retention-label:nth-child(3) {
    grid-column: 3;
}

.ssllabs-retention-label:nth-child(4) {
    grid-column: 4;
}

.ssllabs-retention-label:nth-child(5) {
    grid-column: 5;
}

.ssllabs-retention-label:nth-child(6) {
    grid-column: 6;
}

.ssllabs-retention-label:nth-child(7) {
    grid-column: 6;
    justify-self: end;
    transform: translateX(50%);
}

.ssllabs-focus-chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 240px;
}

@media (max-width: 991px) {
    .ssllabs-history-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .ssllabs-history-chart-wrap {
        height: 240px;
    }

    .ssllabs-domain-search {
        flex-basis: 100%;
    }

    .ssllabs-focus-chart-canvas-wrap {
        height: 200px;
    }
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-top-row {
    align-items: stretch;
}

.about-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.about-card .panel-card__body {
    flex: 1 1 auto;
    min-height: 0;
}

.about-card__body--flush {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.about-meta-table td {
    padding-block: var(--cb-table-cell-padding-block);
    vertical-align: middle;
}

.about-meta-value {
    /* Matches .about-deps-table code (Dependencies panel) so all value
       columns across the About cards render at the same size. */
    font-size: 0.875rem;
    color: var(--cb-text);
    word-break: break-word;
}

.about-divider {
    height: 1px;
    margin: 1rem 0 0.85rem;
    background: var(--cb-border);
}

.about-accent-icon {
    color: var(--cb-accent);
    flex: 0 0 auto;
}

.about-deps-scroll {
    max-height: 19rem;
    overflow-y: auto;
}

.about-deps-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--cb-surface);
    border-bottom: 1px solid var(--cb-border);
}

.about-deps-table td {
    /* The global .table cell padding (0.8rem) outranks Bootstrap's .table-sm, so
       the read-only dependency rows opt into the shared compact row rhythm. */
    padding-block: var(--cb-table-cell-padding-block);
}

.about-deps-table code {
    font-size: 0.875rem;
}

/* 44px touch target; the negative margin keeps the card at its one-line height. */
.about-author-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-block: calc((1.5em - 2.75rem) / 2);
}

.about-changelog-content {
    max-height: 32rem;
    overflow-y: auto;
    font-size: 0.82rem;
    line-height: 1.35;
}

.about-changelog-content h2 {
    font-size: 0.92rem;
    margin-top: 0.7rem;
    margin-bottom: 0.35rem;
}

.about-changelog-content h2:first-child {
    margin-top: 0;
}

.about-changelog-content ul {
    margin-bottom: 0.5rem;
    padding-left: 1.1rem;
}

.about-changelog-content li {
    margin-bottom: 0.1rem;
}

.about-changelog-content p {
    margin-bottom: 0.4rem;
}

.about-changelog-content code {
    font-size: 0.8125rem;
    padding: 0.05rem 0.3rem;
    border-radius: 0.3rem;
    background: var(--bs-tertiary-bg);
}

.about-changelog-content details {
    margin-top: 0.35rem;
}

.about-changelog-content summary {
    /* 44px touch target; padding keeps the disclosure marker (list-item display). */
    min-height: 2.75rem;
    padding-block: calc((2.75rem - 1.35em) / 2);
    cursor: pointer;
    color: var(--cb-muted);
    font-weight: 600;
    font-size: 0.82rem;
}