/* 竹林 · 共用樣式：設計 token + 跨頁共用元件 */

:root {
  --ground:     #F1F3EC;
  --panel:      #FBFCF8;
  --panel-2:    #E8EBE0;
  --ink:        #1A1E16;
  --ink-2:      #4A5245;
  --ink-3:      #7C8475;
  --rule:       #D3D8C9;
  --rule-soft:  #E2E6D9;
  --accent:     #3B6B47;
  --accent-ink: #FBFCF8;
  --accent-wash:#E4EDE3;
  --warn:       #8A6415;
  --warn-wash:  #F5EBD2;
  --crit:       #8E3B2F;
  --crit-wash:  #F6E2DD;
  --shadow:     0 1px 2px rgba(26,30,22,.06), 0 8px 24px -16px rgba(26,30,22,.25);

  --serif: "Noto Serif TC", "Songti TC", "Source Han Serif TC", "MingLiU", Georgia, serif;
  --sans:  "PingFang TC", "Noto Sans TC", "Heiti TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --step-0: .8125rem;
  --step-1: .9375rem;
  --step-2: 1.0625rem;
  --step-3: 1.375rem;
  --step-4: 1.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:#111410; --panel:#191D17; --panel-2:#222720;
    --ink:#E7EBDF; --ink-2:#A9B29E; --ink-3:#79826F;
    --rule:#2C3228; --rule-soft:#232820;
    --accent:#85B78D; --accent-ink:#10140F; --accent-wash:#1E2A1F;
    --warn:#D9B15E; --warn-wash:#2B2617;
    --crit:#D98E7F; --crit-wash:#2C1D19;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --ground:#111410; --panel:#191D17; --panel-2:#222720;
  --ink:#E7EBDF; --ink-2:#A9B29E; --ink-3:#79826F;
  --rule:#2C3228; --rule-soft:#232820;
  --accent:#85B78D; --accent-ink:#10140F; --accent-wash:#1E2A1F;
  --warn:#D9B15E; --warn-wash:#2B2617;
  --crit:#D98E7F; --crit-wash:#2C1D19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}
:root[data-theme="light"] {
  --ground:#F1F3EC; --panel:#FBFCF8; --panel-2:#E8EBE0;
  --ink:#1A1E16; --ink-2:#4A5245; --ink-3:#7C8475;
  --rule:#D3D8C9; --rule-soft:#E2E6D9;
  --accent:#3B6B47; --accent-ink:#FBFCF8; --accent-wash:#E4EDE3;
  --warn:#8A6415; --warn-wash:#F5EBD2;
  --crit:#8E3B2F; --crit-wash:#F6E2DD;
  --shadow:0 1px 2px rgba(26,30,22,.06), 0 8px 24px -16px rgba(26,30,22,.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); }

/* 竹節分隔 —— 主題結構裝置 */
.stalk { width: 1px; background: var(--rule); position: relative; flex: none; }
.stalk::before, .stalk::after {
  content: ""; position: absolute; left: -3px; width: 7px; height: 1px; background: var(--rule);
}
.stalk::before { top: 28%; }
.stalk::after  { top: 64%; }

/* 版面 */
.wrap { max-width: 1360px; margin: 0 auto; padding: 20px 20px 64px; }

header.bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 20px;
}
.brand {
  font-family: var(--serif); font-size: var(--step-4); font-weight: 700;
  letter-spacing: .06em; line-height: 1.1;
}
.brand .dot { color: var(--accent); }
.brand-sub {
  font-size: 11px; color: var(--ink-3); letter-spacing: .18em; text-transform: uppercase;
}
.bar-right {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  font-size: var(--step-0); color: var(--ink-2);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.bar-right > * { white-space: nowrap; flex: none; }
.bar-right select { width: auto; font-family: var(--sans); padding: 4px 8px; }

/* 站別導覽 */
nav.stations { display: flex; gap: 2px; flex-wrap: wrap; }
nav.stations a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 14px; border-radius: 3px;
  text-decoration: none; color: var(--ink-2);
  border: 1px solid transparent;
}
nav.stations a:hover { background: var(--panel-2); }
nav.stations a .n { font-family: var(--serif); font-size: var(--step-2); font-weight: 700; }
nav.stations a .s { font-size: 10px; letter-spacing: .12em; color: var(--ink-3); font-family: var(--mono); }
nav.stations a[aria-current="page"] {
  background: var(--accent-wash); border-color: var(--accent); color: var(--accent);
}
nav.stations a[aria-current="page"] .s { color: var(--accent); }

/* 卡片 */
section.card {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px; box-shadow: var(--shadow); overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--rule-soft);
}
.card-head h2 {
  margin: 0; font-family: var(--serif); font-size: var(--step-2);
  font-weight: 700; letter-spacing: .04em;
}
.card-head .note {
  margin-left: auto; font-size: var(--step-0); color: var(--ink-3);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.card-body { padding: 14px; }
.card-body.tight { padding: 8px; }

.flow-tag {
  font-size: 10px; letter-spacing: .14em; color: var(--accent);
  background: var(--accent-wash); border-radius: 2px; padding: 2px 6px;
  font-family: var(--mono); white-space: nowrap;
}

.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* 表單 */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: var(--step-0); color: var(--ink-2); letter-spacing: .04em; }
input, select, button { font: inherit; color: inherit; }
input, select {
  background: var(--ground); border: 1px solid var(--rule); border-radius: 3px;
  padding: 7px 9px; width: 100%; font-size: var(--step-1);
}
input::placeholder { color: var(--ink-3); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

button {
  cursor: pointer; border-radius: 3px; border: 1px solid transparent;
  padding: 7px 12px; background: var(--panel-2);
  transition: background .12s ease, border-color .12s ease;
}
button:hover { background: var(--rule-soft); }
button.primary {
  background: var(--accent); color: var(--accent-ink); font-weight: 600; letter-spacing: .04em;
}
button.primary:hover { filter: brightness(1.08); }
button.ghost {
  background: transparent; border-color: var(--rule);
  font-size: var(--step-0); padding: 4px 9px; color: var(--ink-2);
}
button.ghost:hover { background: var(--panel-2); }

.empty { color: var(--ink-3); font-size: var(--step-0); padding: 18px 14px; text-align: center; }

/* 狀態指示 */
.pill {
  font-family: var(--mono); font-size: var(--step-0);
  font-variant-numeric: tabular-nums; border-radius: 2px; padding: 2px 7px;
}
.pill[data-tone="ok"]   { background: var(--accent-wash); color: var(--accent); }
.pill[data-tone="warn"] { background: var(--warn-wash);  color: var(--warn); }
.pill[data-tone="crit"] { background: var(--crit-wash);  color: var(--crit); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rule); background: var(--ground);
  border-radius: 999px; padding: 4px 11px 4px 8px; font-size: var(--step-0);
}
.chip .role { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-3); }
.chip[data-on="true"] { border-color: var(--accent); background: var(--accent-wash); }
.chip[data-on="true"] .role { color: var(--accent); }

/* 訂位清單（座位表頁與菜單頁共用） */
ul.bookings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
ul.bookings li + li { border-top: 1px solid var(--rule-soft); }
.bk {
  width: 100%; display: grid; grid-template-columns: 46px 1fr auto;
  gap: 10px; align-items: center; text-align: left;
  background: transparent; border: 0; border-left: 3px solid transparent;
  border-radius: 0; padding: 10px 12px;
}
.bk:hover { background: var(--panel-2); }
.bk[aria-current="true"] { background: var(--accent-wash); border-left-color: var(--accent); }
.bk .tbl {
  font-family: var(--mono); font-weight: 700; font-size: var(--step-2);
  color: var(--accent); letter-spacing: .02em;
}
.bk .who { font-weight: 600; }
.bk .meta {
  font-size: var(--step-0); color: var(--ink-3);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.bk .amt {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--step-0); color: var(--ink-2); text-align: right;
}

footer.foot {
  margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: var(--step-0); color: var(--ink-3);
  display: flex; gap: 14px; flex-wrap: wrap;
}
footer.foot code {
  font-family: var(--mono); background: var(--panel-2); padding: 1px 5px; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}