/* =========================================================
   PEARL — Speaker Library Portal
   Design tokens taken directly from the client spec
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700&display=swap');

:root{
  /* --- required brand colors (from spec) --- */
  --navy:            #213b5b;   /* titles / rollover-active on menu buttons */
  --blush:           #be9c92;   /* standard button state / title accent */
  --blue-rollover:   #406d98;   /* button rollover / section header bg */
  --subsection-bg:   #edf4fa;   /* sub-section standard bg */
  --subsection-selected: #a6c9e4; /* sub-section / saved-presentation selected bg */
  --category-alt-bg: #f2f2f2;   /* alternating category background */
  --export-green:    #00aa0e;   /* export button standard state */
  --danger:          #7a0d16;   /* delete confirmation popup */
  --white: #ffffff;
  --text-body: #333333;
  --border-radius: 10px;

  /* layout */
  --header-h: 64px;
  --toolbar-h: 56px;
  --max-content: 1400px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:'Roboto', Arial, sans-serif;
  color:var(--text-body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; font-weight:700; }
p{ margin:0 0 .5em; line-height:1.5; }

a{ color:var(--blue-rollover); text-decoration:none; }
a:hover{ text-decoration:underline; }

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  border-radius:var(--border-radius);
  transition:background-color .15s ease, color .15s ease, opacity .15s ease;
}
button:focus-visible, a:focus-visible, input:focus-visible{
  outline:3px solid var(--blue-rollover);
  outline-offset:2px;
}

img{ max-width:100%; display:block; }

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* =========================================================
   Generic pill button (used across the site)
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4em;
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:.65em 1.3em;
  border-radius:var(--border-radius);
  background:var(--blush);
  color:var(--white);
}
.btn:hover, .btn:focus-visible{ background:var(--blue-rollover); color:var(--white); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

.btn--active{ background:var(--navy); }

.btn--export{ background:var(--export-green); }
.btn--export:hover, .btn--export:focus-visible{ background:var(--navy); }

.btn--danger{ background:var(--danger); }
.btn--danger:hover{ background:var(--navy); }

.btn--ghost{
  background:transparent;
  color:var(--navy);
  border:1px solid var(--navy);
}
.btn--ghost:hover{ background:var(--navy); color:var(--white); }

.btn--small{ font-size:.68rem; padding:.5em 1em; }

.btn--icon{
  width:44px;height:44px;
  padding:0;
  border-radius:50%;
  background:var(--blush);
  color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.1rem;
}
.btn--icon:hover{ background:var(--blue-rollover); }

/* =========================================================
   LOGIN PAGE (page 1)
   ========================================================= */
.login-page{
  min-height:100vh;
  min-height:100dvh; /* accounts for mobile browser chrome (address bar) */
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  background-image: url("../assets/index-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Group of language cards (PEARL / PERLE) — kept centered and middle
   as a single unit at any screen resolution; stacks on narrow screens.
   align-items:stretch (the flex default, stated explicitly here) makes
   both cards match height; a shared fixed flex-basis/max-width below
   makes them match width too. */
.login-group{
  width:100%;
  max-width:920px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
}

.login-card{
  flex:0 1 420px;
  width:100%;
  max-width:420px;
  box-sizing:border-box;
  background:var(--white);
  border:6px solid var(--blush); /* doubled from 3px */
  border-radius:20px;
  padding:2rem 1.5rem;
  text-align:center;
  box-shadow:0 20px 60px rgba(33,59,91,.15);
}

@media (max-width:820px){
  .login-group{ gap:1.5rem; }
}
.login-card h1.titleIndex{
  color:var(--navy);
  font-size:2.1rem;
  letter-spacing:.02em;
  margin-bottom:.5rem;
  text-align:left;
}
.login-card .tagline{
  color:var(--blush);
  font-weight:600;
  font-size:.85rem;
  line-height:1.4;
  margin-bottom:1.5rem;
  text-align:left;
}
.login-card h2{
  color:var(--navy);
  font-size:1.05rem;
  margin-bottom:1rem;
}
.login-field{
  width:100%;
  padding:.85em 1em;
  border:1px solid #c8c8c8;
  border-radius:6px;
  font-size:.95rem;
  margin-bottom:1.5rem;
  font-family:inherit;
}
.login-field:focus-visible{ outline:2px solid var(--blue-rollover); }

.login-submit{
  width:100%;
  max-width:260px;
  padding:.9em 1em;
  font-size:.8rem;
}
.login-legal{
  margin-top:1.75rem;
  font-size:.68rem;
  line-height:1.5;
  color:#666;
}
.login-links{ margin-top:.4rem; font-size:12px; }
.login-links a{ color:#00b1e6; }

.login-error{
  display:none;
  color:#a30d1c;
  font-size:.78rem;
  margin:-1rem 0 1rem;
}
.login-error.is-visible{ display:block; }

/* =========================================================
   SITE HEADER / MAIN NAV
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:200;
  background:var(--white);
  border-bottom:1px solid #e7e7e7;
}
.site-header__inner{
  max-width:var(--max-content);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.6rem;
  padding:.85rem 1.5rem;
}
.main-nav{ display:flex; gap:.6rem; }
.main-nav__link{
  display:inline-block;
  padding:.6em 1.1em;
  border-radius:var(--border-radius);
  background:var(--blush);
  color:var(--white);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.main-nav__link:hover, .main-nav__link:focus-visible{
  background:var(--blue-rollover);
  color:var(--white);
  text-decoration:none;
}
.main-nav__link[aria-current="page"]{ background:var(--navy); }
.main-nav__link--lang{ background:transparent; color:var(--navy); border:1px solid var(--navy); }
.main-nav__link--lang:hover{ background:var(--navy); color:var(--white); }

.hamburger{
  display:none;
  width:44px;height:44px;
  border-radius:8px;
  background:transparent;
  align-items:center;
  justify-content:center;
  border:1px solid var(--navy);
}
.hamburger span, .hamburger::before, .hamburger::after{
  content:"";
  display:block;
  width:22px;height:2px;
  background:var(--navy);
  position:relative;
}
.hamburger::before{ position:absolute; transform:translateY(-7px); }
.hamburger::after{ position:absolute; transform:translateY(7px); }

/* mobile off-canvas menu */
.mobile-nav{
  position:fixed;
  inset:0 0 0 auto;
  width:min(78vw,320px);
  height:100vh;
  background:var(--white);
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:300;
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
  padding:1.25rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav__close{
  align-self:flex-end;
  background:transparent;
  color:var(--navy);
  font-size:1.3rem;
  width:40px;height:40px;
}
.mobile-nav a{
  display:block;
  padding:.85em .5em;
  color:var(--navy);
  font-weight:700;
  border-radius:8px;
}
.mobile-nav a:hover, .mobile-nav a:focus-visible{ color:var(--blue-rollover); background:#f4f7fa; text-decoration:none; }
.nav-scrim{
  position:fixed; inset:0;
  background:rgba(33,59,91,.35);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:250;
}
.nav-scrim.is-visible{ opacity:1; pointer-events:auto; }

@media (max-width: 860px){
  .main-nav{ display:none; }
  .hamburger{ display:inline-flex; }
}

/* =========================================================
   PAGE HERO (title band under header)
   ========================================================= */
.page-hero{
  width:100%;
  padding:1.5rem 1.5rem .5rem;
}
.page-hero__inner{ max-width:var(--max-content); margin:0 auto; }
.page-hero h1{ color:var(--navy); font-size:1.9rem; }
.page-hero .subtitle{ color:var(--blue-rollover); font-weight:600; font-size:.95rem; margin-top:.25rem; }
.page-hero .section-label{ color:var(--navy); font-size:1.1rem; margin-top:1rem; letter-spacing:.02em; }
.page-hero .intro-copy{ font-size:.82rem; color:#555; margin-top:.35rem; max-width:1100px; }

/* =========================================================
   PORTAL LAYOUT (page 2): two equal-height scrolling columns
   ========================================================= */
.portal{
  width:100%;
  padding:1rem 1.5rem 2rem;
}
.portal__grid{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:300px 1fr;
  gap:1.25rem;
  align-items:stretch;
}
.column-frame{
  border:2px solid var(--blush);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:78vh;
  min-height:520px;
}

/* --- left column: accordion --- */
.lib-nav{
  overflow-y:auto;
  flex:1;
}

.lib-category{ }
.lib-category__title{
  padding:.75rem 1.1rem .35rem;
  color:var(--navy);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.lib-category:nth-child(odd) .lib-category__title{ background:var(--white); }
.lib-category:nth-child(even) .lib-category__title{ background:var(--category-alt-bg); }

.lib-section{ border-bottom:1px solid #fff; margin-bottom:5px; }
.lib-section__header{
  width:100%;
  text-align:left;
  background:var(--blue-rollover);
  color:var(--white);
  padding:.75rem 1.1rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.5rem;
  font-size:.9rem;
  font-weight:700;
  border-radius:0;
}
.lib-section__header:hover, .lib-section__header:focus-visible{ background:var(--navy); }
.lib-section__header .dur{ display:block; font-weight:400; font-size:.68rem; opacity:.85; margin-top:.2rem; }
.lib-section__arrow{ flex:0 0 auto; transition:transform .2s ease; font-size:.8rem; margin-top:.15rem; }
.lib-section.is-open .lib-section__arrow{ transform:rotate(180deg); }

/* Flat (leaf, no sub-sections) top-level items are selectable content just
   like sub-sections, so they share the sub-section's lighter background —
   only accordion "parent" headers (which expand/collapse a list) keep the
   darker blue container color. */
.lib-section__header--flat{
  background:var(--subsection-bg);
  color:var(--navy);
}
.lib-section__header--flat:hover,
.lib-section__header--flat:focus-visible,
.lib-section__header--flat.is-selected-flat{
  background:var(--subsection-selected);
}
.lib-section__header--flat .dur{ color:#4d6a86; opacity:1; }
.lib-section__header--flat .lib-section__desc{
  display:block;
  font-weight:400;
  font-size:.72rem;
  color:#3d5771;
  margin:.3rem 0 .35rem;
  line-height:1.4;
}

.lib-subsections{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  background:var(--subsection-bg);
}
.lib-section.is-open .lib-subsections{ max-height:1000px; }

.lib-subsection{
  width:100%;
  text-align:left;
  background:var(--subsection-bg);
  color:var(--navy);
  padding:.65rem 1.1rem .65rem 1.6rem;
  font-size:.76rem;
  border-bottom:1px solid #ffffff;
}
.lib-subsection .dur{ display:block; font-weight:400; font-size:.66rem; color:#4d6a86; margin-top:.15rem; }
.lib-subsection:hover, .lib-subsection:focus-visible{ background:var(--subsection-selected); }
.lib-subsection.is-selected{ background:var(--subsection-selected); }

/* standalone (top-level, non-accordion) sections e.g. "1. Epithelial..." */
.lib-section--flat{ cursor:pointer; }

/* --- right column: gallery --- */
.gallery-frame{ position:relative; }
.gallery{
  flex:1;
  overflow-y:auto;
  padding:1.25rem;
  display:grid;
  grid-template-columns:1fr 1fr; /* exactly two thumbnails per row, filling the box */
  gap:1.25rem;
  align-content:start;
  padding-bottom:calc(var(--toolbar-h) + 1.5rem);
}
.thumb{
  position:relative;
  width:100%;
  border-radius:12px;
  overflow:visible; /* never clip the action buttons below the image */
  background:#ddd;
  border:1px solid #e2e2e2;
  display:flex;
  flex-direction:column;
}

/* Image area: 655 x 368 px (72dpi) aspect ratio, matching the 1920x1080
   source PNGs. Fills the full width of its grid column (one of two equal
   columns), with height pinned via aspect-ratio so the box can never
   collapse to 0 (e.g. while a real image is still loading, missing, or
   fails to load). */
.thumb__image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:655/368;
  min-height:120px;
  overflow:hidden;
  background:#a6a6a6;
  border-radius:12px 12px 0 0;
}
.thumb__image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Shown whenever there is no real slide image yet (img failed to load,
   or was never given a src) — mirrors the "IMAGE SLIDE PLACEHOLDER" state
   from the design mockups so the box is never a blank/broken square. */
.thumb__placeholder-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1rem;
  color:#4a4a4a;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:#a6a6a6;
}
.thumb__image-wrap img.is-loaded ~ .thumb__placeholder-label,
.carousel__stage img.is-loaded ~ .thumb__placeholder-label{ display:none; }

.thumb__watermark{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.thumb__watermark span{
  background:rgba(255,255,255,.55);
  color:var(--navy);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.5em 1.4em;
  border-radius:8px;
  border:2px solid rgba(33,59,91,.5);
  transform:rotate(-25deg);
  font-size:1rem;
}
.thumb.is-selected .thumb__watermark{ display:flex; }

/* Action buttons always sit directly under the image, as their own row
   with a guaranteed height — never absolutely positioned, so they can
   never be hidden behind or clipped by the image above them. Right-aligned
   so the row's right edge lines up with the image's right border, matching
   the source mockups. */
.thumb__actions{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  padding:.6rem .75rem;
  background:var(--white);
  border-radius:0 0 12px 12px;
  flex-wrap:wrap;
  flex-shrink:0;
}
.thumb__actions .btn{ flex:0 0 auto; font-size:.62rem; padding:.55em .9em; white-space:nowrap; }

.empty-gallery{
  grid-column:1/-1;
  text-align:center;
  color:#888;
  padding:8rem 1rem;
  font-size:2rem;
}

/* fixed bottom toolbar inside the right column */
.gallery-toolbar{
  position:sticky;
  bottom:0;
  left:0;
  right:0;
  z-index:5;
  background:#e7dad4;
  border-top:1px solid var(--blush);
  padding:.7rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
  font-size:.72rem;
}
.gallery-toolbar__meta{
  display:flex;
  align-items:baseline;
  gap:1.1rem;
  flex:1 1 auto;
  min-width:0; /* required for the ellipsis truncation below to work inside a flex row */
  color:var(--navy);
  font-weight:600;
}
/* The presentation name is user-generated and can be any length. It's the
   only flexible-width piece of the toolbar: it grows/shrinks and truncates
   with an ellipsis, right-aligned against the fixed Slides/Duration labels,
   so it can never push the action buttons out of place. */
.gallery-toolbar__meta .name{
  flex:1 1 auto;
  min-width:0;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
}
.gallery-toolbar__actions{ display:flex; gap:.5rem; flex-wrap:nowrap; flex-shrink:0; }

@media (max-width:860px){
  .portal__grid{ grid-template-columns:1fr; }
  .column-frame{ height:auto; max-height:none; }
  .lib-nav{ max-height:340px; }
  .gallery{ max-height:60vh; }
}
@media (max-width:520px){
  .gallery{ grid-template-columns:1fr; }
  .thumb__actions .btn{ font-size:.6rem; }
}

/* =========================================================
   POPUPS / MODALS (shared)
   ========================================================= */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(33,59,91,.4);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:650; /* above .carousel-overlay (600) so Speaker Notes shows correctly when opened from the Enlarge carousel */
  padding:1.25rem;
}
.overlay.is-visible{ display:flex; }

.modal{
  background:var(--white);
  border:2px solid var(--blush);
  border-radius:16px;
  max-width:420px;
  width:100%;
  padding:1.5rem;
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.modal__close{
  position:absolute;
  top:.6rem; right:.6rem;
  width:36px;height:36px;
  background:var(--navy);
  color:var(--white);
  font-size:1rem;
}
.modal__close:hover{ background:var(--blue-rollover); }
.modal h3{ color:var(--navy); font-size:1.05rem; margin-bottom:.75rem; padding-right:2rem; }
.modal p{ font-size:.85rem; color:#444; }

.modal--name .modal-field-row{
  display:flex;
  gap:.6rem;
  margin-top:.5rem;
  flex-wrap:wrap;
}
.modal-field{
  flex:1 1 200px;
  padding:.75em .9em;
  border:1px solid #c8c8c8;
  border-radius:8px;
  font-family:inherit;
  font-size:.85rem;
}

.modal--confirm{ background:var(--blush); border:none; text-align:center; }
.modal--confirm h3{ color:var(--white); font-size:1.15rem; padding-right:0; }
.modal--confirm .modal-actions{ margin-top:1.1rem; display:flex; gap:.75rem; justify-content:center; }
.modal--confirm .btn{ background:var(--white); color:var(--navy); min-width:90px; }
.modal--confirm .btn:hover{ background:var(--navy); color:var(--white); }

.modal--danger{ background:var(--danger); }
.modal--danger h3{ color:var(--white); }

/* Toast-style "Added / Removed" confirmation shown over a thumbnail */
.toast{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.15);
  z-index:20;
  border-radius:12px;
}
.toast.is-visible{ display:flex; }
.toast__pill{
  background:var(--navy);
  color:var(--white);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.7em 1.6em;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.5);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.toast--removed .toast__pill{ background:var(--danger); }

/* Speaker notes modal is wider */
.modal--notes{ max-width:520px; text-align:left; }
.modal--notes p{ line-height:1.6; }

/* =========================================================
   CAROUSEL (enlarge view) — page 7
   ========================================================= */
.carousel-overlay{
  position:fixed;
  inset:0;
  background:#f2f0ee;
  display:none;
  z-index:600;
  padding:1.5rem;
}
.carousel-overlay.is-visible{ display:block; }
.carousel-overlay__close{
  position:absolute;
  top:1.25rem; right:1.25rem;
  width:44px;height:44px;
  background:var(--blush);
  color:var(--white);
  font-size:1.1rem;
}
.carousel-overlay__close:hover{ background:var(--navy); }

.carousel{
  max-width:1100px;
  margin:3.5rem auto 0;
  position:relative;
}
.carousel__stage{
  position:relative;
  width:100%;
  aspect-ratio:655/368;
  min-height:220px;
  background:#a6a6a6;
  border-radius:4px;
  overflow:hidden;
}
.carousel__stage img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel__stage .thumb__placeholder-label{ font-size:1.35rem; }

.carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;height:56px;
  border-radius:50%;
  background:var(--blush);
  border:2px solid var(--navy);
  color:var(--white);
  font-size:1.4rem;
}
.carousel__arrow:hover{ background:var(--blue-rollover); }
.carousel__arrow--prev{ left:-70px; }
.carousel__arrow--next{ right:-70px; }

/* Large desktop → laptop: arrows still sit outside the image, but the
   image itself starts shrinking so there's room for them. */
@media (max-width:1240px){
  .carousel{ max-width:900px; }
}

/* Tablet: shrink the image further (instead of just nudging the arrows
   inward) so both the left and right arrow are guaranteed to fit fully
   on-screen instead of running off the edge. */
@media (max-width:1024px){
  .carousel{ max-width:76%; }
  .carousel__arrow{ width:48px; height:48px; font-size:1.15rem; }
  .carousel__arrow--prev{ left:-58px; }
  .carousel__arrow--next{ right:-58px; }
}

/* Phones: not enough room outside the image at all — pull the arrows
   in over the image edges instead. */
@media (max-width:640px){
  .carousel{ max-width:100%; }
  .carousel__arrow--prev{ left:.4rem; }
  .carousel__arrow--next{ right:.4rem; }
}

.carousel__actions{
  display:flex;
  justify-content:flex-end;
  gap:.6rem;
  margin-top:.75rem;
}

/* =========================================================
   SAVED PRESENTATIONS PAGE (page 9)
   ========================================================= */
.saved-list{
  overflow-y:auto;
  flex:1;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.saved-card{
  background:var(--subsection-bg); /* #edf4fa — standard, not-selected state */
  border-radius:12px;
  padding:1rem .75rem;
  color:var(--navy);
  cursor:pointer;
  transition:background-color .15s ease;
}
.saved-card h3{ font-size:.9rem; margin-bottom:.35rem; color:var(--navy); }
.saved-card p{ font-size:.72rem; color:#3d5771; margin-bottom:.5rem; }
.saved-card .dur{ font-size:.7rem; font-weight:700; margin-bottom:.7rem; display:block; color:var(--navy); }
.saved-card:hover,
.saved-card.is-selected{ background:var(--subsection-selected); } /* #a6c9e4 — rollover / selected state */
.saved-card:hover p,
.saved-card.is-selected p{ color:#33506e; }
.saved-card__actions{
  display:flex;
  flex-wrap:nowrap; /* keep all four buttons on a single line, inside the card's background */
  gap:.3rem;
}
.saved-card__actions .btn{
  flex:1 1 0;
  min-width:0;
  font-size:.52rem;
  padding:.5em .2em;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.saved-card__actions .btn--delete{ background:var(--danger); }
.saved-card__actions .btn--delete:hover{ background:var(--navy); }
.saved-card__actions .btn--export{ background:var(--export-green); }
.saved-card__actions .btn--duplicate,
.saved-card__actions .btn--view{ background:var(--blush); }
.saved-card__actions button:hover{ background:var(--navy); color:var(--white); }

/* =========================================================
   SPEAKER GUIDE (page 12)
   ========================================================= */
.guide-overlay{
  position:fixed;
  inset:0;
  background:var(--white);
  z-index:700;
  overflow-y:auto;
  padding:2rem 1.5rem 4rem;
  display:none;
}
.guide-overlay.is-visible{ display:block; }
.guide-overlay__close{
  position:fixed;
  top:1.25rem; right:1.5rem;
  width:40px;height:40px;
  background:var(--blush);
  color:var(--white);
  font-size:1.9rem;
  z-index:5;
}
.guide-overlay__close:hover{ background:var(--navy); }
.guide-content{ max-width:1150px; margin:0 auto; }
.guide-content h1{ color:var(--navy); font-size:2rem; }
.guide-content .subtitle{ color:var(--blue-rollover); font-weight:600; margin:.35rem 0 1.5rem; }
.guide-content h2{ color:var(--navy); font-size:1.1rem; margin:1.75rem 0 .6rem; letter-spacing:.02em; }
.guide-content p, .guide-content li{ font-size:.85rem; color:#444; line-height:1.6; }
.guide-content ul{ padding-left:1.2rem; margin:.4rem 0; }

.guide-committee{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin-top:.75rem;
}
.committee-member{ max-width:220px; text-align:center; }
.committee-member img{
  width:96px;height:96px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto .6rem;
  border:2px solid var(--blush);
}
.committee-member .name{ font-weight:700; color:#222; font-size:.82rem; }
.committee-member .role{ font-size:.72rem; color:#666; margin-top:.2rem; }

.guide-cta{ text-align:center; margin-top:2.5rem; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  text-align:center;
  font-size:.68rem;
  color:#888;
  padding:2rem 1rem;
}

/* =========================================================
   EDIT / REORDER PAGE
   Opened from the portal page's "View/Reorder" button, and from the
   Saved Presentations page's "Edit" button. Reuses .thumb / .thumb__actions
   / .carousel* / .overlay from the gallery and carousel above — only the
   page-level layout is new.
   ========================================================= */
.edit-page{ background:var(--white); min-height:100vh; padding-bottom:calc(var(--toolbar-h) + 3rem); }

.edit-close{
  position:fixed;
  top:1.25rem;
  right:1.5rem;
  width:44px;
  height:44px;
  background:var(--blush);
  color:var(--white);
  font-size:1.1rem;
  z-index:60;
}
.edit-close:hover{ background:var(--navy); }

.edit-header{
  max-width:var(--max-content);
  margin:0 auto;
  padding:2rem 1.5rem .5rem;
}
.edit-header h1{
  color:var(--navy);
  font-size:1.5rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.edit-header .edit-subtitle{
  font-size:.85rem;
  color:#444;
  margin-top:.35rem;
}

.edit-grid{
  max-width:var(--max-content);
  margin:0 auto;
  padding:1.5rem 1.5rem calc(var(--toolbar-h) + 5rem); /* clears the fixed bottom toolbar so the last row's buttons are never hidden */
  display:grid;
  grid-template-columns:repeat(3, 1fr); /* three thumbnails per row, matching the reference layout */
  gap:1.5rem;
}
/* Draggable thumbnail cards reuse .thumb / .thumb__image-wrap / .thumb__actions
   styling as-is; only drag-specific states are added here. */
.edit-grid .thumb{ cursor:grab; }
.edit-grid .thumb.is-dragging{ opacity:.35; cursor:grabbing; }
.edit-grid .thumb.is-drag-over{ outline:2px dashed var(--blue-rollover); outline-offset:2px; }

.edit-toolbar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:50;
}

@media (max-width:960px){
  .edit-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .edit-grid{ grid-template-columns:1fr; }
}