/* Unified palettes. Component styles consume these semantic tokens. */
:root,
:root[data-theme="paper"] {
  --page-bg: #fafafa;
  --surface: #ffffff;
  --surface-soft: #f3f4f2;
  --surface-raised: #ffffff;
  --text: #2f3332;
  --text-strong: #171a19;
  --muted: #707673;
  --faint: #9ba09d;
  --border: #dedfdb;
  --border-strong: #b9bdb9;
  --accent: #6870a8;
  --accent-hover: #4f578f;
  --accent-soft: #e8e9f3;
  --accent-contrast: #ffffff;
  --code-bg: #f0f2ef;
  --code-border: #d9ddd9;
  --quote: #59645f;
  --shadow: rgba(30, 39, 35, .12);
  --overlay: rgba(15, 22, 19, .72);
  --selection: #dcdff0;
  --pill-shell: #f2f2f7;
  --pill-hover: #e8e9f1;
  --pill-active: #737aa7;
  --pill-active-text: #ffffff;
  --heatmap-empty: #eef0f5;
  --heatmap-active: #7078aa;
  --background-card-color: var(--surface);
  --background-card-border-color: var(--border);
  --text-info-color: var(--muted);
  --exercise-text-highlight-color: var(--accent);
  --hux-clip-bg: var(--surface);
  --hux-clip-muted: var(--muted);
  --hux-clip-border: var(--border);
  --hux-clip-accent: var(--accent);
}

:root[data-theme="night"] {
  --page-bg: #17191d;
  --surface: #202329;
  --surface-soft: #272b31;
  --surface-raised: #2b2f36;
  --text: #d7d9dc;
  --text-strong: #f1f2f3;
  --muted: #a2a7ae;
  --faint: #777e87;
  --border: #383d45;
  --border-strong: #505761;
  --accent: #72c7a5;
  --accent-hover: #98ddc1;
  --accent-soft: #263d35;
  --accent-contrast: #12231d;
  --code-bg: #111318;
  --code-border: #383e47;
  --quote: #b5bac0;
  --shadow: rgba(0, 0, 0, .38);
  --overlay: rgba(0, 0, 0, .8);
  --selection: #315d4d;
  --pill-shell: #23272c;
  --pill-hover: #2c3335;
  --pill-active: #548f78;
  --pill-active-text: #eef8f3;
  --heatmap-empty: #252a2f;
  --heatmap-active: #69b493;
}

:root[data-theme="sepia"] {
  --page-bg: #eef0f2;
  --surface: #f9fafb;
  --surface-soft: #e2e5e8;
  --surface-raised: #ffffff;
  --text: #3d4247;
  --text-strong: #202428;
  --muted: #687078;
  --faint: #959ca3;
  --border: #d0d5d9;
  --border-strong: #abb2b8;
  --accent: #6f7b86;
  --accent-hover: #4f5b65;
  --accent-soft: #dde2e6;
  --accent-contrast: #ffffff;
  --code-bg: #e5e8eb;
  --code-border: #cbd1d6;
  --quote: #596168;
  --shadow: rgba(38, 45, 51, .13);
  --overlay: rgba(24, 29, 33, .76);
  --selection: #d7dde2;
  --pill-shell: #e7eaed;
  --pill-hover: #dce1e5;
  --pill-active: #78848e;
  --pill-active-text: #ffffff;
  --heatmap-empty: #e3e6e9;
  --heatmap-active: #74808a;
}

:root[data-theme="mist"] {
  --page-bg: #f8f2ef;
  --surface: #fffaf8;
  --surface-soft: #f2e5e0;
  --surface-raised: #fffdfc;
  --text: #4a3d39;
  --text-strong: #2d2421;
  --muted: #7e6b64;
  --faint: #a6928b;
  --border: #e1d1cb;
  --border-strong: #c2aaa1;
  --accent: #b66f61;
  --accent-hover: #8f5147;
  --accent-soft: #f2ddd7;
  --accent-contrast: #fffaf8;
  --code-bg: #f0e5e1;
  --code-border: #ddcbc5;
  --quote: #735f58;
  --shadow: rgba(94, 57, 48, .13);
  --overlay: rgba(48, 32, 28, .74);
  --selection: #f0cfc5;
  --pill-shell: #f4e8e3;
  --pill-hover: #ecd9d2;
  --pill-active: #bd796b;
  --pill-active-text: #ffffff;
  --heatmap-empty: #f0e5e1;
  --heatmap-active: #b77365;
}

html { background: var(--page-bg); transition: background-color .2s ease; }
body { background: var(--page-bg); color: var(--text); transition: background-color .2s ease, color .2s ease; }
html[data-font="wenkai"] body { font-family: "LXGW WenKai Screen", "KaiTi", serif; }
html[data-font="zhuque"] body { font-family: "Zhuque Fangsong", FangSong, "STFangsong", serif; font-weight: 400; text-shadow: 0 0 0.15px currentColor;}
html[data-font="kinghwa"] body { font-family: "KingHwa_OldSong", "Songti SC", SimSun, serif; }
html[data-font="zhisong"] body { font-family: "LXGW Neo ZhiSong", "Songti SC", SimSun, serif; font-weight: 400; text-shadow: 0 0 0.15px currentColor;}
::selection { background: var(--selection); color: var(--text-strong); }
a { color: var(--text-strong); border-color: var(--border-strong); }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4, h5, h6, strong, th { color: var(--text-strong); }
hr, table, th, td { border-color: var(--border); }
blockquote { color: var(--quote); }
blockquote::before { color: var(--accent); }
code { background: var(--code-bg); color: var(--text-strong); }
pre, pre code, .highlight, .hljs { background: var(--code-bg) !important; color: var(--text) !important; border-color: var(--code-border); box-shadow: none; }
#TableOfContents, .tabs, .panel, .input:checked + .label { background: var(--surface); color: var(--text); }
.label { background: var(--surface-soft); color: var(--muted); }
.label:hover { background: var(--accent-soft); color: var(--text-strong); }
input, textarea, select, button { color: var(--text); }
input, textarea, select { background: var(--surface); border-color: var(--border); }
img[src$="#border"] { border-color: var(--border); box-shadow: 5px 5px 12px var(--shadow); }

/* Markdown links keep the original marker-like underline, recoloured per palette. */
.post-content a:not(:has(img)),
.main > p a:not(:has(img)),
.main > ul a:not(:has(img)),
.main > ol a:not(:has(img)),
.main > blockquote a:not(:has(img)) {
  color: var(--accent-hover);
  background-image: linear-gradient(
    transparent 0%,
    transparent calc(50% - 9px),
    var(--accent-soft) calc(50% - 9px),
    var(--accent-soft) 100%
  );
}
.post-content a:not(:has(img)):hover,
.main > p a:not(:has(img)):hover,
.main > ul a:not(:has(img)):hover,
.main > ol a:not(:has(img)):hover,
.main > blockquote a:not(:has(img)):hover {
  color: var(--text-strong);
  background-image: linear-gradient(
    transparent 0%,
    transparent calc(50% - 9px),
    var(--accent-soft) calc(50% - 9px),
    var(--accent-soft) 100%
  );
}

/* Menu palette control */
.palette-menu { list-style: none; }
.palette-trigger {
  display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  cursor: pointer; transform: rotate(var(--palette-rotation, 0deg));
  transition: color .2s ease, background-color .2s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.palette-trigger svg { width: 1.2rem; height: 1.2rem; display: block; transform: rotate(-25deg); }
.palette-trigger:hover { background: var(--accent-soft); color: var(--accent-hover); }
.palette-trigger:focus-visible { outline: 1px dashed var(--accent); outline-offset: 3px; }

/* The sidebar poem doubles as an intentionally quiet font switch. */
.masthead .tagline { cursor: pointer; }
.masthead .tagline:focus-visible { outline: 1px dashed var(--accent); outline-offset: 4px; }

/* Cards, lists, media pages and archive controls */
.post-preview, .db-card, .archive-card, .book-card, .movie-card, .runCard, .statsCard, .calendarCard,
.insightCard, .hux-clip-card, [class*="cardContainer"] { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: 0 1px 5px var(--shadow); }
.post-preview--date, .rating-average, .iibjPt, .runName, .runDate, .distUnit, .pagetitle,
.ttName, .ttNum small, .detailHeader, .detailLabel, .datafrom, .hugo-audio-shortcode .audio-caption { color: var(--muted) !important; }
.scroll-btn, .archive-header, .filter-header { color: var(--muted); }
.filter-btn.active, .archive-filter.active, .exercise-tabs .active { background: var(--accent) !important; color: var(--accent-contrast) !important; }
.tag-span,
.datacont .tag-span,
.bb-cont .tag-span {
  color: var(--accent-hover) !important;
  background: color-mix(in srgb, var(--accent) 4%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
}
.tag-span.tag-filter:hover,
.datacont .tag-span:hover,
.bb-cont .tag-span:hover {
  color: var(--accent-hover) !important;
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

/* Shared year selector across BB, archives and exercise. */
#memos-year-nav, #archive-year-nav, #year-nav-container, #month-nav-container, .controlsArea {
  background: var(--page-bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 4px var(--shadow);
}
#memos-year-nav .button, #archive-year-nav .button, #year-nav .button {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid transparent;
}
#memos-year-nav .button:hover, #archive-year-nav .button:hover, #year-nav .button:hover {
  background: var(--pill-hover) !important;
  color: var(--text-strong) !important;
}
#memos-year-nav .button.selected, #archive-year-nav .button.selected, #year-nav .button.selected {
  background: var(--pill-active) !important;
  color: var(--pill-active-text) !important;
  border-color: var(--pill-active) !important;
}
#month-nav-container .button, .controlsArea .filterPill {
  background: transparent !important;
  color: var(--muted) !important;
}
#month-nav-container .button:hover, .controlsArea .filterPill:hover:not(.activePill) {
  background: var(--pill-hover) !important;
  color: var(--text-strong) !important;
}
#month-nav-container .button.selected, .controlsArea .filterPill.activePill {
  background: var(--pill-active) !important;
  color: var(--pill-active-text) !important;
}

/* Emaction is a web component; variables cross its shadow-DOM boundary. */
emoji-reaction {
  --start-smile-border-color: var(--border);
  --start-smile-border-color-hover: var(--accent);
  --start-smile-bg-color: var(--surface-soft);
  --start-smile-svg-fill-color: var(--muted);
  --reaction-got-not-reacted-bg-color: var(--surface);
  --reaction-got-not-reacted-bg-color-hover: var(--accent-soft);
  --reaction-got-not-reacted-border-color: var(--border);
  --reaction-got-not-reacted-text-color: var(--text);
  --reaction-got-reacted-bg-color: var(--accent-soft);
  --reaction-got-reacted-bg-color-hover: var(--surface-soft);
  --reaction-got-reacted-border-color: var(--accent);
  --reaction-got-reacted-text-color: var(--accent-hover);
  --reaction-available-popup-bg-color: var(--surface-raised);
  --reaction-available-popup-border-color: var(--border);
  --reaction-available-popup-box-shadow: 0 4px 16px var(--shadow);
  --reaction-available-emoji-reacted-bg-color: var(--accent-soft);
  --reaction-available-emoji-bg-color-hover: var(--surface-soft);
}

/* Clip defines local defaults in its template; reconnect them to the active palette. */
html #hux-clip-root.hux-clip-root {
  --hux-clip-border: var(--border);
  --hux-clip-muted: var(--muted);
  --hux-clip-bg: color-mix(in srgb, var(--surface) 58%, transparent);
  --hux-clip-accent: var(--accent);
  --hux-clip-accent-soft: var(--accent-soft);
}
#hux-clip-root .hux-clip-date { color: var(--muted) !important; }
#hux-clip-root .hux-clip-meta-tag {
  color: var(--accent-hover) !important;
  background: var(--accent-soft) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
}
#hux-clip-root .hux-clip-search:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
#hux-clip-root .hux-clip-search:focus {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--border)) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
#hux-clip-root .hux-clip-grid.is-timeline .hux-clip-card::before {
  background: var(--accent) !important;
  border-color: var(--page-bg) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 1px 4px var(--shadow) !important;
}
#hux-clip-root .hux-clip-grid.is-timeline .hux-clip-card:hover::before,
#hux-clip-root .hux-clip-grid.is-timeline .hux-clip-card:focus-within::before {
  background: var(--accent-hover) !important;
  border-color: var(--page-bg) !important;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--shadow) !important;
}

/* Timeline / memo page */
.timeline ul li { background: var(--border-strong) !important; }
.timeline ul li::after { background: var(--accent) !important; outline-color: var(--page-bg) !important; }
.timeline ul li .datatime { background: var(--accent) !important; color: var(--accent-contrast) !important; }
.load button,
#load .load-btn,
.bb-load button,
button.button-load {
  background: var(--surface-soft) !important;
  color: var(--accent-hover) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 4px var(--shadow) !important;
  font-style: normal;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.load button:hover,
#load .load-btn:hover,
.bb-load button:hover,
button.button-load:hover {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 3px 10px var(--shadow) !important;
  transform: translateY(-1px);
}
.load button:focus-visible,
#load .load-btn:focus-visible,
.bb-load button:focus-visible,
button.button-load:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.load button:disabled,
#load .load-btn:disabled,
.bb-load button:disabled,
button.button-load:disabled,
button.button-load.noclick {
  background: var(--surface-soft) !important;
  color: var(--faint) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  transform: none;
  cursor: default;
}
.timeline ul li p, .bb-timeline p { color: var(--text) !important; }
.bb-source a { background: var(--surface-soft) !important; color: var(--text-strong) !important; }
#bber .bb-cont blockquote,
#bber blockquote {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
  color: var(--quote) !important;
  border-left: 4px solid color-mix(in srgb, var(--accent) 62%, var(--border)) !important;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
#bber .bb-cont blockquote::before,
#bber blockquote::before {
  color: var(--accent) !important;
}
#bber .bb-cont blockquote p,
#bber blockquote p {
  color: var(--quote) !important;
}
#bber .bb-cont blockquote a,
#bber blockquote a {
  color: var(--accent-hover) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border)) !important;
}

/* Exercise calendar contains generated inline colours, so override them here. */
.runTooltip, .runDetailCard { background: color-mix(in srgb, var(--surface-raised) 95%, transparent) !important; border-color: var(--border) !important; color: var(--text) !important; }
.runDetailCard .detailValue, .dateNum, .monthlyInsights strong, .calendarCard strong { color: var(--text-strong) !important; }
.monthlyInsights > div, #calendar-board-container > div, #global-stats > div { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
#global-stats > div [style*="color: #333"], #calendar-board-container > div [style*="color: #333"] { color: var(--text-strong) !important; }
#global-stats > div [style*="color: #999"], #calendar-board-container > div [style*="color: #999"],
#calendar-board-container > div [style*="color: #bbb"] { color: var(--muted) !important; }
.map-placeholder { background: var(--surface-soft) !important; border: 1px solid var(--border) !important; border-radius: 25px; padding: 3px; box-shadow: 0 2px 10px var(--shadow); }
#map-wrapper, #mapbox-container { background: var(--surface-soft) !important; border-color: var(--border) !important; }
#map-wrapper { box-shadow: inset 0 0 0 1px var(--border); }

.dayCell:not(.hasRun) .dateNum { color: var(--faint) !important; }
.shareBtn { background: var(--surface-raised) !important; color: var(--muted) !important; }

/* Comments and third-party widgets */
.tk-comments, .tk-submit, .tk-comment, .tk-content, .OwO-body { color: var(--text) !important; }
.el-input__inner, .el-textarea__inner, .el-button, .tk-meta-input .el-input-group__prepend,
.OwO .OwO-body, .OwO .OwO-body .OwO-bar, .OwO .OwO-body .OwO-items .OwO-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
.el-loading-mask { background: var(--page-bg) !important; }
.tk-action-count, .tk-nick, .tk-time, .tk-extras { color: var(--muted) !important; }

/* Footprint map chrome; map tiles and photographs deliberately stay untouched. */
.footprint-map, .footprint-map__canvas { background: var(--surface-soft) !important; border-color: var(--border) !important; }
.footprint-map__custom-controls { background: var(--surface-raised) !important; box-shadow: 0 2px 10px var(--shadow) !important; }
.footprint-map__custom-controls button { background: var(--surface-raised) !important; color: var(--text) !important; border-color: var(--border) !important; }
.footprint-map__loading, .footprint-map__error, .footprint-map__filters, .footprint-popup { background: color-mix(in srgb, var(--surface-raised) 92%, transparent) !important; color: var(--text) !important; }
.footprint-map__filter-btn, .footprint-popup__meta { color: var(--muted) !important; }
.footprint-map__filter-btn.is-active, .footprint-popup__link { background: var(--accent) !important; color: var(--accent-contrast) !important; }
.footprint-photo-viewer { background: var(--overlay); }

.back-to-top { color: var(--muted); border-color: var(--border-strong); }
.back-to-top:hover { color: var(--accent-hover); border-color: var(--accent); }
.back-to-top:focus-visible { outline-color: var(--accent); }

@media screen and (max-width: 960px) {
  #menu-check:checked ~ ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .masthead .menu li, .masthead .menu li:first-child { border: 0; }
  .masthead .menu li, .masthead .menu li:first-child { display: block; margin: 0; min-width: 0; }
  .masthead .menu a { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 2.35rem; background: var(--surface-soft); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 6px; line-height: 1.2; text-align: center; white-space: nowrap; }
  .masthead .menu .active a { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); font-weight: 400 !important; }
  .palette-menu { display: flex !important; align-items: center; justify-content: center; margin: 0; vertical-align: middle; }
  .palette-trigger { width: 2.25rem; height: 2.25rem; color: var(--text-strong); border: 1px solid var(--border-strong); }
}

@media (prefers-reduced-motion: reduce) { html, body { transition: none; } }
@media print { .palette-menu { display: none !important; } html, body { background: #fff !important; color: #000 !important; } }

/* Focused visual polish: navigation, reading content, media and shared cards. */

/* 1. Quieter desktop navigation with a clearer current section. */
.masthead .menu a {
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  border-bottom: 0;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.masthead .menu a:hover {
  color: var(--text-strong);
}

.masthead .menu .active > a {
  color: var(--accent-hover);
  font-weight: 700;
  box-shadow: none;
}

/* 3. Article headings follow the reading flow; H2 gets a quiet divider. */
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  text-align: left;
  text-wrap: balance;
}

.post-content h2 {
  padding-top: .85em;
  border-top: 1px solid var(--border);
}

/* 4. Consistent, restrained media treatment. */
.post-content img:not(.emoji):not(.tk-avatar-img),
figure img {
  border-radius: 7px;
}

figure figcaption {
  width: auto;
  max-width: 34em;
  color: var(--muted);
  border-color: var(--border);
}

/* 5. BB and article-preview cards share one surface language. */
.bb-timeline .bb-item,
.post-preview {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow) 58%, transparent) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.post-preview--image {
  border-top-right-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}

@media (hover: hover) and (pointer: fine) {
  .bb-timeline .bb-item:hover,
  .post-preview:hover {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 72%, transparent) !important;
    transform: translateY(-1px);
  }
}

/* 6. Hover-only image previews must not widen narrow/touch pages. */
@media screen and (max-width: 600px) {
  .bb-image-preview,
  .post-content .post-image-preview,
  .bb-image-trigger[data-tooltip]::after,
  .post-content .post-image-trigger[data-tooltip]::after {
    display: none !important;
  }
}