/* forms.css: form controls and form pages (DESIGN-PLAN §2.12 "Form alanı", "KVKK bloğu",
   "Adım göstergesi"; §5.15 kurulum talebi, §5.16 lokasyon öner, §5.17 sorun bildir, §5.22 iletişim).
   Only design tokens; full width layout with the grid gutters; mobile first.
   Class prefix fm- (forms module). The stepped stripe meter is the shared .stripe-steps (motion.css). */

/* ---------- Page frame: the H1 is in the site's page head band above (site.css .page-head); the gray
   section below it holds the page's content ---------- */
.fm-page { padding-block: var(--sp-6) var(--section-y); }
@media (min-width: 768px) { .fm-page { padding-top: var(--sp-8); } }

/* ---------- Layout: form 8/12 + side 4/12; from 1600 px 6/3/3 ---------- */
.fm-layout { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.fm-main { min-width: 0; }
.fm-side { display: grid; gap: var(--grid-gap); align-content: start; min-width: 0; }
.fm-side-stack { display: grid; gap: var(--grid-gap); align-content: start; }
@media (min-width: 1024px) {
  .fm-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .fm-side { position: sticky; top: calc(var(--topbar-h-compact) + var(--header-h-compact) + var(--sp-6)); }
}
@media (min-width: 1600px) {
  .fm-layout { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .fm-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Report a problem: form 8 of 12 columns (7 from 1600 px), the aside ("Acil mi?", "Sorun Bildirirken")
   sticks under the header, top aligned with the form card. forms-issue.js writes the aside's height to
   --fm-aside-h: an aside taller than the screen scrolls first and then sticks by its bottom edge.
   Phones and tablets: a copy of "Acil mi?" above the form, the aside after it. */
.fm-layout--issue { --fm-side-top: calc(var(--topbar-h-compact) + var(--header-h-compact) + var(--sp-6)); }
.fm-layout--issue .fm-urgent--side { display: none; }
@media (min-width: 1024px) {
  .fm-layout--issue .fm-urgent--top { display: none; }
  .fm-layout--issue .fm-urgent--side { display: flex; }
  .fm-side--issue { top: min(var(--fm-side-top), calc(100vh - var(--fm-aside-h, 0px) - var(--sp-6))); container: fm-aside / inline-size; }
}
@media (min-width: 1600px) {
  .fm-layout--issue { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .fm-side--issue { grid-template-columns: minmax(0, 1fr); }
}
.fm-urgent--top { margin-bottom: var(--grid-gap); }

.fm-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
@media (min-width: 768px) { .fm-panel { padding: var(--sp-8); } }

/* ---------- Form and fields ---------- */
.fm { display: flex; flex-direction: column; gap: var(--sp-5); margin: 0; }
.fm-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.fm-label {
  padding: 0;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}
.fm-opt { color: var(--muted); font-weight: var(--fw-regular); }
.fm-input {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.fm-input::placeholder { color: var(--muted); opacity: 1; }
.fm-input:hover { border-color: var(--ink-2); }
.fm-input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring), 0 0 0 4px rgba(var(--shadow-tint), .12); }
.fm-textarea { min-height: 120px; resize: vertical; }
.fm-select-wrap { position: relative; }
.fm-select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.fm-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--ink);
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fm-help { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.fm-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--form-error); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.45; }
.fm-err .i { margin-top: 1px; }
.fm-field.is-invalid > .fm-input,
.fm-field.is-invalid .fm-select-wrap > .fm-input { border-width: 2px; border-color: var(--form-error); padding: 10px 13px; }
.fm-field.is-invalid .fm-select { padding-right: 43px; }
.fm-row { display: grid; gap: var(--sp-5) var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .fm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-field--short { max-width: 320px; }
  .fm-row--infra { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); align-items: start; }
}
.fm-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fm-linkbtn:hover { color: var(--accent-hover); }
.fm-hint { display: flex; gap: var(--sp-2); margin: calc(var(--sp-2) * -1) 0 0; color: var(--ink-2); font-size: var(--fs-small); max-width: none; }
.fm-hint .i { flex: none; margin-top: 2px; color: var(--muted); }

/* Radio chips (pill, 36 px with a 44 px touch area). The real radio sits on top, transparent. */
.fm-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fm-chip { position: relative; display: inline-flex; }
.fm-chip input { position: absolute; inset: -4px 0; width: 100%; height: calc(100% + 8px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.fm-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--chip-h);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fm-chip .fm-chip-check { display: none; }
.fm-chip:hover > span { border-color: var(--ink); background: var(--bg-alt); }
.fm-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.fm-chip input:checked + span .fm-chip-check { display: block; }
.fm-chip input:focus-visible + span { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.fm-field.is-invalid .fm-chip > span { border-color: var(--form-error); }

/* Radio cards (segment choice): 1 px border, selected 2 px navy border and a check. */
.fm-cards { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .fm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fm-card-opt { position: relative; display: block; }
.fm-card-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.fm-card-body {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
  min-height: 88px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.fm-card-ico { color: var(--ink); flex: none; }
.fm-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fm-card-title { color: var(--ink); font-weight: var(--fw-semibold); line-height: 1.3; }
.fm-card-hint { color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.fm-card-check { margin-left: auto; flex: none; color: var(--ink); opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.fm-card-opt:hover .fm-card-body { border-color: var(--line-hover); box-shadow: var(--shadow-1); }
.fm-card-opt input:checked + .fm-card-body { border: 2px solid var(--ink); padding: calc(var(--sp-4) - 1px) calc(var(--sp-5) - 1px); }
.fm-card-opt input:checked + .fm-card-body .fm-card-check { opacity: 1; }
.fm-card-opt input:focus-visible + .fm-card-body { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.fm-field.is-invalid .fm-card-body { border-color: var(--form-error); }

/* Checkboxes and the KVKK block (13 px notice right above the button). */
.fm-check { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; cursor: pointer; }
.fm-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.fm-kvkk .fm-check { font-size: .8125rem; }
.fm-kvkk a { color: var(--ink); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.fm-kvkk a:hover { color: var(--accent-hover); }
.fm-field--check.is-invalid .fm-check input { outline: 2px solid var(--form-error); outline-offset: 2px; }

/* Honeypot: off screen for people, still in the DOM for bots. */
.fm-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.fm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.fm-actions .btn { min-width: 0; }
@media (max-width: 479.98px) { .fm-actions > .btn[data-submit], .fm-actions > .btn[type="submit"] { width: 100%; } }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"] > * { visibility: hidden; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-color: var(--on-accent) transparent var(--on-accent) var(--on-accent);
  border-radius: 50%;
  animation: fm-spin .8s linear infinite;
  visibility: visible;
}
.btn--outline[aria-busy="true"]::after { border-color: var(--ink) transparent var(--ink) var(--ink); }
@keyframes fm-spin { to { transform: rotate(360deg); } }

/* Error summary, banners, success */
.fm-errsum {
  padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--form-error);
  border-radius: var(--r-md);
  background: var(--surface);
}
.fm-errsum:focus { outline: none; box-shadow: 0 0 0 4px rgba(var(--shadow-tint), .12); }
.fm-errsum-title { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); color: var(--form-error); font-weight: var(--fw-bold); }
.fm-errsum ul { margin: 0; padding-left: 28px; display: grid; gap: 4px; }
.fm-errsum a { color: var(--ink); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; }
.fm-banner { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-small); }
.fm-banner p { margin: 0; max-width: none; }
.fm-banner .i { flex: none; margin-top: 1px; }
.fm-banner--error { border: 2px solid var(--form-error); color: var(--ink); }
.fm-banner--error .i { color: var(--form-error); }
.fm-banner--info { background: var(--bg-tint); color: var(--ink); }

.fm-success { display: flex; align-items: flex-start; gap: var(--sp-4); }
.fm-success:focus { outline: none; }
.fm-success-ico { flex: none; width: 40px; height: 40px; color: var(--status-available-fill, var(--ink)); }
/* Success with a drawing (installation: form-success.svg): on top on phones, beside the text from 768 px. */
.fm-success--art { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.fm-success-art { width: min(100%, 240px); }
@media (min-width: 768px) {
  .fm-success--art { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--sp-8); }
  .fm-success--art .fm-success-art { order: 2; width: 280px; }
}
.fm-success-body { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.fm-success-title { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.2; outline: none; }
.fm-success-ref { margin: 0; color: var(--ink-2); }
.fm-success-ref strong { color: var(--ink); font-size: 1.25rem; letter-spacing: .02em; }
.fm-success-sub { margin-top: var(--sp-3); font-size: var(--fs-h4); }
.fm-success-note { color: var(--muted); font-size: var(--fs-small); }
.fm-success-links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.fm-timeline { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.fm-timeline li { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-2); }
.fm-timeline-no, .fm-next-no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
/* After a successful request the side column does not repeat the next steps of the success panel. */
.fm-layout:has(.fm-success) .fm-side-card--next { display: none; }
.fm-timeline li.is-current .fm-timeline-no { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* ---------- Side cards ---------- */
.fm-side-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.fm-side-card--tint { border-color: transparent; background: var(--bg-tint); }
.fm-side-ico { color: var(--ink); }
.fm-side-title { font-size: var(--fs-h4); line-height: 1.33; }
/* Spot drawings in the side column (suggest-location.svg), decorative. */
.fm-side-art { width: min(100%, 220px); }
.fm-side-text { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.fm-side-strong { margin: 0; color: var(--ink); font-weight: var(--fw-bold); font-size: 1.125rem; }
.fm-side-phone { color: var(--ink); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: var(--fw-bold); font-stretch: var(--stretch-heading); text-decoration: none; }
.fm-side-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.fm-next { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.fm-next li { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); font-weight: var(--fw-medium); }

/* Report a problem: urgent card (navy) and the station card (name, district, chosen device; its state only
   when that device is out of service or unknown, DECISIONS 28.09.2026) */
.fm-urgent { gap: var(--sp-4); padding: var(--sp-6); border-color: transparent; background: var(--band); color: var(--on-band-muted); }
.fm-urgent .fm-side-ico, .fm-urgent-title { color: var(--on-band); }
.fm-urgent-head { display: flex; align-items: center; gap: var(--sp-3); }
.fm-urgent-head .fm-side-ico { flex: none; }
.fm-urgent-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.fm-urgent p { margin: 0; }
.fm-urgent .btn { white-space: normal; text-align: center; }

/* Report a problem: "Sorun Bildirirken" card. Title with the report drawing beside it, three numbered
   tips, then quick links as rows between hairlines. */
.fm-guide { gap: var(--sp-5); padding: var(--sp-6); border-radius: var(--r-lg); }
.fm-guide-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.fm-guide-art { flex: none; width: 112px; margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) calc(var(--sp-1) * -1) 0; }
.fm-tips { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.fm-tips li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.fm-tip-no {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--band);
  color: var(--on-band);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.fm-quick { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fm-quick li { border-bottom: 1px solid var(--line); }
.fm-quick li:last-child { border-bottom: 0; }
.fm-quick-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.fm-quick-link > span { flex: 1 1 auto; min-width: 0; }
.fm-quick-ico { flex: none; color: var(--ink-2); }
.fm-quick-go { flex: none; color: var(--ink); transition: transform var(--dur-2) var(--ease); }
.fm-quick-link:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.fm-quick-link:hover .fm-quick-go { transform: translateX(3px); }
/* A wide aside (from 1600 px): a larger drawing and the quick links in two columns. */
@container fm-aside (min-width: 560px) {
  .fm-guide-art { width: 136px; }
  .fm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
  .fm-quick li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* Station card with the station fields in the form: a compact tinted box (icon beside the text),
   no second frame inside the form card. */
.fm-issue-form .fm-station {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-color: transparent;
  background: var(--bg-alt);
}
.fm-issue-form .fm-station[hidden] { display: none; }
.fm-issue-form .fm-station > * { grid-column: 2; }
.fm-issue-form .fm-station > .fm-side-ico { grid-column: 1; grid-row: 1 / span 6; }
.fm-issue-form .fm-station > .link { justify-self: start; margin-top: var(--sp-1); }
.fm-station-title { font-size: var(--fs-h4); }
.fm-station-name { margin: 0; color: var(--ink); font-weight: var(--fw-semibold); font-size: 1.0625rem; }
.fm-station-addr, .fm-station-label { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.fm-station-now { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); }
.fm-station-evse { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.fm-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 10px 0 6px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.fm-state--fault { background: var(--status-fault-tint); color: var(--status-fault); }
.fm-state--unknown { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); border: 0; }
.fm-state-since { color: var(--muted); font-size: var(--fs-micro); }

/* Station search (combobox) */
.fm-station-search { position: relative; display: grid; gap: var(--sp-2); }
.fm-combo {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 4px);
  z-index: 5;
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.fm-combo li { padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; }
.fm-combo li[aria-selected="true"], .fm-combo li:hover { background: var(--bg-alt); }
.fm-combo-name { display: block; color: var(--ink); font-weight: var(--fw-semibold); }
.fm-combo-meta { display: block; color: var(--muted); font-size: var(--fs-small); }

/* Photo upload */
.fm-upload-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-alt);
}
.fm-upload-ico { color: var(--ink); flex: none; }
.fm-file { min-width: 0; max-width: 100%; font-size: var(--fs-small); color: var(--ink-2); }
.fm-file::file-selector-button {
  margin-right: var(--sp-3);
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.fm-upload-preview { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-sm); background: var(--bg-tint); }
/* With JavaScript: a button and the file name in the page language; the real input stays focusable. */
.fm-upload.is-custom .fm-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fm-upload.is-custom .fm-file:focus-visible + .fm-file-btn { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.fm-file-btn { cursor: pointer; }
.fm-file-name { min-width: 0; color: var(--ink-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.fm-upload.is-invalid .fm-upload-box { border: 2px solid var(--form-error); }

/* Sections inside a form (suggest form parts, contact details of a report) */
.fm-part { display: flex; flex-direction: column; gap: var(--sp-5); margin: 0; padding: 0; border: 0; min-width: 0; }
/* Space above a part is a margin: padding of a fieldset would sit between its legend and its fields. */
.fm-part + .fm-part { margin-top: var(--sp-8); }
.fm-part-legend { display: flex; align-items: center; gap: var(--sp-3); padding: 0; margin-bottom: var(--sp-5); }
.fm-part--plain .fm-part-legend { margin-bottom: var(--sp-4); }
.fm-part-no {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
}
.fm-part-title { color: var(--ink); font-size: var(--fs-h4); font-weight: var(--fw-title); line-height: 1.33; }

/* ---------- Installation request: steps ---------- */
.fm-progress { display: grid; gap: var(--sp-3); }
.fm-progress-list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; list-style: none; }
.fm-progress-item a, .fm-progress-item > .fm-progress-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.fm-progress-item a:hover { color: var(--ink); }
.fm-progress-no {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: var(--fs-micro);
}
.fm-progress-item.is-done a { color: var(--ink); }
.fm-progress-item.is-done .fm-progress-no { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.fm-progress-item.is-current a, .fm-progress-item.is-current > .fm-progress-label { color: var(--ink); }
.fm-progress-item.is-current .fm-progress-no { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.fm-progress-item--summary { display: none; }
.fm-steps-on .fm-progress-item--summary { display: list-item; list-style: none; }
.fm-meter { margin-top: var(--sp-1); }
/* Phones: only the current step keeps its name next to the numbers (the others stay for screen readers). */
@media (max-width: 559.98px) {
  .fm-progress-list { gap: var(--sp-2) var(--sp-3); }
  .fm-progress-item:not(.is-current) .fm-progress-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fm-steps-on .fm-progress-item--summary:not(.is-current) { display: none; }
}

.fm-step { display: flex; flex-direction: column; gap: var(--sp-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.fm-step + .fm-step { margin-top: var(--sp-10); }
.fm-steps-on .fm-step + .fm-step { margin-top: 0; }
.fm-step-legend { display: block; padding: 0; margin-bottom: var(--sp-5); }
.fm-step-title { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); line-height: 1.25; outline: none; }
.fm-step-nav { justify-content: flex-end; padding-top: var(--sp-2); }
.fm-step-nav [data-step-back] { margin-right: auto; }
.fm-steps-on .fm-step-nav { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.fm-extras { display: flex; flex-direction: column; gap: var(--sp-5); }
.fm-extras-title { margin: var(--sp-2) 0 0; color: var(--ink); font-weight: var(--fw-semibold); }
.fm-draft-note { color: var(--muted); font-size: var(--fs-small); }

.fm-summary-list { display: grid; gap: var(--sp-3); }
.fm-sum-card { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); }
.fm-sum-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.fm-sum-title { font-size: var(--fs-h4); }
.fm-dl { display: grid; gap: var(--sp-2) var(--sp-4); margin: 0; }
.fm-dl > div { display: grid; gap: 2px; }
@media (min-width: 768px) { .fm-dl > div { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } }
.fm-dl dt { color: var(--muted); font-size: var(--fs-small); }
.fm-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }

/* Map pin picker */
.fm-mapfield { display: grid; gap: var(--sp-3); }
.fm-mapfield > .btn { justify-self: start; }
.fm-map-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fm-map { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-tint); }
.fm-map-canvas { height: 300px; }
@media (min-width: 1024px) { .fm-map-canvas { height: 360px; } }
.fm-map .fm-help { max-width: none; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); background: var(--surface); }
.fm-map-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--status-available, var(--ink)); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.fm-map-status .num { color: var(--ink-2); font-weight: var(--fw-regular); }

/* ---------- Suggest a location ----------
   The form card comes right under the page head band, like the other form pages (the demand map is in
   the admin panel only). From 768 px the three parts read as a stepper: the numbered badge in a left
   gutter, a thin line down to the next badge, the fields beside it; the send row sits under a hairline. */
.fm-suggest-form > .fm-actions { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .fm-suggest-form .fm-part { padding-left: 48px; }
  .fm-suggest-form .fm-part-legend { margin-left: -48px; }
  .fm-suggest-form .fm-part + .fm-part { margin-top: 0; }
  /* The line is the fieldset's background (a fieldset's top padding would sit under its legend). A
     fieldset paints its background from the middle of its legend (16 px down), so the line starts 8 px
     under the badge and stops 8 px above the next one; the form's gap is taken into the padding. */
  .fm-suggest-form .fm-part:has(+ .fm-part) {
    margin-bottom: calc(var(--sp-5) * -1);
    padding-bottom: var(--sp-8);
    background: linear-gradient(var(--line-strong), var(--line-strong)) 15px 24px / 2px calc(100% - 32px) no-repeat;
  }
  .fm-suggest-form > .fm-actions { padding-left: 48px; }
}

/* Side column: what happens to a suggestion (drawing, four short steps joined by a line), then the call centre. */
.fm-how { gap: var(--sp-4); }
.fm-how-art { align-self: center; width: min(100%, 240px); }
.fm-next--flow { gap: var(--sp-4); }
.fm-next--flow li { position: relative; align-items: flex-start; color: var(--ink-2); font-weight: var(--fw-regular); line-height: 1.5; }
.fm-next--flow li > span:last-child { padding-top: 2px; }
.fm-next--flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  bottom: calc(var(--sp-4) * -1 + 4px);
  left: 13px;
  width: 2px;
  background: var(--line);
}

.fm-areas { margin: 0; padding: 0; list-style: none; }
.fm-area { display: flex; flex-direction: column; gap: var(--sp-3); }
.fm-area-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; }
.fm-area-title { font-size: var(--fs-h4); line-height: 1.33; overflow-wrap: anywhere; }
.fm-area-count { color: var(--ink); font-weight: var(--fw-semibold); }
.fm-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.fm-status--neutral { background: var(--bg-tint); color: var(--ink-2); }
.fm-status--info { background: var(--status-busy-tint); color: var(--status-busy); }
.fm-status--navy { background: var(--ink); color: var(--surface); }
.fm-status--good { background: var(--status-available-tint); color: var(--status-available); }
.fm-status--muted { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.fm-support { margin-top: auto; }
.fm-support > summary { list-style: none; cursor: pointer; width: fit-content; }
.fm-support > summary::-webkit-details-marker { display: none; }
.fm-support[open] > summary { margin-bottom: var(--sp-4); }
.fm-support-form { gap: var(--sp-4); }
.fm-support-done { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: auto; color: var(--ink-2); font-size: var(--fs-small); }
.fm-support-done .i { flex: none; color: var(--status-available); }
.fm-support-done p { margin: 0; }
.fm-owner {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--bg-tint);
}
.fm-owner > div { display: grid; gap: var(--sp-2); justify-items: start; }
.fm-owner p { margin: 0; }
.fm-owner-ico { flex: none; color: var(--ink); }
.fm-owner-title { color: var(--ink); font-weight: var(--fw-bold); }
.fm-owner--done { margin-top: var(--sp-2); }

.fm-cov-grid { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .fm-cov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .fm-cov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fm-cov-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.fm-cov-name { font-size: var(--fs-h4); }
.fm-cov-num { margin: 0; color: var(--muted); font-size: 1.125rem; }
.fm-cov-num strong { color: var(--ink); font-size: var(--fs-stat); }
.fm-cov-meter { gap: 3px; }
.fm-cov-text { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.fm-cov-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; list-style: none; }
.fm-cov-cities li { display: flex; justify-content: space-between; gap: var(--sp-2); padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); }
.fm-cov-cities .num { color: var(--ink); font-weight: var(--fw-semibold); }

/* Verification pages */
.fm-verify-card { display: grid; gap: var(--sp-5); justify-items: start; max-width: 720px; }
.fm-verify-text { margin: 0; font-size: var(--fs-intro); color: var(--ink-2); }

/* ---------- Tracking ---------- */
.fm-track-result { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--line); }
.fm-track-result:focus { outline: none; }
.fm-track-title { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); }
.fm-track-sub { font-size: var(--fs-h4); }
.fm-track-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .fm-track-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fm-track-steps li { display: grid; gap: 2px; color: var(--muted); }
.fm-track-steps li.is-reached .fm-track-name { color: var(--ink); }
.fm-track-name { font-weight: var(--fw-semibold); }
.fm-track-date { font-size: var(--fs-small); }

/* ---------- Blocks ---------- */
.fm-block-grid { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .fm-block-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .fm-block-grid--solo { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
@media (min-width: 1600px) {
  .fm-block-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .fm-block-grid--solo { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
  .fm-block-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fm-block-head { display: grid; gap: var(--sp-4); justify-items: start; }
.fm-block-main { display: grid; gap: var(--sp-5); min-width: 0; }
.fm-block-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.fm-block-meta { margin: 0; color: var(--muted); font-weight: var(--fw-semibold); }
.fm-block-side { display: grid; gap: var(--grid-gap); align-content: start; }
.fm-channels { display: grid; gap: var(--sp-3); }
.fm-channel {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.fm-channel:hover { border-color: var(--line-hover); box-shadow: var(--shadow-1); }
.fm-channel > span { display: grid; gap: 2px; min-width: 0; }
.fm-channel-label { color: var(--muted); font-size: var(--fs-small); }
.fm-channel-value { color: var(--ink); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.fm-channel .num.fm-channel-value { font-size: 1.375rem; font-weight: var(--fw-bold); }

.fm-seglinks { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .fm-seglinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fm-seglinks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .fm-seglinks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fm-seglink {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.fm-seglink:hover { border-color: var(--line-hover); box-shadow: var(--shadow-1); }
.fm-seglink:hover .fm-seglink-title { text-decoration: underline; text-underline-offset: 3px; }
.fm-seglink-ico { flex: none; color: var(--ink); }
.fm-seglink-text { display: grid; gap: 2px; min-width: 0; }
.fm-seglink-title { font-weight: var(--fw-semibold); }
.fm-seglink-hint { color: var(--muted); font-size: var(--fs-small); }
.fm-seglink-go { margin-left: auto; flex: none; transition: transform var(--dur-2) var(--ease); }
.fm-seglink:hover .fm-seglink-go { transform: translateX(3px); }
.section--navy .fm-seglink { border-color: var(--on-band-line); background: var(--band-raised); color: var(--on-band); }
.section--navy .fm-seglink-ico, .section--navy .fm-seglink-title { color: var(--on-band); }
.section--navy .fm-seglink-hint { color: var(--on-band-muted); }

.fm-cta { display: grid; gap: var(--sp-5); padding: var(--cta-pad); border-radius: var(--r-xl); background: var(--bg-tint); }
@media (min-width: 1024px) { .fm-cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.section--navy .fm-cta { background: var(--band-raised); }
.fm-cta-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.fm-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }
.fm-cta-phone { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-weight: var(--fw-bold); font-size: 1.125rem; text-decoration: none; }
.section--navy .fm-cta-phone { color: var(--on-band); }
.fm-toplist { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.fm-toplist a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
}
.fm-toplist a:hover { border-color: var(--line-hover); }
.fm-toplist-name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.fm-toplist-n { grid-column: 1; color: var(--muted); font-size: var(--fs-small); }
.fm-toplist .fm-status { grid-column: 2; grid-row: 1 / span 2; }

@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation-duration: 2s; }
}

/* Embedded in another module's column (for example the contact page): only the form card. */
.fm-embed { display: grid; gap: var(--sp-4); min-width: 0; }
.fm-embed.fm-cta-actions { display: flex; }

/* ---------- Short installation start (install-short) ----------
   Province, car park type and the red main button in one row when the form is at least 700 px wide;
   province and chips side by side with the button under them from 540 px; stacked below that, with the
   four chips as a tidy 2 x 2 grid on phones. */
.fm-start-form { container: fm-start / inline-size; }
.fm-start-row { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
/* The rendered legend is not a flex item, so the field gap does not reach it. */
.fm-start-row .fm-fieldset > .fm-label { margin-bottom: var(--sp-2); }
@container fm-start (max-width: 459.98px) {
  .fm-start-row .fm-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-start-row .fm-chip > span { flex: 1 1 auto; justify-content: center; }
}
@container fm-start (min-width: 540px) {
  .fm-start-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: end; gap: var(--sp-5) var(--sp-6); }
  .fm-start-row .fm-actions { grid-column: 1 / -1; }
  .fm-start-row .fm-chips { flex-wrap: nowrap; align-items: center; min-height: var(--control-h); }
}
@container fm-start (min-width: 700px) {
  .fm-start-row { grid-template-columns: minmax(180px, 1fr) auto auto; }
  .fm-start-row .fm-actions { grid-column: auto; }
}

/* ---------- Installation block of the solution pages (content.install-cta with a form of this module) ----------
   One card across the full content width instead of three loose parts. White top: the H2 and the form
   (side by side from 1280 px, H2 on 4 of 12 columns, 5 from 1600 px). Navy foot: the next steps as a
   numbered sequence, then the phone and the licence (beside the steps from 1024 px). The rules live here
   because only the embedded form turns the block into this card; without a form the block keeps its look. */
.ct-install:has(.fm-embed) .ct-install-grid { row-gap: 0; }
.ct-install:has(.fm-embed) .ct-install-grid > * { grid-column: 1 / -1; }
.ct-install:has(.fm-embed) .ct-install-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-6) var(--grid-gap);
  padding: var(--cta-pad);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
}
.ct-install:has(.fm-embed) .ct-install-main:has(.fm-seglinks) { align-items: start; }
.ct-install:has(.fm-embed) .fm-embed { container: fm-seg / inline-size; }
.ct-install:has(.fm-embed) .fm-embed > .fm-panel { padding: 0; border: 0; border-radius: 0; background: none; }
@media (min-width: 1280px) {
  .ct-install:has(.fm-embed) .ct-install-main { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ct-install:has(.fm-embed) .ct-install-main > :not(.blk) { grid-column: 1; }
  .ct-install:has(.fm-embed) .ct-install-main > .blk { grid-column: 2; grid-row: 1; }
  .ct-install:has(.fm-embed) .ct-install-main:has(> .ct-intro) > .blk { grid-row: 1 / span 2; }
}
@media (min-width: 1600px) {
  .ct-install:has(.fm-embed) .ct-install-main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.ct-install:has(.fm-embed) .ct-install-side {
  container: fm-next / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--cta-pad);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--band);
  color: var(--on-band-muted);
}
@media (min-width: 1024px) {
  .ct-install:has(.fm-embed) .ct-install-side {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: end;
    gap: var(--sp-8) var(--cta-pad);
    padding-block: var(--sp-10);
  }
}
/* Nothing for the navy foot (steps, phone and licence all switched off): the white part alone. */
.ct-install:has(.fm-embed) .ct-install-grid:not(:has(.ct-next, .ct-install-line, .ct-pdf)) > .ct-install-side { display: none; }
.ct-install:has(.fm-embed) .ct-install-grid:not(:has(.ct-next, .ct-install-line, .ct-pdf)) > .ct-install-main { border-bottom: 1px solid var(--line); border-radius: var(--r-lg); }

/* Next steps: numbered badges joined by a thin line; one under the other in a narrow panel. */
.ct-install:has(.fm-embed) .ct-next { padding: 0; border: 0; border-radius: 0; background: none; }
.ct-install:has(.fm-embed) .ct-next-title { margin-bottom: var(--sp-5); color: var(--on-band); font-size: var(--fs-h4); }
.ct-install:has(.fm-embed) .ct-next-list { gap: var(--sp-4); }
.ct-install:has(.fm-embed) .ct-next-list li { position: relative; gap: var(--sp-4); color: var(--on-band); }
.ct-install:has(.fm-embed) .ct-next-list .ct-step-num {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--on-band);
  background: transparent;
  color: var(--on-band);
  font-size: var(--fs-small);
}
.ct-install:has(.fm-embed) .ct-next-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 32px;
  left: 15px;
  width: 2px;
  height: var(--sp-4);
  background: var(--on-band-line);
}

/* Phone (tel: link) and licence: under a hairline, or beside the steps behind a vertical hairline. */
.ct-install:has(.fm-embed) .ct-install-contact { gap: var(--sp-3); padding-top: var(--sp-6); border-top: 1px solid var(--on-band-line); }
.ct-install:has(.fm-embed) .ct-install-contact:first-child { padding-top: 0; border-top: 0; }
.ct-install:has(.fm-embed) .ct-install-line { color: var(--on-band-muted); font-size: var(--fs-small); }
.ct-install:has(.fm-embed) .ct-install-line .i { color: var(--on-band-subtle); }
.ct-install:has(.fm-embed) .ct-install-line a { color: var(--on-band); font-size: var(--fs-h3); }
.ct-install:has(.fm-embed) .ct-install-side :focus-visible { outline-color: var(--focus-ring-on-band); }
.ct-install:has(.fm-embed) .ct-pdf { border-color: var(--on-band-line); background: var(--band-raised); color: var(--on-band); }
.ct-install:has(.fm-embed) .ct-pdf:hover { border-color: var(--on-band-subtle); }
.ct-install:has(.fm-embed) .ct-pdf:focus-within { outline-color: var(--focus-ring-on-band); }
.ct-install:has(.fm-embed) .ct-pdf-body span { color: var(--on-band-muted); }

/* A wide navy foot: the four steps side by side. */
@container fm-next (min-width: 560px) {
  .ct-install:has(.fm-embed) .ct-next-list { flex-direction: row; }
  .ct-install:has(.fm-embed) .ct-next-list li { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .ct-install:has(.fm-embed) .ct-next-list li:not(:last-child)::after { top: 15px; left: 44px; right: calc(var(--sp-4) * -1 + 8px); width: auto; height: 2px; }
}
/* Tablets: phone and licence on one line under the steps. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ct-install:has(.fm-embed) .ct-install-contact { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
}
@media (min-width: 1024px) {
  .ct-install:has(.fm-embed) .ct-install-contact { padding: 0 0 0 var(--cta-pad); border-top: 0; border-left: 1px solid var(--on-band-line); }
  .ct-install:has(.fm-embed) .ct-install-contact:first-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}

/* Segment links (block without a preselected segment) as quiet tiles in the white part:
   one column on phones, two from 520 px (a fifth link takes the whole last row), three from 1000 px. */
.ct-install:has(.fm-embed) .fm-seglinks { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.ct-install:has(.fm-embed) .fm-seglink { border-color: transparent; background: var(--bg-alt); }
.ct-install:has(.fm-embed) .fm-seglink:hover { border-color: var(--line-hover); background: var(--surface); }
@container fm-seg (min-width: 520px) {
  .ct-install:has(.fm-embed) .fm-seglinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-install:has(.fm-embed) .fm-seglinks > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container fm-seg (min-width: 1000px) {
  .ct-install:has(.fm-embed) .fm-seglinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-install:has(.fm-embed) .fm-seglinks > li:last-child:nth-child(odd) { grid-column: auto; }
}

/* Picture test (owner 13.10.2026): the picture, the "new picture" button and the answer field in one row
   from 480 px; the characters typed in spaced capitals. */
.fm-captcha-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.fm-captcha-img { display: block; flex: none; width: 180px; height: 60px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-tint); }
.fm-captcha-img svg { display: block; width: 100%; height: 100%; }
.fm-captcha-input { max-width: 220px; font-weight: var(--fw-semibold); letter-spacing: .2em; text-transform: uppercase; }