/* Sunroom v2 — guide drawings, calculator, order card and Customize-form demo.
   Started from ../shared/measure-guide.css + ../shared/order.css (copied here so the other two
   directions keep their own). All controls are at least 44 px tall. Blue = do this / chosen, orange = not this / careful. */
:root { --g-ink: #1E2748; --g-muted: #4A5170; --g-frame: #F6C9A8; --g-glass: #EBF5FD; --g-tape: #FDEDB0; --g-yes: #2B4FA2; --g-no: #A3470A; --g-on-yes: #FFFFFF; --g-film: #FFFFFF; --g-water: #6FB8E8; }

.guide-svg { width: 100%; height: auto; display: block; overflow: visible; }
.guide-svg text { font: 700 16px/1 "Nunito", system-ui, sans-serif; fill: var(--g-ink); }
.guide-svg .g-small { font-size: 13.5px; font-weight: 600; fill: var(--g-muted); }
.g-frame { fill: var(--g-frame); stroke: var(--g-ink); stroke-width: 2; }
.g-glass { fill: var(--g-glass); }
.g-glass-o { fill: var(--g-glass); stroke: var(--g-ink); stroke-width: 2; }
.g-line { stroke: var(--g-ink); stroke-width: 1.5; fill: none; }
.g-yes-text { fill: var(--g-yes) !important; }
.g-no-text { fill: var(--g-no) !important; }

/* measure 1 · glass, not frame */
.g-tape { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1.6s ease-out .3s; }
.g-tape rect { fill: var(--g-tape); stroke: var(--g-yes); stroke-width: 1.5; }
.g-tape line { stroke: var(--g-ink); stroke-width: 1; }
.g-frame-measure { stroke: var(--g-no); stroke-width: 2.5; stroke-dasharray: 6 5; opacity: 0; transition: opacity .6s 2s; }
.g-fade { opacity: 0; transition: opacity .6s; }
.g-fade.d1 { transition-delay: 1.9s; }
.g-fade.d2 { transition-delay: 2.4s; }
.g-fade.d3 { transition-delay: 3s; }
.play .g-tape { transform: scaleX(1); }
.play .g-frame-measure, .play .g-fade { opacity: 1; }

/* measure 2 · longest side picks the tier */
.g-longest { stroke: var(--g-ink); stroke-width: 1.5; transition: stroke .4s .6s, stroke-width .4s .6s; }
.play .g-longest { stroke: var(--g-yes); stroke-width: 4; }
.g-tier rect { fill: #fff; stroke: var(--g-ink); stroke-width: 1.2; transition: fill .4s 2.4s; }
.g-tier text { transition: fill .4s 2.4s; }
.play .g-tier.hit rect { fill: var(--g-yes); }
.play .g-tier.hit text { fill: var(--g-on-yes); }
.g-marker { fill: var(--g-yes); transform: translateX(0); transition: transform 1.2s cubic-bezier(.3,1.4,.6,1) 1.2s; }
.play .g-marker { transform: translateX(120px); }

/* measure 3 · two pieces once the shorter side passes 46 in */
.g-seam { stroke: var(--g-ink); stroke-width: 3; stroke-dasharray: 8 6; opacity: 0; transition: opacity .5s; }
.g-split[data-dir="h"] .g-seam.h, .g-split[data-dir="v"] .g-seam.v { opacity: 1; }
.g-piece { opacity: 0; transition: opacity .4s; }
.g-split[data-dir="h"] .g-piece.h, .g-split[data-dir="v"] .g-piece.v { opacity: 1; }
.g-one { transition: opacity .4s; }
.g-split .g-one { opacity: 0; }
.g-two-t { opacity: 0; transition: opacity .4s; }
.g-split .g-two-t { opacity: 1; }

/* measure 4 · circle */
.g-diam { stroke: var(--g-yes); stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.2s .3s; }
.play .g-diam { stroke-dashoffset: 0; }

/* measure 5 · each pane on its own */
.g-pane { fill: var(--g-glass); stroke: var(--g-ink); stroke-width: 1; }
.play .g-pane { animation: g-pane .7s ease both; }
@keyframes g-pane { 0% { stroke: var(--g-ink); stroke-width: 1; } 50% { stroke: var(--g-yes); stroke-width: 4; } 100% { stroke: var(--g-yes); stroke-width: 2.5; } }

/* seam buttons */
.seam-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.seam-btns button { font: 800 14px/1 "Nunito", system-ui, sans-serif; padding: 8px 16px; min-height: 44px; border-radius: 999px; border: 2px solid var(--g-yes); background: #fff; color: var(--g-yes); cursor: pointer; }
.seam-btns button[aria-pressed="true"] { background: var(--g-yes); color: var(--g-on-yes); }

/* ---------- install drawings ---------- */
.g-film { fill: var(--g-film); stroke: var(--g-ink); stroke-width: 2; }
.g-film-frost { fill: #F4F6FA; stroke: var(--g-ink); stroke-width: 2; }
.g-liner { fill: #FFF4CF; stroke: var(--g-ink); stroke-width: 2; }
.g-drop { fill: var(--g-water); }
.g-tool { fill: var(--g-ink); }
.g-tool-blade { fill: var(--g-yes); }
.g-arrow { stroke: var(--g-yes); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 1 · spray + clean */
.i1 .g-drop { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .3s; }
.play.i1 .g-drop { opacity: 1; transform: none; }
.i1 .g-drop:nth-of-type(2) { transition-delay: .15s; } .i1 .g-drop:nth-of-type(3) { transition-delay: .3s; } .i1 .g-drop:nth-of-type(4) { transition-delay: .45s; } .i1 .g-drop:nth-of-type(5) { transition-delay: .6s; } .i1 .g-drop:nth-of-type(6) { transition-delay: .75s; } .i1 .g-drop:nth-of-type(7) { transition-delay: .9s; }
.i1 .g-wipe { transform: translateY(0); transition: transform 1.6s ease-in-out 1.3s; }
.play.i1 .g-wipe { transform: translateY(150px); }
.i1 .g-clean { transform-box: fill-box; transform-origin: top; transform: scaleY(0); transition: transform 1.6s ease-in-out 1.3s; }
.play.i1 .g-clean { transform: scaleY(1); }

/* 2 · peel the liner */
.i2 .g-peel { transform-box: fill-box; transform-origin: 100% 100%; transition: transform 1.8s cubic-bezier(.4,.1,.3,1) .4s; }
.play.i2 .g-peel { transform: translate(60px, 40px) rotate(14deg); }

/* 3 · wet both, slide into place */
.i3 .g-drop { opacity: 0; transition: opacity .3s; }
.play.i3 .g-drop { opacity: 1; }
.i3 .g-drop:nth-of-type(2n) { transition-delay: .25s; } .i3 .g-drop:nth-of-type(3n) { transition-delay: .5s; }
.i3 .g-slide { transform: translate(-150px, 18px) rotate(-4deg); transform-box: fill-box; transform-origin: center; transition: transform 1.8s cubic-bezier(.3,.9,.3,1) 1s; }
.play.i3 .g-slide { transform: none; }

/* 4 · squeegee from the center out */
.i4 .g-arrow { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s ease; }
.play.i4 .g-arrow { stroke-dashoffset: 0; }
.i4 .g-arrow.a2 { transition-delay: .9s; } .i4 .g-arrow.a3 { transition-delay: 1.8s; } .i4 .g-arrow.a4 { transition-delay: 2.7s; }
.i4 .g-sq { transform: translate(0, 0); transition: transform 1s ease-in-out .1s; }
.play.i4 .g-sq { animation: g-sq 3.6s ease-in-out both; }
@keyframes g-sq { 0% { transform: translate(0,0); } 22% { transform: translate(78px,0); } 25% { transform: translate(0,0); } 47% { transform: translate(-78px,0); } 50% { transform: translate(0,0); } 72% { transform: translate(0,-46px); } 75% { transform: translate(0,0); } 97%,100% { transform: translate(0,46px); } }
.i4 .g-drop { transition: opacity .5s; }
.play.i4 .g-drop { opacity: 0; transition-delay: 1.4s; }

/* 5 · trapped water fades within a week */
.i5 .g-bub { transform-box: fill-box; transform-origin: center; transition: transform 2.4s ease .6s, opacity 2.4s ease .6s; }
.play.i5 .g-bub { transform: scale(0); opacity: 0; }
.i5 .g-day { fill: #fff; stroke: var(--g-ink); stroke-width: 1.2; transition: fill .3s; }
.play.i5 .g-day { fill: var(--g-yes); }
.i5 .g-day:nth-of-type(1) { transition-delay: .4s; } .i5 .g-day:nth-of-type(2) { transition-delay: .8s; } .i5 .g-day:nth-of-type(3) { transition-delay: 1.2s; } .i5 .g-day:nth-of-type(4) { transition-delay: 1.6s; } .i5 .g-day:nth-of-type(5) { transition-delay: 2s; } .i5 .g-day:nth-of-type(6) { transition-delay: 2.4s; } .i5 .g-day:nth-of-type(7) { transition-delay: 2.8s; }

/* removal · peels away without residue */
.i6 .g-peel { transform-box: fill-box; transform-origin: 0 100%; transition: transform 2s cubic-bezier(.4,.1,.3,1) .4s, opacity .6s 2.2s; }
.play.i6 .g-peel { transform: translate(-30px, 40px) rotate(-22deg); opacity: 0; }

/* rainbow page · where the sun reaches */
.g-sunpath { stroke: #E0A100; stroke-width: 2; stroke-dasharray: 4 6; fill: none; }
.g-sun { fill: #F2B705; stroke: var(--g-ink); stroke-width: 1.5; }
.sun-anim .g-sunmove { offset-path: path("M 330 140 Q 180 340 30 140"); offset-rotate: 0deg; offset-distance: 0%; }
.play.sun-anim .g-sunmove { animation: g-sun 4.5s ease-in-out both; }
@keyframes g-sun { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.g-win { fill: #C9CEDD; stroke: var(--g-ink); stroke-width: 1.5; }
.g-win.lit { transition: fill .4s; }
.play .g-win.lit { fill: #F2B705; }
.g-win.e { transition-delay: .3s; } .g-win.s { transition-delay: 2.2s; } .g-win.w { transition-delay: 4.1s; }

/* ---------- calculator ---------- */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc label, .order-card label.fl { display: block; font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.calc input, .order-card input[type="number"], .order-card input[type="text"], .order-card select { font: 700 18px/1.2 "Nunito", system-ui, sans-serif; width: 100%; padding: 12px 14px; border: 2px solid var(--g-ink); border-radius: 14px; background: #fff; color: var(--g-ink); min-height: 50px; }
.calc input:focus, .order-card input:focus, .order-card select:focus { outline: 3px solid var(--g-yes); outline-offset: 2px; }
.calc-hint { font-size: 14px; color: var(--g-muted); margin: 10px 0 0; }
.calc .calc-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; font-weight: 800; cursor: pointer; }
.calc .calc-check input { width: 24px; height: 24px; padding: 0; margin: 0; flex: none; accent-color: var(--g-ink); }
.calc-row small { display: block; font-size: 13px; color: var(--g-muted); font-weight: 700; }
.calc-row small.calc-sun { color: var(--g-yes); }
.calc-out { margin-top: 18px; background: #EBF5FD; border-radius: 18px; padding: 16px 18px; }
.calc-out p { margin: 6px 0; }
.calc-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 0; border-top: 1px solid rgba(30,39,72,.18); }
/* every row the same shape: name | price, then the Amazon link on its own line (review p1) */
.calc-row { display: grid; grid-template-columns: 1fr auto; }
.calc-row .calc-buy { grid-column: 1 / -1; justify-self: start; }
.calc-row .price { font: 800 18px/1 "Bricolage Grotesque", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.calc-buy { font-weight: 800; display: inline-flex; align-items: center; min-height: 44px; }
.calc-sun { display: block; font-size: 13px; font-weight: 700; color: var(--g-yes); }
.calc input::placeholder, .order-card input::placeholder { color: #6B7178; font-weight: 600; opacity: 1; }
.calc-warn { color: var(--g-no); font-weight: 800; }
.calc-note { font-size: 14px; color: var(--g-muted); }

/* ---------- order card ---------- */
.order-card { background: #fff; color: var(--g-ink); border: 2px solid var(--g-ink); border-radius: 28px; padding: 22px; box-shadow: 0 6px 0 var(--g-ink); }
@media (min-width: 768px) { .order-card { padding: 32px; } }
.order-card h3 { margin-top: 0; }
.order-card fieldset { border: 2px solid rgba(30,39,72,.18); border-radius: 18px; padding: 14px 16px 16px; margin: 0 0 14px; min-width: 0; }
.order-card legend { font: 700 16px/1 "Bricolage Grotesque", system-ui, sans-serif; padding: 0 8px; }
.oc-film { display: flex; flex-wrap: wrap; gap: 10px; }
.oc-film label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; border: 2px solid var(--g-ink); border-radius: 999px; padding: 8px 16px 8px 12px; cursor: pointer; }
.oc-film label:has(input:focus-visible) { outline: 3px solid var(--g-yes); outline-offset: 3px; }
.oc-film label:has(input:checked) { background: var(--g-yes); color: #fff; border-color: var(--g-yes); }
.oc-film input { accent-color: #fff; width: 18px; height: 18px; margin: 0; }
.oc-film-line { display: none; }
.oc-wh { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.oc-wh > div { min-width: 0; }
.oc-wh label, .oc-seam label { display: block; font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.oc-seam { margin-top: 12px; }
.oc-circle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; cursor: pointer; }
.oc-circle input { width: 18px; height: 18px; accent-color: var(--g-yes); }
.oc-remove, .oc-add, .oc-copy, .oc-copy-all, .oc-print { font: 800 15px/1 "Nunito", system-ui, sans-serif; border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; border: 2px solid var(--g-yes); background: #fff; color: var(--g-yes); }
.oc-remove:hover, .oc-add:hover, .oc-copy:hover, .oc-copy-all:hover, .oc-print:hover { background: #EBF5FD; }
.oc-remove { margin-top: 12px; border-color: var(--g-no); color: var(--g-no); }
.oc-copy { padding: 6px 16px; min-height: 44px; font-size: 14px; }
.oc-manual { display: block; width: 100%; min-height: 160px; margin-top: 12px; font: 600 14px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--g-ink); border: 2px solid var(--g-ink); border-radius: 14px; padding: 10px 12px; background: #FFF4CF; }
.oc-out { margin-top: 18px; }
.oc-item { border-top: 2px solid var(--g-ink); padding-top: 12px; margin-top: 12px; }
.oc-item h4 { margin: 0 0 6px; font-size: 18px; }
.oc-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(30,39,72,.18); }
.oc-label { grid-column: 1 / -1; font-size: 14px; color: var(--g-muted); font-weight: 600; }
.oc-value code { font: 700 17px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--g-ink); word-break: break-word; background: #FFF4CF; padding: 2px 8px; border-radius: 6px; }
.oc-price { font-weight: 800; margin-left: 8px; }
.oc-total { margin-top: 16px; background: #EBF5FD; border-radius: 18px; padding: 14px 18px; }
.oc-total p { margin: 4px 0; }
.oc-hint { font-size: 14px; color: var(--g-muted); }
.oc-warn { color: var(--g-no); font-weight: 800; }
.oc-rainbow-note { font-weight: 800; color: var(--g-yes); display: flex; gap: 8px; align-items: center; }
.oc-rainbow-note[hidden] { display: none; }
.oc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.oc-buy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: var(--g-yes); color: #fff; font: 700 16px/1.2 "Bricolage Grotesque", system-ui, sans-serif; text-decoration: none; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--g-ink); box-shadow: 0 3px 0 var(--g-ink); }
.oc-buy:hover { background: #1E3A7B; color: #fff; }
.oc-clip { position: fixed; left: -9999px; top: 0; }
.oc-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media print {
  body * { visibility: hidden; }
  #order-card, #order-card * { visibility: visible; }
  #order-card { position: absolute; left: 0; top: 0; width: 100%; border: 1px solid #000; box-shadow: none; }
  .oc-noprint, .oc-actions, .order-card fieldset { display: none !important; }
}

/* ---------- drawn Customize form (order-on-amazon.html) ---------- */
.form-demo { margin: 0; }
.fd-form { background: #fff; color: #1F2328; border: 2px dashed var(--g-muted); border-radius: 16px; padding: 18px; font: 400 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
.fd-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-muted); margin-bottom: 8px; }
.fd-head { font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.fd-step { border: 2px solid transparent; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; transition: border-color .3s, background-color .3s; }
.fd-step.fd-active, .fd-cart.fd-active { border-color: var(--g-yes); background: #EBF5FD; }
.fd-label { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.fd-select, .fd-input { border: 1px solid #6B7178; border-radius: 6px; padding: 7px 10px; min-height: 36px; background: #fff; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fd-select::after { content: "▾"; color: #4A4F55; }
.fd-input.fd-note { min-height: 30px; }
.fd-opts { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fd-opt { border: 1px solid #6B7178; border-radius: 6px; padding: 3px 8px; font-size: 13px; transition: background-color .3s, color .3s; }
.fd-opts.fd-col { flex-direction: column; }
.fd-opt.fd-pick { background: var(--g-yes); color: var(--g-on-yes); border-color: var(--g-yes); }
.fd-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--g-yes); margin-left: 1px; animation: fd-blink 1s steps(1) infinite; }
.fd-typed { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; }
.fd-cart { margin-top: 10px; border: 2px solid #6B7178; border-radius: 999px; padding: 8px 14px; text-align: center; font-weight: 700; transition: border-color .3s, background-color .3s; }
@keyframes fd-blink { 50% { opacity: 0; } }
.fd-controls { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 14px; }
.fd-controls label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.fd-controls select { font: inherit; font-size: 15px; padding: 6px 10px; min-height: 44px; border-radius: 10px; border: 2px solid var(--g-ink); background: #fff; color: var(--g-ink); }
#fd-msg { font-size: 15px; color: var(--g-ink); min-height: 1.4em; margin: 10px 0 0; }
.form-demo figcaption { font-size: 14px; color: var(--g-muted); margin-top: 12px; }

.order-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: os; }
.order-steps li { counter-increment: os; background: #fff; border: 2px solid var(--g-ink); border-radius: 20px; padding: 16px 18px 16px 64px; position: relative; }
.order-steps li::before { content: counter(os); position: absolute; left: 16px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--g-ink); color: #fff; display: grid; place-items: center; font: 800 16px/1 "Bricolage Grotesque", system-ui, sans-serif; }
.order-steps strong { display: block; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; margin-bottom: 4px; }

/* reduced motion: end state, no movement */
@media (prefers-reduced-motion: reduce) {
  [data-guide] *, [data-guide] { transition: none !important; animation: none !important; }
  [data-guide] .g-pane { stroke: var(--g-yes); stroke-width: 2.5; }
  .play.i4 .g-sq { transform: translate(0, 46px); }
  .play.sun-anim .g-sunmove { offset-distance: 50%; }
  .fd-step, .fd-cart, .fd-opt { transition: none; }
  .fd-caret { animation: none; }
}
.oc-buy .i { width: 18px; height: 18px; }

/* order card: French-door pane switch, pane count, listing line (2026-10-30, French-door round) */
.oc-checks { display: flex; flex-wrap: wrap; gap: 0 20px; }
.oc-count { margin-top: 12px; max-width: 220px; }
.oc-count label { display: block; font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.order-card .oc-count input { width: 100%; }
.oc-listing { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.oc-listing a { font-weight: 800; }

/* ---------- Which-film chooser (guides/which-film/): shown only with JS (which-film.js removes hidden) */
.chooser fieldset { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chooser legend { font-weight: 800; margin-bottom: 8px; padding: 0; width: 100%; }
.chooser label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; border: 2px solid var(--navy); border-radius: 999px; padding: 8px 16px 8px 12px; cursor: pointer; background: var(--white); }
.chooser label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.chooser label:has(input:checked) { background: var(--blue); color: #fff; border-color: var(--blue); }
.chooser input { accent-color: #fff; width: 18px; height: 18px; margin: 0; }
.chooser-out { border-top: 2px dashed var(--line); padding-top: 16px; }
.chooser-out .verdict { font-family: var(--display); font-weight: 800; font-size: var(--fs-h4); margin-bottom: 8px; }
.chooser-out .verdict.yes { color: var(--blue); }
.chooser-out .verdict.careful { color: var(--orange); }
.chooser-out .btn-row { margin-top: 12px; }
.fact .icon-dot .i.yes { color: var(--blue); }
.fact .icon-dot .i.no { color: var(--orange); }

/* Tape-measure input (review M1): the parsed value under each size box */
.calc-parsed, .oc-parsed { display: block; min-height: 1.4em; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--navy-2); }
/* Must-say facts box next to the buy links (review M2) */
.note.honest { margin-top: 16px; }