/* ============================================================================
   design-system.css  —  "yukikumo's room" design system
   ----------------------------------------------------------------------------
   The single, documented source of truth for the look & feel of the site.
   Load it on ANY page (after bootstrap, before/with style.css) and you can
   reproduce the cream-&-sakura, soft-pixel aesthetic anywhere.

   Layers in this file:
     1. TOKENS      — colors, fonts, radii, shadows (CSS custom properties)
     2. PRIMITIVES  — tiny reusable bits: .kick, .ds-tag, .ds-btn, .ds-chip…
     3. SURFACES    — cards / panels that everything sits on
     4. PIXEL       — pixel-art helpers (crisp scaling, speech bubble)
     5. MAP         — shared map styling (used by Tōkaidō + flight tracker)
     6. FLIGHT      — components specific to the flight tracker app

   How to reproduce the design on a new page:
     <link rel="stylesheet" href="/assets/design-system.css">
     wrap content in  .ds-card  ->  .card-body
     label sections with  <p class="kick">SOMETHING</p>
     use  .ds-btn  /  .ds-btn--ghost  for buttons,  .ds-chip  for filters.
   See DESIGN.md for the full cheat-sheet.
   ============================================================================ */

/* ============================================================
   1. TOKENS — the palette & type that define the brand.
   These mirror the values style.css uses, kept here as the
   canonical reference. Change a brand color in ONE place.
   ============================================================ */
:root{
  /* --- core palette --- */
  --cream:#fbf7f2;     /* page background          */
  --ink:#2e2a2b;       /* primary text             */
  --muted:#8d8487;     /* secondary text           */
  --sakura:#f7c8d3;    /* cherry-blossom pink      */
  --lav:#cdc2f0;       /* lavender                 */
  --berry:#ff6a8b;     /* accent / links / "live"  */
  --teal:#7fc6d0;      /* cool accent              */
  --mint:#a8e6cf;      /* success / on-time        */
  --sun:#ffd28a;       /* warm accent / delays     */
  --codebg:#fdf3f5;    /* code & inset surfaces    */

  /* --- sky gradient (used by pixel scenes & flight map) --- */
  --sky-top:#bfe3f2;
  --sky-bot:#dff1f7;

  /* --- elevation & shape --- */
  --soft:0 6px 24px rgba(0,0,0,.06);
  --soft-lg:0 12px 30px rgba(0,0,0,.09);
  --pixel-shadow:3px 3px 0 rgba(46,42,43,.22);   /* hard pixel drop-shadow */
  --r-sm:10px; --r:12px; --r-lg:14px; --r-xl:18px;
  --border:#efe6e2;

  /* --- type --- */
  --font-body:"Quicksand",system-ui,sans-serif;
  --font-pixel:"Pixelify Sans",monospace;
  --font-mono:"DM Mono",ui-monospace,monospace;
}

/* keep text sizing identical across browsers (Safari/iOS can auto-inflate it)
   and never let a stray wide child make the page horizontally scroll/zoom */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body{ overflow-x:hidden; }

/* ============================================================
   2. PRIMITIVES — the small recurring marks of the brand.
   Prefixed .ds-* so they never collide with Bootstrap.
   ============================================================ */

/* tiny pixel kicker label that sits above headings ("FEATURED 🚃") */
.kick{
  font-family:var(--font-pixel); font-size:.7rem; color:var(--berry);
  letter-spacing:.02em;
}

/* little outlined pill tag, e.g. a status or category chip */
.ds-tag{
  font-family:var(--font-pixel); font-size:.62rem; color:var(--berry);
  background:#fff7f9; border:1px solid var(--sakura); border-radius:999px;
  padding:.12rem .5rem; display:inline-flex; align-items:center; gap:.3rem;
  line-height:1.4;
}
.ds-tag--mint{ color:#2f9e6e; background:#f0fbf5; border-color:var(--mint); }
.ds-tag--lav { color:#6b5bd0; background:#f4f1fd; border-color:var(--lav);  }
.ds-tag--sun { color:#b9802b; background:#fff8ec; border-color:var(--sun);  }

/* a soft rounded button in the house style */
.ds-btn{
  font-family:var(--font-body); font-weight:600; font-size:.86rem;
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  color:#fff; background:linear-gradient(90deg,var(--sakura),var(--berry));
  border:0; border-radius:999px; padding:.5rem .95rem; text-decoration:none;
  box-shadow:var(--soft); transition:transform .12s ease, box-shadow .12s ease;
}
.ds-btn:hover{ transform:translateY(-1px); box-shadow:var(--soft-lg); color:#fff; }
.ds-btn--ghost{
  color:var(--ink); background:#fff; box-shadow:inset 0 0 0 1px var(--border);
}
.ds-btn--ghost:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--sakura); }

/* filter / toggle chip (matches the Tōkaidō map chips) */
.ds-chip{
  font-family:var(--font-body); font-weight:600; font-size:.76rem; cursor:pointer;
  border:1px solid var(--border); background:var(--cream); border-radius:999px;
  padding:.32rem .8rem; display:inline-flex; align-items:center; gap:.4rem;
  transition:transform .12s ease;
}
.ds-chip:hover{ transform:translateY(-1px); }
.ds-chip.active{ background:#fff; box-shadow:var(--soft); border-color:transparent; }
.ds-chip .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* a small live "heartbeat" dot — pulses to signal real-time data */
.ds-live{ display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-pixel); font-size:.66rem; color:var(--berry); }
.ds-live::before{ content:""; width:8px; height:8px; border-radius:50%;
  background:var(--berry); box-shadow:0 0 0 0 rgba(255,106,139,.6);
  animation:ds-pulse 1.8s ease-out infinite; }
.ds-live[data-state="idle"]{ color:var(--muted); }
.ds-live[data-state="idle"]::before{ background:var(--muted); animation:none; }
@keyframes ds-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,106,139,.55); }
  70%{ box-shadow:0 0 0 7px rgba(255,106,139,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,106,139,0); }
}

/* highlighter underline for a word in a heading */
.mark{ background:linear-gradient(transparent 62%, var(--sakura) 62%); padding:0 .1em; }

/* ============================================================
   3. SURFACES — the card everything sits on.
   .ds-card is a thin alias over the Bootstrap card look the site
   already uses (border-0 shadow-sm rounded-4) so new pages don't
   have to remember the combo.
   ============================================================ */
.ds-card{
  /* match Bootstrap's .card, which uses --bs-card-bg → --bs-body-bg (cream) */
  background:var(--bs-body-bg); border:0; border-radius:var(--r-xl);
  box-shadow:var(--soft); overflow:hidden;
}
.ds-panel{               /* a quieter inset block inside a card */
  background:var(--cream); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:.9rem 1rem;
}

/* ============================================================
   4. PIXEL — crisp pixel-art helpers.
   ============================================================ */
.pixelated{ image-rendering:pixelated; }

/* a retro speech bubble with a hard drop-shadow + little tail */
.pixel-bubble{
  font-family:var(--font-pixel); font-size:.9rem; line-height:1.3; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:4px;
  padding:.25rem .55rem; box-shadow:var(--pixel-shadow); display:inline-block;
  position:relative;
}
.pixel-bubble::after{
  content:""; position:absolute; left:24px; bottom:-7px;
  border:5px solid transparent; border-top-color:var(--ink);
}

/* ============================================================
   5. MAP — shared SVG map styling.
   Reused by the Tōkaidō tracker and the flight tracker so both
   maps feel like the same hand-drawn atlas.
   ============================================================ */
.ds-map{
  width:100%; height:auto; border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg,#fdfbf8,#fbf7f2);
}
.ds-map .sea{ fill:#e2e9f5; opacity:.7; }
.ds-map .land{ fill:#eef3ea; stroke:#dde7d6; stroke-width:1; }
.ds-map .grid{ stroke:#e9ddd9; stroke-width:.6; opacity:.5; }
.ds-map .label{
  font-family:var(--font-body); font-size:11px; fill:var(--ink); font-weight:600;
}
.ds-map .label--muted{ fill:var(--muted); font-weight:500; }

/* ============================================================
   6. FLIGHT — the flight-tracker app components.
   Page lives at /flights/ ; a compact card rides on the home page.
   ============================================================ */

/* --- the live map canvas/svg frame --- */
.flight-map{
  position:relative; width:100%; border-radius:var(--r-lg);
  border:1px solid var(--border); overflow:hidden;
  background:linear-gradient(180deg,#cdeaf6 0%, #e7f4fa 55%, #eef3ea 100%);
}
/* width:100% + aspect-ratio so Safari sizes the SVG the same as Chrome
   (WebKit doesn't derive height from a viewBox the way Blink does) */
.flight-map svg{ display:block; width:100%; height:auto; aspect-ratio:900 / 460; }

/* faint lon/lat graticule + soft continents drawn by JS */
.flight-map .fm-coast{ fill:#e7f0e3; stroke:#d6e6cf; stroke-width:1; }
.flight-map .fm-grid{ stroke:#ffffff; stroke-width:.6; opacity:.45; }

/* the great-circle route: a dashed travelled part + faint remaining part */
.fm-route-rest{ fill:none; stroke:#c9bcd6; stroke-width:2.4;
  stroke-linecap:round; stroke-dasharray:1 7; }
.fm-route-done{ fill:none; stroke:var(--berry); stroke-width:3;
  stroke-linecap:round; }

/* little pixel compass, echoing the Tōkaidō map */
.fm-compass{ font-family:var(--font-pixel); font-size:12px; fill:var(--muted); }

/* origin / destination pins */
.fm-port{ fill:#fff; stroke:var(--berry); stroke-width:2.5; }
.fm-port-label{ font-family:var(--font-pixel); font-size:12px; fill:var(--ink); }
.fm-port-sub{ font-family:var(--font-body); font-size:9px; fill:var(--muted); }

/* the little plane marker that travels the route (rotated to heading) */
.fm-plane{ filter:drop-shadow(1px 2px 0 rgba(46,42,43,.18)); transition:none; }

/* --- the status strip: origin → plane → destination --- */
.flight-status{ display:flex; align-items:stretch; gap:.5rem; }
.flight-end{ flex:1 1 0; min-width:0; text-align:center; }
.flight-end .iata{ font-family:var(--font-pixel); font-size:1.9rem; line-height:1;
  color:var(--ink); }
.flight-end .city{ font-size:.8rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flight-end .clock{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink);
  margin-top:.15rem; }
.flight-mid{ flex:1.4 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3rem; }

/* progress bar with a plane riding the front edge */
.flight-progress{ position:relative; width:100%; height:8px;
  background:var(--cream); border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--border); }
.flight-progress__fill{ position:absolute; inset:0 auto 0 0; height:100%;
  width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--sakura),var(--berry));
  transition:width .6s ease; }
.flight-progress__plane{ position:absolute; top:50%; left:0%;
  transform:translate(-50%,-50%); font-size:.85rem; transition:left .6s ease;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

/* the big "time remaining" readout */
.flight-eta{ font-family:var(--font-pixel); font-weight:600; }
.flight-eta .num{ font-size:2rem;
  background:linear-gradient(var(--lav),#fff); padding:.05rem .45rem;
  border-radius:var(--r-sm); box-shadow:inset 0 0 0 2px var(--sakura); }
.flight-eta .unit{ font-family:var(--font-pixel); color:var(--muted); font-size:.85rem; }

/* the pixel aircraft stage (canvas drawn by flights.js) */
.flight-plane-stage{ display:flex; align-items:flex-end; justify-content:center;
  min-height:96px; }
.flight-plane-stage canvas{ image-rendering:pixelated; max-width:100%; height:auto; }

/* a labelled fact (airline / aircraft / flight no.) */
.flight-fact{ display:flex; flex-direction:column; gap:.1rem; }
.flight-fact .k{ font-family:var(--font-pixel); font-size:.6rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; }
.flight-fact .v{ font-weight:600; font-size:.95rem; color:var(--ink); }

/* --- past-flights log rows (reuses the Tōkaidō trip rhythm) --- */
.flight-log .row-f{ display:flex; align-items:center; gap:.6rem;
  border-top:1px solid var(--border); padding:.5rem 0; font-size:.9rem; }
.flight-log .row-f.head{ border-top:0; color:var(--muted);
  font-family:var(--font-pixel); font-size:.66rem; text-transform:uppercase; }
.flight-log .date{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
  flex:0 0 84px; }
.flight-log .pair{ flex:1 1 auto; font-weight:600; }
.flight-log .arrow{ color:var(--berry); margin:0 .2rem; }
.flight-log .meta{ flex:0 0 auto; color:var(--muted); font-size:.8rem; }

/* the "now flying" home-page card collapse, matches tracker-mini */
.flight-mini .fm-detail{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.flight-mini .fm-detail.is-open{ max-height:1400px; }
.flight-mini .fm-chev{ color:var(--berry); }

/* responsive: stack the status strip on narrow screens */
@media (max-width:575.98px){
  .flight-end .iata{ font-size:1.5rem; }
  .flight-eta .num{ font-size:1.6rem; }
}