/* Plain Solver. Everything here is scoped under .ps so none of it reaches the site chrome.
   Work family: day stock, a dense control panel, mono figures. Colors and type are the site's
   tokens (assets/css/style.css); the one extra is the warning hue, the planner's --ap-bad,
   stepped for dark the same way. Keep the two dark blocks identical, as the site does. */
.ps { --ps-bad: #b3362e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ps { --ps-bad: #e66767; } }
:root[data-theme="dark"] .ps { --ps-bad: #e66767; }

.ps { color: var(--text); padding-bottom: 8px; }
.ps *, .ps *::before, .ps *::after { box-sizing: border-box; }
.ps h1, .ps h2, .ps h3, .ps p { margin: 0; font-weight: 500; }
.ps p { font-weight: 400; }
.ps [hidden] { display: none !important; }
.ps .ps-label { font: 500 11px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ps .ps-note { font: 12px/1.5 var(--mono); color: var(--text-2); }
.ps .ps-hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.ps .ps-muted { color: var(--muted); }
.ps-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- head ---------- */
.ps-head { padding: 80px 0 48px; max-width: 48em; }
.ps-family { font: 500 11px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.ps-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6.4vw, 80px); line-height: 1; letter-spacing: -0.012em; color: var(--ink); margin-top: 16px; }
.ps-h1-sub { display: block; font: 500 11px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); margin-top: 16px; }
.ps-lede { margin-top: 24px !important; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 36em; }
@media (max-width: 860px) { .ps-head { padding: 56px 0 32px; } .ps-lede { font-size: 17px; } }

/* ---------- shared bits ---------- */
.ps-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 16px; margin-bottom: 16px; }
.ps-block-head > .ps-label { color: var(--ink); }
summary.ps-block-head { cursor: pointer; list-style: none; }
summary.ps-block-head::-webkit-details-marker { display: none; }
summary.ps-block-head .ps-label::before { content: "▸ "; color: var(--muted); }
details[open] > summary.ps-block-head .ps-label::before { content: "▾ "; }
.ps-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ps-link { background: none; border: 0; padding: 0; font: 500 11px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.ps-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.ps-link.ps-link-strong { color: var(--ink); text-decoration-color: var(--ink); }
.ps-link:disabled { color: var(--muted); cursor: default; text-decoration: none; opacity: 0.6; }
.ps-link[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--ink); }
.ps-btn { display: inline-flex; align-items: center; padding: 12px 18px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 500 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ps-btn:hover { background: var(--ink); color: var(--on-ink); }
.ps-btn.primary { background: var(--ink); color: var(--on-ink); }
.ps-btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.ps-btn:disabled { opacity: 0.5; cursor: progress; }
.ps-btn:focus-visible, .ps-link:focus-visible, .ps summary:focus-visible, .ps-tool:focus-visible, .ps-add:focus-visible, .ps-tpl-b:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.ps-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ps-scroll:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ps input[type="number"], .ps input[type="text"]:not(.ps-chip):not(.ps-cell):not(.ps-in):not(#m-title), .ps textarea, .ps select:not(.ps-chip):not(.ps-in) {
  width: 100%; min-width: 0; border: 1px solid var(--rule); border-radius: 0; background: var(--stock); color: var(--ink);
  padding: 8px 10px; font: 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.ps input:focus-visible, .ps textarea:focus-visible, .ps select:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.ps input[aria-invalid="true"] { border-color: var(--ps-bad) !important; }
.ps select:not(.ps-chip) { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.ps-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.ps-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ps-name { font-size: 13px; line-height: 1.35; color: var(--text-2); }
.ps-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 8px; cursor: pointer; }
.ps-check input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
@media (max-width: 560px) { .ps-fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the start: build your own first ---------- */
.ps-start { margin-bottom: 40px; }
.ps-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; border-top: 1px solid var(--ink); padding-top: 32px; }
.ps-hero-main { background: var(--stock); border: 1px solid var(--rule); padding: 32px; }
.ps-hero-h { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; color: var(--ink); }
.ps-hero-steps { margin: 20px 0 28px; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.ps-hero-steps li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.ps-hero-steps li::before { content: counter(step); grid-row: span 2; font: 500 24px/1.1 var(--serif); color: var(--accent); }
.ps-hero-steps strong { display: block; font-weight: 600; color: var(--ink); }
.ps-btn-big { padding: 18px 28px; font-size: 12px; }
.ps-hero-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; border-top: 1px solid var(--rule); }
.ps-way { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 16px 0; cursor: pointer; color: var(--text); font: inherit; }
.ps-way:hover .ps-way-t { color: var(--accent); }
.ps-way:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.ps-way-t { font-family: var(--serif); font-size: 21px; line-height: 1.2; color: var(--ink); }
.ps-way-d { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ps-examples-head { margin-top: 40px; }
@media (max-width: 860px) { .ps-hero { grid-template-columns: minmax(0, 1fr); } .ps-hero-main { padding: 20px; } }

/* ---------- templates ---------- */
.ps-tpls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.ps-tpl { position: relative; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ps-tpl-b { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; text-align: left; background: none; border: 0; padding: 16px; cursor: pointer; color: var(--text); font: inherit; transition: background 0.15s; }
.ps-tpl-b:hover { background: var(--stock); }
.ps-tpl-tags { font: 11px/1.4 var(--mono); color: var(--muted); }
.ps-tpl-t { font-family: var(--serif); font-size: 21px; line-height: 1.15; color: var(--ink); }
.ps-tpl-d { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ps-tpl-x { position: absolute; top: 8px; right: 8px; }

/* ---------- the bar ---------- */
.ps-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; background: var(--ground); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 12px 0; }
.ps-title { flex: 1 1 200px; min-width: 0; }
.ps .ps-title input#m-title { border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 4px 0; font: 500 24px/1.2 var(--serif); color: var(--ink); }
.ps .ps-title input#m-title:hover { border-bottom-color: var(--rule); }
.ps-bar-tools { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ps-flash { margin: 8px 0 0; font: 12px/1.5 var(--mono); color: var(--accent); }

.ps-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; margin-top: 24px; }
@media (max-width: 1100px) { .ps-grid { grid-template-columns: minmax(0, 1fr); } .ps-results { margin-top: 40px; } }

/* ---------- quick questions ---------- */
.ps-questions { margin-bottom: 32px; }
.ps-q-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 8px 24px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ps-q-row.is-wide { grid-template-columns: minmax(0, 1fr); }
.ps-q-text { font-size: 15px; line-height: 1.45; color: var(--text); }
.ps-q-field { display: flex; align-items: center; gap: 8px; }
.ps .ps-q-in { text-align: right; }
.ps-q-unit { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .ps-q-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the builder ---------- */
.ps-preview { font: italic 500 21px/1.4 var(--serif); color: var(--ink); margin: 0 0 16px !important; }
.ps-cards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.ps-card { display: flex; gap: 12px; align-items: baseline; font-size: 13px; line-height: 1.45; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.ps-card-k { flex: none; width: 48px; font: 500 10px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ps-card.is-error .ps-card-k { color: var(--ps-bad); }
.ps-card.is-warn .ps-card-k { color: var(--accent); }
.ps-card .ps-link { margin-left: auto; flex: none; }
.ps-sec { margin-top: 32px; scroll-margin-top: 96px; }
.ps-num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; background: var(--ink); color: var(--on-ink); font: 500 12px/1 var(--mono); letter-spacing: 0; vertical-align: 1px; }
.ps-sec-optional .ps-num { background: transparent; color: var(--muted); border: 1px solid var(--rule); }
.ps-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); counter-reset: st; }
.ps-steps li { flex: 1 1 0; counter-increment: st; }
.ps-steps li + li { border-left: 1px solid var(--rule); }
.ps-steps a { display: block; padding: 8px 10px; font: 500 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); text-decoration: none; text-align: center; }
.ps-steps a::before { content: counter(st) " · "; color: var(--muted); }
.ps-steps li.is-done a { color: var(--ink); background: var(--stock); }
.ps-steps li.is-done a::before { content: "✓ "; color: var(--accent); }
.ps-steps a:hover { color: var(--accent); }
.ps-faster { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 8px 0 0 !important; font-size: 13px; color: var(--muted); }
.ps-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px !important; padding: 10px 12px; border: 1px dashed var(--rule); }
.ps-quick .ps-btn { padding: 8px 14px; }
.ps .ps-chip.ps-phrase { flex: 1 1 14em; min-width: 10em; font-family: var(--sans); font-weight: 400; }
.ps-hint-quick { margin-top: 4px !important; }
.ps-hint-quick em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.ps-typed-row { display: flex; gap: 2px; align-items: center; }
.ps .ps-pencil { min-width: 22px; height: 22px; color: var(--muted); border-color: transparent; }
.ps-add-strong { border-style: solid; border-color: var(--ink); color: var(--ink); }
.ps-where { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 4px; border: 1px dashed var(--rule); }
.ps .ps-chip.ps-more-wide { width: auto; }
.ps .ps-chip.ps-colkind { font-size: 11px !important; color: var(--text-2); }
.ps .ps-cell.ps-namecell { text-align: left; font-family: var(--sans); }
.ps-sec-h { font: 500 11px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.ps-sec-h span { letter-spacing: 0; text-transform: none; font: 12px var(--sans); color: var(--muted); margin-left: 8px; }
.ps-adds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.ps-add { background: none; border: 1px dashed var(--rule); padding: 6px 10px; font: 12px/1.4 var(--sans); color: var(--text-2); cursor: pointer; }
.ps-add:hover { border-color: var(--ink); color: var(--ink); border-style: solid; }
.ps-add-small { background: none; border: 0; padding: 4px 0; font: 12px var(--sans); color: var(--text-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.ps-add-small:hover { color: var(--accent); }

.ps-s { padding: 12px 0; border-bottom: 1px solid var(--rule); transition: background 0.3s; }
.ps-s.is-off { opacity: 0.5; }
.ps-s.has-error { box-shadow: inset 2px 0 0 var(--ps-bad); padding-left: 10px; }
.ps-s.is-flash { background: var(--stock); }
.ps-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.6; }
.ps-line.ps-sub { margin-top: 6px !important; padding-left: 16px; }
.ps-word { font-size: 14px; color: var(--text-2); }
.ps-tools { display: inline-flex; gap: 2px; margin-left: auto; }
.ps-tool { background: none; border: 1px solid transparent; min-width: 26px; height: 26px; padding: 0 4px; font: 12px/1 var(--sans); color: var(--muted); cursor: pointer; }
.ps-tool:hover:not(:disabled) { border-color: var(--rule); color: var(--ink); }
.ps-tool:disabled { opacity: 0.3; cursor: default; }
.ps-toggle { font: 500 10px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; border-color: var(--rule); color: var(--ink); }
.ps-toggle.is-off { color: var(--muted); border-style: dashed; }
.ps-feeds { margin-top: 4px !important; padding-left: 16px; font: 11px/1.5 var(--mono); color: var(--muted); }
.ps-feeds.is-loose { color: var(--accent); }
.ps-q { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--rule); font: 10px/1 var(--sans); color: var(--muted); cursor: help; }

/* chips: every editable word in a sentence */
.ps .ps-chip { font: 13px/1.3 var(--mono); color: var(--ink); background: var(--stock); border: 1px solid var(--rule); border-radius: 0; padding: 3px 6px; min-width: 0; max-width: 100%; width: auto; }
.ps .ps-chip:hover { border-color: var(--text-2); }
.ps select.ps-chip { cursor: pointer; padding-right: 18px; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%; background-size: 4px 4px; background-repeat: no-repeat; max-width: 22em; text-overflow: ellipsis; }
.ps .ps-chip.ps-name { font: 500 14px/1.3 var(--sans); background: transparent; border-color: transparent; border-bottom-color: var(--rule); padding-left: 2px; padding-right: 2px; }
.ps .ps-chip.ps-name:hover, .ps .ps-chip.ps-name:focus-visible { border-color: var(--rule); }
.ps .ps-chip.ps-rule-name { font-weight: 600; }
.ps .ps-chip.ps-unit { color: var(--text-2); background: transparent; border-style: dashed; }
.ps .ps-chip.ps-num { text-align: right; }
.ps .ps-chip.ps-op { background: transparent; border-color: transparent; color: var(--text-2); font-family: var(--sans); }
.ps .ps-chip.ps-op:hover { border-color: var(--rule); }
.ps .ps-chip.ps-more { background: transparent; border-style: dashed; color: var(--muted); width: 28px; padding: 3px 4px; background-image: none; text-align: center; }
.ps .ps-chip.ps-pick { max-width: 18em; }
.ps-val.is-num > .ps-pick, .ps-val.is-paren > .ps-pick, .ps-val.is-sq > .ps-pick { width: 22px; padding: 3px; color: transparent; background-position: 50% 55%, calc(50% + 4px) 55%; border-left: 0; }
.ps-val .ps-pick option, .ps-val .ps-pick optgroup { color: var(--ink); }
.ps-val, .ps-expr, .ps-cond, .ps-bound, .ps-each { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }
.ps-val.is-hole .ps-chip { border-style: dashed; border-color: var(--ps-bad); color: var(--muted); }
.ps-val.is-fn { padding: 2px 4px; border: 1px solid var(--rule); border-left: 2px solid var(--ink); }
.ps-val.is-fn .ps-val.is-fn { border-left-color: var(--text-2); }
.ps-val.is-ref.is-bad .ps-chip { border-color: var(--ps-bad); }
.ps-for { font-size: 12px; color: var(--muted); }
.ps .ps-chip.ps-at { font-size: 12px; color: var(--text-2); }

/* power mode */
.ps-typed { position: relative; display: inline-flex; flex-direction: column; gap: 2px; flex: 1 1 32em; min-width: 12em; max-width: 100%; }
.ps .ps-chip.ps-formula { width: 100%; }
.ps-say { font: 11px/1.4 var(--sans); color: var(--muted); }
.ps-say.is-bad { color: var(--ps-bad); }
.ps-suggest { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 100%; margin: 2px 0 0; padding: 0; list-style: none; background: var(--stock); border: 1px solid var(--ink); }
.ps-suggest li { padding: 4px 8px; font: 12px var(--mono); color: var(--ink); cursor: pointer; }
.ps-suggest li[aria-selected="true"], .ps-suggest li:hover { background: var(--ink); color: var(--on-ink); }
.ps-adv code { font: 12px var(--mono); color: var(--ink); }

.ps-props { list-style: none; margin: 6px 0 0; padding: 0 0 0 16px; display: grid; gap: 4px; }
.ps-prop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ps-imports { display: flex; gap: 16px; margin-top: 6px !important; padding-left: 16px; }
.ps-imports .ps-link { font-size: 10px; }

/* data tables in the builder */
.ps-table-wrap { padding-left: 16px; margin-top: 8px; }
.ps-edit { border-collapse: collapse; font: 13px/1.3 var(--mono); }
.ps-edit th, .ps-edit td { padding: 2px 4px 2px 0; text-align: left; vertical-align: middle; }
.ps-edit thead th { font: 500 10px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; white-space: nowrap; }
.ps-colhead { display: inline-flex; gap: 2px; align-items: center; }
.ps-colhead .ps-chip { font-size: 11px !important; text-transform: none; letter-spacing: 0; }
.ps .ps-cell { width: 7.5em; border: 1px solid var(--rule); background: var(--stock); color: var(--ink); padding: 3px 6px; font: 13px/1.3 var(--mono); text-align: right; }
.ps .ps-cell.ps-key { width: 9em; text-align: left; font-family: var(--sans); }
.ps-grid-edit thead th { text-transform: none; letter-spacing: 0; font: 11px var(--mono); color: var(--text-2); }
.ps-grid-edit tbody th { font: 12px var(--mono); color: var(--text-2); padding-right: 8px; white-space: nowrap; }
.ps-grid-edit .ps-cell { width: 5.5em; }

.ps-adv { margin-top: 48px; }

/* ---------- results ---------- */
.ps-results { min-width: 0; }
.ps-status { font: 12px/1.5 var(--mono); color: var(--text-2); min-height: 18px; border-top: 1px solid var(--ink); padding-top: 16px; }
.ps-progress { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }
.ps-progress progress { width: 100%; height: 4px; appearance: none; -webkit-appearance: none; border: 0; background: var(--rule); }
.ps-progress progress::-webkit-progress-bar { background: var(--rule); }
.ps-progress progress::-webkit-progress-value { background: var(--ink); }
.ps-progress progress::-moz-progress-bar { background: var(--ink); }
.ps-msg { margin-top: 16px; padding: 16px; border: 1px solid var(--ps-bad); color: var(--ink); font-size: 15px; line-height: 1.55; }
.ps-msg p + p { margin-top: 8px; }
.ps-msg-k { font: 500 11px/1.5 var(--sans) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ps-bad); margin-bottom: 4px !important; }
.ps-fixes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
.ps-fix { padding: 10px 14px; }
#out.is-stale { opacity: 0.45; transition: opacity 0.2s; }

.ps-head-card { margin-top: 16px; padding: 24px; background: var(--stock); border: 1px solid var(--rule); }
.ps-head-card .ps-label { color: var(--ink); }
.ps-big { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4vw, 52px); line-height: 1.05; color: var(--ink); margin-top: 8px !important; overflow-wrap: anywhere; }
.ps-sentence { margin-top: 16px !important; font: italic 500 19px/1.4 var(--serif); color: var(--ink); }
.ps-hl { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.ps-hl li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.ps-hl-k { flex: 1 1 12em; font-size: 14px; color: var(--text-2); }
.ps-hl-v { font: 15px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ps-hl-s { flex-basis: 100%; font: 12px var(--mono); color: var(--muted); }
.ps-engine { margin-top: 16px !important; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ps-notes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ps-notes:empty { display: none; }

.ps-block { margin-top: 40px; }
.ps-subhead { margin: 24px 0 8px !important; color: var(--ink) !important; }
.ps-table { width: 100%; border-collapse: collapse; font: 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.ps-table th { font: 500 10px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--ink); white-space: nowrap; vertical-align: bottom; }
.ps-table tbody th { font: 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); text-align: left; border-bottom: 1px solid var(--rule); white-space: normal; vertical-align: top; }
.ps-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: top; }
.ps-table th:first-child, .ps-table td:first-child { text-align: left; padding-left: 0; }
.ps-table th:last-child, .ps-table td:last-child { padding-right: 0; }
.ps-table td.z { color: var(--muted); }
.ps-table td.tot { color: var(--ink); border-left: 1px solid var(--rule); }
.ps-table td.op { text-align: center; color: var(--muted); }
.ps-table tr.is-tight td:last-child { color: var(--ink); }
.ps-gridtab thead th { text-transform: none; letter-spacing: 0; font: 11px var(--mono); color: var(--text-2); }
.ps-gridtab tbody th { font: 12px var(--mono); color: var(--text-2); white-space: nowrap; }
.ps-rows td:first-child { white-space: normal; }
#a-named td { white-space: normal; text-align: left; }
.ps-mini th, .ps-mini td { padding: 4px 8px; font-size: 12px; }
.ps-why { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.ps-why li + li { margin-top: 6px; }

.ps-wi { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.ps-wi input[type="range"] { flex: 1; accent-color: var(--ink); }
.ps-wi-val { font: 15px var(--mono); color: var(--ink); min-width: 7em; text-align: right; }
.ps-wi-out { margin-top: 8px !important; font: 13px/1.5 var(--mono); color: var(--text-2); min-height: 20px; }
.ps-wi-out strong { color: var(--ink); font-weight: 500; }
.ps-curve svg { width: 100%; height: auto; display: block; margin-top: 16px; }
.ps-curve .ax { stroke: var(--ink); stroke-width: 1; }
.ps-curve .now { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.ps-curve .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ps-curve .pt { fill: var(--ink); }
.ps-curve .tk { font: 11px var(--mono); fill: var(--muted); }
.ps-wrap { row-gap: 12px; }

/* ---------- the math ---------- */
.ps-math #math-body { font: 15px/1.6 var(--sans); }
.ps-math var { font: italic 17px var(--serif); color: var(--ink); }
.ps-math sub, .ps-math sup { font: 11px var(--mono); }
.ps-math ul, .ps-math ol { margin: 4px 0 12px; padding-left: 20px; }
.ps-math li { margin: 2px 0; }
.ps-m-h { font: 500 10px/1.5 var(--sans) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 12px !important; }
.ps-m-goal { font-size: 16px; }
.ps-m-note { font: 11px var(--mono); color: var(--muted); margin-left: 8px; }
.ps-m-all { font-size: 13px; color: var(--text-2); margin-left: 8px; }

/* ---------- dialogs ---------- */
.ps-dialog.ps-dialog-wide { width: min(980px, calc(100vw - 32px)); }
.ps-blocks { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 24px; margin-top: 16px; }
.ps-block-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule); max-height: 60vh; overflow: auto; }
.ps-block-list li { border-bottom: 1px solid var(--rule); }
.ps-block-list .ps-tpl-b { padding: 12px 8px; }
.ps-madlib-wrap { border-left: 2px solid var(--ink); padding-left: 20px; }
.ps-madlib { font: 19px/2.1 var(--serif); color: var(--ink); margin-top: 8px !important; }
.ps-madlib .ps-word { font: inherit; color: var(--text); }
.ps .ps-chip.ps-blank { font-size: 14px; border-color: var(--ink); background: var(--stock); }
.ps-blank-ref { font-style: italic; }
.ps-msg-inline { font: 13px/1.5 var(--sans); color: var(--ps-bad); margin-top: 8px !important; min-height: 20px; }
#dt-text { font: 13px/1.5 var(--mono); white-space: pre; overflow-wrap: normal; overflow-x: auto; }
@media (max-width: 760px) { .ps-blocks { grid-template-columns: minmax(0, 1fr); } }
.ps-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 1px solid var(--ink); border-radius: 0; background: var(--ground); color: var(--text); padding: 24px; }
.ps-dialog::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.ps-dialog .ps-label { color: var(--ink); margin-bottom: 16px; }
.ps-dialog .ps-field { margin-top: 12px; }
.ps-dialog textarea { resize: vertical; }
#di-preview { margin-top: 12px; overflow-x: auto; }
.ps-save-list { list-style: none; padding: 0; margin: 8px 0; max-height: 40vh; overflow: auto; display: grid; gap: 8px; }
.ps-save-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; }
.ps-save-list input[type="checkbox"] { accent-color: var(--ink); }
@media (max-width: 560px) { .ps-save-list li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the guide ---------- */
.ps-explain { margin-top: 128px; }
.ps-prose { max-width: 40em; }
.ps-prose h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--ink); margin: 40px 0 12px; }
.ps-prose h3:first-child { margin-top: 8px; }
.ps-prose p, .ps-prose li { font-size: 17px; line-height: 1.7; }
.ps-prose p { margin-bottom: 1.1em; }
.ps-prose strong { font-weight: 600; color: var(--ink); }
.ps-prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.ps-prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.ps-faq { margin: 0 0 1.1em; }
.ps-faq dt { font-weight: 600; color: var(--ink); font-size: 17px; line-height: 1.5; margin-top: 16px; }
.ps-faq dd { margin: 4px 0 0; font-size: 17px; line-height: 1.7; }
.ps-list { padding-left: 20px; margin: 0 0 1.1em; }
.ps-list li + li { margin-top: 8px; }
.ps-sec .ps-list { padding-left: 0; margin: 0; }

/* ---------- phones: sentences stack, chips go full width ---------- */
@media (max-width: 600px) {
  .ps-line { flex-direction: column; align-items: stretch; }
  .ps-line > .ps-tools { margin-left: 0; order: -1; justify-content: flex-end; }
  .ps-expr, .ps-val, .ps-cond, .ps-bound, .ps-each { flex-direction: column; align-items: stretch; }
  .ps .ps-chip, .ps select.ps-chip { max-width: none; width: 100%; }
  .ps .ps-chip.ps-more { width: 100%; }
  .ps-val.is-num { flex-direction: row; }
  .ps-val.is-num .ps-num { flex: 1; }
  .ps-val.is-num .ps-pick { width: 32px; flex: none; }
  .ps-prop { flex-direction: column; align-items: stretch; }
  .ps-props, .ps-table-wrap, .ps-line.ps-sub, .ps-feeds, .ps-imports { padding-left: 0; }
  .ps-bar { position: static; }
  .ps-head-card { padding: 16px; }
}

/* ---------- print: only the reports ---------- */
#print { display: none; }
@media print {
  body.ps-printing > *:not(#main) { display: none !important; }
  body.ps-printing .ps > *:not(#app), body.ps-printing #app > *:not(#print) { display: none !important; }
  body.ps-printing #print { display: block; font: 10pt/1.4 var(--sans); color: var(--ink); }
  body.ps-printing #print section { break-after: page; }
  body.ps-printing #print h2 { font: 600 14pt var(--serif); margin: 0 0 8pt; }
  body.ps-printing #print table { border-collapse: collapse; width: 100%; }
  body.ps-printing #print th, body.ps-printing #print td { border-bottom: 0.5pt solid var(--rule); padding: 2pt 6pt 2pt 0; text-align: left; vertical-align: top; }
}

/* ======================================================================================
   The app: Plain Solver's own full-screen layout (_layouts/solver.html). Same color tokens
   as the site; friendlier type and shapes: Inter throughout at app sizes, rounded cards and
   fields, pill buttons. One screen per step, a step rail on the left, the model in plain
   English on the right. Rules below override the stationery styles above where they meet.
   ====================================================================================== */
body.ps-body { background: var(--ground); }
.ps { --ps-r: 14px; --ps-r-sm: 10px; --ps-top: 58px; font-family: var(--sans); padding-bottom: 0; }
.ps button { font-family: var(--sans); }
.ps .ps-btn { border-radius: 999px; padding: 11px 20px; font: 600 14px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.ps .ps-btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }
.ps .ps-btn-block { width: 100%; justify-content: center; padding: 15px; font-size: 16px; }
.ps .ps-link { font: 500 13px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }

/* top bar */
.ps-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; min-height: var(--ps-top); padding: 8px 20px; background: var(--stock); border-bottom: 1px solid var(--rule); }
.ps-top-home { font: 500 14px var(--sans); color: var(--text-2); text-decoration: none; white-space: nowrap; }
.ps-top-home:hover { color: var(--accent); }
.ps-top-app { font: 700 15px var(--sans); color: var(--ink); text-decoration: none; padding-left: 12px; border-left: 1px solid var(--rule); white-space: nowrap; }
.ps-top-title { min-width: 0; }
.ps .ps-top-title input { width: min(30ch, 28vw); border: 1px solid transparent; background: transparent; padding: 7px 10px; border-radius: var(--ps-r-sm); font: 500 15px var(--sans); color: var(--text); }
.ps .ps-top-title input:hover, .ps .ps-top-title input:focus-visible { border-color: var(--rule); background: var(--ground); }
.ps-top-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ps-tbtn { list-style: none; border: 1px solid var(--rule); background: var(--ground); color: var(--text); border-radius: 999px; padding: 7px 14px; font: 500 14px var(--sans); cursor: pointer; }
.ps-tbtn::-webkit-details-marker { display: none; }
.ps-tbtn:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.ps-tbtn:disabled { opacity: 0.45; cursor: default; }
.ps-menu { position: relative; }
.ps-menu[open] > .ps-tbtn { border-color: var(--ink); color: var(--ink); }
.ps-menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(330px, 92vw); display: grid; padding: 6px; background: var(--stock); border: 1px solid var(--rule); border-radius: var(--ps-r); box-shadow: 0 16px 40px var(--shadow); }
.ps-menu-list button { text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 14px var(--sans); cursor: pointer; }
.ps-menu-list button:hover, .ps-menu-list button:focus-visible { background: var(--ground); color: var(--ink); outline: none; }
.ps-menu-list hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 4px; }
.ps-solve { border: 0; border-radius: 999px; padding: 11px 24px; background: var(--ink); color: var(--on-ink); font: 600 15px var(--sans); cursor: pointer; white-space: nowrap; }
.ps-solve:hover { background: var(--accent); }
.ps-solve:focus-visible, .ps-tbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps .ps-flash { position: fixed; z-index: 60; right: 20px; top: calc(var(--ps-top) + 12px); max-width: min(460px, calc(100vw - 32px)); margin: 0; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: var(--on-ink); font: 14px/1.45 var(--sans); box-shadow: 0 12px 32px var(--shadow); }

/* the shell: rail | stage | side */
.ps-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr) 340px; min-height: calc(100vh - var(--ps-top)); }
.ps-shell.is-start { grid-template-columns: minmax(0, 1fr); }
.ps-shell.is-start .ps-rail, .ps-shell.is-start .ps-side { display: none; }
.ps-rail { position: sticky; top: var(--ps-top); align-self: start; height: calc(100vh - var(--ps-top)); overflow: auto; padding: 24px 12px; border-right: 1px solid var(--rule); }
.ps-rail-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ps-railbtn { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-align: left; font: 500 15px var(--sans); color: var(--text-2); cursor: pointer; }
.ps-railbtn:hover { background: var(--stock); color: var(--ink); }
.ps-railbtn[aria-current] { background: var(--stock); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.ps-rail-n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); background: var(--ground); font: 600 13px var(--sans); color: var(--text-2); }
.ps-railbtn.is-done .ps-rail-n { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ps-rail-c { font: 12px var(--mono); color: var(--muted); }
.ps-rail-more { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); display: grid; gap: 2px; }
.ps-rail-more button { text-align: left; border: 0; background: none; padding: 8px 12px; border-radius: 8px; font: 14px var(--sans); color: var(--text-2); cursor: pointer; }
.ps-rail-more button:hover { background: var(--stock); color: var(--ink); }
.ps-stage { min-width: 0; padding: 40px clamp(20px, 4vw, 56px) 72px; }
.ps-stage:focus { outline: none; }
.ps-shell:not(.is-start) .ps-stage > .ps-view { max-width: 900px; }
.ps-shell.is-start .ps-stage { width: 100%; max-width: 1180px; margin: 0 auto; }
.ps-side { position: sticky; top: var(--ps-top); align-self: start; height: calc(100vh - var(--ps-top)); overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; background: var(--stock); border-left: 1px solid var(--rule); }
.ps-side-box > summary { list-style: none; cursor: default; }
.ps-side-box > summary::-webkit-details-marker { display: none; }
.ps-side h2 { font: 600 12px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ps .ps-side .ps-preview { font: 15px/1.5 var(--sans); color: var(--text); margin: 10px 0 0 !important; }
.ps-sum-part { margin-top: 16px; }
.ps-sum-h { border: 0; background: none; padding: 0; font: 600 12px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); cursor: pointer; }
.ps-sum-h:hover { text-decoration: underline; }
.ps-sum-part ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text); }
.ps-sum-none { font-size: 14px; color: var(--muted); margin-top: 4px !important; }
.ps-side .ps-cards { margin-top: 14px; }
.ps-todo { border: 0; background: none; padding: 0; text-align: left; font: 14px/1.45 var(--sans); color: var(--ink); cursor: pointer; }
.ps-todo:hover { color: var(--accent); text-decoration: underline; }
.ps-card.is-todo .ps-card-k { color: var(--accent); }
/* the numbers you know, as a tidy table */
.ps-card2-data .ps-props { padding-left: 0; gap: 6px; }
.ps-card2-data .ps-prop { display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 0.8fr) minmax(0, 0.8fr) auto auto; align-items: center; gap: 8px; }
.ps-card2-data .ps-prop .ps-chip.ps-name { width: 100%; }
.ps-card2-data .ps-prop .ps-chip.ps-num { width: 100%; }
.ps-card2-data .ps-prop .ps-chip.ps-unit { width: 100%; }
.ps-side .ps-card { font-size: 13px; }
.ps .ps-side .ps-status { border-top: 0; padding-top: 0; font: 13px/1.45 var(--sans); color: var(--text-2); }

/* the start screen */
.ps-welcome { padding: 32px 0 8px; }
.ps-kicker, .ps-step-k { font: 600 12px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.ps .ps-welcome h1 { font: 700 clamp(42px, 6.4vw, 72px)/1.02 var(--sans); letter-spacing: -0.035em; color: var(--ink); margin-top: 12px; }
.ps-welcome-lede { margin-top: 18px !important; font-size: 19px; line-height: 1.6; color: var(--text-2); max-width: 40em; }
.ps-paths { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 12px; margin-top: 32px; }
.ps-path { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 20px; min-height: 132px; border: 1px solid var(--rule); border-radius: var(--ps-r); background: var(--stock); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.ps-path:hover { border-color: var(--ink); transform: translateY(-2px); }
.ps-path:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-path-t { font: 600 18px/1.25 var(--sans); color: var(--ink); }
.ps-path-d { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.ps-path-main { background: var(--ink); border-color: var(--ink); }
.ps-path-main .ps-path-t, .ps-path-main .ps-path-d, .ps-path-main .ps-path-go { color: var(--on-ink); }
.ps-path-main:hover { background: var(--accent); border-color: var(--accent); }
.ps-path-go { margin-top: auto; font: 600 15px var(--sans); }
.ps-resume { margin-top: 18px !important; }
.ps-resume .ps-link { font-size: 15px; color: var(--ink); }
.ps .ps-h2 { font: 600 24px var(--sans); letter-spacing: -0.01em; color: var(--ink); margin-top: 56px; }
.ps-sub { color: var(--text-2); margin-top: 6px !important; }
.ps .ps-tpls { margin-top: 18px; gap: 12px; border: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ps .ps-tpl { border: 1px solid var(--rule); border-radius: var(--ps-r); background: var(--stock); overflow: hidden; }
.ps .ps-tpl:hover { border-color: var(--ink); }
.ps .ps-tpl-b { padding: 18px; }
.ps .ps-tpl-b:hover { background: transparent; }
.ps .ps-tpl-t { font: 600 17px/1.3 var(--sans); }
.ps .ps-tpl-tags { font: 12px var(--sans); color: var(--accent); }
@media (max-width: 960px) { .ps-paths { grid-template-columns: 1fr 1fr; } .ps-path-main { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ps-paths { grid-template-columns: minmax(0, 1fr); } }

/* a step */
.ps .ps-step-h { font: 700 clamp(30px, 4vw, 42px)/1.1 var(--sans); letter-spacing: -0.025em; color: var(--ink); margin-top: 8px; }
.ps-step-lede { margin-top: 10px !important; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 42em; }
.ps-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--ps-r); background: var(--stock); }
.ps-form-w { font: 500 16px var(--sans); color: var(--text); }
.ps .ps-in { width: auto; min-width: 0; padding: 11px 14px; border: 1px solid var(--rule); border-radius: var(--ps-r-sm); background: var(--ground); color: var(--ink); font: 16px var(--sans); }
.ps .ps-in:hover { border-color: var(--text-2); }
.ps .ps-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.ps select.ps-in { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.ps .ps-in-grow { flex: 1 1 14em; }
.ps .ps-in-num { width: 7.5em; text-align: right; font-family: var(--mono); }
.ps .ps-in-unit { width: 8.5em; }
.ps-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px !important; font-size: 14px; color: var(--muted); }
.ps-ex, .ps-vchip { border: 1px solid var(--rule); background: var(--stock); color: var(--text); border-radius: 999px; padding: 6px 13px; font: 14px var(--sans); cursor: pointer; }
.ps-ex:hover, .ps-vchip:hover { border-color: var(--ink); color: var(--ink); }
.ps-vocab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.ps-vocab-k { font-size: 13px; color: var(--muted); margin-right: 4px; }
.ps-vchip-op { font: 13px var(--mono); color: var(--accent); background: transparent; }
.ps .ps-hint em { font-style: normal; font-weight: 600; color: var(--ink); }
.ps-addrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 18px; }
.ps-addbtn { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border: 1px dashed var(--rule); border-radius: 12px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.ps-addbtn strong { font: 600 15px var(--sans); color: var(--ink); }
.ps-addbtn span { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.ps-addbtn:hover { border-style: solid; border-color: var(--ink); background: var(--stock); }
.ps-addbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-addbtn-strong { border-style: solid; border-color: var(--ink); }
/* step 4: what you're after, and the goal as money in and money out */
.ps-goalkind .ps-addbtn[aria-pressed="true"] { border: 2px solid var(--accent); padding: 13px 15px; background: var(--stock); }
.ps-money { margin-top: 18px; display: grid; gap: 14px; }
.ps-money-box { padding: 18px; border: 1px solid var(--rule); border-radius: var(--ps-r); background: var(--stock); }
.ps-money-box.is-in { box-shadow: inset 3px 0 0 var(--accent); }
.ps-money-h { margin: 0; font: 700 18px/1.3 var(--sans); color: var(--ink); }
.ps-money-sub { margin: 4px 0 0; font: 14px/1.5 var(--sans); color: var(--text-2); }
.ps-mlines { display: grid; gap: 10px; margin-top: 14px; }
.ps-mline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ps .ps-mline .ps-in { flex: 1 1 200px; padding-top: 9px; padding-bottom: 9px; font-size: 15px; }
.ps .ps-mline .ps-in-num { flex: 0 1 110px; }
.ps-mline-x { font: 500 18px var(--sans); color: var(--muted); }
.ps-mline-warn { flex: 1 1 100%; margin: 0; font: 13px/1.5 var(--sans); color: var(--ps-bad); }
.ps-money-add { margin-top: 12px; }
.ps-money-say { margin: 0; padding: 14px 18px; border-radius: var(--ps-r); background: var(--ground); border: 1px dashed var(--rule); font: 15px/1.6 var(--sans); color: var(--text); }
.ps-cardlist { display: grid; gap: 10px; margin-top: 28px; }
.ps-card2 { padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--ps-r); background: var(--stock); }
.ps-card2.is-off { opacity: 0.55; }
.ps-card2-head { display: flex; gap: 12px; align-items: flex-start; }
.ps-card2-main { flex: 1; min-width: 0; }
.ps-card2-t { font: 600 17px/1.35 var(--sans); color: var(--ink); }
.ps-card2-s { margin-top: 4px !important; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ps-card2-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
.ps-cbtn { border: 1px solid var(--rule); background: var(--ground); color: var(--text); border-radius: 999px; padding: 5px 12px; font: 500 13px var(--sans); cursor: pointer; }
.ps-cbtn:hover { border-color: var(--ink); color: var(--ink); }
.ps-cbtn.is-off { border-style: dashed; color: var(--muted); }
.ps-cbtn-x:hover { border-color: var(--ps-bad); color: var(--ps-bad); }
.ps-card2-edit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.ps-card2 .ps-s { padding: 0; border: 0; }
.ps-card2 .ps-s.has-error { padding-left: 10px; }
.ps-empty-note { padding: 18px; border: 1px dashed var(--rule); border-radius: var(--ps-r); color: var(--muted); font-size: 15px; text-align: center; }
.ps-stepnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); }
.ps .ps-msg-inline:empty { display: none; }
.ps .ps-chip, .ps .ps-cell { border-radius: 6px; }
#v-questions #questions { margin-top: 20px; }
.ps .ps-q-row { padding: 12px 0; }
.ps .ps-q-text { font-size: 16px; }

/* the answer */
.ps-empty { margin-top: 24px; padding: 36px; border: 1px dashed var(--rule); border-radius: var(--ps-r); text-align: center; color: var(--text-2); }
.ps-empty .ps-btn { margin-top: 14px; }
.ps .ps-head-card { margin-top: 20px; padding: 28px; border-radius: var(--ps-r); background: var(--stock); }
.ps .ps-big { font: 700 clamp(40px, 5vw, 56px)/1.05 var(--sans); letter-spacing: -0.03em; }
.ps .ps-sentence { font: 500 17px/1.5 var(--sans); }
.ps .ps-block { margin-top: 40px; }
.ps-block-t { font: 600 19px var(--sans); color: var(--ink); margin-bottom: 12px !important; }
.ps .ps-exports { margin-top: 24px; }
.ps .ps-msg { border-radius: var(--ps-r); }
.ps .ps-dialog { border-radius: var(--ps-r); }
.ps .ps-explain { margin-top: 0; padding-top: 96px; padding-bottom: 96px; border-top: 1px solid var(--rule); }

/* narrower screens: the summary moves under the step; then the rail becomes a strip */
@media (max-width: 1180px) {
  .ps-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .ps-side { grid-column: 2; position: static; height: auto; border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  .ps { --ps-top: 52px; }
  .ps-top { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .ps-top-home { display: none; }
  .ps-top-app { padding-left: 0; border-left: 0; }
  .ps-top-title { order: 5; flex: 1 1 100%; }
  .ps .ps-top-title input { width: 100%; }
  .ps-top-tools .ps-tbtn { padding: 6px 11px; }
  .ps-solve { padding: 9px 16px; }
  .ps-shell { grid-template-columns: minmax(0, 1fr); }
  .ps-rail { position: sticky; top: 0; z-index: 30; height: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--rule); background: var(--ground); overflow-x: auto; }
  .ps-rail-steps { display: flex; gap: 6px; }
  .ps-railbtn { grid-template-columns: 26px auto; gap: 8px; padding: 7px 10px; white-space: nowrap; font-size: 14px; }
  .ps-rail-n { width: 26px; height: 26px; }
  .ps-rail-c, .ps-rail-more { display: none; }
  .ps-side { grid-column: 1; }
  .ps-stage { padding: 24px 16px 56px; }
  .ps-form { padding: 12px; }
  .ps-form > * { flex: 1 1 100%; }
  .ps-mlines { gap: 0; }
  .ps-mline { padding: 10px 0; border-bottom: 1px dashed var(--rule); }
  .ps-mline:first-child { padding-top: 0; }
  .ps .ps-in, .ps .ps-in-num, .ps .ps-in-unit { width: 100%; }
  .ps-card2-head { flex-direction: column; }
  .ps-card2-act { justify-content: flex-start; }
  .ps-stepnav { flex-direction: column-reverse; }
  .ps-stepnav .ps-btn { justify-content: center; }
}