/*
 * takumi3488 blog — stylesheet
 *
 * Implements docs/design-spec.md verbatim (tokens, typography, layout,
 * code blocks, GFM alerts, view transitions, tags/empty-state,
 * responsive rules, accessibility). See that file for the rationale behind
 * every value here.
 *
 * Light/dark is OS-driven only (`prefers-color-scheme`); there is no manual
 * toggle, so every themed value below has exactly two tiers: the `:root`
 * default (light) and a `@media (prefers-color-scheme: dark)` override.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* color: surface */
  --color-bg: #F5F6F8;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #EEF0F3;
  --color-code-bg: #EEF0F3;
  --color-code-text: #262B35;

  /* color: border */
  --color-border: #AEB4BC;
  --color-border-strong: #6B7280;

  /* color: text */
  --color-text: #1B1F27;
  --color-text-weak: #4A5160;

  /* color: accent (amber ink) */
  --color-accent: #9A5B13;
  --color-accent-hover: #7C480D;
  --color-accent-soft: #F1E2C8;
  --color-accent-on-soft: #7C480D;

  /* color: misc */
  --color-selection-bg: #F1E2C8;
  --color-selection-text: #1B1F27;
  --color-shadow-hover: 0 6px 20px rgba(15, 23, 42, 0.08);

  /* typography */
  --font-serif: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP",
    system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "SF Mono",
    "Noto Sans Mono CJK JP", "Source Han Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;

  /* spacing (8px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;

  /* layout */
  --content-width: 52rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14171C;
    --color-surface: #1B1F27;
    --color-surface-sunken: #10131A;
    --color-code-bg: #10131A;
    --color-code-text: #E8E6DE;

    --color-border: #333944;
    --color-border-strong: #66707F;

    --color-text: #E8E6DE;
    --color-text-weak: #9BA1AE;

    --color-accent: #E9A23B;
    --color-accent-hover: #F0B25A;
    --color-accent-soft: #3A2A14;
    --color-accent-on-soft: #E9A23B;

    --color-selection-bg: #3A2A14;
    --color-selection-text: #E8E6DE;
    --color-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.45);
  }
}

/* ==========================================================================
   2. Base / reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: inherit; }

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.layout-column {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site > main {
  flex: 1 0 auto;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 72px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header .layout-column {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.wordmark {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.wordmark__owner { color: var(--color-text); }
.wordmark__sep { color: var(--color-border-strong); margin: 0 0.05em; }
.wordmark__repo {
  color: var(--color-accent);
  transition: color var(--duration-base) var(--ease-out);
}
.wordmark:hover .wordmark__repo { color: var(--color-accent-hover); }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-weak);
  transition: color var(--duration-base) var(--ease-out);
}
.social-link:hover,
.social-link:focus-visible {
  color: var(--color-accent);
}
@media (max-width: 640px) {
  .social-link svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   4. GFM alerts (markdown-alert, from `> [!NOTE]` etc.)
   ========================================================================== */

:root {
  --color-alert-note: #1D4ED8;
  --color-alert-note-soft: #EFF6FF;
  --color-alert-tip: #1F7A34;
  --color-alert-tip-soft: #EDFBF0;
  --color-alert-important: #6D28D9;
  --color-alert-important-soft: #F5F0FE;
  --color-alert-warning: #8A6300;
  --color-alert-warning-soft: #FFF8E1;
  --color-alert-caution: #B91C1C;
  --color-alert-caution-soft: #FEF0F0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-alert-note: #8AB4FF;
    --color-alert-note-soft: #142032;
    --color-alert-tip: #7FDB94;
    --color-alert-tip-soft: #12241A;
    --color-alert-important: #C9B3FF;
    --color-alert-important-soft: #201A33;
    --color-alert-warning: #F0CB5C;
    --color-alert-warning-soft: #2A2210;
    --color-alert-caution: #FF9B9B;
    --color-alert-caution-soft: #2A1414;
  }
}

.prose .markdown-alert {
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}
.prose .markdown-alert > :last-child { margin-bottom: 0; }

.prose .markdown-alert-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.prose .markdown-alert-note {
  border-left-color: var(--color-alert-note);
  background: var(--color-alert-note-soft);
}
.prose .markdown-alert-note .markdown-alert-title { color: var(--color-alert-note); }

.prose .markdown-alert-tip {
  border-left-color: var(--color-alert-tip);
  background: var(--color-alert-tip-soft);
}
.prose .markdown-alert-tip .markdown-alert-title { color: var(--color-alert-tip); }

.prose .markdown-alert-important {
  border-left-color: var(--color-alert-important);
  background: var(--color-alert-important-soft);
}
.prose .markdown-alert-important .markdown-alert-title { color: var(--color-alert-important); }

.prose .markdown-alert-warning {
  border-left-color: var(--color-alert-warning);
  background: var(--color-alert-warning-soft);
}
.prose .markdown-alert-warning .markdown-alert-title { color: var(--color-alert-warning); }

.prose .markdown-alert-caution {
  border-left-color: var(--color-alert-caution);
  background: var(--color-alert-caution-soft);
}
.prose .markdown-alert-caution .markdown-alert-title { color: var(--color-alert-caution); }

/* NOTE alerts only: rendered as `<details class="markdown-alert
   markdown-alert-note"><summary class="markdown-alert-title">…` by the
   generator (js-less collapse; see src/markdown.rs), collapsed by default.
   TIP/IMPORTANT/WARNING/CAUTION stay plain, always-visible `<div>`s above —
   warnings should never be hidden behind a click. */
.prose .markdown-alert-note > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  list-style: none; /* Firefox / ::marker-based UAs */
}
.prose .markdown-alert-note > summary::-webkit-details-marker {
  display: none; /* Safari's separate marker mechanism */
}
.prose .markdown-alert-note > summary::marker {
  content: "";
}

/* Chevron drawn with CSS (no icon asset, no JS): a rotated corner that
   points right while collapsed and rotates to point down once opened. */
.prose .markdown-alert-note > summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  border-style: solid;
  border-color: currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform var(--duration-base) var(--ease-out);
}
.prose .markdown-alert-note[open] > summary::after {
  transform: rotate(45deg);
}

.prose .markdown-alert-note > summary:focus-visible {
  outline: 2px solid var(--color-alert-note);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Smooth open/close animation where the platform supports it
   (`::details-content` + `interpolate-size`, both landed together); falls
   back to the browser's native instant toggle everywhere else. */
@supports (interpolate-size: allow-keywords) {
  .prose .markdown-alert-note {
    interpolate-size: allow-keywords;
  }
  .prose .markdown-alert-note::details-content {
    overflow: clip;
    block-size: 0;
    opacity: 0;
    transition:
      block-size var(--duration-base) var(--ease-out),
      opacity var(--duration-base) var(--ease-out),
      content-visibility var(--duration-base) var(--ease-out) allow-discrete;
  }
  .prose .markdown-alert-note[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* ==========================================================================
   5. Typography
   ========================================================================== */

h1, h2, h3, h4 { color: var(--color-text); }

.prose h1,
.article h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.25rem);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prose h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.prose h3 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: var(--space-6);
}

.prose h4 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 700;
  margin-top: var(--space-5);
}

/* Heading self-links (`<a class="anchor" id="...">`, emitted by comrak's
   header_ids for every .prose h1-h6) carry the actual `#fragment` target, so
   the scroll offset for the sticky 72px header goes here, not on the
   heading element itself. */
.prose .anchor {
  scroll-margin-top: 6rem;
}

.article-card__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--space-3) 0 0;
}
.article-card__title a {
  color: var(--color-text);
  text-decoration: none;
}

.prose {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.9;
  max-width: var(--content-width);
}
.prose p { margin: 0 0 1.25em; }
.prose ul,
.prose ol {
  padding-inline-start: 1.4rem;
  line-height: 1.9;
  margin-bottom: 1.25em;
}
.prose strong { font-weight: 700; }
.prose a {
  color: var(--color-accent);
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-strong);
}
.prose a:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentColor;
}
.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  color: var(--color-text-weak);
  font-style: italic;
  margin: var(--space-5) 0;
}
.prose img {
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: var(--space-6) auto;
  display: block;
}
.prose figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-weak);
  text-align: center;
  margin-top: var(--space-2);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: var(--fs-sm);
}
.prose th,
.prose td {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.prose th {
  background: var(--color-surface-sunken);
  font-weight: 700;
}

/* ==========================================================================
   6. Layout: article cards / article page / footer
   ========================================================================== */

.article-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

.article-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
.article-card:hover,
.article-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: var(--color-shadow-hover);
}
.article-card:hover .article-card__title,
.article-card:focus-within .article-card__title {
  color: var(--color-accent);
}
.article-card:hover .article-card__title a,
.article-card:focus-within .article-card__title a {
  color: var(--color-accent);
}
.article-card:hover .article-card__caret,
.article-card:focus-within .article-card__caret {
  transform: translateX(2px);
}

.article-card__date-row,
.article-meta {
  font-family: var(--font-mono);
  color: var(--color-text-weak);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.article-card__date-row { font-size: var(--fs-xs); }
.article-meta {
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  margin-block: var(--space-4) var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.article-card__caret {
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out);
}

.article-card__description {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text-weak);
  line-height: 1.6;
  margin-top: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stretched-link: the title's anchor covers the whole card. */
.article-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.tag-list a { position: relative; z-index: 1; }

article.article {
  padding-block: var(--space-7);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-7);
}
.site-footer .layout-column {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer__copyright {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-weak);
}
.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ==========================================================================
   7. Code blocks
   ========================================================================== */

pre {
  position: relative;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-code-text);
  -webkit-overflow-scrolling: touch;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-text-weak);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

pre::-webkit-scrollbar { height: 6px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
}
pre { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }

:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  color: var(--color-text);
}

/* Tables/images/code wider than the column scroll internally, never the page. */
.prose table,
.prose pre {
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   8. Tags / empty state
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-on-soft);
}
.tag::before { content: "#"; margin-right: 0.15em; opacity: 0.7; }
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.article-meta .tag-list { margin-top: 0; }

.empty-state {
  padding-block: var(--space-8);
  text-align: center;
  color: var(--color-text-weak);
}
.empty-state__cursor {
  font-family: var(--font-mono);
  font-size: 2rem;
  color: var(--color-accent);
  animation: vt-cursor-blink 1.1s steps(2, start) infinite;
}
.empty-state__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  color: var(--color-text);
  margin-top: var(--space-4);
}
.empty-state__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
}
@keyframes vt-cursor-blink {
  50% { opacity: 0; }
}

/* ==========================================================================
   9. View Transitions (cross-document)
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-root-out var(--duration-fast) var(--ease-in) both;
}
::view-transition-new(root) {
  animation: vt-root-in var(--duration-slow) var(--ease-out) both;
}

@keyframes vt-root-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-root-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

::view-transition-group(*) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-group(root) {
  animation-duration: var(--duration-slow);
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 640px) {
  :root { --content-width: 100%; }

  .layout-column { padding-inline: var(--space-4); }

  .site-header { height: 60px; }
  .wordmark { font-size: 1rem; }

  .article-card { padding: var(--space-4); }

  .prose h1, .article h1 { font-size: 1.75rem; }
  .prose h2 { font-size: 1.5rem; }

  .site-footer .layout-column {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .layout-column { padding-inline: var(--space-3); }
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .article-card,
  .article-card__caret {
    transition: none;
  }

  .empty-state__cursor { animation: none; }

  .prose .markdown-alert-note > summary::after {
    transition: none;
  }
  .prose .markdown-alert-note::details-content {
    transition: none;
  }

  .share-button {
    transition: none;
  }
}

/* ==========================================================================
   12. Share button (X)
   ========================================================================== */

/* Sits directly below `.prose` (still inside `<article>`, above the site
   footer): a thin rule + block spacing separates it from the article body,
   matching the `.prose h2` "page break" rule elsewhere in this file. */
.share-section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.share-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-weak);
  text-decoration: none;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  transition:
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}
.share-button svg {
  flex-shrink: 0;
}
.share-button:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.share-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}