.timetable-page {
  --tt-panel: color-mix(in srgb, var(--rail) 91%, transparent);
  --tt-panel-strong: color-mix(in srgb, var(--rail) 97%, var(--ink) 3%);
  --tt-border: color-mix(in srgb, var(--line) 82%, var(--ink) 18%);
  --font-latin: "SiteUDShinGoJP";
  --font-cn: "SiteUDShinGoJP";
  font-family: "SiteUDShinGoJP", sans-serif;
}

.timetable-page *,
.timetable-page button,
.timetable-page input,
.timetable-page select,
.timetable-page option { font-family: "SiteUDShinGoJP", sans-serif; }

.timetable-main {
  position: relative;
  z-index: 1;
  width: min(1540px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(120px, 12vw, 176px) 0 90px;
}

.tt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 360px);
  align-items: end;
  gap: 32px;
  padding: clamp(28px, 5vw, 70px) 0 48px;
  border-bottom: 3px solid var(--ink);
}

.tt-hero h1,
.tt-section-head h2,
.tt-data-source h2 {
  margin: 0;
  font-family: var(--font-latin), var(--font-cn);
  letter-spacing: -.035em;
}

.tt-hero h1 { font-size: clamp(48px, 8.4vw, 126px); line-height: .92; }
.tt-hero .lead { max-width: 880px; margin: 26px 0 0; color: var(--muted); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.75; }
.tt-disclaimer { max-width: 880px; margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.tt-ja { font-family: "SiteUDShinGoJP", sans-serif; }

.tt-status-panel {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 2px solid var(--tt-border);
  background: var(--tt-panel);
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--green) 20%, transparent);
}

.tt-status-panel small,
.tt-status-panel strong { display: block; }
.tt-status-panel small { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.tt-status-panel a { color: var(--green); font-weight: 900; }
.tt-status-light { width: 14px; height: 14px; border: 2px solid var(--muted); background: var(--amber); animation: tt-pulse 1.3s ease-in-out infinite; }
.tt-status-light.ready { border-color: var(--green); background: var(--green); animation: none; box-shadow: 0 0 18px color-mix(in srgb, var(--green) 64%, transparent); }
.tt-status-light.error { border-color: var(--orange); background: var(--orange); animation: none; }

.tt-tabs {
  position: sticky;
  top: 82px;
  z-index: 30;
  display: flex;
  gap: 0;
  margin: 28px 0;
  overflow-x: auto;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--coal) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
}

.tt-tabs button {
  flex: 1 0 auto;
  min-width: 130px;
  min-height: 54px;
  padding: 12px 18px;
  border: 0;
  border-right: 1px solid var(--tt-border);
  color: var(--muted);
  font-size: 14px;
}

.tt-tabs button:last-child { border-right: 0; }
.tt-tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--green) 10%, transparent); transform: none; }
.tt-tabs button.active { color: var(--coal); background: var(--green); }

.tt-panel {
  min-height: 560px;
  padding: clamp(24px, 4vw, 54px);
  border: 2px solid var(--tt-border);
  background: var(--tt-panel);
  animation: tt-panel-in .34s ease both;
}

.tt-panel[hidden] { display: none; }
.tt-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 520px); gap: 28px; align-items: end; margin-bottom: 34px; }
.tt-section-head h2, .tt-data-source h2 { font-size: clamp(34px, 5vw, 70px); line-height: 1; }
.tt-section-head > p { margin: 0; color: var(--muted); line-height: 1.7; }

.tt-form,
.tt-station-toolbar,
.tt-live-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  align-items: end;
  gap: 14px;
}

.tt-plan-form { grid-template-columns: minmax(120px, 1fr) 48px minmax(120px, 1fr) repeat(3, minmax(96px, .72fr)) minmax(165px, .9fr) minmax(118px, auto); }
.tt-form label,
.tt-station-toolbar label,
.tt-live-toolbar label { display: grid; gap: 8px; color: var(--muted); font-weight: 800; font-size: 13px; }
.tt-form input,
.tt-form select,
.tt-station-toolbar input,
.tt-station-toolbar select,
.tt-live-toolbar select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 10px 12px;
  border: 2px solid var(--tt-border);
  border-radius: 0;
  font: inherit;
}
.tt-form input:focus,
.tt-form select:focus,
.tt-station-toolbar input:focus,
.tt-station-toolbar select:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.tt-form .button { min-height: 52px; padding: 10px 20px; }
.tt-plan-form > .button { min-width: 126px; white-space: nowrap; }
.tt-swap { min-width: 50px; min-height: 52px; padding: 0; border-color: var(--tt-border); font-size: 24px; }
.tt-form-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; }

.tt-plan-options { position: relative; align-self: end; min-width: 0; color: var(--text); }
.tt-plan-options summary {
  position: relative;
  display: flex;
  min-height: 52px;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  padding: 7px 38px 7px 12px;
  border: 2px solid var(--tt-border);
  background: var(--rail);
  cursor: pointer;
  list-style: none;
}
.tt-plan-options summary::-webkit-details-marker { display: none; }
.tt-plan-options summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tt-plan-options-caption { color: var(--muted); font-size: 12px; font-weight: 800; }
.tt-plan-options summary strong { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.tt-plan-options summary i {
  position: absolute;
  right: 14px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .18s ease;
}
.tt-plan-options[open] summary i { transform: translateY(3px) rotate(225deg); }
.tt-plan-options-menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + 7px);
  right: 0;
  width: max(100%, 340px);
  box-sizing: border-box;
  padding: 14px;
  border: 2px solid var(--tt-border);
  background: var(--rail);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--green) 18%, transparent);
}
.tt-plan-options fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tt-plan-options fieldset + fieldset { margin-top: 14px; }
.tt-plan-options legend { margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.tt-plan-option-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tt-plan-option-group-limited { grid-template-columns: repeat(2, 1fr); }
.tt-plan-option-group button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--tt-border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.tt-plan-option-group button:hover { border-color: var(--green); }
.tt-plan-option-group button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.tt-plan-option-group button[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: var(--rail); }

.tt-autocomplete { position: relative; z-index: 24; }
.tt-autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(560px, calc(100vw - 72px));
  max-height: 350px;
  overflow-y: auto;
  border: 2px solid var(--tt-border);
  background: var(--rail);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--green) 18%, transparent);
  scrollbar-color: var(--green) transparent;
}
.tt-autocomplete-list[hidden] { display: none; }
.tt-autocomplete-list button {
  display: grid;
  grid-template-columns: minmax(54px, auto) minmax(0, 1fr);
  gap: 2px 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--tt-border);
  color: var(--ink);
  text-align: left;
}
.tt-autocomplete-list button:last-child { border-bottom: 0; }
.tt-autocomplete-list button:hover,
.tt-autocomplete-list button.active { background: color-mix(in srgb, var(--green) 14%, var(--rail)); transform: none; }
.tt-autocomplete-list button strong { font-family: var(--font-latin); }
.tt-autocomplete-list button small { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.tt-results { display: grid; gap: 12px; margin-top: 28px; }
.tt-empty,
.tt-loading,
.tt-error { padding: 28px; border-left: 5px solid var(--amber); background: color-mix(in srgb, var(--coal) 54%, transparent); color: var(--muted); }
.tt-error { border-color: var(--orange); color: var(--ink); }

.tt-result-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, .34fr) minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--tt-border);
  background: var(--tt-panel-strong);
  overflow: hidden;
}
.service-ordinary { --service-color: #087eb9; }
.service-rapid { --service-color: #3c9855; }
.service-limited { --service-color: #dc4f8c; }
.service-local { --service-color: #7f8b94; }
.tt-result-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--service-color, var(--green)); }
.tt-result-card strong { font-family: var(--font-latin), var(--font-cn); font-size: 20px; }
.tt-result-card small { display: block; margin-top: 5px; color: var(--muted); }
.tt-result-time { width: max-content; font-family: var(--font-latin); font-size: clamp(24px, 3vw, 40px); font-weight: 900; line-height: 1; white-space: nowrap; }
.tt-local-time { display: block; margin: 7px 0 0 !important; color: var(--muted); font-family: var(--font-latin); font-size: 11px !important; font-weight: 600; line-height: 1.2; text-align: right; letter-spacing: .02em; }
.tt-run-clickable { cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.tt-run-clickable:hover { border-color: var(--service-color, var(--green)); background: color-mix(in srgb, var(--service-color, var(--green)) 7%, var(--tt-panel-strong)); }
.tt-run-clickable:focus-visible { outline: 3px solid var(--service-color, var(--green)); outline-offset: 2px; }
.tt-run-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.tt-service-tag,
.tt-direction { display: inline-flex; align-items: center; min-height: 27px; padding: 3px 8px; border: 1px solid currentColor; font-size: 12px; font-weight: 900; white-space: nowrap; }
.tt-service-tag { color: var(--service-color, var(--green)); background: color-mix(in srgb, var(--service-color, var(--green)) 8%, transparent); }
.tt-direction.up { color: #3970c8; }
.tt-direction.down { color: var(--orange); }
.tt-result-route { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tt-route-line { flex: 1; min-width: 32px; height: 3px; background: var(--service-color, var(--green)); position: relative; }
.tt-route-line::before,
.tt-route-line::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; border: 2px solid var(--service-color, var(--green)); background: var(--rail); transform: translateY(-50%); }
.tt-route-line::before { left: 0; }
.tt-route-line::after { right: 0; }
.tt-train-route { min-width: 0; }
.tt-route-times { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-family: var(--font-latin); font-size: 12px; }
.tt-stop-marker { position: absolute; top: 50%; width: 15px; height: 15px; border: 3px solid var(--amber); background: var(--rail); transform: translate(-50%, -50%); z-index: 2; }
.tt-stop-marker span { position: absolute; left: 50%; bottom: 15px; padding: 2px 5px; color: var(--amber); background: var(--rail); font: 900 11px/1.2 var(--font-cn); white-space: nowrap; transform: translateX(-50%); }
.tt-train-status { min-width: 145px; }
.tt-stop-times { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; white-space: nowrap; }
.tt-stop-times small { margin: 0; color: var(--muted); font-family: var(--font-latin); font-size: 12px; }
.tt-stop-times strong { font-family: var(--font-latin); font-size: 18px; }
.tt-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; border: 1px solid var(--tt-border); color: var(--muted); font-size: 12px; font-weight: 900; }
.tt-badge.yes { border-color: var(--green); color: var(--green); }
.tt-badge.no { border-color: var(--orange); color: var(--orange); }

.tt-journey { border: 2px solid var(--tt-border); background: var(--tt-panel-strong); }
.tt-journey-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--tt-border); }
.tt-journey-head strong { font-family: var(--font-latin); font-size: 24px; }
.tt-journey-head span { color: var(--muted); }
.tt-journey-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.tt-route-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 7px; border: 1px solid currentColor; font-size: 11px; font-weight: 900; line-height: 1; }
.tt-route-badge.earlyBadge { color: var(--green); }
.tt-route-badge.easyBadge { color: var(--cyan, var(--green)); }
.tt-route-badge.cheapBadge { color: var(--amber); }
.tt-leg-main { min-width: 0; }
.tt-fare-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--service-color, var(--green)) 36%, transparent); color: var(--green); font-size: 12px; line-height: 1.5; }
.tt-fare-summary > span { min-width: 0; }
.tt-leg { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; overflow: hidden; }
.tt-leg::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--service-color, var(--green)); }
.tt-leg + .tt-leg { border-top: 1px dashed var(--tt-border); }
.tt-leg-time { width: max-content; font-family: var(--font-latin); font-weight: 900; font-size: 22px; white-space: nowrap; }
.tt-leg-time > small { white-space: nowrap; }
.tt-leg-time .tt-local-time { text-align: left; }
.tt-leg small { display: block; margin-top: 4px; color: var(--muted); }
.tt-transfer { padding: 8px 20px 8px 126px; color: var(--amber); font-size: 13px; background: color-mix(in srgb, var(--amber) 8%, transparent); }

.tt-summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tt-summary-row article { padding: 18px; border: 1px solid var(--tt-border); }
.tt-summary-row small, .tt-realtime-slot small { display: block; color: var(--muted); }
.tt-summary-row strong { display: block; margin-top: 6px; font-family: var(--font-latin); font-size: 24px; }

.tt-live-toolbar { grid-template-columns: minmax(180px, 260px); }
.tt-clock { margin: 22px 0 0; color: var(--muted); font-family: var(--font-latin); }
.tt-auto-refresh { display: inline-block; margin-left: 6px; padding: 2px 7px; border: 1px solid var(--green); color: var(--green); font-size: 12px; }
.tt-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tt-live-section + .tt-live-section { margin-top: 18px; }
.tt-live-section > h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--tt-border); font-size: 19px; }
.tt-live-section > h3 small { color: var(--muted); font-size: 12px; font-weight: 600; }
.tt-live-card { padding: 20px; border: 1px solid var(--tt-border); border-left: 5px solid var(--service-color, var(--green)); background: var(--tt-panel-strong); }
.tt-live-card header { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; margin-bottom: 12px; }
.tt-live-card header strong { font-size: 18px; }
.tt-live-card header > span { color: var(--muted); font-size: 12px; }
.tt-live-card p { margin: 0; line-height: 1.65; }
.tt-progress { height: 4px; margin-top: 16px; background: var(--line); overflow: hidden; }
.tt-progress i { display: block; height: 100%; background: var(--service-color, var(--green)); transform-origin: left; animation: tt-progress-in .6s ease both; }

.tt-line-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 24px;
  padding: 16px 10px;
  overflow-x: auto;
  border: 1px solid var(--tt-border);
  background: color-mix(in srgb, var(--coal) 54%, transparent);
  scrollbar-color: var(--green) transparent;
}
.tt-line-stop { position: relative; flex: 0 0 116px; padding: 30px 8px 6px; border: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.tt-line-stop::before { content: ''; position: absolute; top: 13px; left: 0; right: 0; height: 4px; background: var(--green); }
.tt-line-stop::after { content: ''; position: absolute; top: 7px; left: calc(50% - 7px); width: 14px; height: 14px; border: 3px solid var(--green); background: var(--rail); }
.tt-line-stop:hover { color: var(--ink); background: transparent; transform: translateY(-2px); }

.tt-station-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 24px; align-items: start; }
.tt-station-toolbar { grid-template-columns: 1.2fr .9fr .7fr .6fr; margin-bottom: 14px; }
.tt-station-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 680px; overflow: auto; padding-right: 6px; scrollbar-color: var(--green) transparent; }
.tt-station-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--tt-border); background: var(--tt-panel-strong); cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.tt-station-card:hover { border-color: var(--green); transform: translateX(3px); }
.tt-station-index { font-family: var(--font-latin); color: var(--green); font-weight: 900; }
.tt-station-card strong { display: block; font-size: 17px; }
.tt-station-card small { display: block; color: var(--muted); line-height: 1.45; }
.tt-station-km { color: var(--muted); font-family: var(--font-latin); font-size: 12px; white-space: nowrap; }
.tt-map-card { position: sticky; top: 162px; padding: 18px; border: 2px solid var(--tt-border); background: var(--tt-panel-strong); }
.tt-map-card h3 { margin: 4px 0; font-size: 28px; }
.tt-map-card #mapMeta { line-height: 1.55; }
.tt-map-card small, .tt-map-card p { color: var(--muted); }
.tt-map-card > p { margin: 12px 0 0; font-size: 12px; line-height: 1.6; }
.tt-map-frame { position: relative; min-height: 430px; margin-top: 14px; border: 1px solid var(--tt-border); overflow: hidden; background: var(--coal); }
.tt-map-card iframe { display: block; width: 100%; min-height: 430px; border: 0; background: var(--coal); }
.tt-map-loader { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); background: var(--rail); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.tt-map-frame.loading .tt-map-loader { opacity: 1; visibility: visible; }
.tt-map-loader i { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--green); animation: tt-spin .75s linear infinite; }
.tt-map-loader span { font-size: 13px; font-weight: 800; }

.tt-fare-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(22px, 4vw, 42px); border: 2px solid var(--green); background: var(--tt-panel-strong); }
.tt-fare-card h3 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 42px); }
.tt-fare-card p { margin: 0; color: var(--muted); }
.tt-fare-price { text-align: right; }
.tt-fare-price strong { display: block; color: var(--green); font-family: var(--font-latin); font-size: clamp(38px, 7vw, 76px); line-height: 1; }
.tt-fare-price small { color: var(--muted); }
.tt-fare-addons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 18px; border-top: 1px solid var(--tt-border); }
.tt-fare-addons > div { display: grid; gap: 4px; padding: 14px; border-left: 4px solid var(--green); background: color-mix(in srgb, var(--coal) 42%, transparent); }
.tt-fare-addons small,
.tt-fare-addons span { color: var(--muted); font-size: 12px; }
.tt-fare-addons strong { font-family: var(--font-latin), var(--font-cn); }
.tt-source-note { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.tt-source-note a, .tt-source-links a { color: var(--green); }

.tt-floating-clock {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 126px;
  padding: 8px 11px;
  border: 1px solid var(--tt-border);
  color: var(--ink);
  background: color-mix(in srgb, var(--rail) 91%, transparent);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--green) 18%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
  font-family: var(--font-latin);
}
.tt-floating-clock > span { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.tt-floating-clock > strong { font-size: 20px; line-height: 1; }
.tt-floating-clock > strong small { color: var(--muted); font-size: 12px; }

.tt-train-dialog {
  width: min(820px, calc(100vw - 34px));
  max-height: min(88vh, 920px);
  margin: auto;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--rail);
  box-shadow: 18px 18px 0 color-mix(in srgb, var(--green) 22%, transparent);
  overflow: auto;
  transform-origin: 50% -18px;
}
.tt-train-dialog[open]:not(.is-closing) { animation: tt-dialog-hang .62s cubic-bezier(.2,.8,.2,1) both; }
.tt-train-dialog.is-closing { animation: tt-dialog-unhang .38s cubic-bezier(.4,0,.8,.2) both; }
.tt-train-dialog::backdrop { background: color-mix(in srgb, #061521 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: tt-backdrop-in .4s ease both; }
.tt-train-dialog.is-closing::backdrop { animation: tt-backdrop-out .4s ease-in-out both; }
.tt-dialog-close { position: sticky; top: 12px; float: right; z-index: 4; width: 42px; height: 42px; margin: 12px 12px -54px 0; padding: 0; border: 1px solid var(--tt-border); color: var(--ink); background: var(--rail); font: 300 28px/1 var(--font-latin); }
.tt-dialog-close:hover { color: var(--rail); background: var(--orange); transform: none; }
#trainDetailContent { padding: clamp(22px, 4vw, 42px); }
.tt-train-dialog[open]:not(.is-closing) .tt-detail-head { animation: tt-detail-content-in .38s .12s ease both; }
.tt-train-dialog[open]:not(.is-closing) .tt-detail-status { animation: tt-detail-content-in .42s .17s ease both; }
.tt-train-dialog[open]:not(.is-closing) .tt-detail-stops { animation: tt-detail-content-in .46s .22s ease both; }
.tt-detail-head { padding-right: 48px; }
.tt-detail-head h2 { margin: 3px 0 12px; font-family: var(--font-latin), var(--font-cn); font-size: clamp(26px, 5vw, 46px); line-height: 1.12; }
.tt-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.tt-detail-meta > span:not(.tt-run-tags):not(.tt-service-tag):not(.tt-direction) { padding: 4px 7px; border: 1px solid var(--tt-border); }
.tt-detail-status { margin: 24px 0 20px; padding: 16px; border-left: 5px solid var(--service-color, var(--green)); background: color-mix(in srgb, var(--service-color, var(--green)) 7%, var(--tt-panel-strong)); }
.tt-detail-status p { margin: 0; line-height: 1.65; }
.tt-detail-status > small { display: block; margin-top: 8px; color: var(--muted); }
.tt-detail-progress { height: 5px; margin-top: 14px; background: var(--line); }
.tt-detail-progress > i { position: relative; display: block; height: 100%; background: var(--service-color, var(--green)); animation: tt-progress-in .6s ease both; }
.tt-detail-progress b { position: absolute; top: 50%; right: 0; width: 13px; height: 13px; border: 3px solid var(--service-color, var(--green)); background: var(--rail); transform: translate(50%, -50%); animation: tt-marker-pulse 1.4s ease-in-out infinite; }
.tt-detail-stops { margin: 0; padding: 0; list-style: none; }
.tt-detail-stops li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 68px; padding: 8px 0; }
.tt-detail-stops li::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 3px; background: color-mix(in srgb, var(--service-color, var(--green)) 55%, var(--line)); }
.tt-detail-stops li:first-child::before { top: 50%; }
.tt-detail-stops li:last-child::before { bottom: 50%; }
.tt-detail-stops li > i { position: relative; z-index: 1; width: 23px; height: 23px; border: 3px solid var(--service-color, var(--green)); background: var(--rail); }
.tt-detail-stops li.passed > i { background: var(--service-color, var(--green)); }
.tt-detail-stops li.current > i { border-width: 5px; box-shadow: 0 0 0 7px color-mix(in srgb, var(--service-color, var(--green)) 15%, transparent); animation: tt-marker-pulse 1.4s ease-in-out infinite; }
.tt-detail-stops li > div > strong { display: block; font-size: 16px; }
.tt-detail-stops li > div > small { display: inline-block; margin-top: 3px; padding: 1px 5px; color: var(--service-color, var(--green)); border: 1px solid currentColor; font-size: 10px; }
.tt-detail-stops time { display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; min-width: 132px; white-space: nowrap; font-family: var(--font-latin); }
.tt-detail-stops time small { color: var(--muted); font-size: 12px; }
.tt-detail-stops time strong { font-size: 17px; }
.tt-dialog-open { overflow: hidden; }

.tt-data-source { display: grid; grid-template-columns: minmax(230px, .5fr) minmax(0, 1fr) auto; gap: 30px; align-items: center; margin-top: 28px; padding: 30px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--tt-border); }
.tt-data-source dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.tt-data-source dl div { padding-left: 12px; border-left: 3px solid var(--line); }
.tt-data-source dt { color: var(--muted); font-size: 12px; }
.tt-data-source dd { margin: 4px 0 0; font-weight: 900; }
.tt-source-links { display: grid; gap: 8px; text-align: right; }

@keyframes tt-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tt-pulse { 50% { opacity: .42; } }
@keyframes tt-progress-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tt-spin { to { transform: rotate(360deg); } }
@keyframes tt-dialog-hang {
  0% { opacity: 0; transform: translateY(-48px) rotate(0deg) scale(.985); }
  38% { opacity: 1; transform: translateY(4px) rotate(-2.4deg) scale(1); }
  62% { transform: translateY(-1px) rotate(1.5deg) scale(1); }
  80% { transform: translateY(0) rotate(-.55deg) scale(1); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes tt-dialog-unhang {
  0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  32% { opacity: 1; transform: translateY(1px) rotate(1.2deg) scale(1); }
  58% { opacity: .92; transform: translateY(-3px) rotate(-.8deg) scale(.998); }
  100% { opacity: 0; transform: translateY(-48px) rotate(.4deg) scale(.985); }
}
@keyframes tt-detail-content-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tt-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tt-marker-pulse { 50% { opacity: .62; } }

@media (prefers-reduced-motion: reduce) {
  .tt-panel, .tt-status-light, .tt-progress i, .tt-map-loader i, .tt-train-dialog, .tt-train-dialog::backdrop, .tt-detail-head, .tt-detail-status, .tt-detail-stops, .tt-detail-progress b, .tt-detail-stops li.current > i { animation: none !important; }
  .tt-station-card, .tt-line-stop, .tt-run-clickable { transition: none; }
}

@media (max-width: 1180px) {
  .tt-swap { display: none; }
  .tt-form { grid-template-columns: repeat(2, 1fr); }
  .tt-plan-form { grid-template-columns: repeat(3, 1fr); }
  .tt-station-layout { grid-template-columns: 1fr; }
  .tt-map-card { position: static; }
  .tt-data-source { grid-template-columns: 1fr; }
  .tt-source-links { grid-template-columns: repeat(3, 1fr); text-align: left; }
}

@media (max-width: 760px) {
  .timetable-main { width: min(100% - 24px, 1540px); padding-top: 88px; }
  .tt-hero { grid-template-columns: 1fr; padding-top: 34px; }
  .tt-hero h1 { font-size: clamp(46px, 16vw, 74px); }
  .tt-status-panel { box-shadow: 6px 6px 0 color-mix(in srgb, var(--green) 20%, transparent); }
  .tt-tabs { top: 70px; margin: 18px 0; }
  .tt-tabs button { min-width: 116px; }
  .tt-panel { min-height: 0; padding: 20px 14px; }
  .tt-section-head { grid-template-columns: 1fr; gap: 12px; }
  .tt-plan-form, .tt-form, .tt-station-toolbar, .tt-live-toolbar { grid-template-columns: 1fr; }
  .tt-form input, .tt-form select, .tt-station-toolbar input, .tt-station-toolbar select, .tt-live-toolbar select { font-size: 16px; }
  .tt-autocomplete-list { position: static; width: 100%; max-height: 240px; margin-top: 6px; box-shadow: 5px 5px 0 color-mix(in srgb, var(--green) 18%, transparent); }
  .tt-form .button { scroll-margin-top: 150px; }
  .tt-plan-options-menu { position: static; width: 100%; margin-top: 6px; box-shadow: 5px 5px 0 color-mix(in srgb, var(--green) 18%, transparent); }
  .tt-result-card { grid-template-columns: 1fr; gap: 12px; }
  .tt-result-time { font-size: 30px; }
  .tt-leg { grid-template-columns: 90px minmax(0, 1fr); }
  .tt-leg > .tt-run-tags { grid-column: 2; justify-self: start; }
  .tt-fare-summary { grid-template-columns: 1fr; }
  .tt-transfer { padding-left: 88px; }
  .tt-summary-row, .tt-live-grid { grid-template-columns: 1fr; }
  .tt-station-list { grid-template-columns: 1fr; max-height: 590px; }
  .tt-map-card iframe, .tt-map-frame { min-height: 330px; }
  .tt-fare-card { grid-template-columns: 1fr; }
  .tt-fare-price { text-align: left; }
  .tt-fare-addons { grid-template-columns: 1fr; }
  .tt-data-source { padding: 24px 10px; }
  .tt-data-source dl { grid-template-columns: repeat(2, 1fr); }
  .tt-source-links { grid-template-columns: 1fr; }
  .tt-floating-clock { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); min-width: 112px; padding: 7px 9px; }
  .tt-floating-clock > strong { font-size: 18px; }
  .timetable-page { padding-bottom: 58px; }
  .tt-train-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin-top: max(8px, env(safe-area-inset-top)); margin-bottom: max(8px, env(safe-area-inset-bottom)); box-shadow: 8px 8px 0 color-mix(in srgb, var(--green) 22%, transparent); }
  #trainDetailContent { padding: 20px 16px 26px; }
  .tt-detail-stops li { grid-template-columns: 24px minmax(0, 1fr); gap: 9px; min-height: 78px; }
  .tt-detail-stops time { grid-column: 2; justify-content: flex-start; min-width: 0; margin-top: -5px; }
}