/* hisame.live shared style (DRAFT 2026-11-12). EXACT COPY of 久远澪.com's /style.css (/var/www/9on0/style.css)
   with only the colours changed - keep it in step when that file changes.
   Colours from her setting poster: hair ash-taupe, poster slate #545d6c, card off-white #f0eceb,
   official colour 深杉木绿 #335e57 (accent only). html.dark = slate page with off-white cards (draft option). */
@font-face {
  font-family: "Heading Serif";
  /* 久远澪本周直播归档工具友情链接站动态微博录歌单日历视频鉴赏反馈更新上下志年月按大小其他录制说明置顶版本数据迁徙路径不存在 + ASCII */
  src: url("/fonts/serif.woff?v=1") format("woff");
  font-weight: 600; font-display: swap;
}
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/mono.woff?v=1") format("woff"); font-display: swap; }

:root {
  --bg: #eeebe7;                     /* page (warm grey-white, from her hair) */
  --surface: #faf9f7;                /* cards, windows */
  --card-solid: #faf9f7;             /* (same; older name used by the recordings page) */
  --card: rgba(250, 249, 247, .9);   /* cards over the floating picture */
  --line: #d8d3ce;                   /* borders of inputs, buttons */
  --line-soft: #e8e4e0;              /* hairlines between rows */
  --text: #262b33;
  --muted: #6e6864;
  --faint: #a29b96;
  --ink: #545d6c;                    /* icons: poster slate */
  --accent: #335e57;                 /* hover, selected, focus: 深杉木绿, her official colour */
  --accent-soft: #e1eae6;            /* soft highlight (today, a found note) */
  --shadow-rgb: 40 45 55;
  --r: 3px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: "Heading Serif", "Songti SC", "STSong", "SimSun", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
input::placeholder { color: var(--faint); }
/* select menus: our own arrow, 12px from the edge (the browser's sat too far right) */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%236e6864' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
}
/* footer: mono, lowercase English, a small ∞ (her hair clip / pin) at the very end */
footer { color: var(--faint); font: 11.5px/1.9 var(--mono); text-align: center; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent); }
footer .inf { display: block; width: 22px; height: 11px; margin: 16px auto 0; color: var(--faint); opacity: .7; }
/* Page titles "久远澪00 动态 Posts": the small English sat ~3px above the bottom of the Chinese
   (measured on every page, 2026-11-11). Lowered HALFWAY (user: level bottoms look too low, a smaller text
   sinks optically; the original 3px gap aligned with nothing): its bottom sits ~1.5px above the Chinese bottom.
   vertical-align, not position:relative: the latter moved its text-selection box 3px below the Chinese one. */
h1 small { vertical-align: -1.5px; font: 400 16px var(--mono); color: var(--faint); margin-left: 12px; letter-spacing: 0; }
@media (max-width: 560px) { h1 small { vertical-align: -1px; font-size: 14px; margin-left: 8px; } }   /* one size for every page (was 14px, 16-17px on phones) */
/* Breadcrumb at the top of a page: "久远澪00 / posts / bilibili" (user 2026-11-11, replaces "‹ 久远澪00").
   Two links, all one grey, no underline (user's idea): 久远澪00 = home; the current page's whole path
   ("posts / bilibili") = ONE link, so hovering any part highlights the whole path. Hover = darker colour only (no box, user).
   4px in from the left like the section labels (small text right at the edge looked like it stuck out). */
.crumbs { margin: 0 0 10px; padding-left: 4px; min-height: 28px; display: flex; align-items: center; flex-wrap: wrap; font: 12.5px/1.6 var(--mono); color: var(--muted); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { margin: 0 7px; }
/* Floating 9on0 picture behind the content (pages without a header picture). Moved by the page's script or
   /bounce.js. Hidden with reduced motion (user 2026-11-12: fine as it was). */
.bouncing-icon { position: fixed; top: 0; left: 0; width: 150px; height: auto; pointer-events: none; user-select: none; z-index: -1; will-change: transform; }
@media (max-width: 560px) { .bouncing-icon { width: 100px; } }
@media (prefers-reduced-motion: reduce) { .bouncing-icon { display: none; } }
/* Selected text: dark ink with light text, like her own ARG site (9on0.pages.dev), instead of browser blue */
::selection { background: var(--accent); color: var(--surface); }
/* Loading (/site.js, 2026-11-12): until the page's data is in, what follows its main data area and the footer stay
   invisible (no footer "blink" or jumps); then data + the rest fade in once. Lazy pictures fade in when loaded. */
html.js-wait [data-fade="main"] ~ *, html.js-wait footer, html.js-wait .controls { visibility: hidden; }   /* .controls: its counts arrive with the data (tabs could wrap) */
@keyframes site-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  [data-fade].ready, html.js-shown [data-fade="main"] ~ *, html.js-shown footer, html.js-shown .controls { animation: site-fade .25s ease-out; }
  html.imgfade img[loading="lazy"] { opacity: 0; transition: opacity .3s ease-out; }
  html.imgfade img[loading="lazy"].ok { opacity: 1; }
}
/* Sticky filter/search bar (.controls on 录播, 动态, 微博, 日历, 歌单, 数据): a background ONLY while it is stuck at the
   top with content scrolling under it (/site.js sets .stuck). In its normal place it has none, so the floating
   picture passing behind never reveals the bar's edges (user 2026-11-12). Without the script it keeps the
   pages' own background (html.js-sticky is set by /site.js). */
html.js-sticky .controls { transition: background-color .15s; }
html.js-sticky .controls:not(.stuck) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.js-sticky .controls.stuck { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- DARK OPTION (draft 2026-11-12, html.dark via ?t=dark): the poster's slate as the page, off-white cards on it.
   Cards keep the light colours (dark text on off-white); only what sits straight on the page turns light. ---- */
html.dark {
  --bg: #535c6b;
  --surface: #f0eceb; --card-solid: #f0eceb; --card: rgba(240, 236, 235, .96);
  --line: #d3cdc9; --line-soft: #ddd7d3;
  --muted: #6b6561; --faint: #9a938e;
  --accent-soft: #dde6e2;
  --shadow-rgb: 20 25 35;
  /* text straight on the slate page */
  --p-text: #f3f0ee; --p-muted: #c9cdd4; --p-faint: #9ea5b0; --p-line: #6a7382;
}
html.dark body { color: var(--p-text); }
html.dark h1, html.dark .wrap > h2, html.dark h2.month { color: var(--p-text); }
html.dark h1 small, html.dark .wrap > h2 i, html.dark .wrap > h2 small, html.dark h2.month em,
html.dark header p, html.dark .uptime, html.dark footer { color: var(--p-faint); }
html.dark h2.month span, html.dark .crumbs, html.dark footer a, html.dark .uptime b { color: var(--p-muted); }
html.dark .crumbs a:hover, html.dark footer a:hover { color: var(--p-text); }
html.dark footer .inf { color: #c9b27f; opacity: .9; }   /* gold key */
/* live row + 本周直播 button (home) */
html.dark .live { color: var(--p-text); border-bottom-color: var(--p-line); }
html.dark .live .when, html.dark .live .nums { color: var(--p-muted); }
html.dark .live .nums em { color: var(--p-text); }
html.dark .live .nums .sep, html.dark .live .lgo, html.dark .live .dot { color: var(--p-faint); }
html.dark .live .dot { background: var(--p-faint); }
html.dark .live:hover .lgo, html.dark .live:hover .nums { color: var(--p-text); }
html.dark .sched-btn, html.dark .sched-btn span { color: var(--p-text); border-color: var(--p-text); }
html.dark .sched-btn:hover { background: var(--p-text); color: var(--bg); }
html.dark .sched-btn:hover span { color: var(--bg); }
/* recordings: the bar line, the stuck bar, empty/error text */
html.dark .controls { border-bottom-color: var(--p-line); }
html.dark.js-sticky .controls.stuck { background: var(--bg); }
html.dark .empty { color: var(--p-muted); }
html.dark .error { color: #f2b8a8; }
html.dark ::selection { background: var(--surface); color: var(--text); }