/* Mode switcher.
   Anchors, not buttons. Each mode is its own document, so switching modes is a
   navigation rather than a state change — which means the strip works before any
   JS runs and a crawler can follow it. The cost is that none of the shared
   `button` styling in base.css applies here, so everything a button used to give
   these for free (padding, cursor, press squash, tap-highlight suppression) is
   declared below.

   The current mode is marked with .is-active in the page's own markup rather than
   toggled by script — there is nothing left to toggle. Named .is-active specifically
   to avoid sitting one character away from the :active pseudo-class that handles
   the press state further down. */
/* Wraps because four tabs total ~424px and a phone gives the row ~345px —
   without this the Item tab overflowed the container and could not be tapped
   at all on mobile. Desktop has room to spare, so the row never wraps there. */
.mode-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.mode-tab {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-caps-md);
  text-transform: uppercase;
  /* Pinned rather than inherited: body carries prose leading (1.5), which would
     silently make every tab ~6px taller than the buttons beside them. */
  line-height: var(--leading-snug);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  /* An unselected tab sits on --surface, one step up from the page, with the
     quieter border. Previously it used --bg and --border-strong: the same colour
     as the page behind it inside a relatively bright outline, which made all
     four read as equally-weighted outlined boxes and left the selected one
     carrying the entire distinction on its own. */
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  /* No grey flash on tap, and no 300ms wait while the browser rules out a
     double-tap — the press squash below is the feedback, and it can't read as
     immediate if the browser spends a third of a second deciding. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out),
              scale var(--dur-press) var(--ease-out);
}

.mode-tab:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* The selected tab is the one raised object in the strip: filled, and carrying a
   shadow the flat unselected tabs do not have. Colour alone was doing this job
   before, which fails the moment the strip is glanced at rather than read. */
.mode-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
/* Hover is a preview of selection, so it must not out-shout the real thing —
   the already-selected tab ignores it rather than shifting under the pointer. */
.mode-tab.is-active:hover {
  color: #fff;
  border-color: var(--accent);
}

/* Feedback on press, not on release — the same rule the page's buttons follow.
   `scale` rather than transform: scale() so it composes with any transform a
   tab might carry instead of replacing it. */
.mode-tab:active { scale: 0.97; }

@media (max-width: 640px) {
    /* Two even columns rather than a ragged wrap: the four tabs are peers, and
       equal targets read as one control instead of a list that ran out of
       room. */
    .mode-tab {
      flex: 1 1 calc(50% - 4px);
      padding: 10px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
  /* The press squash is motion rather than a state change, so it goes entirely —
     the colour change still confirms the press. base.css does this for <button>;
     these are anchors and are not covered by that rule. */
  .mode-tab:active { scale: 1; }
}

/* ── Sub-bar: the four Pixel modes, and the way into the rules ──────────
   A second level below the tab strip, on the game pages only.

   The strip above stays at three tabs — its phone layout is a 2x2 grid built
   on `flex: 1 1 calc(50% - 4px)`, and seven tabs through that rule gives four
   rows of stubs — so the family gets one tab up there and its members are
   listed here instead.

   This used to be four loose words, centred, at --text-faint. That is 3.4:1 on
   the page background (below AA), and centring them put the row's left edge
   nowhere near the strip above: the two navigations shared no alignment, no
   weight and no box, so they read as unrelated rather than as a level and its
   sub-level. It was also `padding: 2px 0`, which is a ~14px tall tap target.

   The fix is one segmented control on a track, starting at the same x as the
   mode tabs. Grouping does the work the old styling asked colour to do alone:
   four chips inside one bordered box are obviously a set, and an accent left
   edge on that box says the set belongs to the tab lit up above it.

   Still deliberately quieter than the strip above — the active chip is filled
   with --surface-raised and accent TEXT, not the accent fill the mode tab
   carries. Two accent-filled rows would compete instead of reading as heading
   and sub-heading. */
.sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}

.sub-switcher {
  display: flex;
  /* nowrap, not wrap: the track is a single object, and a chip dropping to a
     second line inside the box breaks that reading. Narrow screens scroll it
     instead — see the 640px block below. */
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  /* The one accent mark at this level: the edge the track hangs off, pointing
     back at the mode tab above that owns it. */
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--radius-sm);
}

.sub-tab {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-caps-sm);
  text-transform: uppercase;
  /* --text-muted, not --text-faint: these are navigation, and an unselected
     destination still has to be readable enough to choose. */
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  /* 35px tall, against the 14px the old `padding: 2px 0` gave. That is a
     comfortable pointer target and keeps the track (45px) just under the mode
     strip's 44px tabs, so the sub-level never out-measures the level above it.
     Touch needs more than 35px; the 640px block below spends the extra height
     there, where there is a finger to accommodate. */
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  line-height: var(--leading-snug);
  /* Same pair the .mode-tab rule above carries, and for the same reasons: no
     grey flash on tap, and no 300ms wait while the browser rules out a
     double-tap. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out),
              scale var(--dur-press) var(--ease-out);
}

.sub-tab:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* Filled, so the selected chip is an object rather than a colour. The accent
   underline is an inset shadow rather than a border-bottom so it cannot change
   the chip's box and shunt its neighbours sideways. */
.sub-tab.is-active {
  background: var(--surface-raised);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* Hover previews selection, so the already-selected chip ignores it. */
.sub-tab.is-active:hover {
  background: var(--surface-raised);
  color: var(--accent);
}

.sub-tab:active { scale: 0.97; }

/* The way into the rules, which used to be 500 words sitting under the board.
   Parked at the right end of this bar rather than beside the title: it is
   chrome about the mode, and this is the row that names the mode.

   Overridden hard away from the base <button>, which is accent-filled — that
   is the styling of a game action (Guess, Give Up), and this is a door to a
   help panel. Quiet outline, same family as #soundBtn. */
.howto-trigger {
  flex-shrink: 0;
  font-size: var(--text-sm);
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.howto-trigger:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--text);
}

@media (max-width: 640px) {
  .sub-bar { gap: 8px; }

  /* Full width and scrolling, rather than wrapping: four chips need ~330px and
     a phone gives the row ~345px before padding, so wrapping is one chip on a
     line of its own. A partially-visible chip at the right edge is the standard
     affordance that there is more, and it does not cost a row of height. */
  .sub-switcher {
    flex: 1 1 100%;
    overflow-x: auto;
    /* The track is ~53px tall; a 10px scrollbar inside it is a fifth of the
       control. The clipped chip says "scrollable" without spending the room. */
    scrollbar-width: none;
  }
  .sub-switcher::-webkit-scrollbar { display: none; }

  /* 43px — a finger target rather than a pointer one. The desktop rule keeps
     the track shorter than the mode strip above it, which matters on a screen
     where both are visible at once; here the strip has already reflowed to two
     rows and the comparison no longer holds. */
  .sub-tab { padding: 12px 14px; }

  .howto-trigger { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Anchors are not covered by base.css's button rule. Same reasoning as
     .mode-tab above: the colour change still confirms the press. */
  .sub-tab:active { scale: 1; }
}