/* ============================================================
   Sinapsis — layout and components.
   Every value here comes from a design-system token. A colour, space or
   radius written by hand instead of var(--token) is a defect, and there is
   a test that looks for it in the render (ADR 0003).
   ============================================================ */

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }

.rail {
  width: 248px; flex: 0 0 248px;
  border-right: 1px solid var(--border);
  background: var(--bg-raised);
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail--icons { width: 64px; flex: 0 0 64px; align-items: center; padding: var(--space-6) var(--space-2); }

.brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
.brand__mark { width: 28px; height: 28px; flex: 0 0 28px; }
.brand__name {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-md); letter-spacing: var(--tracking-tight);
}

.nav { display: flex; flex-direction: column; gap: var(--space-1); }
.nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-2); font-size: var(--text-sm); min-height: 44px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__item:hover { background: var(--bg-sunken); color: var(--text-1); }
.nav__item--active { background: var(--accent-soft); color: var(--text-1); font-weight: var(--weight-medium); }
.rail--icons .nav__item { justify-content: center; padding: var(--space-3); width: 44px; }

.level-card {
  margin-top: auto; padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-card); display: flex; flex-direction: column; gap: var(--space-3);
}
.level-card__row { display: flex; justify-content: space-between; align-items: baseline; }
.level-card__level { font-family: var(--font-display); font-size: var(--text-lg); }
.level-card__xp { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2); letter-spacing: var(--tracking-label); }
.level-card__streak { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2); letter-spacing: var(--tracking-label); }

/* ---------- main column ---------- */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border);
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.topbar__titles { min-width: 0; }
.topbar__eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); }
.topbar__title { font-family: var(--font-display); font-size: var(--text-lg); }
.topbar__search { margin-left: auto; position: relative; }
.topbar__identity { display: flex; align-items: center; gap: var(--space-3); }

.avatar {
  width: 36px; height: 36px; border-radius: var(--radius-tile);
  background: var(--accent); color: var(--text-on-accent);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold);
}

.content { padding: var(--space-8); max-width: var(--container-xl); width: 100%; }
.content--narrow { max-width: var(--container-md); }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--space-4); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text-1); }

/* ---------- course index ---------- */
.index {
  width: 312px; flex: 0 0 312px;
  border-left: 1px solid var(--border); background: var(--bg-raised);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: var(--space-6) var(--space-4);
}
.index--collapsed { width: 52px; flex: 0 0 52px; padding: var(--space-6) var(--space-2); }
.index--collapsed .index__body { display: none; }
.index__head { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); }
.index__title { font-family: var(--font-display); font-size: var(--text-md); }
.index__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2); letter-spacing: var(--tracking-label); }
.index__list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
.index__item {
  display: block; padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid transparent; min-height: 44px;
}
.index__item:hover { background: var(--bg-sunken); }
.index__item--current { border-color: var(--accent-line); background: var(--accent-soft); }
.index__item-kind { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); }
.index__item-title { font-size: var(--text-sm); color: var(--text-1); }
.index__item-meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-3); }

/* ---------- primitives ---------- */
.card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-card); padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: var(--surface-card-hover); }
.card--featured { border-color: var(--accent-line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-1);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--bg-sunken); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--ghost { border-color: transparent; color: var(--text-2); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--text-1); }
.icon-btn:active { transform: scale(0.94); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text-2);
}
.badge--assigned { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.badge--started { background: var(--info-soft); border-color: transparent; color: var(--info); }
.badge--completed { background: var(--success-soft); border-color: transparent; color: var(--success); }
.badge--risk { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

.tag {
  display: inline-flex; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); background: var(--bg-sunken);
  font-size: var(--text-xs); color: var(--text-2);
}

.progress { height: 6px; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; }
.progress__bar { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }

.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__value { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-none); }
.stat__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); }

.callout {
  border-left: 2px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); background: var(--bg-sunken);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.callout__title { font-family: var(--font-display); font-size: var(--text-md); }
.callout--idea { border-left-color: var(--accent); background: var(--accent-soft); }
.callout--nota { border-left-color: var(--info); background: var(--info-soft); }
.callout--ojo { border-left-color: var(--warning); background: var(--warning-soft); }
.callout--error { border-left-color: var(--danger); background: var(--danger-soft); }
.callout--dato { border-left-color: var(--accent); background: transparent; }
.callout--dato .callout__title { font-family: var(--font-mono); font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--text-sm); color: var(--text-2); }
.field__helper { font-size: var(--text-xs); color: var(--text-3); }
.input, .textarea, .select {
  width: 100%; min-height: 44px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-input); color: var(--text-1);
  font-family: var(--font-sans); font-size: var(--text-sm);
}
.textarea { min-height: 140px; resize: vertical; line-height: var(--leading-normal); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); }
.tabs__tab {
  padding: var(--space-3) 0; min-height: 44px; color: var(--text-2);
  border-bottom: 2px solid transparent; font-size: var(--text-sm); cursor: pointer;
  background: none; border-top: none; border-left: none; border-right: none;
}
.tabs__tab--active { color: var(--text-1); border-bottom-color: var(--accent); }

/* ---------- lesson body: one partial per vocabulary block ---------- */
.prose { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--container-md); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-4); }
.prose h3 { font-size: var(--text-md); }
.prose p { color: var(--text-1); line-height: var(--leading-relaxed); }
.prose ul, .prose ol { margin: 0; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-1); }
.prose ol { list-style: decimal; }
.prose__checklist { list-style: none; padding-left: 0; }
.prose__checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.prose__check { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.prose__defs { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); }
.prose__term { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); }
.prose__rule { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
.prose blockquote { margin: 0; padding-left: var(--space-5); border-left: 2px solid var(--border-strong); color: var(--text-2); font-size: var(--text-md); }
.prose blockquote cite { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-style: normal; color: var(--text-3); }
.prose figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.prose figure img { max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); }
.prose figcaption { font-size: var(--text-xs); color: var(--text-3); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.prose th, .prose td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--border); }
.prose th { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); }
.table-wrap { overflow-x: auto; }

.specimen { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.specimen__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); padding: var(--space-2) var(--space-4); background: var(--bg-sunken); color: var(--text-3); border-bottom: 1px solid var(--border); }
.specimen__body { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); padding: var(--space-4); margin: 0; white-space: pre-wrap; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 60; display: flex; flex-direction: column; gap: var(--space-3); }
.toast {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-raised);
  box-shadow: var(--shadow-md); font-size: var(--text-sm); max-width: 360px;
}
.toast--success { border-color: var(--accent-line); }

/* ---------- utilities ---------- */

/* The browser hides [hidden] with a user-agent rule, and a user-agent rule
   loses to ANY author declaration of `display`. So every element we hide that
   also carries a class with a display (.callout is flex, .prose is flex) came
   back visible. This one line is what makes `hidden` mean hidden. */
[hidden] { display: none !important; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack--tight { gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.h-page { font-family: var(--font-display); font-size: var(--text-2xl); }
.empty { padding: var(--space-10); text-align: center; color: var(--text-3); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.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; }

/* ---------- responsive: collapses at ~900px ---------- */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .rail { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .rail .level-card, .rail .brand__name { display: none; }
  .nav { flex-direction: row; }
  .index { width: 100%; flex: none; height: auto; position: static; border-left: none; border-top: 1px solid var(--border); }
  .content { padding: var(--space-5); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- search dropdown ---------- */
.search-results {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 40;
  width: 380px; max-width: 80vw;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-raised); box-shadow: var(--shadow-md); overflow: hidden;
}
.search-results__item { display: block; padding: var(--space-3) var(--space-4); min-height: 44px; }
.search-results__item:hover { background: var(--bg-sunken); }
.search-results__title { display: block; font-size: var(--text-sm); color: var(--text-1); }
.search-results__context { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-3); }
.search-results__empty { padding: var(--space-4); font-size: var(--text-sm); color: var(--text-3); }

/* ---------- entrance: login, reset, invitation ---------- */
.entrance {
  min-height: 100vh; display: grid; place-items: center; align-content: center;
  gap: var(--space-6); padding: var(--space-8) var(--gutter);
}
.entrance__card {
  width: 100%; max-width: 26rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-raised); padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.entrance__foot { text-align: center; }

/* ---------- dashboard, matched to the approved artboard ---------- */
.panel-split { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: stretch; }
.panel-split > .card--hero { flex: 1 1 460px; min-width: 0; }
.panel-split > .stack { flex: 1 1 300px; min-width: 0; }

.card--hero { padding: var(--space-8); position: relative; overflow: hidden; }
.hero__title {
  font-family: var(--font-display); font-size: var(--text-3xl);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); max-width: 22ch;
}
.btn--lg { min-height: 52px; padding: var(--space-4) var(--space-6); font-size: var(--text-base); }

.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); }
.stat__value--accent { color: var(--accent); }

.pending {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.pending:hover { background: var(--surface-card-hover); }
.pending__dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--accent); }
.pending__tag {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
}

/* ---------- brand lockup and identity ---------- */
.brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand__tagline {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3);
}
.topbar__who { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.topbar__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.topbar__role { font-size: var(--text-xs); color: var(--text-3); }
.level-card__done { font-size: var(--text-xs); color: var(--text-3); }

/* ---------- transcript: timestamped rows, not a raw dump ---------- */
.transcript { display: flex; flex-direction: column; gap: var(--space-3); }
.transcript__row { display: flex; gap: var(--space-4); align-items: baseline; }
.transcript__at {
  flex: 0 0 3.5rem; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); color: var(--accent);
}

@media (max-width: 900px) {
  .panel-split { flex-direction: column; }
  .brand__tagline, .topbar__who { display: none; }
}

/* The hero carries the brand's dotted grid, masked to fade at the corner.
   It is the only texture the design system allows (readme §3). */
.card--hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 10%, transparent 75%);
}
.card--hero > * { position: relative; }