/*
 * onboarding.css: the look of the setup wizard of Knock, knock, AI! (style A, a step-by-step guide, with the best parts of B and C). One thing per screen, one main action, a clear "Step N of 7" and what comes next.
 * Loaded by: every page of the PHP application (php/app/Views/layout.php, after tokens.css; tip.css comes after it for the tooltips of the wizard). It reads the tokens of tokens.css (colours, spacing and the typography tokens --fs-*, --fw-*, --ls-*, --num, --font); the few tokens it adds are in the first block, each as light-dark(light, dark).
 * Parts, top to bottom: base and frame, stepper (bars on a desktop, numbered or ticked pills on a phone), card, buttons (the main one is solid like the panel button .go), form fields, notes, lists of facts, rail (numbered actions and the time line), cron tables, domains, spec pages, small screens, and at the end the screens of the log fetching (tooltips, ways of fetching, connection form, alarm, password window).
 * Nothing here uses @import or url(), so a Content-Security-Policy that allows only 'self' is enough. Weights follow the typography tokens: no bold in the normal text.
 * The switch between two ways (.picker-2, the way of running on the Cron step) and between three ways (.picker-3, the Logs step: from the server, FTP or SFTP, uploaded by hand) reuses the picker of the hosting panel.
 * @comments-complete 2026-11-06
 */
:root {
  --card-edge: light-dark(#d4d1ea, #34325a);
  --soft-focus: light-dark(#e9e8fd, #26244a);
  --code-bg: light-dark(#f1f0fa, #100f21);
  --pin: light-dark(#17152b, #f1f0fc);
  --on-pin: light-dark(#ffffff, #0d0c19);
  --row-change: light-dark(#fdf3dc, #33260c);
  --tap: 44px;
}

/* base and frame */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: var(--sp-4);
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-body);
  font-variant-numeric: var(--num);
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
strong, b { font-weight: var(--fw-medium); }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code { font-family: var(--mono); font-size: 0.92em; }
:where(a, button, input, select, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-s); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--sp-4); top: -60px; z-index: 10; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--surface); color: var(--text); }
.skip:focus { top: var(--sp-4); box-shadow: var(--shadow-pop); }
.page, .top, .foot { width: 100%; max-width: 720px; margin-inline: auto; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-2) var(--sp-5); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--text); text-decoration: none; font-weight: var(--fw-bold); font-size: 20px; letter-spacing: var(--ls-heading); }
.brand img { display: block; width: 34px; height: 34px; }
.top-tools { display: flex; align-items: center; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-m); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer;
}
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.chip:hover { border-color: var(--text); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--sp-3); padding-block: var(--sp-6) var(--sp-4); color: var(--text-3); font-size: var(--fs-m); }
.theme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.theme .chip { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-s); }
[hidden] { display: none !important; }

/* stepper: seven segments; finished ones are links with a tick; on a phone the segments become small pills with a tick or a number */
.stepper { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: var(--sp-4); }
.step > a, .step > span { display: block; padding-block: 14px 2px; color: var(--text-3); text-decoration: none; }
.step .bar { display: block; height: 6px; border-radius: 999px; background: var(--line); }
.step.is-done .bar { background: var(--st-current); }
.step.is-current .bar { background: var(--text); }
.step-label { display: flex; align-items: center; gap: 4px; margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.2; }
.step.is-done .step-label { color: var(--st-current); }
.step.is-current .step-label { color: var(--text); font-weight: var(--fw-semibold); }
.step .ic { width: 13px; height: 13px; }
.step-pill { display: none; }
.step > a:hover .step-label { text-decoration: underline; }

/* card */
.card {
  position: relative; overflow: hidden;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--surface); border: 1px solid var(--card-edge); border-radius: var(--r-l); box-shadow: var(--shadow);
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); color: var(--accent-text); font-size: var(--fs-s); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.kicker .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); }
h2 { font-size: var(--fs-l); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.lead { margin-top: var(--sp-3); color: var(--text-2); font-size: 17px; }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-m); }
.stack > * + * { margin-top: var(--sp-5); }
.stack-s > * + * { margin-top: var(--sp-3); }
.stack-top { margin-top: var(--sp-5); }
.next { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); color: var(--text-2); font-size: var(--fs-m); }
.next .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); }
.next strong { color: var(--text); font-weight: var(--fw-semibold); }
.card > * + .stack, .card > .stack + * { margin-top: var(--sp-6); }

/* buttons: the main one is solid like the panel button, no gradient */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.actions .push { margin-left: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  border: 1px solid var(--line-strong); border-radius: var(--r-l); background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-base); font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--text); }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { padding-inline: var(--sp-6); border-color: var(--text); background: var(--text); color: var(--surface); }
.btn-primary:hover { background: var(--text-2); border-color: var(--text-2); }
.btn-ghost { padding-inline: var(--sp-3); border-color: transparent; background: transparent; color: var(--accent-text); }
.btn-ghost:hover { border-color: transparent; text-decoration: underline; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-small { min-height: var(--tap); padding-inline: var(--sp-4); font-size: var(--fs-m); }

/* form fields */
.form > * + * { margin-top: var(--sp-5); }
.field label, .legend { display: block; margin-bottom: var(--sp-1); font-weight: var(--fw-medium); }
.field .hint { margin-bottom: var(--sp-2); color: var(--text-3); font-size: var(--fs-m); }
.field input[type="text"], .field input[type="password"] {
  width: 100%; min-height: 48px; padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg); color: var(--text); font: inherit;
}
.field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field.has-error input { border: 2px solid var(--st-error); }
.field-error { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-2); color: var(--st-error); font-size: var(--fs-m); font-weight: var(--fw-medium); }
.field-error .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.mono-input { font-family: var(--mono) !important; font-size: var(--fs-m) !important; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.choice input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice label { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg); font-weight: var(--fw-medium); cursor: pointer; }
.choice input:checked + label { border-color: var(--accent-text); background: var(--soft-focus); box-shadow: inset 0 0 0 1px var(--accent-text); color: var(--accent-text); }
.options > * + * { margin-top: var(--sp-2); }
.option { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg); }
.option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--text); }
.option label { margin: 0; font-weight: var(--fw-regular); }
.option .name { font-weight: var(--fw-medium); }
.option:has(input:checked) { border-color: var(--accent-text); background: var(--soft-focus); }
.option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* notes: the sign and the word carry the meaning, the tint only supports it */
.note { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid; border-radius: var(--r-m); font-size: 15px; }
.note .ic { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.note > div { min-width: 0; }
.note > div > * + * { margin-top: var(--sp-2); }
.note-lead { font-weight: var(--fw-semibold); }
.note-ok { background: var(--st-current-bg); border-color: var(--st-current); }
.note-ok .ic, .note-ok .note-lead { color: var(--st-current); }
.note-warn { background: var(--st-older-bg); border-color: var(--st-older); }
.note-warn .ic, .note-warn .note-lead { color: var(--st-older); }
.note-error { background: var(--st-error-bg); border-color: var(--st-error); }
.note-error .ic, .note-error .note-lead { color: var(--st-error); }
.note-info { background: var(--st-before-bg); border-color: var(--st-before); }
.note-info .ic, .note-info .note-lead { color: var(--st-before); }
.note-remind { background: var(--soft-focus); border-color: var(--accent-text); }
.note-remind .ic, .note-remind .note-lead { color: var(--accent-text); }
.note-risk { padding: var(--sp-5); border-width: 2px; }
.bullets { padding-left: var(--sp-5); list-style: disc; }
.bullets li + li { margin-top: var(--sp-1); }
.badpath { display: block; overflow-wrap: anywhere; white-space: pre-wrap; }
.badchar { padding: 0 2px; border-radius: 3px; background: var(--st-error); color: var(--st-error-bg); outline: 1px solid var(--st-error); }
.time-left { font-size: var(--fs-l); font-weight: var(--fw-medium); }

/* facts: short reasons (account) and key-value rows (server, state) */
.facts { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); color: var(--text-2); font-size: var(--fs-m); }
.facts li + li { margin-top: var(--sp-3); }
.facts .ic { width: 20px; height: 20px; color: var(--accent-text); }
.facts code { overflow-wrap: anywhere; }
.kv { border: 1px solid var(--line); border-radius: var(--r-m); }
.kv > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.kv > div + div { border-top: 1px solid var(--line); }
.kv dt { color: var(--text-2); font-size: var(--fs-m); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv dd ul > li + li { margin-top: var(--sp-1); }
.files { margin-top: var(--sp-1); }
.files li { padding-block: 2px; }

/* hints with the "Use" button (log paths) and the picker of hostings */
.hintcards > * + * { margin-top: var(--sp-2); }
.hintcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg); }
.hintcard code { min-width: 0; flex: 1 1 240px; overflow-wrap: anywhere; word-break: break-all; }
.picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.picker .btn { min-height: var(--tap); padding-inline: var(--sp-2); font-size: var(--fs-m); }
.picker .btn[aria-pressed="true"], .picker .btn[aria-current="page"] { border-color: var(--accent-text); background: var(--soft-focus); box-shadow: inset 0 0 0 1px var(--accent-text); color: var(--accent-text); }
.picker-2 { grid-template-columns: 1fr 1fr; }
.picker-3 { grid-template-columns: repeat(3, 1fr); }
nav.picker-2, nav.picker-3 { margin-top: var(--sp-5); }
.picker-cell { display: flex; align-items: center; gap: var(--sp-2); }
.picker-cell .btn { flex: 1; }

/* code lines with Copy; wrapped so the page never scrolls sideways */
.codeline { display: block; padding: var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--code-bg); font-family: var(--mono); font-size: var(--fs-m); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.copyrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.copyrow .btn { min-height: var(--tap); font-size: var(--fs-m); }
.copyrow .hint { color: var(--text-2); font-weight: var(--fw-medium); }

/* rail: numbered actions down a line, also the time line of waiting */
.rail > li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-4); padding-bottom: var(--sp-6); }
.rail > li:last-child { padding-bottom: 0; }
.rail > li::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: var(--line-strong); }
.rail > li:last-child::before { display: none; }
.rail-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pin); color: var(--on-pin); font-weight: var(--fw-semibold); }
.rail-mark .ic { width: 18px; height: 18px; }
.rail-body > * + * { margin-top: var(--sp-3); }
.task-of { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.path li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.path li + li::before { content: ">"; color: var(--text-3); }
.path span { padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); font-size: var(--fs-m); font-weight: var(--fw-medium); }

/* nodes of the time line (waiting): the state sits in data-state, the signs of all states are in the mark and only one is shown */
.node[data-state="done"] .rail-mark { background: var(--st-current); color: var(--st-current-bg); }
.node[data-state="warn"] .rail-mark { background: var(--st-older); color: var(--st-older-bg); }
.node[data-state="wait"] .rail-mark { border: 2px solid var(--line-strong); background: var(--surface); color: var(--text-2); }
.node[data-state="info"] .rail-mark { border: 2px solid var(--st-before); background: var(--st-before-bg); color: var(--st-before); }
.node .rail-mark .ic { display: none; }
.node[data-state="done"] .ic-done, .node[data-state="wait"] .ic-wait, .node[data-state="warn"] .ic-warn, .node[data-state="info"] .ic-info { display: block; }
.pill { display: inline-block; margin-right: var(--sp-2); padding: 1px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.pill-done { background: var(--st-current-bg); color: var(--st-current); }
.pill-wait { background: var(--st-none-bg); color: var(--st-none); }
.pill-warn { background: var(--st-older-bg); color: var(--st-older); }
.pill-info { background: var(--st-before-bg); color: var(--st-before); }
.live { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: var(--fs-m); }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-before); }

/* cron and schedule tables: a schematic of the host form with the real names of the fields */
.hostform { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg); }
.hf-bar { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-s); font-weight: var(--fw-medium); }
.hostform figcaption { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-s); }
.fields { width: 100%; border-collapse: collapse; }
.fields th, .fields td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.fields thead th { border-top: 0; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.fields tbody th { width: 34%; color: var(--text-2); font-size: var(--fs-m); font-weight: var(--fw-medium); }
.fields tr.is-change th, .fields tr.is-change td { background: var(--row-change); }
.hf-input { display: inline-block; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); font-family: var(--mono); font-size: var(--fs-m); overflow-wrap: anywhere; }
.hf-set { border: 2px solid var(--accent-text); background: var(--soft-focus); font-weight: var(--fw-medium); }
.hf-pathrow { display: flex; align-items: flex-start; gap: var(--sp-2); }
.hf-prefix { padding: 8px 4px; border: 0; color: var(--text-2); font-family: var(--mono); font-weight: var(--fw-semibold); }
.hf-pathrow .hf-input { flex: 1; min-width: 0; }
.fields .muted.small { margin-top: var(--sp-1); }
.fields .copyrow { margin-top: var(--sp-2); }
.badge { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 1px solid; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.badge-change { border-color: var(--st-older); background: var(--st-older-bg); color: var(--st-older); }
.badge-same { border-color: var(--line-strong); background: var(--surface-2); color: var(--text-3); }
.was { margin-top: var(--sp-1); color: var(--text-3); font-size: var(--fs-s); }

/* spec pages: typography and index */
.spec { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.spec > * + * { margin-top: var(--sp-3); }
.spec > h2 { margin-bottom: var(--sp-1); }
.wide { max-width: 100%; }
.demo-box { padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.demo-box .chip { min-height: 36px; }
.btnrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-5); }
.btnrow p { margin-top: var(--sp-1); text-align: center; }
.index { display: grid; gap: var(--sp-2); }
.index a { display: block; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; overflow-wrap: anywhere; }
.index a:hover { border-color: var(--accent-text); background: var(--soft-focus); }
.sample-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4); }
.sample-row .cap { flex: 0 0 150px; color: var(--text-3); font-size: var(--fs-s); }
.s-xs { font-size: var(--fs-xs); } .s-s { font-size: var(--fs-s); } .s-m { font-size: var(--fs-m); } .s-base { font-size: var(--fs-base); } .s-l { font-size: var(--fs-l); } .s-xl { font-size: var(--fs-xl); } .s-2xl { font-size: var(--fs-2xl); }
.w-400 { font-weight: var(--fw-regular); } .w-500 { font-weight: var(--fw-medium); } .w-600 { font-weight: var(--fw-semibold); } .w-700 { font-weight: var(--fw-bold); }
.n-xl { font-size: var(--fs-num-xl); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); line-height: 1.1; }
.n-l { font-size: var(--fs-num-l); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); line-height: 1.1; }
.n-ring { font-size: var(--fs-num-ring); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); line-height: 1.1; }
.tokens-table { width: 100%; border-collapse: collapse; font-size: var(--fs-m); }
.tokens-table th, .tokens-table td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--line); text-align: left; }

/* small screens: 375 px, one column, a 44 px touch target everywhere */
@media (max-width: 560px) {
  body { padding: var(--sp-3) var(--sp-4); }
  .card { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  h1 { font-size: 24px; }
  .lead { font-size: var(--fs-base); }
  .stepper { gap: 4px; }
  .step-label, .step .bar { display: none; }
  .step > a, .step > span { padding: 0; }
  .step-pill { display: grid; place-items: center; height: 28px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-3); font-size: var(--fs-s); font-weight: var(--fw-medium); }
  .step.is-done .step-pill { border-color: var(--st-current); background: var(--st-current-bg); color: var(--st-current); }
  .step.is-current .step-pill { border-color: var(--text); background: var(--text); color: var(--surface); }
  .step-pill .ic { width: 14px; height: 14px; }
  .step > a { position: relative; }
  .step > a::after { content: ""; position: absolute; inset: -8px 0; }
  .picker { grid-template-columns: 1fr 1fr; }
  .picker-3 { grid-template-columns: 1fr; }
  .actions .btn-primary { width: 100%; }
  .actions .push { width: 100%; margin-left: 0; }
  .kv > div { grid-template-columns: 1fr; gap: var(--sp-1); }
  .fields thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fields, .fields tbody, .fields tr, .fields th, .fields td { display: block; width: auto; }
  .fields tbody th { width: auto; padding-bottom: 0; border-top: 1px solid var(--line); }
  .fields tbody td { padding-top: var(--sp-1); border-top: 0; }
  .fields tbody tr:first-child th { border-top: 0; }
  .sample-row .cap { flex-basis: 100%; }
}

/* icons (inline svg symbols) */
.ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* a warning button: a secondary button with the colour of a warning, for an action that accepts a risk */
.btn-warn { border-color: var(--st-older); background: var(--st-older-bg); color: var(--st-older); }
.btn-warn:hover { border-color: var(--st-older); filter: brightness(1.08); }

/* ---- log fetching screens (task P6): tooltips of the wizard, the way of fetching, the connection form with its check, the alarm of the state page and the password window; they read only the tokens of tokens.css and the few above ---- */
/* tooltips in the wizard: a label or a heading with its "?" on one row */
.field .tip-head { margin-bottom: var(--sp-1); }
.field .tip-head label, .field .tip-head .legend, .stack-s > .tip-head .legend { margin-bottom: 0; }
.tip-head h1, .tip-head h2 { min-width: 0; }
dt .tip-head { display: inline-flex; }
.ptip-title { display: block; }
.ptip-text { display: block; }
.mono-list { font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.7; }

/* the line "searched N known places" and the small alternative link */
.searched { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-m); }
.searched > .ic { width: 18px; height: 18px; color: var(--st-before); }
.alt-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
details.ask > summary { display: flex; align-items: center; min-height: var(--tap); color: var(--accent-text); font-weight: var(--fw-medium); cursor: pointer; }
details.ask > summary::before { content: ""; width: 0; height: 0; margin-right: var(--sp-2); border-block: 5px solid transparent; border-left: 7px solid currentColor; }
details.ask[open] > summary::before { transform: rotate(90deg); }
details.ask > summary::-webkit-details-marker { display: none; }

/* the way of fetching: a quiet chip with an icon (Logs, Cron, state page) */
.method { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: var(--fs-m); font-weight: var(--fw-medium); }
.method .ic { width: 16px; height: 16px; color: var(--accent-text); }
.method-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-m); }

/* the advice of a separate read-only account: a short numbered list in the note */
.rec-steps { padding-left: var(--sp-5); list-style: decimal; color: var(--text); }
.rec-steps li + li { margin-top: var(--sp-1); }

/* the choice of the protocol: two cards, the recommended one marked, the unavailable ones grey with the reason */
.proto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.proto-opt { position: relative; display: grid; align-content: start; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg); cursor: pointer; }
.proto-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.proto-opt:hover { border-color: var(--text); }
.proto-opt:has(input:checked) { border-color: var(--accent-text); background: var(--soft-focus); box-shadow: inset 0 0 0 1px var(--accent-text); }
.proto-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.proto-opt:has(input:disabled) { border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); box-shadow: none; cursor: not-allowed; }
.proto-opt:has(input:disabled) .proto-name, .proto-opt:has(input:disabled) .proto-desc { color: var(--text-3); }
.proto-opt:has(input:disabled) .badge-rec { border-color: var(--line-strong); background: transparent; color: var(--text-3); }
.proto-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-l); font-weight: var(--fw-semibold); }
.proto-desc { color: var(--text-2); font-size: var(--fs-m); }
.proto-why { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--sp-1); color: var(--text-2); font-size: var(--fs-s); font-weight: var(--fw-medium); }
.proto-why .ic { width: 15px; height: 15px; margin-top: 2px; }
.badge-rec { border-color: var(--st-current); background: var(--st-current-bg); color: var(--st-current); }

/* the connection fields: server and port on one row, the saved password, the button of the check */
.conn-fields > * + * { margin-top: var(--sp-5); }
.conn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: var(--sp-3); }
.pw-saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-height: 48px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--st-current); border-radius: var(--r-m); background: var(--st-current-bg); }
.pw-saved .ic { width: 18px; height: 18px; color: var(--st-current); }
.pw-saved span { font-weight: var(--fw-medium); }
.pw-saved a { margin-left: auto; }
.check-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-strong); border-top-color: var(--accent-text); border-radius: 50%; }

/* the time line of the check: the states run (spinning), bad (red) and skip (dashed) next to done, warn, wait and info of onboarding.css */
.node[data-state="bad"] .rail-mark { background: var(--st-error); color: var(--st-error-bg); }
.node[data-state="run"] .rail-mark { border: 2px solid var(--accent-text); background: var(--soft-focus); color: var(--accent-text); }
.node[data-state="skip"] .rail-mark { border: 2px dashed var(--line-strong); background: var(--surface); color: var(--text-3); }
.node[data-state="bad"] .ic-bad, .node[data-state="skip"] .ic-skip { display: block; }
.node .rail-mark .spin { display: none; width: 16px; height: 16px; }
.node[data-state="run"] .rail-mark .spin { display: block; }
.conn-rail > li { padding-bottom: var(--sp-5); }
.conn-rail .rail-body > * + * { margin-top: var(--sp-2); }
.conn-rail .rail-body { padding-top: 6px; }
.nd { color: var(--text-2); font-size: var(--fs-m); }
.nd > * + * { margin-top: var(--sp-2); }
.nd-bad { color: var(--st-error); font-weight: var(--fw-medium); }
.nd-warn { color: var(--st-older); font-weight: var(--fw-medium); }
.nd-skip { color: var(--text-3); }
.fp { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: var(--r-s); background: var(--code-bg); font-size: var(--fs-s); overflow-wrap: anywhere; }
.seen { display: flex; flex-wrap: wrap; gap: 6px; }
.seen code { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--code-bg); font-size: var(--fs-s); }
.pill-bad { background: var(--st-error-bg); color: var(--st-error); }

/* the box of the risk (FTP without encryption, red) and of the certificate (yellow) inside the time line */
.risk-box, .pin-box { padding: var(--sp-3) var(--sp-4); border: 2px solid; border-radius: var(--r-m); color: var(--text); }
.risk-box { border-color: var(--st-error); background: var(--st-error-bg); }
.pin-box { border-color: var(--st-older); background: var(--st-older-bg); }
.risk-lead, .pin-lead { display: flex; align-items: flex-start; gap: var(--sp-2); font-weight: var(--fw-semibold); }
.risk-lead { color: var(--st-error); }
.pin-lead { color: var(--st-older); }
.risk-lead .ic, .pin-lead .ic { width: 18px; height: 18px; margin-top: 1px; }
.risk-ack { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); padding: 10px var(--sp-3); border: 1px solid var(--st-error); border-radius: var(--r-s); background: var(--surface); font-weight: var(--fw-medium); cursor: pointer; }
.risk-ack input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--st-error); }
.risk-ack:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the alarm of the state page: a changed key or certificate, the two fingerprints and the actions */
.alarm { border-width: 2px; }
.fp-list { display: grid; gap: var(--sp-1); }
.fp-list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-2); }
.fp-list dt { color: var(--text-2); font-size: var(--fs-s); }
.fp-list code { font-size: var(--fs-s); overflow-wrap: anywhere; }
.alarm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* the window "Enter the password of the panel" (a modal dialog element) */
.pwdlg { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: var(--sp-6) var(--sp-6) var(--sp-5); border: 1px solid var(--card-edge); border-radius: var(--r-l); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
.pwdlg::backdrop { background: color-mix(in srgb, var(--scrim) 55%, transparent); }
.pwdlg h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.pwdlg .form > * + * { margin-top: var(--sp-4); }
.pwdlg .actions { margin-top: var(--sp-5); }
.pw-what { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--surface-2); font-weight: var(--fw-medium); }
.pw-what .ic { width: 18px; height: 18px; color: var(--accent-text); }

@media (max-width: 560px) {
  .proto-grid { grid-template-columns: 1fr; }
  .conn-grid { grid-template-columns: minmax(0, 1fr) 88px; }
  .fp-list > div { grid-template-columns: 1fr; gap: 0; }
  .pwdlg { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
}

@media (prefers-reduced-motion: no-preference) {
  .spin { animation: logi-spin 0.8s linear infinite; }
}
@keyframes logi-spin { to { transform: rotate(360deg); } }