:root {
    --cb-bg: #ebe3d2;
    --cb-surface: rgba(255, 255, 255, 0.88);
    --cb-surface-strong: rgba(21, 34, 46, 0.92);
    --cb-text: #15222e;
    --cb-muted: #5c6773;
    --cb-accent: #0f766e;
    --cb-accent-strong: #115e59;
    --cb-border: rgba(21, 34, 46, 0.1);
    --cb-shadow: 0 18px 42px rgba(21, 34, 46, 0.1);
    --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;
    --cb-ssllabs-site-column-width: clamp(11rem, 14vw, 14.5rem);
    --cb-ssllabs-scheduler-column-width: 10.75rem;
    --cb-ssllabs-actions-column-width: 9.25rem;
    --cb-ssllabs-domain-grid: minmax(0, 1fr) var(--cb-ssllabs-scheduler-column-width) var(--cb-ssllabs-actions-column-width);
    --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;
    --cb-z-backdrop: 1029;
    --cb-z-sidebar: 1030;
    --cb-z-mobile-toggle: 1040;
    --cb-z-skip-link: 1100;
    /* 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;
}

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);
    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%);
}

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;
    -webkit-overflow-scrolling: touch;
}

.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;
    color: rgba(15, 23, 42, 0.55);
}

.app-sidebar .brand-mark__kicker {
    color: rgba(248, 250, 252, 0.6);
}

.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;
    color: rgba(248, 250, 252, 0.78);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms 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;
    -webkit-overflow-scrolling: touch;
}

.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.3rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.75rem;
    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;
    }
}

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

.app-toast-stack {
    z-index: 1095;
    display: grid;
    gap: 0.75rem;
    top: max(1rem, env(safe-area-inset-top)) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
    max-width: min(100vw - 1.5rem, 24rem);
}

.app-toast-stack .toast {
    width: 100%;
    will-change: transform, opacity;
}

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

.app-toast-stack .toast.fade {
    opacity: 0;
    transform: translate3d(1.2rem, 0, 0);
    transition: transform 180ms ease, opacity 180ms ease;
}

.app-toast-stack .toast.fade.show,
.app-toast-stack .toast.fade.showing {
    display: block;
}

.app-toast-stack .toast.fade.show {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.app-toast-stack .toast.fade.showing {
    opacity: 0;
    transform: translate3d(1.2rem, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .app-toast-stack .toast.fade {
        transition: opacity 120ms linear;
        transform: none;
    }

    .app-toast-stack .toast.fade.show,
    .app-toast-stack .toast.fade.showing {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .app-toast-stack {
        top: calc(var(--cb-mobile-topbar-height) + env(safe-area-inset-top) + 0.75rem) !important;
        left: max(0.75rem, env(safe-area-inset-left)) !important;
        right: max(0.75rem, env(safe-area-inset-right)) !important;
        max-width: none;
    }
}

.app-page {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.app-page__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 1.2rem;
}

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

.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: #ef4444;
}

.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: 0 20px 48px -18px rgba(5, 23, 49, 0.3), 0 8px 18px rgba(5, 23, 49, 0.12);
}

.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: 0 4px 12px rgba(15, 118, 110, 0.08);
}

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

.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-accent);
    box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.14);
    border-color: color-mix(in srgb, var(--cb-accent) 60%, white 40%);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cb-accent) 14%, transparent);
}

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

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

.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;
    height: auto;
}

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

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

.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 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms 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: 0 10px 20px rgba(21, 34, 46, 0.08);
    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.85rem 1rem;
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 0.85rem;
    background: rgba(15, 118, 110, 0.06);
}

.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: #16a34a;
    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: #166534;
    border-color: rgba(22, 101, 52, 0.18);
    background: rgba(34, 197, 94, 0.12);
}

.cb-field-check[data-field-check-status="failed"] {
    color: #b42318;
    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.14);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms 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>* {
    --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: #15803d;
}

.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: #b91c1c;
}

.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: rgba(16, 185, 129, 0.14);
    color: #065f46;
}

.status-pill--offline {
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
}

.status-pill--unknown {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.status-pill--warning {
    background: rgba(245, 158, 11, 0.18);
    color: #92400e;
}

.badge {
    box-shadow: 0 2px 8px rgba(21, 34, 46, 0.08);
}

.ssllabs-callout {
    height: auto;
}

#ssllabs-api-config {
    height: auto;
}

.settings-layout {
    align-items: stretch;
}

.settings-panel {
    height: 100%;
}

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

.settings-stack {
    align-content: start;
}

.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: 1.75rem;
    vertical-align: middle;
}

#ssllabs-settings,
#password-settings {
    height: auto;
}

.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-wrap {
    -webkit-overflow-scrolling: touch;
}

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

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

.ssllabs-table td {
    vertical-align: top;
}

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

.ssllabs-table .ssllabs-actions {
    width: 100%;
    min-width: 0;
}

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

.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(0, 1fr) minmax(10rem, 14rem) 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: 2.75rem;
    padding-block: 0.35rem;
    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 160ms ease, box-shadow 160ms ease, background 160ms 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: color-mix(in srgb, var(--cb-accent) 60%, white 40%);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--cb-accent) 16%, transparent);
    outline: none;
}

.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;
    -webkit-overflow-scrolling: touch;
}

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

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

@media (min-width: 1200px) {

    .app-page--sites,
    .ssllabs-page {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - var(--cb-footer-viewport-reserve) - var(--cb-app-main-vertical-padding));
    }

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

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

    .ssllabs-panel {
        flex: 1 1 auto;
        height: auto;
        min-height: 30rem;
        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;
}

.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 {
    height: auto;
    padding-bottom: 0;
    container-name: sites-list-panel;
    container-type: inline-size;
}

.sites-form-panel {
    height: auto;
}

.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;
    -webkit-overflow-scrolling: touch;
}

.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;
    padding-block: 0.32rem;
}

.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 .btn-sm.btn--icon-only {
    inline-size: 2rem;
    min-inline-size: 2rem;
    min-block-size: 2rem;
    padding-inline: 0;
}

.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: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.site-cert__summary--expired .site-cert__status {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.site-cert__summary--renewing .site-cert__status {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.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: #b91c1c;
    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 {
        margin-bottom: 0.25rem;
    }

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

    .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;
        margin-bottom: 0.75rem;
    }

    .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;
        padding: 0.35rem;
        margin: -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 (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: 0 6px 16px -10px rgba(5, 23, 49, 0.25), 0 2px 6px rgba(5, 23, 49, 0.05);
    }

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

    /* 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%;
    }
}

/* 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: 2.1rem;
    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 160ms ease, box-shadow 160ms ease, background 160ms ease;
    appearance: none;
}

.sites-search__input:focus {
    background: rgba(255, 255, 255, 0.92);
    border-color: color-mix(in srgb, var(--cb-accent) 60%, white 40%);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--cb-accent) 16%, transparent);
}

.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-search__input {
        min-block-size: 2.75rem;
    }

    .sites-list-scroll .table .cell-actions .btn,
    .sites-list-scroll .sites-table .btn-sm.btn--icon-only,
    .ssllabs-domain-card .btn,
    .ssllabs-domain-card button {
        min-block-size: 2.75rem;
        min-inline-size: 2.75rem;
    }

    .sites-form-modal .modal-dialog {
        align-items: stretch;
        max-width: none;
        width: 100%;
        min-height: 100svh;
        height: 100dvh;
        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));
        -webkit-overflow-scrolling: touch;
    }
}

.ssllabs-domain-card {
    overflow: hidden;
    border: 1px solid rgba(21, 34, 46, 0.08);
    border-radius: 1rem;
    background: rgba(21, 34, 46, 0.03);
}

.ssllabs-domain-card[open] {
    background: rgba(21, 34, 46, 0.04);
}

.ssllabs-domain-card__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 46px;
    padding: 0.35rem 0.75rem 0.35rem 0.85rem;
    cursor: pointer;
    list-style: none;
}

.ssllabs-domain-card__summary::-webkit-details-marker {
    display: none;
}

.ssllabs-domain-card__summary::marker {
    content: "";
}

.ssllabs-domain-card__summary:focus-visible {
    outline: 2px solid rgba(74, 110, 250, 0.45);
    outline-offset: -2px;
}

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

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

.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: 0.45rem;
    min-width: 0;
}

.ssllabs-domain-card__quick-actions .btn {
    white-space: nowrap;
}

.ssllabs-domain-card__chevron {
    color: var(--cb-muted);
    transition: transform 0.15s ease;
}

.ssllabs-domain-card[open] .ssllabs-domain-card__chevron {
    transform: rotate(180deg);
}

.ssllabs-domain-card__details {
    display: grid;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem 0.85rem;
    border-top: 1px solid rgba(21, 34, 46, 0.08);
}

.ssllabs-domain-card__actions {
    display: grid;
    grid-template-columns: var(--cb-ssllabs-domain-grid);
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem 0.55rem 0.85rem;
}

.ssllabs-domain-card__inline-scheduler {
    display: none;
    min-width: 0;
}

/* Grade keeps a heavier weight and a stable min-width for alignment,
   but never grows taller than the shared pill geometry. */
.ssllabs-result__grade {
    min-width: 1.7rem;
    font-weight: 800;
    text-decoration: none;
}

.ssllabs-result__grade--compact,
.ssllabs-result__status-badge--compact {
    flex: 0 0 auto;
}

.ssllabs-result__endpoints {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.ssllabs-endpoint-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.65rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid rgba(21, 34, 46, 0.08);
    border-radius: 999px;
    background: rgba(21, 34, 46, 0.04);
    font-size: 0.76rem;
    white-space: nowrap;
}

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

.ssllabs-endpoint-chip__grade {
    min-width: 1.7rem;
    font-weight: 800;
}

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

@container ssllabs-panel (min-width: 68rem) {
    .ssllabs-table {
        table-layout: fixed;
    }

    .ssllabs-table__domains-headings {
        grid-template-columns: var(--cb-ssllabs-domain-grid);
    }

    .ssllabs-table__domains-headings> :first-child {
        grid-column: 1;
    }

    .ssllabs-table__scheduler-heading {
        grid-column: 2;
        justify-self: start;
    }

    .ssllabs-table td[data-label="Site"] {
        overflow: hidden;
    }

    .site-row-title,
    .ssllabs-site-domains {
        max-width: 100%;
    }

    .site-row-title .fw-semibold {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ssllabs-site-domain-badge {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ssllabs-domain-list {
        gap: 0.45rem;
    }

    .ssllabs-domain-card {
        border-radius: 0.9rem;
    }

    .ssllabs-domain-card__summary {
        grid-template-columns: var(--cb-ssllabs-domain-grid);
        min-height: 44px;
        padding-block: 0.25rem;
    }

    .ssllabs-domain-card__inline-scheduler {
        display: flex;
        align-items: center;
        min-width: 0;
        width: var(--cb-ssllabs-scheduler-column-width);
    }

    .ssllabs-domain-card__inline-scheduler .ssllabs-schedule-form {
        width: 100%;
        min-width: 0;
    }

    .ssllabs-domain-card__inline-scheduler .ssllabs-schedule-form .form-select {
        width: 100%;
        min-width: 0;
        max-width: var(--cb-ssllabs-scheduler-column-width);
    }

    .ssllabs-domain-card__main {
        gap: 0.4rem;
    }

    .ssllabs-domain-card__quick-actions {
        width: var(--cb-ssllabs-actions-column-width);
        justify-content: flex-end;
    }

    .ssllabs-domain-card__actions {
        grid-template-columns: var(--cb-ssllabs-domain-grid);
    }

    .ssllabs-domain-card__actions .ssllabs-schedule-form {
        width: 100%;
        min-width: 0;
    }

    .ssllabs-domain-card__actions .ssllabs-schedule-form .form-select {
        width: 100%;
        min-width: 0;
    }

    .ssllabs-table .ssllabs-actions {
        width: 100%;
    }

    .ssllabs-table .ssllabs-domain-card__controls .ssllabs-actions {
        width: 100%;
        min-width: 0;
    }

    .ssllabs-domain-card .btn-sm {
        min-block-size: 2.75rem;
        padding-inline: 0.65rem;
        border-radius: 999px;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    .ssllabs-domain-card .form-select-sm {
        min-height: 2.75rem;
        padding-block: 0.35rem;
        padding-inline: 0.65rem 2rem;
        border-radius: 999px;
        font-size: 0.78rem;
    }

    .ssllabs-table .ssllabs-schedule-form .form-select {
        width: 100%;
        min-width: 0;
    }
}

@container ssllabs-panel (max-width: 67.999rem) {
    .ssllabs-table__domains-headings {
        display: flex;
        justify-content: space-between;
    }

    .ssllabs-table__scheduler-heading {
        display: none;
    }

    .ssllabs-domain-card__summary {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .ssllabs-domain-card__main {
        flex-wrap: wrap;
        white-space: normal;
    }

    .ssllabs-domain-card__quick-actions {
        justify-content: space-between;
    }

    .ssllabs-domain-card__details {
        gap: 0.7rem;
    }

    .ssllabs-domain-card__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding-top: 0;
    }

    .ssllabs-domain-card__inline-scheduler {
        display: flex;
        align-items: center;
    }
}

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

    .ssllabs-filterbar {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-ssllabs-clear-filters] {
        min-block-size: 2.75rem;
    }

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

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

    .ssllabs-table thead {
        display: none;
    }

    .ssllabs-table tr {
        padding: 0.85rem 0;
        border-top: 1px solid rgba(21, 34, 46, 0.08);
    }

    .ssllabs-table tr:first-child {
        border-top: 0;
    }

    .ssllabs-table td {
        display: grid;
        grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.45rem 0;
        border-bottom: 0;
    }

    .ssllabs-table td::before {
        content: attr(data-label);
        color: var(--cb-muted);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .ssllabs-table td[colspan] {
        display: block;
    }

    .ssllabs-table td[colspan]::before {
        content: none;
    }

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

    .ssllabs-domain-card__summary {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding-inline: 0.75rem;
    }

    .ssllabs-domain-card__main {
        flex-wrap: wrap;
        white-space: normal;
    }

    .ssllabs-domain-card__inline-scheduler {
        display: flex;
        align-items: center;
    }

    .ssllabs-domain-card__quick-actions {
        justify-content: space-between;
    }

    .ssllabs-domain-card__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        padding-top: 0;
    }

    .ssllabs-domain-card .ssllabs-schedule-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@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;
        -webkit-overflow-scrolling: touch;
    }

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

    .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: 12px 1fr;
    gap: 1rem;
    align-items: start;
}

.timeline-item__dot {
    width: 12px;
    height: 12px;
    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) {
    .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: color-mix(in srgb, var(--cb-accent) 60%, white 40%);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--cb-accent) 16%, transparent);
}

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

.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-accent);
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.16);
    border-color: color-mix(in srgb, var(--cb-accent) 60%, white 40%);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--cb-accent) 16%, transparent);
}

.table .cell-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: max-content;
}

.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 160ms 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: 0 4px 12px rgba(15, 118, 110, 0.35);
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms 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 240ms ease, visibility 240ms ease;
}

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

.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);
        background: color-mix(in srgb, var(--cb-bg) 86%, transparent);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--cb-border);
    }

    /* 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;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform 280ms 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 {
        gap: 0.9rem;
        overflow-x: hidden;
    }

    .app-page__header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 0;
        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%;
    }

}

/* 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;
}

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

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

.ssllabs-history-chart-wrap {
    position: relative;
    width: 100%;
    height: 320px;
}

.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.25rem;
    color: var(--cb-muted);
    font-size: 0.95rem;
    text-align: center;
    pointer-events: none;
}

.ssllabs-history-empty__text {
    color: var(--cb-text, inherit);
    font-weight: 600;
}

.ssllabs-history-empty__hint {
    max-width: 28rem;
    font-size: 0.85rem;
}

.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: #64748b;
}

[data-grade-rank="7"]  { background-color: #15803d; }
[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: #f97316; }
[data-grade-rank="2"]  { background-color: #ea580c; }
[data-grade-rank="1"]  { background-color: #dc2626; }
[data-grade-rank="0"]  { background-color: #991b1b; }
[data-grade-rank="-1"] { background-color: #64748b; }

.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-inspector {
    border: 1px solid var(--cb-border);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--cb-surface-muted, rgba(127, 127, 127, 0.04));
    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-labels {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    width: 100%;
    user-select: none;
    pointer-events: none;
}

.ssllabs-retention-label {
    font-size: 0.675rem;
    color: var(--bs-secondary-color);
    justify-self: center;
    line-height: 1;
    white-space: nowrap;
}

.ssllabs-retention-label:first-child {
    justify-self: start;
    text-align: left;
}

.ssllabs-retention-label:last-child {
    justify-self: end;
    text-align: right;
}

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