/* ==========================================================================
   home-refine.css  --  Season 1 home page refinement layer
   Loaded AFTER styles.css and home.css. Everything here is an override of
   rules that already exist; nothing in the base files was deleted, so a
   stale cached copy of this file degrades to the previous layout rather
   than to an unstyled page.

   Covers:
     1  frozen masthead + pills band
     2  gold rule opening all 13 sections
     3  clickable section titles -> search panel
     4  back to top after 600px
     5  background #022818 -> #071b14
     6  eight scrolling strips, click to pause
     7  overlay chrome for the phone back gesture

   ASCII only, per site convention.
   ========================================================================== */

:root {
  /* Every vertical offset below derives from these two. Change the bar
     height here and the band, the body padding and the anchor scroll
     padding all follow; they cannot drift apart. */
  --wwb-mast-h: 68px;
  --wwb-band-h: 46px;
  --wwb-bg-top: #022818;
  --wwb-bg-bot: #071b14;
}

@media (max-width: 760px) {
  :root { --wwb-mast-h: 58px; --wwb-band-h: 42px; }
}

/* A phone held sideways is 844px wide and 390px tall, so the width query
   above misses it and hands back the full-height bars -- which then eat
   nearly a third of the screen. Any short viewport gets compact bars. */
@media (max-height: 520px) {
  :root { --wwb-mast-h: 52px; --wwb-band-h: 40px; }
}

/* ---- 5. Background ------------------------------------------------------
   Painted on a fixed pseudo-element rather than with
   background-attachment: fixed, which iOS Safari either ignores outright or
   repaints on every scroll frame. */
body.page-home { background: var(--wwb-bg-bot); }

body.page-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--wwb-bg-top) 0%, var(--wwb-bg-bot) 58%);
}

/* ---- 1. Frozen top -----------------------------------------------------
   Both bars are fixed, not sticky. Sticky let the band ride up under the
   masthead on momentum scroll and land a few pixels off. */
body.page-home { padding-top: calc(var(--wwb-mast-h) + var(--wwb-band-h)); }

/* One anchor offset, not two. home.css already carries a scroll-margin-top
   of --home-nav-sticky + --home-section-nav-h (66 + 88 = 154px) on nine of
   the home anchors; left in place it stacked with the scroll-padding below
   and every jump landed 154px short. Those two variables are used only for
   that rule and for the sticky top of the band, which is overridden above,
   so zeroing them is safe and leaves scroll-padding-top as the single
   source. It also covers the four anchors the old list never named. */
body.page-home {
  --home-nav-sticky: 0px;
  --home-section-nav-h: 0px;
}

html { scroll-padding-top: calc(var(--wwb-mast-h) + var(--wwb-band-h) + 16px); }

body.page-home header.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wwb-mast-h);
  z-index: 60;
  display: flex;
  align-items: center;
  background: rgba(2, 40, 24, 0.92);
}

body.page-home .nav-inner {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  /* Notch safe areas matter in landscape, where the inset is on the side. */
  padding-left: max(clamp(16px, 4vw, 28px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 28px), env(safe-area-inset-right));
}

@media (max-height: 520px) {
  body.page-home .brand-sub { display: none; }
}

body.page-home .home-section-nav {
  position: fixed;
  top: var(--wwb-mast-h);
  left: 0;
  right: 0;
  height: var(--wwb-band-h);
  z-index: 55;
  padding: 0;
  display: flex;
  align-items: center;
  background: rgba(4, 33, 22, 0.94);
  border-bottom: 1px solid var(--line);
}

/* The band is one scrolling row now. The stacked "Sections" label and the
   All sections toggle do not fit in 46px and are redundant once the rail
   scrolls horizontally. */
body.page-home .home-section-nav-label,
body.page-home .home-section-nav-toggle { display: none; }

/* The search button sits outside the scroller so it stays reachable no
   matter how far along the rail you have swiped. home-showcase.js owns the
   innerHTML of the pill container, so nothing of ours can live inside it. */
body.page-home .home-section-nav .wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding-left: max(clamp(16px, 4vw, 28px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 28px), env(safe-area-inset-right));
}

body.page-home .home-section-nav .home-section-jump { flex: 1; min-width: 0; }

body.page-home .home-section-jump,
body.page-home .division-pills.home-section-jump {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
  margin: 0;
}

body.page-home .home-section-jump::-webkit-scrollbar { display: none; }

body.page-home .section-jump-pill,
body.page-home .home-section-jump .pill {
  flex: none;
  /* Pinned to the band depth so the whole bar is tappable. A 28px pill
     inside a 42px bar is a miss waiting to happen on a phone. */
  min-height: calc(var(--wwb-band-h) - 12px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  white-space: nowrap;
}

body.page-home .section-jump-pill.is-here {
  border-color: rgba(244, 181, 71, 0.6);
  color: var(--gold-2);
  background: rgba(244, 181, 71, 0.1);
}

/* The band replaces the old spacer. */
body.page-home .home-section-nav-spacer { height: 0; }

/* Search entry point, pinned to the head of the rail. */
.band-find {
  flex: none;
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: calc(var(--wwb-band-h) - 12px);
  padding: 4px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #04211a;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
}

.band-find:hover { background: var(--gold-2); }

/* ---- 2. The gold rule that opens every section ------------------------- */
.srule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(244, 181, 71, 0.55);
}

.srule-count {
  flex: none;
  padding: 3px 8px;
  border: 1px solid rgba(244, 181, 71, 0.3);
  border-radius: 3px;
  background: rgba(244, 181, 71, 0.13);
  color: var(--gold-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

/* A figure the registrar cannot stand behind is never dressed in gold. */
.srule-count.is-pending {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--paper-dim);
}

.srule-eyebrow {
  overflow: hidden;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srule-fill {
  flex: 1;
  min-width: 14px;
  height: 1px;
  background: linear-gradient(90deg, rgba(244, 181, 71, 0.4), rgba(244, 181, 71, 0.05));
}

.srule-charter {
  flex: none;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .srule { flex-wrap: wrap; gap: 8px; }
  .srule-fill { display: none; }
  .srule-eyebrow { order: 3; width: 100%; }
}

/* The rule carries the eyebrow now, so the old one inside the head would
   print it twice. */
.section-head .srule + div > .eyebrow,
.section-head .srule ~ div > .eyebrow { display: none; }

/* ---- 3. Section titles are controls ------------------------------------ */
.stitle-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.stitle-btn:hover .stitle-t,
.stitle-btn:focus-visible .stitle-t { box-shadow: inset 0 -2px 0 var(--gold); }

.stitle-find {
  position: relative;
  top: -4px;
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.stitle-btn:hover .stitle-find {
  border-color: rgba(244, 181, 71, 0.5);
  color: var(--gold-2);
}

/* The rule runs the full width of the head and carries the count and the
   charter clause at its two ends, so the block reads left to right rather
   than centred. */
.srule { width: 100%; }

body.page-home .section-head,
body.page-home .section-head > div:first-of-type { align-items: stretch; text-align: left; }

body.page-home .section-head h2 { text-align: left; max-width: none; }

body.page-home .section-head .lede { margin: 0; text-align: left; }

/* ---- 6. Eight scrolling strips ----------------------------------------- */
.wwb-strip {
  position: relative;
  overflow: hidden;
  margin: 14px 0 22px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.wwb-strip-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: wwb-strip-run var(--wwb-dur, 52s) linear infinite;
  will-change: transform;
}

@keyframes wwb-strip-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.wwb-strip.is-paused .wwb-strip-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .wwb-strip-track { animation: none; }
}

.wwb-strip-flag {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  transform: translateY(-50%);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(4, 33, 22, 0.9);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}

.wwb-strip.is-paused .wwb-strip-flag {
  border-color: rgba(244, 181, 71, 0.45);
  color: var(--gold-2);
  opacity: 1;
}

@media (hover: hover) {
  .wwb-strip:hover .wwb-strip-flag { opacity: 1; }
}

/* No hover on a phone, so the control has to be visible at rest or it does
   not exist. Dimming the whole element also dims its backing panel and the
   chip names underneath bleed through, so hold it opaque and quiet the
   text instead. */
@media (hover: none) {
  .wwb-strip-flag {
    opacity: 1;
    background: rgba(4, 33, 22, 0.96);
    color: rgba(159, 176, 192, 0.72);
  }
}

.wwb-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--paper);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

@media (hover: hover) {
  .wwb-chip:hover { border-color: var(--line-strong); }
}

.wwb-chip img {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  object-fit: cover;
}

.wwb-chip .wwb-chip-mono {
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

.wwb-chip .wwb-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
}

.wwb-chip .wwb-dot.is-unverified { background: var(--paper-dim); }

.wwb-chip-init {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(244, 181, 71, 0.16);
  color: var(--gold-2);
  font-family: var(--font-mono);
  font-size: 10px;
}

/* ---- 4. Back to top ---------------------------------------------------- */
#wwb-totop {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(244, 181, 71, 0.45);
  border-radius: 50%;
  background: rgba(4, 33, 22, 0.93);
  color: var(--gold-2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

#wwb-totop.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#wwb-totop:hover { background: rgba(244, 181, 71, 0.16); }

@media (prefers-reduced-motion: reduce) {
  #wwb-totop { transition: none; }
}

/* ---- 3 / 7. Search panel ----------------------------------------------- */
.wwb-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--wwb-mast-h) + 14px) 14px 14px;
  background: rgba(2, 16, 11, 0.72);
  backdrop-filter: blur(6px);
}

.wwb-overlay.is-on { display: flex; }

.wwb-panel {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: #05261a;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

.wwb-panel-top {
  padding: 13px 14px 0;
  border-bottom: 1px solid var(--line);
}

.wwb-panel-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wwb-panel-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--paper);
  font: inherit;
  /* Under 16px, iOS Safari zooms the page when the field takes focus and
     never zooms back out. */
  font-size: 16px;
}

.wwb-panel-row input::placeholder { color: var(--paper-dim); }

.wwb-panel-row button {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--paper-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.wwb-views {
  display: flex;
  gap: 3px;
  margin-top: 11px;
  overflow-x: auto;
  scrollbar-width: none;
}

.wwb-views::-webkit-scrollbar { display: none; }

.wwb-view-tab {
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--paper-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.wwb-view-tab .wwb-n {
  margin-left: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  opacity: 0.65;
}

.wwb-view-tab.is-on {
  border-bottom-color: var(--gold);
  color: var(--gold-2);
}

.wwb-results {
  min-height: 260px;
  padding: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wwb-res {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .wwb-res:hover { background: rgba(255, 255, 255, 0.06); }
}

.wwb-res img {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  object-fit: contain;
}

.wwb-res .wwb-nm { font-size: 14px; font-weight: 500; }

.wwb-res .wwb-sb {
  margin-top: 1px;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.wwb-res .wwb-rt {
  flex: none;
  margin-left: auto;
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.wwb-res .wwb-rt.is-gold { color: var(--gold-2); }
.wwb-res .wwb-rt.is-live { color: var(--live); }

.wwb-empty {
  padding: 26px 12px;
  color: var(--paper-dim);
  font-size: 13.5px;
  text-align: center;
}

.wwb-empty span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}