/* Supporting Fleet Manager pages use the shared Fleet colour and type tokens. */
.support-page {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--nalvo-font-family);
  color: var(--nalvo-text-primary);
  background: var(--nalvo-canvas);
  overflow-wrap: anywhere;
}
.support-page [hidden] { display: none !important; }
.support-page .container {
  width: min(100%, 50rem);
  margin-inline: auto;
  padding: 24px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.support-page h1, .support-page h2, .support-page h3 {
  color: var(--nalvo-text-primary);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.support-page h1 { max-width: none; font-size: clamp(1.5rem, 4vw, 1.75rem); line-height: 1.3; }
.support-page h2, .support-page .app-h2 { font-size: 1.125rem; line-height: 1.35; }
.support-page p, .support-page li { line-height: 1.5; }
.support-page p, .support-page li { max-width: 66ch; }
.support-page p:empty { display: none; }
.support-page a { color: var(--nalvo-selected-text); }
.support-page #back-link, .support-page #qr-approve-home, .support-page #bios-link, .support-page #other-guide {
  display: inline-flex; align-items: center; min-height: 44px;
}
.support-page button, .support-page select, .support-page input { font: inherit; }
.support-page button, .support-page .button, .support-page a, .support-page summary, .support-page select {
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, color 150ms ease;
}
.support-page :focus-visible { outline: 3px solid var(--nalvo-focus-ring); outline-offset: 3px; }
.support-page button:not(:disabled), .support-page summary { cursor: pointer; }
.support-page button:not(:disabled):active, .support-page .button:active { transform: translateY(1px); }
.support-page button:disabled { opacity: .55; cursor: not-allowed; }
.support-page .button {
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.support-page a.button:not(.secondary) { color: var(--nalvo-on-action); }
.support-page .button:not(:disabled):hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.support-page .button:not(:disabled):active { transform: translateY(1px); }
.support-page .button.secondary { background: var(--nalvo-surface); color: var(--nalvo-text-primary); }
.support-page .button.secondary:hover { background: var(--nalvo-selected-surface); }
.support-page label { color: var(--nalvo-text-primary); font-size: .875rem; font-weight: 500; }
.support-page input, .support-page select {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px;
  font-size: 16px; color: var(--nalvo-text-primary); background: var(--nalvo-surface);
  border: 1px solid var(--nalvo-border-control); border-radius: 12px;
}
.support-page input:hover, .support-page select:hover { border-color: var(--nalvo-action-primary); }
.support-page .status { color: var(--nalvo-text-secondary); }
.support-page .status:empty { display: none; }
.support-page .loading-skeleton {
  width: 100%; height: auto; min-height: 16px; margin: 0;
  color: var(--nalvo-text-secondary); font-size: .875rem;
}
.support-page .loading-skeleton::before {
  content: ""; display: block; width: min(100%, 240px); height: 16px;
  margin-bottom: 8px; border-radius: 8px; background: var(--nalvo-border-subtle);
}

/* Node maker and sign-in approval are focused, single-column tasks. */
.maker-page .pair-card, .approve-page .qr-approve {
  width: 100%; max-width: 44rem; margin: 0 auto; padding: clamp(20px, 4vw, 32px);
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid var(--nalvo-border-subtle); border-radius: 16px;
  background: var(--nalvo-surface); box-shadow: var(--shadow);
}
.maker-page .pair-card > *, .approve-page .qr-approve > * { max-width: 100%; margin: 0; }
.maker-page .pair-card p, .approve-page .qr-approve p { max-width: 66ch; }
.maker-page .pair-card form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.maker-page .pair-card form button { align-self: flex-start; }
.maker-page .pair-card form label { gap: 8px; }
.maker-page .pair-card section, .maker-page .pair-card details { min-width: 0; }
.maker-page .pair-card section > * + *, .maker-page #result > * + * { margin-top: 16px; }
.maker-page details { border-top: 1px solid var(--nalvo-border-subtle); padding-top: 8px; }
.maker-page summary {
  display: flex; align-items: center; min-height: 48px; padding: 8px 12px;
  border-radius: 12px; font-weight: 600; color: var(--nalvo-text-primary); list-style: none;
}
.maker-page summary::-webkit-details-marker { display: none; }
.maker-page summary::before { content: "›"; margin-right: 10px; font-size: 1.25rem; line-height: 1; }
.maker-page summary::before { display: inline-block; transition: transform 150ms ease; }
.maker-page details[open] > summary::before { transform: rotate(90deg); }
.maker-page summary:hover, .maker-page .linkbtn:hover { background: var(--nalvo-selected-surface); }
.maker-page #result ol { padding-left: 24px; }
.maker-page #result li + li { margin-top: 16px; }
.maker-page .cmd-block { margin-top: 8px; }
.maker-page #download-sha { overflow-wrap: anywhere; }
.maker-page #disk-warning, .maker-page #bitlocker-warning {
  padding: 16px; border: 1px solid var(--nalvo-border-control);
  border-left: 4px solid var(--nalvo-support-pink);
  border-radius: 12px; background: var(--nalvo-canvas);
}
.maker-page #download-sha { display: inline-block; max-width: 100%; font-size: .8125rem; }
.approve-page .qr-approve { max-width: 32rem; }
.approve-page .qr-approve-warning, .approve-page .qr-approve-caution {
  padding: 12px 16px; border-radius: 12px; background: var(--nalvo-selected-surface);
  color: var(--nalvo-text-primary); font-size: .875rem;
}
.approve-page .qr-approve-warning { border: 2px solid var(--nalvo-support-pink); }
.approve-page .qr-approve-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.approve-page .qr-approve-numbers:empty { display: none; }
.approve-page .qr-approve-numbers button { min-width: 0; min-height: 64px; font-size: 1.375rem; font-weight: 600; }
.approve-page .qr-approve-actions { display: flex; flex-direction: column; gap: 8px; }
.approve-page #qr-approve-age { color: var(--nalvo-text-secondary); font-size: .875rem; }

/* BIOS guide */
.guide-page .site-header {
  position: sticky; top: 0; z-index: 2; min-height: 64px;
  display: flex; align-items: center; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--nalvo-border-subtle); background: var(--nalvo-surface);
}
.guide-page .site-header a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px;
  border-radius: 12px; color: var(--nalvo-text-primary); font-weight: 600; text-decoration: none;
}
.guide-page .site-header a:hover { background: var(--nalvo-selected-surface); }
.guide-page .layout {
  width: min(100%, 64rem); margin-inline: auto;
  padding: 24px max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.guide-page .guide { min-width: 0; max-width: 42rem; }
.guide-page .eyebrow { margin: 0 0 8px; color: var(--nalvo-selected-text); font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.guide-page h1 { margin: 0; }
.guide-page .intro { margin: 8px 0 0; color: var(--nalvo-text-secondary); }
.guide-page .intro + .step { margin-top: 24px; }
.guide-page .intro, .guide-page .board, .guide-page .step-detail { max-width: 66ch; }
.guide-page .brand-row { margin: 24px 0; }
.guide-page .brand-row label { display: block; margin-bottom: 8px; }
.guide-page .board { margin: 8px 0 0; color: var(--nalvo-text-secondary); font-size: .875rem; }
.guide-page .step, .guide-page .phone {
  min-width: 0; padding: clamp(20px, 4vw, 24px); border: 1px solid var(--nalvo-border-subtle);
  border-radius: 16px; background: var(--nalvo-surface); box-shadow: var(--shadow);
}
.guide-page .step-number { margin: 0 0 8px; color: var(--nalvo-selected-text); font-size: .875rem; font-weight: 600; }
.guide-page .step h2 { margin: 0 0 16px; }
.guide-page .step-main { margin: 0; font-size: 1rem; font-weight: 600; }
.guide-page .step-detail { margin-top: 16px; color: var(--nalvo-text-secondary); }
.guide-page .step-detail p { margin: 0; }
.guide-page .step-detail p + p { margin-top: 12px; }
.guide-page .choose-brand { color: var(--nalvo-text-secondary); }
.guide-page .dots { display: flex; justify-content: center; gap: 12px; padding: 24px 0; }
.guide-page .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nalvo-border-control); }
.guide-page .dot.current { background: var(--nalvo-action-primary); outline: 2px solid var(--nalvo-action-primary); outline-offset: 3px; }
.guide-page .buttons { display: flex; gap: 8px; }
.guide-page .buttons button {
  flex: 1; min-width: 0; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--nalvo-action-primary); border-radius: 12px;
  background: var(--nalvo-action-primary); color: var(--nalvo-on-action); font-weight: 600;
}
.guide-page .buttons button:not(:disabled):hover { background: var(--nalvo-action-hover); box-shadow: var(--shadow); transform: translateY(-1px); }
.guide-page .buttons button.secondary { background: var(--nalvo-surface); color: var(--nalvo-text-primary); border-color: var(--nalvo-border-control); }
.guide-page .buttons button.secondary:not(:disabled):hover { background: var(--nalvo-selected-surface); }
.guide-page .phone { display: none; text-align: center; }
.guide-page .phone h2 { margin: 0; }
.guide-page .phone p { margin: 8px auto; color: var(--nalvo-text-secondary); font-size: .875rem; }
.guide-page .phone img { display: block; width: min(100%, 220px); height: auto; margin: 16px auto; background: #fff; border-radius: 8px; }
@media (max-width: 599px) {
  .maker-page .pair-card form button, .maker-page #download-link { width: 100%; }
  .guide-page .buttons button { flex-basis: 0; }
}
@media (min-width: 900px) {
  .support-page .container { padding-top: 48px; }
  .guide-page .layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 32px; align-items: start; padding-top: 48px; }
  .guide-page .phone:not([hidden]) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .support-page *, .support-page *::before, .support-page *::after { transition: none !important; }
}

/* The USB page: pitch black like the app, one step at a time, the one-line card with a copy icon. */
html:has(.maker-page) { background: #04050b; }
.maker-page {
  color-scheme: dark;
  --nalvo-canvas: #04050b; --nalvo-surface: rgba(13, 16, 30, .92);
  --nalvo-text-primary: #eef1fb; --nalvo-text-secondary: #a9b4cf;
  --nalvo-border-control: #5f6d90; --nalvo-border-subtle: rgba(158, 180, 255, .16);
  --nalvo-action-primary: #7d97ff; --nalvo-action-hover: #9fb2ff; --nalvo-on-action: #0a1030;
  --nalvo-focus-ring: #a9b9ff; --nalvo-selected-surface: rgba(125, 151, 255, .14); --nalvo-selected-text: #c4d0ff;
  --nalvo-support-pink: #e5484d;     /* the warning border: Nalvo red (red 9), as the app has it */
  --nalvo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.maker-page .pair-card { box-shadow: 0 0 0 1px rgba(158, 180, 255, .08), 0 0 32px rgba(125, 151, 255, .18); }
.maker-page #intro { color: var(--nalvo-text-secondary); }
.maker-page #steps { display: flex; flex-direction: column; gap: 16px; }
.maker-page .maker-count { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nalvo-text-secondary); }
.maker-page .maker-step { display: flex; flex-direction: column; gap: 12px; }
.maker-page .maker-step .button { display: inline-flex; align-items: center; justify-content: center; }
.maker-page .maker-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.maker-page #sign-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.maker-page #sign-in[hidden] { display: none; }
.maker-page details { border-top: 0; padding-top: 0; }
.maker-page summary { padding-left: 0; font-weight: 500; color: var(--nalvo-text-secondary); }
.maker-page #disk-warning { border-left: 4px solid var(--nalvo-support-pink); font-size: .875rem; }
.maker-page .cmdline { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 44px; padding-left: 12px; border: 1px solid var(--nalvo-border-subtle); border-radius: 10px; background: var(--nalvo-canvas); }
.maker-page .cmdline-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; }
.maker-page .cmdline-copy { flex: none; display: grid; place-items: center; width: 44px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--nalvo-selected-text); }
.maker-page .cmdline-copy:hover { background: var(--nalvo-selected-surface); }
.maker-page .cmdline-copy svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }