/* order.css: the order and account pages on top of brand.css ("/" while orders are open, /order/*, /account*):
   the stepper, the study strip, the form sections, the boundary drop zone, the study cards, the code field, the
   status rail and the order facts. No inline styles on these pages: their Content-Security-Policy is style-src
   'self'. Light only, as the app is. Amber is never text on a light background. */

:root {
  --fe-badge-amber-bg: #FEF9E7;
  --fe-badge-amber-text: #8B6914;
  --fe-chip-muted-bg: #EFEDEA;
  --fe-selected-shadow: 0 8px 32px rgba(27, 67, 50, 0.12);
  --fe-overlap: -72px;
}

/* ── columns ── */
.order-column {
  position: relative;
  max-width: 760px;
  margin: var(--fe-overlap) auto 0;
}
.order-narrow {
  position: relative;
  max-width: 560px;
  margin: var(--fe-overlap) auto 0;
}
.order-narrow h2 { margin-bottom: 8px; }
.order-narrow.order-after-steps { margin-top: 0; }
/* The progress indicator above a narrow card keeps the width it has on every other step (labels on one line). */
.order-narrow-steps { max-width: 760px; }

/* ── text ── */
.order-lead { font-size: 17px; color: var(--fe-text); }
.order-note { margin-top: 12px; font-size: 14px; color: var(--fe-muted); }
.order-help { margin-top: 20px; text-align: center; }
.order-hint { margin: -2px 0 8px; font-size: 14px; color: var(--fe-muted); }
.order-optional { font-weight: 400; color: var(--fe-muted); letter-spacing: 0; }
.order-legal { margin-top: 12px; font-size: 14px; color: var(--fe-muted); }
.order-micro { margin-top: 10px; font-size: 12px; color: var(--fe-muted); text-align: center; }
.order-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fe-green-mid);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.order-link-button.is-on-dark { color: var(--fe-on-dark); }
.order-back { display: inline-flex; align-items: center; gap: 6px; color: var(--fe-green-pale); text-decoration: none; }
.order-back svg { flex: 0 0 auto; }
.order-back:hover { color: var(--fe-on-dark); text-decoration: underline; }
/* An order reference never breaks at its hyphen. */
.order-ref { white-space: nowrap; }
/* The footer's middle dots are not part of the links they precede. */
.fe-footer-inner > a::before { display: inline-block; text-decoration: none; }
.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
@media (max-width: 480px) {
  .order-actions .fe-btn { width: 100%; }
}

/* ── progress indicator (templates/components/order_steps.html) ──
   28px dots: pale green with a tick when done, solid green when current, sand-grey when still to come; a 2px
   connector between them. Phones: the dots in one row, only the current step named (the others are named to screen
   readers); from 641px every step is named. */
.order-steps {
  list-style: none;
  padding: 14px 16px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--fe-surface);
  border: 1px solid var(--fe-border);
  border-radius: var(--fe-radius-card);
  box-shadow: var(--fe-shadow-card);
}
.order-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fe-muted);
  min-width: 0;
}
.order-step.is-current { flex: 1 1 auto; color: var(--fe-green); font-weight: 700; }
.order-step + .order-step::before {
  content: "";
  flex: 0 0 14px;
  height: 2px;
  background: var(--fe-border);
  margin-right: 2px;
}
.order-step.is-done + .order-step::before { background: var(--fe-green-light); }
.order-step:not(.is-current) .order-step-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.order-step-dot {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--fe-border);
  color: var(--fe-text);
}
.order-step.is-done .order-step-dot { background: var(--fe-green-pale); color: var(--fe-green); }
.order-step.is-current .order-step-dot { background: var(--fe-green); color: var(--fe-on-dark); }
@media (min-width: 641px) {
  .order-steps { gap: 8px; padding: 16px 20px; }
  .order-step,
  .order-step.is-current { flex: 1 1 0; }
  .order-step + .order-step::before { flex-basis: 16px; margin-right: 4px; }
  .order-step:not(.is-current) .order-step-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}
/* With the full 760px, every label stays on one line (the current, bold one included). */
@media (min-width: 900px) {
  .order-step .order-step-label,
  .order-step:not(.is-current) .order-step-label { white-space: nowrap; }
}

/* ── study strip ── */
.order-strip {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--fe-radius);
  background: var(--fe-sand);
  color: var(--fe-earth);
  font-size: 15px;
  font-weight: 600;
}
.order-strip.is-code { background: var(--fe-green-pale); color: var(--fe-green); }
.order-strip.is-study { background: var(--fe-info-bg); color: var(--fe-green); }

/* ── form ── */
.order-form { padding: 28px 32px 32px; }
@media (max-width: 480px) {
  .order-form { padding: 22px 18px 24px; }
}
/* The narrowest phones (360px): room for Turnstile's 300px widget without a sideways scroll. */
@media (max-width: 380px) {
  :root { --fe-wrap-pad: 14px; }
  .order-form { padding: 20px 14px 22px; }
}
.order-form > .fe-alert:first-child { margin: 0 0 16px; }
.order-form-note { margin: 0 0 8px; }
/* Two fields side by side from 641px (first and last name), stacked on phones. */
.order-row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 641px) {
  .order-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.order-section {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.order-section + .order-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--fe-border);
}
/* A floated legend behaves like a heading: the section's top border runs above it, not through it. */
.order-section > legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; }
.order-section > legend + * { clear: left; }
.order-section > legend h2,
.order-form h2 {
  font-family: var(--fe-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--fe-green);
}
.order-form .fe-field { margin-top: 18px; }
/* A checkbox's label is a sentence, not a field label. */
.order-form .fe-field label.fe-check {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fe-text);
  margin-bottom: 0;
}
.order-form select.fe-input { padding-right: 36px; }
.order-form textarea.fe-input { min-height: 120px; resize: vertical; line-height: 1.5; }
.order-form .fe-input[readonly] { background: var(--fe-bg); color: var(--fe-muted); }
.order-group { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.order-group > legend { padding: 0; }

/* The readiness level: nine options in one row. */
.order-segmented {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
}
.order-segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--fe-field-border);
  border-radius: var(--fe-radius);
  font-weight: 700;
  cursor: pointer;
  background: var(--fe-surface);
}
.order-segmented input:checked + label { background: var(--fe-green); border-color: var(--fe-green); color: var(--fe-on-dark); }
.order-segmented input:focus-visible + label { outline: 2px solid var(--fe-focus); outline-offset: 3px; }
@media (max-width: 400px) {
  .order-segmented { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The boundary drop zone. */
.order-drop {
  padding: 20px;
  border: 1.5px dashed var(--fe-field-border);
  border-radius: var(--fe-radius-card);
  background: var(--fe-bg);
  text-align: center;
}
.order-drop.is-dragover { border-color: var(--fe-green-mid); background: var(--fe-green-pale); }
.order-drop.has-file { border-style: solid; border-color: var(--fe-green-light); }
.order-drop.is-invalid { border-color: var(--fe-error); background: var(--fe-error-bg); }
.order-drop-text { margin-bottom: 10px; color: var(--fe-muted); font-size: 15px; }
.order-file { margin-top: 10px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.order-file:empty,
.order-check:empty { display: none; }
.order-check { margin-top: 6px; font-size: 14px; color: var(--fe-muted); }
.order-check.is-ok { color: var(--fe-green); font-weight: 600; }
.order-check.is-bad { color: var(--fe-error); font-weight: 600; }

.order-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.order-turnstile { margin-top: 18px; min-height: 65px; }

.order-submit { margin-top: 28px; }
.order-cta { width: 100%; font-size: 16px; }
.order-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: order-spin 0.8s linear infinite;
}
@keyframes order-spin { to { transform: rotate(360deg); } }

/* ── step 2 ── */
.order-cancelled { margin: 0 0 16px; }
.order-recap { margin-bottom: 16px; padding: 20px 24px; }
.order-recap-line { font-size: 16px; overflow-wrap: anywhere; }
.order-recap-mail { margin-top: 6px; font-size: 15px; color: var(--fe-muted); overflow-wrap: anywhere; }

.order-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .order-tiers { grid-template-columns: 1fr; }
}
.order-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  border: 1px solid var(--fe-border);
  border-radius: var(--fe-radius-card);
  background: var(--fe-surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.order-tier:hover { border-color: var(--fe-green-light); }
/* The marketing pricing page's featured card (spec: brand_alignment): 2px green, a 3px top bar as a border colour
   (never a gradient), the green shadow. Intentional on a rounded card, as on www.feasibility.earth/pricing. */
.order-tier.is-selected {
  padding: 16px 17px 19px;
  border: 2px solid var(--fe-green);
  border-top-width: 3px;
  box-shadow: var(--fe-selected-shadow);
}
/* Keyboard focus only (a click focuses the card's radio too, and the selected border says enough then). */
.order-tier:has(.order-tier-input:focus-visible) { outline: 2px solid var(--fe-focus); outline-offset: 3px; }
@supports not selector(:has(*)) {
  .order-tier:focus-within { outline: 2px solid var(--fe-focus); outline-offset: 3px; }
}
/* The radio covers its whole card (invisible): when the keyboard focuses it, the browser scrolls the whole card
   into view, not a 1px corner it already counts as visible under the sticky pay bar. */
.order-tier-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.order-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-tier-name { font-family: var(--fe-font-display); font-weight: 700; font-size: 18px; color: var(--fe-green); }
.order-tier-price { font-family: var(--fe-font-display); font-weight: 700; font-size: 28px; line-height: 1.1; }
.order-tier-text { font-size: 15px; }
.order-tier-delivery { font-size: 13px; color: var(--fe-muted); }

.fe-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.fe-badge-amber { background: var(--fe-badge-amber-bg); color: var(--fe-badge-amber-text); }

.order-code { margin-top: 24px; }
.order-code-row { display: flex; gap: 10px; }
.order-code-row .fe-input { flex: 1; min-width: 0; text-transform: uppercase; }
.order-code-status { margin-top: 8px; font-size: 14px; color: var(--fe-muted); }
.order-code-status:empty { display: none; }
.order-code-status.is-ok { color: var(--fe-green); font-weight: 600; }
.order-code-status.is-warn { color: var(--fe-earth); font-weight: 600; }
.order-code-switch { margin-top: 10px; }

.order-confirms { margin-top: 20px; }
/* The label's own height, so an error sits right under a one-line label; the whole label stays the target
   (at least 24px tall with the padding: WCAG 2.2 2.5.8). */
.order-check-row { align-items: flex-start; min-height: 0; padding: 3px 0; }
.order-check-row input { margin-top: 3px; flex: 0 0 18px; }

@media (max-width: 640px) {
  /* Scrolling to a focused control keeps it clear of the sticky bar (125-145px tall). */
  html:has(.order-sticky) { scroll-padding-bottom: 150px; }
  .order-sticky {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 24px -18px -24px;
    padding: 12px 18px 14px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--fe-border);
    border-radius: 0 0 var(--fe-radius-card) var(--fe-radius-card);
  }
}
/* The bar spans the form's own padding, edge to edge: 32px from 481px, 18px up to 480px, 14px at 380px and below. */
@media (min-width: 481px) and (max-width: 640px) {
  .order-sticky { margin: 24px -32px -32px; padding: 12px 32px 14px; }
}
@media (max-width: 380px) {
  .order-sticky { margin: 24px -14px -22px; padding: 12px 14px 14px; }
}

/* ── step 2 with the method check (templates/components/order_method_check.html, static/js/order_method.js) ──
   One card above the study: three progress rows while the check runs (each 44px tall from the start, so nothing
   jumps as they tick), then the result, with the rows folded into "What we checked". Warnings to tick sit in the
   warn palette (sand, earth text); a project we cannot study gets a neutral card, never red. The study below is a
   disabled fieldset until a method is confirmed. */
.order-recap-type { margin-top: 6px; font-size: 15px; color: var(--fe-muted); overflow-wrap: anywhere; }
.order-recap-type strong { color: var(--fe-text); font-weight: 600; }

.order-method { margin-bottom: 16px; padding: 24px 28px 26px; }
@media (max-width: 480px) {
  .order-method { padding: 20px 18px 22px; }
}
.order-method-alert { margin: 0 0 16px; }
.order-method-result + .order-method-checked {
  margin-top: 22px;
  padding-top: 8px;
  border-top: 1px solid var(--fe-border);
}

/* The rows' fold: "Checking your project" (open) while it runs, "What we checked" (closed) after. */
.order-method-checked > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--fe-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--fe-green);
}
.order-method-checked > summary::-webkit-details-marker { display: none; }
.order-method-checked > summary::after,
.order-method-scope details > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.order-method-checked[open] > summary::after,
.order-method-scope details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.order-method-result:not([hidden]) + .order-method-checked > summary {
  font-family: var(--fe-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--fe-green-mid);
}
.order-method-result[hidden] + .order-method-checked { margin-top: 0; padding-top: 0; border-top: 0; }
.order-method-checked > summary:focus-visible { outline: 2px solid var(--fe-focus); outline-offset: 3px; border-radius: 4px; }

.order-method-rows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.order-method-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--fe-muted);
}
.order-method-row.is-done,
.order-method-row.is-running { color: var(--fe-text); }
.order-method-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.order-method-row-label { font-weight: 600; }
.order-method-row-detail { font-size: 13px; color: var(--fe-muted); }
.order-method-dot {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--fe-border);
  background: var(--fe-surface);
  color: var(--fe-muted);
}
.order-method-row.is-done .order-method-dot,
.order-method-done-line .order-method-dot { background: var(--fe-green-pale); border-color: var(--fe-green-pale); color: var(--fe-green); }
.order-method-row.is-failed .order-method-dot { background: var(--fe-sand); border-color: var(--fe-sand); color: var(--fe-earth); }
.order-method-row.is-skipped .order-method-dot { background: var(--fe-chip-muted-bg); border-color: var(--fe-chip-muted-bg); }
.order-method-row.is-running .order-method-dot { border-color: var(--fe-green-pale); }
.order-method-row.is-running .order-method-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--fe-green-mid);
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: order-spin 0.9s linear infinite;
}
/* No spinning under reduced motion: a still dot says "in progress". */
@media (prefers-reduced-motion: reduce) {
  .order-method-row.is-running .order-method-dot::after { inset: 7px; border: 0; background: var(--fe-green-mid); }
}

.order-method-facts { margin: 4px 0 0; }
@media (min-width: 481px) {
  .order-method-facts { margin-left: 40px; }
}
.order-method-chips,
.order-method-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.order-method-chips li {
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--fe-info-bg);
  color: var(--fe-green);
  font-size: 13px;
  font-weight: 600;
}
.order-method-indicative { margin-top: 8px; font-size: 12px; color: var(--fe-muted); }
.order-method-wait { margin-top: 10px; font-size: 14px; color: var(--fe-muted); }
.order-method-checked .order-method-actions { margin-top: 12px; }

/* The result. */
.order-method-card > * + * { margin-top: 12px; }
.order-method-headline {
  font-family: var(--fe-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--fe-green);
}
.order-method-card.is-clarify .order-method-headline,
.order-method-card.is-undetermined .order-method-headline { color: var(--fe-earth); }
.order-method-card.is-stop .order-method-headline { color: var(--fe-text); }
.order-method-headline:focus { outline: none; }
.order-method-headline:focus-visible { outline: 2px solid var(--fe-focus); outline-offset: 2px; border-radius: 4px; }
.order-method-card p,
.order-method-why { font-size: 15px; }
.order-method-why { padding-left: 20px; display: grid; gap: 4px; }
.order-method-hint { color: var(--fe-muted); }
.order-method-info {
  padding: 12px 14px;
  border-radius: var(--fe-radius);
  background: var(--fe-info-bg);
  color: var(--fe-green);
}
.order-method-panel > * + * { margin-top: 12px; }

/* "My project is different": a link-like summary, then one 44px row per method. */
.order-method-different > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--fe-green-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.order-method-different > summary::-webkit-details-marker { display: none; }
.order-method-different > summary:focus-visible { outline: 2px solid var(--fe-focus); outline-offset: 3px; border-radius: 4px; }
.order-method-choice { border: 0; margin: 4px 0 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.order-method-choice > legend,
.order-method-acks > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}
.order-method-choice > legend { color: var(--fe-label); }
.order-method-choice > legend + *,
.order-method-acks > legend + * { clear: left; }
.order-method-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  background: var(--fe-surface);
  font-size: 15px;
  cursor: pointer;
}
.order-method-option:has(input:checked) { border-color: var(--fe-green-mid); background: var(--fe-info-bg); }
.order-method-option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--fe-green-mid); }
.order-method-option:has(input:focus-visible) { outline: 2px solid var(--fe-focus); outline-offset: 2px; }
.order-method-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--fe-badge-amber-bg);
  color: var(--fe-badge-amber-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}
.order-method-tag.is-green { background: var(--fe-green-pale); color: var(--fe-green); }

/* The warnings to tick: the warn palette, each tick a whole 44px row. */
.order-method-acks {
  margin: 0;
  min-width: 0;
  padding: 12px 14px 6px;
  border: 1px solid rgba(107, 66, 38, 0.25);
  border-radius: var(--fe-radius);
  background: var(--fe-sand);
}
.order-method-acks > legend { color: var(--fe-earth); }
.order-method-ack { align-items: flex-start; padding: 8px 0; color: var(--fe-text); font-size: 15px; line-height: 1.45; }
.order-method-ack input { margin-top: 2px; }
.order-method-ack + .order-method-ack { border-top: 1px solid rgba(107, 66, 38, 0.15); }

.order-method-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.order-method-card .order-method-actions { margin-top: 18px; }
.order-method-confirm { width: 100%; font-size: 16px; }
@media (max-width: 480px) {
  .order-method-actions .fe-btn { width: 100%; }
}
.order-method-stop {
  padding: 14px 16px;
  border: 1px solid var(--fe-border);
  border-radius: var(--fe-radius);
  background: var(--fe-bg);
}
.order-method-stop-head { font-weight: 700; }

.order-method-scope { display: grid; gap: 0; }
.order-method-scope details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--fe-green);
}
.order-method-scope details > summary::-webkit-details-marker { display: none; }
.order-method-scope details > summary:focus-visible { outline: 2px solid var(--fe-focus); outline-offset: 2px; border-radius: 4px; }
.order-method-scope ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.order-method-scope .order-method-standard { margin-top: 8px; font-size: 13px; color: var(--fe-muted); }
.order-method-card .order-method-charged { font-size: 14px; color: var(--fe-muted); }
.order-method-words-label { font-size: 13px; font-weight: 700; color: var(--fe-label); }
.order-method-card .order-method-words-label + .order-method-words { margin-top: 6px; }
.order-method-words li {
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--fe-sand);
  color: var(--fe-earth);
  font-size: 14px;
  font-weight: 700;
}

/* Confirmed: one line, and Change. */
.order-method-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
}
.order-method-done-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 16px; }
.order-method-done-line strong { color: var(--fe-green); }
.order-method-change { min-height: 44px; padding: 0 4px; font-weight: 600; }

/* The study until a method is confirmed. */
.order-study { border: 0; margin: 0; padding: 0; min-width: 0; }
.order-study-lock {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px dashed var(--fe-field-border);
  border-radius: var(--fe-radius);
  background: var(--fe-bg);
  color: var(--fe-muted);
  font-size: 15px;
  font-weight: 600;
}
.order-study:disabled .order-tiers,
.order-study:disabled .order-code,
.order-study:disabled .order-confirms { opacity: 0.55; }
.order-study:disabled .order-tier { cursor: not-allowed; }

/* Step 1 with the method check: the registry's line under REDD+, Blue carbon and Other. */
.order-type-scope {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--fe-radius);
  background: var(--fe-info-bg);
  color: var(--fe-green);
}
.order-type-scope:empty { display: none; }

/* ── after payment ── */
.order-next { margin: 16px 0 0 20px; display: grid; gap: 6px; font-size: 15px; }
.order-method-paid { margin-top: 12px; font-size: 15px; }
.order-method-when { color: var(--fe-muted); }

/* ── /account ── */
.account-list { max-width: 820px; }
.account-who { font-size: 15px; }
.account-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.account-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main chip" "actions actions";
  gap: 10px 16px;
  align-items: start;
}
.account-card-main { grid-area: main; min-width: 0; }
.account-card .order-chip { grid-area: chip; }
.account-card-actions { grid-area: actions; }
.account-card-title {
  font-family: var(--fe-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--fe-green);
  overflow-wrap: anywhere;
}
.account-card-meta { margin-top: 4px; font-size: 14px; color: var(--fe-muted); }
.account-footer-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.account-footer-actions:empty { display: none; }
@media (min-width: 720px) {
  .account-card {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "main chip actions";
    align-items: center;
  }
}

.order-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--fe-green-pale);
  color: var(--fe-green);
}
.order-chip.is-amber { background: var(--fe-badge-amber-bg); color: var(--fe-badge-amber-text); }
.order-chip.is-earth { background: var(--fe-sand); color: var(--fe-earth); }
.order-chip.is-muted { background: var(--fe-chip-muted-bg); color: var(--fe-muted); }
.order-chip.is-green-solid { background: var(--fe-green); color: var(--fe-on-dark); }

/* ── /account/orders/{id} ── */
.order-detail {
  position: relative;
  margin: var(--fe-overlap) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 900px) {
  .order-detail { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
.order-detail-side { display: grid; gap: 16px; }
.order-side-card { padding: 20px 22px; }
.order-side-card h2 { font-size: 18px; margin-bottom: 10px; }
.order-side-card p { font-size: 15px; }
.order-status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.order-status-text { margin-top: 18px; font-size: 16px; }
.order-status-text p + p { margin-top: 8px; }
.order-stalled { color: var(--fe-earth); font-weight: 600; }
.order-expected {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--fe-radius);
  background: var(--fe-info-bg);
  color: var(--fe-green);
  font-size: 15px;
}

.order-rail {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.order-rail-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--fe-muted);
}
.order-rail-step + .order-rail-step::before {
  content: "";
  position: absolute;
  top: 13px;
  right: calc(50% + 18px);
  width: calc(100% - 28px);
  height: 2px;
  background: var(--fe-border);
}
.order-rail-step.is-done + .order-rail-step::before { background: var(--fe-green-light); }
.order-rail-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--fe-border);
  color: var(--fe-text);
}
.order-rail-step.is-done { color: var(--fe-green); }
.order-rail-step.is-done .order-rail-dot { background: var(--fe-green-pale); color: var(--fe-green); }
.order-rail-dot svg { display: block; }
.order-rail-step.is-current { color: var(--fe-green); }
.order-rail-step.is-current .order-rail-dot { background: var(--fe-green); color: var(--fe-on-dark); }
@media (max-width: 640px) {
  .order-rail { grid-template-columns: 1fr; gap: 10px; }
  .order-rail-step { flex-direction: row; text-align: left; }
  .order-rail-step + .order-rail-step::before { display: none; }
}

.order-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  font-size: 15px;
}
.order-facts dt { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--fe-label); }
.order-facts dt:first-child { margin-top: 0; }
.order-facts dd { margin: 0; overflow-wrap: anywhere; }