/* Glosarium by Mayopama — from the UI template v0.5 (stone ground, lichen accent).
   One app pane that folds by container width: phone list + sliding entry (< 640),
   tablet list | entry (640–999), desktop filter rail | list | entry (≥ 1000). */
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-Italic-latin.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/SourceSans3-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif TC"; src: url("/fonts/NotoSerifTC-glossary.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  color-scheme: light dark;
  --stone: #E9ECE7; --slab: #F7F8F5; --ink: #1C2320; --muted: #5C6862; --line: #D2D8D1;
  --lichen: #2E6B5C; --lichen-soft: #DDEBE5; --gilt: #8A6B1F; --gilt-soft: #F3EAD0;
  --f-head: "EB Garamond", "Gentium Book Plus", "Noto Serif", Georgia, serif;
  --f-ui: "Source Sans 3", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --f-zh: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --stone: #0F1412; --slab: #161C19; --ink: #E2E7E3; --muted: #94A19A; --line: #29322E;
    --lichen: #7DC3AD; --lichen-soft: #1C332D; --gilt: #D9B860; --gilt-soft: #2C2616;
  }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--slab); color: var(--ink); }
body { font: 15px/1.5 var(--f-ui); -webkit-text-size-adjust: 100%; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--lichen); outline-offset: 2px; }
[lang="zh-Hant"] { font-family: var(--f-zh); }
.seg [lang="zh-Hant"], .foot [lang="zh-Hant"] { font-family: var(--f-ui); }

.app {
  container: app / inline-size;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
}

/* bar */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand svg { width: 26px; height: 26px; flex: none; color: var(--lichen); }
.brand b { display: block; font: 600 1.15rem/1 var(--f-head); letter-spacing: .01em; }
.brand small { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.search { flex: 1 1 220px; order: 3; position: relative; min-width: 0; }
.search input { width: 100%; font: 1rem var(--f-ui); color: var(--ink); background: var(--stone); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px 9px 36px; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--muted); }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--slab); margin-left: auto; }
.seg button { font: 500 .78rem var(--f-ui); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; min-height: 28px; }
.seg button[aria-pressed="true"] { background: var(--lichen); color: var(--slab); }
@container app (min-width: 640px) { .search { order: 0; flex: 1 1 280px; max-width: 520px; } }

/* body: rail + list (+ entry) */
.body { flex: 1; min-height: 0; display: grid; grid-template-areas: "rail" "list"; grid-template-rows: auto 1fr; position: relative; }
.rail { grid-area: rail; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.chips, .alpha { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chip { flex: none; font: 500 .8rem var(--f-ui); color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; white-space: nowrap; min-height: 30px; }
.chip[aria-pressed="true"] { background: var(--lichen-soft); border-color: var(--lichen); color: var(--lichen); }
.chip .n { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 4px; font-size: .72rem; }
.alpha button { flex: none; width: 28px; height: 28px; font: 500 .85rem var(--f-head); color: var(--ink); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.alpha button:hover { background: var(--lichen-soft); color: var(--lichen); }
.alpha button:disabled { color: var(--line); cursor: default; background: none; }
.railhead { display: none; }

.list { grid-area: list; overflow-y: auto; min-height: 0; padding-bottom: 12px; overscroll-behavior: contain; }
.group { position: sticky; top: 0; z-index: 1; background: var(--slab); font: 600 1.05rem var(--f-head); color: var(--lichen); padding: 8px 16px 4px; border-bottom: 1px solid var(--line); }
.row { display: block; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); padding: 10px 16px; }
.row:hover { background: var(--stone); }
.row[aria-current="page"] { background: var(--lichen-soft); }
.row .t { display: block; font: 500 1.12rem/1.25 var(--f-head); }
.row .m { display: block; color: var(--muted); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .tags { float: right; display: flex; gap: 4px; margin-left: 8px; }
.tag { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; line-height: 1.6; font-family: var(--f-ui); }
.empty, .msg { padding: 28px 16px; color: var(--muted); margin: 0; }
.msg .btn { margin-left: 8px; }

/* entry (phone: a sheet over the list) */
.detail { position: absolute; inset: 0; background: var(--slab); overflow-y: auto; transform: translateX(100%); transition: transform .22s ease; z-index: 3; visibility: hidden; overscroll-behavior: contain; }
.app.open .detail { transform: none; visibility: visible; }
.back { display: inline-flex; align-items: center; gap: 4px; font: 500 .95rem var(--f-ui); color: var(--lichen); background: none; border: 0; padding: 12px 16px 4px; cursor: pointer; min-height: 40px; }
.entry { padding: 10px 20px 28px; display: grid; gap: 18px; max-width: 66ch; }
.entry h2 { font: 500 2.3rem/1.05 var(--f-head); margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.entry .lang { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: .86rem; }
.entry > p { margin: 0; }
.msg.pick { padding: 0; }
.sense { display: grid; gap: 3px; }
.sense h3 { margin: 0; font: 600 .7rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sense p, .sense ol { margin: 0; font-size: 1rem; }
.sense ol { padding-left: 1.3em; }
.sense li + li { margin-top: 4px; }
.sense.zh p { font: 1.35rem/1.4 var(--f-zh); }
.sense.lead p, .sense.lead li { font-size: 1.08rem; }
.ur { gap: 10px; }
.urb { display: grid; gap: 4px; padding: 12px 14px; background: var(--stone); border-radius: 8px; }
.urb p { margin: 0; font: 1.08rem/1.55 var(--f-head); }
.urm { font-size: .76rem; color: var(--muted); }
.house { border: 1px solid var(--gilt); background: var(--gilt-soft); border-radius: 8px; padding: 10px 12px; font-size: .9rem; display: grid; gap: 4px; }
.house strong.k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt); }
.see { margin: 0; padding: 10px 12px; border-left: 3px solid var(--lichen); background: var(--lichen-soft); border-radius: 0 8px 8px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.see > span { font-weight: 600; color: var(--lichen); }
.src { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.src span { border-left: 2px solid var(--line); padding-left: 9px; color: var(--muted); }
.rel { display: flex; flex-wrap: wrap; gap: 6px; }
.chipref { font: 500 .95rem var(--f-head); color: var(--lichen); text-decoration: none; border: 1px solid var(--line); border-radius: 6px; padding: 2px 9px; }
.chipref:hover { border-color: var(--lichen); }
a.xref { color: var(--lichen); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lichen) 45%, transparent); text-underline-offset: 2px; }
a.xref:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { font: 500 .85rem var(--f-ui); color: var(--ink); background: var(--stone); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; min-height: 32px; }
.btn:hover { border-color: var(--lichen); color: var(--lichen); }
code { font: .85em var(--f-mono); background: var(--stone); border-radius: 4px; padding: 0 4px; }
.rules { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rules th, .rules td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rules th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rules td.no { color: var(--muted); }
.tablewrap { overflow-x: auto; }
/* phone: each rule as a block with its own labels */
@container app (max-width: 639px) {
  .rules thead { display: none; }
  .rules tr { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .rules td { border: 0; padding: 0; }
  .rules td::before { content: attr(data-k); display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .rules td:first-child { font: 500 1.1rem var(--f-head); }
  .rules td:first-child::before { display: none; }
}

/* footer */
.foot { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; padding: 7px 16px calc(7px + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--line); font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.linkbtn { color: var(--lichen); text-underline-offset: 2px; }
.credit { flex-basis: 100%; font-size: .72rem; }
.credit a { color: inherit; }
.toast { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); background: var(--ink); color: var(--slab); font-size: .85rem; padding: 7px 14px; border-radius: 999px; z-index: 5; }

/* tablet: list | entry */
@container app (min-width: 640px) {
  .body { grid-template-areas: "rail rail" "list detail"; grid-template-columns: minmax(250px, .9fr) 1.4fr; }
  .detail { position: static; transform: none; visibility: visible; border-left: 1px solid var(--line); grid-area: detail; }
  .back { display: none; }
  .entry { padding: 22px 28px 32px; }
}
/* desktop: rail | list | entry */
@container app (min-width: 1000px) {
  .body { grid-template-areas: "rail list detail"; grid-template-columns: 200px minmax(280px, .9fr) 1.5fr; grid-template-rows: 1fr; }
  .rail { border-bottom: 0; border-right: 1px solid var(--line); padding: 16px; gap: 14px; overflow-y: auto; }
  .railhead { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .chips { flex-direction: column; align-items: stretch; }
  .chip { text-align: left; border-radius: 8px; display: flex; justify-content: space-between; }
  .alpha { flex-wrap: wrap; }
  .entry { padding: 30px 40px 40px; }
  .entry h2 { font-size: 2.8rem; }
}