/* Shared tokens and components for all four styles. Each style overrides what it needs.
   Responsive system
   ─ tiers (max-width): xs ≤ 400 · sm ≤ 600 · md ≤ 900 · lg ≤ 1200 · xl > 1200 · xxl ≥ 1600
   ─ input: (pointer: coarse) enlarges tap targets; (hover: none) removes hover-only affordances
   ─ --topbar-h is measured by app.js (sticky offsets use it); --pad is the page gutter; --sab/--sal/--sar are safe-area insets
*/
:root {
  --font-sans: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Songti TC", "Noto Serif TC", "PMingLiU", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;
  /* day palette: cream paper, ink, her green */
  --bg: #f6f1e8; --bg-2: #efe8db; --bg-3: #e6dccb; --card: #fffdf9; --ink: #2b2620; --ink-2: #6b6259; --ink-3: #9a9087; --line: #e2d8c8;
  --accent: #3f6b4f; --accent-2: #7fa98b; --accent-soft: #dfeadf; --warm: #b5573b; --warm-soft: #f3e2d8; --gold: #c9a24d;
  --shadow: 0 1px 2px rgba(43,38,32,.06), 0 8px 24px rgba(43,38,32,.08);
  --radius: 14px; --radius-s: 8px;
  /* layout tokens */
  --topbar-h: 54px; --pad: 20px; --tap: 34px; --chip-h: 30px;
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
[data-theme="night"] {
  --bg: #17130f; --bg-2: #1f1a15; --bg-3: #2a231c; --card: #211b16; --ink: #eae2d6; --ink-2: #b7ab9c; --ink-3: #7d7368; --line: #33291f;
  --accent: #8dbb9a; --accent-2: #5f8a6d; --accent-soft: #24332a; --warm: #d98a6b; --warm-soft: #3a2a22; --gold: #d8b45f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (max-width: 600px) { :root { --pad: 14px; } }
@media (max-width: 400px) { :root { --pad: 12px; } }
@media (pointer: coarse) { :root { --tap: 40px; --chip-h: 36px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); line-height: 1.6; font-size: 15px; transition: background .25s, color .25s; overflow-x: hidden; padding-left: var(--sal); padding-right: var(--sar); }
@media (min-width: 1600px) { body { font-size: 16px; } }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
input, select { font: inherit; color: inherit; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::selection { background: var(--accent-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px var(--pad); min-height: var(--topbar-h); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--line); }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .01em; color: var(--ink); flex: none; min-height: var(--tap); min-width: var(--tap); }
.topbar .brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.topbar .brand small { color: var(--ink-3); font-weight: 400; }
.topbar nav { display: flex; gap: 2px; margin-left: 6px; min-width: 0; }
.topbar nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px; border-radius: 999px; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
.topbar nav a:hover { background: var(--bg-2); text-decoration: none; }
.topbar nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.topbar .spacer { flex: 1; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--tap); min-width: var(--tap); padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 13px; transition: background .15s, color .15s; flex: none; }
.iconbtn:hover { background: var(--bg-2); color: var(--ink); }
.iconbtn svg { width: 16px; height: 16px; }
.iconbtn .lb.short { display: none; }
@media (max-width: 720px) {
  .topbar { gap: 6px; }
  .topbar nav { overflow-x: auto; scrollbar-width: none; flex: 1; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 0 9px; font-size: 13px; }
  .topbar .brand small, .topbar .spacer { display: none; }
  .topbar .brand { gap: 6px; font-size: 14px; }
  .iconbtn .lb.full { display: none; }
  .iconbtn .lb.short { display: inline; }
}

/* controls (search + filters) */
.controls { display: flex; flex-direction: column; gap: 10px; }
.searchrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search { flex: 1; min-width: min(200px, 100%); display: flex; align-items: center; gap: 8px; height: max(40px, var(--tap)); padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 16px; }
@media (min-width: 601px) { .search input { font-size: 14.5px; } } /* 16px on phones prevents iOS zoom-on-focus */
.search input::placeholder { color: var(--ink-3); }
.daterange { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.daterange input[type="date"] { height: var(--tap); padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); font-size: 13px; color: var(--ink); min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 13px; white-space: nowrap; transition: all .15s; }
.chip:hover { border-color: var(--accent-2); color: var(--ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="night"] .chip.on { color: #10170f; }
.chip .n { font-size: 11px; opacity: .7; }
.chip.warm.on { background: var(--warm); border-color: var(--warm); }
.chips .label { font-size: 12px; color: var(--ink-3); margin-right: 2px; text-transform: uppercase; letter-spacing: .06em; }
.facets { display: flex; flex-direction: column; gap: 6px; }
.facets details { border-top: 1px dashed var(--line); padding-top: 6px; }
.facets summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 6px; min-height: var(--chip-h); }
.facets summary::-webkit-details-marker { display: none; }
.facets summary::before { content: '▸'; color: var(--ink-3); font-size: 11px; transition: transform .15s; }
.facets details[open] summary::before { transform: rotate(90deg); }
.facets summary .cnt { color: var(--accent); font-weight: 600; }
.results-count { font-size: 12.5px; color: var(--ink-3); }
.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
/* collapsible controls on small screens: search + toggle stay, everything else folds */
.controls .ftoggle { display: none; position: relative; }
.controls .ftoggle .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); display: none; }
.controls .ftoggle.on .dot { display: block; }
.controls .ftoggle .caret { display: inline-block; transition: transform .2s; font-size: 11px; }
.controls.open .ftoggle .caret { transform: rotate(180deg); }
/* active-filter strip */
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.active-filters .label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.chip.rm { background: var(--accent-soft); border-color: transparent; color: var(--accent); padding-right: 8px; }
.chip.rm .x { font-size: 15px; line-height: 1; opacity: .7; }
.chip.rm:hover { background: var(--warm-soft); color: var(--warm); }
.chip.clear { border-style: dashed; }
.controls .ftoggle .cnt { font-weight: 600; color: var(--accent); }
.controls .ftoggle .cnt:not(:empty)::before { content: ' · '; font-weight: 400; color: var(--ink-3); }
@media (max-width: 900px) {
  .controls.collapsible .ftoggle { display: inline-flex; }
  .controls.collapsible:not(.open) .daterange, .controls.collapsible:not(.open) .ctl-body { display: none; }
}

/* post pieces */
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.post-text .mention { color: var(--accent); font-weight: 500; }
.post-text .stk { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin: 0 1px; border-radius: 4px; }
.spec { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg-2); font-size: 13.5px; }
.spec .row { display: grid; grid-template-columns: minmax(64px, auto) 1fr; gap: 10px; padding: 2px 0; }
.spec .k { color: var(--ink-3); white-space: nowrap; }
.spec .v { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .spec { padding: 8px 10px; font-size: 13px; } .spec .row { grid-template-columns: minmax(56px, auto) 1fr; gap: 8px; } }
.media { display: grid; gap: 4px; margin-top: 10px; border-radius: var(--radius-s); overflow: hidden; }
.media.n1 { grid-template-columns: 1fr; } .media.n2 { grid-template-columns: 1fr 1fr; } .media.n3 { grid-template-columns: 2fr 1fr 1fr; } .media.n3 .m:first-child { grid-row: span 2; }
.media.n4, .media.nx { grid-template-columns: repeat(2, 1fr); }
.media .m { position: relative; aspect-ratio: 4/3; background: var(--bg-3); cursor: zoom-in; overflow: hidden; }
.media.n1 .m { aspect-ratio: auto; max-height: 560px; }
.media .m img, .media .m video { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.media.n1 .m img { object-fit: contain; max-height: 560px; background: var(--bg-3); }
.media .m:hover img { transform: scale(1.02); }
.media .m .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; font-weight: 600; }
.media .m .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 34px; text-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; }
@media (max-width: 400px) { .media.n3 { grid-template-columns: 1fr 1fr; } .media.n3 .m:first-child { grid-row: auto; grid-column: span 2; } .media.n1 .m, .media.n1 .m img { max-height: 70vh; } }
.stats { display: flex; gap: 10px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }
.stats span { display: inline-flex; gap: 4px; align-items: center; }
.stats b { color: var(--ink-2); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tag[data-facet] { cursor: pointer; }
.tag.o { background: var(--warm-soft); color: var(--warm); }
.tag.g { background: var(--bg-3); color: var(--ink-2); }
@media (pointer: coarse) { .tag { padding: 5px 10px; font-size: 12px; } }
.tr-toggle { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.tr-toggle button { color: var(--accent); }
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--bg-3); color: var(--ink-2); white-space: nowrap; }
.badge.tod-morning { background: #fbe9c6; color: #7a5410; } .badge.tod-noon { background: #dfeadf; color: #2f5a3f; } .badge.tod-afternoon { background: #f3e2d8; color: #8a3f27; } .badge.tod-night { background: #d9dcec; color: #3a3f6d; }
[data-theme="night"] .badge.tod-morning { background: #3d2f14; color: #e5c37b; } [data-theme="night"] .badge.tod-noon { background: #24332a; color: #9ccaa8; } [data-theme="night"] .badge.tod-afternoon { background: #3a2a22; color: #e6a98f; } [data-theme="night"] .badge.tod-night { background: #262a44; color: #b1b7e6; }

/* comments */
.comments { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.comments .c { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 8px 0; }
.comments .c.lvl1 { margin-left: 38px; }
.comments .c .av { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-2); overflow: hidden; }
.comments .c.own .av { background: var(--accent); color: #fff; }
.comments .c .who { font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.comments .c .who a { overflow-wrap: anywhere; }
.comments .c .who small { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.comments .c .who .own-badge { font-size: 11px; background: var(--accent-soft); color: var(--accent); padding: 0 6px; border-radius: 999px; }
.comments .c .body { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.comments .c .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.comments .c .media { margin-top: 6px; max-width: 320px; }
.comments .more-btn { margin-top: 6px; font-size: 13px; color: var(--accent); min-height: var(--chip-h); }
.comments .ctop { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.comments .ctop b { color: var(--ink); font-weight: 600; }
@media (max-width: 400px) { .comments .c.lvl1 { margin-left: 20px; } .comments .c { gap: 8px; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10,8,6,.92); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 0 var(--sar) var(--sab) var(--sal); touch-action: pan-y; }
.lightbox.open { display: flex; }
.lightbox img, .lightbox video { max-width: 94vw; max-height: 84vh; max-height: 84dvh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox .lb-bar { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: calc(14px + var(--sar)); display: flex; gap: 8px; }
.lightbox .lb-bar button, .lightbox .lb-nav button { color: #fff; background: rgba(255,255,255,.14); border-radius: 999px; width: 44px; height: 44px; font-size: 20px; display: grid; place-items: center; }
.lightbox .lb-nav { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; pointer-events: none; }
.lightbox .lb-nav button { pointer-events: auto; }
.lightbox .lb-cap { color: #ddd; font-size: 13px; margin-top: 10px; }
@media (max-width: 600px), (max-height: 500px) {
  .lightbox img, .lightbox video { max-width: 100vw; max-height: 76vh; max-height: 76dvh; border-radius: 0; }
  .lightbox .lb-nav { inset: auto 0 calc(14px + var(--sab)) 0; justify-content: center; gap: 28px; }
  .lightbox .lb-cap { position: absolute; bottom: calc(66px + var(--sab)); }
}

/* utilities */
.hide { display: none !important; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--card); color: var(--ink-2); }
.keys-hint { display: flex; }
@media (hover: none) { .keys-hint { display: none !important; } }
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }