/* Styles for the generated Notes pages (list + article).
   Complements site.css / design tokens; keep the same quiet look as the
   hand-written pages — no new colors, gradients, or decorations. */

.note-container { max-width: 720px; margin: 0 auto; }

.note-h1 { margin: 0 0 10px; font-size: clamp(24px, 6vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere; }

/* ── List page ── */
.note-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.note-filter-btn { padding: 6px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); font-size: 13px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: color 120ms, border-color 120ms; }
.note-filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.note-filter-btn-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.note-filter-btn-active:hover { color: #fff; }
.note-filter-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.note-cards { display: flex; flex-direction: column; gap: 14px; }
.note-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px 22px; box-shadow: var(--shadow-card); }
.note-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 8px; }
.note-card-meta time { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.note-card-cat { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-accent); }
.note-card-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; }
.note-card-title a { color: var(--color-text-primary); text-decoration: none; }
.note-card-title a:hover { color: var(--color-accent); }
.note-card-desc { margin: 0; font-size: 13.5px; line-height: var(--leading-normal); color: var(--color-text-secondary); text-wrap: pretty; }
.note-card-tags { margin: 10px 0 0; font-size: 12px; color: var(--color-text-disabled); }
.note-empty { margin: 24px 0 0; font-size: 14px; color: var(--color-text-secondary); }

/* ── Article page ── */
.note-crumb { margin: 0 0 14px; font-size: 13px; color: var(--color-text-secondary); }
.note-crumb a { color: var(--color-text-secondary); text-decoration: none; }
.note-crumb a:hover { color: var(--color-accent); }

.note-desc { margin: 0 0 12px; font-size: 15px; line-height: var(--leading-normal); color: var(--color-text-secondary); text-wrap: pretty; }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; }
.note-meta time { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary); }
.note-badge { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-accent); }
.note-badge-plain { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.note-lang-note { margin: 0 0 18px; font-size: 13px; }
.note-hero { margin: 0 0 22px; }
.note-hero img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); }

.note-body { font-size: 15px; line-height: 1.9; color: var(--color-text-primary); }
.note-body p { margin: 0 0 1.4em; text-wrap: pretty; }
.note-body h2 { margin: 2em 0 0.7em; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; }
.note-body h3 { margin: 1.7em 0 0.6em; font-size: 16px; font-weight: 700; line-height: 1.4; }
.note-body h4 { margin: 1.5em 0 0.5em; font-size: 15px; font-weight: 700; }
.note-body ul, .note-body ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.note-body li { margin: 0.3em 0; }
.note-body blockquote { margin: 0 0 1.4em; padding: 2px 0 2px 16px; border-left: 3px solid var(--color-border-strong); color: var(--color-text-secondary); }
.note-body blockquote p { margin: 0; }
.note-body pre { margin: 0 0 1.4em; padding: 14px 16px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow-x: auto; }
.note-body pre code { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.note-body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface-sunken); padding: 1px 5px; border-radius: 4px; }
.note-body pre code { background: none; padding: 0; }
.note-body img { max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.note-body hr { margin: 2em auto; border: 0; border-top: 1px solid var(--color-border); }
.note-body a { color: var(--color-accent); }

.note-tags { margin: 18px 0 0; font-size: 12.5px; color: var(--color-text-disabled); }

.note-subheading { margin: 0 0 12px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.note-products, .note-related, .note-about { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.note-product-line { margin: 0 0 12px; font-size: 13.5px; line-height: var(--leading-normal); color: var(--color-text-secondary); }
.note-product-line a { color: var(--color-accent); }
.note-related-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.note-related-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 14px; }
.note-related-item time { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-secondary); flex-shrink: 0; }
.note-related-item a { color: var(--color-text-primary); font-weight: 600; text-decoration: none; }
.note-related-item a:hover { color: var(--color-accent); }
.note-about p { margin: 0 0 10px; font-size: 13.5px; line-height: var(--leading-normal); color: var(--color-text-secondary); text-wrap: pretty; }
.note-about a { color: var(--color-accent); }
.note-back { margin: 30px 0 0; font-size: 14px; }
.note-back a { color: var(--color-text-secondary); text-decoration: none; }
.note-back a:hover { color: var(--color-accent); }

/* Active state for the anchor-based language switch on Notes pages
   (buttons elsewhere get this styling inline from app.js). */
a.lang-btn { text-decoration: none; }
a.lang-btn-active { background: var(--color-accent) !important; color: #fff !important; }