/* 台南兩日慢慢玩 — shared stylesheet */

:root{
  --bg:#f7f4ee; --paper:#fffdf9; --ink:#242622; --muted:#6b6e66;
  --line:#ded8ce; --accent:#3f5647; --soft:#e9eee9; --warm:#6f4b2f;
  --body:#54574f; --rain:#5c6058;
  --max:760px;
}

/* 自動 is the default: follow the phone unless the reader says otherwise.
   The :not() covers both "no choice saved" and an explicit 自動. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#161713; --paper:#1e201a; --ink:#ece9de; --muted:#9b9e93;
    --line:#34372e; --accent:#93b8a0; --soft:#262a23; --warm:#cd9d72;
    --body:#c3c5ba; --rain:#a5a89d;
  }
}
:root[data-theme="dark"]{
  --bg:#161713; --paper:#1e201a; --ink:#ece9de; --muted:#9b9e93;
  --line:#34372e; --accent:#93b8a0; --soft:#262a23; --warm:#cd9d72;
  --body:#c3c5ba; --rain:#a5a89d;
}

*{box-sizing:border-box}
html{background:var(--bg); -webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  line-height:1.65;
}
a{color:inherit}

/* Visible keyboard focus everywhere */
:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--paper); color:var(--ink); border:1px solid var(--ink);
  padding:10px 14px; text-decoration:none; font-size:14px;
}
.skip:focus{left:12px; top:12px}

.shell{max-width:var(--max); margin:0 auto; padding:0 20px}

/* ── Top bar ─────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brandrow{height:58px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{font-weight:800; letter-spacing:-.02em; text-decoration:none; white-space:nowrap}
.brandmeta{display:flex; align-items:center; gap:12px; min-width:0}
.dates{font-size:12px; color:var(--muted); white-space:nowrap}

/* 配色切換 —— hidden until app.js turns it on, so it is never a dead control */
.themetoggle{
  display:flex; gap:1px; padding:2px; border:1px solid var(--line);
  border-radius:999px; background:var(--paper); flex:none;
}
.themetoggle[hidden]{display:none}
.themeicon{
  font-size:12px; color:var(--muted); padding:0 5px 0 6px; line-height:1;
  align-self:center; user-select:none;
}
.themetoggle button{
  font:inherit; font-size:11px; line-height:1; color:var(--muted); cursor:pointer;
  padding:6px 9px; border:0; border-radius:999px; background:transparent;
  white-space:nowrap; -webkit-tap-highlight-color:transparent;
}
.themetoggle button:hover{color:var(--ink)}
.themetoggle button[aria-pressed="true"]{background:var(--ink); color:var(--bg); font-weight:800}
.tabs{display:flex; gap:4px; overflow:auto; padding:0 0 10px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{
  text-decoration:none; white-space:nowrap; font-size:14px; color:var(--muted);
  padding:7px 11px; border-radius:999px;
}
.tabs a:hover{color:var(--ink); background:var(--soft)}
.tabs a[aria-current="page"]{background:var(--ink); color:var(--bg)}

main{padding:64px 0 92px}

/* ── Hero ────────────────────────────────── */
.hero{margin-bottom:28px; padding-top:6px}
.eyebrow{font-size:12px; letter-spacing:.1em; color:var(--accent); font-weight:800; text-transform:uppercase}
h1{font-size:clamp(31px,7vw,46px); line-height:1.08; letter-spacing:-.035em; margin:8px 0 10px}
.lead{margin:0; color:var(--body); font-size:16px; max-width:640px}

.action{
  display:inline-flex; align-items:center; gap:7px; padding:10px 13px;
  border:1px solid var(--ink); text-decoration:none; font-size:14px; background:var(--paper);
}
.action:hover{background:var(--ink); color:var(--bg)}

/* Vertical rhythm — replaces the old <div style="height:16px"> spacer hacks */
.stack > * + *{margin-top:16px}
.stack > .note{margin-top:15px}

/* ── Itinerary list ──────────────────────── */
.list{background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.stop{padding:19px 18px; border-bottom:1px solid var(--line); position:relative}
.stop:last-child{border-bottom:0}
.stop-head{display:flex; justify-content:space-between; gap:18px; align-items:baseline}
.time{font-size:13px; color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums}
.stop h2{font-size:19px; margin:0}
.stop p{margin:6px 0 0; color:var(--body)}
.maplink{display:inline-block; margin-top:7px; font-size:13px; color:var(--warm); text-underline-offset:3px}
.stop-meta{margin:6px 0 0; font-size:13px; color:var(--muted)}

/* "You are here" state, driven by the clock */
.stop.is-now{background:var(--soft)}
.stop.is-now::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent);
}
.stop.is-past{opacity:.5}
.nowtag{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:var(--accent); color:var(--bg); font-size:11px; font-weight:800; letter-spacing:.03em;
  vertical-align:middle;
}
.nowbar{
  margin:0; padding:12px 16px; border:1px solid var(--line); border-radius:12px;
  background:var(--soft); font-size:14px; color:var(--body);
}
.nowbar strong{color:var(--ink)}

.note{padding:14px 16px; border-radius:12px; background:var(--soft); font-size:14px; color:var(--body)}

/* ── Cards ───────────────────────────────── */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:17px}
.card h2{font-size:17px; margin:0 0 7px}
.card p{margin:0; color:var(--body); font-size:14px}
.card a{display:inline-block; margin-top:9px; font-size:13px; text-underline-offset:3px; color:var(--warm)}

.checklist{margin:0; padding:0; list-style:none; font-size:14px; color:var(--body)}
.checklist li{padding:9px 0 9px 26px; border-bottom:1px solid var(--line); position:relative}
.checklist li:last-child{border-bottom:0}
.checklist li::before{
  content:"□"; position:absolute; left:2px; top:9px; color:var(--accent); font-weight:700;
}

/* ── Map ─────────────────────────────────── */
.mapcard{background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.mapcard iframe{display:block; width:100%; height:430px; border:0}
.mapfoot{display:flex; justify-content:space-between; gap:14px; padding:14px 15px; border-top:1px solid var(--line); font-size:13px}
.mapfoot a{color:var(--warm)}
.small{font-size:13px; color:var(--muted)}

/* ── Bottom nav (mobile) ─────────────────── */
.bottomnav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:color-mix(in srgb, var(--paper) 97%, transparent);
  border-top:1px solid var(--line); backdrop-filter:blur(12px);
}
.bottomnav .inner{
  max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr);
  padding:7px 8px calc(7px + env(safe-area-inset-bottom));
}
.bottomnav a{
  text-align:center; text-decoration:none; font-size:11px; color:var(--muted);
  padding:6px 2px; border-radius:10px;
}
.bottomnav a[aria-current="page"]{color:var(--ink); font-weight:800; background:var(--soft)}
.icon{display:block; font-size:17px; line-height:1.1; margin-bottom:2px}

footer{padding:24px 0 34px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); margin-top:40px}
footer p{margin:0 0 6px}
footer a{color:var(--warm)}

/* ── Hourly forecast ─────────────────────── */
.forecast{
  background:var(--paper); border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
}
.forecast-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.forecast-title{font-weight:800; font-size:14px}
.forecast-range{font-size:12px; color:var(--muted)}
.forecast-summary{
  padding:11px 16px; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--body); min-height:0;
}
.forecast-summary:empty{display:none}
.forecast-scroll{overflow-x:auto; scrollbar-width:none}
.forecast-scroll::-webkit-scrollbar{display:none}
.forecast-hours{display:grid; grid-template-columns:repeat(9,minmax(78px,1fr)); min-width:702px}
.forecast-hour{text-align:center; padding:13px 7px 12px; border-right:1px solid var(--line)}
.forecast-hour:last-child{border-right:0}
.forecast-time{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.forecast-icon{font-size:23px; line-height:1; margin:8px 0 5px}
.forecast-temp{font-size:16px; font-weight:800}
.forecast-feels{font-size:11px; color:var(--muted); margin-top:1px}
.forecast-rain{font-size:11px; color:var(--rain); margin-top:6px}
.forecast-rain.wet{font-weight:800; color:var(--warm)}
.forecast-state{padding:16px; color:var(--muted); font-size:13px; grid-column:1/-1}
.forecast-state button{
  margin-left:8px; font:inherit; font-size:13px; padding:3px 9px; cursor:pointer;
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:8px;
}
.weather-source{display:block; margin-top:10px; font-size:11px; color:var(--muted)}
.weather-source a{color:var(--muted)}

/* ── Responsive ──────────────────────────── */
@media (max-width:680px){
  .tabs{display:none}
  .brandmeta{gap:8px}
  .brandrow{height:54px}
  main{padding-top:54px}
  .grid{grid-template-columns:1fr}
  .mapcard iframe{height:58dvh; min-height:360px}
  .bottomnav{display:block}
  footer{padding-bottom:94px}
  .stop-head{display:block}
  .time{display:block; margin-bottom:2px}
  .nowtag{margin-left:0}
  .forecast-hours{grid-template-columns:repeat(9,82px); min-width:max-content}
  .forecast-head{padding:13px 14px}
}

@media (max-width:430px){
  .dates-time{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ── Print: one clean sheet you can fold into a pocket ── */
@media print{
  :root,:root[data-theme="dark"]{
    --bg:#fff; --paper:#fff; --ink:#000; --muted:#555;
    --line:#999; --accent:#333; --soft:#fff; --warm:#333; --body:#222; --rain:#444;
  }
  .topbar,.bottomnav,.forecast,.action,.skip,.mapcard iframe{display:none !important}
  main{padding:0}
  body{background:#fff; color:#000; font-size:12pt}
  .list,.card,.note{border:1px solid #999; break-inside:avoid}
  .stop.is-past,.stop.is-now{opacity:1; background:transparent}
  .stop.is-now::before{display:none}
  .maplink{display:none}
}