/* Shared design-system foundations and overlays across every local page.
   Load after page styles and brand-alignment.css. Layouts, media, animation
   timing, cards and decorative brand shapes retain their approved geometry. */
:root {
  --ds-font-body: "O2C Lato", Lato, Arial, sans-serif;
  --ds-font-ui: Inter, Arial, sans-serif;
  --ds-teal: #297D77;
  --ds-teal-hover: #216861;
  --ds-ink: #161616;
  --ds-copy: #364153;
  --ds-muted: #4D5056;
  --ds-paper: #F1F0EE;
  --ds-border: #D5D7DA;
  --ds-green-tint: #E5F0C3;
}

/* Shared menus remain compact Inter interfaces. Their active states use teal. */
html body :is(.ln-context-panel,.ln-site-panel,.ln-menu-panel,.hub-menu-panel) {
  --o2c-ink: var(--ds-ink);
  --o2c-muted: var(--ds-muted);
  --o2c-bg-alt: var(--ds-paper);
  --o2c-line: var(--ds-border);
  --o2c-green: var(--ds-teal);
  font-family: var(--ds-font-ui);
  border-color: var(--ds-border);
  background: #fff;
}
html body :is(.ln-context-panel,.ln-site-panel,.hub-menu-panel) [aria-pressed="true"] {
  color: var(--ds-teal);
  background: #F0FDFA;
}
html body :is(.ln-site-panel,.hub-menu-panel) a.site-signup {
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  border-radius: 9999px;
  background: var(--ds-teal);
  color: #fff !important;
}
html body :is(.ln-site-panel,.hub-menu-panel) a.site-signup:hover {
  background: var(--ds-teal-hover);
}
html body :is(.ln-context-panel,.ln-site-panel,.ln-menu-panel,.hub-menu-panel) :focus-visible {
  outline-color: var(--ds-teal);
}

/* Audience entry keeps its two large cards and the approved first flight. */
html:is([data-o2c-entry="pending"],[data-o2c-entry="loading"]) {
  background: var(--ds-paper);
}
html body dialog.o2c-audience-entry {
  font-family: var(--ds-font-body);
  color: var(--ds-ink);
}
html body dialog.o2c-audience-entry:not(.is-playing),
html body dialog.o2c-audience-entry:not(.is-playing)::backdrop,
.o2c-entry-cover {
  background: var(--ds-paper);
}
html body .o2c-audience-entry :is(#o2c-entry-title,.o2c-entry-label) {
  font-family: var(--ds-font-body);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
html body .o2c-audience-entry #o2c-entry-title { color: var(--ds-ink); }
html body .o2c-audience-entry :is(#o2c-entry-description,.o2c-entry-note) { color: var(--ds-muted); }
html body .o2c-audience-entry .o2c-entry-eyebrow { font-family: var(--ds-font-ui); color: var(--ds-muted); }
html body .o2c-audience-entry .o2c-entry-k12 { background: var(--ds-green-tint); color: #1F3A33; }
html body .o2c-audience-entry .o2c-entry-global { background: #1F3A33; color: #fff; }
html body .o2c-audience-entry .o2c-entry-action { font-weight: 700; }
html body .o2c-audience-entry .o2c-entry-k12 .o2c-entry-action > span { background: var(--ds-teal); color: #fff; }
html body .o2c-audience-entry .o2c-entry-global .o2c-entry-action > span { background: var(--ds-green-tint); color: #1F3A33; }
html body .o2c-audience-entry .o2c-entry-option:focus-visible { outline-color: var(--ds-teal); }
html body .la-chooser :is(h2,.la-choice > strong,.la-choice-bottom) { font-family: var(--ds-font-body); font-weight: 700; }
html body .la-chooser :is(h2,.la-choice > strong) { letter-spacing: -.02em; line-height: 1.2; }
html body .la-choice-k12 { background: var(--ds-green-tint); }

/* Search: compact input/meta in Inter; result titles, explanations and actions
   in Lato. Existing result geometry and the full-screen mobile dialog stay. */
html body .o2c-search {
  --o2c-ink: var(--ds-ink);
  --o2c-muted: var(--ds-muted);
  --o2c-bg-alt: var(--ds-paper);
  --o2c-line: var(--ds-border);
  --o2c-green: var(--ds-teal);
  --o2c-lime: var(--ds-green-tint);
  font-family: var(--ds-font-ui);
}
html body .o2c-search :is(.o2c-search-title,.o2c-search-desc,.o2c-search-none,.o2c-search-close) { font-family: var(--ds-font-body); }
html body .o2c-search .o2c-search-close { font-weight: 700; color: var(--ds-teal); border-color: var(--ds-teal); }
html body .o2c-search .o2c-search-close:hover { background: #F0FDFA; }
html body .o2c-search :is(.o2c-search-close,.o2c-search-clear):focus-visible { outline-color: var(--ds-teal); }

/* Collection previews and unit-planning dialogs are part of the same site. */
html body :is(.lcp-dialog,.up-dialog,.up-chooser-action) {
  --o2c-ink: var(--ds-ink);
  --o2c-muted: var(--ds-muted);
  --o2c-bg-alt: var(--ds-paper);
  --o2c-line: var(--ds-border);
  --o2c-green: var(--ds-teal);
  --o2c-green-hover: var(--ds-teal-hover);
  font-family: var(--ds-font-body);
  color: var(--ds-ink);
  border-color: var(--ds-border);
}
html body :is(.lcp-current h2,.up-dialog #up-title,.up-intro h3,.up-word h4,.up-framework > h4) {
  font-family: var(--ds-font-body);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ds-ink);
}
html body :is(.lcp-context,.up-eyebrow,.up-collection,.up-controls,.up-tabs,.up-filter,.up-sources,.up-pos) { font-family: var(--ds-font-ui); }
html body :is(.lcp-toolbar button,.lcp-toolbar a,.up-open,.up-launch,.up-sources > button) {
  font-family: var(--ds-font-body);
  font-weight: 700;
  border-radius: 9999px;
}
html body :is(.lcp-return,.up-chooser-action .up-open,.up-launch) { background: var(--ds-teal); color: #fff; }
html body :is(.lcp-return,.up-chooser-action .up-open,.up-launch):hover { background: var(--ds-teal-hover); }
html body :is(.lcp-toolbar .lcp-open,.up-sources > button,.up-standard > strong) { color: var(--ds-teal); }
html body :is(.up-controls,.up-empty,.up-standard,.up-sources > button,.lcp-loading,.lcp-error) { background: var(--ds-paper); border-color: var(--ds-border); }
html body :is(.up-header,.up-tabs,.up-text-record,.up-sequence > button,.up-word,.up-controls select,.up-filter input,.up-filter select) { border-color: var(--ds-border); }
html body .up-tabs > button[aria-selected="true"] { color: var(--ds-teal); border-bottom-color: var(--ds-teal); }
html body :is(.lcp-dialog,.up-dialog,.up-chooser-action) :focus-visible { outline-color: var(--ds-teal); }

/* Slide and lesson-preview chrome; the lesson artwork itself is untouched. */
html body :is(.acl-dialog,.lis-viewer,.lc-viewer) {
  --acl-ink: var(--ds-ink);
  --acl-teal: var(--ds-teal);
  --lis-ink: var(--ds-ink);
  --lis-muted: var(--ds-muted);
  font-family: var(--ds-font-body);
  color: var(--ds-ink);
  background: #fff;
}
html body :is(.acl-preview-topline,.lis-viewer-category,.lis-viewer-navigation > span) { font-family: var(--ds-font-ui); color: var(--ds-muted); }
html body :is(.acl-close,.acl-library-link,.lis-viewer-close,.lc-viewer-bar button) { font-family: var(--ds-font-body); font-weight: 700; color: var(--ds-teal); }
html body :is(.lis-viewer-close,.lc-viewer-bar button) { border-radius: 9999px; }
html body :is(.acl-preview-topline,.lis-viewer-close,.lis-viewer-navigation button,.lc-viewer-bar button) { background: var(--ds-paper); }
html body :is(.lis-viewer-navigation button,.lis-viewer-close,.lc-viewer-bar button):hover:not(:disabled) { color: var(--ds-teal); background: #F0FDFA; }
html body :is(.lis-viewer-caption p,.lc-viewer p) { color: var(--ds-muted); }
html body :is(.acl-dialog,.lis-viewer,.lc-viewer) :focus-visible { outline-color: var(--ds-teal); }

/* Standalone film review gallery (the players retain their own scoped layer). */
body.o2c-film-gallery { background: var(--ds-paper); color: var(--ds-ink); font-family: var(--ds-font-body); }
.o2c-film-gallery :is(.review-intro h1,.review-player h2) { font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.o2c-film-gallery :is(.review-intro > p,.review-bottom p,.review-note) { color: var(--ds-muted); }
.o2c-film-gallery :is(.review-intro span,#film-nav > span,#film-nav button > i,.review-player > header span,.mobile-select) { font-family: var(--ds-font-ui); color: var(--ds-muted); }
.o2c-film-gallery :is(.review-top > a:last-child,.review-player > header a) { color: var(--ds-teal); }
.o2c-film-gallery #film-nav button { color: var(--ds-copy); font-family: var(--ds-font-body); }
.o2c-film-gallery #film-nav button:hover { background: #F0FDFA; }
.o2c-film-gallery #film-nav button[aria-pressed="true"] { background: var(--ds-teal); color: #fff; }
.o2c-film-gallery #film-nav button[aria-pressed="true"] > i { color: #fff; }
.o2c-film-gallery .review-bottom button { background: #F0FDFA; color: var(--ds-teal); }
.o2c-film-gallery .mobile-select select { color: var(--ds-ink); border-color: var(--ds-border); }
.o2c-film-gallery :focus-visible { outline-color: var(--ds-teal); }


/* Shared context chrome has a few explicit pre-token colours. */
html body .hub-context-menu > summary {
  color: var(--ds-ink);
  background: var(--ds-paper);
}
html body .ln-context-menu > summary i { background: var(--ds-teal); }
html body .la-chooser .la-choice-heading h2 { color: var(--ds-ink); }

/* Explicit literals inside shared overlays are not affected by inherited
 * token remapping. Keep controls compact and preserve the source material. */
html body :is(.lcp-toolbar .lcp-back, .lcp-toolbar .lcp-close, .lcp-error a) {
  color: var(--ds-teal);
}
html body .up-dialog :is(
  .up-eyebrow, .up-collection, .up-controls label,
  .up-tabs > button, .up-intro p, .up-overview > section > h4,
  .up-sequence > h4, .up-sources, .up-empty,
  .up-sequence > button small, .up-filter label,
  .up-filter > span, .up-pos, .up-word > small,
  .up-standard > small
) { color: var(--ds-muted); }
html body .up-dialog :is(
  .up-text-record > p, .up-controls select,
  .up-filter select, .up-filter input
) { color: var(--ds-ink); }
html body .up-dialog .up-sequence > button { color: var(--ds-teal); }
html body .up-dialog .up-tabs > button[aria-selected="true"] {
  color: var(--ds-teal);
  border-bottom-color: var(--ds-teal);
}