/* Selected direction: White Ink / Black Signal, Quick resolve, Quiet column.
 * The specialist styles stay reusable in the comparison lab. */
[hidden] { display: none !important; }
html[data-blog-theme] .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: 0 0 44px;
  border: 1px solid var(--muted); border-radius: 50%;
  color: var(--ink); background: transparent; cursor: pointer;
}
html[data-blog-theme] .theme-toggle:hover { background: var(--wash); }
html[data-blog-theme] .theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Reserve the control's slot before deferred JavaScript reveals it. */
html[data-blog-theme] .site-header nav { align-items: center; min-width: 44px; min-height: 44px; }
html[data-blog-theme][data-lab-layout="column"] .post-header h1 {
  max-width: none; width: 100%; text-wrap: wrap;
}
.theme-sun { display: none; }
html[data-lab-color="black-signal"] .theme-sun { display: block; }
html[data-lab-color="black-signal"] .theme-moon { display: none; }
html[data-blog-theme] .intro { max-width: none; }
html[data-blog-theme] .intro > p:not(.intro-lead) { max-width: 620px; }
html[data-blog-theme] .greeting-row {
  --greeting-size: clamp(44px, 7vw, 64px);
  --greeting-leading: 1.18;
  display: flex; align-items: center; gap: 28px;
  margin-bottom: var(--greeting-gap);
}
html[data-blog-theme][data-page-spacing] .intro .greeting-row h1 {
  margin: 0; min-width: 0;
  font-size: var(--greeting-size); line-height: var(--greeting-leading);
}
html[data-blog-theme][data-page-spacing] .intro .greeting-row .profile {
  /* Match one title line, never use the image to establish the row height. */
  width: auto; max-width: 100%;
  height: calc(var(--greeting-size) * var(--greeting-leading));
  flex-shrink: 0; margin: 0;
}
@media (max-width: 600px) {
  html[data-blog-theme] .greeting-row {
    --greeting-size: clamp(32px, 10vw, 44px);
    --greeting-leading: 1.1;
    gap: 16px;
  }
}
@media (max-width: 360px) {
  html[data-blog-theme][data-lab-layout="column"] .site-header,
  html[data-blog-theme][data-lab-layout="column"] .site-header nav { gap: 8px; }
}
/* Without JavaScript, device-dark still has the selected dark palette and
 * readable hierarchy; the inactive toggle remains hidden. */
@media (prefers-color-scheme: dark) {
  html[data-blog-theme]:not([data-theme-ready]) {
    color-scheme: dark;
    --paper: #111111; --ink: #f5f5f5; --muted: #aaaaaa; --line: #424242;
    --accent: #f5f5f5; --wash: #222222; --code: #292929; --focus: #f5f5f5;
    --hierarchy-body: var(--muted); --hierarchy-underline: var(--muted);
  }
  html[data-blog-theme]:not([data-theme-ready]) .section-heading,
  html[data-blog-theme]:not([data-theme-ready]) .blog-posts li { background: var(--code); }
  html[data-blog-theme]:not([data-theme-ready]) .blog-posts li:nth-child(even) { background: var(--wash); }
}