/* =============================================================
   AILI design system.
   Ported from the K-12 prototype (app.css): ink palette, pink/purple
   accents, bucket colours, radii 8/14/22, sticky blurred nav, aurora
   hero wash. Fonts are self-hosted (Mona Sans, SIL OFL). No Tailwind,
   no icon CDN: layout utilities are defined here.
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/MonaSans.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/MonaSans-Italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans Mono';
  src: url('/fonts/MonaSansMono.woff2') format('woff2');
  font-weight: 200 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ab-ink:        #0D0C22;
  --ab-ink-soft:   #2A2940;
  --ab-mid:        #6E6D7A;
  --ab-mute:       #9E9EA7;
  --ab-line:       #E7E7E9;
  --ab-cloud:      #F5F5F7;
  --ab-paper:      #FFFFFF;
  --ab-cream:      #FCF4F8;
  --ab-lilac:      #F9F7FE;
  --ab-soft-edge:  #F3EAF8;

  --ab-pink:       #EA4C89;
  --ab-pink-deep:  #C9357A;
  --ab-purple:     #8B5CF6;
  --ab-violet:     #6D28D9;
  --ab-emerald:    #10B981;
  --ab-amber:      #F59E0B;
  --ab-sky:        #0EA5E9;
  --ab-rust:       #C0392B;
  --ab-gold:       #C8923A;
  --ab-blue:       #2563B0;

  --ab-core:           #2563B0;
  --ab-complementary:  #6D28D9;
  --ab-feature:        #2F8F6F;

  --ab-framework-gfc:  #2563B0;
  --ab-framework-pos:  #6D28D9;
  --ab-framework-ldc:  #C8923A;
  --ab-framework-ext:  #6E6D7A;

  --ab-type-oi:    #6D28D9;
  --ab-type-gq:    #0EA5E9;
  --ab-type-lo:    #EA4C89;
  --ab-type-kusp:  #2F8F6F;
  --ab-type-pos:   #C8923A;

  --ab-font-brand: 'Mona Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ab-font-body:  'Mona Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ab-font-mono:  'Mona Sans Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --ab-radius-sm: 8px;
  --ab-radius:    14px;
  --ab-radius-lg: 22px;
  --ab-shadow-sm: 0 1px 2px rgba(13,12,34,0.04), 0 1px 3px rgba(13,12,34,0.04);
  --ab-shadow:    0 4px 16px -4px rgba(13,12,34,0.08), 0 2px 6px -2px rgba(13,12,34,0.05);
  --ab-shadow-lg: 0 24px 48px -16px rgba(13,12,34,0.18), 0 8px 16px -8px rgba(13,12,34,0.06);
  --ab-shadow-pink: 0 12px 32px -12px rgba(234,76,137,0.45);
  --nav-h: 64px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  background: var(--ab-paper);
  color: var(--ab-ink);
  font-family: var(--ab-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
.ab-main { flex: 1; }
img { max-width: 100%; }
a { color: var(--ab-pink-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, pre, kbd { font-family: var(--ab-font-mono); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ab-pink); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ab-ink); color: white; padding: .5rem .9rem; border-radius: 8px; z-index: 200; }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.font-brand { font-family: var(--ab-font-brand); letter-spacing: -0.01em; }
.font-mono  { font-family: var(--ab-font-mono); }

/* ---------- Layout utilities ---------- */
.ab-shell { max-width: 1640px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .ab-shell { padding: 0 2.5rem; } }
.ab-shell--narrow { max-width: 1000px; }
.ab-shell--mid { max-width: 1240px; }
.row { display: flex; align-items: center; gap: .6rem; }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--start { align-items: flex-start; }
.row--end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 1rem; }
.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)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr 1fr; } }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; } .mt-5 { margin-top: 3.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2.5rem; }
.text-mid { color: var(--ab-mid); } .text-mute { color: var(--ab-mute); } .text-sm { font-size: .85rem; } .text-xs { font-size: .75rem; }
.text-center { text-align: center; }
.max-w-prose { max-width: 68ch; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.ic { display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Aurora background wash behind heroes */
.ab-hero { position: relative; padding: 2.4rem 0 1.8rem; }
.ab-hero--compact { padding: 1.5rem 0 1rem; }
.ab-aurora {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(234,76,137,0.10) 0%, transparent 60%),
    radial-gradient(50% 40% at 0% 0%,  rgba(139,92,246,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfaff 60%, #ffffff 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
.ab-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }

/* ---------- Top navigation ---------- */
.ab-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ab-line);
  padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.ab-nav__brand {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--ab-font-brand); font-weight: 600;
  font-size: 1.05rem; color: var(--ab-ink); letter-spacing: -0.01em;
  text-decoration: none; line-height: 1.1;
}
.ab-nav__brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ab-pink) 0%, var(--ab-purple) 100%);
  box-shadow: var(--ab-shadow-pink);
  display: grid; place-items: center; color: white; font-weight: 700; font-size: .95rem;
}
.ab-nav__brand-name { display: block; }
.ab-nav__brand-meta {
  display: block; font-family: var(--ab-font-body);
  font-size: .6rem; font-weight: 500; color: var(--ab-mute);
  text-transform: uppercase; letter-spacing: .15em; margin-top: 2px;
}
.ab-nav__links { display: none; align-items: center; gap: 1.3rem; font-size: .92rem; font-weight: 500; }
@media (min-width: 1100px) { .ab-nav__links { display: flex; } }
.ab-nav__link  { color: var(--ab-ink); text-decoration: none; transition: color .15s; padding: .25rem 0; border-bottom: 2px solid transparent; }
.ab-nav__link:hover, .ab-nav__link.is-active { color: var(--ab-pink-deep); }
.ab-nav__link.is-active { font-weight: 600; border-bottom-color: var(--ab-pink); }
.ab-nav__right { display: flex; align-items: center; gap: .6rem; }
.ab-nav__account {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: 999px;
  border: 1px solid var(--ab-line); background: var(--ab-paper);
  color: var(--ab-ink); text-decoration: none; font-size: .82rem; font-weight: 500;
  max-width: 200px;
}
.ab-nav__account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-nav__account:hover { background: var(--ab-cloud); }
.ab-nav__hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: transparent; border: 1px solid var(--ab-line); color: var(--ab-ink);
}
.ab-nav__hamburger:hover { background: var(--ab-cloud); }
@media (min-width: 1100px) { .ab-nav__hamburger { display: none; } }
.ab-nav__panel {
  position: fixed; top: calc(var(--nav-h) + 6px); right: 12px; left: 12px; z-index: 60;
  background: white; border: 1px solid var(--ab-line); border-radius: 12px;
  box-shadow: var(--ab-shadow-lg); padding: .5rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.ab-nav__panel a {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .85rem; border-radius: 8px;
  color: var(--ab-ink); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.ab-nav__panel a:hover { background: var(--ab-cloud); color: var(--ab-pink-deep); }
.ab-nav__panel a.is-active { background: rgba(234,76,137,.08); color: var(--ab-pink-deep); font-weight: 600; }

/* ---------- Typography ---------- */
.ab-hero__pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,0.85); border: 1px solid var(--ab-line);
  box-shadow: var(--ab-shadow-sm); font-size: .72rem; font-weight: 500; color: var(--ab-mid);
  backdrop-filter: blur(6px);
}
.ab-hero__pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ab-pink); box-shadow: 0 0 0 3px rgba(234,76,137,.15); }
.ab-h1 {
  font-family: var(--ab-font-brand); font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ab-ink); margin: 1rem 0 0.6rem;
}
.ab-h1__accent {
  background: linear-gradient(90deg, var(--ab-pink) 0%, var(--ab-purple) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 400;
}
.ab-lede {
  font-size: 1.02rem; line-height: 1.6; color: var(--ab-mid);
  border-left: 2px solid var(--ab-pink); padding-left: 1rem; max-width: 62ch; margin: .5rem 0 0;
}
.ab-h2 { font-family: var(--ab-font-brand); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5rem; }
.ab-h3 { font-family: var(--ab-font-brand); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; margin: 0 0 .35rem; }
.ab-eyebrow { font-size: .7rem; font-weight: 600; color: var(--ab-pink-deep); text-transform: uppercase; letter-spacing: .14em; }
.ab-eyebrow--mute { color: var(--ab-mute); }
.ab-section { margin: 2.4rem 0; }
.ab-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ab-section__head p { margin: .2rem 0 0; color: var(--ab-mid); font-size: .92rem; max-width: 70ch; }
.prose p { margin: .6rem 0; line-height: 1.65; }
.prose ul { margin: .5rem 0 .8rem 1.2rem; padding: 0; }
.prose li { margin: .25rem 0; }

/* ---------- Cards ---------- */
.ab-card {
  background: var(--ab-paper); border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-lg); padding: 1.4rem; box-shadow: var(--ab-shadow-sm);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.ab-card:hover { box-shadow: var(--ab-shadow); border-color: #DCDCE0; }
.ab-card--flat:hover { box-shadow: var(--ab-shadow-sm); border-color: var(--ab-line); }
.ab-card--gradient { background: linear-gradient(135deg, var(--ab-lilac) 0%, var(--ab-cream) 100%); border-color: var(--ab-soft-edge); }
.ab-card--ink { background: var(--ab-ink); color: white; border-color: transparent; }
.ab-card--ink a { color: #F9A8D4; }
.ab-card--sm { padding: 1rem 1.1rem; border-radius: var(--ab-radius); }
a.ab-card { text-decoration: none; color: inherit; display: block; }

/* Feature cards on the landing page (Explore / Search / Ask / Create) */
.feature-card { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit; position: relative; }
.feature-card__icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: white;
  background: linear-gradient(135deg, var(--ab-pink) 0%, var(--ab-purple) 100%);
}
.feature-card:nth-child(2) .feature-card__icon { background: linear-gradient(135deg, var(--ab-sky), var(--ab-blue)); }
.feature-card:nth-child(3) .feature-card__icon { background: linear-gradient(135deg, var(--ab-emerald), var(--ab-feature)); }
.feature-card:nth-child(4) .feature-card__icon { background: linear-gradient(135deg, var(--ab-amber), var(--ab-gold)); }
.feature-card p { margin: 0; color: var(--ab-mid); font-size: .9rem; line-height: 1.5; }
.feature-card__go { margin-top: auto; color: var(--ab-pink-deep); font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; }

/* Bucket card (subject area) */
.ab-bucket-card {
  --accent: var(--ab-core);
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  padding: 1.1rem 1.2rem 1.1rem 1.3rem;
  background: var(--ab-paper); border: 1px solid var(--ab-line); border-radius: var(--ab-radius-lg);
  box-shadow: var(--ab-shadow-sm); text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .25s, border-color .2s; overflow: hidden;
}
.ab-bucket-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), transparent 95%); }
.ab-bucket-card:hover { transform: translateY(-2px); box-shadow: var(--ab-shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--ab-line)); }
.ab-bucket-card.is-core          { --accent: var(--ab-core); }
.ab-bucket-card.is-complementary { --accent: var(--ab-complementary); }
.ab-bucket-card.is-feature       { --accent: var(--ab-feature); }
.ab-bucket-card__name { font-family: var(--ab-font-brand); font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.ab-bucket-card__full { font-size: .78rem; color: var(--ab-mute); }
.ab-bucket-card__meta { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .74rem; color: var(--ab-mid); margin-top: .2rem; }
.bucket-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.bucket-dot.is-core { background: var(--ab-core); } .bucket-dot.is-complementary { background: var(--ab-complementary); } .bucket-dot.is-feature { background: var(--ab-feature); }

/* ---------- Chips ---------- */
.ab-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .12rem .55rem; border-radius: 6px;
  background: var(--ab-cloud); border: 1px solid var(--ab-line); color: var(--ab-mid);
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
}
.ab-chip--solid  { background: var(--ab-ink); color: white; border-color: var(--ab-ink); }
.ab-chip--pink   { background: rgba(234,76,137,.10); color: var(--ab-pink-deep); border-color: rgba(234,76,137,.18); }
.ab-chip--purple { background: rgba(139,92,246,.10); color: var(--ab-violet);   border-color: rgba(139,92,246,.18); }
.ab-chip--sky    { background: rgba(14,165,233,.10);  color: #0369A1;            border-color: rgba(14,165,233,.18); }
.ab-chip--emerald{ background: rgba(16,185,129,.10);  color: #047857;            border-color: rgba(16,185,129,.18); }
.ab-chip--amber  { background: rgba(245,158,11,.10);  color: #B45309;            border-color: rgba(245,158,11,.18); }
.ab-chip--rust   { background: rgba(192,57,43,.10);   color: #991b1b;            border-color: rgba(192,57,43,.18); }
.ab-chip--mono   { font-family: var(--ab-font-mono); text-transform: none; letter-spacing: .02em; }
.ab-chip--clickable { cursor: pointer; text-decoration: none; transition: filter .12s, transform .12s; }
.ab-chip--clickable:hover { filter: brightness(0.96); transform: translateY(-1px); }
.ab-chip[data-framework='GFC'] { background: rgba(37,99,176,.10); color: var(--ab-framework-gfc); border-color: rgba(37,99,176,.2); }
.ab-chip[data-framework='POS'] { background: rgba(109,40,217,.10); color: var(--ab-framework-pos); border-color: rgba(109,40,217,.2); }
.ab-chip[data-framework='LDC'] { background: rgba(200,146,58,.12); color: #8a5f1c; border-color: rgba(200,146,58,.25); }
.ab-chip[data-framework='EXT'], .ab-chip[data-framework='CMS'], .ab-chip[data-framework='FEATURE'] { background: var(--ab-cloud); color: var(--ab-mid); }

.ab-type-chip {
  display: inline-flex; align-items: center; padding: .1rem .42rem; border-radius: 6px;
  font-family: var(--ab-font-mono); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 8%, white); color: var(--ab-mid); white-space: nowrap;
}
.ab-type-chip[data-type='OI']   { color: var(--ab-type-oi); }
.ab-type-chip[data-type='GQ']   { color: var(--ab-type-gq); }
.ab-type-chip[data-type='LO'], .ab-type-chip[data-type='SPECIFIC_OUTCOME'], .ab-type-chip[data-type='OUTCOME'] { color: var(--ab-type-lo); }
.ab-type-chip[data-type='KUSP'], .ab-type-chip[data-type='K'], .ab-type-chip[data-type='U'], .ab-type-chip[data-type='SP'] { color: var(--ab-type-kusp); }
.ab-type-chip[data-type='GENERAL_OUTCOME'], .ab-type-chip[data-type='TOPIC'], .ab-type-chip[data-type^='POS'] { color: var(--ab-type-pos); }
.ab-type-chip[data-type='COURSE'], .ab-type-chip[data-type='GRADE'], .ab-type-chip[data-type='SUBJECT'] { color: var(--ab-blue); }
.ab-type-chip[data-type='OVERVIEW'], .ab-type-chip[data-type='FRONT_MATTER'], .ab-type-chip[data-type='APPENDIX'] { color: var(--ab-mid); }

/* ---------- Buttons ---------- */
.ab-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 999px;
  font-size: .88rem; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--ab-line); background: var(--ab-paper); color: var(--ab-ink);
  box-shadow: var(--ab-shadow-sm); transition: transform .15s, box-shadow .15s, background .15s;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.ab-btn:hover  { background: var(--ab-cloud); }
.ab-btn:active { transform: scale(.98); }
.ab-btn:disabled, .ab-btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
.ab-btn--primary { color: white; background: linear-gradient(135deg, var(--ab-pink) 0%, var(--ab-purple) 100%); border-color: transparent; box-shadow: var(--ab-shadow-pink); }
.ab-btn--primary:hover { background: linear-gradient(135deg, var(--ab-pink-deep) 0%, var(--ab-violet) 100%); }
.ab-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ab-mid); }
.ab-btn--ghost:hover { color: var(--ab-ink); background: var(--ab-cloud); }
.ab-btn--danger { color: #991b1b; border-color: rgba(192,57,43,.3); }
.ab-btn--danger:hover { background: rgba(192,57,43,.08); }
.ab-btn--sm { padding: .32rem .75rem; font-size: .78rem; }
.ab-btn--xs { padding: .2rem .55rem; font-size: .72rem; gap: .3rem; }
.ab-btn--block { width: 100%; justify-content: center; }

/* ---------- Forms ---------- */
.ab-input, .ab-select, .ab-textarea {
  display: block; width: 100%;
  padding: .55rem .75rem; border: 1px solid var(--ab-line); border-radius: 10px;
  background: white; font-size: .92rem; color: var(--ab-ink); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.ab-input:focus, .ab-select:focus, .ab-textarea:focus { border-color: var(--ab-pink); box-shadow: 0 0 0 3px rgba(234,76,137,.18); }
.ab-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.ab-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6D7A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: 14px; padding-right: 2rem; }
.ab-input--lg { padding: .8rem 1rem; font-size: 1.05rem; border-radius: 14px; }
.ab-field { display: flex; flex-direction: column; gap: .3rem; }
.ab-field label, .ab-label { font-size: .74rem; font-weight: 600; color: var(--ab-mid); text-transform: uppercase; letter-spacing: .08em; }
.ab-field .hint { font-size: .78rem; color: var(--ab-mute); }
.ab-filters { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ab-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; cursor: pointer; }
.ab-check input { width: 16px; height: 16px; accent-color: var(--ab-pink); }
.searchbar { display: flex; gap: .6rem; align-items: stretch; }
.searchbar .ab-input { flex: 1; }
@media (max-width: 640px) { .searchbar { flex-direction: column; } }

/* ---------- Tabs ---------- */
.ab-tabs { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--ab-cloud); border-radius: 11px; border: 1px solid var(--ab-line); }
.ab-tabs__btn { padding: .38rem .8rem; border-radius: 8px; font-size: .8rem; font-weight: 500; color: var(--ab-mid); background: transparent; border: 0; transition: all .15s; white-space: nowrap; }
.ab-tabs__btn.is-active, .ab-tabs__btn[aria-selected='true'] { background: var(--ab-paper); color: var(--ab-ink); box-shadow: var(--ab-shadow-sm); }
.ab-tabs--scroll { display: flex; overflow-x: auto; max-width: 100%; }

/* ---------- Tree ---------- */
.ab-tree { list-style: none; padding: 0; margin: 0; }
.ab-tree ul { list-style: none; padding: 0 0 0 .95rem; margin: 0; border-left: 1px solid var(--ab-line); margin-left: .6rem; }
.ab-tree__row {
  display: flex; align-items: flex-start; gap: .4rem;
  padding: .3rem .45rem; border-radius: 9px; transition: background .12s; cursor: pointer;
  outline-offset: -2px;
}
.ab-tree__row:hover { background: var(--ab-cloud); }
.ab-tree__row.is-active { background: color-mix(in srgb, var(--ab-pink) 8%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ab-pink) 25%, transparent); }
.ab-tree__row.is-hit .ab-tree__title { font-weight: 600; }
.ab-tree__row.is-hit .ab-tree__title mark { background: #FDE68A; padding: 0 2px; border-radius: 3px; }
.ab-tree__caret {
  width: 18px; height: 18px; display: inline-grid; place-items: center; flex-shrink: 0;
  color: var(--ab-mute); transition: transform .15s, color .15s; background: none; border: 0; padding: 0; margin-top: 1px;
}
.ab-tree__caret.is-open { transform: rotate(90deg); color: var(--ab-ink); }
.ab-tree__caret--empty { visibility: hidden; }
.ab-tree__title { font-size: .88rem; line-height: 1.35; color: var(--ab-ink); flex: 1; min-width: 0; }
.ab-tree__title.is-leaf { color: var(--ab-ink-soft); }
.ab-tree__count { font-family: var(--ab-font-mono); font-size: .66rem; color: var(--ab-mute); flex-shrink: 0; white-space: nowrap; margin-top: 3px; }
.ab-tree__code { font-family: var(--ab-font-mono); font-size: .68rem; color: var(--ab-pink-deep); flex-shrink: 0; margin-top: 3px; }
.ab-tree__spinner { font-size: .75rem; color: var(--ab-mute); padding: .3rem .8rem; }

/* ---------- Reader ---------- */
.ab-reader { background: var(--ab-paper); border: 1px solid var(--ab-line); border-radius: var(--ab-radius); padding: 1.5rem 1.7rem; box-shadow: var(--ab-shadow-sm); min-width: 0; }
.ab-reader__breadcrumb { font-family: var(--ab-font-body); font-size: .78rem; color: var(--ab-mute); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ab-reader__breadcrumb a, .ab-reader__breadcrumb button { color: var(--ab-mid); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ab-reader__breadcrumb a:hover, .ab-reader__breadcrumb button:hover { color: var(--ab-pink-deep); text-decoration: underline; }
.ab-reader__breadcrumb .sep { color: var(--ab-line); }
.ab-reader__title { font-family: var(--ab-font-brand); font-weight: 500; font-size: 1.55rem; letter-spacing: -.015em; line-height: 1.2; color: var(--ab-ink); margin: 0 0 .5rem; }
.ab-reader__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.ab-reader__toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: .75rem; }
.ab-reader__lang { font-size: .72rem; color: var(--ab-mute); }

/* ---------- Side rail ---------- */
.ab-rail { border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-paper); padding: 1rem; box-shadow: var(--ab-shadow-sm); min-width: 0; }
.ab-rail + .ab-rail { margin-top: .8rem; }
.ab-rail__title { font-size: .68rem; font-weight: 600; color: var(--ab-mute); text-transform: uppercase; letter-spacing: .14em; margin-bottom: .55rem; display: flex; justify-content: space-between; align-items: center; }
.ab-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ab-rail__item { display: block; padding: .5rem .6rem; border-radius: 9px; border: 1px solid var(--ab-line); text-decoration: none; color: inherit; font-size: .84rem; line-height: 1.35; background: var(--ab-paper); }
.ab-rail__item:hover { background: var(--ab-cloud); }
.ab-rail__item small { display: block; color: var(--ab-mute); font-size: .72rem; margin-top: .15rem; }
.ab-rail__empty { font-size: .8rem; color: var(--ab-mute); padding: .3rem 0; }

/* ---------- KPI ---------- */
.ab-kpi { display: flex; flex-direction: column; gap: .1rem; padding: .95rem 1.05rem; background: var(--ab-paper); border: 1px solid var(--ab-line); border-radius: var(--ab-radius); box-shadow: var(--ab-shadow-sm); min-width: 0; }
.ab-kpi__value { font-family: var(--ab-font-brand); font-weight: 600; font-size: 1.55rem; color: var(--ab-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ab-kpi__label { font-size: .68rem; color: var(--ab-mute); text-transform: uppercase; letter-spacing: .12em; }
.ab-kpi__sub   { font-size: .78rem; color: var(--ab-mid); }
.kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Progress bars */
.ab-bar { position: relative; height: 8px; background: var(--ab-cloud); border-radius: 999px; overflow: hidden; }
.ab-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--ab-pink) 0%, var(--ab-purple) 100%); border-radius: 999px; transition: width .3s; }
.ab-bar--thin { height: 5px; }

/* ---------- Empty, callouts, alerts ---------- */
.ab-empty { padding: 2.2rem 1.5rem; border: 1px dashed var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-cloud); text-align: center; color: var(--ab-mid); font-size: .92rem; }
.ab-callout { display: flex; align-items: flex-start; gap: .55rem; padding: .75rem 1rem; border-radius: 10px; font-size: .86rem; line-height: 1.45; background: var(--ab-lilac); border: 1px solid var(--ab-soft-edge); color: var(--ab-ink-soft); }
.ab-callout .ic { margin-top: 2px; }
.ab-callout--warn { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.ab-callout--error { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
.ab-callout--ok { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.ab-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ab-ink); color: white; padding: .6rem 1rem; border-radius: 10px; font-size: .85rem; box-shadow: var(--ab-shadow-lg); z-index: 300; }

/* ---------- Tables ---------- */
.ab-table-wrap { overflow-x: auto; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-paper); }
.ab-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ab-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ab-mute); font-weight: 600; padding: .7rem .8rem; border-bottom: 1px solid var(--ab-line); background: var(--ab-cloud); white-space: nowrap; }
.ab-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--ab-line); vertical-align: top; }
.ab-table tr:last-child td { border-bottom: 0; }
.ab-table tbody tr:hover td { background: var(--ab-cream); }
.ab-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-table code { font-size: .8rem; background: var(--ab-cloud); padding: .05rem .35rem; border-radius: 4px; }

/* ---------- Modal ---------- */
.ab-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(13,12,34,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ab-modal { background: var(--ab-paper); border-radius: var(--ab-radius-lg); box-shadow: var(--ab-shadow-lg); max-width: 720px; width: 100%; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; overflow: hidden; }
.ab-modal__head { display: flex; align-items: center; gap: .8rem; padding: 1.3rem 1.6rem .6rem; }
.ab-modal__head .ab-h2 { margin: 0; }
.ab-modal__body { padding: .4rem 1.6rem 1rem; overflow-y: auto; font-size: .92rem; line-height: 1.6; color: var(--ab-ink-soft); }
.ab-modal__foot { padding: 1rem 1.6rem 1.4rem; border-top: 1px solid var(--ab-line); background: var(--ab-cloud); display: flex; flex-direction: column; gap: .9rem; }
.ab-modal__actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.ab-modal__close { margin-left: auto; background: none; border: 0; color: var(--ab-mute); }
.disc-text p { margin: .5rem 0; }
.disc-text ul { margin: .3rem 0 .6rem 1.2rem; padding: 0; }
.disc-text li { margin: .3rem 0; }
.disc-label { font-weight: 600; color: var(--ab-ink); margin-top: .9rem !important; }
.disc-check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; cursor: pointer; }
.disc-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ab-pink); flex-shrink: 0; }
body.modal-open { overflow: hidden; }

/* ---------- Footer ---------- */
.ab-footer { border-top: 1px solid var(--ab-line); padding: 2rem 0; color: var(--ab-mute); font-size: .82rem; margin-top: 3rem; background: var(--ab-cloud); }
.ab-footer__inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.ab-footer__brand { font-family: var(--ab-font-brand); font-weight: 600; color: var(--ab-ink); font-size: .95rem; }
.ab-footer__brand span { font-weight: 400; color: var(--ab-mid); margin-left: .4rem; }
.ab-footer__note { max-width: 72ch; margin-top: .4rem; line-height: 1.5; }
.ab-footer__note a { color: var(--ab-mid); }
.ab-footer__links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-content: flex-start; }
.ab-footer__links a { color: var(--ab-mid); text-decoration: none; }
.ab-footer__links a:hover { color: var(--ab-pink-deep); }

/* ---------- Landing page ---------- */
.home-hero { position: relative; display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2.4rem 0 1.6rem; }
@media (min-width: 900px) { .home-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; } }
.home-hero__text { min-width: 0; }
.home-hero__art { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--ab-shadow); border: 1px solid var(--ab-line); background: var(--ab-cloud); }
.home-hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.home-section { display: grid; grid-template-columns: 1fr; gap: 1.6rem; margin: 2.6rem 0; align-items: center; }
@media (min-width: 820px) {
  .home-section { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 2.4rem; }
  .home-section--reverse .home-section__copy { order: 2; }
  .home-section--reverse .home-section__art  { order: 1; }
}
.home-section__copy { min-width: 0; }
.home-section__copy p { color: var(--ab-ink-soft); line-height: 1.65; margin: .7rem 0 0; }
.home-section__art { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--ab-line); box-shadow: var(--ab-shadow-sm); background: var(--ab-cloud); }
.home-section__art img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.home-section--wide { margin: 3rem 0 2rem; padding: 1.6rem; border-radius: 18px; background: linear-gradient(180deg, rgba(234,76,137,.05), rgba(108,77,171,.05)); border: 1px solid var(--ab-line); }
.home-section__art--wide img { aspect-ratio: 16 / 10; }
.status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 1.6rem 0 0; }
@media (max-width: 900px) { .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Explorer ---------- */
/* Explorer grid. Single column and normal flow below 1100 px (nothing sticky,
   nothing overlapping); tree | reader with the side panel under the reader
   from 1100 px; three columns from 1360 px. Sticky and contained scrolling
   apply only where a column exists to hold them. */
.explorer { display: grid; gap: .9rem; grid-template-columns: 1fr; align-items: start; padding-bottom: 2rem; }
.explorer__tree, .explorer__side { position: static; max-height: none; z-index: auto; }
.explorer__tree .ab-tree-scroll { overflow: visible; }
@media (min-width: 1100px) {
  .explorer { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); grid-template-areas: "tree reader" "tree side"; }
  .explorer__tree { grid-area: tree; position: sticky; top: calc(var(--nav-h) + 12px); max-height: calc(100vh - var(--nav-h) - 24px); display: flex; flex-direction: column; }
  .explorer__tree .ab-tree-scroll { overflow: auto; flex: 1; min-height: 0; padding-right: .2rem; }
  .explorer > .ab-reader { grid-area: reader; }
  .explorer .explorer__side { grid-area: side; }
}
@media (min-width: 1360px) {
  .explorer { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(300px, 400px); grid-template-areas: "tree reader side"; }
}
/* The side panel is always a normal block: never sticky, fixed or animated,
   so it cannot cover the reader or the tree at any width. */
.explorer__side { position: static !important; max-height: none !important; overflow: visible !important; transform: none !important; }
/* Node page: reader | side from 1100 px, stacked below. */
.explorer--reader { grid-template-columns: 1fr; grid-template-areas: none; }
@media (min-width: 1100px) {
  .explorer--reader { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-areas: "reader side"; }
}
/* Creation actions are visually separate from curriculum content. */
.ab-rail--create { background: linear-gradient(180deg, var(--ab-lilac), var(--ab-cream)); border-top: 3px solid var(--ab-purple); }
.ab-rail--create > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ab-rail--create > summary::-webkit-details-marker { display: none; }
.ab-rail--create > summary .ab-rail__title { margin: 0; }
.ab-rail--create__toggle { font-size: .72rem; color: var(--ab-violet); font-weight: 600; white-space: nowrap; }
.ab-rail--create[open] .ab-rail--create__toggle .when-closed, .ab-rail--create:not([open]) .ab-rail--create__toggle .when-open { display: none; }
.ab-rail--create__body { margin-top: .6rem; }
.ab-rail--create .ab-rail__title { color: var(--ab-violet); }
.ab-rail--create__note { font-size: .78rem; color: var(--ab-mid); margin: 0 0 .6rem; }
.explorer__picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }
@media (max-width: 800px) { .explorer__picker { grid-template-columns: 1fr; } }
.explorer__filter { margin-bottom: .6rem; }
.explorer__focus {
  position: static; z-index: auto;
  background: #fef3c7; border: 1px solid #fde68a; color: #78350f;
  border-radius: 10px; padding: .5rem .8rem; font-size: .8rem; margin-bottom: .8rem;
  display: flex; gap: .6rem; align-items: center; cursor: pointer;
}
.explorer__focus b { font-weight: 600; }
@media (min-width: 1100px) { .explorer__focus { position: sticky; top: calc(var(--nav-h) + 4px); z-index: 2; } }
.kusp { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1rem; }
.kusp__col { border: 1px solid var(--ab-line); border-radius: var(--ab-radius); padding: .9rem 1rem; background: var(--ab-cloud); }
.kusp__col h4 { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ab-type-kusp); }
.kusp__col .md-content { font-size: .88rem; }
.level-badge { display: inline-flex; align-items: center; padding: .05rem .4rem; border-radius: 5px; font-family: var(--ab-font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .04em; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 8%, white); color: var(--ab-mid); flex-shrink: 0; margin-top: 3px; }
.level-badge[data-type='OI'] { color: var(--ab-type-oi); } .level-badge[data-type='GQ'] { color: var(--ab-type-gq); } .level-badge[data-type='LO'], .level-badge[data-type='SPECIFIC_OUTCOME'], .level-badge[data-type='OUTCOME'] { color: var(--ab-type-lo); }
.level-badge[data-type='K'], .level-badge[data-type='U'], .level-badge[data-type='SP'], .level-badge[data-type='KUSP'] { color: var(--ab-type-kusp); }
.level-badge[data-type='COURSE'], .level-badge[data-type='GRADE'] { color: var(--ab-blue); } .level-badge[data-type='TOPIC'], .level-badge[data-type='GENERAL_OUTCOME'] { color: var(--ab-type-pos); }
.node-images { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.node-images img { max-height: 220px; border-radius: 8px; border: 1px solid var(--ab-line); }
.gloss { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--ab-radius); background: var(--ab-lilac); border: 1px solid var(--ab-soft-edge); font-size: .9rem; }
.gloss h4 { margin: 0 0 .3rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ab-violet); }
.gloss__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

/* ---------- Markdown (.md-content, ported from ti-mo-correspondence) ---------- */
.md-content { line-height: 1.72; font-size: .96rem; color: var(--ab-ink); word-wrap: break-word; }
.md-content > :first-child { margin-top: 0; }
.md-content h1 { font-family: var(--ab-font-brand); font-size: 1.5rem; color: var(--ab-ink); margin: 1.4rem 0 .6rem; font-weight: 600; letter-spacing: -.01em; padding-bottom: .45rem; border-bottom: 2px solid var(--ab-gold); }
.md-content h2 { font-family: var(--ab-font-brand); font-size: 1.2rem; color: var(--ab-blue); margin: 1.3rem 0 .5rem; font-weight: 600; }
.md-content h3 { font-family: var(--ab-font-brand); font-size: 1.02rem; color: var(--ab-ink-soft); margin: 1rem 0 .4rem; font-weight: 600; }
.md-content h4 { font-size: .92rem; color: var(--ab-mid); margin: .8rem 0 .4rem; font-weight: 600; }
.md-content p { margin: .55rem 0; }
.md-content ul, .md-content ol { margin: .5rem 0 .5rem 1.4rem; padding: 0; }
.md-content li { margin: .25rem 0; }
.md-content strong { color: var(--ab-ink); }
.md-content em { color: var(--ab-ink-soft); }
.md-content code { background: var(--ab-lilac); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.md-content pre { background: var(--ab-ink); color: #E2E2EA; font-size: .84rem; padding: 1rem; border-radius: var(--ab-radius); overflow-x: auto; }
.md-content pre code { background: transparent; padding: 0; color: inherit; }
.md-content blockquote { border-left: 4px solid var(--ab-gold); padding: .5rem 1rem; background: #FBF5E6; margin: .8rem 0; border-radius: 0 8px 8px 0; color: var(--ab-ink-soft); }
.md-content blockquote p { margin: .3rem 0; }
.md-table-wrap { overflow-x: auto; margin: .9rem 0; }
.md-content table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.md-content th { background: rgba(37,99,176,.08); color: var(--ab-blue); padding: .55rem .75rem; text-align: left; font-weight: 600; border-bottom: 2px solid var(--ab-blue); }
.md-content td { padding: .5rem .75rem; border-bottom: 1px solid var(--ab-line); vertical-align: top; }
.md-content tr:nth-child(even) td { background: var(--ab-cloud); }
.md-content tr:hover td { background: rgba(37,99,176,.06); }
.md-content mark { background: #FDE68A; padding: 0 3px; border-radius: 3px; }
.md-content hr { border: none; border-top: 1px solid var(--ab-line); margin: 1.2rem 0; }
.md-content img { max-width: 100%; border-radius: var(--ab-radius-sm); border: 1px solid var(--ab-line); }
.md-content a { color: var(--ab-pink-deep); text-decoration: underline; text-underline-offset: 2px; }
.md-content table.letter-grid { table-layout: fixed; }
.md-content table.letter-grid th, .md-content table.letter-grid td { border: 1px solid var(--ab-line); background: white; text-align: center; vertical-align: middle; font-family: var(--ab-font-brand); font-weight: 700; font-size: clamp(.9rem, 2vw, 1.3rem); text-transform: uppercase; padding: 0; aspect-ratio: 1 / 1; color: var(--ab-ink); }
.md-content table.letter-grid tr:nth-child(even) td, .md-content table.letter-grid tr:hover td { background: white; }
.src-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6em; height: 1.35em; padding: 0 .38em; margin: 0 .1em;
  border-radius: 999px; font-size: .68em; font-weight: 700; vertical-align: super; line-height: 1;
  background: rgba(16,185,129,.14); color: #047857; text-decoration: none !important; cursor: pointer;
  border: 1px solid rgba(16,185,129,.3);
}
.src-cite:hover { background: rgba(16,185,129,.28); }
.src-cite.is-highlight { background: var(--ab-emerald); color: white; }
.src-cite--alias { background: var(--ab-cloud); color: var(--ab-mid); border-color: var(--ab-line); }
.streaming-cursor::after { content: '▌'; animation: blink .8s infinite; color: var(--ab-pink); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- Search results ---------- */
.result { display: block; padding: .9rem 1.1rem; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-paper); text-decoration: none; color: inherit; border-left: 4px solid transparent; transition: box-shadow .15s, border-color .15s; }
.result:hover { box-shadow: var(--ab-shadow); border-left-color: var(--ab-pink); }
.result__crumb { font-family: var(--ab-font-body); font-size: .74rem; color: var(--ab-mute); margin-bottom: .2rem; }
.result__head { display: flex; gap: .6rem; align-items: baseline; justify-content: space-between; }
.result__title { font-weight: 600; color: var(--ab-blue); font-size: .98rem; }
.result__snippet { font-size: .88rem; color: var(--ab-ink-soft); margin-top: .3rem; line-height: 1.5; }
.result__snippet mark { background: #FDE68A; padding: 0 2px; border-radius: 3px; }
.result__meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; align-items: center; }
.score { font-family: var(--ab-font-mono); font-size: .7rem; color: var(--ab-mute); white-space: nowrap; }
.results { display: flex; flex-direction: column; gap: .6rem; }

/* ---------- Ask ---------- */
.ask-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .ask-layout { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .9fr); } }
.ask-answer { min-height: 200px; }
.trace-panel { font-size: .84rem; }
.trace-panel details { border: 1px solid var(--ab-line); border-radius: 10px; margin-bottom: .5rem; background: var(--ab-paper); }
.trace-panel summary { padding: .55rem .8rem; cursor: pointer; font-weight: 600; font-size: .8rem; color: var(--ab-ink-soft); list-style: none; display: flex; align-items: center; gap: .5rem; }
.trace-panel summary::-webkit-details-marker { display: none; }
.trace-panel summary::before { content: ''; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; transition: transform .15s; }
.trace-panel details[open] summary::before { transform: rotate(90deg); }
.trace-panel .trace-body { padding: .2rem .8rem .8rem; }
.stage-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; }
.stage-log li { display: flex; gap: .6rem; align-items: baseline; }
.stage-log .stage { font-family: var(--ab-font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ab-blue); min-width: 52px; font-weight: 700; }
.passage { border: 1px solid var(--ab-line); border-radius: 9px; padding: .55rem .7rem; margin-bottom: .45rem; background: var(--ab-paper); }
.passage.is-highlight { border-color: var(--ab-emerald); box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
.passage__head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.passage__crumb { font-family: var(--ab-font-body); font-size: .72rem; color: var(--ab-mute); margin-top: .2rem; }
.passage__why { font-size: .78rem; color: var(--ab-ink-soft); margin-top: .3rem; }
.passage__text { font-size: .8rem; color: var(--ab-mid); margin-top: .3rem; max-height: 5.5em; overflow: hidden; }
.passage[open] .passage__text, .passage.is-open .passage__text { max-height: none; }
.weight { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--ab-font-mono); font-size: .68rem; color: var(--ab-mid); }
.weight .ab-bar { width: 60px; height: 5px; }
.verify { display: flex; gap: .5rem; align-items: flex-start; padding: .4rem 0; border-bottom: 1px solid var(--ab-line); font-size: .8rem; }
.verify:last-child { border-bottom: 0; }
.badge { display: inline-flex; align-items: center; padding: .08rem .45rem; border-radius: 999px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.badge--ok { background: rgba(16,185,129,.14); color: #047857; }
.badge--partial { background: rgba(245,158,11,.16); color: #92400e; }
.badge--bad { background: rgba(192,57,43,.12); color: #991b1b; }
.badge--neutral { background: var(--ab-cloud); color: var(--ab-mid); }
.badge--info { background: rgba(14,165,233,.14); color: #075985; }
.flow-svg { width: 100%; height: auto; display: block; }
.flow-svg text { font-family: var(--ab-font-body); }
.sources-list { display: flex; flex-direction: column; gap: .35rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---------- Create ---------- */
.create-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .create-layout { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); } }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.tool-card { text-align: left; padding: .7rem .8rem; border: 1px solid var(--ab-line); border-radius: 12px; background: var(--ab-paper); display: flex; flex-direction: column; gap: .2rem; transition: border-color .15s, box-shadow .15s; }
.tool-card:hover { border-color: var(--ab-purple); }
.tool-card.is-active { border-color: var(--ab-pink); box-shadow: 0 0 0 2px rgba(234,76,137,.18); background: var(--ab-cream); }
.tool-card__label { font-weight: 600; font-size: .88rem; }
.tool-card__desc { font-size: .72rem; color: var(--ab-mute); line-height: 1.35; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tier { padding: .6rem .7rem; border: 1px solid var(--ab-line); border-radius: 12px; text-align: left; background: var(--ab-paper); }
.tier.is-active { border-color: var(--ab-pink); background: var(--ab-cream); box-shadow: 0 0 0 2px rgba(234,76,137,.18); }
.tier b { display: block; font-size: .85rem; }
.tier small { color: var(--ab-mute); font-size: .7rem; display: block; }
.picked { display: flex; flex-wrap: wrap; gap: .3rem; }
.picked .ab-chip { text-transform: none; letter-spacing: 0; font-weight: 500; max-width: 100%; }
.picked .ab-chip span { overflow: hidden; text-overflow: ellipsis; }
.picked button { background: none; border: 0; padding: 0 0 0 .2rem; color: var(--ab-mute); line-height: 1; }
.picker-tree { max-height: 340px; overflow: auto; border: 1px solid var(--ab-line); border-radius: 10px; padding: .4rem; background: var(--ab-cloud); }
.picker-tree .ab-tree__row { padding: .2rem .35rem; }
.picker-tree .ab-tree__title { font-size: .82rem; }
.stage-strip { display: flex; gap: .4rem; flex-wrap: wrap; }
.stage-strip .badge { font-size: .62rem; }
.artifact-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin-top: 1rem; }
.artifact-images figure { margin: 0; border: 1px solid var(--ab-line); border-radius: 10px; overflow: hidden; background: var(--ab-cloud); position: relative; }
.artifact-images img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.artifact-images figcaption { font-size: .7rem; color: var(--ab-mid); padding: .35rem .5rem; }
.artifact-images .pending { aspect-ratio: 1; display: grid; place-items: center; color: var(--ab-mute); font-size: .75rem; }
.md-content .rapid-image, .md-content figure.gen-image { margin: 1rem 0; }
.md-content figure.gen-image img { width: 100%; max-width: 720px; border-radius: 12px; }
.md-content figure.gen-image figcaption { font-size: .78rem; color: var(--ab-mute); margin-top: .3rem; }
.md-content .image-pending { display: flex; align-items: center; gap: .5rem; padding: 1.2rem; border: 1px dashed var(--ab-line); border-radius: 12px; background: var(--ab-cloud); color: var(--ab-mid); font-size: .82rem; margin: 1rem 0; }

/* ---------- Library ---------- */
.lib-group { margin-bottom: 1.6rem; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.lib-card { display: flex; flex-direction: column; gap: .35rem; position: relative; }
.lib-card__title { font-weight: 600; font-size: .95rem; line-height: 1.3; text-decoration: none; color: var(--ab-ink); }
.lib-card__title:hover { color: var(--ab-pink-deep); }
.lib-card__meta { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .72rem; color: var(--ab-mute); }
.lib-card__actions { margin-top: auto; display: flex; gap: .3rem; justify-content: flex-end; }
.pdf-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1000px) { .pdf-layout { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); } }
.pdf-frame { width: 100%; height: calc(100vh - 220px); min-height: 500px; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-cloud); }
.pager { display: flex; gap: .5rem; align-items: center; }
.pager input { width: 70px; text-align: center; }

/* ---------- Learn ---------- */
.learn-shell { max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.5rem 3rem; }
.learn-progress-track { height: 4px; background: var(--ab-line); border-radius: 999px; overflow: hidden; }
.learn-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ab-pink), var(--ab-purple)); transition: width .2s linear; }
.learn-canvas { background: var(--ab-paper); border: 1px solid var(--ab-line); border-radius: 16px; overflow: hidden; box-shadow: var(--ab-shadow-sm); position: relative; }
.learn-canvas__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .learn-canvas__grid { grid-template-columns: 1fr 440px; } }
.learn-image-panel { background: #1b1c1b; display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 280px; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .learn-image-panel { padding: 1.5rem; min-height: 520px; } }
.learn-image-btn { background: transparent; border: 0; padding: 0; cursor: pointer; display: block; position: relative; }
.learn-image { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 6px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); user-select: none; pointer-events: none; }
.learn-image-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .2s; opacity: .9; pointer-events: none; }
.learn-image-overlay--playing { opacity: 0; }
.learn-image-btn:hover .learn-image-overlay--playing { opacity: 1; }
.learn-image-overlay__btn { width: 64px; height: 64px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.learn-image-fallback { text-align: center; color: rgba(255,255,255,.75); padding: 2rem; max-width: 28rem; font-size: .9rem; }
.learn-slide-counter { position: absolute; top: .75rem; left: .75rem; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); font-family: var(--ab-font-mono); pointer-events: none; }
.learn-text-panel { padding: 1.5rem; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .learn-text-panel { padding: 2rem; } }
.learn-slide-content { flex: 1; animation: learn-slide-in .24s ease; }
@keyframes learn-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.learn-caption { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ab-pink-deep); font-weight: 600; margin: 0 0 .5rem; }
.learn-title { font-family: var(--ab-font-brand); font-size: 1.5rem; font-weight: 600; color: var(--ab-ink); line-height: 1.2; margin: 0; }
@media (min-width: 1024px) { .learn-title { font-size: 1.8rem; } }
.learn-subcaption { font-style: italic; color: var(--ab-pink-deep); margin-top: .5rem; line-height: 1.4; }
.learn-narration { margin-top: 1.2rem; color: var(--ab-ink-soft); line-height: 1.65; font-size: 15px; }
.learn-player { border-top: 1px solid var(--ab-line); background: rgba(245,245,247,.6); padding: .75rem 1.2rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.learn-btn { border-radius: 8px; border: 1px solid var(--ab-line); background: var(--ab-paper); padding: .375rem .75rem; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .3rem; color: var(--ab-ink-soft); cursor: pointer; }
.learn-btn:hover { background: var(--ab-cloud); }
.learn-btn--primary { background: var(--ab-pink); border-color: var(--ab-pink); color: #fff; padding: .375rem 1rem; }
.learn-btn--primary:hover { background: var(--ab-pink-deep); border-color: var(--ab-pink-deep); }
.learn-btn:disabled { opacity: .4; cursor: not-allowed; }
.learn-seek { flex: 1; min-width: 160px; display: flex; align-items: center; gap: .5rem; }
.learn-seek .learn-progress-track { flex: 1; cursor: pointer; height: 6px; }
.learn-time { font-family: var(--ab-font-mono); font-size: 11px; color: var(--ab-mid); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.learn-auto { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ab-mid); display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; }
.learn-hint { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ab-mute); text-align: center; margin-top: .75rem; font-family: var(--ab-font-mono); }
.learn-toc { position: absolute; inset: 0; z-index: 5; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); padding: 1.25rem; overflow: auto; border-radius: 16px; }
.learn-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.learn-toc button { width: 100%; text-align: left; padding: .5rem .75rem; border-radius: 8px; border: 0; background: transparent; display: flex; gap: .75rem; align-items: baseline; }
.learn-toc button:hover { background: var(--ab-cream); }
.learn-toc button.is-active { background: var(--ab-cream); color: var(--ab-pink-deep); }
.learn-toc .n { font-family: var(--ab-font-mono); font-size: .72rem; color: var(--ab-pink-deep); width: 2rem; flex-shrink: 0; }

/* ---------- Costs / charts ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--ab-font-body); font-size: 11px; fill: var(--ab-mid); }
.chart .bar { fill: var(--ab-purple); }
.chart .bar:hover { fill: var(--ab-pink); }
.chart .axis { stroke: var(--ab-line); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .78rem; color: var(--ab-mid); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .35rem; vertical-align: -1px; }

/* ---------- Developers / docs ---------- */
.dev-code { background: var(--ab-ink); color: #E2E2EA; font-family: var(--ab-font-mono); font-size: .8rem; padding: 1rem 1.1rem; border-radius: var(--ab-radius); overflow-x: auto; line-height: 1.55; margin: .5rem 0 1rem; }
.dev-code .c { color: #8b8ba3; }
.dev-method { display: inline-block; font-family: var(--ab-font-mono); font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 5px; margin-right: .4rem; }
.dev-method--get { background: rgba(14,165,233,.15); color: #075985; }
.dev-method--post { background: rgba(234,76,137,.15); color: var(--ab-pink-deep); }
.dev-method--delete { background: rgba(192,57,43,.12); color: #991b1b; }
.endpoint { padding: .7rem 0; border-bottom: 1px solid var(--ab-line); }
.endpoint code { font-size: .86rem; }
.endpoint p { margin: .25rem 0 0; font-size: .85rem; color: var(--ab-mid); }
.endpoint .params { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.try-out { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.try-out .ab-input { max-width: 460px; font-family: var(--ab-font-mono); font-size: .8rem; }
.try-out pre { width: 100%; max-height: 320px; overflow: auto; }

/* ---------- Status ---------- */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .86rem; margin: 0; }
.dl dt { color: var(--ab-mute); } .dl dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- Account / admin ---------- */
.code-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.code-list code { display: block; padding: .5rem .7rem; border: 1px solid var(--ab-line); border-radius: 8px; background: var(--ab-cloud); font-size: .95rem; letter-spacing: .05em; text-align: center; }
.handle { font-family: var(--ab-font-mono); font-size: 1.3rem; font-weight: 600; color: var(--ab-violet); }

/* ---------- Skeleton ---------- */
.ab-skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--ab-cloud) 0%, #ECECEF 50%, var(--ab-cloud) 100%); background-size: 200% 100%; animation: ab-shimmer 1.4s infinite linear; }
@keyframes ab-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ab-skel { animation: none; } * { scroll-behavior: auto !important; } }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--ab-line); border-top-color: var(--ab-pink); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Print ---------- */
@media print {
  .ab-nav, .ab-aurora, .ab-footer, .explorer__tree, .explorer__side, .ab-modal-backdrop { display: none !important; }
  .ab-reader { box-shadow: none; border: 0; padding: 0; }
  body { font-size: 12pt; }
}

/* ---------- Staged selection (find / sets / confirm) ---------- */
.understood { padding: .6rem .8rem; border: 1px solid var(--ab-line); border-radius: 12px; background: var(--ab-lilac); gap: .4rem; }
.understood .ab-chip { gap: .3rem; }
.chip-x { background: none; border: 0; padding: 0 0 0 .1rem; color: inherit; opacity: .7; display: inline-flex; }
.chip-x:hover { opacity: 1; }
.chip-select { border: 1px solid var(--ab-line); border-radius: 6px; background: var(--ab-cloud); font-size: .75rem; padding: .1rem 1.2rem .1rem .45rem; color: var(--ab-mid); font-weight: 600; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6D7A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .3rem center; background-size: 10px; }
.sets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.set-card__counts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .78rem; color: var(--ab-mid); margin-top: .35rem; }
.set-card__counts b { color: var(--ab-ink); font-variant-numeric: tabular-nums; }
.set-card--empty { font-size: .84rem; }
.sel-group + .sel-group { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--ab-line); }
.is-omitted > .ab-tree__row .ab-tree__title { color: var(--ab-mute); text-decoration: line-through; }
.built-step { display: grid; grid-template-columns: 26px 1fr; gap: .3rem .6rem; padding: .55rem 0; border-bottom: 1px solid var(--ab-line); }
.built-step:last-child { border-bottom: 0; }
.built-step__head { grid-column: 1 / -1; display: flex; align-items: center; gap: .55rem; font-size: .84rem; }
.built-step__n { width: 22px; height: 22px; border-radius: 999px; background: var(--ab-ink); color: white; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; }
.built-step__body { grid-column: 2; }
.budget-line { font-size: .84rem; color: var(--ab-ink-soft); font-variant-numeric: tabular-nums; }
.try-example { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .5rem .9rem; border-radius: 12px; background: var(--ab-paper); border: 1px dashed var(--ab-pink); color: var(--ab-ink); text-decoration: none; font-size: .9rem; }
.try-example:hover { background: var(--ab-cream); }
.try-example b { color: var(--ab-pink-deep); font-weight: 600; }

/* ---------- AI Search timeline ---------- */
.howto summary { cursor: pointer; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; list-style: none; }
.howto summary::-webkit-details-marker { display: none; }
.scenarios { display: flex; flex-direction: column; gap: .4rem; }
.scenarios__group { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.scenarios__group .ab-eyebrow { min-width: 64px; }
.scenario { text-transform: none; letter-spacing: 0; font-weight: 500; background: var(--ab-paper); }
.scenario__tick { display: inline-flex; color: #047857; background: rgba(16,185,129,.16); border-radius: 999px; padding: 1px; }
.filters-toggle summary { cursor: pointer; color: var(--ab-mid); display: inline-flex; align-items: center; gap: .3rem; list-style: none; }
.filters-toggle summary::-webkit-details-marker { display: none; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.stage { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .8rem; }
.stage__rail { position: relative; display: flex; justify-content: center; }
.stage__rail::before { content: ''; position: absolute; top: 34px; bottom: -0.9rem; width: 2px; background: var(--ab-line); }
.stage:last-child .stage__rail::before { display: none; }
.stage__n { width: 30px; height: 30px; border-radius: 999px; background: var(--ab-cloud); border: 2px solid var(--ab-line); color: var(--ab-mid); display: grid; place-items: center; font-weight: 700; font-size: .8rem; z-index: 1; transition: background .2s, border-color .2s; }
.stage[data-state="active"] .stage__n { border-color: var(--ab-sky); color: var(--ab-sky); background: #EFF8FD; animation: pulse 1.2s ease-in-out infinite; }
.stage[data-state="done"] .stage__n { background: linear-gradient(135deg, var(--ab-pink), var(--ab-purple)); border-color: transparent; color: white; }
.stage[data-state="error"] .stage__n { border-color: var(--ab-rust); color: var(--ab-rust); }
.stage[data-state="idle"] .stage__card { opacity: .55; }
.stage__card { min-width: 0; transition: opacity .2s; }
.stage__head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; margin-bottom: .5rem; }
.stage__blurb { margin: .15rem 0 0; font-size: .86rem; color: var(--ab-mid); }
.stage__body:empty { display: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,.35); } 50% { box-shadow: 0 0 0 6px rgba(14,165,233,0); } }
.ab-bar.mini { display: inline-block; width: 70px; height: 6px; vertical-align: middle; }
.hit { padding: .4rem 0; border-bottom: 1px solid var(--ab-line); }
.hit:last-child { border-bottom: 0; }
.hit__title { font-size: .86rem; color: var(--ab-ink); }
.hit__crumb { font-size: .72rem; color: var(--ab-mute); }
mark.term { background: #FDE68A; padding: 0 3px; border-radius: 3px; font-size: .74rem; }
@media (max-width: 720px) { .stage { grid-template-columns: 28px minmax(0, 1fr); gap: .5rem; } .stage__n { width: 24px; height: 24px; font-size: .7rem; } .stage__rail::before { top: 28px; } .stage__head { flex-direction: column; } }
.how-found__bar { border-left: 4px solid var(--ab-purple); }
.understood .ab-chip, .tag-list .ab-chip, .scenarios .ab-chip { white-space: normal; text-align: left; line-height: 1.3; }

/* ---------- Create: describe-first discovery ---------- */
.describe-box .ab-input--lg { font-size: 1rem; }
.discovery { border-left: 4px solid var(--ab-purple); }
.discovery__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .discovery__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); } }

/* ---------- API page ---------- */
.api-page .ab-section { margin: 1.6rem 0; }
.api-page .ab-h3 { margin-bottom: .5rem; }
.ab-table.compact td, .ab-table.compact th { padding: .45rem .6rem; font-size: .84rem; }
.ab-table.endpoints td:first-child { width: 58px; }
.ab-table.endpoints code { white-space: nowrap; }
.row-details summary { cursor: pointer; list-style: none; color: var(--ab-mid); }
.row-details summary::-webkit-details-marker { display: none; }
.row-details summary code { white-space: normal; word-break: break-all; font-size: .74rem; background: transparent; padding: 0; }
.row-details[open] summary { color: var(--ab-ink); }
.row-details .dev-code { font-size: .74rem; padding: .7rem .8rem; white-space: pre-wrap; word-break: break-word; }
.compact-list li { margin: .35rem 0; }
.dev-code { position: relative; }
/* Room for the copy button so it never covers the first line of code. */
.dev-code[data-copy-block] { padding-right: 2.9rem; }
.row-details .dev-code[data-copy-block] { padding-right: 2.6rem; }
.copy-btn { position: absolute; top: .45rem; right: .45rem; background: rgba(255,255,255,.12); border: 0; color: #E2E2EA; border-radius: 6px; width: 26px; height: 26px; display: grid; place-items: center; }
.copy-btn:hover { background: rgba(255,255,255,.22); }
.copy-btn.is-done { background: var(--ab-emerald); }

/* ---------- Tester feedback batch ---------- */
.crumbs { display: flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--ab-mid); flex-wrap: wrap; }
.crumbs a { color: var(--ab-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.crumbs a:hover { color: var(--ab-pink-deep); }
.crumbs .sep { color: var(--ab-line); }
.legend-line { line-height: 1.5; }
.allowance { font-size: .78rem; color: var(--ab-mid); }
.allowance b { color: var(--ab-ink); }
.allowance.is-low b { color: #92400e; }
.wordmap-figure { margin: 0 0 1rem; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); overflow: hidden; background: #fff; }
.wordmap-figure img, .puzzle-figure img { width: 100%; height: auto; display: block; }
.puzzle-figure { margin: 0 0 1rem; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); overflow: hidden; background: #fff; }
.puzzle-figure figcaption, .wordmap-figure figcaption { padding: .5rem .8rem; font-size: .8rem; color: var(--ab-mid); border-top: 1px solid var(--ab-line); display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.deck { display: flex; flex-direction: column; gap: .9rem; }
.slide { border: 1px solid var(--ab-line); border-radius: 12px; overflow: hidden; background: #fff; display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .slide.has-image { grid-template-columns: minmax(0, 1fr) minmax(220px, 40%); } }
.slide__body { padding: 1rem 1.2rem; }
.slide__n { font-family: var(--ab-font-mono); font-size: .68rem; color: var(--ab-mute); }
.slide__title { font-family: var(--ab-font-brand); font-weight: 600; font-size: 1.15rem; margin: .1rem 0 .2rem; }
.slide__sub { color: var(--ab-mid); font-size: .9rem; margin: 0 0 .5rem; }
.slide__notes { font-size: .82rem; color: var(--ab-ink-soft); background: var(--ab-cloud); padding: .5rem .7rem; border-radius: 8px; margin-top: .5rem; }
.recovery-banner { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border-radius: 10px; margin: 0 0 .9rem; font-size: .88rem; background: var(--ab-cloud); border: 1px solid var(--ab-line); color: var(--ab-ink); }
.recovery-banner--done { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); }
.recovery-banner b { font-weight: 600; }
.recovery-banner a { font-weight: 600; }
.slide__sources { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .6rem; font-size: .78rem; color: var(--ab-mid); }
.slide__sources-label { text-transform: uppercase; letter-spacing: .04em; margin-right: .2rem; }
.slide__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.audio-hero { padding: 1rem; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); background: var(--ab-lilac); margin-bottom: 1rem; }
.audio-hero audio { width: 100%; margin-top: .5rem; }
.retry-link { margin-left: .4rem; }

/* Checkbox groups for array parameters (quiz question types). */
.ab-fieldset { border: 1px solid var(--ab-line); border-radius: var(--ab-radius); padding: .5rem .7rem .6rem; margin: 0; }
.ab-fieldset legend { font-size: .78rem; font-weight: 600; color: var(--ab-ink-soft); padding: 0 .3rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .2rem .6rem; }
/* Subject folds on the explore landing grid. */
.subject-fold > summary { list-style: none; cursor: pointer; gap: .6rem; }
.subject-fold > summary::-webkit-details-marker { display: none; }
.subject-fold > summary::before { content: ''; width: .5rem; height: .5rem; border-right: 1.5px solid var(--ab-mute); border-bottom: 1.5px solid var(--ab-mute); transform: rotate(-45deg); transition: transform .15s; margin-right: .2rem; }
.subject-fold[open] > summary::before { transform: rotate(45deg); }
/* Endpoint table stacks its cells on narrow screens instead of hiding them in a horizontal scroll. */
@media (max-width: 700px) {
  .ab-table.endpoints thead { display: none; }
  .ab-table.endpoints tr { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; padding: .5rem 0; border-bottom: 1px solid var(--ab-line); }
  .ab-table.endpoints td { border: 0; padding: 0; }
  .ab-table.endpoints td:nth-child(3), .ab-table.endpoints td:nth-child(4) { grid-column: 1 / -1; }
  .ab-table.endpoints td:nth-child(4) { font-size: .72rem; overflow-wrap: anywhere; }
}
/* Course cards shown in the explorer reader before an element is chosen. */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; margin-top: .6rem; }
.course-card { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: left; background: var(--ab-cloud); border: 1px solid var(--ab-line); border-radius: 12px; padding: .7rem .8rem; font: inherit; cursor: pointer; color: var(--ab-ink); }
.course-card:hover { border-color: var(--ab-pink); background: #fff; }
.course-card__name { font-weight: 600; font-size: .9rem; line-height: 1.3; }
/* Tables inside grid or flex children must be allowed to shrink so they scroll inside their wrap instead of widening the page. */
.ab-table-wrap { min-width: 0; max-width: 100%; }
.grid > *, .ab-card { min-width: 0; }
/* The label field in the API-key form takes the free width; the number field never overlaps it. */
[data-apikey-form] .ab-field.grow { flex: 1 1 200px; min-width: 160px; }
[data-apikey-form] .ab-field { flex: 0 0 auto; }
@media (max-width: 520px) { [data-apikey-form] .ab-field, [data-apikey-form] .ab-field.grow { flex: 1 1 100%; } [data-apikey-form] input { width: 100% !important; } }
/* Citation links inside generated material. */
.md-content a.cite-link { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 999px; background: var(--ab-cloud); border: 1px solid var(--ab-line); color: var(--ab-mid); text-decoration: none; vertical-align: middle; }
.md-content a.cite-link:hover { border-color: var(--ab-pink); color: var(--ab-pink); }
/* Picked-outcomes mode on Create. */
.picked-hero { border-left: 4px solid var(--ab-pink); }
.picked--hero { display: flex; flex-wrap: wrap; gap: .5rem; }
.picked-chip { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; background: var(--ab-cloud); border: 1px solid var(--ab-line); border-radius: 12px; padding: .45rem .55rem .45rem .6rem; }
.picked-chip__body { display: flex; flex-direction: column; min-width: 0; }
.picked-chip__body b { font-size: .88rem; line-height: 1.3; }
.picked-chip__body small { color: var(--ab-mute); font-size: .72rem; line-height: 1.3; overflow-wrap: anywhere; }
.picked-chip__x { border: 0; background: transparent; color: var(--ab-mute); cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.picked-chip__x:hover { background: #fff; color: var(--ab-ink); }
.is-picked-mode .create-layout { margin-top: 1rem; }
/* Live status line beside the stage badges during long generation steps. */
.live-status { display: inline-flex; align-items: center; gap: .35rem; }
.spinner--xs { width: 10px; height: 10px; border-width: 1.5px; }
/* Archive toggle inside filter rows and the explorer picker. */
.ab-field--check { justify-content: flex-end; }
.ab-field--check .ab-check { margin-top: 1.35rem; }
.explorer__archived { grid-column: 1 / -1; color: var(--ab-mid); }
/* Slide layouts on the artifact page. */
.slide__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0; }
.slide__cell { background: var(--ab-cloud); border: 1px solid var(--ab-line); border-radius: 10px; padding: .55rem .7rem; font-size: .88rem; }
.slide__cell b { display: block; margin-bottom: .15rem; }
.slide__flow { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.slide__step { position: relative; flex: 1 1 160px; display: flex; gap: .5rem; background: var(--ab-cloud); border: 1px solid var(--ab-line); border-radius: 10px; padding: .55rem .7rem .55rem .6rem; font-size: .86rem; }
.slide__step-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--ab-ink); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.slide__arrow { position: absolute; right: -.75rem; top: 50%; transform: translateY(-50%); color: var(--ab-mute); font-size: 1rem; }
.slide__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: .5rem 0; }
.slide__col h4 { margin: 0 0 .3rem; font-size: .92rem; }
.slide__qa dt { font-weight: 600; margin-top: .4rem; } .slide__qa dd { margin: 0 0 .3rem; }
.slide__topic { display: inline-block; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ab-mid); border: 1px solid var(--ab-line); border-radius: 999px; padding: .1rem .5rem; margin: .3rem 0; }
.slide__summary { font-weight: 600; } .slide__question { font-style: italic; color: var(--ab-mid); }
@media (max-width: 640px) { .slide__grid, .slide__cols { grid-template-columns: 1fr; } .slide__arrow { display: none; } }
/* Trust badges and the Checks panel. */
.trust-badge { margin-left: .3rem; }
.checks .verify { align-items: flex-start; }
.text-bad { color: var(--ab-red, #b3261e); }

/* Gallery ------------------------------------------------------------------ */
.gallery-table-wrap { overflow-x: auto; }
.gallery-coverage td.num, .gallery-coverage th.num { text-align: right; white-space: nowrap; }
.gallery-coverage small { display: block; font-size: .68rem; color: var(--ab-mute); font-weight: 400; }
.gallery-cov { display: inline-block; min-width: 2.6rem; padding: .15rem .4rem; border-radius: 8px; text-decoration: none; color: var(--ab-ink); font-weight: 600; }
.gallery-cov--all { background: #e6f4ea; }
.gallery-cov--some { background: #fff4d6; }
.gallery-cov--none { background: #fde8e8; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: end; padding: .8rem 1rem; margin-bottom: 1.2rem; background: var(--ab-cream, #f6f4f1); border-radius: 12px; position: sticky; top: 0; z-index: 3; }
.gallery-filters label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: var(--ab-mute); }
.gallery-filters select, .gallery-filters input { font: inherit; font-size: .85rem; padding: .3rem .45rem; border: 1px solid var(--ab-line, #ddd); border-radius: 8px; background: #fff; color: var(--ab-ink); }
.gallery-filters__q input { min-width: 14rem; }
.gallery-filters__shown { margin-left: auto; }
.gallery-card__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--ab-cream, #f6f4f1); margin: -.2rem 0 .3rem; }
.gallery-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card__thumb--board img { object-fit: contain; padding: .4rem; background: #fff; }
.gallery-card__thumb--text { display: flex; align-items: center; justify-content: center; color: var(--ab-mute); }
.gallery-card__checks { display: flex; flex-direction: column; gap: .15rem; font-size: .74rem; line-height: 1.3; }
.gallery-check { display: flex; gap: .3rem; align-items: flex-start; }
.gallery-check svg { flex: none; margin-top: .15rem; }
.gallery-check--pass { color: #1b6b3a; }
.gallery-check--warn { color: #8a5a00; }
.gallery-check--fail { color: #9b1c1c; }
.gallery-check--none { color: var(--ab-mute); }
.gallery-card__audio { width: 100%; height: 32px; margin-top: .2rem; }
.gallery-card__exports { gap: .3rem; margin-top: auto; }
.gallery-feedback td:first-child { white-space: nowrap; }
.gallery-feedback td { font-size: .82rem; vertical-align: top; }
@media (max-width: 720px) { .gallery-filters { position: static; } }