/* ==========================================================================
   CAS · Recurrent Neural Networks — design system
   styles.css : tokens, base, layout, typography, shared components
   ========================================================================== */

:root {
  /* surfaces */
  --bg0: #05070d;
  --bg1: #0a101c;
  --panel: rgba(148, 163, 184, 0.055);
  --panel-2: rgba(148, 163, 184, 0.095);
  --panel-solid: #0d1424;
  --line: rgba(148, 163, 184, 0.16);
  --line-2: rgba(148, 163, 184, 0.30);

  /* text */
  --text: #e9eef7;
  --text-2: #a9b6c9;
  --text-3: #66748c;

  /* accents */
  --teal: #5eead4;
  --indigo: #818cf8;
  --violet: #a78bfa;
  --amber: #fbbf24;
  --rose: #fb7185;
  --green: #34d399;
  --sky: #38bdf8;
  --orange: #fb923c;

  /* typography */
  --font-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* layout */
  --wrap: 1240px;
  --radius: 16px;
  --radius-s: 10px;
  --sec-pad: clamp(4.5rem, 9vh, 7.5rem);
  --rail-w: 260px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 115%; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  overflow-x: clip;
  min-height: 100vh;
}

/* layered backdrop: radial glows + architectural grid */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 650px at 10% -5%, rgba(94, 234, 212, 0.08), transparent 60%),
    radial-gradient(1200px 750px at 95% 15%, rgba(129, 140, 248, 0.08), transparent 60%),
    radial-gradient(1000px 900px at 50% 115%, rgba(167, 139, 250, 0.06), transparent 65%);
}

body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.45;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(1200px 800px at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(1200px 800px at 50% 0%, #000 30%, transparent 85%);
}

::selection { background: rgba(94, 234, 212, 0.3); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--font-mono); letter-spacing: 0.08em; font-size: 0.78rem; text-transform: uppercase; }
.mini { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.6rem; }
.micro { font-size: 0.85rem; margin: 0.6rem 0 0; }
.dim { color: var(--text-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--teal); color: #042220; font-weight: 600; padding: 0.55rem 1rem;
  border-radius: 8px; transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

.acc-teal { color: var(--teal); }
.acc-indigo { color: var(--indigo); }
.acc-violet { color: var(--violet); }
.acc-amber { color: var(--amber); }
.acc-rose { color: var(--rose); }
.acc-green { color: var(--green); }
.acc-sky { color: var(--sky); }

.hl-mono {
  font-family: var(--font-mono); color: var(--teal); background: rgba(94, 234, 212, 0.09);
  padding: 0.06em 0.35em; border-radius: 6px;
}

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.section { padding-block: var(--sec-pad); position: relative; scroll-margin-top: 1rem; }

@media (min-width: 1100px) {
  body { padding-left: 0; transition: padding-left 0.28s ease; }
  body.rail-open { padding-left: var(--rail-w); }
}

.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 1.4rem; align-items: start; }
.sub-block { margin-top: clamp(3rem, 7vh, 4.6rem); }
.sub-title { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 0.35rem; }
.sub-title::before { content: "§"; color: var(--teal); font-family: var(--font-mono); font-size: 0.72em; margin-right: 0.55rem; vertical-align: 0.12em; }

/* section headers */
.sec-head { margin-bottom: clamp(1.8rem, 4vh, 2.8rem); max-width: 860px; }
.sec-head.slim { margin-bottom: 1.4rem; }
.kicker {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.18em;
  color: var(--teal); text-transform: uppercase; display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.1rem;
}
.knum {
  display: inline-grid; place-items: center; min-width: 2.4rem; height: 1.9rem; padding-inline: 0.4rem;
  border: 1px solid rgba(94, 234, 212, 0.4); border-radius: 7px; color: var(--teal); background: rgba(94, 234, 212, 0.07);
}
.sec-head h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; }
.sec-head h2 em, .hero-title .grad { font-style: normal; }
.sec-head h2 em {
  color: transparent; background: linear-gradient(100deg, var(--teal), var(--indigo) 75%);
  -webkit-background-clip: text; background-clip: text;
}
.sec-head .lede { color: var(--text-2); font-size: 1.14rem; max-width: 60ch; margin: 0; line-height: 1.7; }

/* ---------------------------------------------------------------- panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  position: relative;
}
.panel::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px;
  border-top: 2px solid var(--line-2); border-left: 2px solid var(--line-2);
  border-top-left-radius: var(--radius);
}

.note-card {
  display: flex; gap: 1rem; align-items: baseline;
  border: 1px solid rgba(251, 191, 36, 0.28); background: rgba(251, 191, 36, 0.05);
  border-radius: var(--radius); padding: 1rem 1.3rem; margin-top: 1.4rem;
}
.note-card p { margin: 0; color: var(--text-2); }
.note-card .mini { margin: 0; white-space: nowrap; color: var(--amber); }

.warn-banner {
  display: flex; gap: 0.8rem; align-items: flex-start;
  border: 1px solid rgba(251, 113, 133, 0.45); background: rgba(251, 113, 133, 0.08);
  color: #ffd7de; border-radius: var(--radius-s); padding: 0.85rem 1.1rem; font-size: 0.94rem;
}
.good-banner {
  border: 1px solid rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.07);
  color: #c9f7e5; border-radius: var(--radius-s); padding: 0.85rem 1.1rem; font-size: 0.94rem;
}

.formula {
  font-family: var(--font-mono); font-size: 0.96rem; color: #d9e6f5;
  background: rgba(8, 13, 24, 0.8); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 0.8rem 1.1rem; overflow-x: auto; white-space: nowrap; margin: 0.8rem 0;
}
.formula b { color: var(--teal); font-weight: 600; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 9px; padding: 0.65rem 1.15rem;
  color: var(--text); background: rgba(8, 13, 24, 0.5); transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.btn:hover { border-color: var(--teal); background: rgba(94, 234, 212, 0.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-accent { border-color: rgba(94, 234, 212, 0.55); background: rgba(94, 234, 212, 0.12); color: var(--teal); }
.btn-accent:hover { background: rgba(94, 234, 212, 0.22); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[aria-pressed="true"], .btn.on { border-color: var(--teal); background: rgba(94, 234, 212, 0.16); color: var(--teal); }

/* ---------------------------------------------------------------- tabs */
.tabbar { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; }
.tab {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2);
  background: rgba(8, 13, 24, 0.45); transition: all 0.18s;
}
.tab:hover { border-color: var(--line-2); color: var(--text); }
.tab[aria-selected="true"] { border-color: var(--teal); color: #05231f; background: var(--teal); font-weight: 600; }
.tabpanel { animation: panelIn 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- bridges */
.bridge {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center;
  padding: 2.4rem 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.03), transparent);
}
.bridge p { margin: 0; max-width: 50ch; color: var(--text-2); font-size: 1.14rem; font-style: italic; }
.bridge .arw { color: var(--teal); font-size: 0.85rem; animation: cueDrop 2.2s ease-in-out infinite; }
@keyframes cueDrop { 0%, 100% { transform: translateY(-3px); opacity: 0.4; } 50% { transform: translateY(3px); opacity: 1; } }

/* ------------------------------------------------------------ scroll spy */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: transparent; }
#scrollFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--indigo), var(--violet)); transition: width 0.1s linear; }

/* ------------------------------------------------------------- nav rail */
.rail {
  display: none; position: fixed; z-index: 100; inset: 0 auto 0 0; width: var(--rail-w);
  flex-direction: column; gap: 1.2rem; padding: 1.4rem 1rem;
  border-right: 1px solid var(--line); background: rgba(5, 8, 14, 0.88); backdrop-filter: blur(16px);
  overflow-y: auto;
}
@media (min-width: 1100px) {
  .rail { display: flex; transform: translateX(-100%); transition: transform 0.28s ease; }
  body.rail-open .rail { transform: translateX(0); }
}
.rail-toggle {
  display: none; position: fixed; top: 1rem; right: 1rem; z-index: 120;
  align-items: center; gap: 0.55rem; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--text-2); background: rgba(8, 13, 24, 0.85); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-radius: 9px; padding: 0.55rem 0.85rem;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.rail-toggle:hover { color: var(--teal); border-color: rgba(94, 234, 212, 0.5); }
.rail-toggle .ico { font-size: 0.95rem; line-height: 1; color: var(--teal); }
.rail-toggle[aria-expanded="true"] .ico { color: var(--rose); }
@media (min-width: 1100px) { .rail-toggle { display: inline-flex; } }

.rail-brand { display: flex; gap: 0.7rem; align-items: center; color: var(--text); text-decoration: none; }
.rail-brand:hover { text-decoration: none; }
.brand-logo { width: 2.7rem; height: 2.7rem; object-fit: contain; border-radius: 9px; flex: none; background: rgba(8, 13, 24, 0.5); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt strong { font-family: var(--font-display); letter-spacing: 0.04em; }
.brand-txt small { color: var(--text-3); font-size: 0.68rem; letter-spacing: 0.05em; }

.rail-list { display: flex; flex-direction: column; gap: 3px; counter-reset: rail; }
.rail-list a {
  display: flex; gap: 0.65rem; align-items: baseline; padding: 0.45rem 0.65rem; border-radius: 8px;
  color: var(--text-2); font-size: 0.88rem; text-decoration: none; border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.rail-list a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.rail-list a.active {
  color: var(--teal); background: rgba(94, 234, 212, 0.08); border-left-color: var(--teal); font-weight: 500;
}
.rail-list a .r-num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); min-width: 1.8rem; }
.rail-list a.active .r-num { color: var(--teal); }

.rail-foot {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; font-size: 0.7rem;
}

/* mobile toc */
.toc-fab {
  position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 120;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--teal); color: #042220; font-size: 1.3rem;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(94, 234, 212, 0.35);
}
@media (min-width: 1100px) { .toc-fab { display: none; } }
.toc-sheet { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: flex-end; }
.toc-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 10, 0.7); backdrop-filter: blur(8px); }
.toc-panel {
  position: relative; width: min(340px, 85vw); height: 100%; background: #070c17;
  border-left: 1px solid var(--line); padding: 1.6rem; display: flex; flex-direction: column; gap: 1.2rem;
  overflow-y: auto;
}

/* scroll reveal animations */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].revealed, html.static [data-reveal] {
  opacity: 1; transform: none;
}