/* 顏色全部定義成變數，深色模式只覆寫這裡。新增顏色時兩組都要補，並確認文字對比 4.5:1、色條與外框 3:1（WCAG AA） */
:root {
  color-scheme: light dark;
  --bg: #fbfbf9;
  --surface: #fff;
  --ink: #1d2327;
  --muted: #5f6b73;
  --line: #d9dee2;
  --accent: #0e7c86;
  /* 週末與連假 */
  --rest: #c96a04;
  --rest-ink: #9a3412;
  --rest-bg: #fff6ea;
  --rest-line: #f1dcc4;
  /* 形式：6 個色系，字色／底色 */
  --t-show-fg: #5b2a9e;  --t-show-bg: #efe6fb;
  --t-exhibit-fg: #9a2250; --t-exhibit-bg: #fbe4ec;
  --t-learn-fg: #1f4e8c; --t-learn-bg: #e2ecfa;
  --t-exp-fg: #9a3412;   --t-exp-bg: #fde8dd;
  --t-market-fg: #7a4a00; --t-market-bg: #fcedcc;
  --t-social-fg: #1e6b3a; --t-social-bg: #def2e5;
  /* 地區色條 */
  --a-harbor: #0e7c86;
  --a-north: #4f6d7a;
  --a-fengshan: #a0522d;
  --a-south: #2f6f4e;
  --a-cimei: #6b8e23;
  /* 標籤 */
  --chip-ink: #2b3338;
  --tag-ink: #4a555e;
  --tag-free: #1e7b45;
  --tag-family: #b45309;
  --tag-night-fg: #fff;  --tag-night-bg: #1f2a44;
  --tag-auto-fg: #3d4650; --tag-auto-bg: #eef0f2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181b;
    --surface: #1c2226;
    --ink: #e6e9eb;
    --muted: #9ba6ae;
    --line: #353e44;
    --accent: #4cc2cb;
    --rest: #f59e0b;
    --rest-ink: #fdba74;
    --rest-bg: #261d13;
    --rest-line: #4a3623;
    --t-show-fg: #d6bcff;  --t-show-bg: #2f2349;
    --t-exhibit-fg: #ffb3cc; --t-exhibit-bg: #3d1d2b;
    --t-learn-fg: #a9c9ff; --t-learn-bg: #1c2c47;
    --t-exp-fg: #ffb89a;   --t-exp-bg: #3d2418;
    --t-market-fg: #f3cf7c; --t-market-bg: #3a2c12;
    --t-social-fg: #9fdfb4; --t-social-bg: #183324;
    --a-harbor: #2fb3bd;
    --a-north: #86a3b2;
    --a-fengshan: #dc8e62;
    --a-south: #5cba8b;
    --a-cimei: #9fc35c;
    --chip-ink: #d5dade;
    --tag-ink: #c3cbd1;
    --tag-free: #62d394;
    --tag-family: #f2a55f;
    --tag-night-fg: #eef1ff; --tag-night-bg: #3a4870;
    --tag-auto-fg: #c3cbd1; --tag-auto-bg: #2a3136;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 40rem;
  padding: 2.5rem 1.25rem 3rem;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.7;
}

a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

header { border-bottom: 2px solid var(--ink); padding-bottom: 1rem; }
.site { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem; color: var(--accent); }
h1 { margin: .25rem 0 0; font-size: 1.75rem; line-height: 1.3; }
.block { margin-top: 2.5rem; }
/* 區塊標題（這週、下週、展期中、公民行動）是頁面上第二大的字，下面的段落標籤與活動標題都比它小 */
.block h2 { margin: 0 0 .5rem; padding-bottom: .35rem; font-size: 1.4rem; line-height: 1.3; border-bottom: 2px solid var(--ink); }
.range { margin-left: .6rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85rem; font-weight: normal; color: var(--muted); }
.lede { margin: 0; color: var(--muted); font-size: .9rem; }

/* 活動：左欄是時段（依日期分組時）或日期（展期中、公民行動），掃過去就知道幾點、哪天；右欄是標題、地點與分類。
   細節（說明、主辦、來源）收進「說明」，列表只留掃描時需要的資訊 */
.events { list-style: none; margin: 0; padding: 0; }
.event { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: .85rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.when { margin: .1rem 0 0; display: flex; white-space: nowrap; flex-direction: column; line-height: 1.3; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.when .start { font-size: 1rem; font-weight: 700; }
.when .end { font-size: .75rem; color: var(--muted); }
.when.rest .start, .when.rest .end:first-of-type { color: var(--rest-ink); }
.events .title { margin: 0; font-size: 1.05rem; line-height: 1.45; font-weight: 700; }
.events .title a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: .2em; }
.events .title a:hover { color: var(--accent); text-decoration-color: currentColor; }
.meta { margin: .1rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.meta .time { margin-right: .5rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9rem; color: var(--ink); }
.event .body { overflow-wrap: anywhere; }
.reason { margin: .4rem 0 0; }
/* 說明：收在分類那一列的最後，展開後占滿整列 */
.more { font-size: .85rem; color: var(--muted); }
.more summary { cursor: pointer; padding: 0 .2rem; line-height: 1.6; color: var(--accent); list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " ▾"; }
.more[open] { flex-basis: 100%; }
.more[open] summary::after { content: " ▴"; }
.more p { margin: .15rem 0 0; line-height: 1.6; }
.more .note { color: var(--ink); }
/* 依日期分組時，「說明」放在左欄底部（時段下面的空位），不占分類那一列 */
.by-day { position: relative; }
.by-day .more summary { position: absolute; left: 0; bottom: .7rem; padding: 0; }
/* 分類：形式是實心底色、地區是左側色條、標籤只有外框。顏色對比都經過 WCAG AA（4.5:1）檢查 */
.tags { margin: .35rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.type, .area, .tag { font-size: .78rem; line-height: 1.6; border-radius: 3px; white-space: nowrap; }

/* 形式：12 種分成 6 個色系 */
.type { padding: 0 .5rem; font-weight: 600; color: var(--c-fg); background: var(--c-bg); }
.type[data-type="音樂"], .type[data-type="表演"], .type[data-type="電影"] { --c-fg: var(--t-show-fg); --c-bg: var(--t-show-bg); } /* 演出 */
.type[data-type="展覽"] { --c-fg: var(--t-exhibit-fg); --c-bg: var(--t-exhibit-bg); }                                                    /* 展覽 */
.type[data-type="講座"], .type[data-type="工作坊"], .type[data-type="導覽"] { --c-fg: var(--t-learn-fg); --c-bg: var(--t-learn-bg); } /* 學習 */
.type[data-type="體驗"], .type[data-type="節慶"] { --c-fg: var(--t-exp-fg); --c-bg: var(--t-exp-bg); }                              /* 體驗 */
.type[data-type="市集"] { --c-fg: var(--t-market-fg); --c-bg: var(--t-market-bg); }                                                    /* 市集 */
.type[data-type="聚會"], .type[data-type="遊行集會"] { --c-fg: var(--t-social-fg); --c-bg: var(--t-social-bg); }                           /* 社群 */

/* 地區：白底加左側色條 */
.area { padding: 0 .45rem 0 .4rem; color: var(--chip-ink); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--a); }
.area[data-area="港區與市中心"] { --a: var(--a-harbor); }
.area[data-area="北高雄"] { --a: var(--a-north); }
.area[data-area="鳳山與周邊"] { --a: var(--a-fengshan); }
.area[data-area="南高雄"] { --a: var(--a-south); }
.area[data-area="旗美山區"] { --a: var(--a-cimei); }

/* 標籤：只有外框 */
.tag { padding: 0 .45rem; color: var(--tag-ink); background: var(--surface); border: 1px solid var(--line); }
.tag[data-tag="免費"] { color: var(--tag-free); border-color: var(--tag-free); font-weight: 600; }
.tag[data-tag="親子"] { color: var(--tag-family); border-color: var(--tag-family); }
.tag[data-group="主題"]::before { content: "#"; color: var(--muted); }
.tag[data-tag="夜間"] { color: var(--tag-night-fg); background: var(--tag-night-bg); border-color: var(--tag-night-bg); }
.tag[data-tag="多日"], .tag[data-tag="長期展"] { color: var(--tag-auto-fg); background: var(--tag-auto-bg); border-color: var(--tag-auto-bg); }
.empty { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }

.subscribe { margin-top: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.subscribe h2 { margin: 0 0 .25rem; font-size: 1rem; }
.subscribe p { margin: 0; }
.subscribe ul { margin: .4rem 0 0; padding-left: 1.2rem; }

footer { margin-top: 2.5rem; font-size: .85rem; color: var(--muted); }
footer p { margin: .2rem 0; }

.site a { color: inherit; text-decoration: none; }
header .lede { margin-top: .4rem; }
header .lede .range { display: block; margin: .15rem 0 0; }
.past ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.past li { margin: .2rem 0; }
.muted { margin-left: .5rem; font-size: .85rem; color: var(--muted); }

/* 依週分組：每週再分平日與放假日段落。段落標題是小標籤，靠顏色與字距區分，不靠字級 */
.seg { margin: .5rem 0 1rem; }
.seg.rest { padding: .1rem 1rem .25rem; background: var(--rest-bg); border-left: 4px solid var(--rest); border-radius: 0 4px 4px 0; }
.seg-label { margin: .6rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.seg-label .range { margin-left: .5rem; font-size: .8rem; font-weight: normal; letter-spacing: 0; color: inherit; }
.seg.rest .seg-label { color: var(--rest-ink); }
.holidays { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.holiday { padding: 0 .5rem; font-size: .78rem; line-height: 1.6; font-weight: 600; color: var(--rest-ink); background: var(--surface); border: 1px solid var(--rest); border-radius: 999px; }
.seg .event:last-child { border-bottom: 0; }
.seg.rest .event { border-bottom-color: var(--rest-line); }
.none { margin: .3rem 0 .5rem; font-size: .9rem; color: var(--muted); }
/* 進行中：已經開始的多日活動，一行一筆 */
.continuing { margin: .5rem 0 1rem; }
.continuing ul { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .9rem; }
.continuing li { margin: .2rem 0; line-height: 1.5; }
.continuing li + li { margin-top: .45rem; }
.continuing li a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: .2em; }
.continuing li a:hover { color: var(--accent); text-decoration-color: currentColor; }
.continuing .muted { display: block; margin-left: 0; font-size: .8rem; }
/* 日期小標題：捲動時貼在畫面頂端，同一天的活動不用每筆重複日期 */
.day { position: sticky; top: 0; z-index: 1; margin: .6rem 0 0; padding: .3rem 0; font-size: .95rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; background: var(--bg); border-bottom: 1px solid var(--ink); }
.seg.rest .day { color: var(--rest-ink); background: var(--rest-bg); border-bottom-color: var(--rest); }
.day .count { margin-left: .6rem; font-size: .8rem; font-weight: normal; color: var(--muted); }
.today { margin-right: .5rem; padding: 0 .4rem; font-size: .78rem; color: var(--surface); background: var(--accent); border-radius: 3px; }
.seg.rest .today { background: var(--rest-ink); }