/* MeshWars: styles for the /join registration page (frontend/join.js).
   Matches the existing dark theme (see mc.css) -- self-contained, no
   external fonts, libraries, or CDN assets. */

* { box-sizing: border-box; }

/* Same modest, subtle scale as landing.css -- kept identical between
   the two content pages. .mw-nav (frontend/nav.css) stays in px and is
   unaffected, same reasoning as landing.css. */
html {
  font-size: clamp(15px, 0.35vw + 14px, 17px);
}

body {
  margin: 0;
  background: var(--mw-page);
  color: var(--mw-text-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.join-wrap {
  /* Matches rules.css's own .rules-wrap -- this page now carries the
     same page-header-plus-search-plus-contents-rail format /docs,
     /rules and /account use (rules.css's .rules-header/.rules-layout/
     .rules-toc, loaded here alongside this file), and a 210px rail
     plus a reading column need the same room those pages give it. */
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(var(--mw-nav-h) + 24px) 16px 64px;
}

.join-tagline {
  margin: 0 0 20px;
  color: var(--mw-text-4);
  font-size: 0.875rem;
}

/* The reading column next to the rail (rules.css's .rules-toc is the
   other .rules-layout child). */
.join-body { max-width: 100%; }

/* No boxed card any more -- Matt does not want bordered, rounded-corner
   panels around plain content or forms. These now read the way
   rules.css's own <section>s do: a form or some prose under a gold
   heading with a 2px gold rule, separated from the next one by a thin
   bottom border rather than a background/border/radius box. The
   orange .join-warning-box callouts inside these panels are a genuinely
   separate component and keep their own box -- see that rule below. */
.join-panel {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--mw-line);
  /* Every one of these sections is now also a rail/search jump target
     (its <h2> carries no id of its own -- the id lives on the section,
     same as /docs's and /rules's id-less top-level h2s), so it needs
     its own scroll-margin-top to clear the fixed .mw-nav bar on
     arrival, the same as .rules-body section does for those two pages. */
  scroll-margin-top: calc(var(--mw-nav-h) + 20px);
}
.join-panel:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Small teaser lines above the flow, so a returning player sees in one
   glance that there's a faster path than reading the whole numbered
   sequence -- the first links down to #status-check-panel, which lives
   further down the page; the second sends an already-signed-in visitor
   to /account instead. Plain paragraphs under the page header now,
   rather than a narrow right-aligned strip -- that alignment matched
   the old centered, capped-width join flow, which this page no longer
   has. */
.join-check-teaser {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  color: var(--mw-text-5);
}
.join-check-teaser a {
  color: var(--mw-accent);
  font-weight: 700;
  text-decoration: none;
}
.join-check-teaser a:hover { text-decoration: underline; }

/* Sign-in (provider buttons, magic-link, password) no longer lives on
   this page -- see frontend/join.js's own module docstring for why it
   moved to frontend/account.js, which now owns the CSS for all of it
   (account.css). This page kept only .join-panel-title below, still
   used by #join-flow-panel/#status-check-panel/#working-check-panel.
   Was a plain <div>, small and uppercase, until this page grew the
   same contents rail /docs, /rules and /account use: the rail needs a
   real heading, so every one of these is now an <h2> in join.html --
   same size/weight/rule as rules.css's own .rules-body h2, so a
   heading reads the same whether it's reached on /join or /rules.
   (/join has no search box of its own -- Matt: it's a form you work
   through, not something to search -- but the rail's need for a real
   heading predates and is independent of that.) */
.join-panel-title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--mw-gold-light);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mw-gold);
}

.join-panel-subtitle {
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-text-6);
  margin: 14px 0 6px;
}

.join-play-area p {
  font-size: 0.8125rem;
  color: var(--mw-text-2);
  margin: 0;
}

.join-play-area p a,
#working-check-panel p a {
  color: var(--mw-accent);
  font-weight: 700;
  text-decoration: none;
}
.join-play-area p a:hover,
#working-check-panel p a:hover { text-decoration: underline; }

.join-field {
  display: block;
  margin-bottom: 14px;
  font-size: 0.75rem;
  color: var(--mw-text-5);
}

.join-field > span {
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
}

.join-field input[type="text"],
.join-field input[type="password"] {
  width: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
}

.join-field input[type="text"]:focus,
.join-field input[type="password"]:focus {
  outline: none;
  border-color: var(--mw-accent);
}

.hint {
  font-size: 0.6875rem;
  color: var(--mw-text-6);
  margin: 4px 0 0;
}
.hint code {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 3px;
  padding: 1px 4px;
}
.hint a {
  color: var(--mw-accent);
  text-decoration: none;
}
.hint a:hover { text-decoration: underline; }

/* A link that has to be a <button> (it toggles page state, it doesn't
   navigate) but should read as one -- the node picker's "enter it by
   hand instead" / "search instead" toggles below are the only place
   this page needs that. */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--mw-accent);
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--mw-gold-light); }

.team-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.team-swatch {
  --swatch-color: var(--mw-text-6);
  background: var(--mw-page);
  color: var(--swatch-color);
  border: 1px solid var(--swatch-color);
  border-radius: 4px;
  padding: 8px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.team-swatch:hover {
  background: #151515;
}

.team-swatch.active {
  background: var(--swatch-color);
  color: var(--mw-page);
}

/* The current-team swatch inside the switch-team picker (#status-team
   below) is rendered disabled rather than omitted -- still visible
   proof the picker shows all seven teams, just not a valid pick. No
   other .team-swatch on the page is ever disabled today. */
.team-swatch:disabled {
  opacity: 0.4;
  cursor: default;
}

.protocol-picker {
  display: flex;
  gap: 16px;
}

.protocol-choice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
  cursor: pointer;
}

.protocol-choice-disabled {
  color: #777;
  cursor: not-allowed;
}

.protocol-badge {
  display: inline-block;
  background: var(--mw-accent-wash);
  color: var(--mw-accent);
  border: 1px solid var(--mw-accent-wash-line);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* join.js's applyMeshtasticAvailability() sets the `hidden` attribute
   directly on this badge once Meshtastic registration is open -- but
   this rule's own `display: inline-block` above outranks the browser's
   default `[hidden] { display: none }` (same specificity, author
   stylesheet beats user-agent stylesheet regardless of source order),
   so without this override the badge stayed visibly stuck on "Coming
   soon" even after the radio itself was already enabled. Found while
   testing the Meshtastic join-flow copy this same commit adds. */
.protocol-badge[hidden] {
  display: none;
}

.protocol-block {
  background: #141414;
  border: 1px solid var(--mw-raised);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.75rem;
  color: var(--mw-text-3);
}

.protocol-block p {
  margin: 0 0 8px;
}
.protocol-block p:last-child {
  margin-bottom: 0;
}

/* ---- Node picker (#mc-node-picker / #mt-node-picker) ---------------------
   Searchable picker over GET /api/checkin/{mc,mt}/nodes, inline at the
   protocol step of the join form itself rather than a separate control
   at the bottom of the page -- see join.js's createNodePicker() for the
   three-state (search / selected / manual) logic this markup supports.
   Exactly one of .node-picker-search, .node-picker-selected,
   .node-picker-manual is ever unhidden at a time; all three live in the
   DOM together so switching between them never re-fetches anything. */
.node-picker {
  margin: 10px 0 4px;
}

.node-picker-results {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  background: var(--mw-page);
}

.node-picker-result {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--mw-raised);
  padding: 7px 10px;
  cursor: pointer;
  color: var(--mw-text-1);
}
.node-picker-results li:last-child .node-picker-result {
  border-bottom: none;
}
.node-picker-result:hover,
.node-picker-result:focus {
  background: #1c1c1c;
}
.node-picker-result:focus-visible {
  outline: 2px solid var(--mw-accent);
  outline-offset: -2px;
}
.node-picker-result-name {
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}
/* Bare 8-hex on MeshCore, "!"-prefixed on Meshtastic -- rendered by the
   shared displayNodeRef() helper in join.js, same convention already
   live on the radios list and the admin portal. Monospaced so a person
   scanning for their own hex prefix among several similarly-named
   entries doesn't have to fight proportional-font kerning to do it. */
.node-picker-result-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--mw-text-6);
}

.node-picker-status {
  margin-top: 6px;
}

.node-picker-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 10px 0 4px;
}
/* Same fix, same reason as .protocol-badge[hidden] above: this rule's
   own `display: flex` beats the browser's default `[hidden] {
   display: none }` at equal specificity (author stylesheet always
   outranks the user-agent one, source order notwithstanding), so
   without this override an empty "selected" chip stayed visible even
   while join.js's createNodePicker() was still in 'search' mode.
   Caught by screenshot, not by reading the code. */
.node-picker-selected[hidden] {
  display: none;
}
.node-picker-selected-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.node-picker-selected-name {
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}
.node-picker-selected-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--mw-text-6);
}
.node-picker-change-btn {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.node-picker-change-btn:hover { background: var(--mw-line); }

.node-picker-manual {
  margin: 10px 0 4px;
}

#join-submit,
#status-submit,
.join-primary-btn {
  width: 100%;
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
#join-submit:hover,
#status-submit:hover,
.join-primary-btn:hover { background: var(--mw-line); }
#join-submit:disabled,
#status-submit:disabled { opacity: 0.5; cursor: default; }

/* .join-primary-btn (the "Create an account" link in the account-first
   fork near the top of the page, see join.html) is an <a>, not a
   <button> -- it shares every declaration above with #join-submit/
   #status-submit, but still needs these two: a <button> centers its own
   text and never underlines by default, an inline <a> does neither. */
.join-primary-btn {
  display: inline-block;
  width: auto;
  text-align: center;
  text-decoration: none;
}

/* .join-fork-actions wraps .join-fork-primary-btn (the <a id=
   "join-fork-primary-btn">) and .join-fork-secondary-btn below --
   flex + wrap + gap, the same idiom .add-radio-form and rules.css's
   .rules-toc ul already use, so the pair sits side by side but drops
   the second button to its own line rather than overflowing on a
   narrow phone screen. Replaces the plain margin-left spacing the
   older .join-fork-login-link (a styled <a>, no real button) used. */
.join-fork-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* .join-fork-secondary-btn: the signed-out "Log in" companion beside
   .join-primary-btn -- a real secondary/outline button now, not a
   link dressed as one. Matches .join-primary-btn's size exactly
   (padding, font-size, font-weight, border-radius, and the same
   display: inline-block / width: auto so it doesn't span full width
   either, same reasoning as .join-primary-btn's own comment above)
   so the pair reads as two sibling buttons, but visually
   subordinate: transparent fill and an accent-colored border instead
   of the primary's filled --mw-raised background, using the same
   --mw-accent / --mw-accent-wash tokens already in play elsewhere on
   this page, so both the gold and neon skins pick it up automatically
   -- no new colors introduced. Hidden entirely (not just styled away)
   by join.js's applyAccountForkState() once a live session collapses
   this row to the single signed-in button -- the [hidden] override
   below is needed for the same reason .protocol-badge[hidden] and
   .node-picker-selected[hidden] need one above: this rule's own
   `display: inline-block` outranks the browser's default
   `[hidden] { display: none }` at equal specificity. */
.join-fork-secondary-btn {
  display: inline-block;
  width: auto;
  background: transparent;
  color: var(--mw-accent);
  border: 1px solid var(--mw-accent);
  border-radius: 4px;
  padding: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.join-fork-secondary-btn:hover { background: var(--mw-accent-wash); }
.join-fork-secondary-btn:focus-visible {
  outline: 2px solid var(--mw-accent);
  outline-offset: 2px;
}
.join-fork-secondary-btn[hidden] { display: none; }

.join-error {
  background: #2a1414;
  border: 1px solid #663333;
  color: #f08080;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.75rem;
  margin-bottom: 14px;
}

.join-key-warning {
  color: #ffdc00;
  font-size: 0.75rem;
  font-weight: 600;
}

/* A clear-box warning, distinct from the smaller inline
   .join-key-warning text -- used for the "do not paste the
   meshmapper:// link into the URL field" caution, which needs to stop
   the eye rather than blend into the surrounding paragraphs. */
.join-warning-box {
  background: var(--mw-accent-deep);
  border: 1px solid var(--mw-hostile);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0 16px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #f0c0a8;
}
.join-warning-box strong {
  display: block;
  color: #ffb088;
  margin-bottom: 2px;
}

/* The one truly unrecoverable moment on this page: once this key is
   gone, it is gone -- there is no "forgot my key" flow, only a brand
   new key from an admin (which retires whichever one this replaces).
   Same warning-box language as the meshmapper:// caution above,
   sized up -- thicker border, larger text -- so it reads as a
   different order of consequence, not just another step's caution. */
.key-warning-box {
  border-width: 2px;
  padding: 12px 14px;
  font-size: 0.8125rem;
}
.key-warning-box strong {
  font-size: 0.9375rem;
}

.copy-row {
  display: flex;
  gap: 6px;
  margin: 6px 0;
}

.copy-row input {
  flex: 1;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.75rem;
  min-width: 0;
}

.copy-row button {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.copy-row button:hover { background: var(--mw-line); }

/* ---- The join flow (#join-flow-panel) ------------------------------------
   One continuous numbered sequence -- native <ol> numbering is the
   spine of the page. Each <li> pairs an instruction (.join-flow-label)
   directly with the control it describes, so nothing on this page is
   an instruction sitting apart from the thing it tells you to do. */
.join-flow {
  list-style: decimal;
  padding-left: 22px;
  margin: 8px 0 0;
  color: var(--mw-text-2);
}
.join-flow > li {
  margin-bottom: 22px;
}
.join-flow > li:last-child {
  margin-bottom: 0;
}
.join-flow-label {
  font-size: 0.8125rem;
  color: var(--mw-text-1);
  line-height: 1.4;
  margin: 0 0 8px;
}
.join-flow-label a {
  color: var(--mw-accent);
  text-decoration: none;
}
.join-flow-label a:hover { text-decoration: underline; }

/* The one step people actually miss (switching Custom API Endpoint on)
   -- everything else can be set up perfectly and nothing is sent while
   this stays off, so it gets real visual weight instead of blending in
   as just another item in the sequence. Applied to the <li> itself (no
   .join-flow-label child) so its own color/size apply directly to the
   step text via inheritance. */
.join-step-critical {
  background: #241c0a;
  border: 1px solid var(--mw-accent);
  border-radius: 4px;
  padding: 6px 8px;
  margin-left: -8px;
  color: var(--mw-gold-light);
  font-size: 0.8125rem;
}
.join-step-critical p {
  margin: 0;
}

/* Placeholder shown in the "copy your key" / "paste your key" steps
   before registering, so the whole flow can be read end to end before
   committing to it. Replaced in place with a real .copy-row once
   /api/join succeeds -- the step never moves or gets hidden. */
.key-slot-placeholder {
  font-size: 0.75rem;
  font-style: italic;
  color: #777;
  margin: 6px 0;
}

/* Confirmation line shown under the Join button once registration
   succeeds -- the flow keeps going in place below it rather than
   jumping the player anywhere else. */
.join-success {
  color: #b8e0a0;
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 10px 0 0;
}

.mc-dot-inline {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 6px;
  vertical-align: middle;
}

/* ---- Check my setup (#status-check-panel) -------------------------------
   Placed at the BOTTOM of the page, after the join flow and the "how
   do I know it's working" panel, so a first-time visitor reads the
   flow top to bottom without it in the way. A returning player reaches
   it in one click via .join-check-teaser at the top of the page, the
   rail, or the link inside #working-check-panel, all of which target
   this panel's id -- .join-panel's own scroll-margin-top (above)
   already keeps the fixed nav bar clear on arrival, same as every
   other panel. Nothing left for a rule here to do -- the ".status-"
   class name is kept in the markup only because so many of this
   panel's own descendant selectors below (.status-team, .status-result,
   .status-radios, ...) are already scoped off it. */

/* #working-check-panel ("How do I know it's working?") reuses the
   .join-warning-box/.copy-row styling defined above -- nothing
   panel-specific needed beyond the shared link color/weight applied
   via #working-check-panel p a above. */
#working-check-panel p {
  font-size: 0.8125rem;
  color: var(--mw-text-2);
  margin: 0 0 10px;
}
#working-check-panel p:last-child {
  margin-bottom: 0;
}

/* Separates the "API key" label from the descriptive .hint paragraph
   above it -- same 14px rhythm used for .join-field spacing and
   .join-panel-subtitle elsewhere on this page. Scoped to this form
   only; no other panel has a paragraph directly preceding a field. */
#status-form {
  margin-top: 14px;
}

.key-input-row {
  display: flex;
  gap: 6px;
}
.key-input-row input {
  flex: 1;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
  min-width: 0;
}
.key-input-row input:focus {
  outline: none;
  border-color: var(--mw-accent);
}
.key-input-row button {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.key-input-row button:hover { background: var(--mw-line); }

.status-result {
  margin-top: 14px;
}
.status-result p {
  font-size: 0.8125rem;
  color: var(--mw-text-2);
  margin: 0 0 8px;
}

/* The diagnosis sentence is the answer the player actually came for --
   given real visual prominence (its own bordered block, larger text)
   rather than reading as just another line of copy. Tinted green when
   everything is fine, amber/red when it isn't, using the same semantic
   tokens the map uses for friendly/hostile. */
.status-diagnosis {
  border-radius: 6px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 600;
}
.status-diagnosis-ok {
  background: #16240f;
  border: 1px solid var(--mw-friendly);
  color: #b8e0a0;
}
.status-diagnosis-attention {
  background: var(--mw-accent-deep);
  border: 1px solid var(--mw-hostile);
  color: #f0c0a8;
}

.status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-top: 6px;
}
.status-table th,
.status-table td {
  border: 1px solid var(--mw-line);
  padding: 5px 8px;
  text-align: left;
  color: var(--mw-text-2);
}
.status-table thead th {
  color: var(--mw-text-6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.625rem;
  font-weight: 700;
}
.status-table td {
  text-align: center;
}

/* Separates the MeshCore and Meshtastic sections in #status-result for a
   player who holds both kinds of radio -- without it the Meshtastic
   numbers read as a continuation of the MeshCore ones just above them,
   which is exactly the "which fact belongs to which radio" confusion
   this panel exists to avoid. Only ever inserted when both sections are
   present (see renderStatusResult() in join.js); a single-protocol
   player never sees it. */
.status-protocol-divider {
  border: none;
  border-top: 1px solid var(--mw-raised);
  margin: 16px 0 12px;
}

/* ---- Switch team (GET/POST /api/team), inside #status-check-panel ------
   Same rhythm as .status-radios just below it -- a bordered subsection
   of the existing setup-check box, not a panel of its own. Only shown
   once a status check has resolved a player (see loadTeamStatus() in
   join.js). Light-guard inline confirm (pick a team, read the
   confirmation, confirm) rather than the typed-name pattern -- a team
   switch is fully reversible by switching back. */
.status-team {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--mw-raised);
}

#status-team-switch-btn {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
#status-team-switch-btn:hover { background: var(--mw-line); }
#status-team-switch-btn:disabled { opacity: 0.5; cursor: default; }

.status-team-picker-wrap {
  margin-top: 10px;
}

.status-team-confirm {
  margin-top: 10px;
}

.status-team-confirm-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.status-team-confirm-actions button:first-child {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.status-team-confirm-actions button:first-child:hover { background: var(--mw-line); }
.status-team-confirm-actions button:first-child:disabled { opacity: 0.5; cursor: default; }

/* ---- "Your radios" (list + add/remove), inside #status-check-panel ------
   Extends the existing setup-check box rather than being a panel of its
   own -- same .join-panel-title/.join-panel-subtitle rhythm as the rest
   of the page, just one level down in the DOM. */
.status-radios {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--mw-raised);
}

.radios-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.radios-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}
.radios-item span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.radios-item button {
  background: #2a1414;
  color: #f08080;
  border: 1px solid #663333;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.radios-item button:hover { background: #3a1a1a; }
.radios-item button:disabled { opacity: 0.5; cursor: default; }

.radios-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
  margin: 0 0 12px;
  padding: 0;
}

/* Compact inline row -- node ID, protocol, Add -- rather than the
   stacked .join-field layout the main join flow uses; this form is
   filled in repeatedly (one radio at a time) by someone who already
   knows what they're doing, not a first-time step-by-step flow. */
.add-radio-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.add-radio-form .join-field {
  flex: 1 1 160px;
  margin: 0;
}
.add-radio-form select {
  width: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
}
/* Direct child, not any descendant: this form now contains a node
   picker, and the picker's own buttons -- each search result, "Change",
   the two link-styled toggles -- are already styled by the
   .node-picker-* rules above and must not be repainted as submit
   buttons. Before this was scoped, "Enter its ID by hand instead" came
   out as a chunky gold button in the middle of a sentence. The only
   direct-child button here is Add radio. */
.add-radio-form > button {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.add-radio-form > button:hover { background: var(--mw-line); }
.add-radio-form > button:disabled { opacity: 0.5; cursor: default; }

/* The add-a-radio form used to be two side-by-side fields and a button
   on one line. It now carries a full node picker (the same one the join
   flow uses -- issue #3), which needs the whole width for its results
   list, so the row model becomes: protocol on its own short row, picker
   underneath, button last.

   The protocol <select> is held to a sensible width instead of being
   allowed to grow across the panel -- it is a two-item menu, and a
   two-item menu stretched to 600px looks like a mistake. */
.add-radio-form > .join-field { flex: 0 1 200px; }
.add-radio-form > .node-picker { flex: 1 1 100%; margin: 0; }

/* Inside the picker the fields stack normally -- the .add-radio-form
   .join-field rule above is scoped to direct children so it never
   reaches these, but the margin reset would still make the search box
   and its hint collide with the protocol row above. */
.add-radio-form .node-picker .join-field { margin: 0 0 4px; }

/* Site-wide footer -- this page does not load landing.css, so the
   block lives here too rather than in one shared file. Keep in sync
   with landing.css's copy. */
.mw-footer {
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  border-top: 1px solid var(--mw-line);
}

.mw-footer p {
  margin: 0;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.mw-footer a { color: var(--mw-gold); font-weight: 600; text-decoration: none; }
.mw-footer a:hover { text-decoration: underline; }