:root {
    --present-bg: #14181f;
    --present-quote-bg: #1f2937;
    --present-journal-bg: #1c2a24;
    --present-work-bg: #1c2333;
    --present-standards-bg: #241c33;
    --present-vocab-bg: #1c2a33;
    --present-homework-bg: #2a2015;
    --present-text: #f5f6f8;
    --present-muted: #b7bec9;
    --present-accent: #ffb454;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
    background: var(--present-bg);
    color: var(--present-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

a { color: inherit; }

/* ---------- Control bar ----------
   Always a single row, at any screen width: sizes shrink fluidly via
   clamp(), and if it still doesn't fit (a very narrow phone with a long
   date range showing) the nav cluster scrolls horizontally instead of
   wrapping to extra rows and eating vertical space meant for the slide.

   Every clamp()/min() value below has a plain fixed-unit fallback
   declared immediately before it. clamp() and min() only reached
   reliable, unprefixed support in browsers from late 2019/2020 — some
   interactive-whiteboard / signage displays run an older bundled
   Chromium that silently DROPS a declaration using a function it
   doesn't recognize, leaving the property unset. The fallback line
   guarantees a sane fixed size in that case; modern browsers simply
   apply the later, fluid value instead since it comes second.

   Spacing between items in every flex row here is done with margins on
   `> * + *` rather than the flexbox `gap` property. Flexbox gap wasn't
   supported until Chrome 84 (mid-2020) — on an older engine (e.g.
   Chromium 79, common on Android-based interactive displays) it's
   silently dropped, and every item in the row collapses flush against
   its neighbor with no spacing at all. Margins work identically on
   every version. Grid gap (used on the standards cards below) doesn't
   have this problem and is left as-is. */
.present-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.5rem 1rem;
    padding: clamp(0.4rem, 1.1vh, 0.75rem) clamp(0.6rem, 2vw, 1.25rem);
    padding-left: max(0.6rem, env(safe-area-inset-left));
    padding-right: max(0.6rem, env(safe-area-inset-right));
    padding-top: max(0.4rem, env(safe-area-inset-top));
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.present-bar > * + * { margin-left: 0.6rem; }
.present-bar-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}
.present-bar-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* If it still doesn't all fit and becomes scrollable, fade the edges
       so it's visually obvious there's more to scroll to rather than
       controls just silently running off-screen. */
    mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
}
.present-bar-nav::-webkit-scrollbar { display: none; }
.present-bar-nav > * + * { margin-left: 0.5rem; }
.present-bar-fsicon { display: none; }
.present-bar-link {
    flex: 0 0 auto;
    color: var(--present-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-size: clamp(0.68rem, 1.3vw, 0.9rem);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0.35rem 0.7rem;
    padding: clamp(0.28rem, 0.9vh, 0.4rem) clamp(0.5rem, 1.5vw, 0.8rem);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.present-bar-link:hover { background: rgba(255, 255, 255, 0.18); }
.present-date-form { flex: 0 0 auto; display: flex; }
.present-date-form > * + * { margin-left: 0.35rem; }
.present-date-form input {
    width: 100px;
    width: clamp(84px, 13vw, 120px);
    padding: 0.35rem 0.5rem;
    padding: clamp(0.28rem, 0.9vh, 0.4rem) clamp(0.4rem, 1.2vw, 0.6rem);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: var(--present-text);
    font-size: 0.85rem;
    font-size: clamp(0.68rem, 1.3vw, 0.9rem);
    text-align: center;
}
.present-date-form button {
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    padding: clamp(0.28rem, 0.9vh, 0.4rem) clamp(0.5rem, 1.5vw, 0.8rem);
    background: var(--present-accent);
    color: #2a1a00;
    font-weight: 600;
    font-size: 0.85rem;
    font-size: clamp(0.68rem, 1.3vw, 0.9rem);
    cursor: pointer;
}

/* ---------- Stage / slides ---------- */
.stage {
    position: relative;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
}

.slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 5vw;
    padding: clamp(1.25rem, 6vh, 4.5rem) clamp(1.25rem, 6vw, 4.5rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    background: var(--present-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slide.active { opacity: 1; visibility: visible; }

.slide-quote { background-color: var(--present-quote-bg); }
.slide-journal { background-color: var(--present-journal-bg); }
.slide-work { background-color: var(--present-work-bg); }
.slide-standards { background-color: var(--present-standards-bg); }
.slide-vocab { background-color: var(--present-vocab-bg); }
.slide-homework { background-color: var(--present-homework-bg); }
.slide-empty { background-color: var(--present-bg); }

/* A quote slide with a real background photo gets a dark scrim so text
   stays legible regardless of the image. */
.slide-quote.has-background { position: absolute; }
.slide-quote.has-background::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.75) 100%);
}

.slide-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    max-width: min(94vw, 1600px);
    width: 100%;
    text-align: center;
    max-height: 85vh;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
}

.slide-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.9rem;
    font-size: clamp(0.7rem, 1vw + 0.8vh, 1.2rem);
    color: var(--present-muted);
    margin: 0 0 1.5rem;
    margin: 0 0 clamp(1rem, 3vh, 2rem);
}

/* ---------- Quote slide ---------- */
.present-quote {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 2.4rem;
    font-size: clamp(1.6rem, 2.2vw + 2.6vh, 5.2rem);
    line-height: 1.32;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.present-quote footer {
    margin-top: 2rem;
    margin-top: clamp(1.25rem, 4vh, 2.5rem);
    font-style: normal;
    font-size: 1.2rem;
    font-size: clamp(1rem, 1vw + 1.2vh, 1.7rem);
    color: var(--present-accent);
    font-weight: 600;
}

/* ---------- Journal / Work rich content ---------- */
.present-rich {
    font-size: 1.4rem;
    font-size: clamp(1.05rem, 1.3vw + 1.6vh, 2.7rem);
    line-height: 1.5;
    text-align: left;
}
.present-rich h1, .present-rich h2, .present-rich h3 {
    font-size: 2rem;
    font-size: clamp(1.5rem, 2vw + 2vh, 3.6rem);
    line-height: 1.25;
    margin: 0 0 1rem;
}
.present-rich p { margin: 0 0 1rem; }
.present-rich ul, .present-rich ol { text-align: left; margin: 0 0 1rem; padding-left: 1.5em; }
.present-rich img { max-width: 100%; border-radius: 10px; margin: 1rem 0; }
.present-rich iframe {
    width: 100%;
    max-width: 900px;
    max-width: min(90vw, 1000px);
    aspect-ratio: 16 / 9;
    height: auto;
    border: none;
    border-radius: 10px;
    display: block;
    margin: 1rem auto;
}
.present-rich a { color: var(--present-accent); }
.present-image {
    max-width: 100%;
    max-height: 40vh;
    border-radius: 10px;
    margin-top: 1.5rem;
}
.present-due {
    margin-top: 1.25rem;
    color: var(--present-accent);
    font-weight: 600;
    font-size: 1rem;
    font-size: clamp(0.9rem, 1vw + 0.6vh, 1.25rem);
}
.present-attach { margin-top: 1.5rem; }
.present-attach a {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    font-size: 1rem;
    font-size: clamp(0.9rem, 1vw + 0.6vh, 1.15rem);
}

/* ---------- Standards slide ----------
   A responsive grid: auto-fit collapses unused column tracks to zero
   width, so a single standard stretches to fill the row, two spread
   across it side by side, and a longer list wraps into as many rows as
   it needs — the layout adapts to how much content there is instead of
   leaving a narrow column with empty space on either side. Falls back
   to a single column (still perfectly usable) if minmax(min(...)) isn't
   understood. */
.present-standards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 1.25rem;
    gap: clamp(1rem, 2.5vh, 2rem);
    width: 100%;
    text-align: left;
}
.present-standards li {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 1.4rem 1.8rem;
    padding: clamp(1.1rem, 2vh + 1vw, 2.4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.present-standards li > * + * { margin-top: 0.5rem; }
.present-standard-code {
    font-weight: 700;
    color: var(--present-accent);
    font-size: 1.3rem;
    font-size: clamp(1rem, 1vw + 1vh, 2rem);
    letter-spacing: 0.02em;
}
.present-standard-descr {
    font-size: 1.4rem;
    font-size: clamp(1.05rem, 1.1vw + 1.2vh, 2.5rem);
    line-height: 1.4;
}

/* ---------- Empty state ---------- */
.slide-empty h1 {
    font-size: 2.2rem;
    font-size: clamp(1.6rem, 2vw + 2vh, 3rem);
    font-weight: 600;
    color: var(--present-muted);
    margin: 0;
}

/* ---------- Nav arrows ---------- */
.slide-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    width: 3rem;
    width: clamp(2.4rem, 3vw + 2vh, 3.4rem);
    height: 3rem;
    height: clamp(2.4rem, 3vw + 2vh, 3.4rem);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.35);
    color: var(--present-text);
    font-size: 1.8rem;
    font-size: clamp(1.4rem, 1.6vw + 1vh, 2rem);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.slide-arrow:hover { opacity: 1; background: rgba(0, 0, 0, 0.6); }
.slide-arrow-prev { left: 1rem; left: max(1rem, env(safe-area-inset-left)); }
.slide-arrow-next { right: 1rem; right: max(1rem, env(safe-area-inset-right)); }

/* ---------- Dot indicators ---------- */
.slide-dots {
    position: fixed;
    bottom: 1.2rem;
    bottom: max(1.2rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
}
.slide-dots > * + * { margin-left: 0.6rem; }
.slide-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 0;
}
.slide-dot.active { background: var(--present-accent); }

/* ---------- Small-screen tuning ----------
   The bar and content already scale fluidly via clamp(); this just
   trims a couple of things further once space is genuinely tight. */
@media (max-width: 480px) {
    .slide-arrow { display: none; }
    .slide { padding: 1.1rem 1.1rem; }
}

/* Below this width the bar's text labels ("Sep 15", "Fullscreen",
   " Agenda") get dropped in favor of icon-only buttons so the whole
   toolbar reliably fits in one row without scrolling on a typical
   phone. The links stay just as usable — aria-labels carry the meaning
   that used to be in the visible text. */
@media (max-width: 540px) {
    .present-bar-daytext { display: none; }
    .present-bar-fsicon { display: inline; font-size: 1.05rem; }
    .present-bar-link { font-size: 0.85rem; font-size: clamp(0.75rem, 3.4vw, 0.95rem); }
}

@media (max-height: 420px) and (orientation: landscape) {
    .present-bar { padding-top: 0.3rem; padding-bottom: 0.3rem; }
    .slide-dots { bottom: 0.5rem; }
}

/* ---------- Captioned / aligned images from the editor ----------
   The editor wraps a captioned image in <figure class="image"> with an
   optional align-left / align-center / align-right class. */
.present-rich figure { display: table; max-width: 100%; margin: 1rem auto; }
.present-rich figure img { display: block; max-width: 100%; margin: 0; }
.present-rich figcaption { display: table-caption; caption-side: bottom; padding-top: 0.4rem;
    font-size: 0.85em; opacity: 0.8; text-align: center; }
.present-rich figure.align-left { float: left; margin: 0.25rem 1.25rem 0.75rem 0; }
.present-rich figure.align-right { float: right; margin: 0.25rem 0 0.75rem 1.25rem; }
.present-rich figure.align-center { margin-left: auto; margin-right: auto; }
.present-rich::after { content: ""; display: block; clear: both; }