/* The pre-demo interview: questions on the left, the demo setup they imply on
   the right, growing as the owner answers. Same inks and depth as the POS. */
body.survey { font-size: 17px; min-height: 100%; display: flex; flex-direction: column; }
.s-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.75rem 1rem; background: var(--surface); box-shadow: var(--lift); position: sticky; top: 0; z-index: 5; }
.s-title { display: flex; flex-direction: column; }
.s-title strong { font-size: 1.25rem; }
.s-title .faint { font-size: 0.875rem; }
.s-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.s-stall { min-height: 44px; min-width: 12rem; padding: 0 0.75rem; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 1rem; }
.s-tools .pick { min-height: 44px; }
.s-tools .primary { min-height: 44px; padding: 0 1.25rem; }
.s-status { font-size: 0.875rem; color: var(--ink-soft); }
.s-status.bad { color: var(--danger); }
.s-status.good { color: var(--good); }

.s-signin { margin: 1rem; padding: 1rem; background: var(--pending-soft); border-radius: var(--radius); }
.s-signin-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.s-signin-row input { min-height: 44px; padding: 0 0.75rem; border: 2px solid var(--line-strong); border-radius: var(--radius); font-size: 1rem; }

.s-main { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; max-width: 1200px; width: 100%; margin: 0 auto; box-sizing: border-box; }
@media (min-width: 900px) { .s-main { grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr); align-items: start; } .s-results { position: sticky; top: 5.5rem; } }

.s-group { background: var(--surface); box-shadow: var(--lift); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.s-group h2 { font-size: 1.125rem; margin: 0 0 0.75rem; }
.s-q { padding: 0.75rem 0; }
.s-q + .s-q { border-top: 1px dashed var(--line); }
.s-q .s-text { font-weight: 700; margin: 0 0 0.25rem; }
.s-q .s-text .n { color: var(--ink-faint); font-weight: 600; margin-right: 0.35rem; font-variant-numeric: tabular-nums; }
.s-q .s-effect { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--ink-faint); }
.s-q .s-effect::before { content: "→ "; }
.s-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.s-options button { min-height: 44px; padding: 0 0.9rem; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 1rem; font-weight: 600; }
.s-options button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.s-q input[type="text"], .s-q textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.5rem 0.75rem; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; margin-top: 0.5rem; }
.s-q.answered .s-text .n { color: var(--good); }

.s-results { background: var(--surface); box-shadow: var(--lift); border-radius: var(--radius); padding: 1rem; }
.s-results h2 { font-size: 1.125rem; margin: 0 0 0.25rem; }
.s-results h3 { font-size: 1rem; margin: 1rem 0 0.375rem; color: var(--ink-soft); }
.s-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.s-table th { text-align: left; color: var(--ink-faint); font-weight: 600; padding: 0.3rem 0.5rem 0.3rem 0; width: 7.5rem; vertical-align: top; }
.s-table td { padding: 0.3rem 0; vertical-align: top; }
.s-table tr + tr th, .s-table tr + tr td { border-top: 1px solid var(--surface-sunken); }
.s-table td.empty { color: var(--ink-faint); }
.s-list { margin: 0; padding-left: 1.1rem; list-style: disc; font-size: 0.9375rem; }
.s-list li { margin: 0.15rem 0; }
.s-list li .faint { font-size: 0.8125rem; }
.s-results textarea { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; }
.s-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.s-actions button { min-height: 44px; }

.s-foot { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: var(--lift-up); position: sticky; bottom: 0; font-size: 0.9375rem; color: var(--ink-soft); z-index: 5; }
.s-submit { min-height: 52px; padding: 0 2rem; font-size: 1.125rem; }
.s-submit:disabled { background: var(--surface-sunken); border-color: var(--line-strong); color: var(--ink-faint); opacity: 1; }
.s-review { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.s-review .secondary { min-height: 44px; }
.s-done { max-width: 44rem; margin: 1.5rem auto; padding: 1.25rem; background: var(--surface); box-shadow: var(--lift); border-radius: var(--radius); }
.s-done h2 { margin: 0 0 0.5rem; }
.s-done h3 { font-size: 1rem; margin: 1rem 0 0.375rem; color: var(--ink-soft); }
.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.25rem; border-radius: var(--radius); text-decoration: none; font-weight: 700; }
.button-link.primary { background: var(--accent); color: var(--accent-ink); }
body:not(.review) .s-effect { display: none; }
/* what the answer did: a setup line, a caveat, or a gap */
.s-said { margin: 0.5rem 0 0; padding: 0.35rem 0.6rem; border-radius: 6px; font-size: 0.9375rem; background: var(--good-soft); color: var(--good); }
.s-said.adjust { background: var(--pending-soft); color: var(--pending); }
.s-said.no { background: var(--danger-soft); color: var(--danger); }
.s-verdict { margin: 0 0 0.5rem; font-weight: 700; }
.s-results h3.no, .s-done h3.no { color: var(--danger); }
.s-results h3.adjust, .s-done h3.adjust { color: var(--pending); }
.s-results h3.ok, .s-done h3.ok { color: var(--good); }
.s-fit li { list-style: none; margin-left: -1.1rem; padding-left: 1.3rem; position: relative; }
.s-fit li .s-mark { position: absolute; left: 0; top: 0.45em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--good); }
.s-fit li.adjust .s-mark { background: var(--pending); }
.s-fit li.no .s-mark { background: var(--danger); }
.s-fit li .faint { font-size: 0.8125rem; margin-left: 0.25rem; }

/* Shared product palette: warm paper, forest green, clear working controls. */
body.survey { --ground:#f5f3ed; --surface:#fffefa; --surface-sunken:#eceee6; --ink:#203a32; --ink-soft:#52665b; --ink-faint:#65746b; --accent:#21634b; --accent-ink:#fff; --line:#dce2d6; --line-strong:#b5c2b5; --good:#21634b; --good-soft:#edf4e9; --radius:16px; --lift:none; background:var(--ground); color:var(--ink); }
.s-head { position:static; max-width:1160px; width:100%; box-sizing:border-box; margin:auto; padding:32px 24px 20px; background:none; align-items:flex-start; }
.s-brand { color:var(--ink); font-size:30px; font-weight:800; text-decoration:none; letter-spacing:-1.5px; display:flex; gap:8px; align-items:center; }
.s-brand span { font-size:11px; letter-spacing:2px; padding-top:8px; }
.s-title { flex:1; min-width:240px; gap:10px; }
.s-title strong { font-size:clamp(24px,3vw,36px); line-height:1.25; letter-spacing:-.04em; }
.s-title .faint { color:var(--ink-soft); font-size:15px; line-height:1.7; }
.s-tools { width:100%; margin:8px 0 0; }
.s-stall { width:min(100%,380px); box-sizing:border-box; background:var(--surface); }
.s-main { padding:0 24px 40px; gap:24px; max-width:1160px; }
.s-intro { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:20px; }
.s-intro p { margin:0 0 8px; line-height:1.7; max-width:72ch; }
.s-intro .s-kicker { color:var(--accent); font-weight:750; font-size:13px; letter-spacing:.08em; }
.s-privacy { font-size:13px; color:var(--ink-soft); }
.s-privacy a { color:var(--accent); display:inline-block; margin-left:8px; }
.s-group,.s-results,.s-done { border:1px solid var(--line); padding:24px; }
.s-group h2 { font-size:14px; letter-spacing:.03em; color:var(--accent); margin-bottom:16px; }
.s-q { padding:20px 0; scroll-margin-top:24px; }
.s-q:last-child { padding-bottom:0; }
.s-q .s-text { font-size:17px; margin-bottom:8px; line-height:1.6; }
.s-q .s-effect,body:not(.review) .s-effect { display:block; color:var(--ink-soft); line-height:1.5; font-size:13px; margin:0 0 12px; }
.s-q .s-effect::before { content:none; }
.s-options button { border-width:1px; border-radius:10px; line-height:1.4; padding:10px 14px; font-size:15px; text-align:left; }
.s-options button:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid #a57325; outline-offset:3px; }
.s-said { font-size:13px; line-height:1.6; padding:8px 10px; }
.s-results { top:24px; max-height:calc(100dvh - 130px); overflow:auto; }
.s-results h2 { font-size:22px; }
.s-list { line-height:1.7; }
.s-list li { margin:8px 0; }
.s-verdict { font-size:14px; font-weight:400; line-height:1.7; }
.s-optional summary { cursor:pointer; padding:18px 8px; color:var(--accent); font-weight:700; }
.s-foot { border-top:1px solid var(--line); padding-left:max(24px,calc((100vw - 1112px)/2)); padding-right:max(24px,calc((100vw - 1112px)/2)); }
.s-submit { font-size:16px; }
.s-done { width:min(90%,720px); box-sizing:border-box; }
@media(max-width:899px) { .s-results { position:static; max-height:none; } }
@media(max-width:600px) { .s-head { padding:20px 16px; gap:20px; } .s-title { flex-basis:100%; } .s-main { padding:0 16px 24px; gap:16px; } .s-group,.s-results,.s-done { padding:18px; } .s-foot { padding:12px 16px calc(12px + env(safe-area-inset-bottom)); gap:8px; flex-wrap:wrap; } .s-submit { padding:0 16px; } #submit-hint { font-size:12px; } .s-stall { width:100%; } }
@media(prefers-color-scheme:dark) { body.survey { --ground:#14231e; --surface:#1c3028; --surface-sunken:#283e32; --ink:#f1f0e7; --ink-soft:#bbcbbb; --ink-faint:#a8baa8; --accent:#b3db9b; --accent-ink:#193b2a; --line:#385244; --line-strong:#637d68; --good:#b3db9b; --good-soft:#294231; } }