/* Lynx Cortex — small UX polish. Theme colors come from the Material palette
   (indigo, light/dark via toggle); never hard-code colors here.            */

/* Slightly wider readable column for theory-heavy content. */
.md-typeset {
  font-size: 0.82rem;
}

.md-grid {
  max-width: 68rem;
}

/* Hero block on the landing page. */
.hero {
  margin: 1.5rem 0 2rem;
  padding: 1.5rem 1.75rem;
  border-radius: 0.5rem;
  background: var(--md-code-bg-color);
  border-left: 4px solid var(--md-primary-fg-color);
}

.hero h1 {
  margin-top: 0;
  font-weight: 700;
}

.hero p {
  margin-bottom: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  opacity: 0.92;
}

/* Polish for Material's `grid cards` markdown. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Admonition titles slightly tighter. */
.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
}

/* Inline Spanish-callout marker (lines beginning with the flag). */
.md-typeset blockquote p:first-child {
  line-height: 1.5;
}

/* Lab checklist style for explicit lab steps. */
.md-typeset ul.lab-checklist {
  list-style: none;
  padding-left: 0;
}

.md-typeset ul.lab-checklist > li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.35rem;
}

.md-typeset ul.lab-checklist > li::before {
  content: "\25A1"; /* hollow square */
  position: absolute;
  left: 0.2rem;
  top: 0;
  color: var(--md-primary-fg-color);
  font-weight: 700;
}

.md-typeset ul.lab-checklist > li.done::before {
  content: "\2611"; /* ballot box with check */
}

/* Tighten code-copy button presence. */
.md-typeset .md-clipboard {
  opacity: 0.55;
}

.md-typeset .md-clipboard:hover {
  opacity: 1;
}

/* Footer spacing. */
.md-footer-meta__inner {
  padding-block: 0.6rem;
}

/* Language toggle button injected by docs/javascripts/extra.js. The button
   lives in the Material header alongside palette + search controls. */
.lynx-lang-toggle {
  width: auto;
  min-width: 2.4rem;
  padding-inline: 0.55rem;
  margin-right: 0.2rem;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  border-radius: 0.2rem;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  line-height: 1;
}

.lynx-lang-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ════════════════════════════════════════════════════════════════════════
   Study planner (docs/study-plan.md) — interactive Gantt + per-phase cards.
   Colors use Material tokens where possible; tier accents come from JS (HSL).
   ════════════════════════════════════════════════════════════════════════ */

.lynx-study {
  margin: 1rem 0 1.5rem;
}

.lynx-study-paces {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
@media (max-width: 44rem) {
  .lynx-study-paces { grid-template-columns: repeat(2, 1fr); }
}

.lynx-pace {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.55rem;
  background: var(--md-code-bg-color);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  font: inherit;
  text-align: left;
}
.lynx-pace:hover { transform: translateY(-2px); }
.lynx-pace.is-active {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 0 1px var(--md-primary-fg-color) inset;
}
.lynx-pace-name { font-weight: 700; font-size: 0.92rem; }
.lynx-pace-blurb { font-size: 0.72rem; opacity: 0.7; }

.lynx-study-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
@media (max-width: 44rem) {
  .lynx-study-summary { grid-template-columns: repeat(2, 1fr); }
}
.lynx-stat {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.85rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
  border-left: 3px solid var(--md-primary-fg-color);
}
.lynx-stat-num { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.lynx-stat-lab { font-size: 0.7rem; opacity: 0.75; margin-top: 0.15rem; }

/* ── Gantt ─────────────────────────────────────────────────────────────── */

.lynx-gantt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 0.4rem 0 0.9rem;
  font-size: 0.72rem;
}
.lynx-legend-chip { display: inline-flex; align-items: center; gap: 0.35rem; opacity: 0.85; }
.lynx-legend-chip i { width: 0.7rem; height: 0.7rem; border-radius: 2px; display: inline-block; }

.lynx-gantt-grid { display: flex; flex-direction: column; gap: 2px; }
.lynx-gantt-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  padding: 1px 0;
  border-radius: 3px;
}
.lynx-gantt-row:hover { background: var(--md-code-bg-color); }
.lynx-gantt-label { font: 700 0.72rem/1 var(--md-code-font-family, monospace); opacity: 0.7; text-align: right; }
.lynx-gantt-track { position: relative; height: 1.15rem; background: var(--md-default-fg-color--lightest); border-radius: 3px; }
.lynx-gantt-bar {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 3px;
  min-width: 3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: left 380ms cubic-bezier(0.4, 0, 0.2, 1), width 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lynx-gantt-bar.is-ext { opacity: 0.55; }
.lynx-gantt-bar-lab {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  padding: 0 0.3rem;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* ── Per-phase cards ──────────────────────────────────────────────────── */

.lynx-study-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.8rem;
}
.lynx-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-primary-fg-color);
  border-radius: 0.55rem;
  padding: 0.75rem 0.85rem;
  background: var(--md-default-bg-color);
  scroll-margin-top: 4rem;
}
.lynx-card:target { box-shadow: 0 0 0 2px var(--md-primary-fg-color); }
.lynx-card-head { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.5rem; }
.lynx-card-id { font: 800 0.8rem/1 var(--md-code-font-family, monospace); opacity: 0.6; }
.lynx-card-title { font-weight: 700; font-size: 0.92rem; }
.lynx-card-metrics { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-bottom: 0.55rem; }
.lynx-kv { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; opacity: 0.85; }
.lynx-kv b { font-size: 0.92rem; opacity: 1; }

.lynx-meter { display: inline-flex; gap: 2px; }
.lynx-meter i { width: 0.42rem; height: 0.42rem; border-radius: 50%; display: inline-block; background: var(--md-default-fg-color--lightest); }
.lynx-meter i.on { background: var(--md-primary-fg-color); }

.lynx-split { display: flex; height: 1.05rem; border-radius: 3px; overflow: hidden; margin-bottom: 0.55rem; font-size: 0.62rem; }
.lynx-split-theory, .lynx-split-lab { display: flex; align-items: center; justify-content: center; color: #fff; white-space: nowrap; overflow: hidden; transition: width 380ms ease; }
.lynx-split-theory { background: color-mix(in srgb, var(--md-primary-fg-color) 78%, #000 0%); }
.lynx-split-lab { background: color-mix(in srgb, var(--md-primary-fg-color) 34%, transparent); color: var(--md-default-fg-color); }

.lynx-card-skills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.55rem; }
.lynx-chip { font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 0.7rem; background: var(--md-code-bg-color); border: 1px solid var(--md-default-fg-color--lightest); }
.lynx-milestone { font-size: 0.78rem; line-height: 1.45; opacity: 0.92; }
.lynx-milestone b { color: var(--md-primary-fg-color); }

/* ════════════════════════════════════════════════════════════════════════
   Concept tooltips (glossary-tooltips.js) — hover-to-explain inline terms.
   ════════════════════════════════════════════════════════════════════════ */

.lynx-concept {
  position: relative;
  border-bottom: 1px dotted var(--md-primary-fg-color);
  cursor: help;
}
.lynx-concept:focus { outline: 2px solid var(--md-primary-fg-color); outline-offset: 2px; }

.lynx-concept-card {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 30;
  width: min(20rem, 78vw);
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  font-size: 0.74rem;
  line-height: 1.45;
  white-space: normal;
  text-align: left;
  cursor: auto;
}
.lynx-concept:hover > .lynx-concept-card,
.lynx-concept:focus > .lynx-concept-card,
.lynx-concept:focus-within > .lynx-concept-card {
  display: flex;
}
.lynx-concept-card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1rem;
  border: 6px solid transparent;
  border-top-color: var(--md-default-fg-color--lightest);
}
.lynx-concept-term {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  font-size: 0.78rem;
}
.lynx-concept-def { opacity: 0.92; }
.lynx-concept-link {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
}

@media print {
  .lynx-concept { border-bottom: none; }
  .lynx-concept-card { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Interactive widgets (lynx-widgets.js) — flow, bytes, softmax, tensor,
   attention, conceptmap. Theme-aware via Material tokens.
   ════════════════════════════════════════════════════════════════════════ */

.lynx-widget {
  margin: 1.1rem 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  background: var(--md-code-bg-color);
}
.lynx-widget > script { display: none; }
.lw-title { font-weight: 700; margin: 0 0 0.6rem; }
.lw-caption { font-size: 0.72rem; opacity: 0.7; margin: 0.5rem 0 0; }
.lw-tag {
  font-size: 0.68rem; padding: 0.08rem 0.4rem; border-radius: 0.6rem;
  background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest);
}

/* conceptmap */
.lw-cmap { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.lw-cmap-col { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 0; min-width: 7rem; }
.lw-cmap-mid { flex: 0 0 auto; }
.lw-cmap-arrow { font-size: 1.3rem; opacity: 0.4; }
.lw-node {
  display: flex; flex-direction: column; padding: 0.4rem 0.55rem; border-radius: 0.45rem;
  background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest);
  text-decoration: none; color: inherit; transition: transform 110ms ease, border-color 110ms ease;
}
.lw-node:hover { transform: translateY(-1px); border-color: var(--md-primary-fg-color); }
.lw-node-id { font: 700 0.66rem/1 var(--md-code-font-family, monospace); opacity: 0.6; }
.lw-node-title { font-size: 0.74rem; line-height: 1.25; }
.lw-node-self {
  background: color-mix(in srgb, var(--md-primary-fg-color) 14%, transparent);
  border-color: var(--md-primary-fg-color); box-shadow: 0 0 0 1px var(--md-primary-fg-color) inset;
}
.lw-node-self .lw-node-title { font-weight: 700; }
.lw-node-empty { opacity: 0.5; font-size: 0.72rem; font-style: italic; }
.lw-cmap-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.7rem; }
.lw-cmap-tags-label { font-size: 0.72rem; opacity: 0.7; font-weight: 600; }

/* flow */
.lw-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.lw-flow-node {
  position: relative; flex: 1 1 0; min-width: 6.5rem; display: flex; flex-direction: column;
  gap: 0.15rem; padding: 0.55rem 0.6rem; border-radius: 0.5rem;
  background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest);
}
.lw-flow-node.is-ok { border-color: hsl(140, 50%, 45%); }
.lw-flow-node.is-active { border-color: var(--md-primary-fg-color); box-shadow: 0 0 0 1px var(--md-primary-fg-color) inset; }
.lw-flow-label { font-weight: 700; font-size: 0.78rem; }
.lw-flow-sub { font-size: 0.66rem; opacity: 0.65; }
.lw-flow-detail {
  font-size: 0.68rem; opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 160ms ease, max-height 160ms ease, margin 160ms ease;
}
.lw-flow-node:hover .lw-flow-detail { opacity: 0.85; max-height: 6rem; margin-top: 0.3rem; }
.lw-flow-conn { position: relative; flex: 0 0 1.8rem; display: flex; align-items: center; justify-content: center; }
.lw-flow-conn::before { content: ""; height: 2px; width: 100%; background: var(--md-default-fg-color--lighter); }
.lw-flow-pulse {
  position: absolute; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--md-primary-fg-color); animation: lw-flow-move 2.2s linear infinite;
}
@keyframes lw-flow-move { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: 100%; opacity: 0; } }
.lw-flow-edge { position: absolute; top: -0.9rem; font-size: 0.6rem; opacity: 0.7; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .lw-flow-pulse { animation: none; opacity: 0.8; } }

/* bytes */
.lw-bytes-label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.76rem; font-weight: 600; }
.lw-bytes-input {
  font: inherit; padding: 0.4rem 0.55rem; border-radius: 0.4rem; font-weight: 400;
  border: 1px solid var(--md-default-fg-color--lighter); background: var(--md-default-bg-color); color: inherit;
}
.lw-bytes-stat { font-size: 0.74rem; margin: 0.6rem 0 0.35rem; }
.lw-bytes-buf {
  font-size: 0.7rem; line-height: 1.4; padding: 0.55rem 0.6rem; border-radius: 0.4rem;
  background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest);
  white-space: pre-wrap; word-break: break-all; max-height: 9rem; overflow: auto;
}
.lw-bytes-cells { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.lw-byte-cell { display: flex; flex-direction: column; align-items: center; padding: 0.2rem 0.3rem; border-radius: 0.35rem; background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest); }
.lw-byte-ch { font-weight: 700; font-size: 0.8rem; }
.lw-byte-vals { font: 0.6rem/1.2 var(--md-code-font-family, monospace); opacity: 0.7; }

/* softmax */
.lw-softmax-ctrl { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.lw-softmax-cap { font-size: 0.76rem; font-weight: 600; }
.lw-softmax-slider { flex: 1 1 auto; accent-color: var(--md-primary-fg-color); }
.lw-softmax-val { font: 700 0.8rem var(--md-code-font-family, monospace); min-width: 2.6rem; text-align: right; }
.lw-sbar-row { display: grid; grid-template-columns: 4.5rem 1fr 3rem; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.lw-sbar-label { font-size: 0.74rem; }
.lw-sbar-track { height: 0.9rem; background: var(--md-default-fg-color--lightest); border-radius: 3px; overflow: hidden; }
.lw-sbar-fill { display: block; height: 100%; background: var(--md-primary-fg-color); transition: width 200ms ease; }
.lw-sbar-pct { font: 0.72rem var(--md-code-font-family, monospace); text-align: right; opacity: 0.8; }

/* tensor */
.lw-tensor-grid { display: grid; gap: 3px; margin: 0.4rem 0; max-width: 22rem; }
.lw-tensor-cell {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1.6 / 1;
  font: 0.74rem var(--md-code-font-family, monospace); border-radius: 0.3rem;
  background: var(--md-default-bg-color); border: 1px solid var(--md-default-fg-color--lightest); cursor: crosshair;
}
.lw-tensor-cell.is-hot { background: color-mix(in srgb, var(--md-primary-fg-color) 30%, transparent); border-color: var(--md-primary-fg-color); }
.lw-tensor-info { font-size: 0.74rem; min-height: 1.2rem; }

/* attention */
.lw-attn-table { border-collapse: collapse; font-size: 0.74rem; margin: 0.3rem 0; }
.lw-attn-table th { font-weight: 700; padding: 0.25rem 0.4rem; opacity: 0.85; }
.lw-attn-rowh { text-align: right; }
.lw-attn-cell { width: 2.7rem; height: 2rem; text-align: center; font: 0.68rem var(--md-code-font-family, monospace); border-radius: 0.25rem; }
.lw-attn-cell.is-masked { opacity: 0.25; }

@media print {
  .lw-flow-pulse { display: none; }
  .lw-bytes-input, .lw-softmax-slider { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   University branding — boot splash, section banners, widget brand, about.
   ════════════════════════════════════════════════════════════════════════ */

/* Boot splash (overrides/main.html + bootsplash.js). Black to match the logo. */
#lynx-splash {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 480ms ease, visibility 480ms ease;
}
#lynx-splash.is-hiding { opacity: 0; visibility: hidden; }
.lynx-splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.lynx-splash-inner img { width: min(420px, 76vw); height: auto; }
.lynx-splash-bar {
  width: min(280px, 60vw); height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.12); overflow: hidden;
}
.lynx-splash-bar span {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, #3b82f6, #a855f7);
  animation: lynx-splash-slide 1.1s ease-in-out infinite;
}
@keyframes lynx-splash-slide {
  0% { transform: translateX(-120%); } 100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) { .lynx-splash-bar span { animation: none; width: 100%; } }

/* Per-section header banner (section-logos.js). */
.cx-section-banner {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  background: var(--md-code-bg-color);
}
.cx-section-banner img { height: 54px; width: auto; border-radius: 0.4rem; }
.cx-section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.7;
}

/* Interactive-widget brand badge (lynx-widgets.js). */
.lw-brand {
  display: flex; align-items: center; gap: 0.45rem;
  margin-bottom: 0.6rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.lw-brand img { height: 26px; width: auto; border-radius: 0.3rem; }
.lw-brand span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }

/* About-page hero logo. */
.about-logo { text-align: center; margin: 0.5rem 0 1rem; }
.about-logo img { border-radius: 0.6rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }

/* Keep the small header site logo crisp. */
.md-header__button.md-logo img { height: 1.7rem; width: auto; }

/* ── Smooth content transition between pages / phases ───────────────────
   Material swaps .md-content__inner on instant navigation; a short fade-in
   gives a polished phase-to-phase transition. Motion-safe only.            */
@media (prefers-reduced-motion: no-preference) {
  .md-content__inner { animation: lynx-page-in 0.28s ease both; }
  @keyframes lynx-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Footer copyright a touch more legible. */
.md-footer-copyright { opacity: 0.9; }