/* Standards Body shared styles. Locked visual system. Do not change tokens without a recorded decision. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body { font-family: 'Inter', system-ui, sans-serif; background: #09090b; }

.card { background: #0f0f11; border: 1px solid #1c1c1f; }

.section-line { height: 1px; background: linear-gradient(90deg, transparent, #1c1c1f 20%, #1c1c1f 80%, transparent); }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  background: #22d3ee; color: #09090b; padding: 0.5rem 1rem; border-radius: 0.5rem;
}

/* Long-form article typography (dark canonical publication page) */
.article-body h2 { font-size: 1.35rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; color: #f4f4f5; margin: 2.4rem 0 0.9rem; }
.article-body h3 { font-size: 1.05rem; font-weight: 600; color: #f4f4f5; margin: 1.9rem 0 0.6rem; }
.article-body p { color: #a1a1aa; font-size: 15px; line-height: 1.75; margin: 0 0 1.1rem; }
.article-body ul, .article-body ol { color: #a1a1aa; font-size: 15px; line-height: 1.75; margin: 0 0 1.1rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: 0.35rem; }
.article-body strong { color: #e4e4e7; font-weight: 600; }
.article-body a { color: #22d3ee; text-decoration: none; }
.article-body a:hover { color: #67e8f9; }
.article-body hr { border: none; border-top: 1px solid #1c1c1f; margin: 2.5rem 0; }

/* Expandable status notice */
details.status-notice { background: #0f0f11; border: 1px solid #1c1c1f; border-radius: 0.75rem; }
details.status-notice summary {
  cursor: pointer; list-style: none; padding: 0.85rem 1.25rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #a1a1aa;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
details.status-notice summary::-webkit-details-marker { display: none; }
details.status-notice summary::after { content: '+'; color: #71717a; font-size: 14px; }
details.status-notice[open] summary::after { content: '\2212'; }
details.status-notice .notice-body { padding: 0 1.25rem 1.1rem; }
details.status-notice .notice-body p { font-size: 13px; line-height: 1.7; color: #a1a1aa; margin: 0 0 0.7rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Long-form additions for foundational sources and foundation papers */
.article-body h4 { font-size: 0.95rem; font-weight: 600; color: #f4f4f5; margin: 1.6rem 0 0.5rem; }
.article-body h5, .article-body h6 { font-size: 0.9rem; font-weight: 600; color: #e4e4e7; margin: 1.4rem 0 0.4rem; }
.article-body em { color: #d4d4d8; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: 13px; line-height: 1.55; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid #1c1c1f; padding: 0.45rem 0.65rem; text-align: left; vertical-align: top; color: #a1a1aa; }
.article-body th { color: #e4e4e7; background: #0f0f11; font-weight: 600; }
.article-body blockquote { border-left: 2px solid #1c1c1f; padding-left: 1rem; margin: 0 0 1.1rem; color: #a1a1aa; }
.article-body code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85em; color: #d4d4d8; background: #0f0f11; padding: 0.1rem 0.3rem; border-radius: 4px; }
.status-notice .notice-body table { font-size: 12px; }

/* Badges and contents */
.badge { display:inline-block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:0.02em; color:#a1a1aa; border:1px solid #1c1c1f; border-radius:9999px; padding:0.15rem 0.55rem; margin-right:0.4rem; }
.badge-cyan { color:#22d3ee; border-color:#164e63; }
.toc { margin-top: 0.75rem; }
.toc-list { margin:0; padding-left:1.2rem; font-size:13px; line-height:1.9; color:#a1a1aa; }
.toc-list a { color:#a1a1aa; text-decoration:none; }
.toc-list a:hover { color:#22d3ee; }

.lf-btn { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px; color:#a1a1aa; border:1px solid #1c1c1f; background:#0f0f11; border-radius:9999px; padding:0.3rem 0.8rem; cursor:pointer; }
.lf-btn:hover { color:#f4f4f5; }
.lf-active { color:#22d3ee; border-color:#164e63; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Library filter refinements */
.lf-btn { appearance:none; -webkit-appearance:none; display:inline-block; white-space:nowrap; line-height:1.2;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px; color:#a1a1aa;
  border:1px solid #1c1c1f; background:#0f0f11; border-radius:9999px; padding:0.35rem 0.85rem; cursor:pointer; }
.filter-row { display:flex; gap:0.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:2px; }
.filter-row::-webkit-scrollbar { display:none; }
.filter-wrap { display:flex; flex-wrap:wrap; gap:0.5rem; }
.topic-filter summary { display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; list-style:none;
  color:#a1a1aa; padding:0.35rem 0; }
.topic-filter summary::-webkit-details-marker { display:none; }
.topic-filter summary:hover { color:#f4f4f5; }
.tf-caret { width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform 0.15s ease; margin-top:-3px; }
.topic-filter[open] .tf-caret { transform:rotate(-135deg); margin-top:3px; }

/* Status dot with breathing glow */
.status-dot { display:inline-block; width:7px; height:7px; border-radius:9999px; background:#22d3ee;
  box-shadow:0 0 6px 1px rgba(34,211,238,0.55); margin-right:0.6rem; vertical-align:2px;
  animation:dotpulse 3s ease-in-out infinite; }
@keyframes dotpulse {
  0%,100% { box-shadow:0 0 4px 0 rgba(34,211,238,0.35); opacity:0.75; }
  50% { box-shadow:0 0 10px 3px rgba(34,211,238,0.7); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .status-dot { animation:none; } }


/* Badge groups: clean wrap on desktop, single scrolling row on mobile */
.badges { display:flex; flex-wrap:wrap; gap:0.45rem; align-items:center; }
.badges .badge { margin:0; }
@media (max-width: 640px) {
  .badges { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .badges::-webkit-scrollbar { display:none; }
}
input[type="search"]:focus-visible, input[type="text"]:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:none; border-color:#0891b2; box-shadow:0 0 0 1px #0891b2; }
#lib-controls { border-bottom:1px solid #1c1c1f; padding-bottom:1.5rem; }

/* Filter interaction overhaul: reference-grade states */
.lf-btn { min-height:32px; transition:color .15s ease, background-color .15s ease, border-color .15s ease; }
.lf-btn:hover { color:#f4f4f5; border-color:#3f3f46; }
.lf-btn:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }
#lib-type-filters .lf-btn.lf-active { background:#22d3ee; border-color:#22d3ee; color:#09090b; font-weight:500; }
#lib-type-filters .lf-btn.lf-active:hover { background:#67e8f9; border-color:#67e8f9; color:#09090b; }
#lib-tag-filters .lf-btn.lf-active { background:rgba(34,211,238,0.14); border-color:#0891b2; color:#67e8f9; }
#lib-tag-filters .lf-btn.lf-active:hover { border-color:#22d3ee; color:#a5f3fc; }
#lib-tag-filters .lf-btn.lf-active::before { content:"\2713\00a0"; }
.lf-clear { appearance:none; -webkit-appearance:none; background:none; border:none; cursor:pointer; padding:0;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px; color:#22d3ee; }
.lf-clear:hover { color:#67e8f9; text-decoration:underline; }
@media (max-width:640px) {
  .filter-row { -webkit-mask-image:linear-gradient(to right, black 0, black calc(100% - 32px), transparent);
    mask-image:linear-gradient(to right, black 0, black calc(100% - 32px), transparent); }
}
/* Card interactivity */
.lib-item { transition:border-color .2s ease, background-color .2s ease; }
.lib-item:hover { border-color:rgba(34,211,238,0.3); }
.lib-item:has(a:focus-visible) { border-color:#22d3ee; }

/* ============ Final design layer ============ */

/* 1. Film grain: kills flat-black banding, adds premium texture */
body::before { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:128px 128px; }


/* 3. Selection color: the small signature detail */
::selection { background:rgba(34,211,238,0.28); color:#f4f4f5; }

/* 4. Refined scrollbar on dark */
* { scrollbar-width:thin; scrollbar-color:#27272a transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#27272a; border-radius:9999px; border:2px solid #09090b; }
::-webkit-scrollbar-thumb:hover { background:#3f3f46; }

/* 5. Gradient hairlines instead of flat rules */
.section-line { height:1px; border:0; background:linear-gradient(to right, transparent, #1c1c1f 18%, #1c1c1f 82%, transparent); }

/* 6. Primary buttons: soft glow, gentle lift */
a.bg-cyan, button.bg-cyan { box-shadow:0 0 22px rgba(34,211,238,0.18); transition:box-shadow .2s ease, transform .2s ease, background-color .2s ease; }
a.bg-cyan:hover, button.bg-cyan:hover { box-shadow:0 0 32px rgba(34,211,238,0.3); transform:translateY(-1px); }
a.bg-cyan:active, button.bg-cyan:active { transform:translateY(0); }

/* 7. Card entrance reveals (JS adds fx to html; no-JS stays fully visible) */
.fx .card { transition:opacity .55s ease, transform .55s ease, border-color .2s ease, background-color .2s ease; }
.fx .card:not(.in) { opacity:0; transform:translateY(10px); }
.fx .card.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .fx .card:not(.in) { opacity:1; transform:none; }
  a.bg-cyan, button.bg-cyan { transition:none; }
  a.bg-cyan:hover, button.bg-cyan:hover { transform:none; }
}

/* 8. Logo micro-interaction */
header a.group img { transition:transform .2s ease; }
header a.group:hover img { transform:scale(1.05); }

/* Mobile finish */
* { -webkit-tap-highlight-color: transparent; }
select { appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; }


/* Header pinning: sticky, compositor-driven, cannot detach on iOS momentum scroll */
body > header { position:-webkit-sticky !important; position:sticky !important; top:0 !important;
  padding-top:env(safe-area-inset-top, 0px); }
main#main { padding-top:0 !important; }
#mobile-menu { padding-bottom:env(safe-area-inset-bottom, 0px); }
h1[id], h2[id], h3[id], h4[id] { scroll-margin-top:calc(4.5rem + env(safe-area-inset-top, 0px)); }

/* Mobile: solid black shield above the header; nothing can render above the menu bar */
@media (max-width: 767px) {
  body > header { overflow:visible; }
  body > header::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:240px;
    background:#09090b; pointer-events:none; }
}