/* 在地生活：/local/{縣市} 的「今天」總覽、/local/{縣市}/{行政區} 區頁
   顏色沿用 public.css 的 --primary、--bg、--border、--text；這裡只補停水、停電、施工等語意色 */
.ll {
  --ll-water: #0B6FB8; --ll-water-bg: #E6F1FA;
  --ll-power: #B45309; --ll-power-bg: #FEF3E2;
  --ll-road: #6B4FA0; --ll-road-bg: #F1ECF8;
  --ll-ok: #2E7D32; --ll-ok-bg: #EDF7EE;
  --ll-warn: #C62828; --ll-warn-bg: #FDECEC;
  --ll-target: #FFF8E1;
}
[data-theme="night"] .ll {
  --ll-water: #6CB8F0; --ll-water-bg: #15283a;
  --ll-power: #F2B25C; --ll-power-bg: #33261a;
  --ll-road: #B9A2E6; --ll-road-bg: #262036;
  --ll-ok: #81C784; --ll-ok-bg: #15291a;
  --ll-warn: #FF8A80; --ll-warn-bg: #3a1c1f;
  --ll-target: #2e2817;
}

.ll { max-width: 760px; }
.ll h1 { font-size: 1.6rem; font-weight: 900; margin: 0; line-height: 1.25; text-wrap: balance; }
.ll h2 { font-size: 1.15rem; font-weight: 800; margin: 0; text-wrap: balance; }
.ll-h3 { font-size: 1rem; font-weight: 700; margin: 18px 0 8px; }
.ll-sub { color: var(--text-secondary); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ll-src { color: var(--text-tertiary); font-size: 0.78rem; margin: 2px 0 10px; }
.ll-done { color: var(--text-secondary); font-size: 0.85rem; margin: 10px 0 0; }
.ll-empty { padding: 24px 0; color: var(--text-secondary); }
.ll-foot { margin: 28px 0 8px; color: var(--text-tertiary); font-size: 0.78rem; line-height: 1.7; }

.ll-crumb { display: flex; gap: 6px; align-items: center; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 10px; flex-wrap: wrap; }
.ll-crumb a { color: var(--text-secondary); }
.ll-crumb b { color: var(--text); }

.ll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ll-head-main { min-width: 0; }
.ll-pin { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: 0.88rem; cursor: pointer; }
.ll-pin.is-pinned { background: var(--accent); border-color: var(--accent); color: #1a1d2e; font-weight: 700; }
.ll-pin:focus-visible, .ll-share:focus-visible, .ll-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ll-alert { display: flex; gap: 10px; align-items: flex-start; background: var(--ll-warn-bg); border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.ll-alert p { margin: 0; font-size: 0.92rem; color: var(--text); }
.ll-alert small { display: block; color: var(--text-secondary); font-size: 0.78rem; }
.ll-alert-tag { flex: none; background: var(--ll-warn); color: var(--bg); font-size: 0.75rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-top: 2px; }

/* 一眼看完的四格 */
.ll-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
.ll-sum a { display: grid; gap: 2px; padding: 10px 10px; border-radius: 12px; text-decoration: none; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.ll-sum span { font-size: 0.78rem; color: var(--text-secondary); }
.ll-sum b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ll-sum .is-warn { background: var(--ll-warn-bg); border-color: transparent; }
.ll-sum .is-warn b { color: var(--ll-warn); }
.ll-sum .is-ok b { color: var(--ll-ok); }
.ll-sum .is-info b { color: var(--ll-road); }
@media (max-width: 480px) { .ll-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ll-sec { margin-top: 26px; scroll-margin-top: 70px; }

.ll-disclaimer { margin: 10px 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary); background: var(--bg-section); border-radius: 10px; padding: 8px 12px; }
.ll-disclaimer b { color: var(--text); margin-right: 6px; }
.ll-src a, .ll-meta a, .ll-foot a { color: var(--primary); }
.ll-none { background: var(--bg-section); color: var(--text-secondary); border-radius: 10px; padding: 10px 12px; font-size: 0.92rem; }
.ll-sum .is-none b { color: var(--text-tertiary); font-size: 0.95rem; }
.ll-rail a { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: grid; gap: 1px; color: var(--text); text-decoration: none; }
.ll-rail a.is-warn { background: var(--ll-warn-bg); border-color: transparent; }
.ll-rail a.is-ok span { color: var(--ll-ok); }
.ll-rail a.is-warn span { color: var(--ll-warn); }
.ll-calm {background: var(--ll-ok-bg); color: var(--ll-ok); font-weight: 700; border-radius: 10px; padding: 10px 12px; font-size: 0.95rem; }

.ll-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ll-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bg); scroll-margin-top: 70px; }
.ll-card.is-target, .ll-days li.is-target { background: var(--ll-target); border-color: var(--accent); }
.ll-kind { font-size: 0.8rem; font-weight: 700; text-align: center; border-radius: 6px; padding: 3px 0; letter-spacing: 0.04em; }
.k-water { background: var(--ll-water-bg); color: var(--ll-water); }
.k-power { background: var(--ll-power-bg); color: var(--ll-power); }
.ll-body { min-width: 0; display: grid; gap: 2px; }
.ll-when { font-weight: 800; font-variant-numeric: tabular-nums; }
.ll-what { font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere; }
.ll-meta { font-size: 0.8rem; color: var(--text-secondary); }
.ll-live, .ll-soon { display: inline-block; font-size: 0.72rem; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 2px; }
.ll-live { color: var(--ll-warn); }
.ll-soon { color: var(--ll-power); }
.ll-more { display: inline; }
.ll-more summary { display: inline; color: var(--primary); cursor: pointer; font-size: 0.85rem; margin-left: 4px; }
.ll-more[open] { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--text-secondary); }

.ll-share { justify-self: start; margin-top: 6px; border: 0; background: #06C755; color: #fff; font-weight: 700; font-size: 0.85rem; border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.ll-share-page { display: block; width: 100%; margin-top: 10px; padding: 11px 14px; font-size: 1rem; border-radius: 12px; }
.ll-share-sm {background: transparent; color: var(--primary); border: 1px solid var(--border); padding: 3px 12px; }

.ll-days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.ll-days li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--border); scroll-margin-top: 70px; }
.ll-day { font-weight: 800; font-variant-numeric: tabular-nums; }
.ll-day small { display: block; font-weight: 400; color: var(--text-secondary); font-size: 0.78rem; }
.ll-slots { min-width: 0; display: grid; gap: 3px; font-size: 0.9rem; }
.ll-slots b { font-variant-numeric: tabular-nums; }

.ll-list { list-style: none; margin: 0; padding: 0; }
.ll-list li { padding: 9px 0; border-bottom: 1px solid var(--border); }
.ll-list li:last-child { border-bottom: 0; }
.ll-fold { margin-top: 6px; }
.ll-fold > summary { cursor: pointer; color: var(--primary); font-size: 0.9rem; padding: 6px 0; }

.ll-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ll-rail div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: grid; gap: 1px; }
.ll-rail b { font-size: 0.92rem; }
.ll-rail span { font-size: 0.82rem; font-weight: 700; }
.ll-rail .is-ok span { color: var(--ll-ok); }
.ll-rail .is-warn { background: var(--ll-warn-bg); border-color: transparent; }
.ll-rail .is-warn span { color: var(--ll-warn); }

.ll-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.ll-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; }
.ll-link:hover { border-color: var(--primary); }
.ll-link b { font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ll-link span { display: grid; font-weight: 700; font-size: 0.95rem; min-width: 0; }
.ll-link small { font-weight: 400; color: var(--text-secondary); font-size: 0.8rem; }
.ll-link i { font-style: normal; color: var(--primary); font-size: 0.85rem; }

.ll-news { list-style: none; margin: 10px 0 0; padding: 0; }
.ll-news li { padding: 9px 0; border-bottom: 1px solid var(--border); display: grid; gap: 2px; }
.ll-news a { color: var(--text); text-decoration: none; font-weight: 500; line-height: 1.5; }
.ll-news a:hover { color: var(--primary); }
.ll-news span { font-size: 0.78rem; color: var(--text-tertiary); }
.ll-more-link { display: inline-block; margin-top: 8px; color: var(--primary); font-size: 0.9rem; }

.ll-districts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ll-districts a { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 0.88rem; color: var(--text); text-decoration: none; background: var(--bg); }
.ll-districts a:hover { border-color: var(--primary); }
.ll-districts em { font-style: normal; font-size: 0.72rem; font-weight: 700; background: var(--ll-warn); color: var(--bg); border-radius: 999px; min-width: 18px; text-align: center; padding: 0 5px; }

/* 城市頁的「今天」總覽 */
.ll-today { margin: 0 0 24px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); max-width: none; }
.ll-today-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ll-today .ll-rail-inline { margin-top: 12px; }
.ll-mine { display: block; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--ll-ok-bg); color: var(--ll-ok); font-weight: 700; text-decoration: none; }
.ll-mine.is-warn { background: var(--ll-warn-bg); color: var(--ll-warn); }
.ll-busy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ll-busy a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n i" "s i"; gap: 0 6px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--ll-water-bg); color: var(--text); text-decoration: none; }
.ll-busy b { grid-area: n; font-weight: 800; }
.ll-busy span { grid-area: s; font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-busy i { grid-area: i; font-style: normal; color: var(--primary); }
.ll-today .ll-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ll-today .ll-rail div { padding: 6px 10px; }

/* 分享選單（不支援系統分享的瀏覽器） */
.ll-sheet { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 13, 22, 0.5); display: flex; align-items: flex-end; justify-content: center; padding: 0 max(16px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)); }
.ll-sheet[hidden] { display: none; }
/* 選單也掛 .ll 才吃得到顏色變數，但不能被 .ll 的 max-width 限制，否則桌機遮罩只蓋左半邊 */
.ll.ll-sheet { max-width: none; }
@media (min-width: 768px) { .ll-sheet { align-items: center; } }
.ll-sheet-box { width: 100%; max-width: 420px; background: var(--bg); color: var(--text); border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.ll-sheet-text { margin: 0; font-size: 0.92rem; line-height: 1.6; background: var(--bg-section); border-radius: 10px; padding: 10px 12px; }
.ll-sheet-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ll-btn { display: flex; align-items: center; justify-content: center; border-radius: 10px; padding: 10px 0; font-weight: 700; font-size: 0.92rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); text-decoration: none; cursor: pointer; }
.ll-btn.line { background: #06C755; border-color: #06C755; color: #fff; }
.ll-btn.fb { background: #1877F2; border-color: #1877F2; color: #fff; }
.ll-sheet-close { border: 0; background: transparent; color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; padding: 4px; }