/* Orli v3 · features · "Get Orli free" order request page
   ---------------------------------------------------------------------------
   One focal point: the form card. The page title and lead above it, a quiet
   "What you get" column beside it on wide screens (below it on narrow
   ones). System tokens only; the fields are the system's own
   (v2/system/components.css "form fields").
   ------------------------------------------------------------------------- */

.tr { padding-block: var(--o-space-7) var(--o-section); }
.tr__grid {
  display: grid; gap: var(--o-space-6) var(--o-space-8);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "main" "aside";
}
.tr__head { grid-area: head; display: grid; gap: var(--o-gap); max-inline-size: 40rem; }
.tr__title { max-inline-size: 18ch; }
.tr__main { grid-area: main; min-width: 0; }
.tr__aside { grid-area: aside; min-width: 0; }
@media (min-width: 1100px) {
  .tr__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-areas: "head ." "main aside";
  }
  .tr__aside { position: sticky; top: calc(var(--o-header-h) + var(--o-space-5)); align-self: start; }
}

/* ---------------------------------------------------------- the card */
.tr__card, .tr__done {
  padding: var(--o-space-6) var(--o-space-5) var(--o-space-5);
  gap: 0; overflow: visible;
}
@media (min-width: 600px) { .tr__card, .tr__done { padding: var(--o-space-7) var(--o-space-7) var(--o-space-6); } }

/* Progress: Schools setup markers in the site's action green. */
.tr__progress { margin-block-end: var(--o-space-6); padding-block-end: var(--o-space-5); border-block-end: 1px solid var(--o-line); }
.tr__progress-count { margin-block-end: var(--o-space-3); font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--o-ink-2); }
.sf-progress { display: flex; justify-content: space-between; gap: var(--o-space-1); margin: 0; padding: 0; list-style: none; }
.sf-progress__item { flex: 1 1 0; min-width: 0; }
.sf-progress__step {
  display: flex; align-items: center; gap: var(--o-space-2);
  inline-size: 100%; min-height: var(--o-target); margin: 0; padding: 6px 8px 6px 6px;
  border: 0; border-radius: var(--o-r-pill); background: transparent; color: var(--o-ink-2);
  font: 500 var(--o-text-small) / 1.3 var(--o-font-body); text-align: start;
}
button.sf-progress__step { cursor: pointer; transition: background-color var(--o-t-interact) var(--o-ease), color var(--o-t-interact) var(--o-ease); }
@media (hover: hover) and (pointer: fine) { button.sf-progress__step:hover { background: var(--o-warm); color: var(--o-ink); } }
.sf-progress__marker {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--o-warm); color: var(--o-ink-2);
  font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui);
}
/* Labels wrap onto two lines rather than being cut off (Ryan, 3 Nov) */
.sf-progress__label { min-width: 0; white-space: normal; overflow-wrap: break-word; text-wrap: balance; line-height: 1.2; }
.sf-progress__item.is-current .sf-progress__step { background: color-mix(in srgb, var(--o-action) 8%, var(--o-surface)); color: var(--o-ink); font-weight: 600; }
.sf-progress__item.is-current .sf-progress__marker { background: var(--o-action); color: #fff; }
.sf-progress__item.is-done .sf-progress__marker { background: var(--o-mint); color: var(--o-on-mint); }
.sf-progress__item.is-done .sf-progress__marker::before {
  content: ""; width: 14px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1.2 4.6l3.1 3 6.5-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1.2 4.6l3.1 3 6.5-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sf-progress__item.is-done .sf-progress__num { display: none; }
/* Narrow: the markers only; the count line names the step. */
@media (max-width: 759px) {
  .sf-progress { gap: 0; justify-content: space-between; position: relative; }
  .sf-progress::before { content: ""; position: absolute; inset-inline: 22px; top: 50%; height: 2px; translate: 0 -1px; background: var(--o-warm); }
  .sf-progress__item { flex: none; position: relative; }
  .sf-progress__step { padding: 6px; inline-size: auto; }
  .sf-progress__item.is-current .sf-progress__step { background: transparent; }
  .sf-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 760px) { .tr__progress-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* A returning visitor: their answers are back. */
.tr__notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-space-2) var(--o-space-4);
  margin-block-end: var(--o-space-5); padding: var(--o-space-3) var(--o-space-4);
  border-radius: var(--o-r-control); background: var(--o-warm);
  font-size: var(--o-text-small); line-height: var(--o-lh-small);
}
.tr__textbtn {
  min-height: var(--o-target); margin: 0; padding: 0 var(--o-space-1); border: 0; background: none; cursor: pointer;
  font: 600 var(--o-text-small) / 1.3 var(--o-font-body); color: var(--o-ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .24em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); border-radius: 4px;
}
.tr__textbtn:hover { text-decoration-color: currentColor; }
.sf-summary { margin-block-end: var(--o-space-5); }

/* ---------------------------------------------------------- the steps */
.tr__step { display: grid; gap: var(--o-space-5); }
html.js .tr__step:not(.is-current) { display: none; }
/* With the script, "Send my order request" waits for the last step; without
   it, the whole form shows and so does the button. */
html.js .tr__card:not([data-last]) [data-submit] { display: none; }
html:not(.js) .tr__progress { display: none; }
.tr__step-title {
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); text-wrap: balance;
}
.tr__step-title:focus { outline: none; }
.tr__step-title:focus-visible:not([data-quiet-focus]) { outline: var(--o-focus-ring); outline-offset: 4px; border-radius: 4px; }
.tr__step-title + .tr__step-note { margin-block-start: calc(-1 * var(--o-space-4)); }
.tr__step-note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.tr__row { display: grid; gap: var(--o-space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .tr__row { grid-template-columns: minmax(0, 1fr) auto; } .tr__row .sf-w-8 { inline-size: 11ch; } }
.tr__ticks { display: grid; gap: var(--o-space-1); }
.tr__tick-help { margin-block-start: -14px; padding-inline-start: 32px; }
/* Without JavaScript every step shows: a gap and a hairline between them. */
html:not(.js) .tr__step + .tr__step { margin-block-start: var(--o-space-7); padding-block-start: var(--o-space-7); border-block-start: 1px solid var(--o-line); }
html:not(.js) .tr__nav [data-next] { display: none; }

/* The honeypot: off-screen for people, there for bots. */
.tr__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Check and send: what they told us, a section at a time. */
.tr__review { display: grid; gap: var(--o-space-3); }
.tr__group {
  display: grid; gap: var(--o-space-2);
  padding: var(--o-space-4) var(--o-space-5);
  border: 1px solid var(--o-line); border-radius: var(--o-r-control);
}
.tr__group-head { display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-3); }
.tr__group-title { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); }
.tr__group dl { display: grid; gap: var(--o-space-1) var(--o-space-4); grid-template-columns: minmax(0, 1fr); margin: 0; }
.tr__group dt { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.tr__group dd { margin: 0 0 var(--o-space-2); overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .tr__group dl { grid-template-columns: 11rem minmax(0, 1fr); }
  .tr__group dt { padding-block-start: 2px; }
  .tr__group dd { margin: 0; }
}

/* ------------------------------------------------------------ the nav */
.tr__nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-space-3);
  margin-block-start: var(--o-space-6); padding-block-start: var(--o-space-5);
  border-block-start: 1px solid var(--o-line);
}
.tr__nav > :is([data-next], [data-submit]) { margin-inline-start: auto; }
.tr__back { margin-inline-start: calc(-1 * var(--o-space-3)); }
.tr__foot { display: grid; gap: var(--o-space-2); margin-block-start: var(--o-space-4); }
.tr__privacy, .tr__saved { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.tr__saved { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--o-space-2); }
/* "Remember my answers on this device for 7 days": opt-in, quiet, under the saved line.
   The label hugs its text (no 44 px min-height leaving a blank band under one line), so the help
   line sits a steady 4 px under the label's last line at any width. The tick box keeps a 44 x 44
   target: an invisible square round it (inside the gap above, clear of the help text beside it). */
.tr__keep { display: grid; gap: 0; }
.tr__remember { min-height: 0; padding-block: var(--o-space-1) 0; font-size: var(--o-text-small); line-height: var(--o-lh-small); font-weight: 600; }
.tr__remember > input { margin-block-start: 0; position: relative; }
.tr__remember > input::before { content: ""; position: absolute; inset: calc((var(--o-field-mark) - var(--o-target)) / 2 - 1.5px); }
.tr__keep-help { padding-inline-start: 32px; margin-block-start: var(--o-space-1); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
html:not(.js) .tr__keep { display: none; }
@media (max-width: 599px) {
  .tr__nav > :is([data-next], [data-submit]) { flex: 1 1 100%; order: -1; }
  .tr__back { margin-inline-start: 0; }
}

/* ------------------------------------------------------- sent */
.tr__done { display: grid; gap: var(--o-space-4); justify-items: start; }
.tr__done:focus { outline: none; }
.tr__done-mark {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--o-mint); color: var(--o-on-mint);
}
.tr__done-mark::before {
  content: ""; width: 28px; height: 28px; background: currentColor;
  -webkit-mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat;
          mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat;
}
.tr__done-title { max-inline-size: 20ch; }
.tr__done .o-cluster { margin-block-start: var(--o-space-3); }
.tr__done-next { color: var(--o-ink-2); }
.tr__proto {
  margin-block-start: var(--o-space-3); padding-block-start: var(--o-space-4); border-block-start: 1px dashed var(--o-n2);
  font-size: var(--o-text-small); color: var(--o-ink-2); justify-self: stretch;
}
.tr__foot .tr__proto { margin-block: var(--o-space-1) var(--o-space-2); padding-block-start: var(--o-space-3); }
.tr__proto[hidden] { display: none; }

/* The sent card waits until trial.js opens it (data-open) or, without
   JavaScript, until /api/order sends a plain post back here at #order-sent
   (:target); then the form steps aside. */
.tr__done:not(:target):not([data-open]) { display: none; }
.tr__main:has(> .tr__done:target) > .tr__card { display: none; }

/* ------------------------------------------------------ the aside */
.tr__aside {
  display: grid; gap: var(--o-space-3); align-content: start;
  padding: var(--o-space-5); border-radius: var(--o-r-card); background: var(--o-warm);
}
.tr__aside-title { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); }
.tr__aside-title:not(:first-child) { margin-block-start: var(--o-space-3); }
.tr__ticklist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--o-space-2); font-size: var(--o-text-small); line-height: var(--o-lh-small); }
.tr__ticklist li { position: relative; padding-inline-start: 28px; }
.tr__ticklist li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; background: var(--o-action);
  -webkit-mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat;
          mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat;
}
.tr__small { margin-block-start: var(--o-space-3); padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-warm-high); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.tr__talk { font-size: var(--o-text-small); line-height: var(--o-lh-small); }

/* ------------------------------------------------------ the kits */
/* Two answer cards on the system's .sf-choice row (mint ring when chosen,
   the error edge when nothing is): the name, what it is, what's in it and
   the cost line (no amounts: on hold). */
/* (choice cards 16px apart, 24px inside, their four lines 8px apart:
   spacing rules, 2 Nov) */
.or-kits__grid { display: grid; gap: var(--o-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .or-kits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.or-kits .or-kit {
  align-items: flex-start; gap: var(--o-space-3);
  padding: var(--o-space-5); min-height: 0;
}
.or-kit > input { margin-block-start: 3px; }
.or-kit__body { display: grid; gap: var(--o-space-2); min-width: 0; }
.or-kit__what, .or-kit__includes { text-wrap: pretty; }
.or-kit__name { font: var(--o-weight-title) var(--o-text-body) / 1.3 var(--o-font-ui); color: var(--o-ink); }
.or-kit__what { font-weight: 600; }
.or-kit__includes, .or-kit__cost { font: 400 var(--o-text-small) / var(--o-lh-small) var(--o-font-body); color: var(--o-ink-2); }
.or-kit__cost { margin-block-start: var(--o-space-1); font-weight: 600; color: var(--o-ink); }
.or-more { font-size: var(--o-text-small); line-height: var(--o-lh-small); }

/* The delivery address: a group with its own legend and help. */
.or-address { display: grid; gap: var(--o-space-5); margin: 0; padding: 0; border: 0; min-width: 0; }
/* (A rendered legend isn't a grid item, so the help under it is the first
   one: pulled up under the legend from below, never over it.) */
.or-address > legend { margin-block-end: var(--o-field-gap); }
.or-address > .o-field__help { margin-block: 0 calc(-1 * var(--o-space-2)); }

/* What happens next: on the last step, right above Send, and on the
   confirmation. */
.or-next {
  display: grid; gap: var(--o-space-2);
  padding: var(--o-space-4) var(--o-space-5);
  border-radius: var(--o-r-control); background: var(--o-warm);
}
.or-next__title { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); }
.or-next__small { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.tr__done .or-next__title { margin-block-start: var(--o-space-2); }
.tr__done-includes { margin-block-start: calc(-1 * var(--o-space-2)); color: var(--o-ink-2); }

/* ------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]):not([data-motion="still"]) .tr__step.is-entering { animation: tr-in var(--o-t-enter) var(--o-ease) both; }
}
html[data-motion="reduced"] .tr__step.is-entering { animation: tr-fade var(--o-t-enter) var(--o-ease) both; }
@keyframes tr-in { from { opacity: 0; translate: 0 8px; } }
@keyframes tr-fade { from { opacity: 0; } }
html[data-motion="still"] .sf-progress__step { transition: none; }

/* ------------------------------------------------------- print */
/* Printing: the step on screen (on the last step, the summary of every
   answer), without the page's chrome. */
@media print {
  [data-shell-header], [data-shell-footer], .o-skip,
  .tr__aside, .tr__nav, .tr__foot, .tr__notice, .tr__proto, .tr__progress, .sf-summary,
  .tr__done .o-cluster, .tr__group-head .tr__textbtn { display: none !important; }
  .tr { padding-block: 0; }
  .tr__card, .tr__done { box-shadow: none; border: 0; padding: 0; }
  .tr__group { break-inside: avoid; }
}
@media (forced-colors: active) {
  .sf-progress__marker { border: 1px solid CanvasText; }
  /* Every marker becomes an outline here, so the current step gets a thick
     ring and a bold, underlined name. */
  .sf-progress__item.is-current .sf-progress__marker { border-width: 3px; }
  .sf-progress__item.is-current .sf-progress__label { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
  /* A finished step keeps its tick (a mask filled with the text colour). */
  .sf-progress__item.is-done .sf-progress__marker::before { forced-color-adjust: none; background: CanvasText; }
  .tr__ticklist li::before, .tr__done-mark::before { background: CanvasText; }
}