/* Revision 2: dark blue background requested by the user.
   Uses the currently verified identity while new image/palette files are pending. */
:root {
  color-scheme: dark;
  --navy: #07172e;
  --cream: #07172e;
  --paper: #102849;
  --muted: #bccde0;
  --line: #c5e9ff29;
  --text: #f3faff;
  --accent: #c5e9ff;
  --support: #acc3dc;
  --surface: #102849;
  --surface-deep: #061326;
}

body { background: var(--navy); color: var(--text); }
::selection { background: var(--ice); color: var(--navy); }
:focus-visible { outline-color: var(--ice); }
h1 span, h2 span, .eyebrow, .profile-role, .card-category,
.demo-tag, .crumb a, .related-item small, .related-item.current strong {
  color: var(--accent);
}
.short-line { background: var(--accent); }
.brand img, .footer-brand img { filter: none; }
.preview-bar { background: #050e1e; color: #c6d9ec; }
.preview-bar button { border-color: #7c9ab9; }
nav a { color: #bccde0; }
nav a.active { color: var(--text); }
nav a.active:after { background: var(--ice); }
.button, .button-light { background: var(--ice); color: var(--navy); }
.button:hover, .button-light:hover { background: #edf8ff; color: var(--navy); }
.text-link { border-color: #adc9e560; }
.text-link:hover { color: var(--ice); }
.hero-footnote, .catalog-note, .footer-bottom, .crumb,
.results-line, .filter-tabs button, .lesson-tabs button,
.file-field small, .subject-strip .wrap>span,
.learning-steps>div>span { color: var(--support); }
.pending-note { color: var(--support)!important; }
.portrait-frame { box-shadow: 0 25px 65px #00000020; }
.portrait-shade { background: linear-gradient(0deg, #081b36e6, transparent 58%); }
.floating-lesson {
  background: #102849eb;
  color: var(--text);
  border-color: #b8dfff40;
  box-shadow: 0 14px 38px #0000002e;
}
.floating-lesson small, .lesson-link-label { color: var(--ice); }
.round-play { background: var(--ice); color: var(--navy); }
.subject-strip { background: #0b203d; border-color: var(--line); }
.subject-strip a span { color: var(--ice); }
.library-section { background: var(--surface-deep); }
.lesson-card { background: var(--surface); box-shadow: 0 4px 18px #00000015; }
.lesson-card:hover { box-shadow: 0 15px 35px #00000030; }
.save-button, .save-button[aria-pressed=true] { color: var(--ice); }
.save-button[aria-pressed=true] svg { fill: #c5e9ff45; }
.closing-section { background: #050f20; border-block: 1px solid var(--line); }
.closing-section .eyebrow { color: var(--ice); }
.closing-section img { opacity: .11; }
.search, .lesson-panel textarea { background: var(--surface-deep); color: var(--text); border-color: #6685a8; }
.search svg, .search input { color: var(--text); }
input::placeholder, textarea::placeholder { color: #a6bdd5; opacity: 1; }
input, textarea, select { caret-color: var(--ice); }
.filter-button { border-color: #7794b6; }
.filter-button span { background: var(--surface); color: var(--text); }
.filter-button[aria-pressed=true] { background: var(--ice); color: var(--navy); border-color: var(--ice); }
.filter-button[aria-pressed=true] span { background: #1029501a; color: var(--navy); }
.filter-tabs button.active, .lesson-tabs button.active, .editor-tabs button.active {
  color: var(--text);
  border-bottom-color: var(--ice);
}
.empty-state { border-color: #6685a8; }
.video-player { background: #050f20; border: 1px solid var(--line); }
.player-placeholder .round-play { color: white; }
.delete-lesson, .form-status.error { color: #ffb3b8; }
dialog { background: #102849; color: var(--text); border: 1px solid #c5e9ff38; }
dialog::backdrop { background: #041226bf; }
.editor-notice, .file-field { background: #071a34; }
form input:not([type=file]), form textarea, form select {
  background: #071a34;
  color: var(--text);
  border-color: #6685a8;
}
form select option { color: var(--text); background: #071a34; }
input::file-selector-button {
  background: var(--ice);
  color: var(--navy);
  border: 0;
  border-radius: 4px;
  padding: 7px 10px;
  margin-right: 10px;
}
.skip { background: var(--ice); color: var(--navy); }
#toast { background: var(--ice); color: var(--navy); box-shadow: 0 5px 25px #00000040; }
@media(max-width:600px) {
  nav { background: var(--navy); box-shadow: 0 10px 24px #00000040; }
}

/* New main portrait: keep the hairline visible at every breakpoint. */
.portrait { object-position: 50% 0; }
.portrait-number { color: #193767; }
.teacher-mini img.profile-image { object-position: 50% 18%; }