/* Hobby Explorer 共享样式基础:两套底色的设计变量 + 最小的重置。每个页面先载入它,再载入自己的 style.css。
 *
 * 两套底色:
 *   纸(默认) —— 浏览、详情、门槛标尺、门槛交叉这些要读字的页面。
 *   夜(<html data-theme="night">) —— 给星图探索和推荐:要星空的神秘感,点得亮才看得见。
 * 两套共用同一组变量名(--bg / --ink / --ink2 / --ink3),页面样式只写变量,不写颜色字面量,
 * 换底色就不用改页面样式。
 *
 * 画布上的文字(canvas 的 ctx.font)读不到 CSS 变量,那几处在 JS 里写了同一组字体栈的字面量。 */

:root{
  /* 纸 */
  --bg:#faf8f4; --ink:#1a1815; --ink2:#5a544b; --ink3:#6f685e;
  --line:#e6dfd2; --card:#fffefb; --accent:#c2410c;
  --f-sans: ui-sans-serif, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-disp: Georgia, "Songti SC", "Times New Roman", serif;
  --f-num: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="night"]{
  /* 夜:墨黑底、暖白字,金色只用来点亮「当前」 */
  --bg:#05060b; --ink:#f3efe6; --ink2:#b3ada3; --ink3:#999187;
  --glass:rgba(14,16,24,.74); --edge:rgba(255,255,255,.08); --edge2:rgba(255,255,255,.18);
  --gold:#ffc46b; --accent:var(--gold);
  --f-disp: "Iowan Old Style", Georgia, "Songti SC", "Times New Roman", serif;
}

/* 场景内控件的底色；共享顶栏在自身作用域使用固定的石墨灰。 */
:root{ --nv-bg:color-mix(in srgb,var(--ink) 6%,transparent); --nv-edge:color-mix(in srgb,var(--ink) 8%,transparent);
       --nv-on:color-mix(in srgb,var(--ink) 13%,transparent); }
:root[data-theme="night"]{ --nv-bg:var(--glass); --nv-edge:var(--edge); --nv-on:rgba(255,196,107,.16); }
/* 指南和收藏:不在视图那一排里,放在搜索和语言切换中间 */
.util{display:flex;align-items:center;gap:2px;flex-shrink:0}
.util a{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;
        font-size:13.5px;color:var(--ink2);text-decoration:none;white-space:nowrap;
        transition:color .14s,background .14s}
.util a:hover{color:var(--ink)}
.util a[aria-current]{background:var(--nv-on);color:var(--ink)}
.util b{font-weight:600;font-size:11px;font-family:var(--f-num);color:var(--sv)}
.util b:empty{display:none}

*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:root[data-theme="night"] :focus-visible{outline-color:var(--gold)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.startup-loading{padding:28px 0;color:var(--ink2);font:15px/1.6 var(--f-sans)}
.startup-error{position:fixed;inset:var(--nav,64px) 0 0;z-index:19;display:grid;align-content:center;
  justify-items:start;gap:20px;padding:24px max(24px,calc((100vw - 42rem)/2));overflow:auto;
  background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-sans)}
.startup-error h1{margin:0;font:clamp(24px,4vw,36px)/1.25 var(--f-disp)}
.startup-error p{margin:0;color:var(--ink2)}
.startup-error button{padding:10px 18px;border:1px solid var(--accent);border-radius:8px;color:var(--accent)}

/* 全站共用的顶栏。外层只负责占住屏幕顶、量自己的宽度;
   里面三块：品牌与署名、中央搜索、通用工具。
   空间不足时搜索与工具各自换行，保留可用输入宽度。
   栏高由 nav.js 量进 --nav,画布和正文跟着让位。 */
.top{--ink:#f3f4f2;--ink2:#c4ccca;--ink3:#c4ccca;--accent:#edc499;--sv:#edc499;
     --nv-bg:#343b3d;--nv-edge:#50595b;--nv-on:#495254;
     position:fixed;left:0;right:0;top:0;z-index:20;pointer-events:none;
     background:#292e30;color:var(--ink);color-scheme:dark;border-bottom:1px solid #50595b;
     font-family:var(--f-sans);container-type:inline-size;container-name:chrome}
.top :focus-visible{outline-color:#edc499}
.top .util a{padding:7px 8px}
.top #ac{background:#292e30;color:var(--ink);border-color:var(--nv-edge)}
.top .ac button:hover,.top .ac button.on{background:var(--nv-on)}
.top .ac button span{color:var(--ink2)}
.site-credit{display:inline-flex;align-items:center;min-height:30px;font-size:13px;line-height:1.4;white-space:nowrap;color:var(--ink2);text-decoration:none}
.site-credit:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.logo{font-family:Georgia,'Songti SC',serif;font-size:22px;letter-spacing:-.02em;font-weight:400;flex-shrink:0;color:var(--ink);text-decoration:none}
.logo em{font-style:normal;color:var(--accent)}
.lang{display:flex;flex-shrink:0;border:1px solid var(--nv-edge);border-radius:999px;overflow:hidden}
.lang button,.lang a{white-space:nowrap;padding:7px 11px;font-size:13px;color:var(--ink2);text-decoration:none}
.lang button[aria-pressed="true"],.lang a[aria-current]{background:var(--nv-on);color:var(--ink)}
.bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand search tools";
  align-items:center;column-gap:28px;row-gap:8px;min-height:64px;
  padding:max(8px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left))}
.bar>*{pointer-events:auto;min-width:0}
.brand{grid-area:brand;display:flex;align-items:center;gap:10px;min-width:0}
.tools{grid-area:tools;display:flex;align-items:center;gap:10px;justify-content:flex-end;min-width:0}
.bar .qwrap{grid-area:search;position:relative;min-width:0;width:100%;max-width:640px;justify-self:center}
.bar #q{width:100%;min-width:0;padding:8px 14px;border-radius:999px;border:1px solid var(--nv-edge);background:var(--nv-bg);color:var(--ink);font:inherit;font-size:16px;outline:none}
.bar #q:focus{border-color:var(--accent)}
.bar #q::placeholder{color:var(--ink2);opacity:1}
@container chrome (max-width:46rem){
  .bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "search search";column-gap:14px}
  .bar .logo{font-size:20px}
}
@container chrome (max-width:34rem){
  .bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "search" "tools"}
  .brand{justify-content:space-between}
  .tools{justify-content:space-between;gap:6px}
  .util a{padding:7px 8px}
}
@media (pointer:coarse){
  .util a,.lang button,.lang a,.site-credit,.chip,.pill{min-height:44px}
  input,select,textarea{font-size:16px}
}

/* 收藏(shared/saved.js)。顶栏入口的计数在 .util b;按钮在详情标题旁,抽屉和独立页共用。
   --sv 是「已收藏」的颜色:纸底用强调色,夜底用金色 */
:root{ --sv:var(--accent) }
:root[data-theme="night"]{ --sv:var(--gold) }
.sv-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px 6px 10px;border-radius:999px;
        border:1px solid var(--nv-edge);font-size:13px;color:var(--ink2);white-space:nowrap;
        transition:color .14s,border-color .14s,background .14s}
.sv-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.sv-btn:hover{color:var(--sv);border-color:var(--sv)}
.sv-btn[aria-pressed="true"]{color:var(--sv);border-color:color-mix(in srgb,var(--sv) 45%,transparent);
        background:color-mix(in srgb,var(--sv) 9%,transparent)}
.sv-btn[aria-pressed="true"] svg{fill:currentColor}
.sv-btn:focus-visible{outline:2px solid var(--sv);outline-offset:2px}

.about-page{max-width:46rem;margin:40px auto 0;font-size:16px;line-height:1.8;color:var(--ink2)}
.about-page h1{font-family:var(--f-disp);font-size:clamp(32px,5vw,46px);font-weight:400;line-height:1.2;color:var(--ink);margin:0 0 24px}
.about-lead{font-size:19px;line-height:1.7;color:var(--ink)}
.about-page section{margin-top:36px}
.about-page h2{font-size:21px;font-weight:500;color:var(--ink);margin:0 0 12px}
.about-page p{margin:0 0 16px}
.about-page a{color:var(--accent);text-underline-offset:4px}

.ac{position:absolute;top:calc(100% + 6px);right:0;width:min(340px,78vw);z-index:60;background:var(--bg);border:1px solid var(--nv-edge);border-radius:12px;padding:6px}