/* 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: #7d7d86; 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 below the system status bar. The page no longer claims the
   status-bar zone (viewport-fit=cover removed); Safari fills that band with the page
   background color (#09090b via theme-color and the html background), so no content
   can ever render above the header, scrolling, rubber-banding, or with the menu open. */
body > header { position:-webkit-sticky !important; position:sticky !important; top:0 !important; }

/* Scroll containment: the document never scrolls; the body does. iOS Safari paints the
   scrolling layer under the translucent status bar and clips every pinned element to the
   region below it, so no positioned header, padding, or shield can cover that band. With
   scrolling moved inside the body, the backdrop behind the status bar is the non-scrolling
   html canvas (#09090b): solid in every state, scrolling, overscroll, and menu open. */
html { height:100%; overflow:hidden; }
body { height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; }
main#main { padding-top:0 !important; }
h1[id], h2[id], h3[id], h4[id] { scroll-margin-top:4.5rem; }