1/* Cartograph wears Atlas's chrome: a neutral near-black with a faint cool2 cast, linen text, and one cerulean accent that marks everything3 interactive and every data readout. No gradients, no noise. */4:root {5 color-scheme: dark;6 --bg: #121417;7 --panel: #17191d;8 --panel-raised: #1e2126;9 --line: rgba(236, 229, 216, 0.1);10 --line-strong: rgba(236, 229, 216, 0.22);11 --text: #ece5d8;12 --text-strong: #f9ebe0;13 --muted: #8e897c;14 --accent: #3aa5c9;15 --accent-wash: rgba(32, 138, 174, 0.13);16 --accent-wash-strong: rgba(32, 138, 174, 0.24);17 --data: #7fc5de;18 --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;19 font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;20 font-synthesis: none;21}2223* { box-sizing: border-box; }2425body {26 margin: 0;27 background: var(--bg);28 color: var(--text);29 font-size: 14px;30 line-height: 1.5;31}3233a { color: var(--accent); text-decoration: none; }34a:hover { text-decoration: underline; }3536.topbar {37 display: flex;38 align-items: center;39 gap: 24px;40 padding: 0 20px;41 height: 52px;42 border-bottom: 1px solid var(--line);43 background: var(--panel);44}4546.brand {47 color: var(--text-strong);48 font-weight: 650;49 letter-spacing: 0.04em;50}51.brand:hover { text-decoration: none; }5253.topbar nav { display: flex; gap: 16px; }54.topbar nav a { color: var(--muted); }55.topbar nav a:hover { color: var(--text); text-decoration: none; }5657main {58 max-width: 1080px;59 margin: 0 auto;60 padding: 24px 20px 64px;61}6263h1 {64 font-size: 20px;65 font-weight: 650;66 color: var(--text-strong);67 margin: 0 0 4px;68}69h2 {70 font-size: 15px;71 font-weight: 600;72 color: var(--text-strong);73 margin: 0 0 4px;74 font-family: var(--mono);75}76.page-head { margin-bottom: 20px; }77.page-head p { margin: 0; }7879.dim { color: var(--muted); font-weight: 400; }80.note { margin: 0 0 8px; font-size: 13px; }81.warn {82 border: 1px solid var(--line-strong);83 border-left: 3px solid var(--accent);84 background: var(--panel);85 padding: 8px 12px;86 color: var(--muted);87}88.empty {89 border: 1px dashed var(--line-strong);90 padding: 24px;91 text-align: center;92 color: var(--muted);93}9495table {96 width: 100%;97 border-collapse: collapse;98 border: 1px solid var(--line);99 background: var(--panel);100}101th, td {102 text-align: left;103 padding: 7px 10px;104 border-bottom: 1px solid var(--line);105}106th {107 color: var(--muted);108 font-weight: 500;109 font-size: 12px;110 letter-spacing: 0.02em;111 background: var(--panel-raised);112}113tbody tr:last-child td { border-bottom: none; }114tbody tr:hover td { background: var(--accent-wash); }115.num {116 text-align: right;117 font-family: var(--mono);118 font-size: 13px;119 color: var(--data);120}121th.num { color: var(--muted); font-family: inherit; }122123.badge {124 display: inline-block;125 padding: 1px 7px;126 margin-right: 4px;127 border: 1px solid var(--line-strong);128 border-radius: 999px;129 font-size: 12px;130 color: var(--data);131 background: var(--accent-wash);132}133134.build {135 border: 1px solid var(--line);136 background: var(--panel);137 padding: 14px 16px;138 margin-bottom: 16px;139}140.build.serving { border-color: var(--accent); }141.tag {142 display: inline-block;143 vertical-align: 2px;144 margin-left: 6px;145 padding: 1px 8px;146 border-radius: 999px;147 background: var(--accent-wash-strong);148 color: var(--accent);149 font-size: 11px;150 font-weight: 600;151 font-family: Inter, ui-sans-serif, sans-serif;152 letter-spacing: 0.03em;153}154.build > p { margin: 0 0 10px; font-size: 13px; }155156.axes { margin: 0 0 12px; }157.axes div {158 display: flex;159 gap: 12px;160 padding: 3px 0;161 border-bottom: 1px dotted var(--line);162}163.axes div:last-child { border-bottom: none; }164.axes dt {165 flex: 0 0 100px;166 color: var(--muted);167 font-size: 12px;168 letter-spacing: 0.02em;169 padding-top: 2px;170}171.axes dd { margin: 0; }172.axes b { color: var(--data); font-family: var(--mono); font-weight: 600; }173174.merges { margin-bottom: 10px; }175176.ledger { margin: 8px 0; }177.ledger summary {178 cursor: pointer;179 color: var(--muted);180 font-size: 13px;181 padding: 4px 0;182}183.ledger summary:hover { color: var(--text); }184.ledger table { margin-top: 6px; }185186.compare {187 display: flex;188 align-items: center;189 gap: 8px;190 flex-wrap: wrap;191 margin: 0 0 20px;192 padding: 10px 12px;193 border: 1px solid var(--line);194 background: var(--panel);195}196.compare label { color: var(--muted); font-size: 13px; }197198select, input[type="text"], input:not([type]) {199 background: var(--panel-raised);200 color: var(--text);201 border: 1px solid var(--line-strong);202 border-radius: 4px;203 padding: 5px 8px;204 font: inherit;205 font-size: 13px;206}207select:focus, input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }208input::placeholder { color: var(--muted); }209210button {211 background: var(--accent-wash-strong);212 color: var(--accent);213 border: 1px solid var(--accent);214 border-radius: 4px;215 padding: 5px 14px;216 font: inherit;217 font-size: 13px;218 font-weight: 600;219 cursor: pointer;220}221button:hover { background: var(--accent); color: #0c1216; }222button:disabled {223 border-color: var(--line-strong);224 background: var(--panel-raised);225 color: var(--muted);226 cursor: default;227}228229.delta-up { color: var(--data); }230.delta-down { color: var(--warm, #b08a5a); }231.delta-flat { color: var(--muted); }232233.columns { display: flex; gap: 16px; flex-wrap: wrap; }234.columns > section { flex: 1 1 320px; }235236.card {237 border: 1px solid var(--line);238 background: var(--panel);239 padding: 14px 16px;240 margin-bottom: 16px;241}242.card h2 { font-family: Inter, ui-sans-serif, sans-serif; }243.card p { margin: 6px 0; }244.card form {245 display: flex;246 gap: 8px;247 align-items: center;248 flex-wrap: wrap;249 margin-top: 10px;250}251.card form input { flex: 1 1 240px; }252253.console {254 margin-top: 16px;255 min-height: 120px;256 max-height: 420px;257 overflow: auto;258 padding: 12px 14px;259 border: 1px solid var(--line-strong);260 background: #0c0e10;261 color: var(--text);262 font-family: var(--mono);263 font-size: 12px;264 line-height: 1.45;265 white-space: pre-wrap;266 overflow-wrap: anywhere;267}268.console:empty::before { content: "operation output arrives here"; color: var(--muted); }