/*
 * WebCruxs design language. Page styles consume semantic tokens rather than
 * defining their own palettes, which keeps every workspace surface coherent.
 */
:root {
    --wc-color-canvas: #f4f8f6;
    --wc-color-surface: #ffffff;
    --wc-color-surface-subtle: #f7faf8;
    --wc-color-text: #17211d;
    --wc-color-text-muted: #64756d;
    --wc-color-border: #d8e5df;
    --wc-color-brand: #157554;
    --wc-color-brand-strong: #0d563d;
    --wc-color-brand-subtle: #e5f3ed;
    --wc-color-success: #08724c;
    --wc-color-warning: #9a620d;
    --wc-color-danger: #ad4545;
    --wc-color-info: #24599b;
    --wc-focus-ring: 0 0 0 3px rgba(21, 117, 84, .24);
    --wc-radius-sm: .5rem;
    --wc-radius-md: .75rem;
    --wc-radius-lg: 1rem;
    --wc-shadow-card: 0 10px 30px rgba(18, 55, 40, .07);
    --wc-transition: 160ms ease;

    /* Legacy aliases retain a single source of truth while pages are shared. */
    --ink: var(--wc-color-text);
    --muted: var(--wc-color-text-muted);
    --line: var(--wc-color-border);
    --soft: var(--wc-color-canvas);
    --surface: var(--wc-color-surface);
    --surface-muted: var(--wc-color-surface-subtle);
    --brand: var(--wc-color-brand);
    --brand-dark: var(--wc-color-brand-strong);
    --brand-soft: var(--wc-color-brand-subtle);
    --danger: var(--wc-color-danger);
    --shadow: var(--wc-shadow-card);
}

body { background: var(--wc-color-canvas); color: var(--wc-color-text); }
a { text-underline-offset: .16em; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline: 0; box-shadow: var(--wc-focus-ring); }

.btn { min-height: 2.625rem; border-radius: var(--wc-radius-sm); font-weight: 700; transition: background-color var(--wc-transition), border-color var(--wc-transition), box-shadow var(--wc-transition), transform var(--wc-transition); }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn-brand { background: var(--wc-color-brand); border-color: var(--wc-color-brand); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--wc-color-brand-strong); border-color: var(--wc-color-brand-strong); }
.btn-outline-brand { border-color: color-mix(in srgb, var(--wc-color-brand) 30%, white); color: var(--wc-color-brand-strong); }
.btn-outline-brand:hover { background: var(--wc-color-brand-subtle); border-color: var(--wc-color-brand); color: var(--wc-color-brand-strong); }
.card-ui { border-color: var(--wc-color-border); border-radius: var(--wc-radius-md); box-shadow: var(--wc-shadow-card); }
.form-control, .form-select { border-color: var(--wc-color-border); }
.form-control:focus, .form-select:focus { border-color: var(--wc-color-brand); box-shadow: var(--wc-focus-ring); }
.table > :not(caption) > * > * { border-color: var(--wc-color-border); }

/* Primary navigation uses familiar task symbols and token-driven states. */
.sidebar .side-icon { display: inline-grid; flex: 0 0 1.5rem; width: 1.5rem; min-height: 1.5rem; place-items: center; color: color-mix(in srgb, var(--wc-color-brand-subtle) 82%, white); font-size: 1rem; line-height: 1; transition: color var(--wc-transition), transform var(--wc-transition); }
.sidebar .side-link:hover .side-icon, .sidebar .side-link:focus-visible .side-icon, .sidebar .side-link.active .side-icon { color: var(--wc-color-surface); transform: scale(1.08); }
.sidebar .side-icon i, .sidebar-collapse-toggle i { line-height: 1; }
.sidebar-collapse-toggle { color: color-mix(in srgb, var(--wc-color-brand-subtle) 82%, white); }
.sidebar-collapse-toggle:hover, .sidebar-collapse-toggle:focus-visible { background: var(--wc-color-brand); color: var(--wc-color-surface); }

/* Native progress preserves dynamic values without style attributes. */
.wc-progress { display: block; width: 100%; height: .5rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--wc-color-border); accent-color: var(--wc-color-brand); }
.wc-progress::-webkit-progress-bar { background: var(--wc-color-border); }
.wc-progress::-webkit-progress-value { background: var(--wc-color-brand); border-radius: inherit; }
.wc-progress::-moz-progress-bar { background: var(--wc-color-brand); border-radius: inherit; }
.readiness-progress { margin: 0 1.1875rem; background: transparent; }
.readiness-progress .wc-progress { height: .375rem; }
.job-progress { display: inline-block; width: 4.875rem; height: .375rem; margin-right: .4375rem; vertical-align: middle; background: transparent; }
.job-progress .wc-progress { height: .375rem; }
.analytics-bars progress { height: .5rem; }

/* Global feedback uses one designed language for success, warnings, errors, and confirmations. */
.flash-toast-region{gap:12px;width:min(38rem,calc(100vw - 2rem))}.flash-toast{grid-template-columns:3.5rem minmax(0,1fr) 2.25rem;gap:14px;padding:14px 16px 14px 18px;border:1px solid var(--wc-color-border);border-radius:var(--wc-radius-lg);box-shadow:var(--wc-shadow-card)}.flash-toast::before{width:46%;opacity:.36;background-image:radial-gradient(circle at 2px 2px,color-mix(in srgb,var(--wc-color-brand) 14%,transparent) 1.4px,transparent 1.6px)}.flash-toast__icon{width:3.5rem;height:3.5rem;background:var(--wc-color-success);font-size:1.7rem}.flash-toast__content strong{color:var(--wc-color-success);font-size:1rem}.flash-toast__content p,.flash-toast__content ul{margin-top:3px;font-weight:550}.flash-toast--warning .flash-toast__icon{background:var(--wc-color-warning)}.flash-toast--warning .flash-toast__content strong{color:var(--wc-color-warning)}.flash-toast--error .flash-toast__icon{background:var(--wc-color-danger)}.flash-toast--error .flash-toast__content strong{color:var(--wc-color-danger)}.flash-toast--status .flash-toast__icon{background:var(--wc-color-info)}.flash-toast--status .flash-toast__content strong{color:var(--wc-color-info)}
.wc-confirmation-modal .modal-dialog{width:min(31rem,calc(100% - 2rem))}.wc-confirmation-modal .modal-content{overflow:hidden;border:1px solid var(--wc-color-border);border-radius:var(--wc-radius-lg);box-shadow:0 1.5rem 4rem rgba(18,55,40,.2)}.wc-confirmation-modal .modal-body{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:14px;padding:24px}.wc-confirmation-icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--wc-color-brand-subtle);color:var(--wc-color-brand);font-size:1.75rem;font-weight:850}.wc-confirmation-copy .eyebrow{margin:1px 0 4px}.wc-confirmation-copy h2{margin:0;font-size:1.25rem;letter-spacing:-.02em}.wc-confirmation-copy p:last-child{margin:6px 0 0;color:var(--wc-color-text-muted);font-size:.9375rem;line-height:1.5}.wc-confirmation-modal .modal-footer{justify-content:flex-end;gap:8px;padding:0 24px 24px;border:0}.wc-confirmation-modal.is-danger .wc-confirmation-icon{background:color-mix(in srgb,var(--wc-color-danger) 13%,white);color:var(--wc-color-danger)}.wc-confirmation-modal.is-danger [data-confirmation-accept]{background:var(--wc-color-danger);border-color:var(--wc-color-danger)}.wc-confirmation-modal.is-warning .wc-confirmation-icon{background:color-mix(in srgb,var(--wc-color-warning) 16%,white);color:var(--wc-color-warning)}.wc-confirmation-modal.is-warning [data-confirmation-accept]{background:var(--wc-color-warning);border-color:var(--wc-color-warning);color:var(--wc-color-text)}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 600px) {
    .flash-toast{grid-template-columns:3rem minmax(0,1fr) 1.875rem;padding:13px 14px;border-radius:var(--wc-radius-md)}
    .flash-toast__icon{width:3rem;height:3rem;font-size:1.5rem}
    .wc-confirmation-modal .modal-body{grid-template-columns:1fr;padding:20px}
    .wc-confirmation-modal .modal-footer{padding:0 20px 20px}
    .wc-confirmation-modal .modal-footer .btn{flex:1}
}