/* ==========================================================================
   GPlus Control Center — design system
   --------------------------------------------------------------------------
   One set of tokens, two themes. Dark is the default: an operations console
   is looked at for hours, often beside other monitors. Light uses the same
   tokens, so nothing is designed twice.

   Status colours are deliberately NOT the brand accent. "Healthy", "running",
   "failed" must never be confused with "this is a button". And no status is
   ever shown by colour alone: every badge carries an icon and a word.

   The server writes data-bs-theme on <html> from a cookie, so the page is
   painted in the right theme on the first byte — no flash, and it survives
   Blazor's enhanced navigation.
   ========================================================================== */

/* ---------- Tokens: dark (default) ---------- */
:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    --cc-bg: #070b14;
    --cc-bg-grid: rgba(56, 189, 248, 0.035);
    --cc-surface: #0e1627;
    --cc-surface-2: #131d33;
    --cc-surface-3: #1a2640;
    --cc-border: #1f2c47;
    --cc-border-strong: #2c3d60;

    --cc-text: #e6edf7;
    --cc-text-muted: #93a4c3;
    --cc-text-faint: #6b7c9c;

    --cc-accent: #38bdf8;
    --cc-accent-strong: #0ea5e9;
    --cc-accent-soft: rgba(56, 189, 248, 0.12);
    --cc-accent-glow: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 0 24px -4px rgba(56, 189, 248, 0.45);
    --cc-on-accent: #04111c;

    --cc-healthy: #34d399;
    --cc-healthy-soft: rgba(52, 211, 153, 0.12);
    --cc-running: #60a5fa;
    --cc-running-soft: rgba(96, 165, 250, 0.14);
    --cc-degraded: #fbbf24;
    --cc-degraded-soft: rgba(251, 191, 36, 0.13);
    --cc-failed: #f87171;
    --cc-failed-soft: rgba(248, 113, 113, 0.13);
    --cc-pending: #a3b1c9;
    --cc-pending-soft: rgba(163, 177, 201, 0.12);
    --cc-skipped: #c4b5fd;
    --cc-skipped-soft: rgba(196, 181, 253, 0.12);

    --cc-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --cc-focus: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-accent);
}

/* ---------- Tokens: light ---------- */
[data-bs-theme="light"] {
    color-scheme: light;

    --cc-bg: #f3f6fb;
    --cc-bg-grid: rgba(2, 132, 199, 0.045);
    --cc-surface: #ffffff;
    --cc-surface-2: #f7f9fc;
    --cc-surface-3: #eef2f8;
    --cc-border: #dde4ef;
    --cc-border-strong: #c5cfdf;

    --cc-text: #0f172a;
    --cc-text-muted: #4f5f7a;
    --cc-text-faint: #6d7c96;

    --cc-accent: #0284c7;
    --cc-accent-strong: #0369a1;
    --cc-accent-soft: rgba(2, 132, 199, 0.10);
    --cc-accent-glow: 0 0 0 1px rgba(2, 132, 199, 0.35), 0 6px 18px -6px rgba(2, 132, 199, 0.35);
    --cc-on-accent: #ffffff;

    --cc-healthy: #047857;
    --cc-healthy-soft: rgba(4, 120, 87, 0.10);
    --cc-running: #1d4ed8;
    --cc-running-soft: rgba(29, 78, 216, 0.09);
    --cc-degraded: #b45309;
    --cc-degraded-soft: rgba(180, 83, 9, 0.10);
    --cc-failed: #b91c1c;
    --cc-failed-soft: rgba(185, 28, 28, 0.09);
    --cc-pending: #475569;
    --cc-pending-soft: rgba(71, 85, 105, 0.09);
    --cc-skipped: #6d28d9;
    --cc-skipped-soft: rgba(109, 40, 217, 0.08);

    --cc-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
    --cc-focus: 0 0 0 2px var(--cc-bg), 0 0 0 4px var(--cc-accent);
}

/* ---------- Shared tokens ---------- */
:root {
    --cc-font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
    --cc-font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Roboto", sans-serif;
    --cc-font-mono: "Cascadia Code", "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --cc-radius-sm: 6px;
    --cc-radius: 10px;
    --cc-radius-lg: 14px;

    --cc-sidebar-width: 256px;
    --cc-topbar-height: 60px;
}

/* ---------- Bootstrap, mapped onto the tokens ---------- */
[data-bs-theme] {
    --bs-body-bg: var(--cc-bg);
    --bs-body-color: var(--cc-text);
    --bs-body-font-family: var(--cc-font);
    --bs-secondary-color: var(--cc-text-muted);
    --bs-tertiary-color: var(--cc-text-faint);
    --bs-border-color: var(--cc-border);
    --bs-border-radius: var(--cc-radius-sm);
    --bs-border-radius-lg: var(--cc-radius);
    --bs-link-color: var(--cc-accent);
    --bs-link-color-rgb: 56, 189, 248;
    --bs-link-hover-color: var(--cc-accent-strong);
    --bs-emphasis-color: var(--cc-text);
    --bs-heading-color: var(--cc-text);
    --bs-code-color: var(--cc-accent);
    --bs-secondary-bg: var(--cc-surface-2);
    --bs-tertiary-bg: var(--cc-surface-3);
}

[data-bs-theme="light"] {
    --bs-link-color-rgb: 2, 132, 199;
}

html, body {
    background-color: var(--cc-bg);
    color: var(--cc-text);
    font-family: var(--cc-font);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--cc-font-display);
    letter-spacing: -0.015em;
    font-weight: 650;
}

h1:focus {
    outline: none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

code, kbd, .mono {
    font-family: var(--cc-font-mono);
    font-size: 0.9em;
}

kbd {
    background: var(--cc-surface-3);
    color: var(--cc-text);
    border: 1px solid var(--cc-border-strong);
    border-radius: var(--cc-radius-sm);
    padding: 0.15em 0.45em;
    box-shadow: none;
}

::selection {
    background: var(--cc-accent-soft);
}

:focus-visible {
    outline: none;
    box-shadow: var(--cc-focus);
    border-radius: var(--cc-radius-sm);
}

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-border-radius: var(--cc-radius-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 60ms ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    box-shadow: var(--cc-focus);
}

.btn-primary {
    --bs-btn-color: var(--cc-on-accent);
    --bs-btn-bg: var(--cc-accent);
    --bs-btn-border-color: var(--cc-accent);
    --bs-btn-hover-color: var(--cc-on-accent);
    --bs-btn-hover-bg: var(--cc-accent-strong);
    --bs-btn-hover-border-color: var(--cc-accent-strong);
    --bs-btn-active-color: var(--cc-on-accent);
    --bs-btn-active-bg: var(--cc-accent-strong);
    --bs-btn-active-border-color: var(--cc-accent-strong);
    --bs-btn-disabled-color: var(--cc-on-accent);
    --bs-btn-disabled-bg: var(--cc-accent);
    --bs-btn-disabled-border-color: var(--cc-accent);
}

.btn-primary:hover {
    box-shadow: var(--cc-accent-glow);
}

.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--cc-text);
    --bs-btn-bg: var(--cc-surface-2);
    --bs-btn-border-color: var(--cc-border-strong);
    --bs-btn-hover-color: var(--cc-text);
    --bs-btn-hover-bg: var(--cc-surface-3);
    --bs-btn-hover-border-color: var(--cc-border-strong);
    --bs-btn-active-color: var(--cc-text);
    --bs-btn-active-bg: var(--cc-surface-3);
    --bs-btn-active-border-color: var(--cc-accent);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cc-failed);
    --bs-btn-border-color: var(--cc-failed);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cc-failed);
    --bs-btn-hover-border-color: var(--cc-failed);
}

[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color: #1b0606;
    --bs-btn-hover-color: #1b0606;
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cc-text-muted);
    padding: 0.4rem 0.6rem;
}

.btn-ghost:hover {
    background: var(--cc-surface-3);
    color: var(--cc-text);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: var(--cc-surface-2);
    border-color: var(--cc-border-strong);
    color: var(--cc-text);
    border-radius: var(--cc-radius-sm);
}

.form-control:focus, .form-select:focus {
    background-color: var(--cc-surface-2);
    color: var(--cc-text);
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 3px var(--cc-accent-soft);
}

.form-control::placeholder {
    color: var(--cc-text-faint);
}

.form-floating > label {
    color: var(--cc-text-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--cc-text-muted);
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: transparent;
}

.valid.modified:not([type=checkbox]) {
    outline: none;
}

.invalid {
    border-color: var(--cc-failed) !important;
}

.validation-message, .text-danger {
    color: var(--cc-failed) !important;
    font-size: 0.875rem;
}

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

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--cc-radius);
    border: 1px solid;
    padding: 0.85rem 1rem;
}

.alert-success {
    background: var(--cc-healthy-soft);
    border-color: color-mix(in srgb, var(--cc-healthy) 35%, transparent);
    color: var(--cc-text);
}

.alert-danger {
    background: var(--cc-failed-soft);
    border-color: color-mix(in srgb, var(--cc-failed) 35%, transparent);
    color: var(--cc-text);
}

.alert-warning {
    background: var(--cc-degraded-soft);
    border-color: color-mix(in srgb, var(--cc-degraded) 35%, transparent);
    color: var(--cc-text);
}

.alert-info {
    background: var(--cc-accent-soft);
    border-color: color-mix(in srgb, var(--cc-accent) 35%, transparent);
    color: var(--cc-text);
}

/* ---------- Surfaces ---------- */
.panel {
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-lg);
    box-shadow: var(--cc-shadow);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cc-border);
}

.panel-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.panel-body {
    padding: 1.25rem;
}

.eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cc-text-faint);
}

.muted {
    color: var(--cc-text-muted);
}

.divider {
    height: 1px;
    background: var(--cc-border);
    border: 0;
    margin: 1.25rem 0;
    opacity: 1;
}

/* A definition grid: label / value rows, as on a spec sheet. */
.spec {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) 1fr;
    gap: 0.6rem 1.5rem;
    margin: 0;
}

.spec dt {
    color: var(--cc-text-muted);
    font-weight: 500;
}

.spec dd {
    margin: 0;
}

/* ---------- Page header ---------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.6rem;
    margin: 0.2rem 0 0;
}

.page-header p {
    margin: 0.35rem 0 0;
    color: var(--cc-text-muted);
    max-width: 62ch;
}

/* ---------- Status badges ---------- */
.status {
    --status: var(--cc-pending);
    --status-soft: var(--cc-pending-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--status) 40%, transparent);
    background: var(--status-soft);
    color: var(--status);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.3;
    white-space: nowrap;
}

.status svg {
    flex: none;
}

.status-healthy { --status: var(--cc-healthy); --status-soft: var(--cc-healthy-soft); }
.status-running { --status: var(--cc-running); --status-soft: var(--cc-running-soft); }
.status-degraded { --status: var(--cc-degraded); --status-soft: var(--cc-degraded-soft); }
.status-failed { --status: var(--cc-failed); --status-soft: var(--cc-failed-soft); }
.status-pending { --status: var(--cc-pending); --status-soft: var(--cc-pending-soft); }
.status-skipped { --status: var(--cc-skipped); --status-soft: var(--cc-skipped-soft); }

.status-running .status-pulse {
    animation: cc-pulse 1.6s ease-in-out infinite;
}

@keyframes cc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* A live dot — the "on air" light of the console. */
.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-healthy);
    box-shadow: 0 0 0 3px var(--cc-healthy-soft), 0 0 10px var(--cc-healthy);
    display: inline-block;
    flex: none;
}

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cc-text);
    --bs-table-border-color: var(--cc-border);
    --bs-table-hover-bg: var(--cc-surface-2);
    --bs-table-hover-color: var(--cc-text);
    margin: 0;
}

.table > thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-text-faint);
    background: var(--cc-surface-2);
    border-bottom-color: var(--cc-border-strong);
    padding: 0.7rem 1rem;
    white-space: nowrap;
}

.table > tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

/* ---------- Empty state ---------- */
.empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--cc-text-muted);
}

.empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--cc-accent-soft);
    color: var(--cc-accent);
}

/* ---------- Blazor error UI ---------- */
#blazor-error-ui {
    background: var(--cc-failed);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui a {
    color: #fff;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
}

.blazor-error-boundary {
    background: var(--cc-failed-soft);
    border: 1px solid var(--cc-failed);
    border-radius: var(--cc-radius);
    padding: 1rem 1.25rem;
    color: var(--cc-text);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ---------- The authenticator QR code ----------
   Scanners need dark modules on a light field with a clear margin. It keeps
   its white card in both themes, and no other rule may restyle its SVG. */
.qr-card {
    display: inline-block;
    background: #ffffff;
    padding: 14px;
    border-radius: var(--cc-radius);
    line-height: 0;
}

.qr-card svg {
    width: 200px;
    height: 200px;
    display: block;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
}

.recovery-codes code {
    display: block;
    text-align: center;
    padding: 0.5rem;
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    color: var(--cc-text);
    letter-spacing: 0.04em;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Sign-in pages ---------- */
.auth-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--cc-accent-soft);
    color: var(--cc-accent);
    margin-bottom: 1.25rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-accent) 28%, transparent);
}

.auth-icon.is-danger {
    background: var(--cc-failed-soft);
    color: var(--cc-failed);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-failed) 30%, transparent);
}

.auth-title {
    font-size: 1.65rem;
    margin: 0 0 0.4rem;
}

.auth-lede {
    color: var(--cc-text-muted);
    margin: 0 0 1.75rem;
}

.auth-links {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--cc-text-muted);
}

.otp-input {
    font-family: var(--cc-font-mono);
    font-size: 1.35rem !important;
    letter-spacing: 0.35em;
    text-align: center;
}

/* ---------- Account pages ---------- */
.manage-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.manage-nav {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.manage-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--cc-radius-sm);
    color: var(--cc-text-muted);
    font-weight: 550;
}

.manage-link:hover {
    background: var(--cc-surface-3);
    color: var(--cc-text);
    text-decoration: none;
}

.manage-link.active {
    background: var(--cc-accent-soft);
    color: var(--cc-text);
}

.manage-link.active svg {
    color: var(--cc-accent);
}

.manage-body h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.manage-body .col-xl-6 {
    width: 100%;
    max-width: 460px;
}

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

    .manage-nav {
        flex-direction: row;
        overflow-x: auto;
    }
}

/* Blazor moves focus to a page's heading on navigation, for screen readers. That is not a
   keyboard focus, so it gets no ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ---------- Chips: neutral facts, not states ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--cc-surface-3);
    border: 1px solid var(--cc-border);
    color: var(--cc-text-muted);
}

.chip-accent {
    color: var(--cc-accent);
    border-color: color-mix(in srgb, var(--cc-accent) 35%, transparent);
    background: var(--cc-accent-soft);
}

.chip-warn {
    color: var(--cc-degraded);
    border-color: color-mix(in srgb, var(--cc-degraded) 40%, transparent);
    background: var(--cc-degraded-soft);
}

/* ---------- Data grids (QuickGrid) ---------- */
.grid-wrap {
    overflow-x: auto;
}

.grid-wrap table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.grid-wrap thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-text-faint);
    background: var(--cc-surface-2);
    border-bottom: 1px solid var(--cc-border-strong);
    padding: 0.6rem 1rem;
    white-space: nowrap;
    text-align: left;
}

.grid-wrap thead th .col-title {
    gap: 0.25rem;
}

.grid-wrap thead th button.col-title {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    background: none;
    border: 0;
    padding: 0;
}

.grid-wrap tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--cc-border);
    vertical-align: middle;
}

.grid-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.grid-wrap tbody tr:hover td {
    background: var(--cc-surface-2);
}

.grid-wrap .col-sort-desc .sort-indicator,
.grid-wrap .col-sort-asc .sort-indicator {
    color: var(--cc-accent);
}

.row-link {
    color: var(--cc-text);
    font-weight: 600;
}

.row-link:hover {
    color: var(--cc-accent);
}

.sub {
    display: block;
    font-size: 0.8rem;
    color: var(--cc-text-faint);
}

/* ---------- Inline forms ---------- */
.form-panel {
    border-top: 1px solid var(--cc-border);
    background: var(--cc-surface-2);
    padding: 1.25rem;
    border-radius: 0 0 var(--cc-radius-lg) var(--cc-radius-lg);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.9rem 1rem;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--cc-text-muted);
    margin-bottom: 0.35rem;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--cc-text-faint);
    margin-top: 0.3rem;
}

.form-check-input {
    background-color: var(--cc-surface-2);
    border-color: var(--cc-border-strong);
}

.form-check-input:checked {
    background-color: var(--cc-accent);
    border-color: var(--cc-accent);
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.note {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.85rem;
    color: var(--cc-text-muted);
    padding: 0.75rem 1rem;
    border-radius: var(--cc-radius);
    border: 1px dashed var(--cc-border-strong);
}

.note svg {
    flex: none;
    margin-top: 0.1rem;
    color: var(--cc-accent);
}

.section-stack {
    display: grid;
    gap: 1.25rem;
}

/* QuickGrid ships its own cell padding with scoped selectors that outrank a plain descendant rule;
   the console's rhythm is stated explicitly so its grids and plain tables line up. */
.grid-wrap table > thead > tr > th {
    padding: 0.6rem 1rem !important;
}

.grid-wrap table > tbody > tr > td {
    padding: 0.7rem 1rem !important;
    height: auto !important;
}

.grid-wrap table > thead > tr > th .col-header-content,
.grid-wrap table > thead > tr > th .col-title {
    padding: 0 !important;
}

/* Tester feedback (docs/ARCHITECTURE.md §18): a thread of messages, each shown as the text it is. */
.feedback-message {
    padding: 0.75rem 0 0.75rem 0.9rem;
    border-left: 3px solid var(--bs-border-color);
}

.feedback-message + .feedback-message {
    margin-top: 0.75rem;
}

.feedback-worker {
    border-left-color: var(--bs-primary, #2563eb);
}

.feedback-owner {
    border-left-color: var(--bs-warning, #d97706);
}

.feedback-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.feedback-context {
    max-height: 24rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0.5rem 0 0;
}