/*
 * The order's look (CTO queue Q-243 (2)): the steps a stranger walks before an account exists, drawn
 * as the website v2 draws its pricing page, on the shared design tokens (static/tokens.css). Only the
 * order's pages link this file (web/signup.templ, orderSheet), after app.css, so a rule here may
 * restate one of app.css's for the order alone and no other page changes.
 *
 * The plan step's rules are the website's pricing page's (bithive-it/bithive-website,
 * src/v2/styles/pricing-page.css: the plates, the switch, the billing choice and the total), written
 * with the application's token names. Nothing here needs a script: a module's row folds when its
 * switch is off, and the prices follow the billing period, by :has(), and a browser without it shows
 * both and loses nothing it needs.
 */

/* ---------- The progress line: a timeline ---------- */

/* A circle for each step, joined by a line, the number centred in it (Q-243 (2)(c)). A step done is
   green with a check, the current one in the action blue, a later one grey; a step with something to
   correct is red, one with something to check amber, and each says so in words beside its name. The
   steps stay on one line (CTO queue Q-190 (c)): each is as wide as its name at least, the longest of
   which, German's "Prüfen und zahlen", fits the narrow card with room to spare; below about 480 px
   the list gives way to one compact line, "Step 2 of 4 · Company". */
.steps {
  --step-dot: 1.75rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--muted);
  white-space: nowrap;
}

.steps li {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: max-content;
  padding: 0 var(--space-1);
  text-align: center;
}

/* Each step draws the half of the line on either side of its circle; the first has none before it
   and the last none after it. The line out of a step done is green. */
.steps li::before,
.steps li::after {
  content: '';
  position: absolute;
  top: calc(var(--step-dot) / 2 - 1px);
  height: 2px;
  background: var(--line);
}

.steps li::before {
  left: 0;
  right: calc(50% + var(--step-dot) / 2 + var(--space-1));
}

.steps li::after {
  left: calc(50% + var(--step-dot) / 2 + var(--space-1));
  right: 0;
}

.steps li:first-child::before,
.steps li:last-child::after {
  content: none;
}

.steps .steps__done::after,
.steps .steps__done + li::before {
  background: var(--ok);
}

.steps__number {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--step-dot);
  height: var(--step-dot);
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.steps__check-mark {
  width: 1rem;
  height: 1rem;
}

.steps [aria-current='step'] {
  color: var(--ink);
  font-weight: 600;
}

.steps [aria-current='step'] .steps__number {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-action-text);
}

.steps .steps__done {
  color: var(--ink);
}

.steps .steps__done .steps__number {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--paper);
}

/* A flag outweighs the step's place, the current step's blue included. */
.steps .steps__check,
.steps .steps__check[aria-current='step'] {
  color: var(--warning);
}

.steps .steps__check .steps__number {
  border-color: var(--warning);
  background: var(--warning);
  color: var(--paper);
}

.steps .steps__fix,
.steps .steps__fix[aria-current='step'] {
  color: var(--danger);
}

.steps .steps__fix .steps__number {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--paper);
}

.steps-compact {
  display: none;
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

.steps-compact__name {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 30rem) {
  .steps {
    display: none;
  }

  .steps-compact {
    display: block;
  }
}

/* ---------- The company: one column of labelled fields ---------- */

/* Every label above its field, every field on the same left and right edges, the postal code narrow
   beside the city in one row (Q-243 (2)(a)). */
.fields {
  display: grid;
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.field > label {
  display: block;
}

.field__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.field-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.field-row--city-first {
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 9rem);
}

/* A field the page came back about is edged in the danger red, beside the problem's words. */
.fields [aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.field-check input[type='checkbox'] {
  flex: none;
  margin: 0.3rem 0 0;
}

/* ---------- The review ---------- */

/* The review's column is wider than the stranger's narrow one, so that its facts keep the German
   labels, "Umsatzsteuer-Identifikationsnummer" the longest, on one line beside an address that wraps
   between its words. */
.entry:has(.card--review) {
  max-width: 40rem;
}

/* The facts the order is placed with, each label before its value: the label column as wide as its
   longest label, which stays on one line, the value taking the rest; a long address wraps between its
   words, not inside them. Below about 480 px each label stands above its value. (Restated from
   app.css, so the order keeps them whatever the application's pages do with theirs.) */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  overflow-wrap: break-word;
}

@media (max-width: 30rem) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .facts dd {
    margin-bottom: var(--space-3);
  }
}

/* What is being ordered and what it costs: each label and its amount a pair, the amounts aligned. */
.total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.total dt {
  color: var(--muted);
}

.total dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.total__sum {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- The plan: the website's pricing page ---------- */

/* The step's column is the wide one; it starts closer to the top, so that the modules, what the
   account books and the total share one laptop screen. */
.entry--wide {
  max-width: 64rem;
  margin-top: var(--space-5);
}

.plan-head {
  display: grid;
  gap: var(--space-1);
}

.plan-head h1 {
  font-size: var(--step-3);
}

/* The options on the left, the total on the right; one column below a laptop's width. */
.order {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.order__main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

@media (min-width: 60rem) {
  .order {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  /* The total stays in view while the modules scroll (CTO queue Q-242 (C)(6)); it scrolls
     within itself where it is taller than the window. */
  .order__summary {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - 2 * var(--space-4));
    overflow-y: auto;
  }
}

.order__h {
  margin: 0;
  font-size: var(--step-1);
}

/* One row per module: a plate with its switch and name, and while it is on, its sizes and its
   add-ons beneath. A module on is edged in the action blue; one off is a quiet row on the mist. */
.plates {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plate {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.plate:has(.sw__input:checked),
.plate:not(:has(.sw__input)) {
  border-color: var(--color-action);
  box-shadow: inset 4px 0 0 var(--color-action);
}

.plate:has(.sw__input:not(:checked)) {
  background: var(--surface);
}

.plate:has(.sw__input:not(:checked)) .plate__body {
  display: none;
}

.plate__head {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

.plate__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  margin: 0;
}

.plate__name {
  color: var(--ink);
  font-size: var(--step-2);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.plate__full {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.plate__title .plate__full {
  flex-basis: 100%;
}

.plate__body {
  display: grid;
  gap: var(--space-2);
}

/* Add-ons behind a disclosure, as the website's pricing page has them: under their module, and the
   account's beyond extra users and retention beneath those. It starts open where one is booked. */
.more summary {
  width: fit-content;
  color: var(--link);
  font-weight: 500;
  cursor: pointer;
}

.more[open] summary {
  margin-bottom: var(--space-2);
}

/* The switch: a checkbox drawn as a track and a thumb, its label the module's name. The box itself
   is invisible and keeps the keyboard, the focus ring drawn on the track. */
input.sw__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

/* The module's name with its line under it, for every module alike (CTO queue Q-263 (1)), and the track at the row's
   right end: label left, switch right, the settings-row pattern the website's pricing page has too (Q-263 (5)). The
   page's order is unchanged, so the keyboard meets the switch where it did and its label is still the module's name. */
.sw {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 2.75rem;
  cursor: pointer;
}

.sw .plate__name {
  grid-column: 1;
  grid-row: 1;
}

.sw .plate__full {
  grid-column: 1;
  grid-row: 2;
}

.sw .sw__track {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.sw__track {
  position: relative;
  flex: none;
  width: 3rem;
  height: 1.75rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
}

.sw__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.sw__input:checked + .sw .sw__track {
  border-color: var(--color-action);
  background: var(--color-action);
}

.sw__input:checked + .sw .sw__thumb {
  background: var(--color-action-text);
  translate: 1.25rem 0;
}

.sw__input:focus-visible + .sw .sw__track {
  outline: var(--focus);
  outline-offset: 3px;
}

/* A module's sizes side by side, the chosen one filled, each with what it includes and its price,
   which is never broken across lines (CTO queue Q-242 (C)(6)). The radio keeps the keyboard; the face
   beside it shows its state, which needs no :has(). */
.sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.size {
  position: relative;
  display: grid;
  font-weight: 400;
  cursor: pointer;
}

input.size__input {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.size__face {
  display: grid;
  align-content: start;
  gap: 2px;
  height: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.size:hover .size__face {
  background: var(--surface);
}

.size__input:checked + .size__face {
  border-color: var(--color-action);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-action);
}

.size__input:focus-visible + .size__face {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

/* A size's name never breaks inside a word (CTO queue Q-263 (1): "St/ar/te/r" on a phone). */
.size__name {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: normal;
}

.size__units {
  color: var(--muted);
  font-size: 0.8125rem;
}

.size__price {
  color: var(--text);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The price of the period chosen: a month's while Monthly is chosen, a year's while Annual is. */
.order .py {
  display: none;
}

.order:has(#period-annual:checked) .pm {
  display: none;
}

.order:has(#period-annual:checked) .py {
  display: inline;
}

/* Add-ons: under their module, edged dashed as the website draws them, and what the whole account
   books in a list of its own beneath the modules. */
.account-options {
  display: grid;
  gap: var(--space-2);
}

.addons {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.plate .addon {
  border-style: dashed;
  border-color: var(--line-strong);
}

.addon__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.addon__text > label,
.addon__name {
  margin: 0;
  padding: 0;
  font-weight: 600;
}

.addon__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

input.addon__qty {
  width: 6rem;
}

.addon__pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.addon__pick input[type='checkbox'] {
  flex: none;
  margin: 0;
}

.addon__tiers {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.tier input[type='radio'] {
  margin: 0;
}

.tier:has(input:checked) {
  border-color: var(--color-action);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-action);
}

/* The eligibility questions of the modules chosen, as one more plate. */
.questions {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.question {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.question > legend {
  padding: 0;
  font-weight: 500;
}

.answers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.answer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-weight: 400;
  cursor: pointer;
}

.answer input[type='radio'] {
  margin: 0;
}

/* The total, as the website's sheet: the billing period above, the lines with dotted leaders, the
   total under a rule, and the way on beneath. */
.sheet {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-top: 4px solid var(--color-action);
  border-radius: var(--radius-xs);
  background: var(--paper);
  box-shadow: var(--shadow-2);
}

.sheet__title {
  margin: 0;
  font-size: var(--step-2);
}

.bill {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.bill__label {
  padding: 0;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
}

/* The struck reference beside the total, with its label, as on the pricing page (summary.mjs). */
.sheet__ref {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/* Billing over the switch's left half, and the months a year paid at once leaves free over its right
   half, centred above Yearly: the head's columns are the switch's, padding and gap included (the
   founder's comments on the v3 review, 10 October 2026). */
.bill__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-1);
  padding: 0 var(--space-1);
}

.bill__head .bill__label {
  justify-self: start;
}

.bill__head .bill__badge {
  justify-self: center;
}

/* The website's badge (pricing.css .bill__badge): the months a year paid at once leaves free, in the
   highlight on its wash (the founder's review, 10 October 2026). */
.bill__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--highlight-soft);
  color: var(--highlight);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.bill__opts {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

input.bill__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.bill__opt {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.bill__opt:hover {
  background: var(--paper);
}

.bill__input:checked + .bill__opt {
  background: var(--color-action);
  color: var(--color-action-text);
  font-weight: 600;
}

.bill__input:focus-visible + .bill__opt {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

.bill__help {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

/* No gap between the columns, the price's own padding instead: the rule above the total runs
   unbroken under the name and the price (CTO queue Q-251 (4)). */
.sheet .total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.sheet .total dt {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text);
}

.sheet .total dt:not(.total__sum)::after {
  content: '';
  flex: 1;
  min-width: var(--space-4);
  border-bottom: 1px dotted var(--line-strong);
}

.sheet .total dd {
  margin: 0;
  padding-left: var(--space-3);
  text-align: right;
  white-space: nowrap;
}

.sheet .total .total__sum {
  align-self: end;
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
}

.sheet .total dd.total__sum {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.sheet__note {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.sheet [data-live-offer] {
  display: grid;
  gap: var(--space-2);
}

.promo summary {
  color: var(--link);
  font-weight: 500;
  cursor: pointer;
}

.promo__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

.promo__field label {
  grid-column: 1 / -1;
}

.sheet__actions {
  display: grid;
  gap: var(--space-2);
}

.sheet__actions button,
.sheet__actions .button {
  width: 100%;
}

.sheet button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* On a phone a size is one row: its name and what it includes on the left, its price on the right. The sizes stand one
   under the other, so that each row has the width for both (CTO queue Q-263 (1): two to a row at 412 px left the
   name a few letters wide). */
@media (max-width: 30rem) {
  .sizes {
    grid-template-columns: minmax(0, 1fr);
  }

  .size__face {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
  }

  .size__name {
    grid-column: 1;
  }

  .size__units {
    grid-column: 1 / -1;
  }

  .size__price {
    grid-row: 1;
    grid-column: 2;
    align-self: baseline;
  }

  .addon {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sw__thumb {
    transition: translate 0.16s ease, background-color 0.16s ease;
  }

  .sw__track,
  .size__face,
  .bill__opt {
    transition: background-color 0.16s ease, border-color 0.16s ease;
  }
}