/* ==========================================================================
   USRSE'26 abstract pages
   Styles the markup generated by scripts/build-program.js
   (pages/program/abstracts/*.md).

   The palette mirrors assets/css/program.css so the two program surfaces
   read as one system: the US-RSE brand purple (#741755, --us-rse-main) as
   accent, #4a4a4a body, #363636 titles, #dbdbdb hairlines, and #757575 for
   muted text (the theme's #7a7a7a nudged one step darker — the raw swatch is
   4.3:1 on white, which fails WCAG AA at the 14px sizes used here). The six
   declarations are duplicated rather than shared: program.css scopes its
   tokens to `.program` and loads only on the schedule page.

   The disclosure behavior is the browser's — native <details>/<summary>
   needs no script and no ARIA to toggle, so the page stays usable with
   JavaScript off. assets/js/abstracts.js only adds deep links, expand-all,
   and print.

   These pages render inside the theme's Bulma `.content` wrapper, whose
   typography out-ranks any one-class rule. Unlike program.css, the reset
   here is deliberately NARROW: `.abstract__body` holds real prose and wants
   `.content`'s paragraph and list rhythm, so only the entry heading is
   re-zeroed. CONVENTION, as in program.css: component rules create space
   with padding, which `.content` never sets.
   ========================================================================== */

.abstracts {
  --abstract-accent: var(--us-rse-main);
  --abstract-ink: #4a4a4a;
  --abstract-strong: #363636;
  --abstract-muted: #757575;
  --abstract-hairline: #dbdbdb;
  --abstract-wash: #f4ecf1;

  /* Chevron track. Titles share one left edge whether or not the row has a
     chevron, so a static entry doesn't look outdented next to its
     collapsible neighbors. */
  --chevron-gutter: 1.35rem;
  --chevron-size: 0.45rem;

  /* The chevron is a square rotated 45°, so its corners reach ~0.21× its
     side beyond the layout box. Closed, that overhang is vertical and has
     the summary's padding to live in; open, it turns horizontal, and with
     the box flush against the content column the left arm is clipped. The
     summary reserves this much to its left, and the gap below gives it
     back, so every title keeps the one shared edge. */
  --chevron-overhang: 0.15rem;

  --summary-pad-y: 0.85rem;

  color: var(--abstract-ink);
}

/* --------------------------------------------------------------------------
   Theme neutralization — see the header comment. Three classes clear
   `.content h2:not(:first-child)` (0,2,1); the bare variant covers the
   markup rendering outside a `.content` wrapper.
   -------------------------------------------------------------------------- */

.content .abstracts .abstract__heading,
.abstracts .abstract__heading {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--abstract-strong);
}

/* --------------------------------------------------------------------------
   Toolbar — expand / collapse all. Rendered with `hidden`; abstracts.js
   removes the attribute, so the control only ever appears where the script
   that drives it is running.
   -------------------------------------------------------------------------- */

.abstracts__toolbar {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 0.6rem;
}

/* Same pill shape as the program's day nav (.program-nav__pill), so the two
   program surfaces share one control vocabulary. */
.abstracts__toggle-all {
  padding: 0.3rem 1rem;
  border: 1px solid var(--abstract-hairline);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--abstract-strong);
  cursor: pointer;
}

.abstracts__toggle-all:hover,
.abstracts__toggle-all:focus-visible {
  border-color: var(--abstract-accent);
  color: var(--abstract-accent);
}

/* --------------------------------------------------------------------------
   Entries — one <details> per abstract, one <div class="abstract--static">
   per entry with nothing to reveal. Hairlines between rows mirror
   `.session + .session` on the schedule.
   -------------------------------------------------------------------------- */

.abstract {
  scroll-margin-top: 5rem;   /* deep links clear the fixed navbar */
}

.abstract + .abstract {
  border-top: 1px solid var(--abstract-hairline);
}

.abstract__summary {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--chevron-gutter) - var(--chevron-overhang) - var(--chevron-size));
  padding: var(--summary-pad-y) 0 var(--summary-pad-y) var(--chevron-overhang);
  cursor: pointer;

  /* Suppress the UA disclosure triangle in favor of the chevron below.
     Both forms are needed: `list-style` covers Firefox and current Chrome,
     the pseudo-element covers older WebKit. */
  list-style: none;
}

.abstract__summary::-webkit-details-marker {
  display: none;
}

/* Chevron — two borders of a square, rotated. Points right when closed and
   down when open; the top margin centers it on the title's first line. */
.abstract__summary::before {
  content: "";
  flex: none;
  width: var(--chevron-size);
  height: var(--chevron-size);
  margin-top: 0.35rem;
  border-right: 2px solid var(--abstract-muted);
  border-bottom: 2px solid var(--abstract-muted);
  transform: rotate(-45deg);
}

.abstract[open] > .abstract__summary::before {
  transform: rotate(45deg);
}

/* Accent-on-hover, following `.program-nav__pill`. The wash fills the full
   row so the whole summary reads as one target, which it is. */
.abstract__summary:hover {
  background: var(--abstract-wash);
}

.abstract__summary:hover .abstract__title,
.abstract__summary:hover::before {
  color: var(--abstract-accent);
  border-color: var(--abstract-accent);
}

/* Keyboard users get an explicit ring — the row is the disclosure control
   and must never be focusable without being visibly focused. */
.abstract__summary:focus-visible {
  outline: 2px solid var(--abstract-accent);
  outline-offset: -2px;
}

.abstract__heading {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.abstract__people {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--abstract-muted);
}

/* Indented to the title column so the abstract reads as the heading's
   continuation, not a new block. */
.abstract__body {
  padding: 0 0 1.1rem var(--chevron-gutter);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Static entries — no abstract to open, so no chevron and no pointer. The
   quieter title says "nothing here to expand" without a disabled control.
   -------------------------------------------------------------------------- */

.abstract--static {
  padding: var(--summary-pad-y) 0 var(--summary-pad-y) var(--chevron-gutter);
}

.content .abstracts .abstract--static .abstract__heading,
.abstracts .abstract--static .abstract__heading {
  font-weight: 500;
  color: var(--abstract-ink);
}

/* --------------------------------------------------------------------------
   Mobile — the chevron gutter narrows and the summary tightens; the byline
   already sits on its own line, so it simply wraps.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .abstracts {
    --chevron-gutter: 1.1rem;
    --summary-pad-y: 0.7rem;
  }

  .content .abstracts .abstract__heading,
  .abstracts .abstract__heading {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Print — every abstract belongs in a printed program, so nothing may stay
   collapsed. abstracts.js opens the panels on `beforeprint` (and restores
   them after); the display rule below is the belt-and-braces fallback for a
   print path that never fires those events.
   -------------------------------------------------------------------------- */

@media print {
  .abstracts {
    color: #000;
  }

  .abstracts__toolbar {
    display: none;
  }

  .abstract > .abstract__body {
    display: block;
  }

  .abstract__summary {
    cursor: auto;
  }

  .abstract__summary::before {
    display: none;
  }

  .abstract__summary:hover {
    background: none;
  }
}