/* ========================================================================
   v8-only additions. Loaded after all shared stylesheets so it can layer on
   top without touching earlier versions.
   ======================================================================== */

/* Retrospective modal scroll container — mirrors .sched-modal-scroll so the
   "What I learned" modal matches the Scheduler modal chrome, but keeps its
   own class so content-editing keys never collide between the two modals. */
.retro-modal-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: var(--steel) transparent;
  scrollbar-width: thin;
}
.retro-modal-scroll::-webkit-scrollbar { width: 8px; }
.retro-modal-scroll::-webkit-scrollbar-thumb {
  background: var(--steel);
  border-radius: 4px;
}
.retro-modal-scroll .section {
  min-height: 100%;
}

/* "What I learned" pill sits centered below the Beyond-the-code entries,
   matched to the Scheduler pill's width. */
.btc-cta-wrap {
  max-width: var(--maxw);
  margin: clamp(44px, 5.5vw, 68px) auto 0;
  padding: 0 var(--gutter);
}

/* Balance the space around the pill so it doesn't float — the section's
   default bottom padding left far more air below than above. */
#beyond.section {
  padding-bottom: clamp(44px, 5.5vw, 68px);
}
/* The shared pill carries a bottom margin meant for when it stacks above
   other content; as the section's last element it just adds dead air. */
.btc-cta-wrap .sched-cta { margin-bottom: 0; }

/* Lighter blue/gray treatment so the retrospective pill belongs to this
   tinted section and reads as calmer than the dark azure Scheduler pill,
   while staying entirely within the blue + gray ramps. */
.sched-cta.retro-cta {
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(16, 130, 242, 0.10), transparent 58%),
    linear-gradient(135deg, var(--sky), #fff);
  border: 1px solid var(--baby);
  box-shadow: var(--shadow-sm);
}
.sched-cta.retro-cta:hover {
  border-color: var(--steel);
  box-shadow: 0 16px 40px rgba(6, 33, 92, 0.14);
}
.sched-cta.retro-cta:focus-visible { outline-color: var(--azure); }
.sched-cta.retro-cta .sched-cta-glow {
  background: radial-gradient(circle, rgba(16, 130, 242, 0.16), transparent 70%);
}
.sched-cta.retro-cta .sched-cta-kicker { color: var(--ink-500, #64748B); }
.sched-cta.retro-cta .sched-cta-title { color: var(--oxford); }
.sched-cta.retro-cta .sched-cta-sub { color: var(--ink-600); }
.sched-cta.retro-cta .sched-cta-action {
  background: var(--oxford);
  color: #fff;
}
.sched-cta.retro-cta:hover .sched-cta-action { background: var(--navy); }

/* "and several more" — a quiet disclosure below the ownership list. Reads as
   plain body copy, not a control: centered, no disclosure marker, default
   cursor, and it inherits the list's own text color so it never looks tappable.
   Expandable body starts empty and is meant to be extended, not promoted. */
.own-more {
  max-width: var(--maxw);
  margin: clamp(28px, 4vw, 52px) auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}
.own-more > summary {
  list-style: none;
  cursor: default;
  display: inline-block;
  padding: 0 28px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-700);
  text-wrap: pretty;
  user-select: none;
  -webkit-user-select: none;
}
.own-more > summary::-webkit-details-marker { display: none; }
.own-more-accent { color: var(--azure); }
.own-more > summary::marker { content: ""; }
.own-more > summary:focus { outline: none; }
.own-more-body {
  text-align: left;
  margin-top: clamp(12px, 1.8vw, 22px);
}
.own-more-group {
  margin-top: clamp(30px, 3.4vw, 44px);
}
.own-more-group:first-child {
  margin-top: 10px;
}
.own-more-group-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure);
  padding-bottom: 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--ink-300, #cbd5e1);
}
.own-more-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 4vw, 64px);
}
@media (max-width: 720px) {
  .own-more-list { grid-template-columns: 1fr; }
}
.own-more-item {
  padding: 15px 0;
  border-bottom: 1px solid var(--ink-200);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-700);
  text-wrap: pretty;
}
.own-more-item:last-child {
  border-bottom: 0;
}

/* Sub-movement inside a spotlight pillar — a second beat within the Systems
   body. Uses div/span (never p/h3) so it stays OUTSIDE the content-edit
   selectors and never shifts the sched: editing indices. A hairline rule +
   kicker gives the mobile-portals story its own billing without competing
   with the pillar's own h3. */
.spot-submovement {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 52ch;
}
.spot-sub-k {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure);
  margin-bottom: 10px;
}
.spot-sub-t {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 10px;
}
.spot-sub-body {
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}

/* Engineering / Where-it's-headed now live in the right rail under the
   vocabulary instead of as full-width footers. Neutralize the old centered,
   gutter-padded footer geometry and let them sit as narrow-column notes,
   separated from the vocabulary (and each other) by a hairline. */
.spot-side .spot-eng {
  max-width: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.spot-side .spot-eng p {
  max-width: none;
  font-size: 14px;
  line-height: 1.58;
}
.spot-side .spot-eng p + p {
  margin-top: 12px;
}