/* =========================================================================
   travel.swakhil.in — split-flap departure board
   Amber on night navy, borrowed from the TripPDF palette. Dark only:
   a flap board is a dark object, and a "light mode" board is nothing.
   ========================================================================= */

:root {
  --night:      #0F172A;
  --night-deep: #0A1120;
  --slate:      #1E293B;
  --slate-lift: #27364D;
  --haze:       #A8BBCC;
  --paper:      #F1F5F9;
  --amber:      #FBBF24;
  --amber-hot:  #FCD34D;

  /* the hairline where a real flap folds */
  --seam:    rgba(10, 17, 32, .9);
  --rule:    rgba(168, 187, 204, .13);
  --rule-hi: rgba(168, 187, 204, .28);

  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --board: 900px;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Set here as well as on body so the colour behind the page is explicit.
     iOS paints the rubber band overscroll area with it, and browsers that
     ignore theme-color still meet the same navy at the top edge. */
  background: var(--night-deep);
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--paper);
  background: var(--night-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

:where(a, button, [role="tab"]):focus-visible {
  outline: 2px solid var(--amber-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: .7rem 1.1rem;
  background: var(--amber);
  color: var(--night);
  font-family: var(--mono);
  font-size: .8rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------- housing */

.board {
  max-width: var(--board);
  margin: clamp(1rem, 4vw, 3rem) auto;
  background: var(--night);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

/* -------------------------------------------------------- chrome strip */

.chrome {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--night-deep);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--haze);
}

.chrome__lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
  flex: none;
}

.chrome__title { color: var(--paper); }

.chrome__clock {
  margin-left: auto;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.chrome__share {
  padding: .3rem;
  color: var(--haze);
  line-height: 0;
  transition: color .15s var(--ease);
}
.chrome__share:hover { color: var(--amber); }
.chrome__share svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------ identity */

.identity {
  display: flex;
  gap: clamp(1rem, 3vw, 1.75rem);
  align-items: flex-start;
  padding: clamp(1.75rem, 5vw, 3rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.identity__text { flex: 1; min-width: 0; }

.avatar {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--slate);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.identity__name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.1rem, 9.5vw, 4.1rem);
  line-height: 1;
  margin-bottom: 1rem;
}

.identity__tagline {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 400;
  color: var(--paper);
  margin-bottom: .45rem;
}

.identity__bio {
  max-width: 46ch;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--haze);
}

.identity__handle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  padding: .4rem .75rem .4rem .55rem;
  border: 1px solid var(--rule-hi);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--haze);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.identity__handle svg { width: 14px; height: 14px; }
.identity__handle:hover { color: var(--amber); border-color: var(--amber); }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 1.5rem;
}
.stats__value {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.stats__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--haze);
}

/* ---------------------------------------------------------- split-flap */

.flaps {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.flap {
  position: relative;
  display: grid;
  place-items: center;
  min-width: .78em;
  padding: .12em .1em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--slate-lift) 0 50%, var(--slate) 50% 100%);
  color: var(--amber);
  overflow: hidden;
}
/* the fold, on every cell — the detail that makes it a board */
.flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--seam);
  z-index: 2;
}
.flap--space { background: none; min-width: .34em; }

.flap__char { display: block; }
.flap.is-ticking .flap__char {
  animation: flap-drop 90ms var(--ease);
}

@keyframes flap-drop {
  from { transform: rotateX(-88deg); opacity: .45; }
  to   { transform: rotateX(0);      opacity: 1; }
}

/* ---------------------------------------------------------------- tabs */

.tabs {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding: .75rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  padding: .45rem .85rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .73rem;
  letter-spacing: .13em;
  color: var(--haze);
  white-space: nowrap;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.tab:hover { color: var(--paper); background: var(--slate); }
.tab[aria-selected="true"] {
  color: var(--night);
  background: var(--amber);
}

/* ------------------------------------------------------- boarding card */

.boarding {
  display: block;
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.25rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(251, 191, 36, .09), transparent 60%),
    var(--slate);
  transition: background-color .18s var(--ease);
}
.boarding:hover { background-color: var(--slate-lift); }

.boarding__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--amber);
}
.boarding__lamp {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  animation: blink 1.9s steps(1, end) infinite;
}
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }

.boarding__length {
  margin-left: auto;
  color: var(--haze);
  font-variant-numeric: tabular-nums;
}

.boarding__code {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  line-height: .9;
  color: var(--amber);
  letter-spacing: .02em;
}
.boarding__title {
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 500;
  margin-top: .5rem;
}
/* The country trails the destination in board type, so the two read as one
   line of data rather than as a heading with a subtitle. */
.boarding__country,
.row__country {
  margin-left: .6rem;
  font-family: var(--mono);
  color: var(--haze);
  letter-spacing: .08em;
  white-space: nowrap;
}
.boarding__country { font-size: .8rem; }
.row__country { font-size: .68rem; }

.boarding__note {
  max-width: 52ch;
  margin-top: .6rem;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--haze);
}

/* ---------------------------------------------------------- board rows */

.colhead,
.row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 5rem 7.5rem;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem var(--gutter);
}

/* The rule sits under the column header and between consecutive rows, so
   the board looks the same whichever filter is on. Bordering .row itself
   would leave the first row's rule dependent on what precedes it. */
.colhead {
  padding-top: 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .18em;
  color: var(--haze);
  opacity: .65;
}

.row {
  transition: background-color .15s var(--ease);
}

/* Trips not taken yet. Dimmer, and not a link, because there is nothing to
   click through to until the handbook exists. */
.colhead--upcoming { border-top: 1px solid var(--rule); }
.row--upcoming { cursor: default; }
.row--upcoming .row__code,
.row--upcoming .row__title { color: var(--haze); }

.row + .row { border-top: 1px solid var(--rule); }
.row:hover { background: var(--slate); }
.row:hover .row__code { color: var(--amber-hot); }

.row__code {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--amber);
  transition: color .15s var(--ease);
}

.row__title {
  display: block;
  font-size: 1.08rem;
  font-weight: 400;
}
.row__note {
  display: block;
  margin-top: .3rem;
  max-width: 54ch;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--haze);
}

.row__length,
.row__status {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--haze);
  font-variant-numeric: tabular-nums;
}

.row__status { justify-self: start; }
.status {
  display: inline-block;
  white-space: nowrap;
  padding: .28rem .5rem;
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
}
.status--live { color: var(--amber); border-color: rgba(251, 191, 36, .45); }
.status--new  { color: var(--night); background: var(--amber); border-color: var(--amber); }
.status--free { color: var(--paper); }
.status--soon { color: var(--haze); opacity: .7; }
/* Dashed, because nothing about this one is confirmed yet. */
.status--scheduled {
  color: var(--amber);
  border-style: dashed;
  border-color: rgba(251, 191, 36, .45);
}

/* -------------------------------------------------------------- footer */

.footer {
  padding: 1.5rem var(--gutter) 1.75rem;
  border-top: 1px solid var(--rule);
  background: var(--night-deep);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--haze);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.25rem;
}
/* Padded to a 24px tap target rather than bare 13px text. */
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--haze);
}
.footer a:hover { color: var(--amber); }

/* --------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1.5rem);
  padding: .7rem 1.1rem;
  background: var(--amber);
  color: var(--night);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .78rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 30;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------- config error panel */

.fault {
  margin: 0 var(--gutter) 2rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--amber);
  border-radius: 4px;
  background: rgba(251, 191, 36, .07);
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.7;
  color: var(--paper);
}
.fault h2 { font-size: .82rem; letter-spacing: .14em; color: var(--amber); margin-bottom: .6rem; }
.fault code { color: var(--amber-hot); overflow-wrap: anywhere; }

/* --------------------------------------------------------------- small */

@media (max-width: 620px) {
  .board { margin: 0; border: 0; border-radius: 0; }

  .identity { flex-direction: column; }
  .avatar { width: 64px; height: 64px; }

  .colhead { display: none; }

  /* The column headers go, but Upcoming has to stay: without it the last
     row is just a dimmer row with no explanation. Show the label alone. */
  .colhead--upcoming { display: block; }
  .colhead--upcoming span:not(:nth-child(2)) { display: none; }

  /* Code down the left, everything else stacked beside it. Length and
     status share a row, and status closes up when a row has no length. */
  /* The length column is a fixed width, not auto: each row is its own grid,
     so an auto column collapses on rows with no length and knocks their
     status pill out of line with the rest. */
  .row {
    grid-template-columns: 3.4rem 4.2rem 1fr;
    row-gap: .6rem;
    column-gap: .9rem;
  }
  .row__main   { grid-column: 2 / -1; grid-row: 1; }
  .row__length { grid-column: 2; grid-row: 2; }
  .row__status { grid-column: 3; grid-row: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}