/*
  Nothing Design System — blog theme
  Dark default (OLED). Light = technical manual.
  Mode: html[data-theme="dark"|"light"] + toggle; system fallback when unset.
  Fonts: Doto (display), Space Grotesk (body), Space Mono (labels/data)
*/

/* ——— Tokens: dark (default) ——— */
:root {
  --black: #000000;
  --surface: #111111;
  --surface-raised: #1a1a1a;
  --border: #222222;
  --border-visible: #333333;
  --text-disabled: #666666;
  --text-secondary: #999999;
  --text-primary: #e8e8e8;
  --text-display: #ffffff;
  --accent: #d71921;
  --accent-subtle: rgba(215, 25, 33, 0.15);
  --success: #4a9e5c;
  --warning: #d4a843;
  --interactive: #5b9bf6;

  /* Latin faces first; CJK falls through to system / Noto stacks */
  --font-display: "Doto", "Space Mono", "PingFang SC", "Hiragino Sans GB", "Hiragino Sans",
    "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", "Yu Gothic", "Malgun Gothic", sans-serif;
  --font-body: "Space Grotesk", "DM Sans", "PingFang SC", "Hiragino Sans GB", "Hiragino Sans",
    "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei",
    "Yu Gothic", "Meiryo", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "Space Mono", "JetBrains Mono", "SF Mono", "Menlo",
    "Sarasa Mono SC", "Noto Sans Mono CJK SC", monospace;

  --display-xl: 72px;
  --display-lg: 48px;
  --display-md: 36px;
  --heading: 24px;
  --subheading: 18px;
  --body: 16px;
  --body-sm: 14px;
  --caption: 12px;
  --label: 11px;

  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --measure: 42rem;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 200ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --black: #000000;
  --surface: #111111;
  --surface-raised: #1a1a1a;
  --border: #222222;
  --border-visible: #333333;
  --text-disabled: #666666;
  --text-secondary: #999999;
  --text-primary: #e8e8e8;
  --text-display: #ffffff;
  --interactive: #5b9bf6;
}

html[data-theme="light"] {
  color-scheme: light;
  --black: #f5f5f5;
  --surface: #ffffff;
  --surface-raised: #f0f0f0;
  --border: #e8e8e8;
  --border-visible: #cccccc;
  --text-disabled: #999999;
  --text-secondary: #666666;
  --text-primary: #1a1a1a;
  --text-display: #000000;
  --interactive: #007aff;
}

/* No saved theme yet: follow OS */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --black: #f5f5f5;
    --surface: #ffffff;
    --surface-raised: #f0f0f0;
    --border: #e8e8e8;
    --border-visible: #cccccc;
    --text-disabled: #999999;
    --text-secondary: #666666;
    --text-primary: #1a1a1a;
    --text-display: #000000;
    --interactive: #007aff;
  }
}

/* ——— Reset / base ——— */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

/* Fixed chrome: only main content scrolls */
body.site-shell {
  margin: 0;
  height: 100%;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--black);
  /* Subtle instrument-panel grid — tertiary decoration only */
  background-image: radial-gradient(circle, var(--border) 0.5px, transparent 0.5px);
  background-size: 12px 12px;
}

/* ——— Layout ——— */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--space-md);
  width: 100%;
}

.site-main {
  flex: 1 1 auto;
  min-height: 0; /* allow flex child to scroll */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.site-main__inner {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

/* ——— Header / nav (tertiary layer, sticky chrome) ——— */
.site-header {
  flex-shrink: 0;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
  background-color: var(--black);
  background-image: radial-gradient(circle, var(--border) 0.5px, transparent 0.5px);
  background-size: 12px 12px;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-mark {
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  transition: color var(--dur) var(--ease);
}

.site-mark:hover {
  color: var(--text-display);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--text-disabled);
  text-decoration: none;
  padding: var(--space-xs) 0;
  transition: color var(--dur) var(--ease);
}

.site-nav a:hover {
  color: var(--text-primary);
}

.site-nav a[aria-current="page"] {
  color: var(--text-display);
}

.site-nav .nav-bracket {
  color: var(--text-disabled);
  user-select: none;
}

.site-nav .nav-sep {
  color: var(--border-visible);
  user-select: none;
  margin: 0 var(--space-xs);
}

/* GitHub / social (monochrome icon) */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-disabled);
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--dur) var(--ease);
}

.social-link:hover {
  color: var(--text-display);
}

.social-link--footer {
  width: 32px;
  height: 32px;
}

.icon-github {
  display: block;
}

/* Theme toggle — mechanical segmented control */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  height: 36px;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.theme-toggle:hover {
  border-color: var(--text-disabled);
}

.theme-toggle__seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  height: 100%;
  padding: 0 var(--space-md);
  color: var(--text-disabled);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

html[data-theme="dark"] .theme-toggle__seg--dark,
html:not([data-theme]) .theme-toggle__seg--dark {
  background: var(--text-display);
  color: var(--black);
}

html[data-theme="light"] .theme-toggle__seg--light {
  background: var(--text-display);
  color: #ffffff;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) .theme-toggle__seg--dark {
    background: transparent;
    color: var(--text-disabled);
  }
  html:not([data-theme]) .theme-toggle__seg--light {
    background: var(--text-display);
    color: #ffffff;
  }
}

/* ——— Page hero (primary layer — the ONE break) ——— */
.page-hero {
  margin: 0 0 var(--space-2xl);
}

.page-hero__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
}

.page-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 8vw, var(--display-lg));
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-display);
}

/* ——— Post list (secondary) ——— */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
}

.post-list li:first-child {
  border-top: 1px solid var(--border);
}

/* Title | date — date column stays fixed so long titles don't shove it down */
.post-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-md);
  align-items: baseline;
}

.post-list a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--subheading);
  line-height: 1.3;
  color: var(--text-display);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  /* Wrap within the title column only */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-list a:hover {
  color: var(--interactive);
}

.post-list .meta {
  font-family: var(--font-mono);
  font-size: var(--caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-disabled);
  white-space: nowrap;
  text-align: right;
  /* Reserve a stable date column (fits "28 · 2026-08-02") */
  flex-shrink: 0;
  min-width: 11ch;
}

.post-list .summary {
  margin: var(--space-sm) 0 0;
  font-size: var(--body-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 36rem;
}

/* Archive month headers — tertiary labels, not competing with titles */
.month {
  margin: var(--space-2xl) 0 var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.month:first-of-type {
  margin-top: 0;
}

/* Empty state */
.empty {
  margin: var(--space-4xl) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-disabled);
}

/* ——— Article / post ——— */
.post-header {
  margin-bottom: var(--space-2xl);
}

.post-header h1 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 6vw, var(--display-md));
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-display);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-disabled);
}

.post-meta time {
  color: var(--text-secondary);
}

.post-meta .meta-label {
  color: var(--text-disabled);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-block;
  border: 1px solid var(--border-visible);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
}

/* AI Revised — soft secondary badge (post page only; first when present) */
.tag--ai {
  border-color: var(--border);
  border-style: dashed;
  color: var(--text-disabled);
  background: transparent;
  border-radius: 4px;
  letter-spacing: 0.08em;
  font-weight: 400;
}

/* Body content */
.post-body {
  font-size: var(--body);
  /* Slightly looser leading for CJK; Latin stays readable */
  line-height: 1.75;
  color: var(--text-primary);
  word-break: normal;
  overflow-wrap: anywhere;
  /* Prefer CJK line-break rules when available */
  line-break: strict;
}

.post-body > *:first-child {
  margin-top: 0;
}

.post-body h2 {
  margin: var(--space-2xl) 0 var(--space-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-display);
}

.post-body h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--subheading);
  line-height: 1.3;
  color: var(--text-display);
}

.post-body p,
.post-body ul,
.post-body ol {
  margin: 0 0 var(--space-md);
}

.post-body a {
  color: var(--interactive);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--dur) var(--ease);
}

.post-body a:hover {
  opacity: 0.85;
}

.post-body strong {
  font-weight: 500;
  color: var(--text-display);
}

.post-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.post-body :not(pre) > code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-primary);
}

.post-body pre,
.post-body pre.chroma,
.post-body .chroma {
  overflow-x: auto;
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  /* Base surface; token colors come from chroma.css per theme */
  background: var(--surface) !important;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--body-sm);
  line-height: 1.45;
}

.post-body pre code,
.post-body .chroma code {
  border: none;
  padding: 0;
  background: none !important;
  font-size: inherit;
  color: inherit;
}

/* Chroma line wrapper (display:flex from chroma) — keep readable */
.post-body .chroma .line {
  min-height: 1.45em;
}

.post-body img,
.post-body img[src$=".svg"],
.post-body img[src*=".svg"] {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-lg) 0;
  border: 1px solid var(--border);
  background: var(--surface);
}

/* Inline / object SVG */
.post-body svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-lg) 0;
}

/* Mermaid diagram container (pre-render + after SVG inject) */
.post-body .mermaid,
.home-body .mermaid {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  background: var(--surface);
  overflow-x: auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--body-sm);
  color: var(--text-secondary);
}

.post-body .mermaid svg,
.home-body .mermaid svg {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.post-body blockquote {
  margin: 0 0 var(--space-lg);
  padding: 0 0 0 var(--space-md);
  border-left: 2px solid var(--border-visible);
  color: var(--text-secondary);
}

.post-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-2xl) 0;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-lg);
  font-size: var(--body-sm);
}

.post-body th {
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-visible);
  font-weight: 400;
}

.post-body td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

/* ——— Footer (tertiary, sticky chrome) ——— */
.site-footer {
  flex-shrink: 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
  background-color: var(--black);
  background-image: radial-gradient(circle, var(--border) 0.5px, transparent 0.5px);
  background-size: 12px 12px;
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-disabled);
  z-index: 10;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-footer p,
.site-footer__text {
  margin: 0;
  white-space: pre-line; /* honor multi-line footer.content from YAML */
}

/* Focus visibility (accessibility, monochrome) */
:focus-visible {
  outline: 1px solid var(--text-display);
  outline-offset: 3px;
}

/* Selection */
::selection {
  background: var(--text-display);
  color: var(--black);
}

html[data-theme="light"] ::selection,
:root:not([data-theme]) ::selection {
  /* light ink on dark highlight when light tokens active */
}

html[data-theme="light"] ::selection {
  background: var(--text-display);
  color: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) ::selection {
    background: var(--text-display);
    color: #ffffff;
  }
}