/* ═══════════════════════════════════════════════════════════════
   ACSS9 — shared interior-page stylesheet (agenda.html, terms.html)
   Layered on styles.css: that file supplies the fonts, tokens, reset,
   .topbar and .skip-link. This one carries the page chrome plus one
   block per interior page.
   ═══════════════════════════════════════════════════════════════ */

/* Same full-bleed band + shared content column contract as the landing
   page — see the --edge note in styles.css.
   EVERY new section must be added to BOTH lists below. A section missing
   from the first one has no gutter at all and its text runs to the
   viewport edge; missing from the second, its row will not centre. */
.page-head, .agenda, .legal, .page-foot {
  position: relative;
  width: 100%;
  padding-inline: var(--edge);
}
.page-head__row, .agenda__row, .legal__row, .page-foot__row {
  width: 100%;
  margin-inline: auto;
}

/* The landing page has a hero under the fixed bar; this page starts at
   the masthead, so it pays for the bar's height itself. */
.interior-page { background: var(--ice); }

.page-back {
  font: 600 11px/15px var(--font-body);
  letter-spacing: 1.32px;
  color: var(--navy);
  white-space: nowrap;
  transition: color .25s ease;
}
.page-back:hover, .page-back:focus-visible { color: #0085c2; }

/* ─────────────────────────── Masthead ─────────────────────────── */
.page-head {
  padding-block: clamp(104px, 12vw, 148px) clamp(28px, 3.4vw, 44px);
  background: var(--ice);
}
.page-head__row { display: flex; flex-direction: column; gap: 14px; }
.page-head__eyebrow {
  font: 600 14px/17px var(--font-body);
  letter-spacing: 1.4px;
  color: var(--link);
}
.page-head__heading {
  font: 500 clamp(34px, 5.6vw, 72px)/1.06 var(--font-body);
  letter-spacing: -.5px;
  color: var(--navy-deep);
}
.page-head__sub {
  font: 500 clamp(15px, 1.4vw, 18px)/1.5 var(--font-body);
  color: var(--slate);
}
.page-head__note {
  max-width: 52ch;
  font: 400 14px/1.6 var(--font-body);
  color: rgba(31, 61, 97, .72);
}

/* ─────────────────────────── Days ─────────────────────────── */
.agenda { padding-block: 0 clamp(60px, 7vw, 96px); background: var(--ice); }
.agenda__row { display: flex; flex-direction: column; gap: clamp(40px, 4.6vw, 68px); }

.day { display: flex; flex-direction: column; gap: 18px; }
.day__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(4, 16, 88, .16);
}
.day__index {
  font: 600 12px/1 var(--font-body);
  letter-spacing: 2.6px;
  color: var(--link);
}
.day__date {
  font: 500 clamp(22px, 2.6vw, 32px)/1.15 var(--font-body);
  color: var(--navy-deep);
}
.day__theme {
  margin-left: auto;
  font: 500 13px/1 var(--font-body);
  letter-spacing: .6px;
  color: rgba(31, 61, 97, .68);
}

/* ─────────────────────────── Slots ───────────────────────────
   Three columns: a fixed time gutter, the entry, and a cue track that
   only the expandable rows fill. The track list is a custom property
   because the <summary> of a partner session has to lay out on exactly
   the same grid as a plain row — otherwise the expandable rows sit a
   few pixels off the others and the column reads as broken. */
.sched {
  display: flex;
  flex-direction: column;
  --slot-cols: clamp(130px, 13vw, 168px) 1fr 14px;
  --slot-gap: clamp(14px, 2vw, 30px);
}
.slot {
  display: grid;
  grid-template-columns: var(--slot-cols);
  gap: var(--slot-gap);
  padding-block: 16px;
  border-top: 1px solid rgba(4, 16, 88, .11);
}
.slot:first-child { border-top: 0; }

/* One treatment per element, used by every row without exception — a
   break, a keynote and a partner session are typeset identically and the
   kicker is what tells them apart. Earlier this file muted breaks and
   unannounced entries to a lighter weight, which left the time gutter
   alternating between two weights down the page. */
.slot__time {
  font: 600 14px/1.45 var(--font-body);
  letter-spacing: .2px;
  color: var(--navy-deep);
  font-variant-numeric: tabular-nums;
}
.slot__body { display: flex; flex-direction: column; gap: 4px; }
.slot__kicker {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 1.8px;
  color: var(--link);
}
.slot__title {
  font: 600 clamp(16px, 1.5vw, 19px)/1.3 var(--font-body);
  color: var(--navy-deep);
}
.slot__detail {
  font: 400 14px/1.55 var(--font-body);
  color: rgba(31, 61, 97, .82);
}

/* ─────────────── Partner sessions: expandable profiles ───────────────
   <details> does the work — click, keyboard and find-in-page all come
   free, and the row still reads correctly with JS disabled.
   The row *is* the summary: no card, no border, no inset. It carries the
   same grid as its neighbours and the profile unfolds underneath it, so
   an expandable row is a normal row that happens to open. */
.slot--session { display: block; padding-block: 0; }

.prof__head {
  display: grid;
  grid-template-columns: var(--slot-cols);
  gap: var(--slot-gap);
  align-items: start;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;             /* Firefox marker */
}
.prof__head::-webkit-details-marker { display: none; }   /* Safari marker */
.prof__head:focus-visible { outline: 2px solid #058cc9; outline-offset: -2px; }

/* Hover tint bleeds a little past the text so the whole row reads as the
   hit area, without introducing a card edge. The negative margin and the
   matching padding cancel out, so the tint widens but the grid tracks
   stay on the same verticals as every non-expandable row. */
.prof__head {
  margin-inline: -12px;
  padding-inline: 12px;
  border-radius: 10px;
  background: transparent;
  transition: background .25s ease;
}
.prof__head:hover { background: rgba(255, 255, 255, .72); }
.prof[open] .prof__head { background: rgba(255, 255, 255, .5); }

/* Chevron drawn in CSS rather than shipped as an SVG — it is two lines. */
.prof__cue {
  align-self: center;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(4, 16, 88, .45);
  border-bottom: 2px solid rgba(4, 16, 88, .45);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), border-color .25s ease;
}
.prof__head:hover .prof__cue { border-color: var(--link); }
.prof[open] .prof__cue { transform: translateY(2px) rotate(-135deg); }

/* The body sits on the same grid so the copy starts under the title,
   not under the time gutter. */
.prof__body {
  display: grid;
  grid-template-columns: var(--slot-cols);
  gap: var(--slot-gap);
  padding-bottom: 18px;
}
.prof__about {
  grid-column: 2;
  max-width: 62ch;
  padding-left: 14px;
  border-left: 2px solid rgba(4, 16, 88, .16);
  font: 400 15px/1.65 var(--font-body);
  color: rgba(31, 61, 97, .85);
}
.prof[open] .prof__body { animation: prof-in .32s cubic-bezier(.22, .61, .36, 1); }
@keyframes prof-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────────── Footer ─────────────────────────── */
.page-foot {
  padding-block: 26px 30px;
  background: var(--ice);
  border-top: 1px solid rgba(4, 16, 88, .12);
}
.page-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}
.page-foot__brand { width: 90px; height: auto; opacity: .85; }
.page-foot__legal {
  font: 400 12px/1.5 var(--font-body);
  color: rgba(31, 61, 97, .7);
}
.page-foot__link {
  margin-left: auto;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 1px;
  color: var(--link);
}
.page-foot__link:hover { color: #0085c2; }

/* ─────────────────────────── Legal pages ───────────────────────────
   Terms and anything like it. One measured column, numbered clauses, and
   no collapsing — a delegate has to be able to read, search and print the
   whole thing, and a term hidden behind a <details> is a term they can
   argue they never saw. */
.legal { padding-block: 0 clamp(60px, 7vw, 96px); background: var(--ice); }
.legal__row {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 42px);
  /* ~70 characters: the readable measure for continuous prose. The rest of
     the site runs to the full 1280 column, but that is display copy. */
  max-width: 76ch;
  /* Left edge stays on the shared column, so the clauses line up under the
     masthead heading. The inherited `margin-inline: auto` would centre this
     narrower block and leave the body indented from everything above it. */
  margin-inline: 0;
}

.clause { display: flex; flex-direction: column; gap: 10px; }
.clause__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 600 clamp(17px, 1.7vw, 21px)/1.3 var(--font-body);
  color: var(--navy-deep);
}
.clause__num {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--link);
}
.clause p {
  font: 400 15px/1.7 var(--font-body);
  color: rgba(31, 61, 97, .88);
}
.clause ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 0;
  padding-left: 20px;
  list-style: disc;
}
.clause li {
  font: 400 15px/1.7 var(--font-body);
  color: rgba(31, 61, 97, .88);
}
.clause a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.clause a:hover { color: #0085c2; }

.legal__updated {
  font: 500 13px/1.5 var(--font-body);
  color: rgba(31, 61, 97, .68);
}

/* ─────────────────────────── Responsive ───────────────────────────
   Base is already fluid; these only handle reflow. */
@media (max-width: 640px) {
  /* Time stacks above the entry; the cue keeps the right edge of row 1. */
  .sched { --slot-cols: 1fr auto; --slot-gap: 6px 12px; }
  .slot__time { font-size: 13px; }
  .slot__body, .prof__about { grid-column: 1 / -1; }
  .prof__cue { grid-column: 2; grid-row: 1; align-self: start; margin-top: 4px; }
  .day__theme { margin-left: 0; flex-basis: 100%; }
  .page-foot__link { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .prof__cue, .prof__head::before,
  .prof[open] .prof__body { transition: none; animation: none; }
}