/* Complex Formation Workbench
   Tokens and components from design/HANDOFF.md §2 and the canvas comps.
   No build step: this file is served as authored. */

:root {
    --font-ui: Archivo, "Segoe UI", -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --text-title: 26px;
    --text-screen-h1: 18px;
    --text-feature: 16px;
    --text-panel: 13px;
    --text-body: 12.5px;
    --text-body-2: 11.5px;
    --text-label: 11px;
    --text-meta: 10.5px;
    --text-badge: 10px;

    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-6: 24px; --space-8: 32px;

    --radius-xs: 4px; --radius-sm: 6px; --radius-md: 7px;
    --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px;

    --ink: #14181C; --ink-2: #545D66; --ink-3: #6D767F; --ink-disabled: #9AA3AB;
    --line-strong: #C3CAD1; --line: #DEE2E6; --line-soft: #EDEFF1;
    --surface: #FFFFFF; --surface-2: #F6F7F8; --surface-3: #F1F3F5; --surface-4: #FBFBFC;
    --canvas: #EDEFF1;

    --accent: #1D63D1; --accent-ink: #15489B; --accent-ink-2: #0F3570;
    --accent-wash: #EAF1FD; --accent-wash-2: #F8FAFE; --accent-line: #C9D7EE;

    --ok: #0C7055; --ok-ink: #0A5D47; --ok-wash: #E6F4F0;
    --warn: #B4530C; --warn-ink: #8A3F08; --warn-ink-2: #6B3306; --warn-wash: #FDF0E6; --warn-line: #F3DCC6;
    --danger: #B3261E; --danger-ink: #8E1F18; --danger-ink-2: #6B1A14; --danger-wash: #FCECEA; --danger-line: #F2D6D3;

    --geom-point: #2E8B7A;

    --control-lg: 38px; --control: 34px; --control-sm: 32px; --control-xs: 30px;
    --focus-ring: 0 0 0 3px rgba(29, 99, 209, 0.35);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-body);
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

a { color: var(--accent-ink); }
a:hover { color: var(--accent-ink-2); }

/* --- Chrome ------------------------------------------------------------- */
.app-header {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--surface); border-bottom: 1px solid var(--line);
    flex: none; flex-wrap: wrap;
}
.app-mark {
    width: 26px; height: 26px; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff;
    font-size: var(--text-label); font-weight: 600;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.app-brand h1 { margin: 0; font-size: var(--text-panel); font-weight: 600; line-height: 16px; }
.app-brand div { font-size: var(--text-label); color: var(--ink-3); line-height: 14px; }
.app-nav { display: flex; gap: var(--space-1); margin-left: var(--space-6); }
.app-nav a {
    padding: 0 var(--space-3); height: var(--control-sm);
    display: inline-flex; align-items: center;
    border-radius: var(--radius-md); text-decoration: none;
    color: var(--ink-2); font-size: var(--text-panel);
}
.app-nav a:hover { background: var(--surface-2); color: var(--ink); }
.app-nav a.is-active { background: var(--accent-wash); color: var(--accent-ink); font-weight: 500; }
.app-spacer { margin-left: auto; }

main { flex: 1; min-height: 0; overflow-y: auto; }
.wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.wrap-wide { max-width: 1320px; }

/* --- Type --------------------------------------------------------------- */
h2.screen { margin: 0 0 var(--space-1); font-size: var(--text-screen-h1); font-weight: 600; letter-spacing: -0.01em; }
p.lede { margin: 0 0 var(--space-4); font-size: var(--text-body); color: var(--ink-2); max-width: 70ch; }
h3.section {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-label); font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}

/* --- Cards and tables --------------------------------------------------- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-xl); padding: var(--space-4);
}
.card + .card { margin-top: var(--space-3); }
.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

table.rows { width: 100%; border-collapse: collapse; }
table.rows th {
    text-align: left; font-size: var(--text-label); font-weight: 600; color: var(--ink-3);
    padding: var(--space-2); border-bottom: 1px solid var(--line-strong);
}
table.rows td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.rows tbody tr:hover { background: var(--surface-2); }
.row-title { font-weight: 500; }
.row-sub { font-size: var(--text-label); color: var(--ink-3); }

/* --- Controls ----------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: var(--control); padding: 0 var(--space-3);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: var(--text-body); cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: transparent; color: #fff; font-weight: 500; }
.btn-primary:hover { background: var(--accent-ink); border-color: transparent; color: #fff; }
.btn-lg { height: var(--control-lg); padding: 0 var(--space-4); font-size: var(--text-panel); }
.btn[disabled], .btn[aria-disabled="true"] {
    background: var(--surface-2); border-color: var(--line-soft);
    color: var(--ink-disabled); cursor: not-allowed;
}
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

label.field { display: block; font-size: var(--text-label); color: var(--ink-2); margin-bottom: var(--space-1); }
input[type="text"], input[type="number"], select, textarea {
    width: 100%; height: var(--control-sm);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); padding: 0 var(--space-2);
    font-family: inherit; font-size: var(--text-body); color: var(--ink);
}
textarea { height: auto; padding: var(--space-2); font-family: var(--font-mono); font-size: var(--text-meta); }
input.mono-input { font-family: var(--font-mono); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.field-row { display: flex; gap: var(--space-3); }
.field-row > div { flex: 1; min-width: 0; }

/* --- Badges ------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-badge); font-weight: 600;
    border-radius: var(--radius-xs); padding: 2px 6px;
    background: var(--surface-3); color: var(--ink-2);
}
.badge-ok { background: var(--ok-wash); color: var(--ok-ink); }
.badge-warn { background: var(--warn-wash); color: var(--warn-ink); }
.badge-danger { background: var(--danger-wash); color: var(--danger-ink); }
.badge-accent { background: var(--accent-wash); color: var(--accent-ink); }

.stat { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.stat div dt { font-size: var(--text-label); color: var(--ink-3); margin-bottom: 2px; }
.stat div dd { margin: 0; font-family: var(--font-mono); font-size: 20px; font-weight: 500; }

/* --- Notices ------------------------------------------------------------ */
.notice { border-radius: var(--radius-xl); padding: var(--space-3) var(--space-4); font-size: var(--text-body-2); line-height: 17px; }
.notice-info { background: var(--accent-wash-2); border: 1px solid var(--accent-line); color: var(--ink-2); }
.notice-warn { background: var(--warn-wash); border: 1px solid var(--warn-line); color: var(--warn-ink-2); }
.notice-danger { background: var(--danger-wash); border: 1px solid var(--danger-line); color: var(--danger-ink-2); }
.notice-ok { background: var(--ok-wash); border: 1px solid #BFE3D8; color: var(--ok-ink); }
.notice + .notice { margin-top: var(--space-2); }

.empty {
    border: 1px dashed var(--line-strong); border-radius: var(--radius-xl);
    background: var(--surface-2); padding: var(--space-8) var(--space-4);
    text-align: center; color: var(--ink-2);
}
.empty strong { display: block; color: var(--ink); margin-bottom: var(--space-1); font-size: var(--text-panel); }

/* Loading skeleton, per the design's loading state. */
.skeleton { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); padding: var(--space-4); }
.skeleton .bar { height: 10px; border-radius: 5px; background: var(--line-soft); margin-bottom: var(--space-2); }
.skeleton .bar:nth-child(1) { width: 62%; }
.skeleton .bar:nth-child(2) { width: 88%; }
.skeleton .bar:nth-child(3) { width: 44%; }
.skeleton .note { font-size: var(--text-label); color: var(--ink-3); margin-top: var(--space-3); }

/* --- Stepper ------------------------------------------------------------ */
.stepper { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; margin-bottom: var(--space-4); }
.step {
    display: flex; align-items: center; height: var(--control-xs);
    padding: 0 var(--space-3); border-radius: 15px;
    background: var(--surface-2); color: var(--ink-3); font-size: var(--text-body);
}
.step.is-done { background: var(--ok-wash); color: var(--ok-ink); }
.step.is-current { background: var(--accent); color: #fff; font-weight: 500; }
.step-sep { color: var(--line-strong); }

/* --- Feasibility -------------------------------------------------------- */
.verdict { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.verdict-main { flex: 1 1 420px; min-width: 0; }
.cat-card { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); padding: var(--space-3); }
.cat-card.is-warn { border-color: var(--warn-line); }
.cat-head { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.cat-head h4 { margin: 0; font-size: var(--text-body); font-weight: 600; }
.cat-n { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--ink-3); }
.cat-card svg { display: block; width: 100%; height: 112px; }
.cat-dl { margin: var(--space-2) 0 0; display: grid; grid-template-columns: minmax(0,1fr) auto; row-gap: 5px; font-size: var(--text-body-2); }
.cat-dl dt { color: var(--ink-3); }
.cat-dl dd { margin: 0; font-family: var(--font-mono); }