/* Site planner v2 (/spec/v2/), and the phone page that shares it (phone.html).
   RunCabin's "Field Guide" look (docs/BRAND.md section 4, the tokens of wwwroot/css/rc.css): warm paper and ink,
   one blue for actions, Fraunces for headings, Schibsted Grotesk for text, IBM Plex Mono for small labels and
   prices. Hairline rules instead of boxes in boxes, corners 0-6px, and a shadow only on what floats (a dialog,
   the plan sheet on a phone). No pills, no tinted chat bubbles, no "typing" dots: it should read like a
   well-made form, not a chatbot. */
:root {
  --bg: #f6f2e9; --bg-deep: #ede7d8; --card: #fffdf8;
  --ink: #1c2b3a; --muted: #52616f; --faint: #6d7985;
  --line: rgba(28, 43, 58, .16); --line-strong: rgba(28, 43, 58, .34);
  --accent: #2563eb; --accent-ink: #ffffff; --accent-soft: #f0f4fd;
  --cta: #2563eb; --cta-hover: #1d4ed8; --cta-ink: #ffffff;
  --ember: #c46a1b; --ember-soft: #f5e4cf; --pine: #2f6f4f;
  --night: #0e1a2b; --night-line: rgba(242, 234, 217, .14); --cream: #f2ead9; --cream-soft: #aebbc9; --sky: #7dd3fc;
  --danger: #b42318; --flash: #fbefc6;
  --gold: var(--ember); --gold-soft: var(--ember-soft);
  --pop: 0 18px 48px rgba(14, 26, 43, .22), 0 2px 6px rgba(14, 26, 43, .08);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1a2b; --bg-deep: #16273c; --card: #13233a;
    --ink: #f2ead9; --muted: #aebbc9; --faint: #8b98a8;
    --line: rgba(242, 234, 217, .14); --line-strong: rgba(242, 234, 217, .3);
    --accent: #7dd3fc; --accent-ink: #0e1a2b; --accent-soft: rgba(125, 211, 252, .1);
    --cta: #2563eb; --cta-hover: #3b82f6; --cta-ink: #ffffff;
    --ember: #e39a5c; --ember-soft: rgba(227, 154, 92, .14); --pine: #4ade80;
    --danger: #f3a093; --flash: rgba(125, 211, 252, .2);
    --pop: 0 18px 48px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --bg: #0e1a2b; --bg-deep: #16273c; --card: #13233a;
  --ink: #f2ead9; --muted: #aebbc9; --faint: #8b98a8;
  --line: rgba(242, 234, 217, .14); --line-strong: rgba(242, 234, 217, .3);
  --accent: #7dd3fc; --accent-ink: #0e1a2b; --accent-soft: rgba(125, 211, 252, .1);
  --cta: #2563eb; --cta-hover: #3b82f6; --cta-ink: #ffffff;
  --ember: #e39a5c; --ember-soft: rgba(227, 154, 92, .14); --pine: #4ade80;
  --danger: #f3a093; --flash: rgba(125, 211, 252, .2);
  --pop: 0 18px 48px rgba(0, 0, 0, .5);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--serif); font-weight: 560; letter-spacing: -.015em; margin: 0; font-optical-sizing: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 15px; height: 15px; }

/* shell: the night bar of the RunCabin site, with the planner's progress as a thin line along its foot */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 0 24px; background: var(--night); color: var(--cream); border-bottom: 1px solid var(--night-line); position: sticky; top: 0; z-index: 20; }
.brand-wrap { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
.brand img { width: 24px; height: 24px; }
.brand-sub { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-soft); padding-left: 14px; border-left: 1px solid var(--night-line); white-space: nowrap; }
.stage-tag { font-size: 13.5px; color: var(--cream-soft); display: flex; align-items: center; min-width: 0; }
.stage-tag > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-tag .bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; overflow: hidden; }
.stage-tag .bar i { display: block; height: 100%; background: var(--sky); transition: width .5s ease; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; max-width: 1140px; margin: 0 auto; padding: 52px 28px 120px; align-items: start; }
@media (max-width: 979px) { .layout { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 110px; } }

/* The stage sits straight on the paper: no card around the question. Boxes are for things you fill in. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 28px; }
#stage > .card { background: none; border: 0; border-radius: 0; padding: 0; max-width: 700px; }
@media (max-width: 560px) { .card { padding: 22px 18px; } }
.sec { display: flex; align-items: center; gap: 12px; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.sec::before { content: ""; width: 28px; height: 1px; background: var(--ember); flex: none; }
.sec .ico { display: none; }
.sec .of { color: var(--ink); }
.q-title { font-size: clamp(27px, 3.4vw, 36px); line-height: 1.14; margin: 0 0 10px; overflow-wrap: anywhere; }
.q-help { color: var(--muted); margin: 0 0 4px; font-size: 16.5px; max-width: 62ch; }
.msg { color: var(--muted); font-size: 15.5px; margin: 0 0 22px; max-width: 62ch; }
.why-ai { font-size: 14.5px; color: var(--muted); margin: 12px 0 0; max-width: 62ch; }
.why-ai strong { color: var(--ink); font-weight: 600; }
.fields { display: grid; gap: 30px; margin-top: 28px; }
.fld > .fl-l { display: block; font-weight: 600; font-size: 16.5px; margin: 0 0 6px; overflow-wrap: anywhere; }
.fld > .fl-l .opt-tag { font: 400 12px var(--mono); color: var(--faint); margin-left: 8px; letter-spacing: .02em; }
.fld > .fl-h { color: var(--muted); font-size: 14.5px; margin: -2px 0 10px; }
.answers { display: grid; gap: 8px; }
.answers.cols { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line-strong); border-radius: 4px; padding: 13px 16px; cursor: pointer; color: var(--ink); transition: border-color .12s, background .12s, box-shadow .12s; }
.opt:hover { border-color: var(--ink); }
.opt:focus-visible, .btn:focus-visible, .link:focus-visible, .chipbtn:focus-visible, .mini:focus-visible, .sug:focus-visible, .iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt .box { width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 3px; display: grid; place-items: center; flex: none; margin-top: 2px; color: transparent; background: var(--card); }
.opt .box .ico { width: 12px; height: 12px; stroke-width: 3; }
.opt.radio .box { border-radius: 50%; }
.opt.radio .box .ico { display: none; }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.opt.radio[aria-pressed="true"] .box { background: var(--card); }
.opt.radio[aria-pressed="true"] .box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.opt .l { font-weight: 500; }
.opt .d { display: block; color: var(--muted); font-size: 14px; font-weight: 400; margin-top: 2px; }
.opt .tag { display: inline-block; margin-left: 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--ember); white-space: nowrap; }
.opt .tag.seen { color: var(--muted); }
.other-box { margin-top: 10px; }
.other-box label { display: block; font-size: 14px; color: var(--muted); margin: 4px 0 6px; }
.field { width: 100%; background: var(--card); border: 1px solid var(--line-strong); border-radius: 4px; padding: 11px 13px; font-size: 16.5px; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.field::placeholder { color: var(--faint); opacity: 1; }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
.field.bad { border-color: var(--danger); }
textarea.field { min-height: 108px; resize: vertical; line-height: 1.5; }
select.field { appearance: auto; }
.money { position: relative; max-width: 260px; }
.money span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--mono); font-size: 15px; }
.money .field { padding-left: 28px; font-family: var(--mono); font-size: 16px; }
.num-row { display: flex; align-items: center; gap: 12px; }
.num-row .field { flex: 0 1 180px; min-width: 0; font-family: var(--mono); font-size: 16px; }
.num-row .unit { color: var(--muted); font-size: 16px; }
/* suggestions under a text box: a run of examples, not a wall of chips */
.sugg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.sugg-l { margin-right: 6px; }
.chipbtn { background: none; border: 0; padding: 2px 0; font-size: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
.chipbtn:hover { text-decoration-color: currentColor; }
.chipbtn:not(:last-child)::after { content: ","; display: inline-block; color: var(--muted); margin-right: 7px; }
.nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
#card > .nav, .co > .nav { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.nav .spacer { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 4px; padding: 13px 22px; font-size: 16px; font-weight: 620; line-height: 1.2; cursor: pointer; background: var(--cta); color: var(--cta-ink); text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--cta-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--cta); }
.btn .ico { width: 16px; height: 16px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); padding: 11.5px 20px; }
.btn.ghost:hover { border-color: var(--ink); background: transparent; }
.btn.big { padding: 16px 30px; font-size: 17px; }
.btn.ghost.big { padding: 14.5px 28px; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.link:hover { color: var(--ink); text-decoration-color: currentColor; }
.err { color: var(--danger); font-size: 14px; margin-top: 8px; min-height: 1em; }
.fld .err { margin-top: 6px; min-height: 0; }
.fade-in { animation: fin .25s ease-out; }
@keyframes fin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in, .flash { animation: none !important; } }
.review-note { display: flex; gap: 10px; align-items: center; background: var(--bg-deep); border-radius: 4px; padding: 10px 14px; font-size: 14px; color: var(--ink); margin: 0 0 22px; }
.review-note .ico { color: var(--muted); }

/* list + items */
.lrows { display: grid; gap: 8px; }
.lrow { display: flex; gap: 8px; align-items: center; }
.lrow .field { font-size: 16px; padding: 10px 12px; }
.iconbtn { background: none; border: 1px solid var(--line-strong); border-radius: 4px; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; color: var(--muted); flex: none; }
.iconbtn:hover { color: var(--danger); border-color: var(--danger); }
.addrow, .sx-add { margin-top: 10px; padding: 8px 14px; font-size: 14.5px; }
.btn.ghost.addrow, .btn.ghost.sx-add { padding: 8px 14px; }
.irows { display: grid; gap: 12px; }
.irow { border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px 16px; background: var(--card); }
.irow-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.igrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (max-width: 560px) { .igrid { grid-template-columns: 1fr; } }
.igrid .full { grid-column: 1 / -1; }
.igrid label { display: block; font-size: 13.5px; color: var(--muted); margin: 0 0 5px; }
.igrid .field { font-size: 16px; padding: 10px 12px; }
.igrid textarea.field { min-height: 80px; }
.ph { display: flex; align-items: center; gap: 12px; }
.ph .thumb { width: 64px; height: 64px; border-radius: 3px; object-fit: cover; background: var(--bg-deep); border: 1px solid var(--line); flex: none; display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.ph .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph .phs { font-size: 13.5px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.ph .phs .err { margin: 2px 0 0; }

/* hours + address */
.hmodes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hmodes .opt { width: auto; padding: 9px 14px; }
.hgrid { display: grid; border-top: 1px solid var(--line); }
.hrow { display: grid; grid-template-columns: 56px auto 1fr 1fr; gap: 8px 12px; align-items: center; font-size: 15px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.hrow .dn { font: 500 13px var(--mono); letter-spacing: .04em; color: var(--ink); }
.hrow label.cl { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.hrow input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
.hrow input[type=time] { border: 1px solid var(--line-strong); background: var(--card); border-radius: 4px; padding: 7px 8px; font: 15px var(--mono); min-width: 0; width: 100%; color: var(--ink); }
.hrow input[type=time]:disabled { opacity: .4; }
@media (max-width: 460px) { .hrow { grid-template-columns: 44px auto 1fr 1fr; gap: 6px; font-size: 14px; } }
.hcopy { margin-top: 6px; }
.agrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px 14px; }
.agrid .full { grid-column: 1 / -1; }
.agrid label { display: block; font-size: 13.5px; color: var(--muted); margin: 0 0 5px; }
.agrid .field { font-size: 16px; padding: 10px 12px; }
@media (max-width: 560px) { .agrid { grid-template-columns: 1fr 1fr; } .agrid .c1 { grid-column: 1 / -1; } }

/* single color */
.cline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cpick { position: relative; display: inline-flex; flex: none; }
.cswatch { width: 48px; height: 42px; border-radius: 4px; border: 1px solid var(--line-strong); padding: 0; cursor: pointer; background: var(--card); }
.cswatch.empty { border-style: dashed; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--faint) calc(50% - .5px), var(--faint) calc(50% + .5px), transparent calc(50% + .5px)) var(--card); }
.cswatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cnative { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.cline .hex { flex: 1 1 200px; max-width: 280px; min-width: 0; }
.cst { font-size: 14px; color: var(--muted); }
.hex { font: 15px/1.2 var(--mono); padding: 10px; text-transform: lowercase; }
.hex::placeholder { font-family: var(--sans); text-transform: none; }
.crow { padding: 14px 0; border-bottom: 1px solid var(--line); }
.crow:first-child { border-top: 1px solid var(--line); }
.crow > label { display: block; font-weight: 600; margin: 0 0 8px; }
.swatch-box { margin-top: 16px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sw { width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--line-strong); cursor: pointer; padding: 0; transition: transform .12s; }
.sw:hover { transform: translateY(-2px); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.seg button { background: none; border: 0; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.cprev { margin-top: 16px; border-radius: 4px; padding: 14px; border: 1px solid var(--line); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.cprev .pill { border-radius: 4px; padding: 8px 16px; font-weight: 620; font-size: 14px; }

/* uploads (photos + logo + files) */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.slots.one { grid-template-columns: minmax(0, 320px); }
.slot { border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; transition: border-color .15s, background .15s; }
.slot.has { border-color: var(--line-strong); }
.slot.drag { border-color: var(--accent); background: var(--accent-soft); }
.slot-media { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--bg-deep); color: var(--muted); cursor: pointer; font-size: 14px; text-align: center; padding: 8px; position: relative; overflow: hidden; }
.slot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot.logo .slot-media img { object-fit: contain; padding: 14px; background: #fff; }
.slot input.sr:focus-visible + .slot-media { outline: 2px solid var(--accent); outline-offset: -2px; }
.slot-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.slot-empty .ico { width: 24px; height: 24px; color: var(--muted); }
.slot-state { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); }
.slot-foot { display: flex; align-items: center; gap: 4px 10px; padding: 9px 10px; font-size: 14px; flex-wrap: wrap; }
.slot-l { font-weight: 500; flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.slot-l .ok { color: var(--pine); vertical-align: -3px; margin-right: 4px; }
.mini { background: none; border: 0; color: var(--accent); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 3px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mini:hover { text-decoration-color: currentColor; }
.mini.rmv { color: var(--muted); }
.slot-err { color: var(--danger); font-size: 13px; padding: 0 10px 9px; }
.slot-err:empty { display: none; }
.slot.bad { border-color: var(--danger); }
.slot-cap { padding: 0 10px 10px; }
.slot-cap label { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.slot-cap .field + label { margin-top: 8px; }
.slot-cap .field { font-size: 16px; padding: 8px 10px; min-width: 0; }
@media (max-width: 560px) { .slots:not(.one) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
/* On a phone a photo that is up spans the row, so its "What is it?" and caption boxes show their whole hint. */
@media (max-width: 560px) { .slots:not(.one) .slot.has { grid-column: 1 / -1; } .slots:not(.one) .slot.has .slot-media { aspect-ratio: 3 / 2; } }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; padding: 24px 14px; border: 1.5px dashed var(--line-strong); border-radius: 4px; background: transparent; color: var(--muted); text-align: center; cursor: pointer; font-size: 15px; transition: border-color .15s, background .15s; }
.drop .ico { width: 24px; height: 24px; color: var(--muted); }
.drop strong { color: var(--ink); font-weight: 600; }
.drop.drag, .drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.drop.drag .ico, .drop:hover .ico { color: var(--accent); }
input.sr:focus-visible + .drop { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop.off { cursor: default; opacity: .6; }
.drop.off:hover { border-color: var(--line-strong); background: transparent; }
.up-hint { color: var(--muted); font-size: 13px; margin-top: 10px; }
.ideas-l { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.ideas-l .ico { display: none; }
.ideas-l strong { color: var(--ink); }
/* the photo step's shot list and the phone hand-off */
.shots { border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px 6px; margin: 0 0 16px; background: var(--card); }
.shots-h { font-size: 14.5px; color: var(--muted); margin: 0 0 8px; }
.shots-h .ico { display: none; }
.shots-h strong { color: var(--ink); }
.shot-ul { list-style: none; margin: 0; padding: 0; display: grid; }
.shot { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.shot-ck { display: inline-flex; color: var(--faint); flex: none; }
.shot.done .shot-ck { color: var(--pine); }
.shot-t { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.shot-t strong { font-weight: 500; }
.shot-t small { display: block; color: var(--muted); font-size: 13px; }
.shot .mini { flex: none; white-space: nowrap; }
.shot-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.stockreq { margin-top: 20px; }
.stockreq > label { display: block; font-weight: 600; margin: 0 0 6px; }
.stock-row { display: flex; gap: 8px; }
.stock-row .field { flex: 1; min-width: 0; font-size: 16px; }
.stock-row .btn { flex: none; }
.stock-ul { list-style: none; margin: 8px 0 0; padding: 0; }
.stock-ul li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.stock-ul li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.stock-ul li .ico { color: var(--muted); flex: none; }
.phone-box { margin: 0 0 16px; }
.phone-panel { display: flex; gap: 20px; align-items: flex-start; margin-top: 12px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--card); }
.phone-panel[hidden] { display: none; }
.phone-panel .qr { width: 180px; height: 180px; flex: none; image-rendering: pixelated; background: #fff; border-radius: 2px; }
.phone-copy { font-size: 14.5px; min-width: 0; }
.phone-copy p { margin: 6px 0; color: var(--muted); }
.phone-status { display: flex; gap: 8px; align-items: center; color: var(--ink) !important; }
.phone-status .ico { color: var(--pine); }
@media (max-width: 560px) { .phone-panel { flex-direction: column; } }
.pnotes { margin-top: 20px; }
.pnotes label { display: block; font-weight: 600; margin: 0 0 6px; }
.pnotes textarea.field { min-height: 90px; font-size: 16px; }
.fchip { display: inline-flex; gap: 6px; align-items: center; background: var(--bg-deep); color: var(--ink); border-radius: 3px; padding: 6px 10px; font-size: 13px; max-width: 100%; }
.fchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.flist:empty { display: none; }
.frow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 9px 12px; background: var(--card); font-size: 14px; }
.frow.has .ico { color: var(--pine); }
.frow .ico { color: var(--muted); flex: none; }
.frow .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow .fs { color: var(--muted); font: 12.5px var(--mono); flex: none; }
.frow.bad { border-color: var(--danger); flex-wrap: wrap; }
.frow.bad .ico { color: var(--danger); }
.frow .fe { color: var(--danger); font-size: 13px; flex: 1 1 100%; }

/* additional sections */
.sx-list { display: grid; gap: 12px; }
.sx { border: 1px solid var(--line); border-radius: 4px; padding: 12px 16px 16px; background: var(--card); min-width: 0; }
.sx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sx-n { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sx label { display: block; font-size: 14px; color: var(--muted); margin: 12px 0 5px; }
.sx .field { font-size: 16px; padding: 11px 12px; }
.sx textarea.field { min-height: 90px; }
.sx-full { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.note-box { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-deep); border-radius: 4px; padding: 12px 14px; font-size: 14.5px; color: var(--ink); margin: 14px 0 0; max-width: 62ch; }
.note-box .ico { color: var(--muted); margin-top: 3px; }
.note-box.warm { background: var(--ember-soft); }
.note-box.warm .ico { color: var(--ember); }
.note-box a { color: var(--ink); }
.note-box.shots-priv { margin: 0 0 14px; }
.incl { list-style: none; padding: 0; margin: 14px 0 2px; display: grid; font-size: 15.5px; border-top: 1px solid var(--line); max-width: 62ch; }
.incl li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.incl li .ico { color: var(--pine); margin-top: 4px; }
.field.date { max-width: 240px; font-family: var(--mono); font-size: 16px; }
.rev { display: inline-block; font: 500 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--ember); vertical-align: 1px; white-space: nowrap; margin-left: 6px; }

/* domain */
.dm-row { display: flex; gap: 8px; margin-top: 14px; }
.dm-row .field { flex: 1; min-width: 0; }
.dm-row .btn { min-width: 96px; justify-content: center; }
.dm-out { margin-top: 10px; font-size: 15px; display: flex; gap: 8px; align-items: flex-start; }
.dm-out:empty { display: none; }
.dm-out .ico { margin-top: 3px; }
.dm-out.ok .ico { color: var(--pine); }
.dm-out.no .ico, .dm-out.err .ico { color: var(--danger); }
.dm-out > span:not(.dots) { min-width: 0; overflow-wrap: anywhere; }
.sugs { display: grid; gap: 6px; margin-top: 8px; }
.sug { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line-strong); border-radius: 4px; padding: 10px 14px; cursor: pointer; font-size: 15px; color: var(--ink); }
.sug:hover { border-color: var(--ink); }
.sug small { color: var(--accent); font: 500 12.5px var(--mono); }
.sug span { min-width: 0; overflow-wrap: anywhere; }

/* Under the first question (there is no welcome screen since 2026-10-28): the small print, below Continue. */
.first-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.first-foot .pay-note { margin: 0; color: var(--ink); font-weight: 500; }
.first-foot .save-note { margin-top: 12px; }
.co .leave-note { margin: 14px 0 0; }
.save-note { margin-top: 26px; max-width: 62ch; font-size: 14px; color: var(--ink); }
.thinking { display: flex; align-items: center; gap: 14px; color: var(--muted); }
.thinking strong { color: var(--ink); font-weight: 600; }
/* busy: a small plain spinner (the old three bouncing dots read as a chatbot typing) */
.dots { display: inline-block; width: 16px; height: 16px; flex: none; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; }
.dots i { display: none; }
.thinking .dots { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .dots { animation: none; border-top-color: var(--line-strong); border-right-color: var(--accent); } }
/* waiting on the planner: a thin bar that slides along (still, at half strength, under reduced motion) */
.busy-line { position: relative; height: 2px; max-width: 360px; background: var(--line); overflow: hidden; margin-top: 26px; }
.busy-line i { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: var(--accent); animation: busy 1.5s ease-in-out infinite; }
@keyframes busy { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .busy-line i { animation: none; left: 0; width: 100%; opacity: .45; } }
.wait-note { color: var(--muted); font-size: 14.5px; margin: 12px 0 0; }
.think-steps { list-style: none; padding: 0; margin: 24px 0 0; font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); max-width: 62ch; }
.think-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.think-steps .n { font: 500 12.5px var(--mono); color: var(--faint); letter-spacing: .04em; }
.think-steps .n .ico { color: var(--pine); }
.think-steps li.now { color: var(--ink); font-weight: 500; }
.think-steps li.now .n { color: var(--ember); }

/* the plan panel: a sheet of notes beside the questions */
.bp { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding: 24px 22px; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 6px; }
.bp h2 { font-size: 22px; line-height: 1.2; }
.bp h2 .ico { display: none; }
.bp .sub { color: var(--muted); font-size: 14px; margin: 4px 0 0; overflow-wrap: anywhere; }
.bp-group { margin-top: 22px; }
.bp-group h3 { font: 500 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.bp-group h3 .n { color: var(--ember); font: inherit; }
.rs { padding: 12px 0; margin-top: 16px; font-size: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rs .rs-h { display: flex; gap: 10px; align-items: flex-start; }
.rs .rs-h .ico { color: var(--pine); margin-top: 3px; }
.rs .rs-h .dots { margin-top: 2px; }
.rs details { margin-top: 6px; padding-left: 25px; }
.rs summary { cursor: pointer; color: var(--accent); font-weight: 500; font-size: 13.5px; }
.rs ul { margin: 6px 0 0; padding-left: 16px; color: var(--muted); }
.rs li { margin: 3px 0; overflow-wrap: anywhere; }
.rs a { color: var(--ink); }
.rs li a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.item { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.item:first-of-type { border-top: 0; }
.item .t { font-weight: 500; display: flex; gap: 8px; align-items: flex-start; }
.item .t .ico { color: var(--pine); margin-top: 3px; }
.item .t > span { min-width: 0; overflow-wrap: anywhere; }
.item .w { color: var(--muted); font-size: 13px; margin: 2px 0 0 23px; display: flex; align-items: center; }
.item.sug .t { color: var(--muted); font-weight: 400; }
.item.sug .t .ico { display: none; }
.pill-s { font: 500 11px/1.6 var(--mono); color: var(--ember); margin-left: auto; white-space: nowrap; }
.meter { display: inline-block; width: 40px; height: 3px; background: var(--line); overflow: hidden; margin-right: 8px; flex: none; }
.meter i { display: block; height: 100%; background: var(--pine); }
.declined { color: var(--muted); font-size: 13.5px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.note-l { font-size: 14px; padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink); }
.note-l:first-of-type { border-top: 0; }
.empty { color: var(--muted); font-size: 14px; }
.bp-toggle { display: none; }
@media (max-width: 979px) {
  .bp { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 78vh; border-radius: 8px 8px 0 0; border-width: 1px 0 0; z-index: 40; transform: translateY(105%); transition: transform .28s ease; box-shadow: var(--pop); padding-bottom: 88px; }
  .bp.open { transform: none; }
  .bp-toggle { display: inline-flex; position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 50; box-shadow: var(--pop); white-space: nowrap; background: var(--night); color: var(--cream); }
  .bp-toggle:hover { background: #16273c; }
}

/* the running total and the checkout summary: a rate card with dot leaders, prices in mono */
.tot-r, .sum .r { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tot-r > span:first-child:not(:only-child), .sum .r > span:first-child:not(:only-child) { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.tot-r > span:first-child:not(:only-child)::after, .sum .r > span:first-child:not(:only-child)::after { content: ""; flex: 1 1 16px; min-width: 16px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.tot-r > span:last-child:not(:only-child) { font: 14px var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sum .r > span:last-child:not(:only-child) { font-variant-numeric: tabular-nums; text-align: right; max-width: 55%; }   /* a long note on the right ("Ryan helps you pick one...") left the label one letter wide on phones */
.tot-r { font-size: 14px; padding: 5px 0; }
.tot-r span:first-child { color: var(--muted); }
.tot-r b { color: var(--ink); font-weight: 600; }
.tot-m { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* plan (final) */
.spec h1 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 12px; }
.spec h2 { font-size: 23px; margin: 38px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.spec h2 .ico { display: none; }
.spec h3 { font-size: 18px; margin: 22px 0 6px; }
.spec dl { display: grid; grid-template-columns: minmax(130px, 32%) 1fr; margin: 8px 0 0; font-size: 15px; border-bottom: 1px solid var(--line); }
.spec dt, .spec dd { padding: 9px 0; border-top: 1px solid var(--line); }
.spec dt { color: var(--muted); padding-right: 14px; }
.spec dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 560px) { .spec dl { grid-template-columns: 1fr; } .spec dd { border-top: 0; padding-top: 0; } }
.spec ol, .spec ul.plain { margin: 0; padding-left: 22px; }
.spec ol li, .spec ul.plain li { margin: 6px 0; overflow-wrap: anywhere; }
.spec ol li::marker { font: 500 13px var(--mono); color: var(--ember); }
.spec li span.m { color: var(--muted); font-size: 14px; }
.sx-desc { white-space: pre-line; overflow-wrap: anywhere; color: var(--muted); font-size: 14px; margin-top: 2px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.price-line { background: var(--bg-deep); border-radius: 4px; padding: 16px 18px; margin-top: 34px; font-size: 15.5px; max-width: 66ch; }
.price-line .ico { display: none; }

/* checkout */
.co h2 { font-size: 21px; margin: 34px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.co h2 .ico { display: none; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.sum { border: 1px solid var(--line); border-radius: 4px; padding: 6px 18px; margin-top: 14px; background: var(--card); }
.sum .r { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sum .r:last-child { border-bottom: 0; }
.sum .r .m { color: var(--muted); font-size: 13.5px; display: block; }
.sum .tot { font-weight: 620; font-size: 17px; border-top: 1px solid var(--ink); border-bottom-color: var(--line); margin-top: -1px; }
.sum .tot > span:last-child { font-size: 16.5px; font-weight: 600; }
.form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form2 { grid-template-columns: 1fr; } }
.fl label { display: block; font-size: 14px; color: var(--muted); margin: 0 0 5px; }
.fl .field { font-size: 16px; padding: 11px 12px; }
.fl.full { grid-column: 1 / -1; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signed { display: flex; gap: 10px; align-items: center; background: var(--bg-deep); border-radius: 4px; padding: 11px 14px; font-size: 15px; }
.signed .ico { color: var(--pine); }
.tos { font-size: 13.5px; color: var(--muted); margin-top: 18px; }
.tos a { color: var(--ink); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--night); color: var(--cream); padding: 11px 18px; border-radius: 4px; font-size: 14px; z-index: 60; box-shadow: var(--pop); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: var(--flash); } 100% { background: transparent; } }

/* save to a login: the header buttons, the dialog, saved plans */
.top-r { display: flex; align-items: center; gap: 16px; min-width: 0; }
#topActs { display: flex; align-items: center; gap: 8px; }
/* The "Ask a question" honeypot: off screen, never focused; only a form-filling bot types in it. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.topbtn { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--cream); border: 1px solid var(--night-line); border-radius: 4px; padding: 7px 12px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.topbtn:hover { border-color: var(--cream-soft); }
.topbtn .ico { color: var(--sky); width: 16px; height: 16px; }
.topbtn.saved { background: rgba(125, 211, 252, .12); border-color: transparent; }
.topbtn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (max-width: 760px) { .brand-sub { display: none; } }
@media (max-width: 560px) { .top { padding: 0 16px; gap: 10px; } .topbtn { padding: 8px 10px; } .topbtn .lbl { display: none; } }
@media (max-width: 400px) { .stage-tag > span:first-child { display: none; } }
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(14, 26, 43, .55); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--pop); border-color: transparent; padding: 30px; }
@media (max-width: 560px) { .modal { padding: 24px 20px; } }
.md-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-color: transparent; }
.md-x:hover { color: var(--ink); border-color: var(--line-strong); }
.md-title { font-size: 26px; line-height: 1.2; margin: 0 44px 8px 0; overflow-wrap: anywhere; }
.modal .sec { margin-right: 44px; }
.modal .fl { margin-top: 14px; }
.modal .q-help strong { color: var(--ink); overflow-wrap: anywhere; }
.modal .hint { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.modal .nav { margin-top: 22px; }
.modal .gbox { max-width: 400px; min-height: 44px; margin-top: 16px; }
.first-foot #bookmarkHow .note-box { margin: 10px 0 0; }
.first-foot .reopen { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.first-foot .reopen .link { padding: 0; }
.first-foot .reopen a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.first-foot .reopen a:hover { color: var(--ink); text-decoration-color: currentColor; }
.plans-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.plans-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.plans-list .pl { flex: 1; min-width: 0; }
.plans-list .pl-t { font-weight: 600; overflow-wrap: anywhere; }
.plans-list .pl-m { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.plans-list .btn { padding: 9px 14px; flex: none; }
#rcCodeBox { color: #1c2b3a; }
.fl-pre { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.fl-pre .ico { color: var(--pine); }
.fld .nav .link { padding-left: 0; }
.pick-cat { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }

/* Plan together ("Plan with Ryan"): the line under the night bar (on every page of the owner's planner since 2026-10-28:
   the code to read Ryan and a link to book a call), the code in the dialog,
   and a small label on the field the other person is in. Words, a dot, nothing that blinks. */
.live-bar { position: sticky; top: 60px; z-index: 19; display: flex; align-items: center; gap: 12px; padding: 9px 24px; background: var(--bg-deep); border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.live-bar .live-msg { flex: 1; min-width: 0; }
.live-bar .code { font: 600 15px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.live-bar .link { padding: 4px 2px; flex: none; }
.live-bar .live-msg a { color: var(--ink); white-space: nowrap; text-underline-offset: 3px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ember); }
.live-bar.on .live-dot { background: var(--pine); }
@media (max-width: 560px) { .live-bar { padding: 8px 16px; font-size: 14px; } }
.live-code { font: 600 40px/1.1 var(--mono); letter-spacing: .12em; margin: 14px 0 6px; color: var(--ink); }
.fld.peer-here, .fl.peer-here { position: relative; }
.fld.peer-here .field, .fl.peer-here .field { border-color: var(--ember); }
.peer-tag { position: absolute; top: -2px; right: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--ember); background: var(--bg); padding: 2px 0 2px 8px; pointer-events: none; }

/* Ryan's tools on a live screen (only his page draws them): "Change this screen" under the questions, Rename / Required /
   Take out on each field. A working panel, so it reads as one: a dashed hairline box on the deeper paper. */
.ryan-tools { margin-top: 28px; padding: 16px 18px 12px; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--bg-deep); }
.rt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rt-head .sec { margin: 0; }
.rt-who { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); color: var(--faint); }
.rt-say { display: flex; gap: 8px; align-items: center; }
.rt-say .field { flex: 1; min-width: 0; }
.rt-say .btn { padding: 11px 18px; }
#rtMic.on { color: var(--ember); border-color: var(--ember); }
.rt-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; margin-top: 12px; }
.rt-ctl { display: flex; align-items: center; gap: 7px; padding: 7px 9px; font-size: 13.5px; text-align: left; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.rt-ctl .ico { color: var(--accent); }
.rt-ctl:hover { border-color: var(--line-strong); }
.rt-ctl.on { border-color: var(--accent); background: var(--accent-soft); }
.rt-pick { margin-top: 12px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; display: grid; gap: 6px; }
.rt-pick label { font-size: 13.5px; font-weight: 600; }
.rt-pick .nav { margin-top: 4px; }
.rt-req { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; }
.rt-off { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.rt-off .link { padding: 2px 4px; }
.rt-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.rt-msg .link { padding: 0 2px; }
.rt-ftools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.rt-ftools .rt-ren { flex: 1; min-width: 160px; padding: 7px 10px; font-size: 15px; }
.rt-tag { font: 500 11.5px/1 var(--mono); color: var(--ember); }
.rt-make { margin: 10px 0 0; }
.rt-make .link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; color: var(--accent); }
@media (max-width: 560px) { .ryan-tools { padding: 14px 12px 10px; } .rt-say { flex-wrap: wrap; } .rt-say .field { flex-basis: 100%; } }

/* The picture maker: a panel that floats over the page (so it carries the one shadow), dragged by its header anywhere on
   the screen, folded to its header, or a bottom sheet on a phone. */
.studio { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(380px, calc(100vw - 32px)); max-height: min(78vh, 760px); display: flex; flex-direction: column; background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: var(--pop); }
.st-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; }
.st-head > .ico { color: var(--faint); }
.st-title { font: 600 15px/1.2 var(--serif); flex: 1; }
.st-count { font: 500 12px/1 var(--mono); color: var(--faint); }
.st-btn { width: 32px; height: 32px; border-color: transparent; }
.st-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.st-body { padding: 12px 14px 14px; overflow-y: auto; display: grid; gap: 8px; }
.studio.min .st-body { display: none; }
.studio.min { width: auto; }
.st-for { margin: 0; font: 500 12px/1.4 var(--mono); color: var(--ember); }
.st-l { font-size: 13.5px; font-weight: 600; }
.studio textarea.field { font-size: 15px; resize: vertical; min-height: 92px; }
.st-row { display: flex; align-items: center; gap: 10px; }
.st-k { font: 500 12px/1 var(--mono); color: var(--faint); width: 56px; flex: none; }
.st-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.st-chip { padding: 5px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--ink); cursor: pointer; }
.st-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.st-go { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.st-go .btn { padding: 10px 16px; font-size: 15px; flex: none; white-space: nowrap; }
.st-msg, .st-watch { font-size: 13.5px; color: var(--muted); margin: 0; }
.st-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.st-strip:empty { display: none; }
.st-gen { margin: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.st-gen.from { border-color: var(--ember); }
.st-gen img, .st-wait { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.st-gen.logo img { object-fit: contain; padding: 8px; background: repeating-conic-gradient(var(--bg-deep) 0 25%, var(--card) 0 50%) 0 0 / 14px 14px; }
.st-wait { display: grid; place-items: center; color: var(--faint); font: 500 12px var(--mono); }
.st-gen figcaption { padding: 6px 8px 0; font-size: 12.5px; color: var(--muted); }
.st-p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-used { display: inline-flex; align-items: center; gap: 4px; color: var(--pine); font-weight: 600; margin-right: 4px; }
.st-acts { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px; flex-wrap: wrap; }
.st-acts .mini { display: inline-flex; align-items: center; }
@media (max-width: 560px) {
  .studio { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100%; max-height: 70vh; border-radius: 6px 6px 0 0; }
  .st-head { cursor: default; }
}
/* The mic is not a delete button: no danger red on hover. */
#rtMic:hover { color: var(--ink); border-color: var(--line-strong); }
.st-wait .dots { margin: auto; }
/* Folded, the picture maker is a small tab above the client's "Your plan" button on phones and tablets. */
@media (max-width: 979px) {
  .studio.min { left: auto !important; right: 12px !important; top: auto !important; bottom: 76px !important; width: auto; border-radius: 6px; }
  .studio.min .st-head { cursor: pointer; }
}
/* A live deal (Plan with Ryan): Ryan's own price for one order. The checkout's one fixed hosting row, a waived line's
   usual price struck through, the client's price window (the checkout's .sum in a dialog), and Ryan's Set the deal
   panel (his page only). */
.opt.deal-fixed { cursor: default; margin-top: 14px; max-width: 460px; border-color: var(--accent); background: var(--accent-soft); }
.opt.deal-fixed:hover { border-color: var(--accent); }
.opt.deal-fixed .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sum .r .was, .tot-r .was { color: var(--faint); text-decoration: line-through; margin-right: 6px; font-weight: 400; }
.modal .sum { margin-top: 16px; }
.modal .sum .r { font-size: 14.5px; }
.deal-set .dl-lbl { font-size: 14px; color: var(--muted); margin: 18px 0 6px; }
.deal-set .money .field { padding-left: 28px; }   /* .fl .field would put the number under the $ */
.deal-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.deal-opts .opt { padding: 9px 12px; gap: 9px; font-size: 15px; }
.deal-opts + .fl { margin-top: 10px; }
.deal-lines { border-top: 1px solid var(--line); }
.deal-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.deal-row .dr-l { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.deal-row .dr-p { font: 13.5px var(--mono); color: var(--muted); white-space: nowrap; }
.deal-row .dr-now { display: block; font-size: 13px; color: var(--muted); }   /* "Your deal now waives 2" on a count line */
.deal-waive { flex: none; font-size: 14px; cursor: pointer; }
.modal .rt-who { margin: 2px 0 0; line-height: 1.4; }
@media (max-width: 560px) {
  .live-bar { flex-wrap: wrap; row-gap: 2px; }
  .live-bar .live-msg { min-width: 60%; }
  .deal-row { flex-wrap: wrap; row-gap: 2px; }
  .deal-row .dr-l { flex-basis: 100%; }
}

/* The checkout's code box (2026-10-20). */
.codebox { margin-top: 14px; }
.codebox label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.codebox-row { display: flex; gap: 8px; }
.codebox-row .field { flex: 1; min-width: 0; text-transform: uppercase; }
.codebox-msg { color: var(--muted); font-size: 13.5px; margin-top: 6px; min-height: 1em; }