/* Top bar, contents overlay, left rail, glossary popover, toast. */

#topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
#readbar { height: 3px; background: transparent; }
#readbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--k-book), var(--k-code), var(--k-vec), var(--k-dec)); }
#topbar .bar { height: calc(var(--bar) - 3px); max-width: 96rem; margin: 0 auto; padding: 0 14px; display: flex; align-items: center; gap: .6rem; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-family: var(--f-display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; flex: none; }
.logo { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--k-vec) 0 18%, transparent 19% 44%, var(--k-book) 45% 56%, transparent 57%), var(--bg-3); border: 1px solid var(--rule); }
.crumb { font: 500 .76rem var(--f-mono); color: var(--ink); background: var(--bg-2); border: 1px solid var(--rule); border-radius: 999px; padding: .34rem .8rem; display: flex; gap: .5rem; align-items: center; cursor: pointer; min-width: 0; max-width: 100%; }
.crumb:hover { border-color: var(--pc); }
.crumb .cn { color: var(--bg); background: var(--pc); font-weight: 700; border-radius: 4px; padding: 0 .35rem; flex: none; }
.crumb .cn:empty { display: none; }
.crumb .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb .cs { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb .cs:empty { display: none; } .crumb .cs::before { content: "› "; }
.crumb .caret { color: var(--muted); flex: none; }
.spacer { flex: 1; }
.tb { font: 500 .76rem var(--f-mono); color: var(--ink); background: none; border: 1px solid transparent; border-radius: 8px; padding: .34rem .55rem; cursor: pointer; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; flex: none; }
.tb:hover { border-color: var(--rule); background: var(--bg-2); }
.tb .tl { color: var(--muted); }
#ring { display: flex; align-items: center; gap: .4rem; text-decoration: none; font: 500 .72rem var(--f-mono); color: var(--muted); flex: none; }
#ring svg { width: 1.35rem; height: 1.35rem; transform: rotate(-90deg); }
#ring circle { fill: none; stroke-width: 4; } #ring .tr { stroke: var(--rule); } #ring .fg { stroke: var(--k-dec); stroke-linecap: round; transition: stroke-dasharray .4s; }
@media (max-width: 760px) { .brand .bt, .tb .tl, .crumb .cs { display: none; } }
@media (max-width: 420px) { #ring-t { display: none; } }

/* ---------- contents overlay ---------- */
#toc { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: start center; padding: calc(var(--bar) + .5rem) 12px 12px; overflow: hidden; animation: fade .14s ease-out; }
@keyframes fade { from { opacity: 0; } }
.toc-in { width: min(72rem, 100%); max-height: 100%; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; animation: drop .16s ease-out; }
@keyframes drop { from { transform: translateY(-10px); opacity: 0; } }
.toc-head { display: flex; gap: .8rem; align-items: center; padding: .8rem; border-bottom: 1px solid var(--rule); }
.toc-prog { font-family: var(--f-mono); font-size: .72rem; color: var(--k-dec); white-space: nowrap; }
.toc-body { overflow-y: auto; padding: .9rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem 1.2rem; align-content: start; overscroll-behavior: contain; }
.toc-part { --c: var(--muted); min-width: 0; }
.toc-part h3 { font-size: .96rem; font-weight: 800; display: flex; gap: .5rem; align-items: baseline; padding: 0 .3rem .35rem; border-bottom: 2px solid var(--c); margin-bottom: .3rem; }
.toc-part h3 .pn { font-family: var(--f-mono); font-size: .66rem; color: var(--c); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.toc-part h3 .pp { margin-left: auto; font-family: var(--f-mono); font-size: .66rem; color: var(--muted); font-weight: 500; }
.toc-part ol { list-style: none; margin: 0; padding: 0; }
.toc-part li a { display: grid; grid-template-columns: 1rem 2rem 1fr auto; gap: .3rem; align-items: baseline; text-decoration: none; color: var(--ink-2); font-family: var(--f-display); font-size: .9rem; padding: .22rem .3rem; border-radius: 7px; line-height: 1.25; }
.toc-part li a:hover, .toc-part li a.kb { background: var(--bg-3); color: var(--ink); }
.toc-part li a .n { font-family: var(--f-mono); font-size: .68rem; color: var(--c); font-weight: 700; }
.toc-part li a .m { font-family: var(--f-mono); font-size: .64rem; color: var(--faint); }
.toc-part li.here > a { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--ink); font-weight: 600; }
.toc-part ol ol { margin: 0 0 .3rem 3.3rem; border-left: 1px solid var(--rule); }
.toc-part ol ol a { display: block; font-size: .8rem; color: var(--muted); padding: .12rem .6rem; }
.toc-part ol ol a.cur { color: var(--ink); box-shadow: inset 2px 0 0 var(--c); }
.toc-hits { grid-column: 1 / -1; }
.toc-hits h4 { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: .6rem .3rem .3rem; font-weight: 500; }
.toc-hits a { display: grid; grid-template-columns: 5.5rem 1fr; gap: .6rem; text-decoration: none; color: var(--ink); font-family: var(--f-display); font-size: .92rem; padding: .32rem .4rem; border-radius: 7px; align-items: baseline; }
.toc-hits a:hover, .toc-hits a.kb { background: var(--bg-3); }
.toc-hits a .w { font-family: var(--f-mono); font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.toc-hits a small { color: var(--muted); font-family: var(--f-body); font-size: .86rem; margin-left: .4rem; }
.toc-foot { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; padding: .6rem .9rem; border-top: 1px solid var(--rule); font-family: var(--f-mono); font-size: .68rem; color: var(--muted); }
.toc-foot kbd { margin-right: .25rem; }
.linkish { all: unset; cursor: pointer; margin-left: auto; text-decoration: underline dotted; color: var(--muted); }
.linkish:hover { color: var(--k-res); }
@media (max-width: 640px) { .toc-foot span { display: none; } #toc-close { display: none; } }

/* ---------- left rail (wide screens) ---------- */
.rail-in { position: sticky; top: calc(var(--bar) + 1.4rem); max-height: calc(100vh - var(--bar) - 2.4rem); overflow-y: auto; padding-right: .4rem; scrollbar-width: thin; }
.rail-part { display: block; text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: .98rem; color: var(--ink); line-height: 1.2; padding-bottom: .5rem; border-bottom: 2px solid var(--pc); margin-bottom: .5rem; }
.rail-part .pn { display: block; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pc); font-weight: 700; margin-bottom: .15rem; }
#rail ol { list-style: none; margin: 0; padding: 0; }
#rail-pages > li > a { display: grid; grid-template-columns: .9rem 1.9rem 1fr; gap: .25rem; align-items: baseline; text-decoration: none; color: var(--muted); font-family: var(--f-display); font-size: .86rem; padding: .22rem .2rem; border-radius: 6px; line-height: 1.25; }
#rail-pages > li > a:hover { color: var(--ink); background: var(--bg-2); }
#rail-pages > li > a .n { font-family: var(--f-mono); font-size: .66rem; color: var(--pc); font-weight: 700; }
#rail-pages > li.here > a { color: var(--ink); font-weight: 600; }
#rail-pages ol { margin: .1rem 0 .5rem 1.25rem; border-left: 1px solid var(--rule); }
#rail-pages ol a { display: block; text-decoration: none; font-family: var(--f-display); font-size: .78rem; color: var(--muted); padding: .14rem .6rem; line-height: 1.3; margin-left: -1px; border-left: 2px solid transparent; }
#rail-pages ol a:hover { color: var(--ink); }
#rail-pages ol a.cur { color: var(--ink); border-left-color: var(--pc); }
.rail-more { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--rule); display: grid; gap: .3rem; }
.rail-more a, .rail-more button { all: unset; cursor: pointer; font-family: var(--f-mono); font-size: .7rem; color: var(--muted); }
.rail-more a:hover, .rail-more button:hover { color: var(--ink); }

/* ---------- popover for glossary terms and page links ---------- */
#pop { position: absolute; z-index: 70; width: min(21rem, calc(100vw - 24px)); background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--rule); border-radius: 12px; padding: .75rem .9rem; box-shadow: var(--shadow); font-family: var(--f-display); font-size: .92rem; line-height: 1.45; border-top: 3px solid var(--c, var(--k-vec)); }
#pop .pt { font-weight: 800; color: var(--ink); font-size: 1rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
#pop .pt small { font-family: var(--f-mono); font-weight: 400; font-size: .66rem; color: var(--muted); }
#pop .pk { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--muted)); display: block; margin-bottom: .15rem; }
#pop p { margin: .3rem 0 0; }
#pop .pf { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .55rem; font-family: var(--f-mono); font-size: .7rem; }
#pop .pf a { color: var(--k-book); text-decoration: none; } #pop .pf a:hover { text-decoration: underline; }
#pop .pf .ok { color: var(--k-dec); }
#pop .katex { font-size: 1em; }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); z-index: 80; font-family: var(--f-mono); font-size: .78rem; background: var(--ink); color: var(--bg); padding: .5rem .9rem; border-radius: 8px; opacity: 0; transition: .2s; pointer-events: none; }
#toast.on { opacity: 1; transform: translateX(-50%); }