:root {
    color-scheme: light;
    --ink: #162432;
    --muted: #687c8d;
    --navy: #006387;
    --navy-soft: #006387;
    --line: #d6e0e6;
    --line-strong: #AABCC6;
    --surface: #ffffff;
    --canvas: #f3f6f8;
    --accent: #AABCC6;
    --accent-dark: #006387;
    --good: #16845a;
    --good-soft: #e9f7f0;
    --warning: #c66f18;
    --warning-soft: #fff5e4;
    --danger: #bf3c3c;
    --part-d: #4e8baa;
    --part-s: #679c87;
    --part-k: #8177ad;
    --part-v: #b98162;
    --swiftwebui-dialog-backdrop: rgba(8, 26, 37, .5);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
    margin: 0;
    min-width: 320px;
    background: var(--canvas);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.4;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid #006387; outline-offset: 2px; }

/* Shown until the Swift runtime mounts and replaces the contents of #app.
   Transform and opacity animations keep running on the compositor while the
   WebAssembly module compiles on the main thread. */
.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 24px;
    text-align: center;
}
.app-loading-sheet { width: 160px; height: 100px; overflow: visible; }
.app-loading-outline { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2.5; }
.app-loading-part {
    fill: var(--part);
    opacity: 0;
    animation: app-loading-nest 3.2s cubic-bezier(.2, .7, .3, 1) var(--delay) infinite;
}
.app-loading-label { color: var(--muted); font-size: 13px; letter-spacing: .02em; }
@keyframes app-loading-nest {
    0% { opacity: 0; transform: translateY(-14px); }
    12% { opacity: .9; transform: translateY(0); }
    62% { opacity: .9; transform: translateY(0); }
    75%, 100% { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .app-loading-part { animation: none; opacity: .9; }
}

/* Pseudo states cannot be represented by a view modifier. */
.field-control-interactive:hover { border-color: #8ba4b2 !important; }
.primary-action:hover { background: #004f6c !important; }
.secondary-action:hover { border-color: #8ba4b2 !important; background: #f8fafb !important; }
.segment-action:hover { color: var(--ink) !important; }
.table-action-interactive:hover { text-decoration: underline; }
.tab-control:hover { color: var(--ink) !important; }

/* While the optimizer runs, the controls sit in a disabled fieldset. */
fieldset:disabled { cursor: progress; }
fieldset:disabled :is(button, input, select, textarea) { pointer-events: none; opacity: .6; }

/* Keyframes cannot be represented by a view modifier. A transform animation
   keeps turning on the compositor while the optimizer blocks the main thread. */
.calculation-spinner { flex-shrink: 0; animation: calculation-spin .7s linear infinite; }
@keyframes calculation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .calculation-spinner { animation-duration: 2s; }
}

/* Structural table selectors stay in CSS; cell-specific alignment lives in Swift. */
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    text-align: left;
    background: #eaf0f3;
    color: #536b7a;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover > td { background: #fbfcfd; }
.dimension-cell-divider:last-child { border-right: 0 !important; }
.dimension-row-divider:last-child { border-bottom: 0 !important; }

/* Viewport-dependent declarations are the intentional CSS escape hatch. */
@media (max-width: 1250px) {
    .workspace-responsive { grid-template-columns: 300px minmax(0, 1fr) !important; padding: 16px !important; }
    .metric-grid-responsive { grid-template-columns: repeat(3, 1fr) !important; }
    .editor-grid-responsive { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 850px) {
    .workspace-responsive { grid-template-columns: 1fr !important; }
    .settings-panel-responsive { position: static !important; }
    .metric-grid-responsive,
    .scenario-grid-responsive,
    .proposal-grid-responsive { grid-template-columns: 1fr 1fr !important; }
    .dimension-grid-responsive { grid-template-columns: 1fr 1fr !important; }
    .four-grid-responsive,
    .improvement-grid-responsive { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 560px) {
    .workspace-responsive { padding: 10px !important; }
    .metric-grid-responsive,
    .scenario-grid-responsive,
    .proposal-grid-responsive,
    .four-grid-responsive,
    .improvement-grid-responsive,
    .editor-grid-responsive { grid-template-columns: 1fr !important; }
    .dimension-grid-responsive { grid-template-columns: 1fr !important; }
    .page-title-responsive { font-size: 22px !important; }
    .pattern-mix-controls-responsive { align-items: stretch !important; }
    .pattern-mix-controls-responsive > * { width: 100% !important; }
}

/* Printing a single section: Browser.printElement copies it into
   .print-document and sets body.printing; everything else is hidden. */
.print-only { display: none !important; }

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    html, body { background: #fff; min-width: 0; }
    body.printing > :not(.print-document) { display: none !important; }
    .print-document * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-document .print-only { display: block !important; }
    .print-document > section { padding: 0 !important; border: 0 !important; box-shadow: none !important; }
    .print-document table { min-width: 0; }
    .print-document th { position: static; }
    .print-document tr { break-inside: avoid; }
}