/* ============================================================
   Railway Theme — standalone web build
   Japanese railway wayfinding: white/paper grounds, one line
   color, bold rounded-gothic signage type, thin rule bands.

   Import this one file. It pulls in colorways.css (35 lines +
   Quik Line). Pair with colorways.js, which stamps
   data-colorway + .dark-mode on <html> before first paint.

   Rules of the system (see README.md):
   - 6px radius on interactive controls, 4–5px on badges/chips.
   - Exactly one elevation: .sheet's shadow. Borders do the rest.
   - Only --keio-accent* changes per colorway.
   - accent-dark = accent text on paper; accent-badge = fill
     under white text. Never swap them.
   ============================================================ */

@import url("colorways.css");

/* NewRodin Pro / Hiragino are referenced, never bundled. (installed family name is "FOT-NewRodin Pro"; one face per
   weight, matched by full name / PostScript name) */
@font-face { font-family: "NewRodin Pro"; font-weight: 300; src: local("FOT-NewRodin Pro L"), local("NewRodinPro-L"); }
@font-face { font-family: "NewRodin Pro"; font-weight: 500; src: local("FOT-NewRodin Pro M"), local("NewRodinPro-M"); }
@font-face { font-family: "NewRodin Pro"; font-weight: 600; src: local("FOT-NewRodin Pro DB"), local("NewRodinPro-DB"); }
@font-face { font-family: "NewRodin Pro"; font-weight: 700; src: local("FOT-NewRodin Pro B"), local("NewRodinPro-B"); }
@font-face { font-family: "NewRodin Pro"; font-weight: 800; src: local("FOT-NewRodin Pro EB"), local("NewRodinPro-EB"); }
@font-face { font-family: "NewRodin Pro"; font-weight: 900; src: local("FOT-NewRodin Pro UB"), local("NewRodinPro-UB"); }
@font-face {
  font-family: "Hiragino Sans";
  src: local("Hiragino Sans"), local("Hiragino Kaku Gothic ProN");
}

/* ---------- Core tokens (standalone set) ---------- */
:root {
  --keio-accent: #3d5afe;
  --keio-accent-light: #94b1ff;
  --keio-accent-dark: #0522c6;
  --keio-accent-darker: #000089;
  --keio-accent-tint: #eaeeff;
  --keio-accent-badge: #3d5afe;

  --keio-ink: #1c1a19;
  --keio-paper: #ffffff;
  /* text and rings on a line-colour fill: near-white, never pure */
  --keio-on-accent: #fbfbfd;
  --keio-paper-raised: #f7f7f5;
  --keio-gray: #6b6560;
  --keio-gray-line: #dcdcdf;
  --keio-caution: #f2b705;

  /* departure-board panel: the "Day" callout's dark look */
  --keio-board: #14161c;
  --keio-board-ink: #eceef2;
  --keio-board-line: #2b2e37;

  --keio-font: "NewRodin Pro", "Hiragino Sans", "M PLUS Rounded 1c", "Yu Gothic", sans-serif;
  /* dense / small text: switch the stack, don't lower the weight */
  --keio-font-dense: "Hiragino Sans", "M PLUS Rounded 1c", "Yu Gothic", sans-serif;

  --keio-radius: 6px;
  --keio-radius-chip: 4px;
  --keio-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);

  --base-font-size: 16px;
  --content-max-width: 760px;

  color-scheme: light;
}

/* ---------- Dark mode (night platform) ---------- */
:root.dark-mode {
  --keio-ink: #f0ede8;
  --keio-paper: #17161a;
  --keio-paper-raised: #201f24;
  --keio-gray: #9a9490;
  --keio-gray-line: #38373d;
  --keio-caution: #ffce4d;

  --keio-board: #0e0f13;
  --keio-board-ink: #f0ede8;
  --keio-board-line: #2b2e37;

  color-scheme: dark;
}

/* Print always forces light. */
@media print {
  :root, :root.dark-mode {
    --keio-ink: #1c1a19;
    --keio-paper: #ffffff;
    --keio-paper-raised: #f7f7f5;
    --keio-gray: #6b6560;
    --keio-gray-line: #dcdcdf;
  }
}

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

html, body {
  margin: 0;
  background: var(--keio-paper-raised);
  color: var(--keio-ink);
  font-family: var(--keio-font);
  font-weight: 500;
  font-size: var(--base-font-size);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: var(--keio-accent-tint); color: var(--keio-ink); }

:focus-visible {
  outline: 2px solid var(--keio-accent);
  outline-offset: 2px;
}

a { color: var(--keio-accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--keio-accent-darker); }
:root.dark-mode a:hover { color: var(--keio-accent-light); }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; }
/* h1 — station-sign scale */
h1 { font-size: 2.2em; font-weight: 800; letter-spacing: 0.01em; }
/* h2 — section header, sits on a rule band */
h2 { font-size: 1.35em; font-weight: 700; color: var(--keio-accent-dark); }
/* h3 — dense glyphs read poorly in the heavy face */
h3 { font-size: 1.1em; font-family: var(--keio-font-dense); font-weight: 600; }
h4 { font-size: 1em; font-weight: 700; }
h5 { font-size: 0.9em; font-weight: 500; color: var(--keio-gray); }
/* h6 — section label outside a callout */
h6 {
  font-size: 0.85em; font-weight: 700; color: var(--keio-gray);
}

.muted { color: var(--keio-gray); }
.tabular { font-variant-numeric: tabular-nums; }

/* Thin accent band: the line-color strip under a station sign. */
.rule-band { height: 3px; background: var(--keio-accent); border: 0; margin: 0; }
.rule-band.thin { height: 1px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  background: var(--keio-paper);
  color: var(--keio-ink);
  border: 1px solid var(--keio-gray-line);
  border-radius: var(--keio-radius);
  padding: 0.45em 0.9em;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.btn:hover { border-color: var(--keio-accent-light); color: var(--keio-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn svg { flex: none; }
/* filled — the one primary action per view */
.btn-accent { background: var(--keio-accent-badge); color: var(--keio-on-accent); border-color: transparent; }
.btn-accent:hover { background: var(--keio-accent-dark); color: var(--keio-on-accent); border-color: transparent; }
:root.dark-mode .btn-accent:hover { background: var(--keio-accent-darker); }
.btn-small { padding: 0.3em 0.6em; font-size: 0.85em; }
.btn-tiny { padding: 0.15em 0.5em; font-size: 0.75em; font-weight: 500; }
.btn-clear { background: transparent; color: var(--keio-gray); border-color: var(--keio-gray-line); }
.btn-clear:hover { color: var(--keio-ink); }

/* ---------- Inputs ---------- */
.text-input, .select-input {
  background: var(--keio-paper);
  color: var(--keio-ink);
  border: 1px solid var(--keio-gray-line);
  border-radius: var(--keio-radius);
  padding: 0.4em 0.6em;
  width: 100%;
  font-family: var(--keio-font-dense);
  font-weight: 500;
}
.text-input::placeholder { color: var(--keio-gray); }
.text-input:focus, .select-input:focus { outline: none; border-color: var(--keio-accent); box-shadow: 0 0 0 3px var(--keio-accent-tint); }
textarea.text-input { resize: vertical; min-height: 5em; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--keio-accent-badge); }

.field-label { display: block; font-size: 0.8em; font-weight: 700; color: var(--keio-gray); margin-bottom: 0.3em; }

/* Checkbox setting row */
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 0.6em 0;
  border-bottom: 1px solid var(--keio-gray-line);
}
.setting-row:last-child { border-bottom: 0; }

/* ---------- Badges & chips (4–5px radius) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  background: var(--keio-accent-badge); color: var(--keio-on-accent);
  border-radius: var(--keio-radius-chip);
  padding: 0.12em 0.5em;
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.03em;
  font-family: var(--keio-font-dense);
}
.chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  background: var(--keio-paper); color: var(--keio-ink);
  border: 1px solid var(--keio-gray-line);
  border-radius: var(--keio-radius-chip);
  padding: 0.12em 0.5em;
  font-size: 0.78em; font-weight: 600;
  font-family: var(--keio-font-dense);
}
.chip-meta { background: var(--keio-accent-tint); color: var(--keio-accent-dark); border-color: transparent; }

/* Station numbering badge (e.g. JY 01): rounded square, line-color frame */
.station-number {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 2.6em; height: 2.6em; flex: none;
  background: var(--keio-paper); color: var(--keio-ink);
  border: 0.22em solid var(--keio-accent);
  border-radius: 5px;
  line-height: 1; font-weight: 800;
}
.station-number .sn-code { font-size: 0.62em; letter-spacing: 0.02em; }
.station-number .sn-num { font-size: 0.95em; font-variant-numeric: tabular-nums; }

/* Line swatch dot */
.line-swatch {
  display: inline-block; width: 0.8em; height: 0.8em; flex: none;
  border-radius: 50%; background: var(--swatch, var(--keio-accent));
}

/* Counter pill */
.counter-pill {
  display: inline-flex; align-items: center;
  background: var(--keio-accent-tint); color: var(--keio-accent-dark);
  border-radius: 999px; padding: 0.05em 0.6em;
  font-size: 0.8em; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- Callouts — platform announcement boards ---------- */
.callout {
  background: var(--keio-paper);
  border: 1px solid var(--keio-gray-line);
  border-left: 4px solid var(--keio-accent);
  border-radius: 5px;
  padding: 0.7em 0.9em;
}
.callout-title { font-weight: 700; color: var(--keio-accent-dark); margin-bottom: 0.2em; }
.callout.tinted { background: var(--keio-accent-tint); border-color: transparent; border-left-color: var(--keio-accent); }

/* Departure board: dark panel, accent bar; .is-today swaps to caution */
.board {
  background: var(--keio-board); color: var(--keio-board-ink);
  border-left: 4px solid var(--keio-accent);
  border-radius: 5px;
  padding: 0.6em 0.9em;
  font-variant-numeric: tabular-nums;
}
.board.is-today { border-left-color: var(--keio-caution); }
.board .board-led { color: var(--keio-caution); }

/* ---------- Layout shell ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 0.9em 1.2em;
  background: var(--keio-paper);
  border-bottom: 3px solid var(--keio-accent);
}
.app-body { display: flex; min-height: 0; }
.sidebar {
  width: 300px; flex-shrink: 0;
  background: var(--keio-paper);
  border-right: 1px solid var(--keio-gray-line);
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 1em; gap: 1.4em;
}
.sidebar-section { display: flex; flex-direction: column; gap: 0.5em; }
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.settings-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2em;
  padding: 0.7em 1.2em;
  background: var(--keio-paper);
  border-bottom: 1px solid var(--keio-gray-line);
}
/* The system's single elevation. */
.sheet {
  background: var(--keio-paper);
  border-radius: var(--keio-radius);
  box-shadow: var(--keio-shadow);
}
:root.dark-mode .sheet { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }

/* ---------- Lists, cards & search ---------- */
.search-results { border: 1px solid var(--keio-gray-line); border-radius: var(--keio-radius); overflow: hidden; }
.search-result-row {
  display: flex; align-items: baseline; gap: 0.6em;
  padding: 0.4em 0.6em;
  border-bottom: 1px solid var(--keio-gray-line);
}
.search-result-row:last-child { border-bottom: 0; }
.search-result-row:hover { background: var(--keio-accent-tint); }
.search-result-char { font-size: 1.3em; color: var(--keio-accent-dark); font-weight: 700; }
.search-result-meta { font-size: 0.8em; color: var(--keio-gray); }

.selected-row {
  display: flex; align-items: center; gap: 0.5em;
  background: var(--keio-paper-raised);
  border: 1px solid var(--keio-gray-line);
  border-radius: var(--keio-radius);
  padding: 0.3em 0.5em;
}

/* Disclosure group — native <details>, no JS state */
.preset-group > .preset-group-label {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.45em;
  font-weight: 700; padding: 0.3em 0;
}
.preset-group > .preset-group-label::-webkit-details-marker { display: none; }
.preset-group > .preset-group-label::before {
  content: "▸"; color: var(--keio-accent); display: inline-block;
  transition: transform 0.15s ease;
}
.preset-group[open] > .preset-group-label::before { transform: rotate(90deg); }
.preset-buttons { display: flex; flex-wrap: wrap; gap: 0.4em; padding: 0.3em 0 0.6em 1.1em; }

/* ---------- Station name sign (web) ----------
   The platform sign: big name, romaji under it, a line-color band
   carrying the previous/next stations. Use as a page/section title. */
.station-sign {
  background: var(--keio-paper);
  border: 1px solid var(--keio-gray-line);
  border-radius: var(--keio-radius);
  overflow: hidden;
  text-align: center;
}
.station-sign-main {
  display: flex; align-items: center; justify-content: center; gap: 0.8em;
  padding: 0.75em 1em 0.6em;
}
.station-sign-name { display: flex; flex-direction: column; align-items: center; }
.station-sign-jp { font-size: 1.9em; font-weight: 800; line-height: 1.1; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
/* romaji: one colour with the name, set apart by size (JR signs print it in the same ink) */
.station-sign-en { font-size: 0.85em; }
.station-sign-band {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  background: var(--keio-accent-badge); color: var(--keio-on-accent);
  padding: 0.3em 0.8em;
  font-size: 0.78em; font-weight: 700;
}
.station-sign-band > * {
  appearance: none; background: none; border: 0; padding: 0.1em 0.2em; margin: 0;
  color: inherit; font: inherit; cursor: pointer; border-radius: var(--keio-radius-chip);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.station-sign-band > *:hover { background: rgba(255, 255, 255, 0.16); }
.station-sign-band > *:focus-visible { outline-color: var(--keio-on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}