/* Black and white, small type, no decoration beyond what structure needs. */ :root { --ink: #000; --paper: #fff; --line: #000; --muted: #666; --faint: #f4f4f4; } /* Dark mode: every surface flips (background black, text white) -- including "boxes" (cost-box, confidence-box, etc.), not just the page background. Toggled via a class on (see app.js), persisted in localStorage so it survives a reload. */ body.theme-dark { --ink: #fff; --paper: #000; --line: #fff; --muted: #aaa; --faint: #1a1a1a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.5; } .shell { max-width: 880px; margin: 0 auto; padding: 32px 20px 80px; } header.app-header { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 24px; display: flex; align-items: baseline; justify-content: space-between; } header.app-header h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; margin: 0; text-transform: uppercase; } header.app-header .tagline { color: var(--muted); font-size: 11px; } .steps { display: flex; gap: 0; margin-bottom: 28px; border: 1px solid var(--line); } .steps .step { flex: 1; text-align: center; padding: 8px 4px; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); } .steps .step:last-child { border-right: none; } .steps .step.active { background: var(--ink); color: var(--paper); } .steps .step.done { color: var(--ink); font-weight: 600; } .panel { display: none; } .panel.active { display: block; } h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; margin: 28px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; } h2:first-of-type { margin-top: 0; } p.help { color: var(--muted); font-size: 12px; margin: 0 0 12px; } textarea, input[type="text"], select { width: 100%; font-family: inherit; font-size: 13px; padding: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); } textarea { min-height: 140px; resize: vertical; } label.field { display: block; margin-bottom: 14px; } label.field .field-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; } label.field .field-help { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; } .badge-known { display: inline-block; font-size: 10px; border: 1px solid var(--line); padding: 1px 6px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.03em; } .known-value { border: 1px solid var(--line); background: var(--faint); padding: 8px; font-size: 12px; } .checkbox-row { display: flex; align-items: center; gap: 8px; } .checkbox-row input { width: auto; } .actions { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; } button { font-family: inherit; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; padding: 9px 16px; border: 1px solid var(--line); background: var(--ink); color: var(--paper); cursor: pointer; } button:hover { background: #222; } button:disabled { opacity: 0.4; cursor: default; } button.secondary { background: var(--paper); color: var(--ink); } button.secondary:hover { background: var(--faint); } .confidence-box { border: 1px solid var(--line); padding: 14px; margin-bottom: 20px; } .confidence-score { font-size: 26px; font-weight: 700; margin-bottom: 4px; } .confidence-box p { margin: 4px 0 0; font-size: 12px; } .cost-box { border: 1px solid var(--line); padding: 14px; margin-bottom: 20px; } .cost-total { font-size: 22px; font-weight: 700; margin-bottom: 2px; } .cost-asof { font-size: 11px; color: var(--muted); margin-bottom: 12px; } table.cost-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; } table.cost-table th, table.cost-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; } table.cost-table th { background: var(--faint); font-weight: 600; } table.cost-table td.cost-range { white-space: nowrap; text-align: right; } table.cost-table tr.cost-chosen-row { background: var(--faint); font-weight: 600; } table.cost-table td.cost-basis { color: var(--muted); font-size: 11px; } .cost-disclaimer { font-size: 11px; color: var(--muted); } .diagram-box { border: 1px solid var(--line); padding: 12px; margin-bottom: 20px; overflow-x: auto; } .diagram-caption { font-size: 11px; color: var(--muted); margin-bottom: 8px; } .notice { border: 1px solid var(--line); background: var(--faint); padding: 10px 12px; font-size: 12px; margin-bottom: 16px; } .error-box { border: 1px solid var(--line); background: var(--faint); padding: 10px 12px; font-size: 12px; margin: 12px 0; } .reasoning-box { border: 1px solid var(--line); padding: 14px; font-size: 12.5px; white-space: pre-wrap; margin-top: 8px; } .notice-warn { border-width: 2px; font-weight: 600; } .preflight-box, .drift-box { border: 1px solid var(--line); padding: 12px; margin: 8px 0 16px; font-size: 12px; } .preflight-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--faint); } .preflight-row:last-child { border-bottom: none; } .status-ok { font-weight: 600; } .status-missing { font-weight: 600; color: var(--ink); text-decoration: underline; } .file-list { border: 1px solid var(--line); margin: 8px 0 16px; } .file-list-item { border-bottom: 1px solid var(--faint); padding: 8px 10px; } .file-list-item:last-child { border-bottom: none; } .file-list-item summary { cursor: pointer; font-size: 12px; font-weight: 600; } .file-list-item pre { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; white-space: pre-wrap; margin: 8px 0 0; max-height: 300px; overflow-y: auto; } .plan-box { border: 1px solid var(--line); padding: 12px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; white-space: pre-wrap; max-height: 420px; overflow-y: auto; margin: 8px 0 16px; } .drift-clean { font-weight: 600; } .drift-detected { font-weight: 600; text-decoration: underline; } footer.app-footer { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 10px; font-size: 11px; color: var(--muted); } code { font-family: "Cascadia Mono", "Consolas", monospace; font-size: 11.5px; background: var(--faint); padding: 1px 4px; } .spinner-note { font-size: 11px; color: var(--muted); } .diff-box { border: 1px solid var(--line); padding: 12px; margin: 8px 0 16px; font-size: 12px; } .diff-row { display: grid; grid-template-columns: 1fr 1fr auto 1fr; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--faint); font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; } .diff-row:last-child { border-bottom: none; } .diff-field { font-weight: 600; font-family: inherit; } .diff-old { color: var(--muted); text-decoration: line-through; } .diff-arrow { color: var(--muted); } .audit-box { border: 1px solid var(--line); padding: 12px; margin: 8px 0 16px; font-size: 11.5px; font-family: "Cascadia Mono", Consolas, monospace; max-height: 320px; overflow-y: auto; } .audit-row { display: grid; grid-template-columns: 16em 10em 1fr 8em 6em; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--faint); } .audit-row:last-child { border-bottom: none; } .audit-outcome { font-weight: 600; } .audit-error .audit-outcome { text-decoration: underline; } .compliance-box { border: 1px solid var(--line); padding: 14px; margin-bottom: 20px; } .compliance-status { font-weight: 600; white-space: nowrap; } .compliance-warn .compliance-status { text-decoration: underline; } .compliance-fail .compliance-status { text-decoration: underline; font-weight: 700; } .compliance-not_applicable .compliance-status { color: var(--muted); font-weight: 400; } .account-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 8px 0; margin-bottom: 16px; border-bottom: 1px solid var(--faint); font-size: 12px; } .account-bar > div { display: flex; align-items: center; gap: 10px; } .account-form { border: 1px solid var(--line); padding: 16px; margin-bottom: 20px; max-width: 360px; } .theme-toggle { font-size: 16px; padding: 4px 10px; }