/*
 * Sidebar + settings drawer + info popover.
 *
 * Layout:
 *   >= 1100 px: two-column grid. Main column flexible; sidebar fixed ~300 px, sticky under the
 *               masthead. All knobs live in the sidebar. Race controls (Restart, speed, heat
 *               toggle) stay in the main column too, because they are used constantly.
 *   900-1100 px: stacked. Sidebar sits under the main column, same content, no drawer.
 *   < 900 px:   phone drawer. A sticky top bar carries the title and a "Settings" button; the
 *               sidebar becomes a slide-in drawer from the right, focus-trapped, tap-outside /
 *               Escape closes.
 *
 * Palette: ink on paper, exactly the same tokens as css/base.css. No new colours.
 */

/* ----- Page grid ----- */

.page-grid {
  display: block;
  position: relative;
}

@media (min-width: 1100px) {
  .page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: start;
  }
  .page-main { min-width: 0; }
  .page-side {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding-right: 4px;
  }
}

/* Sidebar chrome: same paper/ink card look as everything else. */

.page-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 14px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
}

.page-side .settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}

.page-side .settings-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.page-side .settings-close {
  display: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  min-height: var(--tap);
  min-width: var(--tap);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.page-side .settings-close:hover { color: var(--ink); }

@media (max-width: 899px) {
  .page-side .settings-close { display: inline-flex; }
}

.page-side .settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-side .side-restart {
  min-height: var(--tap);
  padding: 10px 16px;
  font-size: 14px;
  width: 100%;
}

.page-side .settings-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-side .settings-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-muted);
}

.page-side .seed-row-side {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 8px;
  align-items: center;
}

/*
 * Direct-child button only: the New-plane button sits at grid col 1, row 1/2. Using the child
 * combinator here keeps the taller 44 px tap target from leaking to the info button that lives
 * nested inside the `<label>` for Seed (round-05 fix: the info button was rendering as a tall
 * oval because a descendant selector matched every button in the row).
 */
.page-side .seed-row-side > button {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: var(--tap);
  padding: 8px 12px;
  font-size: 13px;
}

.page-side .seed-row-side .settings-inline-label {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.page-side .seed-row-side input[type="text"] {
  grid-column: 2;
  grid-row: 2;
  /* Round-10 N6-m6: phone tap target is 44 px (the drawer is a phone-only surface, so no
   * separate desktop rule is needed). */
  min-height: var(--tap);
  font-size: 13px;
  width: 100%;
}

.page-side .knob {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.page-side .knob.pick select {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 28px 8px 10px;
}

.page-side .knob.slider {
  min-width: 0;
  flex: 0 0 auto;
}

.page-side .knob.slider input[type="range"] {
  min-height: 28px;
}

.page-side .knob.slider .knob-value {
  min-height: 1em;
  font-size: 12px;
}

.page-side .knob .knob-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-side .carryon-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-m);
}

.page-side .carryon-group > .knob-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.page-side .carryon-group .knob .knob-sublabel {
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
}

.page-side .more-knobs {
  border-top: 1px dashed var(--rule);
  padding-top: 10px;
}

.page-side .more-knobs summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
}

.page-side .more-knobs .knob { margin-top: 10px; }

/* Race-controls in the main column, compact when running alongside the sidebar. */

.race-controls.compact {
  gap: 8px 10px;
}

.race-controls.compact .seed-row,
.race-controls.compact .spacer,
.race-controls.compact .checkbox-label {
  display: none;
}

/* ----- Info button + popover ----- */

.info-anchor {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 4px;
}

.info-btn {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  /*
   * Pin the button to a square 22 px circle everywhere on the page. Flex containers with
   * `align-items: stretch` (the default) will otherwise blow the button up to the tallest
   * sibling and turn the "i" into a tall oval. `flex: 0 0 auto` guarantees the button stays
   * at its intended intrinsic size, `max-height` guards against grid rows that would stretch
   * it (the seed row inside the sidebar, the drawer's row layout, or a strategy-card grid
   * cell), and `min-width` mirrors `min-height` so a narrow flex column can't collapse it.
   */
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  position: relative;
}

.info-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.info-btn:focus-visible {
  outline: 2px solid var(--moving);
  outline-offset: 2px;
}

.info-btn[aria-expanded="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Touch: expand the hit target to 44 px without visibly resizing the glyph. The inner
 * button stays 22 px so the density of the label around it does not lurch on desktop. */
@media (hover: none) and (pointer: coarse) {
  .info-btn::after {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 50%;
  }
}

.info-popover {
  position: absolute;
  z-index: 1200;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius-m);
  padding: 12px 14px 14px;
  box-shadow: 0 8px 20px rgba(31, 42, 51, 0.14);
  width: min(320px, calc(100vw - 24px));
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.info-popover-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.info-popover-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}

.info-popover-close {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  min-height: 24px;
  cursor: pointer;
}

.info-popover-close:hover { color: var(--ink); }

.info-popover-body {
  margin: 0;
  color: var(--ink);
}

.info-popover-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
}

.info-popover-link:hover { color: var(--moving); }

.info-popover-pointer {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border-left: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  transform: translate(-50%, -50%) rotate(45deg);
  top: 0;
}

.info-popover[data-placement="above"] .info-popover-pointer {
  top: auto;
  bottom: 0;
  transform: translate(-50%, 50%) rotate(225deg);
}

/* ----- Phone drawer ----- */

.phone-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 800;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 8px var(--page-side);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.phone-topbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.phone-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.phone-topbar-btn:hover { background: #0f1a24; }

.phone-topbar-icon svg { display: block; }

.settings-scrim {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 51, 0.45);
  z-index: 900;
}

@media (max-width: 899px) {
  .phone-topbar {
    display: flex;
  }

  /* The masthead h1 duplicates the sticky top-bar title on phone. Keep the deck (a
   * subject-setting one-liner) and the mode toggle; drop the redundant heading and the
   * segmented control's own giant top-margin. */
  .masthead h1 { display: none; }
  .masthead { gap: 8px; margin-bottom: 8px; margin-top: 12px; }

  /* Drawer state: the sidebar becomes a slide-in from the right. */
  .page-grid { display: block; }

  .page-side {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    /* Round-08 N8-m4: cap the drawer at 85% of the viewport width (min 280 px) so a real
     * tap-outside strip always exists at the left edge. At 400 px the drawer used to be
     * 360 px wide; the uncovered scrim was 40 px, and a Playwright center-click at
     * (200, 400) landed on the panel instead of the scrim. 85vw at 400 px is 340 px,
     * leaving a 60 px strip that a thumb can find. */
    width: clamp(280px, 85vw, 360px);
    max-height: 100vh;
    overflow-y: auto;
    border-radius: 0;
    border-left: 1px solid var(--rule);
    box-shadow: -12px 0 24px rgba(31, 42, 51, 0.16);
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    z-index: 1000;
    padding: 16px 18px 24px;
    /* When closed, do not participate in the tab order. */
    visibility: hidden;
  }

  body.settings-open .page-side {
    transform: translateX(0);
    visibility: visible;
  }

  body:not(.settings-open) .settings-scrim { display: none; }

  .page-side .settings-close { display: inline-flex; }

  /* Keep Restart + speed group visible in the main column on phone. Hide the more distant
   * knobs from the compact bar. */
  .race-controls.compact #btn-race { min-width: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-side { transition: none; }
}

/* At >= 900 and < 1100 the sidebar stacks under the main column with the same content. Hide
 * the phone top bar and the scrim in this range. Close button is already hidden by default. */
@media (min-width: 900px) {
  .phone-topbar { display: none; }
  .settings-scrim { display: none; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .page-side {
    margin-top: 20px;
  }
}

/* Keep the info anchor inline with its label when the label is a slider knob. */
.knob .knob-label .info-anchor,
.settings-inline-label .info-anchor {
  margin-left: 4px;
}

/* The strategy info button sits on the strategy-name row itself. The picker starts as a flex
 * column (race.css), so overriding to a grid needs card-header specificity to win. Row 1 holds
 * the select and the info button; row 2 spans both columns for the blurb underneath. */
.card-header .strategy-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  flex-direction: initial;
}

.card-header .strategy-picker > select {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.card-header .strategy-picker > .blurb {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.card-header .strategy-picker > .info-btn {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

/* Compact tweaks for section headings that embed the info anchor. */
.section-heading .info-anchor {
  margin-left: 4px;
  vertical-align: baseline;
}

.compare .controls-row .info-anchor {
  margin: 0 4px 0 -2px;
}