/* ============================================================
   senior.css — 長輩友善模式
   字級 A/A+/A++、高對比、大觸控區
   ============================================================ */

:root {
  --sr-fs: 1.15rem;
  --sr-lh: 1.7;
  --sr-tap: 56px;
  --sr-r: 14px;
  --sr-bg: #ffffff;
  --sr-ink: #173f24;
  --sr-primary: #1a5c2a;
  --sr-muted: #3f5948;
  --sr-border: #cfe8d4;
  --sr-card: #f7fbf8;
  --sr-hi: #e8f5e9;
}
body.hc-dark {
  --sr-bg: #0d1a10; --sr-ink: #f5f5f5; --sr-primary: #4caf50;
  --sr-muted: #b0bec5; --sr-border: #2e5934; --sr-card: #1a2e1d; --sr-hi: #1b3520;
}
body.fs-md { --sr-fs: 1.15rem; --sr-tap: 56px; }
body.fs-lg { --sr-fs: 1.4rem;  --sr-tap: 62px; }
body.fs-xl { --sr-fs: 1.7rem;  --sr-tap: 70px; }

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  font-size: var(--sr-fs); line-height: var(--sr-lh);
  background: var(--sr-bg); color: var(--sr-ink);
  transition: background .2s, color .2s; min-height: 100vh;
}

/* ── Top bar ──────────────────────────────────────────── */
#sr-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: var(--sr-primary); color: #fff;
  position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#sr-bar h1 { flex: 1; font-size: calc(var(--sr-fs)*1.05); font-weight: 700; }
.tbar-btn {
  background: rgba(255,255,255,.2); border: none; color: #fff; border-radius: 8px;
  padding: 7px 12px; cursor: pointer; font-weight: 700; min-height: 44px; min-width: 44px;
  font-family: inherit; font-size: calc(var(--sr-fs)*.82); white-space: nowrap;
}
.tbar-btn:active { background: rgba(255,255,255,.35); }

/* ── Controls ─────────────────────────────────────────── */
#sr-ctl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--sr-card); border-bottom: 1px solid var(--sr-border);
}
#sr-ctl label { font-size: calc(var(--sr-fs)*.8); color: var(--sr-muted); font-weight: 600; }
.fs-btn {
  background: var(--sr-hi); border: 2px solid var(--sr-border); color: var(--sr-primary);
  border-radius: 8px; padding: 5px 13px; font-weight: 800; cursor: pointer;
  min-height: 40px; font-family: inherit; font-size: calc(var(--sr-fs)*.85);
}
.fs-btn.on { background: var(--sr-primary); color: #fff; border-color: var(--sr-primary); }
.hc-btn {
  margin-left: auto; background: #111; color: #f5f5f5; border: 2px solid #444;
  border-radius: 8px; padding: 5px 13px; font-weight: 700; cursor: pointer;
  min-height: 40px; font-family: inherit; font-size: calc(var(--sr-fs)*.82);
}
body.hc-dark .hc-btn { background: #eee; color: #111; border-color: #999; }

/* ── Steps nav ────────────────────────────────────────── */
#sr-steps {
  display: flex; border-bottom: 2px solid var(--sr-border); background: var(--sr-bg);
}
.sr-step {
  flex: 1; text-align: center; padding: 11px 4px;
  font-size: calc(var(--sr-fs)*.75); font-weight: 600; color: var(--sr-muted);
  border-bottom: 3px solid transparent;
}
.sr-step.active { color: var(--sr-primary); border-bottom-color: var(--sr-primary); }
.sr-step.done { color: var(--sr-primary); opacity: .55; }

/* ── Content ──────────────────────────────────────────── */
#sr-body { padding: 20px 16px; max-width: 540px; margin: 0 auto; }

/* ── Big buttons ──────────────────────────────────────── */
.big-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: var(--sr-tap); padding: 16px 20px;
  background: var(--sr-primary); color: #fff;
  border: none; border-radius: var(--sr-r);
  font-size: calc(var(--sr-fs)*1.05); font-weight: 700;
  cursor: pointer; font-family: inherit; text-align: center;
  box-shadow: 0 3px 12px rgba(26,92,42,.25);
  transition: transform .12s, box-shadow .12s; text-decoration: none;
}
.big-btn:active { transform: scale(.97); box-shadow: none; }
.big-btn.outline {
  background: var(--sr-card); color: var(--sr-primary);
  border: 2px solid var(--sr-primary); box-shadow: none;
}
.big-btn.amber {
  background: #f59e0b; color: #4b321c; box-shadow: 0 3px 12px rgba(180,83,9,.25);
}
.big-btn .ico { font-size: calc(var(--sr-fs)*1.5); line-height: 1; }

/* ── Search ───────────────────────────────────────────── */
.or-line {
  text-align: center; color: var(--sr-muted); font-size: calc(var(--sr-fs)*.82);
  position: relative;
}
.or-line::before,.or-line::after {
  content:""; position:absolute; top:50%; width:38%; height:1px; background:var(--sr-border);
}
.or-line::before { left:0; } .or-line::after { right:0; }
.search-wrap { position: relative; margin-top: 4px; }
#sr-q {
  width: 100%; padding: 14px 52px 14px 16px;
  font-size: var(--sr-fs); border: 2px solid var(--sr-primary);
  border-radius: var(--sr-r); background: var(--sr-bg); color: var(--sr-ink);
  outline: none; font-family: inherit;
}
#sr-q::placeholder { color: var(--sr-muted); }
#sr-go {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; font-size: 1.7rem; cursor: pointer; color: var(--sr-primary);
}
.sr-hint { text-align: center; color: var(--sr-muted); font-size: calc(var(--sr-fs)*.82); }

/* ── Tree card ────────────────────────────────────────── */
.sr-name { font-size: calc(var(--sr-fs)*1.6); font-weight: 900; color: var(--sr-primary); line-height: 1.2; }
.sr-sci  { color: var(--sr-muted); font-size: calc(var(--sr-fs)*.88); margin-top: 4px; }
.speak-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--sr-tap); padding: 14px 20px;
  background: var(--sr-hi); color: var(--sr-primary);
  border: 2px solid #a5d6a7; border-radius: var(--sr-r);
  font-size: calc(var(--sr-fs)*1.05); font-weight: 700;
  cursor: pointer; font-family: inherit;
}
body.hc-dark .speak-btn { background: #1b3520; color: #81c784; border-color: #2e7d32; }
.speak-btn:active { background: #c8e6c9; }
.speak-btn.going { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.speak-ico { font-size: calc(var(--sr-fs)*1.4); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-card {
  background: var(--sr-card); border: 1px solid var(--sr-border);
  border-radius: 12px; padding: 13px 10px; text-align: center;
}
.info-lbl { font-size: calc(var(--sr-fs)*.78); color: var(--sr-muted); font-weight: 600; margin-bottom: 3px; }
.info-val { font-size: calc(var(--sr-fs)*1.1); font-weight: 800; color: var(--sr-ink); }

.prot-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff8e1; color: #e65100; border: 1.5px solid #ffb300;
  border-radius: 999px; padding: 6px 14px; font-weight: 700;
  font-size: calc(var(--sr-fs)*.82);
}
body.hc-dark .prot-badge { background: #2e1a00; color: #ffcc02; border-color: #f59e0b; }

.act-row { display: flex; gap: 10px; }
.act-row .big-btn { flex: 1; font-size: calc(var(--sr-fs)*.95); }

/* ── Back ─────────────────────────────────────────────── */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--sr-muted);
  font-size: calc(var(--sr-fs)*.88); cursor: pointer;
  font-family: inherit; font-weight: 600; padding: 4px 0;
}

/* ── Loading / Error ──────────────────────────────────── */
.sr-center { text-align: center; padding: 40px 20px; color: var(--sr-muted); }
.sr-err { color: #c62828; }
.spinner {
  width: 44px; height: 44px; border: 4px solid var(--sr-border);
  border-top-color: var(--sr-primary); border-radius: 50%;
  animation: spin .8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Toast ────────────────────────────────────────────── */
#sr-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; padding: 12px 24px; border-radius: 999px;
  font-size: calc(var(--sr-fs)*.82); z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap;
}
#sr-toast.show { opacity: 1; }

/* ── Gaps between sections ────────────────────────────── */
.gap { height: 12px; }