/* One Rail — slate controls (component spec v1).
 * A single capsule holding the three slate decisions: what (view) · when (day)
 * · who (book filter). Zones separated by hairlines, never whitespace.
 * Tokens are CSS custom properties (--sl-*) so a site can retint the rail from
 * its own :root without editing this file. Type rides the host font stack
 * (spec names DM Sans; the dashboards standardize on Inter). */
:root {
  --sl-ground: #EDEEE7;
  --sl-surface: #FFFFFF;
  --sl-accent: #1C3A5E;
  --sl-accent-press: #18334F;
  --sl-hover: #F1F3EC;
  --sl-line: #E0E1D8;
  --sl-divider: #E6E7DE;
  --sl-ink: #1C2320;
  --sl-ink-2: #4A5049;
  --sl-muted: #8A9088;
}

/* 0 horizontal: this class lands on the SAME element as .wrap, and onerail.css
   loads later at equal specificity, so whatever is set here wins over .wrap's
   20px. It was 12px, which pushed the capsule 8px proud of the page on every
   board and every hub tab; it has to MATCH .wrap, not be dropped (0 makes the
   rail wider still). Vertical padding is this component's own. */
.slrail-wrap { padding: 16px 20px 6px; position: relative; }

.slrail {
  /* one row, three zones. minmax(0,1fr) on both sides — not space-between and
   * not bare 1fr — so the flanks equalize and the date group sits dead center. */
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  min-height: 58px; box-sizing: border-box; padding: 7px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(28,35,32,.04);
  font-family: inherit;
}
.slrail * { box-sizing: border-box; }
.slrail button { font-family: inherit; background: none; border: 0; cursor: pointer; }
.slrail button:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 2px; }

.slrail .rail__divider {
  width: 1px; height: 30px; background: var(--sl-divider);
  margin: 0 10px; flex: none;
}
.slrail .rail__zone { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* margin-left:0 defends against the bare `nav { margin-left:auto }` in base.css:
   this zone is a <nav> now, and that global rule would shove it to the right
   edge of its grid column. */
.slrail .rail__zone--views { padding: 0 0 0 10px; gap: 8px; justify-self: start; margin-left: 0; }
.slrail .rail__zone--dates { min-width: 0; justify-self: center; justify-content: center; }
.slrail .rail__zone--filters { padding-right: 6px; justify-self: end; }

/* Zone 1 — view pills: single-select, never empty */
.slrail .sl-pill {
  padding: 7px 11px; border-radius: 10px;
  font-size: 14px; font-weight: 600; line-height: 1;
  color: var(--sl-ink-2); white-space: nowrap;
  border: 1px solid var(--sl-line); background: none;
  /* the link-out views are anchors now, so reset what a button gave for free */
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: inherit; -webkit-appearance: none; appearance: none;
}
.slrail .sl-pill:hover { color: var(--sl-ink); background: var(--sl-hover); }
.slrail .sl-pill[aria-current] { color: var(--sl-accent); font-weight: 800; border: 1.5px solid var(--sl-accent); padding: 6.5px 12.5px; }

/* Zone 2 — date stepper + days */
.slrail .sl-step {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  color: var(--sl-muted); font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sl-line); background: var(--sl-surface);
}
.slrail .sl-step:hover:not(:disabled) { background: var(--sl-hover); color: var(--sl-ink); }
.slrail .sl-step:disabled { opacity: .35; cursor: default; }
.slrail .rail__days {
  display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slrail .rail__days::-webkit-scrollbar { display: none; }
.slrail .sl-datejump {
  margin-left: 4px; flex: none; max-width: 34px; height: 30px;
  border: 1px solid var(--sl-line); border-radius: 999px; background: var(--sl-surface);
  color: transparent; font-size: 12px; cursor: pointer; appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%238A9088" stroke-width="2"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>');
  background-repeat: no-repeat; background-position: center;
}
.slrail .sl-datejump:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 2px; }
.slrail .sl-day {
  padding: 7px 14px; border-radius: 12px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--sl-ink-2); white-space: nowrap;
  border: 1px solid var(--sl-line); background: var(--sl-surface);
}
.slrail .sl-day b { font-size: 14px; font-weight: 600; line-height: 1.15; }
.slrail .sl-day span { font-size: 11px; font-weight: 400; line-height: 1.1; opacity: .7; }
.slrail .sl-day:hover { background: var(--sl-hover); color: var(--sl-ink); }
.slrail .sl-day[aria-selected="true"] { background: var(--sl-accent); color: #fff; border-color: var(--sl-accent); }
.slrail .sl-day[aria-selected="true"]:hover { background: var(--sl-accent-press); }

/* Zone 3 — filter chip + popover */
.slrail .sl-filter {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border: 1px solid var(--sl-line); border-radius: 999px;
  background: var(--sl-surface);
  font-size: 15px; font-weight: 600; color: var(--sl-ink); white-space: nowrap;
}
.slrail .sl-filter:hover, .slrail .sl-filter[aria-expanded="true"] { background: var(--sl-hover); }
.slrail .sl-filter .fcount {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--sl-accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.slrail .sl-filter .fcaret { color: var(--sl-muted); font-size: 11px; }

.slpop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 286px; padding: 16px 18px 18px; border-radius: 14px;
  background: var(--sl-surface); border: 1px solid var(--sl-line);
  box-shadow: 0 12px 32px rgba(28,35,32,.12);
}
.slpop .slpop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.slpop .slpop-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sl-muted);
}
.slpop .slpop-x { color: var(--sl-muted); font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.slpop .slpop-x:hover { background: var(--sl-hover); color: var(--sl-ink); }
.slpop .slpop-rows { display: flex; flex-direction: column; gap: 14px; }
.slpop .slpop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.slpop .slpop-row .lbl { font-size: 15px; font-weight: 500; color: var(--sl-ink); }
.slpop .slpop-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sl-divider); }
.slpop .slpop-reset {
  font-size: 13.5px; font-weight: 700; color: var(--sl-accent); padding: 0;
}
.slpop .slpop-hint { font-size: 12.5px; color: var(--sl-muted); margin-top: 10px; }

/* switch: track 40×23, knob 18, travel 17, 150ms */
.slpop .sw {
  position: relative; width: 40px; height: 23px; border-radius: 999px; flex: none;
  background: #D3D5CB; transition: background 150ms ease; padding: 0;
}
.slpop .sw::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 18px; height: 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(28,35,32,.25);
  transition: transform 150ms ease;
}
.slpop .sw[aria-checked="true"] { background: var(--sl-accent); }
.slpop .sw[aria-checked="true"]::after { transform: translateX(17px); }

/* responsive: <900 the date zone scrolls (already does); <640 the rail becomes
 * a card — views take a full row above dates + filter, hairlines drop. */
@media (max-width: 640px) {
  .slrail { flex-wrap: wrap; border-radius: 14px; padding: 8px; row-gap: 4px; }
  .slrail .rail__divider { display: none; }
  .slrail .rail__zone--views { flex: 1 1 100%; padding: 0; }
  .slrail .rail__zone--dates { flex: 1 1 auto; }
  .slrail .sl-pill { padding: 8px 14px; }
  .slpop { right: 8px; }
}

/* non-Games views: the date scroller + book filter change nothing there —
   hide them rather than presenting dead controls (view pills stay) */
.slrail.railmin { display: none; }
.slrail-wrap:has(.railmin) { margin: 0; }

/* mid widths: keep ONE row by compacting the chrome before ever stacking */
@media (max-width: 1240px) {
  .slrail .sl-pill { padding: 5px 10px; font-size: 13px; }
  .slrail .sl-pill[aria-current] { padding: 4.5px 9.5px; }
  .slrail .rail__zone--views { gap: 6px; }
  .slrail .sl-day { padding: 3px 8px; }
  .slrail .sl-day b { font-size: 12px; }
  .slrail .sl-day span { font-size: 9.5px; }
  .slrail .sl-step { width: 24px; height: 24px; font-size: 14px; }
  .slrail .sl-filter { padding: 5px 11px; font-size: 13px; }
}
/* below 1000px: give up perfect centering before giving up the row —
   the zones flow with space-between, the dates sit slightly off-center,
   and the full width gets used */
@media (max-width: 1000px) {
  .slrail { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .slrail .rail__zone--dates { flex: 0 1 auto; justify-content: center; }
  .slrail .rail__zone--views, .slrail .rail__zone--filters { flex: none; }
}
/* tight: shed the jump calendar and the chip sub-labels, keep the row */
@media (max-width: 760px) {
  .slrail .sl-datejump { display: none; }
  .slrail .sl-day span { display: none; }
  .slrail .sl-day { padding: 6px 8px; border-radius: 8px; }
  .slrail .sl-pill { padding: 5px 8px; font-size: 12.5px; }
  .slrail .sl-pill[aria-current] { padding: 4.5px 7.5px; }
  .slrail .sl-filter { padding: 5px 9px; font-size: 12.5px; }
  .slrail { gap: 6px; }
}
/* genuinely no room for one row: stack the three zones */
@media (max-width: 580px) {
  .slrail { display: grid; grid-template-columns: 1fr; row-gap: 4px; border-radius: 16px; padding: 7px 8px; min-height: 0; }
  .slrail .rail__zone--views, .slrail .rail__zone--dates, .slrail .rail__zone--filters {
    justify-self: center; padding: 0; flex-wrap: wrap; justify-content: center; }
}