/* Preview page. One narrow column: form → chart summary → planets ledger → feedback.
   Design red / Personality black follow the bodygraph convention. */
:root {
  --paper: #f7f7f5;
  --sheet: #ffffff;
  --ink: #17181c;
  --muted: #62646d;
  --rule: #dcdcd8;
  --design: #c3262f;
  --personality: #17181c;
  --accent: #3a4fb8;
  --error: #b5401f;
  --ok: #1d7a46;
  --chip: #eeeeea;
  --f-display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121317; --sheet: #1b1c21; --ink: #ecebe6; --muted: #9a9ba3; --rule: #2e3037;
    --design: #ff6b6b; --personality: #ecebe6; --accent: #8fa0ff; --error: #ff8a65; --ok: #5fcf8e; --chip: #26272e;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--f-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(28px, env(safe-area-inset-top, 0px)) max(48px, env(safe-area-inset-bottom, 0px));
}
.wrap { max-width: 620px; margin: 0 auto; display: grid; gap: 20px; }
h1 { font: 500 clamp(24px, 6vw, 32px)/1.2 var(--f-display); margin: 0; text-wrap: balance; }
h2 { font: 600 20px/1.3 var(--f-body); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); }
.intro { display: grid; gap: 10px; }

.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 20px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; position: relative; }
label { font-weight: 500; }
input[type=date], input[type=time], input[type=text], textarea {
  width: 100%; font: 16px/1.4 var(--f-body); padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--paper); color: var(--ink);
}
textarea { min-height: 88px; resize: vertical; }
input:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: 600 16px var(--f-body); padding: 12px 18px; border-radius: 8px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button:disabled { opacity: 0.6; cursor: wait; }
.error { color: var(--error); font-size: 14px; min-height: 0; }
.error:empty { display: none; }

#city-list { list-style: none; margin: 0; padding: 4px; position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto; }
#city-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
#city-list li small { color: var(--muted); display: block; font-size: 13px; }
#city-list li[aria-selected=true], #city-list li:hover { background: var(--chip); }

.summary h2 { font: 500 24px/1.25 var(--f-display); }
dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; }
dt { color: var(--muted); font-size: 14px; }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.centers { display: flex; flex-wrap: wrap; gap: 6px; }
.c { font-size: 13px; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--ink); }
.c.on { background: var(--ink); color: var(--sheet); }
.c.off { opacity: 0.45; border-style: dashed; }

summary { font-weight: 600; cursor: pointer; }
.ledger-wrap { overflow-x: auto; }
table.ledger { border-collapse: collapse; width: 100%; }
.ledger th { font: 600 12px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px; }
.ledger td { padding: 4px 8px; border-top: 1px solid var(--rule); text-align: center; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.ledger td.body { font-family: var(--f-body); color: var(--muted); font-size: 14px; }
.ledger .d { color: var(--design); }
.ledger .p { color: var(--personality); font-weight: 600; }

.choices { display: grid; gap: 8px; }
.choices label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; font-weight: 400; cursor: pointer; }
.choices label:has(input:checked) { border-color: var(--accent); background: var(--chip); }
.thanks { color: var(--ok); font-weight: 500; }

.foot { display: grid; gap: 4px; font-size: 13px; color: var(--muted); padding-top: 8px; }

/* ---------- bodygraph ---------- */
:root {
  --bg-track: #e6e6e1; --bg-open: #ffffff; --bg-open-stroke: #c9c9c3; --bg-num: #8a8b92;
  --c-head: #f2c94c; --c-ajna: #6fcf97; --c-throat: #c9976b; --c-g: #f2c94c; --c-heart: #eb5757;
  --c-sacral: #eb5757; --c-sp: #c9976b; --c-spleen: #c9976b; --c-root: #c9976b;
}
@media (prefers-color-scheme: dark) {
  :root { --bg-track: #33353d; --bg-open: #1b1c21; --bg-open-stroke: #4a4c55; --bg-num: #8d8f98; }
}
.bodygraph { padding-inline: 8px; }
.bg-heads, .bg-grid { display: grid; grid-template-columns: minmax(0, 64px) minmax(0, 1fr) minmax(0, 64px); gap: 6px; align-items: start; }
.bg-heads { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.bg-head-d { color: var(--design); } .bg-head-p { color: var(--personality); text-align: right; }
.bg-mid { min-width: 0; }
.bg-svg { display: block; width: 100%; height: auto; max-width: 100%; }
.bg-col { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.bg-col li { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.bg-col-design li { justify-content: flex-end; color: var(--design); }
.bg-col-personality li { color: var(--personality); font-weight: 600; }
.bg-glyph { color: var(--muted); font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--f-body); font-weight: 400; width: 1.1em; text-align: center; }
.bg-val { font-size: 15px; } .bg-val sub { font-size: 10px; margin-left: 1px; }

.bg-track { stroke: var(--bg-track); stroke-width: 9; stroke-linecap: butt; }
.bg-half { stroke-width: 5.5; stroke-linecap: butt; }
.bg-d { stroke: var(--design); }
.bg-p { stroke: var(--personality); }
.bg-p.bg-striped { stroke-dasharray: 5 5; }
.bg-center { stroke-width: 1.5; }
.bg-center.is-open { fill: var(--bg-open); stroke: var(--bg-open-stroke); }
.bg-center.is-defined { stroke: rgba(0,0,0,.18); }
.bg-head.is-defined { fill: var(--c-head); } .bg-ajna.is-defined { fill: var(--c-ajna); }
.bg-throat.is-defined { fill: var(--c-throat); } .bg-g.is-defined { fill: var(--c-g); }
.bg-heart.is-defined { fill: var(--c-heart); } .bg-sacral.is-defined { fill: var(--c-sacral); }
.bg-solar_plexus.is-defined { fill: var(--c-sp); } .bg-spleen.is-defined { fill: var(--c-spleen); }
.bg-root.is-defined { fill: var(--c-root); }
.bg-num { font: 600 9px var(--f-body); fill: var(--bg-num); text-anchor: middle; dominant-baseline: central; }
.bg-num.is-active { fill: #fff; }
.bg-dot-p { fill: #17181c; } .bg-dot-d { fill: #c3262f; }
.bg-dot-dp { stroke: #c3262f; stroke-width: 2.5; }
@media (prefers-color-scheme: dark) {
  .bg-dot-p { fill: #ecebe6; } .bg-dot-p + .bg-num.is-active { fill: #17181c; }
  .bg-dot-d { fill: #ff6b6b; } .bg-dot-dp { stroke: #ff6b6b; }
  .bg-center.is-defined { stroke: rgba(255,255,255,.15); }
}
@media (max-width: 420px) { .bg-val { font-size: 13px; } .bg-heads, .bg-grid { grid-template-columns: minmax(0, 52px) minmax(0, 1fr) minmax(0, 52px); gap: 2px; } }