/* The Remote access panel (web/src/components/access, Settings → Remote access… on the local
   board): built from the Phones panel's pieces (profiles.css), its sections spaced as that panel's
   and its fields laid out as the Profiles panel's (.profile-command); what is wrong in the danger
   color the sheets use (--red); the server's snippets in monospace, wrapped, and scrolling when
   long. Every rule here selects by class: the other sheets are upstream's, rule for rule. */

.access-tunnel, .access-login, .access-logins { max-width: 760px; }
.access-head { margin: 16px 0 6px; font-size: 13px; }
.access-reach, .access-status, .access-ssh, .access-why, .access-sure, .access-note, .access-line {
  margin: 0 0 8px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.access-reach { color: var(--label-2); font-size: 12.5px; }
.access-status { font-weight: 600; }
.access-ssh, .access-why, .access-look-why { color: var(--label-2); font-size: 12px; }
.access-look-why { margin: 0 0 8px; line-height: 1.4; overflow-wrap: anywhere; }
.access-warn, .access-problem { color: var(--red); }
.access-problem { margin: 0 0 4px; padding-left: 6px; font-size: 12px; line-height: 1.4; }
.access-hint { margin: 2px 0 8px; color: var(--label-2); font-size: 12px; line-height: 1.4; }
.access-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.access-actions .button:disabled { opacity: 0.5; }

/* Test connection's steps: a line each, the hint under the one that failed. */
.access-steps { margin: 0 0 8px; padding: 0; list-style: none; }
.access-step { font-size: 12.5px; overflow-wrap: anywhere; }

/* The settings: a label and its field on a line, as the Profiles panel's start command. */
.access-fields { display: flex; flex-direction: column; gap: 2px; }
.access-field { display: flex; align-items: center; gap: 8px; padding: 4px 6px; color: var(--label-2); font-size: 12px; }
.access-field > span { flex: none; width: 150px; font-weight: 600; }
.access-field .path-add:disabled { opacity: 0.5; }
.access-ask { padding: 4px 6px 0; }

/* The key: its path, its public key and the keys file's line, the server's key. */
.access-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.access-line > span { flex: none; color: var(--label-2); font-weight: 600; }
.access-code { min-width: 0; padding: 1px 5px; border-radius: 5px; background: var(--fill-2); font: 11.5px var(--mono); overflow-wrap: anywhere; }
.access-sure { font-size: 12.5px; }

/* The server's snippets: each folds, its text scrolls when long and wraps, Copy under it. */
.access-snippet { margin: 0 0 8px; }
.access-summary { cursor: pointer; font-size: 12.5px; font-weight: 600; }
.access-note { margin-top: 6px; color: var(--label-2); font-size: 12px; }
.access-pre {
  max-height: 320px;
  margin: 6px 0;
  padding: 8px 10px;
  overflow: auto;
  border-radius: 8px;
  background: var(--fill-2);
  font: 11.5px/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The Login part: the password and the code each on a line (named as the settings are), the form
   one opens under it; the code's QR code black on white in either theme, as the Phones panel's,
   its key in monospace. */
.access-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; padding: 0 6px; font-size: 12.5px; }
.access-name { flex: none; width: 150px; color: var(--label-2); font-size: 12px; font-weight: 600; }
.access-setting .button:disabled, .access-row .button:disabled, .access-lockout .button:disabled { opacity: 0.5; }
.access-form { margin: 0 0 12px; padding: 0 6px; }
.access-input { background: var(--fill-2); font-family: var(--font); }
.access-input:disabled { opacity: 0.5; }
.access-tip, .access-kept { margin: 0 0 8px; color: var(--label-2); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.access-qr {
  display: block;
  width: 176px;
  height: 176px;
  margin: 0 0 8px;
  border-radius: 12px;
  box-shadow: 0 0 0 0.5px var(--separator);
}
.access-secret { font-size: 13px; letter-spacing: 0.04em; user-select: all; }

/* The passkeys and the logins: a row each, its label over its line, its button at the end, as the
   Phones panel's paired devices; a lockout in the danger color with Lift beside it. */
.access-rows, .access-attempts { margin: 0 0 8px; padding: 0; list-style: none; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px; }
.access-about { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.access-meta { color: var(--label-2); font-size: 12px; overflow-wrap: anywhere; }
.access-row .button { flex: none; }
.access-none { margin: 0 0 8px; padding: 0 6px; }
.access-lockout { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.access-lock { margin: 0; color: var(--red); font-size: 12.5px; line-height: 1.4; }

/* The recent failed attempts: a line each. */
.access-attempt { padding: 2px 6px; color: var(--label-2); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }

/* "On the server" (TunnelSection.tsx): three numbered steps, each under its number in a small
   round badge, its body indented beside a hairline, as the setup note's steps read. */
.access-server { margin-top: 8px; }
.access-stage { margin: 0 0 12px; padding: 0 0 0 12px; border-left: 1px solid var(--separator); }
.access-stage-head { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 13px; }
.access-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--fill-2);
  color: var(--label-2);
  font-size: 11px;
  font-weight: 600;
}
.access-marks { margin: 0 0 8px; font-size: 12.5px; overflow-wrap: anywhere; }

/* Step 3, the web server (ServerSetup.tsx): the admin fields as the settings', the password on a
   line with Continue, what Look found and the plan as lists, a run's state at the end of each
   step's line, what failed and was rolled back, "Do it myself" (DoItMyself.tsx) as the snippets. */
.access-web { max-width: 760px; }
.access-sudo, .access-setup, .access-found, .access-plan, .access-failure, .access-test-after, .access-myself {
  margin: 0 0 10px;
}
.access-done { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; }
.access-sub { margin: 10px 0 4px; font-size: 12.5px; font-weight: 600; }
.access-facts, .access-finders { margin: 0 0 6px; padding: 0; list-style: none; }
.access-fact, .access-reason, .access-rolled {
  padding: 1px 0;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.access-case, .access-address, .access-nothing, .access-result {
  margin: 4px 0 6px;
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.access-address { font-weight: 600; }
.access-relies, .access-undo-line, .access-why-step, .access-touches, .access-block-why {
  margin: 0 0 4px;
  color: var(--label-2);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.access-touches { font: 11.5px/1.4 var(--mono); }
.access-plan-steps, .access-blocks { margin: 0 0 6px; padding: 0; list-style: none; }
.access-plan-step, .access-block { padding: 4px 0; }
.access-step-line { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.access-title { min-width: 0; overflow-wrap: anywhere; }
.access-state { flex: none; margin-left: auto; color: var(--label-2); font-size: 12px; }
.access-bad { color: var(--red); }
.access-caution { margin: 0 0 6px; color: var(--orange); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.access-out { margin: 2px 0 0; }
.access-tick { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 12.5px; }
.access-sudo .access-input { min-width: 0; }
.access-picker { margin: 0 0 6px; }
.access-finder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 0; font-size: 12px; }
.access-block-title { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; }

/* "On the server" as one flow (ServerSetup.tsx): the server and its login as the settings' fields
   (folded away once a setup is on record), the server and its port on a line that wraps on a
   phone, the field an answer asks for marked; the plan in plain words as short lines, what was
   found first; the details, the steps by hand and "Do it myself (one command)" (OneCommand.tsx) as
   folds; the one command's text in a short box that scrolls. */
.access-signin, .access-keyfile, .access-details, .access-byhand, .access-oneshot, .access-more { margin: 0 0 10px; }
.access-signin > .access-summary, .access-oneshot > .access-summary, .access-more > .access-summary { margin: 0 0 6px; }
.access-keyfile { margin: 4px 6px 6px; }
.access-pair { display: flex; flex-wrap: wrap; gap: 0 8px; }
.access-pair > .access-entry-host { flex: 1 1 300px; min-width: 0; }
.access-pair > .access-entry-sshPort { flex: 0 1 180px; }
.access-entry-sshPort .access-field > span { width: auto; }
.access-field .path-add { min-width: 0; }
.access-asked > span { color: var(--red); }
.access-plain { margin: 0 0 10px; }
.access-found-line, .access-hostkey, .access-stop, .access-docker, .access-untouched {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.access-hostkey, .access-untouched { color: var(--label-2); font-size: 12px; }
.access-entry > .access-kept { margin: 0 0 4px; padding-left: 6px; }
.access-stop { font-weight: 600; }
.access-will { margin: 0 0 6px; padding: 0 0 0 18px; }
.access-will-line { padding: 1px 0; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.access-oneshot-body { padding: 0 0 0 12px; border-left: 1px solid var(--separator); }
.access-command .access-pre { max-height: 96px; }
.access-inside, .access-undo-command { margin: 0 0 8px; }
.access-then { color: var(--label-2); font-size: 12px; }