/* site.css — wadakatu.dev glue on top of TOMBO. Colors/sizes: tombo tokens ONLY. */

/* docs-volume page header row (PageHeader + ThemeToggle) — shared by about/projects */
.page-header-row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; }
.page-header-row .page-header { margin-bottom: 0; }

/* theme control (markup: ThemeToggle.astro) */
.tombo-themectl { display: flex; gap: 14px; }
.tombo-themectl button { background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--tombo-ink-faint);
  border-bottom: 2px solid transparent; }
.tombo-themectl button[aria-pressed="true"] { color: var(--tombo-ink); border-bottom-color: var(--tombo-shu); }

/* shiki (css-variables theme) -> tombo code panel. Both variable generations set. */
:root {
  --astro-code-background: var(--tombo-code-bg);
  --astro-code-foreground: var(--tombo-code-ink);
  --astro-code-color-background: var(--tombo-code-bg);
  --astro-code-color-text: var(--tombo-code-ink);
  --astro-code-token-comment: var(--tombo-code-faint);
  --astro-code-token-keyword: var(--tombo-code-green);
  --astro-code-token-function: var(--tombo-code-green);
  --astro-code-token-constant: var(--tombo-code-green);
  --astro-code-token-string: var(--tombo-code-ink);
  --astro-code-token-string-expression: var(--tombo-code-green);
  --astro-code-token-parameter: var(--tombo-code-ink);
  --astro-code-token-punctuation: var(--tombo-code-faint);
  --astro-code-token-link: var(--tombo-code-green);
  /* diff lines: an unmapped var() invalidates the declaration, which would
     leave + and - indistinguishable except by a user-select:none glyph */
  --astro-code-token-inserted: var(--tombo-code-green);
  --astro-code-token-deleted: var(--tombo-code-shu);
}

/* scroll to top (replaces scroll-to-top.css; real DOM uses class="scroll-to-top", not an id) */
.scroll-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 98;
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--tombo-hairline); background: var(--tombo-surface); color: var(--tombo-ink-sub);
  cursor: pointer;
  /* visibility, not opacity alone — opacity:0 leaves the button in the tab
     order and the accessibility tree, and pointer-events does not stop a
     keyboard activating it */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--tombo-dur) var(--tombo-ease), visibility var(--tombo-dur) var(--tombo-ease), color var(--tombo-dur) var(--tombo-ease); }
.scroll-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.scroll-to-top:hover { color: var(--tombo-ink); border-color: var(--tombo-ink-sub); }
/* tombo's reset makes bare svg block-level and full-width, so it needs a size */
.scroll-to-top svg { width: 20px; height: 20px; }

/* .tombo-toc extension — blog/[...slug].astro's TOC has h2/h3/h4 hierarchy;
   tombo.css's own component is flat, so indent sub-levels here instead of
   inventing a new component. Markup/JS: public/scripts/toc.js. */
.tombo-toc a[data-level="3"] { padding-left: 34px; }
.tombo-toc a[data-level="4"] { padding-left: 46px; }

/* article body typography (blog/[...slug].astro's .markdown-body, rendered
   markdown — no classes available to attach beyond shiki's own pre.astro-code,
   so these target bare tags the same way the page's previous skin did) */
.markdown-body { font-size: var(--tombo-text-body); line-height: var(--tombo-lh-body); color: var(--tombo-ink);
  overflow-wrap: anywhere; }
.markdown-body h2 { margin-top: 56px; padding-bottom: 12px; border-bottom: 1px solid var(--tombo-hairline); }
.markdown-body h3 { margin-top: 40px; }
.markdown-body h4 { margin-top: 32px; }
.markdown-body p { margin-top: 20px; max-inline-size: var(--tombo-shell-reading); }
.markdown-body h2 + p, .markdown-body h3 + p, .markdown-body h4 + p { margin-top: 14px; }
.markdown-body ul, .markdown-body ol { margin-top: 20px; padding-left: 1.4em; }
.markdown-body li { margin-top: 8px; max-inline-size: var(--tombo-shell-reading); }
.markdown-body li:first-child { margin-top: 0; }
.markdown-body ul li::marker { color: var(--tombo-green); }
.markdown-body ol li::marker { color: var(--tombo-green); font-family: var(--tombo-font-mono); }
.markdown-body blockquote { margin-top: 24px; max-inline-size: var(--tombo-shell-reading); border: 1px solid var(--tombo-hairline);
  border-left: 2px solid var(--tombo-shu); padding: 14px 18px; }
.markdown-body blockquote p { margin-top: 0; color: var(--tombo-ink-sub); }
.markdown-body blockquote p + p { margin-top: 12px; }
.markdown-body img { margin-top: 24px; border: 1px solid var(--tombo-hairline); border-radius: 6px;
  max-width: 100%; height: auto; }
.markdown-body hr { margin: 48px 0; }
.markdown-body table { margin-top: 24px; width: 100%; border-collapse: collapse; font-size: var(--tombo-text-ui); }
.markdown-body th { font-family: var(--tombo-font-mono); font-size: var(--tombo-text-label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tombo-ink-sub); font-weight: 500; text-align: left;
  padding: 11px 14px; border-bottom: 1.5px solid var(--tombo-ink); }
.markdown-body td { padding: 10px 14px; border-bottom: 1px solid var(--tombo-hairline); }
.markdown-body code { font-family: var(--tombo-font-mono); font-size: var(--tombo-text-code);
  background: var(--tombo-surface); border: 1px solid var(--tombo-hairline); border-radius: 4px; padding: .15em .4em; }
/* code block panel: "equivalent to .tombo-code" (spec §10-5, dark in both themes) applied to
   shiki's own pre.astro-code — background/foreground already come from the --astro-code-*
   -> --tombo-code-* mapping above; this just adds the panel chrome tombo-code itself defines */
.markdown-body pre.astro-code { margin-top: 24px; padding: 14px 18px; border: 1px solid var(--tombo-code-border);
  border-radius: 6px; font-size: var(--tombo-text-code); line-height: var(--tombo-lh-code);
  font-stretch: 87.5%; overflow-x: auto; }
.markdown-body pre.astro-code code { font-size: inherit; background: none; border: none; padding: 0; }
.markdown-body strong { color: var(--tombo-ink); font-weight: 700; }
.markdown-body em { font-style: italic; color: var(--tombo-ink-sub); }

/* TOC disclosure — toc.js builds this at runtime, so the rules must be global:
   Astro's scoped styles never match elements the page didn't author. Wide
   viewports have room for the rail, so it opens and the marker is noise. */
.toc-disclosure > summary { display: none; }
@media (max-width: 900px) {
  .toc-disclosure > summary { display: list-item; cursor: pointer; color: var(--tombo-ink-sub); }
}

/* Code copy button — code-copy.js appends this into each <pre>, so like the TOC
   disclosure it needs global rules. It sits on the code panel, which is dark in
   both themes, so it takes the panel's own ink rather than the page's. */
.markdown-body pre { position: relative; }
.markdown-body pre:hover .code-copy-btn,
.code-copy-btn:focus-visible { opacity: 1; }
.code-copy-btn {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--tombo-code-bg);
  border: 1px solid var(--tombo-code-hairline);
  border-radius: 4px;
  color: var(--tombo-code-faint);
  font-family: var(--tombo-font-mono);
  font-size: var(--tombo-text-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--tombo-dur) var(--tombo-ease), color var(--tombo-dur) var(--tombo-ease);
}
.code-copy-btn:hover { color: var(--tombo-code-ink); }
.code-copy-btn svg { width: 12px; height: 12px; display: block; }
.code-copy-btn .check-icon { display: none; }
.code-copy-btn.copied { color: var(--tombo-code-green); }
.code-copy-btn.copied .copy-icon { display: none; }
.code-copy-btn.copied .check-icon { display: block; }
@media (hover: none) {
  .code-copy-btn { opacity: 1; }
}