/* Shared shell for the craftbolt.net app screens (wizards, forms, account).
   The landing page keeps its own inline styles; everything past it lives here. */

:root {
  --ink: #0c1220;
  --ink-soft: #3a4558;
  --muted: #6a7386;
  --paper: #eef2f7;
  --line: rgba(12, 18, 32, 0.1);
  /* Same signal colours as the landing page: bright variants for fills and borders,
     -ink variants darkened enough to read as small text on white. */
  --blue: #0057ff;
  --blue-deep: #0040c4;
  --blue-ink: #0047ff;
  --orange: #ff7a00;
  --orange-ink: #cc4a00;
  --red: #ff0a44;
  --red-ink: #e0003c;
  /* Kept for the success mark only — company demands are red across the site. */
  --green: #15803d;
  --navy: #0a2744;
  --navy-deep: #06182c;
  --font: Manrope, system-ui, sans-serif;
  --max: 1440px;
  --pad: clamp(1.1rem, 3.5vw, 2rem);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }

/* —— top bar —— */
.top {
  background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #123a63);
  padding: 0.85rem 0;
}
.top-inner { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; }
/* Same as the homepage: mark on the left, actions on the right. The back
   arrow sits beside the mark — never a third space-between slot that
   parks the logo in the middle of the bar. */
.top-inner > .top-back { order: 0; flex: 0 0 auto; }
.top-inner > .brand { order: 1; margin-inline-start: 0; }
.top-inner > .top-actions { order: 2; margin-inline-start: auto; }
.online-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: rgba(244, 247, 251, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.online-dot {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  flex: none;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7);
  animation: cb-online-pulse 1.6s ease-out infinite;
}
.online-count { font-variant-numeric: tabular-nums; font-weight: 800; color: #fff; }
@media (max-width: 720px) {
  .online-label { display: none; }
  .online-widget { min-width: 0; font-size: 0.66rem; }
}
@keyframes cb-online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.65); }
  70% { box-shadow: 0 0 0 0.5rem rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}
.brand img { display: block; height: 30px; width: auto; }
.top-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.top-back:hover,
.top-back:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.top-back svg { display: block; width: 1.15rem; height: 1.15rem; }
.top-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: 0;
}
/* Same pill as on the landing page, which carries its own copy of this rule
   because it has no stylesheet of its own. */
.top-link {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(244, 247, 251, 0.85); white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  padding: 0.34rem 0.78rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.top-link:hover {
  color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.07);
}
/* Signed in, the row carries the account pill, the way out and the language
   picker, and on a phone the three of them ran off the right-hand edge. They
   drop to a second line instead, and the picker loses a label that the codes
   in the list say for themselves. */
@media (max-width: 720px) {
  .top { --pad: 0.85rem; padding: 0.55rem 0; }
  .top-inner {
    flex-wrap: nowrap;
    row-gap: 0.45rem;
    gap: 0.45rem;
  }
  .brand img { height: 20px; }
  .top-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
  }
  .top-actions #nav-account { margin-left: 0; }
  .top-actions .btn-ghost { padding: 0.4rem 0.8rem; font-size: 0.74rem; }
  .top-signout { padding: 0.4rem 0.15rem; font-size: 0.74rem; }
  .top-link {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    padding: 0.34rem 0.7rem;
    flex: 0 0 auto;
  }
  .lang-wrap label { display: none; }
  #lang-switch { padding: 0.4rem 1.45rem 0.4rem 0.6rem; font-size: 0.72rem; }
}
.top-signout {
  background: none;
  border: 0;
  padding: 0.55rem 0.2rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(244, 247, 251, 0.7);
  cursor: pointer;
  transition: color 0.15s ease;
}
.top-signout:hover { color: #fff; text-decoration: underline; }
.top-signout:disabled { opacity: 0.5; cursor: default; }

.lang-wrap { display: flex; align-items: center; gap: 0.4rem; }
.lang-wrap label {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(244, 247, 251, 0.55);
}
#lang-switch {
  appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06);
  color: #fff; border-radius: 999px; padding: 0.45rem 1.65rem 0.45rem 0.7rem;
  font-size: 0.78rem; font-weight: 800;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c8d0dc' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.55rem center;
}
#lang-switch option { color: var(--ink); }

.top-tag {
  display: inline-block; border-radius: 999px; padding: 0.4rem 0.9rem;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; color: #fff;
  background: var(--blue);
}
.top-tag--red { background: var(--red); }
.top-tag--orange { background: var(--orange); color: #23180a; }

/* Anything with a display of its own outranks the browser default behind the
   hidden attribute, and a button that hides itself only in some places is worse
   than no attribute at all. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; padding: 0.72rem 1.4rem;
  font-weight: 800; font-size: 0.88rem; letter-spacing: 0.02em;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Outlined. White on white reads as a bold word rather than something to press,
   which was being patched section by section until it was every section. */
.btn-ghost {
  background: #fff; color: var(--ink); padding: 0.55rem 1rem; font-size: 0.84rem;
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-deep); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #d10036; }
/* Near-black on the bright orange: white would drop to 2.6:1 and go mushy. */
.btn-orange { background: var(--orange); color: #231404; }
.btn-orange:hover { background: #e56a00; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* —— step page —— */
.step {
  flex: 1 1 auto; display: flex; align-items: center;
  padding: clamp(1.75rem, 5vh, 3.25rem) 0 clamp(2rem, 6vh, 3.5rem);
}
.step > .wrap { width: min(100% - 2 * var(--pad), 62rem); }
.step-mark {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 0.55rem;
}
.step h1 {
  margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.35rem);
  font-weight: 800; letter-spacing: -0.028em; line-height: 1.12;
}
.step .sub {
  margin: 0.6rem 0 0; max-width: 52ch;
  font-size: clamp(0.92rem, 1.3vw, 1.05rem); font-weight: 500;
  color: var(--ink-soft); line-height: 1.5;
}

/* —— choice cards —— */
.choices {
  display: grid; gap: clamp(0.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  margin: clamp(1.5rem, 4vh, 2.4rem) 0 0;
  padding: 0; border: 0;
}
.choices legend { padding: 0; }

/* The hand is half the answer to "is this thing clickable": a label wrapping a
   radio keeps the arrow cursor unless it is asked not to. */
.choice { position: relative; display: block; cursor: pointer; }
/* Keep the radio in the accessibility tree and focusable; the card is the visual control. */
.choice input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.choice-body {
  display: flex; flex-direction: column; gap: 0.55rem; height: 100%;
  background: #fff; border: 2px solid transparent;
  box-shadow: 0 1px 0 var(--line), 0 14px 34px rgba(12, 18, 32, 0.07);
  border-radius: 16px; padding: clamp(1.15rem, 2.4vw, 1.6rem);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Pointing at a card colours it in its own colour — blue for the private card,
   red for the company one. A two-pixel lift and a slightly deeper shadow are
   the sort of thing you only notice if you were already looking for it, and
   somebody who does not see well would never learn these are buttons. */
.choice:hover .choice-body {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  box-shadow: 0 1px 0 var(--line), 0 20px 42px color-mix(in srgb, var(--accent) 22%, transparent);
}
.choice input:focus-visible + .choice-body { outline: 3px solid var(--accent); outline-offset: 3px; }

/* The card already chosen keeps a ring around it, so it stays apart from
   whichever card the mouse happens to be resting on. */
.choice input:checked + .choice-body {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent),
    0 14px 34px rgba(12, 18, 32, 0.07);
}

.choice-top { display: flex; align-items: center; gap: 0.7rem; }
.choice-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.choice h2 { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 800; letter-spacing: -0.015em; }
.choice p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.choice ul {
  margin: 0.2rem 0 0; padding: 0; list-style: none;
  display: grid; gap: 0.3rem; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft);
}
.choice li { padding-left: 1.1rem; position: relative; }
.choice li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.choice--private { --accent: var(--blue); }
.choice--company { --accent: var(--red); }

.step-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
}
.step-back { font-size: 0.86rem; font-weight: 700; color: var(--muted); }
.step-back:hover { color: var(--ink); }

.step-note {
  margin: clamp(1.4rem, 3.5vh, 2.2rem) 0 0;
  font-size: 0.82rem; color: var(--muted); font-weight: 600;
}

/* —— wizard —— */
.wiz { width: min(100% - 2 * var(--pad), 46rem); margin-inline: auto; }
.wiz-shell {
  width: min(100% - 2 * var(--pad), 46rem);
  max-width: 46rem;
  margin-inline: auto;
}
.wiz-shell .wiz { width: 100%; margin-inline: 0; }
.step--wiz {
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.bar { height: 4px; border-radius: 999px; background: rgba(12, 18, 32, 0.1); margin: 0 0 1.1rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); border-radius: 999px; transition: width 0.25s ease; }

.step-body { margin-top: clamp(1.2rem, 3vh, 1.9rem); display: grid; gap: clamp(1.1rem, 2.6vh, 1.6rem); }

.field { display: grid; gap: 0.45rem; }
.label { margin: 0; font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 0.5rem; }
.opt-tag { font-size: 0.7rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.hint { margin: -0.1rem 0 0.15rem; font-size: 0.84rem; color: var(--muted); font-weight: 600; line-height: 1.45; }

.control {
  width: 100%; font: inherit; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid rgba(12, 18, 32, 0.16); border-radius: 11px;
  padding: 0.78rem 0.9rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.control::placeholder { color: #9aa3b2; font-weight: 500; }
.control:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
}
textarea.control { resize: vertical; line-height: 1.55; min-height: 9rem; }

/* A password field with the button that shows what was typed. The input keeps
   room on the right for it rather than sliding underneath. */
.pw { position: relative; display: block; }
.pw .control { padding-right: 5.5rem; }
.pw-eye {
  position: absolute; inset-block: 0; right: 0.35rem; margin: auto 0;
  height: 2rem; padding: 0 0.6rem; border: 0; border-radius: 8px;
  background: rgba(12, 18, 32, 0.06); color: var(--ink-soft);
  font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.pw-eye:hover { background: rgba(12, 18, 32, 0.11); color: var(--ink); }
.pw-eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.err { margin: 0; font-size: 0.83rem; font-weight: 700; color: #b91c1c; }
.err-form { margin-top: 0.9rem; }
.field--bad .control { border-color: #b91c1c; }

select.control {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236a7386' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center;
}

/* —— address suggestions —— */

.pl { position: relative; display: grid; gap: 0.4rem; }

.pl-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin: 0.3rem 0 0; padding: 0.25rem; list-style: none;
  max-height: 17rem; overflow-y: auto;
  background: #fff; border: 1px solid rgba(12, 18, 32, 0.16); border-radius: 11px;
  box-shadow: 0 18px 40px rgba(12, 18, 32, 0.16);
}
.pl-opt {
  display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem;
  border-radius: 8px; cursor: pointer;
}
/* The highlight follows the arrow keys as well as the mouse, so a keyboard
   user can see which suggestion Enter would take. */
.pl-opt:hover, .pl-opt--on { background: color-mix(in srgb, var(--blue) 10%, #fff); }
.pl-main { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.pl-rest { font-size: 0.79rem; font-weight: 600; color: var(--muted); }

.pl-locate {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 0.83rem; font-weight: 800;
  color: var(--blue); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.pl-locate:hover { color: var(--blue-deep); }
.pl-locate:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.pl-pin { width: 1rem; height: 1rem; flex-shrink: 0; }

.pl-note { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); }

/* address rows */
.field-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.7rem, 1.8vh, 1rem) 0.75rem; }
@media (max-width: 34rem) {
  .field-grid > * { grid-column: span 6 !important; }
}

.step-section { margin: 0.5rem 0 -0.35rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.step-section h2 { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.015em; }
.step-section .hint { margin-top: 0.3rem; }

/* attachments */
.up {
  border: 1px dashed rgba(12, 18, 32, 0.24); border-radius: 12px;
  padding: 0.85rem 0.9rem; background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.up--over { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, #fff); }
.up-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.up-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.up-btn {
  border: 1px solid rgba(12, 18, 32, 0.2); background: #f4f6fa; color: var(--ink);
  border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 800;
}
.up-btn:hover:not(:disabled) { background: #e9edf4; }
.up-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.up-count { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.up-status { margin: 0.6rem 0 0; font-size: 0.82rem; font-weight: 700; color: #b45309; line-height: 1.45; }
.up-list { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.up-item {
  display: flex; align-items: center; gap: 0.65rem;
  background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 0.4rem 0.5rem;
}
.up-thumb { width: 2.4rem; height: 2.4rem; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: #e7ebf2; }
.up-thumb--doc {
  display: grid; place-items: center; font-size: 0.62rem; font-weight: 800;
  color: var(--muted); letter-spacing: 0.04em;
}
.up-name {
  flex: 1 1 auto; min-width: 0; font-size: 0.84rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.up-size { font-size: 0.76rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.up-del {
  border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1;
  padding: 0.15rem 0.35rem; border-radius: 6px; flex-shrink: 0;
}
.up-del:hover { background: rgba(255, 10, 68, 0.1); color: var(--red-ink); }

/* option grids (categories, countries) */
.opt-tools { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.link-btn {
  background: none; border: 0; padding: 0; font-size: 0.83rem; font-weight: 800;
  color: var(--blue); text-decoration: underline; text-underline-offset: 3px;
}
.opt-grid {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
}

.cat-suggest { margin-top: 0.7rem; }
.cat-suggest-open {
  display: inline; padding: 0; border: 0; background: none;
  font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.45;
  color: var(--muted); text-align: left; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.cat-suggest-open:hover { color: var(--ink-soft); }
.cat-suggest-form {
  display: grid; gap: 0.45rem; margin-top: 0.55rem;
  max-width: 26rem;
}
.cat-suggest-form input,
.cat-suggest-form textarea {
  width: 100%; font: inherit; font-size: 0.88rem;
  padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
}
.cat-suggest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.cat-suggest-status { margin: 0.45rem 0 0; font-size: 0.82rem; line-height: 1.45; }
.cat-suggest-status--ok { color: var(--green); font-weight: 700; }
.cat-suggest-status--bad { color: var(--red-ink); font-weight: 700; }
.opt { position: relative; display: block; }
.opt input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.opt-face {
  display: block; background: #fff; border: 1px solid rgba(12, 18, 32, 0.14);
  border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.88rem; font-weight: 700;
  color: var(--ink-soft); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.opt:hover .opt-face { border-color: rgba(12, 18, 32, 0.3); }
.opt input:checked + .opt-face {
  border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, #fff); color: var(--blue-deep);
}
.opt input:focus-visible + .opt-face { outline: 3px solid var(--blue); outline-offset: 2px; }

/* consent + callouts */
.consent {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); line-height: 1.5; cursor: pointer;
}
.consent input { margin: 0.18rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--blue); flex-shrink: 0; }
.consent a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.callout {
  margin: 0; background: color-mix(in srgb, var(--blue) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 11px; padding: 0.85rem 1rem;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); line-height: 1.55;
}
.callout b { color: var(--ink); }

/* summary */
.sum { margin: 0; display: grid; gap: 0.1rem; background: #fff; border-radius: 13px; padding: 0.4rem 0.2rem; box-shadow: 0 1px 0 var(--line), 0 10px 26px rgba(12, 18, 32, 0.06); }
.sum-row { display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem 1rem; padding: 0.6rem 0.95rem; border-bottom: 1px solid var(--line); }
.sum-row:last-child { border-bottom: 0; }
.sum dt { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; color: var(--muted); }
.sum dd { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 34rem) { .sum-row { grid-template-columns: 1fr; gap: 0.15rem; } }

/* Outlined rather than bare. A word floating on the background reads as a
   caption until you happen to hover it, and the way back out of a seven-step
   form should not be something you have to discover. */
.btn-plain {
  background: transparent; color: var(--ink-soft);
  padding: 0.72rem 1.4rem; border: 1px solid var(--line);
}
.btn-plain:hover { color: var(--ink); border-color: var(--ink-soft); background: rgba(12, 18, 32, 0.03); }

/* The two ends of a step: back where it came from, on to the next. Pushed apart
   so neither is clicked by accident while aiming for the other. */
.step-actions--pair { justify-content: space-between; }

/* done panel */
.done { margin-top: 0.4rem; display: grid; gap: 0.85rem; justify-items: start; }
.done-mark {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--green) 12%, #fff); color: var(--green);
  font-size: 1.35rem; font-weight: 800;
}
.done h1 { margin: 0; }
.done .sub { margin: 0; }

/* —— footer —— */
.app-foot {
  margin-top: auto;
  width: 100%;
  max-width: none;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  background: var(--paper);
}
.app-foot-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 0.55rem 1.35rem;
}
.app-foot a, .app-foot span {
  display: inline-flex; align-items: center; gap: 0.4rem;
  line-height: 1; white-space: nowrap;
  color: inherit; text-decoration: none;
}
.app-foot a:hover, .app-foot a:focus-visible { color: var(--ink); text-decoration: underline; }
.foot-ico { flex: none; width: 14px; height: 14px; display: block; }
.foot-mark { width: 18px; height: 18px; object-fit: contain; }
.foot-links { display: contents; }

@media (prefers-reduced-motion: reduce) {
  .btn, .choice-body { transition: none; }
  .btn:hover, .choice:hover .choice-body { transform: none; }
}