/* dotcom — Site Chrome
   Shared components used across every page: header/nav/theme-toggle,
   post listing (tree) items, post header/meta/tags, TOC sidebar,
   post body elements (blockquote, shiki blocks), and footer.

   Link this AFTER tokens.css + base.css:
     <link rel="stylesheet" href=".../design/tokens.css">
     <link rel="stylesheet" href=".../design/base.css">
     <link rel="stylesheet" href=".../design/chrome.css">

   Page-specific CSS (rare) still goes in that page's own inline \3c style>
   block, below these three links. Do not re-paste any of the rules
   below into a page's inline block — that's what caused drift before
   this file existed.
*/

/* ── Site header ── */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--line-height);
  border-bottom: var(--border-thickness) solid var(--border-default);
  margin-bottom: calc(2 * var(--line-height));
}
.site-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-heading);
  text-decoration: none;
  letter-spacing: 0.05em;
}
.site-nav {
  display: flex;
  gap: 2ch;
  list-style: none;
  padding-left: 0;
}
.site-nav li::before {
  content: none;
}
.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
}
.site-nav a:hover {
  color: var(--text-link);
}

/* ── Theme toggle ──
   Fixed width (7ch text + 1ch padding each side) so the button doesn't
   resize when the label swaps between "[light]" and "[dark]". The visible
   box stays small/quiet by design; ::before expands the actual hit area
   to the ~40px accessibility minimum without changing how it looks. */
#theme-toggle {
  position: relative;
  background: none;
  border: var(--border-thickness) solid var(--border-default);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  padding: 0.3em 1ch;
  width: 9ch;
  text-align: center;
  min-height: 28px;
  min-width: unset;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition-property: color, border-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-default);
}
#theme-toggle::before {
  content: '';
  position: absolute;
  inset: -6px;
}
#theme-toggle:hover {
  color: var(--text-link);
  border-color: var(--border-strong);
}
#theme-toggle:active {
  scale: 0.96;
}

/* ── Section label ── */
.section-label {
  font-size: var(--text-xs);
  color: var(--color-accent-orange);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

/* ── Post tree items (recent-posts listing on index.html, and any
   future listing page) ── */
.post-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2ch;
  padding: calc(0.25 * var(--line-height)) 0;
}
.post-title-link {
  font-size: var(--text-sm);
  color: var(--text-body);
  text-decoration: none;
  flex: 1;
}
.post-title-link:hover {
  color: var(--text-link);
}
.post-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── TOC sidebar — floats outside the 80ch body column on wide screens.
   Present only on post pages; harmless (unused) elsewhere.
   Markup is a nested `.tree` (see base.css) rooted the same way the
   homepage's recent-posts list is: <ul class="tree"><li><p
   class="section-label">...</p><ul>[h2s, h3/h4 nested under their
   parent h2]</ul></li></ul> — that's what gives h3/h4 the tree
   connector, matching the recent-posts tree. ── */
.post-toc {
  display: none;
  position: sticky;
  top: calc(2 * var(--line-height));
  float: right;
  clear: right;
  width: 20ch;
  margin-left: 4ch;
  margin-right: calc(-26ch);
  font-size: var(--text-xs);
  line-height: var(--line-height);
}
@media (width >= 115ch) {
  .post-toc {
    display: block;
  }
}
.post-toc .section-label {
  margin: 0 0 var(--line-height);
}
.post-toc a {
  color: var(--text-subtle);
  text-decoration: none;
  display: block;
  padding: calc(0.25 * var(--line-height)) 0;
  transition: color var(--duration-fast) var(--ease-default);
}
.post-toc a:hover {
  color: var(--text-link);
}

/* ── Post header / meta ── */
.post-header {
  margin-bottom: calc(2 * var(--line-height));
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 2ch;
  margin-top: var(--line-height);
  flex-wrap: wrap;
}
.post-meta-date {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Tags ──
   Plain (non-clickable) labels — there's no tag/archive page to link to. ── */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
}
.tag {
  font-size: var(--text-xs);
  color: var(--text-link);
  background: var(--bg-tag);
  border: var(--border-thickness) solid var(--border-default);
  padding: 0.1em 0.8ch;
  border-radius: var(--radius-sm);
}

/* ── Post body ── */
.post-body h2 {
  margin-top: calc(2.5 * var(--line-height));
}
blockquote {
  border-left: 2px solid var(--color-accent-green);
  padding-left: 2ch;
  color: var(--text-muted);
  margin: var(--line-height) 0;
}
blockquote p {
  margin: 0;
}

/* ── Shiki code blocks ──
   highlight.mjs generates dual-theme output (Shiki's --shiki-dark/
   --shiki-light CSS vars per span, defaultColor: false) — no inline
   `color`/`background-color` to override. We pick which var wins here,
   keyed off the same .light class the rest of the site uses. */
.shiki-block {
  border: var(--border-thickness) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--line-height) 2ch;
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: var(--line-height);
  margin: var(--line-height) 0;
  background-color: var(--bg-elevated);
}
.shiki-block,
.shiki-block span {
  color: var(--shiki-dark);
  font-style: var(--shiki-dark-font-style, normal);
}
:root.light .shiki-block,
:root.light .shiki-block span {
  color: var(--shiki-light);
  font-style: var(--shiki-light-font-style, normal);
}

/* ── Footer ──
   Just a row of social links now — see .site-footer > * in base.css's
   owl-suppression list for why these don't pick up top margin.
   align-items: baseline matches .site-header, so both chrome bars share
   the same vertical alignment rule instead of footer defaulting to
   stretch. */
.site-footer {
  margin-top: calc(4 * var(--line-height));
  padding-top: var(--line-height);
  border-top: var(--border-thickness) solid var(--border-default);
  font-size: var(--text-xs);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2ch;
}
.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--text-link);
}