/* gitx.cc site layer. Load after /assets/base.css, which is an unmodified copy of
   html-illustrate/assets/base.css. Only rules this site needs beyond it live here. */
/* Narrower than base.css's 1040px: these pages are prose with small diagrams. */
:root{--content:860px}

/* Back to the index, fixed top-left on article pages only. */
.home-back{position:fixed;top:12px;left:12px;z-index:60;display:flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;font-size:12.5px;line-height:1.7;text-decoration:none;color:var(--muted);
  background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .15s,border-color .15s}
.home-back:hover{color:var(--ink);border-color:var(--line-strong)}

/* Home page: the article list. */
.posts{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--line)}
.posts a{display:grid;grid-template-columns:96px 1fr auto;align-items:baseline;column-gap:24px;row-gap:6px;
  padding:16px 4px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.posts .topic{font:500 12px/1.4 var(--mono);letter-spacing:.12em;color:var(--accent)}
.posts .title{font:700 18px/1.4 var(--sans);letter-spacing:-.01em;transition:color .15s}
.posts .desc{grid-column:2;color:var(--muted);font-size:14px}
.posts .arrow{grid-column:3;grid-row:1/3;align-self:center;color:var(--faint);transition:transform .2s,color .2s}
.posts a:hover .title{color:var(--accent-ink)}
.posts a:hover .arrow{color:var(--accent);transform:translateX(4px)}

/* End of an article: where to go next. */
.next{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding:20px 0 0;border-top:1px solid var(--line)}
.next a{text-decoration:none;color:inherit}
.next .label{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.12em;color:var(--accent);margin-bottom:8px}
.next .title{font:700 18px/1.4 var(--sans);transition:color .15s}
.next a:hover .title{color:var(--accent-ink)}
.next .all{font-size:14px;color:var(--muted);white-space:nowrap}
.next .all:hover{color:var(--ink)}

/* Links that leave the site get a small arrow. */
main a[href^="http://"]::after,main a[href^="https://"]::after{content:"\2197";display:inline-block;margin-left:2px;font-size:.78em;text-decoration:none}

/* Footer: filing number only, centered. */
.site-footer{padding:40px 0 28px;text-align:center;font-size:13px;color:var(--faint)}
.site-footer a{color:inherit}

/* Long first-column cells wrap instead of forcing sideways scroll on phones. */
td:first-child{white-space:normal}

/* Sticky table of contents, from html-illustrate/assets/toc-snippet.html. */
.toc-bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--toc-bg) 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--toc-line);margin-bottom:4px}
.toc-bar ol{list-style:none;margin:0 auto;max-width:var(--toc-max,900px);display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  /* Keep clear of the fixed "back to directory" link that tu injects at the top-left. */
  padding-block:7px;padding-inline:max(84px,calc((100vw - var(--toc-max,900px)) / 2 + 20px)) 20px}
.toc-bar ol::-webkit-scrollbar{display:none}
/* Fade the right edge so a clipped row reads as scrollable. */
.toc-bar ol{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.toc-bar a{display:flex;align-items:baseline;gap:6px;white-space:nowrap;padding:6px 11px;border-radius:999px;
  font-size:13.5px;line-height:1.3;color:var(--toc-muted);text-decoration:none;transition:background .15s,color .15s}
.toc-bar a .no{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;opacity:.7}
.toc-bar a:hover{color:var(--toc-ink);background:color-mix(in srgb,var(--toc-ink) 7%,transparent)}
.toc-bar a:focus-visible{outline:2px solid var(--toc-accent);outline-offset:1px}
.toc-bar a.on{color:var(--toc-bg);background:var(--toc-accent)}
.toc-bar a.on .no{opacity:.85}
/* The script sets --toc-offset from the real bar height; 68px is only the pre-script fallback. */
[data-toc],h2{scroll-margin-top:var(--toc-offset,68px)}
/* Room so the second-to-last section can scroll up to the bar, or its chip never highlights.
   A tall last section gives that room without blank space below the footer. If toc-probe
   still reports atEnd:true, lower the 400. */
section:last-of-type{min-height:calc(100vh - 400px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:600px){.toc-bar ol{padding-inline:44px 16px}.toc-bar a{font-size:13px;padding:6px 10px}}

@media (max-width:600px){
  .home-back{top:8px;left:8px;width:30px;height:30px;padding:0;justify-content:center;font-size:14px}
  .home-back .t{display:none}
  .posts a{grid-template-columns:1fr auto;padding:24px 2px}
  .posts .topic,.posts .title,.posts .desc{grid-column:1}
  .posts .title{font-size:17px}
  .hero{padding:52px 0 16px}
  .hero h1{font-size:26px}
  .posts .arrow{grid-column:2;grid-row:1/4}
  .next{flex-direction:column;align-items:flex-start}
  .next .title{font-size:17px}
}
@media print{.home-back,.toc-bar,.next{display:none}}

/* Stats read label first, as in the original pages: small label above the number. */
.stats span{display:block}