/* The order page (/tilaa/, /en/order/), on top of public/ink.css: one plain form in four parts. Each part is a row
   across the 12-column grid: its heading on the left (columns 1-4, held in view while the part scrolls), the fields
   on the right (5-12). The price and the button sit in a bar that sticks to the bottom of the screen and comes to
   rest under the last part. No scroll moments. Pink is what you picked and the way on; greys carry the rest.
   Shown only for some answers, by CSS (:has), so it works before the script: the trades (not online yet) and the
   system's name (already have it). No inline styles anywhere: the CSP forbids them. */

html:has(body.of) { scroll-padding: 2rem 0 7rem; }
.of { --err: #ff9ab5; --err-line: #ff7a9c; }
.of input, .of textarea { caret-color: var(--pink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- the title, and the one line under it ---- */
.of-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  padding: clamp(7rem, 18vh, 11rem) var(--gut) clamp(2.5rem, 6vh, 4.5rem); }
.of-head h1 { grid-column: 1 / 5; margin: 0; font-size: clamp(2.1rem, 3.6vw, 4.3rem); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.of-head p { grid-column: 5 / 12; margin: 0; color: var(--ink-2); font-size: clamp(1.05rem, 1.3vw, 1.35rem); line-height: 1.55; max-width: 40rem; }

/* ---- a part: heading left, fields right ---- */
.of-form { position: relative; }
.of-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.5rem;
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--gut); border-top: 1px solid var(--line); }
.of-sec > h2 { grid-column: 1 / 5; align-self: start; position: sticky; top: 1.5rem; margin: 0; font-size: clamp(1.5rem, 2vw, 2.3rem); line-height: 1.1; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
.of-body { grid-column: 5 / 13; min-width: 0; }
:where(.of) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.of) legend { padding: 0; }

/* the choices are real radios and checkboxes, drawn by their labels */
.of input[type="radio"], .of input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.of label:has(> input:is([type="radio"], [type="checkbox"])) { cursor: pointer; }
.of label:has(> input:is([type="radio"], [type="checkbox"]):focus-visible) { outline: 2px solid var(--pink); outline-offset: 4px; border-radius: 4px; }

/* ---- fields: a line to write on, the label above ---- */
.of-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.of-field > label { color: var(--ink-2); font-size: .92rem; }
.of-field input, .of-field textarea, .of-sys input { width: 100%; padding: .5rem 0; background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; color: var(--ink);
  font: inherit; font-size: 1.1rem; transition: border-color .2s; }
.of-field textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; field-sizing: content; }
.of-field input:focus, .of-field textarea:focus, .of-sys input:focus { outline: none; border-color: var(--pink); }
.of input::placeholder, .of textarea::placeholder { color: #6b686c; }
.of [aria-invalid="true"] { border-bottom-color: var(--err-line) !important; }
.of-note { margin: .3rem 0 0; color: var(--ink-3); font-size: .9rem; line-height: 1.5; max-width: 44rem; }
.of-opt { color: var(--ink-3); }
.of-err { margin: .35rem 0 0; color: var(--err); font-size: .95rem; line-height: 1.45; }
.of-err[hidden] { display: none; }

/* ---- 0. the path: a website for a business or a site for creative work, side by side; the name big, the price and time
   under it ---- */
.of-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 3vw, 4.5rem); }
.of-path { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .9rem; row-gap: .35rem; color: var(--ink-2); cursor: pointer; transition: color .2s; }
.of-path::before { content: ""; width: 1rem; height: 1rem; box-sizing: border-box; border-radius: 50%; background: #000; border: 1.5px solid var(--ink-2); transition: background-color .2s, border-color .2s, box-shadow .2s; }
.of-path-n { font-size: clamp(1.3rem, 2vw, 2.2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.of-path-l { grid-column: 2; color: var(--ink-3); font-size: .95rem; font-variant-numeric: tabular-nums; }
.of-path:has(input:checked) { color: var(--ink); }
.of-path:has(input:checked)::before { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 0 4px rgba(228, 95, 155, .18); }
/* words and parts that belong to one path: the other path's are hidden (site/store.mjs, two() and section(…, only)) */
.of:not(:has(input[name="path"][value="creative"]:checked)) .only-creative,
.of:has(input[name="path"][value="creative"]:checked) .only-biz { display: none !important; }

/* ---- 1. the current site: the question big, its line under it; or not online yet, and then the trade ---- */
.of-f-link > label { color: var(--ink); font-size: clamp(1.15rem, 1.5vw, 1.6rem); letter-spacing: -.015em; }
.of-f-link input { font-size: clamp(1.3rem, 2.1vw, 2.4rem); letter-spacing: -.02em; padding: .35rem 0 .45rem; max-width: 52rem; }
.of-f-link { transition: opacity .25s; }
.of-sivut:has([name="noLink"]:checked) .of-f-link { opacity: .35; }
.of-check { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.6rem; color: var(--ink-2); font-size: 1rem; }
.of-check:has(input:checked) { color: var(--ink); }
.of-box { flex: none; position: relative; width: 1.05rem; height: 1.05rem; border: 1.5px solid var(--ink-2); border-radius: 3px; transition: background-color .2s, border-color .2s; }
.of-box::after { content: ""; position: absolute; left: .29rem; top: .08rem; width: .27rem; height: .54rem; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
input:checked + .of-box { background: var(--pink); border-color: var(--pink); }
input:checked + .of-box::after { transform: rotate(45deg) scale(1); }
.of-trades { display: none; margin-top: 1.8rem; }
.of-sivut:has([name="noLink"]:checked) .of-trades { display: block; }
.of-trades > legend { margin-bottom: .9rem; color: var(--ink); font-size: 1.05rem; }
.of-trade-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .55rem 2rem; max-width: 60rem; }

/* a round choice: a ring that fills pink */
.of-radio, .of-tone { display: flex; align-items: center; gap: .7rem; color: var(--ink-2); transition: color .2s; }
.of-radio::before, .of-dot { content: ""; flex: none; width: 1rem; height: 1rem; box-sizing: border-box; border-radius: 50%; background: #000; border: 1.5px solid var(--ink-2); transition: background-color .2s, border-color .2s, box-shadow .2s; }
.of-radio:has(input:checked), .of-tone:has(input:checked) { color: var(--ink); }
.of-radio:has(input:checked)::before, .of-tone:has(input:checked) .of-dot { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 0 4px rgba(228, 95, 155, .18); }

/* ---- 2. what the site must do: the site itself, then each feature with its three answers ---- */
.of-toiminnot .of-body { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2rem, 3vw, 4.5rem); }
.of-feat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name answers" "what answers" "price sys"; column-gap: 1.5rem; row-gap: .3rem;
  padding: 1.15rem 0; border-top: 1px solid var(--line); }
.of-feat:first-child { border-top: 0; padding-top: 0; }
.of-feat > legend, .of-base-n { float: left; grid-area: name; margin: 0; color: var(--ink); font-size: 1.1rem; font-weight: 500; letter-spacing: -.01em; }
.of-what { grid-area: what; margin: 0; color: var(--ink-3); font-size: .92rem; line-height: 1.45; max-width: 36rem; }
.of-price { grid-area: price; margin: .2rem 0 0; color: var(--ink-2); font-size: .95rem; font-variant-numeric: tabular-nums; }
.of-price s { color: var(--ink-3); }
.of-price-have { display: none; }
.of-feat:has(.is-need input:checked) .of-price { color: var(--pink); }
.of-feat:has(.is-have input:checked) .of-price-need { display: none; }
.of-feat:has(.is-have input:checked) .of-price-have { display: inline; color: var(--ink); }
.of-answers { grid-area: answers; align-self: start; display: flex; gap: .35rem; }
.of-answer > span { display: block; padding: .5rem .85rem; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink-2); font-size: .92rem; white-space: nowrap; text-align: center;
  transition: color .2s, border-color .2s, background-color .2s; }
.of-answer:has(input:checked) > span { border-color: var(--ink-2); background: rgba(255, 255, 255, .07); color: var(--ink); }
.of-answer.is-need:has(input:checked) > span { border-color: var(--pink); background: var(--pink); color: #14070d; font-weight: 600; }
.of-answer.is-have:has(input:checked) > span { border-color: var(--ink); }
/* already have it: which system (a line under the answers) */
.of-sys { grid-area: sys; display: none; flex-direction: column; gap: .15rem; min-width: 0; }
.of-feat:has(.is-have input:checked) .of-sys { display: flex; }
.of-sys label { color: var(--ink-3); font-size: .85rem; }
.of-sys input { font-size: 1rem; padding: .3rem 0; }
.of-offer { margin: 1.4rem 0 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; max-width: 44rem; grid-column: 1 / -1; }
.of-toiminnot .of-err { grid-column: 1 / -1; }

/* ---- 3. the style: five stops on a line, calm to wild (upright on a phone) ---- */
.of-scale { position: relative; display: flex; justify-content: space-between; gap: 1rem; max-width: 64rem; padding-top: .1rem; }
.of-scale::before { content: ""; position: absolute; left: .5rem; right: .5rem; top: .6rem; height: 1px; background: var(--line-2); }
.of-tone { position: relative; flex-direction: column; align-items: center; gap: .8rem; font-size: clamp(1rem, 1.25vw, 1.3rem); letter-spacing: -.01em; }
.of-tone:first-child { align-items: flex-start; }
.of-tone:last-child { align-items: flex-end; }

/* ---- 4. contact: two fields a row, three on very wide screens; anything else the whole width ---- */
.of-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem clamp(1.5rem, 3vw, 4rem); }
.of-f-wishes { grid-column: 1 / -1; }

/* ---- the bar: the free preview on the left, the price if you order beside the button; it sticks to the bottom of the screen and comes
   to rest under the last part ---- */
.of-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(1rem, 2.5vw, 3rem); row-gap: .4rem;
  padding: .8rem var(--gut); background: #000; border-top: 1px solid var(--line); }
.of-total { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.of-total-k { color: var(--ink-3); font-size: .9rem; margin-right: .4rem; }
.of-total-v { color: var(--ink); font-size: clamp(1.05rem, 1.25vw, 1.35rem); font-weight: 500; letter-spacing: -.01em; }
.of-total-v s { color: var(--ink-3); font-weight: 400; font-size: .85em; margin-right: .15rem; }
.of-total-v small { color: var(--pink); font-size: .75em; font-weight: 400; margin-left: .35rem; }
.of-free { flex: 1; order: -1; margin: 0; color: var(--ink-2); font-size: .95rem; }
.of-go { padding: .8rem 1.2rem; font-size: .98rem; }
.of-status { flex: 1 0 100%; margin: 0; color: var(--err); font-size: .95rem; }
.of-status[hidden] { display: none; }

/* hover, only where there is a pointer that hovers (a tap leaves no hover behind) */
@media (hover: hover) {
  .of-field input:hover, .of-field textarea:hover, .of-sys input:hover { border-color: var(--ink-2); }
  .of-check:hover, .of-radio:hover, .of-tone:hover, .of-path:hover { color: var(--ink); }
  .of-answer:hover > span { border-color: var(--ink-2); color: var(--ink); }
}

/* very wide screens: the features in two columns, three fields a row */
@media (min-width: 1800px) {
  .of-toiminnot .of-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-base { grid-column: 1 / -1; }
  .of-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .of-feat { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "what" "price" "answers" "sys"; }
  .of-answers { margin-top: .6rem; }
}
@media (max-width: 900px) {
  .of-head, .of-sec { display: block; }
  .of-head p { margin-top: 1.2rem; }
  .of-sec > h2 { position: static; margin-bottom: 1.6rem; }
  .of-fields { grid-template-columns: minmax(0, 1fr); }
}
/* phones: the answers share the width; the scale stands upright; the bar keeps the price and the button */
@media (max-width: 600px) {
  .of-paths { grid-template-columns: minmax(0, 1fr); }
  .of-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .of-answer > span { padding: .6rem .3rem; white-space: normal; line-height: 1.25; }
  .of-scale { flex-direction: column; gap: 1.1rem; }
  .of-scale::before { left: .5rem; right: auto; top: .5rem; bottom: .5rem; width: 1px; height: auto; }
  .of-tone, .of-tone:first-child, .of-tone:last-child { flex-direction: row; align-items: center; }
  .of-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: .7rem var(--gut); }
  .of-total { grid-area: 1 / 1; white-space: normal; }
  .of-total-k { display: block; margin: 0; font-size: .8rem; }
  .of-total-v { white-space: nowrap; font-size: 1rem; }
  .of-total-v small { display: none; }
  .of-free { display: none; }
  .of-go { grid-area: 1 / 2; padding: .7rem .8rem; font-size: .9rem; max-width: 10.5rem; line-height: 1.25; }
  .of-status { grid-column: 1 / -1; }
}