/* Kiro の画面。色・字・間隔は agentdev-ui.css のトークンを使う。
   スマホで夜に使うので、Shared/design/DESIGN.md の「ふつう」（13px・32px）より大きくする：
   本文 15px、押せるものは 44px 以上（iOS は 16px 未満の入力欄で拡大されるので入力欄は 16px）。 */

:root {
  --k-fs: 15px;
  --k-tap: 44px;
  --k-top-h: 52px;
  /* 字は仮で Noto Sans JP（vendor/noto-sans-jp.css。オフラインでも出るよう自前で配る） */
  --font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: var(--k-fs);
  line-height: var(--lh);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

.k-top {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--k-top-h);
  padding: env(safe-area-inset-top) max(var(--sp-3), env(safe-area-inset-right)) 0 max(var(--sp-3), env(safe-area-inset-left));
  background: var(--bar);
  border-bottom: 1px solid var(--line);
}
.k-top .ad-appname { font-size: var(--fs-lg); }
.ad-ibtn { width: var(--k-tap); height: var(--k-tap); }
.k-grow { flex: 1; }

main { outline: none; padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom)); }
.k-pad { padding: var(--sp-3) max(var(--sp-4), env(safe-area-inset-left)); }
.k-loading { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; padding: var(--sp-8); color: var(--text-2); }

h1 { font-size: var(--fs-xl); margin: var(--sp-2) 0; }
h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
h3 { font-size: var(--k-fs); margin: 0 0 var(--sp-1); }
.k-lead { color: var(--text-2); margin: 0 0 var(--sp-4); }
.k-note { color: var(--text-2); font-size: var(--fs-md); margin: var(--sp-1) 0; }
.k-ic { display: inline-flex; flex: none; }
.k-ic svg { display: block; }

/* 押せるものは大きく */
.ad-btn, .ad-input, .k-select { min-height: var(--k-tap); font-size: 16px; }
.ad-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0 var(--sp-4); text-decoration: none; }
.k-wide { width: 100%; }
.k-big { min-height: 56px; font-size: var(--fs-lg); flex: 1; }
.k-select { flex: 1; min-width: 0; }
.k-link { background: none; border: 0; padding: var(--sp-2) 0; color: var(--accent-text); font: inherit; text-decoration: underline; cursor: pointer; min-height: var(--k-tap); }

.k-inline { display: flex; align-items: center; gap: var(--sp-2); }
.k-form { display: grid; gap: var(--sp-3); background: var(--panel); border-bottom: 1px solid var(--line); }
.k-field label { display: block; font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; margin-bottom: var(--sp-1); }
.k-time { width: 9em; }
.k-summary { display: flex; align-items: center; gap: var(--sp-3); background: var(--panel); border-bottom: 1px solid var(--line); }
.k-summary-text { flex: 1; min-width: 0; display: grid; }
.k-summary-text span { color: var(--text-2); font-size: var(--fs-md); }
.k-form-tail { border-bottom: 1px solid var(--line); background: var(--panel); }
.k-tight { padding-top: var(--sp-1); padding-bottom: 0; margin: 0; }
.k-meta { display: grid; gap: var(--sp-1); color: var(--text-2); font-size: var(--fs-sm); }

.k-banner {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-3); border-radius: var(--radius-lg); font-size: var(--fs-md);
}
.k-banner.warn {
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--text);
}
.k-banner.warn .k-ic { color: var(--warn-text); }

/* 飲酒の確認 */
.k-ask { display: grid; gap: var(--sp-2); padding-top: var(--sp-6); }
.k-ask-btns { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }

/* 候補のカード */
.k-list { display: grid; gap: var(--sp-3); }
.k-opt {
  display: grid; gap: var(--sp-1); text-align: left; width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.k-opt:hover { background: color-mix(in srgb, var(--panel) 92%, var(--text)); }
.k-opt:active { background: var(--pressed); }
.k-opt.base { background: transparent; border-style: dashed; }
.k-opt.dim .k-arrive { color: var(--text-2); }
.k-opt-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.k-opt-head .k-ic { color: var(--accent-text); }
.k-opt-title { font-weight: 600; margin-right: auto; }
.k-opt-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.k-arrive { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.k-arrive small { font-size: var(--fs-md); font-weight: 400; color: var(--text-2); }
.k-cost { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.k-opt-sub { color: var(--text-2); font-size: var(--fs-md); }
.k-save { color: var(--text-2); font-size: var(--fs-md); }
.ad-badge { font-size: var(--fs-md); }

.k-notes { color: var(--text-2); font-size: var(--fs-md); margin: 0; padding-left: calc(var(--sp-4) + 1.2em); }

/* はじめての準備 */
.k-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.k-step {
  counter-increment: step; position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 36px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl);
  display: grid; gap: var(--sp-2);
}
.k-step::before {
  content: counter(step);
  position: absolute; left: var(--sp-3); top: var(--sp-3);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sunken); color: var(--text-2); font-weight: 700;
}
.k-step.done::before { content: "済"; background: var(--ok-soft); color: var(--ok-text); }
.k-step .ad-btn { justify-self: start; }
.k-svc { display: grid; gap: var(--sp-1); }
.k-sub { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; margin-top: var(--sp-1); }
.k-check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--k-tap); }
.k-check input { width: 22px; height: 22px; }
.k-setup .ad-progress { height: 6px; }
.k-install { padding-left: var(--sp-4); margin-bottom: var(--sp-4); }
.k-install::before { display: none; }

.k-attr { margin-top: var(--sp-6); color: var(--text-3); font-size: var(--fs-sm); }
.k-attr p { margin: var(--sp-1) 0; }
.k-attr a { color: var(--text-2); }

/* 案内 */
.k-map {
  height: 40vh; min-height: 240px;
  background: var(--sunken); border-bottom: 1px solid var(--line);
  position: relative;
}
.k-map-msg { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; justify-content: center; text-align: center; padding: var(--sp-6); color: var(--text-2); }
.k-legs { list-style: none; padding: 0; margin: var(--sp-3) 0; display: grid; gap: var(--sp-1); }
.k-leg { display: grid; grid-template-columns: 3.2em 24px 1fr; gap: var(--sp-2); align-items: start; padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.k-leg-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.k-leg .k-ic { color: var(--text-2); margin-top: 2px; }
.k-leg.bike .k-ic { color: var(--accent-text); }
.k-leg-title { font-weight: 600; }
.k-actions {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: grid; gap: var(--sp-2);
  padding: var(--sp-3) max(var(--sp-4), env(safe-area-inset-left)) max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}
.k-pois { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.k-pois li { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.k-poi { min-height: var(--k-tap); }
.k-me { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--accent), 0 1px 4px rgba(0, 0, 0, .5); }
/* 進む向きの矢印（印の外側に三角） */
.k-me-dir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -22px 0 0 -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid var(--accent);
  transform-origin: 7px 22px; }
.maplibregl-ctrl-attrib { font-size: 11px; background: color-mix(in srgb, var(--bar) 85%, transparent) !important; color: var(--text-2); }
.maplibregl-ctrl-attrib a { color: var(--text-2); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }
.k-poi-head { justify-content: space-between; flex-wrap: wrap; }
.k-poi-head h2 { margin: 0; }
.k-legend {
  position: absolute; left: var(--sp-2); bottom: var(--sp-2); z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bar) 88%, transparent); color: var(--text-2); font-size: var(--fs-sm);
  max-width: calc(100% - 56px);
}
.k-legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.k-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panel); display: inline-block; }
.k-dot.start { background: var(--text); }
.k-dot.station { background: var(--accent); }
.k-dot.rail { background: var(--panel); border-color: var(--text-3); }
.k-dot.home { background: var(--ok); }
.k-line { display: inline-block; width: 16px; }
.k-line.bike { height: 4px; background: var(--accent); border-radius: 2px; }
.k-line.walk { height: 0; border-top: 3px dotted var(--accent); }

/* 走りながら見る画面：大きな字だけ */
.k-ride { min-height: calc(100vh - var(--k-top-h)); display: grid; align-content: center; justify-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4); text-align: center; }
.k-ride-name { font-size: var(--fs-xl); font-weight: 700; }
.k-ride-arrow { color: var(--accent); transition: transform var(--dur) var(--ease); }
.k-ride-arrow svg { width: 120px; height: 120px; }
.k-ride-dist { font-size: 56px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.k-ride-sub { color: var(--text-2); }
.k-ride-what { font-size: 28px; font-weight: 700; line-height: 1.25; max-width: 22em; }
.k-ride-distrow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.k-ride:not(.k-ride-withmap) .k-ride-distrow { justify-content: center; }
/* 場面ごとの色：外れた＝注意の色、着いた＝よい色、待つ＝薄く */
.k-ride[data-kind=off] .k-ride-arrow, .k-ride[data-kind=off] .k-ride-what { color: var(--warn-text); }
.k-ride[data-kind=off] .k-ride-card { box-shadow: inset 0 0 0 2px var(--warn), var(--shadow); }
.k-ride[data-kind=off] .k-ride-dist, .k-ride[data-kind=bearing] .k-ride-dist { font-size: 32px; }
.k-ride[data-kind=arrive] .k-ride-arrow, .k-ride[data-kind=arrive] .k-ride-dist { color: var(--ok-text); }
.k-ride[data-kind=wait] .k-ride-arrow { opacity: .35; }
.k-ride .ad-btn { width: min(100%, 360px); }

/* 地図つき：上に現在地のまわりの地図と案内、下に返却先と操作 */
.k-ride.k-ride-withmap { display: block; justify-items: stretch; padding: 0; min-height: 0; text-align: left; }
.k-ride-top { position: relative; }
.k-ride-withmap .k-ride-map { height: 56vh; min-height: 300px; background: var(--sunken); }
.k-ride:not(.k-ride-withmap) .k-ride-card { display: grid; justify-items: center; gap: var(--sp-3); width: min(100%, 360px); padding: var(--sp-4); border-radius: var(--radius-xl); box-sizing: border-box; }
.k-ride-withmap .k-ride-card {
  position: absolute; left: var(--sp-3); right: var(--sp-3); top: var(--sp-3); z-index: 2;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bar) 94%, transparent); box-shadow: var(--shadow);
}
.k-ride-withmap .k-ride-arrow svg { width: 64px; height: 64px; }
.k-ride-withmap .k-ride-dist { font-size: 40px; }
.k-ride-withmap .k-ride-what { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-ride-card-text { min-width: 0; }
.k-ride-recenter { position: absolute; right: var(--sp-3); bottom: var(--sp-6); z-index: 2; width: auto !important; box-shadow: var(--shadow); }
.k-ride-withmap .k-ride-panel { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-4); text-align: center; }

/* 計算し直し中・初めての計算中 */
.k-busy { opacity: .55; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.k-busy-note { display: flex; align-items: center; gap: var(--sp-2); }
.k-skel-list { display: grid; gap: var(--sp-3); }
.k-skel { height: 112px; border-radius: var(--radius-lg); background: var(--sunken); animation: k-pulse 1.4s ease-in-out infinite; }
@keyframes k-pulse { 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  .k-skel { animation: none; }
  .k-opt, .k-ride-arrow { transition: none; }
}

/* 自分の終電 */
.k-mylist { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; gap: var(--sp-2); }
.k-myrow { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); font-variant-numeric: tabular-nums; }
.k-myform { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.k-myform h2 { margin: 0; font-size: var(--fs-lg); }
.k-field { display: grid; gap: var(--sp-1); }
.k-err:empty { display: none; }
.k-err { color: var(--danger-text); }
.k-myrow .ad-badge { margin-top: 2px; flex: none; }
.k-myrow.k-new { animation: k-flash 1.2s var(--ease); }
@keyframes k-flash { from { background: var(--active); } }
.k-pair { display: grid; grid-template-columns: 1fr 7.5em; gap: var(--sp-2); }
.k-myform [aria-invalid="true"] { border-color: var(--danger); }
.k-ltnote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .k-myrow.k-new { animation: none; } }
.k-ltnote .ad-badge { white-space: normal; height: auto; line-height: 1.4; padding-block: 2px; max-width: 100%; }
.k-ride-poi { display: block; text-align: center; font-size: var(--k-fs); color: var(--text); }
.k-ride-poi .k-ic { display: inline-flex; vertical-align: -3px; margin-right: var(--sp-1); }
.k-ride-poi:empty { display: none; }
.k-ride-panel .k-banner { text-align: left; }
.k-pois li { display: grid; grid-template-columns: 16px 1fr auto; column-gap: var(--sp-2); align-items: start; }
.k-pois li > span:nth-child(2) { min-width: 0; }
.k-pois-d { white-space: nowrap; text-align: right; }
.k-along { margin-top: var(--sp-4); }
.k-along h3 { margin: 0 0 var(--sp-2); font-size: var(--k-fs); font-weight: 600; color: var(--text); }
.k-charge { margin-top: var(--sp-4); }
.k-charge a .k-ic, .k-banner a .k-ic { display: inline-flex; vertical-align: -2px; margin-left: 2px; }
.k-leg-note { display: flex; gap: var(--sp-1); align-items: flex-start; margin-top: 2px; font-size: 12px; color: var(--text-3); }
.k-leg-note .k-ic { margin-top: 2px; }
/* 家の場所を選ぶ */
.k-pick-map { height: 50vh; min-height: 260px; }
.k-pick h1 { margin: var(--sp-3) 0 var(--sp-2); }
.k-pick .k-wide.primary { position: sticky; bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
.k-home-btns { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }

/* 駅の名前で探す */
.k-found { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0; }
.k-found:empty { display: none; }
.k-found-st { padding: var(--sp-2) var(--sp-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.k-found-name { font-weight: 600; margin-bottom: var(--sp-1); }
.k-found-lines { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.k-found-lines .ad-btn[aria-pressed=true] { background: var(--active); color: var(--accent-text); border-color: var(--accent); }
.k-found-name .k-note { font-weight: 400; margin: 0; }
.k-found-count:empty { display: none; }
.k-bylines { margin-top: var(--sp-3); display: grid; gap: var(--sp-1); }
.k-bylines > summary { cursor: pointer; padding: var(--sp-2) 0; color: var(--text); min-height: var(--k-tap); display: flex; align-items: center; gap: var(--sp-1); list-style: none; }
.k-bylines > summary::-webkit-details-marker { display: none; }
.k-bylines > summary .k-ic { transition: transform .15s ease-out; }
.k-bylines[open] > summary .k-ic { transform: rotate(90deg); }
.k-bylines > .k-sub { display: block; margin-top: var(--sp-2); }
.k-bylines .k-select, .k-bylines .ad-input { width: 100%; }
@media (prefers-reduced-motion: reduce) { .k-bylines > summary .k-ic { transition: none; } }