/* 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 (further down) 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 {
  /* Fluid up to the same real maximum as /about (landing.css), so the
     header and the explanatory "Where it's played" panel can use a wide
     screen's extra width. The join flow itself does NOT grow with this
     -- see #join-flow-panel below, which stays capped at the original
     comfortable reading width and centered inside whatever room this
     wrapper has. */
  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;
}

.join-panel {
  background: var(--mw-panel);
  border: 1px solid var(--mw-line);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

/* The join flow (and the panels below it) keep the page's original
   comfortable reading width -- stretching form fields and copy rows
   out to the wide .join-wrap maximum above would be worse, not better.
   Centered so the extra width on a wide screen becomes breathing room
   around the flow rather than being fed to the fields themselves. */
#join-flow-panel,
#status-check-panel,
#working-check-panel {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Small teaser line above the flow, right-aligned, so a returning
   player sees in one glance that there's a faster path than reading
   the whole numbered sequence -- links down to #status-check-panel,
   which now lives at the bottom of the page. */
.join-check-teaser {
  max-width: 560px;
  margin: 0 auto 12px;
  text-align: right;
  font-size: 0.75rem;
  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; }

.join-panel-title {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-accent);
  margin-bottom: 8px;
}

.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);
}

.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 {
  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 { background: var(--mw-line); }
#join-submit:disabled,
#status-submit:disabled { opacity: 0.5; cursor: default; }

.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;
}

/* 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) -------------------------------
   Deliberately styled as its own distinct block -- a slightly brighter
   border -- and 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 or the link inside #working-check-panel, both of which
   target this panel's id. */
.status-check-panel {
  border-color: var(--mw-accent);
  margin-top: 8px;
  /* Keeps the fixed .mw-nav bar from covering the top of this panel
     when the browser jumps here via an anchor link. */
  scroll-margin-top: calc(var(--mw-nav-h) + 16px);
}

/* #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;
}

/* ---- "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;
}
.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; }

/* ---- MeshCore check-in fallback name (advanced, inside #status-radios) --
   A native <details> element, deliberately -- collapsed by default with
   no JS needed to keep it that way, so "most players never need this"
   is true of the page's own default state, not just the copy inside
   it. Muted relative to the radios list right above it (smaller title,
   no bordered .join-panel-subtitle treatment) -- this is an exception
   path, not a sibling feature of equal weight. */
.checkin-name-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--mw-raised);
}
.checkin-name-section summary {
  cursor: pointer;
  color: var(--mw-text-5);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.checkin-name-section summary:hover {
  color: var(--mw-accent);
}
.checkin-name-section[open] summary {
  color: var(--mw-accent);
  margin-bottom: 8px;
}

.checkin-name-current {
  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: 8px 0 10px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}
.checkin-name-current[hidden] {
  display: none;
}
.checkin-name-current 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;
}
.checkin-name-current button:hover { background: #3a1a1a; }
.checkin-name-current button:disabled { opacity: 0.5; cursor: default; }

.checkin-name-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.checkin-name-form .join-field {
  flex: 1 1 200px;
  margin: 0;
}
.checkin-name-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;
}
.checkin-name-form button:hover { background: var(--mw-line); }
.checkin-name-form button:disabled { opacity: 0.5; cursor: default; }


/* -------------------------------------------------------------------------
/* -------------------------------------------------------------------------
   Site nav bar (Map / About / Join). Fixed, full width, across the very
   top of every page (frontend/index.html, about.html, join.html) --
   wordmark on the left, page links on the right, current page marked
   with .active. Identical declarations duplicated in coverage.css /
   landing.css / join.css (the same per-page duplication pattern .mw-nav
   already used before this) since the three pages never share a
   stylesheet. --mw-nav-h is read by each page's own layout rules so
   content starts exactly at the bar's bottom edge with no gap or
   overlap.
   ------------------------------------------------------------------------- */
:root {
  --mw-nav-h: 48px;
}
@media (max-width: 600px) {
  :root { --mw-nav-h: 40px; }
}

.mw-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mw-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--mw-panel);
  border-bottom: 1px solid var(--mw-line);
  box-sizing: border-box;
}
.mw-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mw-accent);
  text-decoration: none;
  white-space: nowrap;
}
/* A background rather than an <img src>, so the mark follows
   --mw-crest the way every colour follows its token. The element keeps
   an aria-label and role="img" since a background carries no alternative
   text of its own. */
.mw-nav-crest {
  display: block;
  height: 28px;
  width: 28px;
  flex: none;
  background-image: var(--mw-crest);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mw-nav-links {
  display: flex;
  gap: 4px;
}
.mw-nav-links a {
  padding: 6px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mw-text-5);
  text-decoration: none;
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  background: var(--mw-panel);
  white-space: nowrap;
}
.mw-nav-links a:hover { background: var(--mw-raised); color: var(--mw-accent); }
.mw-nav-links a.active { color: var(--mw-accent); border-color: var(--mw-accent); }

/* GitHub mark: deliberately understated per the owner ("faded into the
   background so its visible but not prominent") -- low opacity at rest,
   full opacity on hover/focus. Lives inside .mw-nav-links (not a third
   flex child of .mw-nav) so the existing brand/links space-between
   layout is untouched -- it's just one more item in the links row. */
.mw-nav-github {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--mw-text-5);
  opacity: 0.35;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.mw-nav-github svg { display: block; }
.mw-nav-github:hover,
.mw-nav-github:focus-visible {
  opacity: 1;
  color: var(--mw-accent);
}

@media (max-width: 600px) {
  .mw-nav { padding: 0 8px; gap: 6px; }
  .mw-nav-brand { font-size: 12px; gap: 6px; }
  .mw-nav-crest { height: 22px; }
  .mw-nav-links { gap: 3px; }
  .mw-nav-links a { padding: 4px 6px; font-size: 10px; }
  .mw-nav-github { padding: 4px; }
  .mw-nav-github svg { width: 14px; height: 14px; }
}

/* Skin switch -- see the matching rule in landing.css. The nav is
   duplicated across this file, landing.css and join.css (the pages do
   not share a stylesheet), so this rule is too. */
.mw-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mw-text-5);
  opacity: 0.35;
  border-radius: 4px;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.mw-theme-btn svg { display: block; }
.mw-theme-btn:hover,
.mw-theme-btn:focus-visible {
  opacity: 1;
  color: var(--mw-accent);
}
.mw-theme-btn[aria-pressed="true"] {
  opacity: 0.85;
  color: var(--mw-accent);
}

@media (prefers-reduced-motion: reduce) {
  .mw-theme-btn { transition: none; }
}