/* Indicator encyclopedia pages (scripts/indicators.mjs). Same palette and fonts as the site (style.css :root). */
:root{--bg:#041823;--panel:#092736;--panel2:#0c3040;--gold:#dfc394;--text:#eef3f3;--muted:#a3b6bc;--line:#24414c;--gradient:linear-gradient(115deg,#9d7440,#e8d3ac 45%,#bd955e 75%,#f4e2be)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 'Manrope','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.skipLink{position:absolute;left:-999px;top:8px;background:var(--gold);color:#041823;padding:6px 12px;border-radius:6px;z-index:50}
.skipLink:focus{left:12px}
.indTop{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;height:72px;padding:0 4%;border-bottom:1px solid var(--line);background:#041823f2;backdrop-filter:blur(14px)}
.indTop .brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:-.5px;white-space:nowrap}
.indTop .brand img{width:32px;height:32px;object-fit:contain}
.indTop nav{display:flex;gap:24px;font-size:15px;color:var(--muted);overflow:hidden}
.indTop nav a{white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.indTop nav a:hover{color:var(--text)}
.indTop nav a.on{color:var(--gold);border-bottom-color:var(--gold)}
.navend{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:14px}
.navend .lang{color:var(--muted)}
.cta{display:inline-block;background:var(--gradient);color:#1b1408;font-weight:700;border-radius:8px;padding:9px 18px;white-space:nowrap}
.indGrid{display:grid;grid-template-columns:200px minmax(0,1fr) 280px;gap:40px;max-width:1360px;margin:0 auto;padding:28px 4% 64px}
.indGridIndex{grid-template-columns:minmax(0,860px);justify-content:center}
.indToc,.indSide{position:sticky;top:96px;align-self:start}
.indToc h2{font-size:13px;letter-spacing:2px;color:var(--gold);margin:8px 0 10px;font-weight:700}
.indToc ol,.indToc ul{list-style:none;margin:0 0 26px;padding:0 0 0 12px;border-left:2px solid var(--line)}
.indToc li{padding:5px 0;font-size:14.5px;color:var(--muted)}
.indToc li a:hover{color:var(--text)}
.indToc li span[aria-current]{color:var(--gold);font-weight:700}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:6px}
.crumbs a:hover{color:var(--gold)}
.indMain h1{font-size:clamp(28px,3.2vw,38px);line-height:1.3;margin:0 0 12px;letter-spacing:-.5px}
.lead{font-size:17.5px;color:#cfdcdf;margin:0 0 22px}
.indMain h2{font-size:22px;margin:40px 0 12px}
.indMain p{margin:0 0 14px;color:#d8e2e4}
.indMain p a,.relList a{color:var(--gold);border-bottom:1px solid #dfc39455}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.fact{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.fact small{display:block;color:var(--muted);font-size:13px}
.fact strong{display:block;font-size:20px;margin-top:4px}
.fact span{display:block;color:var(--muted);font-size:12.5px;margin-top:4px}
.sketch{margin:18px 0 6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.sketch svg{display:block;width:100%;height:170px}
.sketch .l1{fill:none;stroke:var(--gold);stroke-width:2.5}
.sketch .l2{fill:none;stroke:#7fa3ad;stroke-width:1.6}
.sketch .z{stroke:#5c7a84;stroke-width:1;stroke-dasharray:6 6}
.sketch .bar{fill:#2c5161}
.sketch text{fill:var(--muted);font-size:13px}
.sketch figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.usages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.usage{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.usage .tag{display:inline-block;font-size:12px;color:var(--gold);border:1px solid #dfc39466;border-radius:999px;padding:1px 10px}
.usage h3{font-size:17px;margin:10px 0 8px}
.usage p{font-size:14.5px;color:#c6d3d6;margin:0}
.faq{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq details{border-top:1px solid var(--line);background:var(--panel)}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;padding:15px 18px;list-style:none;display:flex;justify-content:space-between;gap:12px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold)}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 18px 14px;margin:0}
.relList{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.relList li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
.relList li a{font-weight:700}
.relList li span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.apCard{background:linear-gradient(160deg,#103a4c,#092736);border:1px solid #dfc39488;border-radius:14px;padding:20px}
.apCard h2,.chips h2{font-size:14px;letter-spacing:2px;color:var(--gold);margin:0 0 10px}
.apCard p{color:#c6d3d6;font-size:14.5px;margin:0 0 16px}
.apCard .cta{display:block;text-align:center}
.chips{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.chips a{display:inline-block;margin:0 6px 8px 0;font-size:13.5px;border:1px solid var(--line);border-radius:999px;padding:3px 12px;color:#cfdcdf}
.chips a:hover{border-color:var(--gold);color:var(--gold)}
.indFoot{border-top:1px solid var(--line);padding:24px 4% 40px;color:var(--muted);font-size:13px;text-align:center}
.indFoot .links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
@media (max-width:1100px){.indGrid{grid-template-columns:minmax(0,1fr) 260px}.indToc{display:none}}
@media (max-width:820px){
  .indTop{height:auto;flex-wrap:wrap;gap:8px 16px;padding:10px 16px}
  .indTop nav{order:3;width:100%;overflow-x:auto;gap:18px;font-size:14px;padding-bottom:4px}
  .indGrid{grid-template-columns:minmax(0,1fr);padding:18px 16px 48px;gap:24px}
  .indSide{position:static}
  .usages{grid-template-columns:minmax(0,1fr)}
  .sketch svg{height:130px}
}

/* Site additions (site/scripts/indicators-site.css, appended by scripts/indicators.mjs): the pages sit in the site's own
   page template (company bar, header, footer from style.css), which is loaded after this file, so these rules are scoped
   to the encyclopedia and win over style.css's general h1 / h2 / p / nav / .lead rules. */
#app .indGrid{padding-top:20px}
#app .indGrid nav.crumbs{display:block;position:static;padding:0;background:none;gap:0;font-size:13px;color:var(--muted)}
#app .indMain h1{font-size:clamp(28px,3.2vw,38px);line-height:1.3;letter-spacing:-.5px;margin:0 0 12px}
#app .indMain h2{font-size:22px;line-height:1.4;letter-spacing:0;margin:40px 0 12px}
#app .indMain h3{line-height:1.4}
#app .indMain .lead{font-size:17.5px;color:#cfdcdf;max-width:none;margin:0 0 22px}
#app .indMain p{margin:0 0 14px;color:#d8e2e4}
#app .indMain .usage p{font-size:14.5px;color:#c6d3d6;margin:0}
#app .indMain .faq{max-width:none;margin:0}
#app .indMain .faq details p{padding:0 18px 14px;margin:0}
#app .indMain .relList li span{color:var(--muted)}
#app .indToc h2,#app .indSide h2{font-size:14px;line-height:1.4;letter-spacing:2px;margin:0 0 10px}
#app .indToc h2{font-size:13px;margin:8px 0 10px}
#app .indSide p{margin:0 0 16px;color:#c6d3d6;font-size:14.5px}
#app .indToc,#app .indSide{top:110px}
#app .indGridIndex .indMain section h2{margin-top:32px}
@media (max-width:820px){#app .indGrid{padding:14px 16px 40px}}
/* The content stylesheet's own header used .navend{margin-left:auto}; the site header spaces itself (style.css). */
body>header .navend{margin-left:0;font-size:inherit}