/* ========================================================================
   v6 — extras. Tech-evidence chips inside the "What I learned" section.
   ======================================================================== */

.retro-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.retro-tech-chip {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--baby);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 4px 10px;
  border-radius: 7px;
}

/* "Where it's headed" note in the Scheduler spotlight */
.spot-next {
  margin-top: 14px;
}
.spot-next .spot-eng-label {
  color: var(--steel);
}
/* Muted final note — de-emphasized against the note above it. */
.spot-next .spot-note-muted {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

/* ========================================================================
   Scheduler CTA — sits above the "Also" cards in the Ownership section.
   ======================================================================== */
.sched-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  width: 100%;
  text-align: left;
  margin-bottom: clamp(28px, 3vw, 40px);
  padding: clamp(26px, 3vw, 38px) clamp(26px, 3.2vw, 42px);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(16, 130, 242, 0.28), transparent 60%),
    linear-gradient(135deg, var(--oxford), var(--navy));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sched-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 130, 242, 0.55);
  box-shadow: 0 18px 44px rgba(6, 33, 92, 0.32);
}
.sched-cta:active { transform: translateY(-1px); }
.sched-cta:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; }

.sched-cta-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(16, 130, 242, 0.35), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.sched-cta-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sched-cta-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.sched-cta-title {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: #fff;
}
.sched-cta-sub {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
  max-width: 46ch;
  text-wrap: pretty;
}

.sched-cta-action {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  background: var(--azure);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.16s ease, transform 0.16s ease;
}
.sched-cta:hover .sched-cta-action { background: var(--azure-hover); }
.sched-cta-action svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s var(--ease);
}
.sched-cta:hover .sched-cta-action svg { transform: translateX(3px); }

@media (max-width: 680px) {
  .sched-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .sched-cta-action { align-self: stretch; justify-content: center; }
}

/* ========================================================================
   Scheduler modal — near full-screen, rounded, bordered overlay.
   ======================================================================== */
.sched-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 36px);
  background: rgba(6, 16, 38, 0.62);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
}
.sched-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.sched-modal {
  position: relative;
  width: min(1120px, 96vw);
  height: min(92vh, 1000px);
  background: var(--oxford);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  box-shadow: 0 40px 120px rgba(3, 12, 32, 0.6);
  overflow: hidden;
  transform: translateY(18px) scale(0.985);
  opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.sched-modal-overlay.open .sched-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.sched-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.12s ease, border-color 0.16s ease;
}
.sched-modal-close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}
.sched-modal-close:active { transform: scale(0.92); }
.sched-modal-close svg { width: 20px; height: 20px; }

.sched-modal-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: var(--steel) transparent;
  scrollbar-width: thin;
}
.sched-modal-scroll::-webkit-scrollbar { width: 8px; }
.sched-modal-scroll::-webkit-scrollbar-thumb {
  background: var(--steel);
  border-radius: 4px;
}
/* The spotlight is already dark; drop its rounded clipping to the modal and
   keep its padding comfortable inside the panel. */
.sched-modal-scroll .spotlight {
  min-height: 100%;
}

@media print {
  .sched-modal-overlay { display: none !important; }
}

/* Editorial "note" callout inside a month-by-month chapter — sets a bit of
   context apart from the technical paragraphs. */
.chapter-note {
  margin: 18px 0 0;
  padding: 12px 16px;
  max-width: 50ch;
  border-left: 2px solid var(--baby);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}
/* Accent variant — white card so the note reads as a callout against the
   dark section. Body text matches the ownership list (var(--ink-700)). */
.chapter-note.chapter-note--accent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(16, 130, 242, 0.5);
  background: rgba(16, 130, 242, 0.13);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 500;
}
.chapter-note.chapter-note--accent::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: var(--baby);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>') center / contain no-repeat;
}

/* Month-by-month slides: the frame hugs the uploaded image's own aspect
   ratio (set inline by JS from the image's natural size) so there's no dead
   space inside the box. Empty slots fall back to a 16/10 drop zone. */
.highlights .chapter-frame image-slot {
  aspect-ratio: 16 / 10;
  max-height: none;
}

/* Trash control — lower-left of the frame, only while an image is set.
   Clears the slot back to its drag/upload state. */
.chapter-trash {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, transform 0.15s ease;
}
.chapter-trash svg {
  width: 17px;
  height: 17px;
}
.chapter-trash:hover {
  background: #b3261e;
  transform: translateY(-1px);
}

/* Filled image invites a click to open full-size. */
.chapter-frame:has(image-slot[data-filled]) {
  cursor: zoom-in;
}

/* Lightbox / full-size preview. */
.cd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(8, 12, 24, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
  animation: cd-lightbox-in 0.18s ease both;
}
@keyframes cd-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cd-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  cursor: default;
  animation: cd-lightbox-zoom 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cd-lightbox-zoom {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.cd-lightbox-close {
  position: fixed;
  top: clamp(14px, 2.5vw, 28px);
  right: clamp(14px, 2.5vw, 28px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.15s ease;
}
.cd-lightbox-close svg {
  width: 22px;
  height: 22px;
}
.cd-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}