/* Splash page — willarrive.in: board builder + live hero sign.
   Styled to match the board: matte #080a0f frames with 2px #222 borders,
   white bold letter-spaced headings like the station header, official
   line badges, flat yellow CTA. One container-query context at the page
   level; every text size is a percentage of the page width. */

.splash {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

/* --- First screen: the intro holds the page title and the showcase
   hero and is exactly one viewport tall on laptop/monitor screens —
   the showcase fills whatever height the title leaves, so the builder
   starts at the top of the next screen. --- */

.splash-intro {
  flex: 0 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --- Hero: the live preview of your board (below the builder) --- */

.hero {
  flex: 0 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vh, 18px);
  padding: clamp(16px, 3vh, 48px) 10%;
}

/* The showcase fills the rest of the first screen, below the banner.
   Every splash section (banner, showcase, builder, preview hero)
   shares the same 10% side margins — an 80% content column, so all
   left/right edges line up. The Launch/Copy row sits under the board,
   flush with its left edge. */
.hero-showcase {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(16px, 3vh, 48px) 10%;
}

/* The live sign fills the hero */
.hero-sign {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.hero-sign iframe {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  border-radius: 10px;
}

/* Link row at the bottom of each hero: yellow "Launch this Board" and a
   grey "Copy link" button. Aligned with the board inside the iframe
   (the iframe page has its own padding; mirror it). */
.hero-board-link {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  font-size: clamp(11px, 1.2cqw, 16px);
}

/* Yellow CTA, matching the board's primary button (a notch above the row text) */
.hbl-launch {
  display: inline-flex;
  align-items: center;
  background-color: #fccc0a;
  border-radius: 10px;
  color: #000000;
  font-weight: 700;
  font-size: 1.2em;
  padding: 0.5em 1.2em;
  text-decoration: none;
  white-space: nowrap;
}

.hbl-launch:hover {
  background-color: #ffd84d;
}

/* Grey secondary, matching the board's frame buttons */
.hbl-copy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2em;
  padding: 0.5em 1.2em;
  white-space: nowrap;
}

.hbl-copy svg {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* --- Top banner: slim header bar — wordmark + tagline on the left,
   the board's Launch/Copy CTAs on the right. Takes as little vertical
   room as possible so the showcase below fills the screen. --- */

.splash-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5cqw, 40px);
  padding: clamp(12px, 2vh, 20px) 10%;
}

.splash-banner .splash-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.splash-banner .splash-title h1 {
  margin: 0;
  color: #fccc0a;
  font-weight: 700;
  font-size: clamp(22px, 2.6cqw, 40px);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.splash-banner .splash-title p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(12px, 1.2cqw, 16px);
  line-height: 1.4;
}

/* Right-aligned banner CTA: the flat yellow button, sized for the slim
   banner (setup.js smooth-scrolls #builder into view on click). */
.banner-cta {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  background-color: #fccc0a;
  border: none;
  border-radius: 10px;
  color: #000000;
  font-weight: 700;
  font-size: clamp(13px, 1.3cqw, 17px);
  padding: 0.55em 1.1em;
  white-space: nowrap;
  cursor: pointer;
}

.banner-cta:hover {
  background-color: #ffd84d;
}

/* --- Builder: create your own board (below the title) --- */

.builder {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 40px);
  padding: clamp(20px, 4vh, 64px) 10% clamp(24px, 4vh, 64px);
  background-color: #05070b;
}

.builder-heading {
  text-align: center;
}

.builder-heading h2 {
  margin: 0;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(20px, 2cqw, 30px);
  letter-spacing: 0.06em;
}

.builder-heading p {
  margin: clamp(6px, 1vh, 10px) auto 0 auto;
  max-width: 44em;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(12px, 1.2cqw, 16px);
  line-height: 1.5;
}

/* Search + signs: two flat parts stacked full width, left aligned */
.setup-main {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3cqw, 40px);
  width: 100%;
}

.setup-part {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2cqw, 14px);
}

/* Labels read like the board's station names — the markup itself is
   title case; no transform */
.setup-label {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(14px, 1.4cqw, 18px);
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}

/* Inputs: same frame as the sign, darker inset */
#station-search {
  background-color: #05070b;
  border: 2px solid #222;
  border-radius: 10px;
  color: #ffffff;
  font: inherit;
  font-size: clamp(13px, 1.3cqw, 16px);
  padding: clamp(10px, 1.2cqw, 14px) clamp(12px, 1.4cqw, 16px);
}

#station-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

#station-search:focus {
  outline: none;
  border-color: #444;
}

.add-notice {
  margin: 0;
  min-height: 1.2em;
  color: #fccc0a;
  font-size: clamp(12px, 1.2cqw, 14px);
  flex: 0 0 auto;
}

/* search results: flat rows, hairline dividers */
.search-results {
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: clamp(200px, 24cqw, 320px);
  overflow-y: auto;
}

.result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.2cqw, 18px);
  padding: clamp(8px, 1cqw, 12px) 0;
  border-bottom: 1px solid #1b1f27;
  cursor: pointer;
  flex: 0 0 auto;
}

.result:last-child {
  border-bottom: none;
}

.result:hover .r-name {
  color: #fccc0a;
}

.r-name {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(13px, 1.3cqw, 16px);
}

/* Official line badges (colored circles, as on the board) */
.r-badges {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7cqw, 10px);
  flex: 0 0 auto;
}

/* signs list: a table with hairline row dividers */
.board-list {
  width: 100%;
}

.board-table {
  width: 100%;
  border-collapse: collapse;
}

.board-table th {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  font-size: clamp(15px, 1.5cqw, 19px);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0 clamp(8px, 0.9cqw, 12px) clamp(8px, 1cqw, 10px);
  border-bottom: 1px solid #1b1f27;
  white-space: nowrap;
}

.board-table td {
  padding: clamp(10px, 1.2cqw, 14px) clamp(8px, 0.9cqw, 12px);
  border-bottom: 1px solid #1b1f27;
  text-align: center;
  vertical-align: middle;
}

.board-table tbody tr:last-child td {
  border-bottom: none;
}

/* Line badges sized for the builder, not the sign (the .mini sizing in
   train-times.css scales with the board's container, far too big here) */
.bt-station .line-badge,
.r-badges .line-badge {
  width: clamp(15px, 1.5cqw, 19px);
  font-size: clamp(10px, 1cqw, 12px);
}

/* narrow columns shrink to content; the platform cell takes the rest */
.bt-dir,
.bt-lead,
.bt-remove {
  width: 1%;
  white-space: nowrap;
}

.bt-station {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(15px, 1.5cqw, 19px);
  white-space: nowrap;
}

/* flex wrapper INSIDE the td — never on the td itself. Holds the line
   badges beside the platform name. vertical-align: middle puts the badge
   center half an x-height above the baseline, which reads low next to
   the caps; lifting it by (capHeight - xHeight)/2 — 0.094em in Helvetica
   — centers the badges exactly on the caps midline of the name at any
   font size. */
.bt-badges {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.5cqw, 8px);
  margin-left: clamp(8px, 0.9cqw, 12px);
  vertical-align: middle;
  position: relative;
  top: -0.094em;
}

.boards-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.boards-count {
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0;
  font-weight: 400;
}

/* direction checkboxes */
.toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.toggle input {
  accent-color: #fccc0a;
  transform: scale(1.4);
  margin: 0;
}

/* Board Settings row: autoscroll toggle + seconds field */
.board-config {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2cqw, 16px);
}

/* Down arrow after the board settings: plain grey chevron, centered,
   that lights up on hover; setup.js smooth-scrolls the live preview
   hero into full view on click. Resets every property the global
   button rule sets, like .board-remove. */
.scroll-down {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: clamp(16px, 1.6cqw, 22px);
  padding: 6px;
  margin: 0;
  cursor: pointer;
  transition: color 160ms ease;
}

.scroll-down:hover,
.scroll-down:focus {
  border: none;
  color: #ffffff;
}

.scroll-down svg {
  width: 1.5em;
  height: 1.5em;
}

/* the checkbox's scale(1.4) transform draws ~3px outside its layout box
   (transform scales visually, not the layout); pad the toggle so the
   DRAWN edge lands on the column edge, in line with everything else */
.config-toggle {
  padding-left: 3px;
}

.config-toggle span {
  margin-left: clamp(8px, 1cqw, 10px);
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(13px, 1.3cqw, 16px);
}

/* Autoscroll toggle + info icon, kept clear of the <label> so clicking
   the icon never flips the checkbox */
.config-item {
  display: inline-flex;
  align-items: center;
}

.config-unit {
  color: rgba(255, 255, 255, 0.5);
}

.lead-field input:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Per-station lead input: sleek inset field, no spinners */
.lead-field {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.7cqw, 10px);
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(14px, 1.4cqw, 17px);
  white-space: nowrap;
}

.lead-field input {
  appearance: textfield;
  -moz-appearance: textfield;
  background-color: #0b0e14;
  border: 1px solid #262b36;
  border-radius: 8px;
  color: #ffffff;
  font: inherit;
  font-size: clamp(14px, 1.4cqw, 16px);
  font-variant-numeric: tabular-nums;
  width: 3.6em;
  text-align: center;
  padding: clamp(6px, 0.8cqw, 10px) clamp(8px, 1cqw, 12px);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.lead-field input::-webkit-outer-spin-button,
.lead-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lead-field input:hover {
  border-color: #333a48;
}

.lead-field input:focus {
  outline: none;
  border-color: #fccc0a;
  background-color: #0d1119;
}

/* Validation: out-of-range or empty turns the border red until blur
   snaps the value back into 0-60 */
.lead-field.invalid input {
  border-color: #e5484d;
  color: #e5484d;
}

.lead-field.invalid input:focus {
  border-color: #ff6b70;
  background-color: #140d10;
}

.empty-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: clamp(12px, 1.2cqw, 14px);
}

/* Buttons: sign-frame grey secondary, like the board */
button {
  font: inherit;
  font-size: clamp(13px, 1.3cqw, 16px);
  background-color: #080a0f;
  border: 2px solid #222;
  border-radius: 10px;
  color: #ffffff;
  padding: clamp(9px, 1cqw, 13px) clamp(16px, 1.8cqw, 26px);
  cursor: pointer;
  white-space: nowrap;
}

button:hover {
  border-color: #444;
}

/* The table's Remove button: plain muted text, not a framed button.
   Defined after the global button rule and resetting every property
   it sets, so it can never pick up the frame. */
.board-remove {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.45);
  font: inherit;
  font-size: clamp(13px, 1.3cqw, 15px);
  letter-spacing: 0.04em;
  padding: 4px 0;
  cursor: pointer;
  white-space: nowrap;
}

.board-remove:hover,
.board-remove:focus {
  border: none;
  color: #ffffff;
}

/* Info icon beside the Lead column title: click toggles a tooltip */
.lead-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.45);
  font: inherit;
  font-size: clamp(12px, 1.2cqw, 15px);
  padding: 2px;
  margin-left: clamp(5px, 0.6cqw, 8px);
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
}

.lead-info:hover,
.lead-info:focus {
  border: none;
  color: #ffffff;
}

.lead-info svg {
  width: 1em;
  height: 1em;
}

/* Per-row duplicate of the info icon, placed inside each lead field for
   the narrow layout (which hides the column headers and their tooltip).
   Desktop keeps only the th one. */
.lead-info-cell {
  display: none;
}

/* The tooltip itself: opens ABOVE the table, hanging left from the icon
   so it stays inside the viewport and never creates scrollbars. Resets
   the th's letter-spacing. */
.lead-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  display: none;
  width: clamp(240px, 22cqw, 320px);
  background-color: #0d1119;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  padding: clamp(10px, 1.1cqw, 14px) clamp(12px, 1.3cqw, 16px);
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(12px, 1.2cqw, 14px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  z-index: 20;
}

/* Variant for icons near the page's left edge (e.g. the Autoscroll one):
   anchor to the icon's LEFT so the tooltip opens rightward and stays in
   the viewport, instead of hanging off-screen to the left. */
.tip-left {
  left: 0;
  right: auto;
  width: auto;
  max-width: 240px;
  min-width: 200px;
}

/* Mobile-only dismissable notice: the app is built for larger screens.
   Hidden everywhere by default; the narrow-screen query shows it unless
   JS has marked it dismissed ([hidden]). */
.screen-notice {
  display: none;
}

@media (max-width: 760px) {
  .screen-notice:not([hidden]) {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(320px, calc(100vw - 48px));
    /* the sign's matte frame */
    background-color: #080a0f;
    border: 2px solid #222;
    border-radius: 10px;
    /* huge spread shadow doubles as the dimmed backdrop */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55), 0 10px 32px rgba(0, 0, 0, 0.55);
    padding: 22px 20px 18px;
    text-align: center;
  }

  .screen-notice p {
    flex: 0 0 auto;
    margin: 0;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 1.5;
  }

  /* the flat yellow CTA, like Launch this Board */
  .screen-notice button {
    flex: 0 0 auto;
    align-self: center;
    background-color: #fccc0a;
    border: none;
    border-radius: 10px;
    color: #000000;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 12px 24px;
  }

  .screen-notice button:hover {
    background-color: #ffd84d;
    border: none;
  }
}

/* Narrow screens: hero keeps a readable sign height; the signs table
   stops being a 5-column grid crammed into a phone width and becomes
   stacked cards — each row grows vertically instead of shrinking into
   illegibility. Platform (name + line badges) + Remove on top, then the
   Uptown / Downtown / Lead controls on their own full-width line with
   labels replacing the hidden column headers. */
@media (max-width: 760px) {
  /* the one-screen banner layout is for laptop/monitor screens; on
     phones the banner stacks (wordmark, tagline, CTAs) above the board */
  .splash-intro {
    min-height: auto;
  }

  /* the 80% content column is a large-screen layout; phones keep a
     16px gutter so the board and builder stay usable */
  .splash-banner,
  .hero-showcase,
  .builder,
  .hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .splash-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .splash-banner .splash-title p {
    font-size: 13px;
  }

  .hero-showcase {
    flex: 0 0 auto;
  }

  .hero {
    min-height: auto;
  }

  .hero-sign {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
  }

  /* thead carries the column titles and the Lead tooltip — both are
     replaced per-row in this layout */
  .board-table thead {
    display: none;
  }

  .board-table,
  .board-table tbody {
    display: block;
    width: 100%;
  }

  /* each row: a three-column grid, two content lines */
  .board-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 10px;
    padding: clamp(14px, 4cqw, 22px) 0;
    border-bottom: 1px solid #1b1f27;
  }

  .board-table tr:last-child {
    border-bottom: none;
  }

  .board-table td {
    display: block;
    border-bottom: none;
    padding: 0;
  }

  /* the desktop table squeezes these columns to content (width: 1%);
     in the grid they must fill their tracks again, or the controls
     collapse to 1px boxes that spill out of their columns */
  .bt-dir,
  .bt-lead,
  .bt-remove {
    width: auto;
  }

  .bt-station {
    grid-column: 1 / 3;
    grid-row: 1;
    white-space: normal;
  }

  .bt-remove {
    grid-column: 3;
    grid-row: 1;
  }

  /* controls line: uptown / downtown / lead, one per third, centered */
  .bt-dir:nth-child(2),
  .bt-dir:nth-child(3),
  .bt-lead {
    grid-row: 2;
  }

  .bt-dir:nth-child(2) {
    grid-column: 1;
  }

  .bt-dir:nth-child(3) {
    grid-column: 2;
  }

  .bt-lead {
    grid-column: 3;
  }

  /* Board Settings row centered like the controls line above it */
  .board-config {
    justify-content: center;
  }

  .board-config .lead-field {
    font-size: 14px;
  }

  .board-config .lead-field input {
    font-size: 13px;
  }

  /* cell labels, styled like the column headers they replace; a station
     with no trains in a direction keeps its empty cell unlabeled */
  .bt-dir:not(:empty)::before,
  .bt-lead::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: capitalize;
    white-space: nowrap;
  }

  /* the per-row Lead tooltip trigger replaces the hidden th one */
  .lead-info-cell {
    display: inline-flex;
    margin-left: 4px;
  }
}

/* --- Fade-in on scroll: the builder and the live preview hero fade in
   together, once, when the builder section is reached. setup.js adds
   .reveal to both; an IntersectionObserver flips .is-visible on both
   at the same moment. Without JS everything renders normally. --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1000ms ease-out, transform 1000ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

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