/* Sandbox Seminary tokens and components (track t0; ux/palette.md, "Sky").
   Loaded by templates/base.html only when cbe_on, and scoped to the
   cbe-demo body class, so no other tenant changes. Every color lives in the
   token set below: a later color change is one edit here.
   Crimson marks evaluation only (flags, failed criteria, faculty marks).
   Every animation and transition sits in the reduced-motion block at the end. */
body.seminary-cbe-demo {
  --cbe-ink: #0F1B2D;
  --cbe-ink-dark: #08111E;
  --cbe-sky: #EAF1F8;
  --cbe-sky-soft: #F2F5F9;
  --cbe-page: #FFFFFF;
  --cbe-divider: #E5E7EB;
  --cbe-cobalt: #2456C6;
  --cbe-cobalt-dark: #1C46A3;
  --cbe-slate: #4C6A92;
  --cbe-slate-dark: #3B5679;
  --cbe-synthetic: #E6EEF8;
  --cbe-crimson: #A31D36;
  --cbe-crimson-dark: #7E1529;
  --cbe-head: "Manrope", system-ui, sans-serif;
  --cbe-body: "Mulish", system-ui, sans-serif;
  --cbe-radius: 0.75rem;
  --cbe-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 8px 24px rgba(15, 27, 45, 0.06);
  background: var(--cbe-page);
  color: var(--cbe-ink);
  font-family: var(--cbe-body);
}
/* Headings: Manrope 600 to 800, ink. No serif display face (palette.md). */
body.seminary-cbe-demo h1, body.seminary-cbe-demo h2, body.seminary-cbe-demo h3,
body.seminary-cbe-demo .cbe-h, body.seminary-cbe-demo .font-display {
  font-family: var(--cbe-head); letter-spacing: -0.01em;
}
body.seminary-cbe-demo.cbe-page main h1, body.seminary-cbe-demo.cbe-page main h2, body.seminary-cbe-demo.cbe-page main h3 { color: var(--cbe-ink); }
body.seminary-cbe-demo.cbe-page main h1 { font-weight: 800; font-size: 1.875rem; line-height: 1.15; margin: 0.25rem 0 0.5rem; }
body.seminary-cbe-demo.cbe-page main h2 { font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin: 0 0 0.75rem; }
@media (min-width: 900px) { body.seminary-cbe-demo.cbe-page main h1 { font-size: 2.5rem; } }
body.seminary-cbe-demo.cbe-page main a { color: var(--cbe-cobalt); }
body.seminary-cbe-demo.cbe-page main a:hover { color: var(--cbe-cobalt-dark); }
body.seminary-cbe-demo.cbe-page main a.cbe-btn:not(.cbe-btn--outline) { color: var(--cbe-page); }
.seminary-cbe-demo :focus-visible { outline: 3px solid var(--cbe-slate); outline-offset: 2px; }

/* Shell: demo strip, top bar, the rail (15rem from 1024px) and "Navigate" on a phone.
   The chrome sits above <main> (z-index) so the rail beside it takes clicks. */
.cbe-chrome { position: relative; z-index: 20; }
.cbe-demo-strip { background: var(--cbe-sky-soft); color: var(--cbe-ink); font-size: 0.8125rem; padding: 0.4rem 1rem; text-align: center; }
.cbe-top { background: var(--cbe-page); border-bottom: 1px solid var(--cbe-divider); }
.cbe-top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; }
.cbe-brand { font-family: var(--cbe-head); font-weight: 800; font-size: 1.125rem; color: var(--cbe-ink); text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1.1; min-height: 44px; justify-content: center; }
.cbe-brand small { font-family: var(--cbe-body); font-weight: 600; font-size: 0.75rem; color: var(--cbe-slate-dark); }
.cbe-me { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: var(--cbe-ink); }
.cbe-me__name { display: none; }
.cbe-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--cbe-sky); color: var(--cbe-ink); font-family: var(--cbe-head); font-weight: 700; font-size: 0.8125rem; flex: none; }
.cbe-avatar--lg { width: 48px; height: 48px; font-size: 1rem; }
.cbe-mobnav { border-bottom: 1px solid var(--cbe-divider); padding: 0 1rem; background: var(--cbe-page); }
.cbe-mobnav > summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; color: var(--cbe-ink); }
.cbe-rail { display: none; }
.cbe-navlist { list-style: none; margin: 0; padding: 0.5rem 0; }
.cbe-navlist a { display: flex; align-items: center; min-height: 44px; padding: 0 0.75rem; border-radius: 0.5rem; color: var(--cbe-ink); text-decoration: none; font-weight: 600; }
.cbe-navlist a:hover { background: var(--cbe-sky-soft); }
.cbe-navlist a[aria-current="page"] { background: var(--cbe-sky); color: var(--cbe-cobalt-dark); }
.cbe-navlist__foot { border-top: 1px solid var(--cbe-divider); margin-top: 0.5rem; padding-top: 0.5rem; }
.cbe-navlist--shell a, .cbe-navlist--shell a:hover { color: rgba(255, 255, 255, 0.85); background: transparent; }
.cbe-navlist--shell a[aria-current="page"] { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.cbe-navlist--shell .cbe-navlist__foot { border-top-color: rgba(255, 255, 255, 0.15); }
main.cbe-main { width: 100%; max-width: none; padding: 1.5rem 1rem 3rem; }
.cbe-foot { border-top: 1px solid var(--cbe-divider); margin-top: 3rem; padding-top: 1rem; font-size: 0.8125rem; color: var(--cbe-slate-dark); }
@media (min-width: 640px) { .cbe-me__name { display: inline; } }
@media (min-width: 1024px) {
  .cbe-mobnav { display: none; }
  .cbe-rail { display: block; position: absolute; top: 100%; left: 0; width: 15rem; padding: 1.5rem 0.75rem; }
  main.cbe-main { padding: 1.5rem 2rem 3rem; }
  main.cbe-main--rail { padding-left: 17rem; }
}

/* Page head: eyebrow, title, one sentence, tags, header photo (7 and 5 columns). */
.cbe-ph { display: grid; gap: 1.25rem; align-items: center; margin-bottom: 2rem; }
.cbe-ph__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cbe-slate-dark); }
.cbe-ph__lede { color: var(--cbe-slate-dark); max-width: 36rem; font-size: 1.0625rem; line-height: 1.55; }
.cbe-ph__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
@media (min-width: 900px) { .cbe-ph { grid-template-columns: 7fr 5fr; } }
.cbe-photo { margin: 0; overflow: hidden; border-radius: var(--cbe-radius); background: var(--cbe-sky-soft); }
.cbe-photo img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 9; }
@media (min-width: 900px) { .cbe-photo--3x2 img { aspect-ratio: 3 / 2; } }
.cbe-photo--3x1 img { aspect-ratio: 3 / 1; }
.cbe-photo--1x1 img { aspect-ratio: 1 / 1; }

/* Tags, levels, numbers, callouts, buttons, cards, tables. Words first, color second. */
.cbe-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.75rem; font-weight: 700; border: 1px solid transparent; color: var(--cbe-ink); background: var(--cbe-sky-soft); }
.cbe-tag--synthetic { background: var(--cbe-synthetic); color: var(--cbe-ink); }
.cbe-tag--example { background: var(--cbe-page); border: 1px dashed var(--cbe-slate); color: var(--cbe-slate-dark); }
.cbe-tag--flag { background: var(--cbe-page); border-color: var(--cbe-crimson); color: var(--cbe-crimson); }
.cbe-tag--blind { background: var(--cbe-ink); color: var(--cbe-page); }
.cbe-tag--confirmed { background: var(--cbe-sky); color: var(--cbe-slate-dark); }
.cbe-tag--waiting { background: var(--cbe-page); border: 1px dotted var(--cbe-slate); color: var(--cbe-slate-dark); }
.cbe-level { display: inline-flex; align-items: center; border-radius: 0.5rem; padding: 0.2rem 0.6rem; font-size: 0.8125rem; font-weight: 700; border: 1px solid var(--cbe-divider); }
.cbe-level--not-yet-observed { background: var(--cbe-page); border-style: dashed; color: var(--cbe-slate-dark); }
.cbe-level--beginning { background: var(--cbe-sky-soft); color: var(--cbe-ink); }
.cbe-level--developing { background: var(--cbe-sky); color: var(--cbe-ink); }
.cbe-level--met { background: var(--cbe-ink); color: var(--cbe-page); border-color: var(--cbe-ink); }
.cbe-numbers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.cbe-numbers li { border-top: 3px solid var(--cbe-ink); padding-top: 0.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.cbe-numbers__value { font-family: var(--cbe-head); font-weight: 800; font-size: 2rem; line-height: 1.1; color: var(--cbe-ink); }
.cbe-numbers__label { font-size: 0.8125rem; color: var(--cbe-slate-dark); }
.cbe-numbers__note { font-size: 0.75rem; color: var(--cbe-slate-dark); }
.cbe-callout { background: var(--cbe-sky-soft); border-left: 4px solid var(--cbe-ink); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.cbe-callout--warning { border-left-color: var(--cbe-crimson); }
.cbe-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; border-radius: 12px; font-weight: 700; text-decoration: none; border: 1px solid var(--cbe-ink); background: var(--cbe-ink); color: var(--cbe-page); cursor: pointer; }
.cbe-btn:hover { background: var(--cbe-ink-dark); }
.cbe-btn--primary { background: var(--cbe-cobalt); border-color: var(--cbe-cobalt); }
.cbe-btn--primary:hover { background: var(--cbe-cobalt-dark); }
.cbe-btn--outline { background: var(--cbe-page); color: var(--cbe-ink); }
.cbe-card { display: block; background: var(--cbe-page); border: 1px solid var(--cbe-divider); border-radius: var(--cbe-radius); box-shadow: var(--cbe-shadow); padding: 1rem; color: inherit; text-decoration: none; }
.cbe-tw { overflow-x: auto; max-width: 100%; }
.cbe-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cbe-table th, .cbe-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--cbe-divider); vertical-align: top; }
.cbe-check { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; font-size: 0.9375rem; color: var(--cbe-ink); }
.cbe-check input { margin-top: 0.2rem; width: 1.25rem; height: 1.25rem; }
.cbe-credits { list-style: none; margin: 0; padding: 0; }
.cbe-credits li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--cbe-divider); font-size: 0.875rem; }
.cbe-credits img { width: 72px; height: 48px; object-fit: cover; border-radius: 0.375rem; flex: none; }
.cbe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shared surfaces CBE seats see (palette.md). The shared templates hard-code
   navy and a crimson primary button; here they take Sky tokens. Every rule is
   scoped to body.seminary-cbe-demo, so no other tenant changes. Crimson stays
   on evaluation marks only. Dark fills use ink; bands use sky with ink type. */
body.seminary-cbe-demo .bg-navy { background-color: var(--cbe-ink); }
body.seminary-cbe-demo select.bg-navy { background-color: var(--cbe-ink); color: var(--cbe-page); }
body.seminary-cbe-demo section.bg-navy { background-color: var(--cbe-sky); color: var(--cbe-ink); }
body.seminary-cbe-demo section.bg-navy :is(h1, h2, h3, p, li, span, a, div)[class*="text-white"]:not([class*="bg-"]),
body.seminary-cbe-demo section.bg-navy :is(h1, h2, h3, p, li, span, a, div)[class*="text-tan"]:not([class*="bg-"]) { color: var(--cbe-ink); }
body.seminary-cbe-demo section.ms-case-action-panel { background-color: var(--cbe-ink); color: var(--cbe-page); box-shadow: var(--cbe-shadow); }
body.seminary-cbe-demo section.ms-case-action-panel :is(h1, h2, h3, p, li, span, div)[class*="text-"]:not([class*="bg-"]) { color: var(--cbe-page); }
/* Isolated, transparent group: the shared luminosity blend has nothing to blend with, so the photo keeps natural color. */
body.seminary-cbe-demo figure.prepare-photo { background: transparent; isolation: isolate; }
body.seminary-cbe-demo figure.prepare-photo img { opacity: 1; }
body.seminary-cbe-demo aside.v54-professor-shelf { background-color: var(--cbe-ink); }
body.seminary-cbe-demo section.border-crimson { border-color: var(--cbe-cobalt); }
body.seminary-cbe-demo .v54-btn-primary { background-color: var(--cbe-cobalt); color: var(--cbe-page); }
body.seminary-cbe-demo .v54-btn-primary:hover { background-color: var(--cbe-cobalt-dark); color: var(--cbe-page); }
body.seminary-cbe-demo footer.bg-navy { background-color: var(--cbe-page); color: var(--cbe-ink); border-top: 1px solid var(--cbe-divider); }
body.seminary-cbe-demo footer.bg-navy[class] :is(a, p, span, div, li, h2, h3, small) { color: var(--cbe-ink); }
body.seminary-cbe-demo footer.bg-navy :is([class*="border-white"], .border-t, .border-b) { border-color: var(--cbe-divider); }

/* Motion (FR-17). Headlines rise, photos wipe up, lists stagger, link cards
   lift. Nothing is hidden by default: .is-waiting is set by cbe_motion.js only. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cbe-rise { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
  @keyframes cbe-wipe { from { clip-path: inset(100% 0 0 0); transform: scale(1.04); } to { clip-path: inset(0 0 0 0); transform: none; } }
  @keyframes cbe-fade-up { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
  .ms-cbe-rise { animation: cbe-rise 1350ms cubic-bezier(0.19, 1, 0.22, 1) both; }
  .ms-cbe-wipe img { animation: cbe-wipe 1650ms cubic-bezier(0.19, 1, 0.22, 1) both; }
  .ms-cbe-stagger > * { animation: cbe-fade-up 900ms cubic-bezier(0.19, 1, 0.22, 1) both; }
  .ms-cbe-stagger > *:nth-child(2) { animation-delay: 90ms; }
  .ms-cbe-stagger > *:nth-child(3) { animation-delay: 180ms; }
  .ms-cbe-stagger > *:nth-child(4) { animation-delay: 270ms; }
  .ms-cbe-stagger > *:nth-child(n+5) { animation-delay: 360ms; }
  .ms-cbe-lift { transition: transform 450ms cubic-bezier(0.19, 1, 0.22, 1), box-shadow 450ms cubic-bezier(0.19, 1, 0.22, 1); }
  .ms-cbe-lift:hover, .ms-cbe-lift:focus-visible { transform: translateY(-3px); }
  .is-waiting { opacity: 0; }
  .is-waiting .ms-cbe-rise, .is-waiting.ms-cbe-wipe img, .is-waiting .ms-cbe-wipe img, .is-waiting.ms-cbe-stagger > * { animation-play-state: paused; }
  .cbe-navlist a, .cbe-btn { transition: background-color 200ms ease; }
}

/* Portfolio entries: pills keep their natural size and the text keeps its breaks. */
.cbe-entries li { align-items: flex-start; }
.cbe-entries li > .cbe-tag { flex: none; align-self: flex-start; white-space: nowrap; }
.cbe-entries li > span:first-child { min-width: 0; }
.cbe-entry-detail { white-space: pre-line; }

/* Phones: wide tables become stacked cards. */
.cbe-scroll-hint { display: none; margin: 0 0 0.25rem; font-size: 0.75rem; color: var(--cbe-slate-dark); }
@media (max-width: 639px) {
  .cbe-queue-table, .cbe-queue-table tbody, .cbe-queue-table tr, .cbe-queue-table td { display: block; }
  .cbe-queue-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cbe-queue-table tr { border: 1px solid var(--cbe-divider); border-radius: var(--cbe-radius); box-shadow: var(--cbe-shadow); padding: 0.75rem; margin-bottom: 0.75rem; }
  .cbe-queue-table td { border: 0; padding: 0.2rem 0; }
  .cbe-queue-table td:last-child .cbe-btn { width: 100%; margin-top: 0.5rem; }
  .cbe-scroll-hint { display: block; }
  .cbe-heat th:first-child, .cbe-heat td:first-child { position: sticky; left: 0; background: var(--cbe-page); z-index: 1; }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"], body.seminary-cbe-demo [data-testid="meeting-scorecard"] tbody, body.seminary-cbe-demo [data-testid="meeting-scorecard"] tr, body.seminary-cbe-demo [data-testid="meeting-scorecard"] th, body.seminary-cbe-demo [data-testid="meeting-scorecard"] td { display: block; white-space: normal; }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"] td { padding-top: 0.15rem; padding-bottom: 0.15rem; }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"] td::before { display: inline-block; min-width: 6.5rem; font-size: 0.75rem; color: var(--cbe-slate-dark); }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"] td:nth-of-type(1)::before { content: "Owner"; }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"] td:nth-of-type(2)::before { content: "This week"; }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"] td:nth-of-type(3)::before { content: "4-week avg"; }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"] td:nth-of-type(4)::before { content: "Goal"; }
  body.seminary-cbe-demo [data-testid="meeting-scorecard"] td:nth-of-type(5)::before { content: "Status"; }
}