/* ============================================================
   Resources — shared styles for the four Resources pages:

     reference-hub.html    the unified search over all three collections
     hot-links.html        the public link library ("Official sources")
     answer-database.html  members-only gate + the real topic taxonomy
     presentations.html    members-only gate + the two library entry points

   One file rather than four because the four pages are one system: the
   same three source colors, the same result row, the same members-only
   gate panel. A change to the gate has to land on every page that shows
   one, and it does not if the gate is defined three times.

   Loads after interior.css, so anything here can override the shell.
   Names are prefixed (rsearch/rrow/gate/hlink/tax) because site.css
   already owns the short generic ones: .card, .chip, .panel, .brief,
   .focus, .stat and .ledger are all taken.
   ============================================================ */

/* ---------- the three collections, as color ----------
   The dot is the only thing carrying "where this came from" at a glance,
   so it is defined once and every page reads it from here. Colour is
   never the sole signal: every dot is followed by the source spelled out
   in words, and the members-only rows also carry a badge. */
:root{
  --src-answers:var(--icpa-navy);
  --src-library:var(--icpa-medium-blue);
  --src-external:var(--icpa-accent);
  --src-insights:var(--icpa-dark-navy);
}

/* Everything the script hides with the hidden attribute, in one place.
   A class that sets `display` outranks the browser's own [hidden] rule,
   so a grid or flex element with hidden="" stays on screen: the search
   field's clear button showed with an empty field, and filtered-out
   result rows never went away. Any new component here that both sets
   display and gets hidden by script has to be added to this list. */
.rsearch__clear[hidden],
.gate[hidden],
.gate--strip[hidden],
.rrow[hidden],
.rempty[hidden],
.hub__more[hidden],
.hlink__group[hidden],
.hlink__item[hidden],
#hubResults[hidden]{display:none}

/* ---------- hero variant ----------
   The shell caps h1 at 16ch, which is right for a two-word emphasis but
   breaks "look it up." across two lines here and strands "it up." on
   its own. Widened only enough to hold this headline on one line. */
.phero--res h1{max-width:24ch}

/* ============================================================
   HERO SEARCH SHELL
   Sits inside .phero, on the ink ground. Used by the hub and by
   Hot Links; the two gate pages have nothing to search, so they
   do not carry one.
   ============================================================ */
.rsearch{
  margin-top:34px;max-width:1000px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--icpa-ink-hairline);
  border-radius:var(--radius-lg);
  padding:22px 24px;
}
.rsearch__row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.rsearch__field{position:relative;flex:1 1 380px;display:flex;align-items:center}
/* Sized here rather than with an .icon--18 utility: site.css ships 14, 15,
   22 and 24, and this is the only place on the site that wants 18. */
.rsearch__icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#8FA3BC;pointer-events:none;
}
.rsearch__input{
  width:100%;min-height:48px;padding:12px 44px;
  font-family:var(--font-sans);font-size:1rem;line-height:1.5;
  color:var(--off-white);
  background:rgba(255,255,255,.04);
  border:1px solid var(--icpa-ink-hairline);
  border-radius:var(--radius-md);
  transition:border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
  -webkit-appearance:none;appearance:none;
}
.rsearch__input::placeholder{color:#7C8EA8;opacity:1}
/* Disabled while a members-only scope is selected. Dimmed rather than
   removed, so the control does not vanish and reappear as the reader
   moves between tabs. */
.rsearch__input:disabled{opacity:.55;cursor:not-allowed}
.rsearch__input:focus{
  border-color:var(--icpa-accent);
  box-shadow:0 0 0 3px rgba(201,162,39,.22);
}
.rsearch__input:focus:not(:focus-visible){outline:none}
/* Native search decorations are drawn in the browser's own colors and
   read as a smudge on the ink ground; the page provides its own clear. */
.rsearch__input::-webkit-search-decoration,
.rsearch__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.rsearch__clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;
  background:none;border:0;border-radius:var(--radius-sm);
  color:#8FA3BC;cursor:pointer;
  transition:var(--transition-control);
}
.rsearch__clear:hover{color:var(--off-white);background:rgba(255,255,255,.06)}

/* ---------- scope tabs ----------
   A radiogroup, not links: switching scope filters the page in place and
   does not navigate, so the control has to say so to a screen reader.
   The input itself is hidden and the label is the target. */
.rsearch__tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;
}
.rsearch__tab{position:relative}
.rsearch__tab input{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}
.rsearch__tab span{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;min-height:36px;
  border-radius:var(--radius-pill);
  border:1px solid var(--icpa-ink-hairline);
  background:rgba(255,255,255,.03);
  font-size:.9375rem;font-weight:var(--weight-semibold);color:#C4D0DF;
  cursor:pointer;white-space:nowrap;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease-standard);
}
.rsearch__tab span:hover{color:var(--off-white);border-color:#3B4B68}
.rsearch__tab span:active{transform:scale(.97)}
.rsearch__tab input:checked+span{
  background:var(--off-white);border-color:var(--off-white);color:var(--icpa-ink);
}
.rsearch__tab input:focus-visible+span{
  outline:2px solid var(--icpa-accent-bright);outline-offset:2px;
}
/* The dot repeats the collection color on the tab, so the tab and the
   rows it filters to are visibly the same thing. */
.rsearch__tab i{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:currentColor;
}
.rsearch__tab--answers i{color:var(--icpa-pastel-grey-blue)}
.rsearch__tab--library i{color:var(--icpa-medium-blue)}
.rsearch__tab--external i{color:var(--icpa-accent)}
.rsearch__tab input:checked+span i{color:inherit}
.rsearch__tab--answers input:checked+span i{color:var(--src-answers)}
.rsearch__tab--library input:checked+span i{color:var(--src-library)}
.rsearch__tab--external input:checked+span i{color:var(--icpa-accent-on-light)}
.rsearch__tab--all i{display:none}

@media (prefers-reduced-motion:reduce){
  .rsearch__input,.rsearch__tab span{transition:none}
  .rsearch__tab span:active{transform:none}
}

/* ============================================================
   HUB LAYOUT — results column + refine rail
   ============================================================ */
.hub{background:var(--white);padding:56px var(--frame) 64px}
.hub__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;
}
.hub__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--border-rule);padding-bottom:14px;
}
.hub__count{margin:0;font:var(--type-h3);color:var(--text-subhead)}
.hub__sorted{font:var(--type-caption);color:var(--text-meta)}
.hub__more{margin-top:26px}

/* ---------- result row ---------- */
.rrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--border-rule);
}
.rrow__kick{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.rrow__dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--src-external)}
.rrow--answers .rrow__dot{background:var(--src-answers)}
.rrow--library .rrow__dot{background:var(--src-library)}
.rrow__src{
  font:var(--type-caption);font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--icpa-blue-on-light);
}
.rrow__meta{font:var(--type-caption);color:var(--text-meta)}
.rrow__title{margin:0 0 8px;font-size:1.125rem;font-weight:var(--weight-bold);line-height:1.35}
.rrow__title a{color:var(--text-heading);text-decoration:none}
.rrow__title a:hover{color:var(--icpa-navy);text-decoration:underline}
.rrow__body{
  margin:0;font-size:1rem;line-height:1.55;color:var(--text-body);
  max-width:68ch;text-wrap:pretty;
}
.rrow__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.rrow__tag{
  font:var(--type-caption);padding:3px 9px;border-radius:var(--radius-sm);
  background:var(--surface-tint);color:var(--icpa-dark-navy);
  border:1px solid var(--border-rule);
}
.rrow__side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.rrow__badge{
  display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;
  border-radius:var(--radius-pill);font:var(--type-caption);
  font-weight:var(--weight-semibold);white-space:nowrap;
}
.rrow__badge--member{background:var(--icpa-navy);color:var(--white);border:1px solid var(--icpa-navy)}
.rrow__badge--public{background:transparent;color:var(--icpa-blue-on-light);border:1px solid var(--icpa-medium-blue)}
.rrow__action{font:var(--type-caption);color:var(--text-meta);white-space:nowrap}

/* ---------- empty state ---------- */
.rempty{padding:34px 0 8px;border-bottom:1px solid var(--border-rule)}
.rempty__h{margin:0 0 8px;font:var(--type-h3);color:var(--text-heading)}
.rempty__body{margin:0 0 16px;max-width:56ch;font-size:1rem;line-height:1.6;color:var(--text-body)}

/* ============================================================
   MEMBERS-ONLY GATE
   Two shapes off one set of rules: a full panel (the two gate pages,
   and the hub when a member scope is selected) and a compact strip
   (the hub's "all sources" view, above the public results).
   ============================================================ */
.gate{
  padding:26px 28px;border-radius:var(--radius-lg);
  background:var(--zone-light);border:1px solid var(--border-rule);
}
.gate__eyebrow{
  font-size:var(--size-eyebrow);font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--icpa-accent-on-light);margin-bottom:10px;
}
.gate__h{margin:0 0 10px;font-size:1.25rem;font-weight:var(--weight-bold);color:var(--icpa-dark-navy)}
.gate__body{margin:0;max-width:64ch;font-size:1rem;line-height:1.6;color:var(--text-body)}
.gate__body+.gate__body{margin-top:10px}
.gate__ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* Locked / open pair. Both states are in the markup and CSS picks one,
   so the page is correct and closed with JS off. `is-member` is set by
   the WordPress block when the theme reports a signed-in session; on the
   static comp nothing sets it, so the locked state is what shows. */
.gate--open{display:none}
.is-member .gate--locked{display:none}
.is-member .gate--open{display:block}

/* The strip carries the same message at the top of a list of public
   results: two collections are not being searched, and why. */
.gate--strip{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:18px 22px;margin:22px 0 4px;
}
.gate--strip .gate__h{font-size:1.0625rem;margin-bottom:6px}
.gate--strip .gate__body{font-size:.9375rem}
.gate--strip .gate__ctas{margin-top:0}
.gate__sources{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px}
.gate__source{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--text-body)}
.gate__source i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.gate__source--answers i{background:var(--src-answers)}
.gate__source--library i{background:var(--src-library)}

/* ============================================================
   REFINE RAIL — the aside cards
   ============================================================ */
.hub__aside{display:flex;flex-direction:column;gap:20px}
.acard{
  padding:22px 24px;border-radius:var(--radius-lg);
  background:var(--white);border:1px solid var(--border-rule);
}
.acard--tint{background:var(--surface-tint);border-color:var(--icpa-pastel-grey-blue)}
.acard__eyebrow{
  font-size:var(--size-eyebrow);font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--icpa-blue-on-light);margin-bottom:8px;
}
.acard__title{margin:0 0 14px;font-size:1.125rem;font-weight:var(--weight-bold);color:var(--icpa-dark-navy)}
.acard__body{margin:0 0 16px;font-size:1rem;line-height:1.55;color:var(--text-body)}
.acard__list{display:flex;flex-direction:column;gap:14px}
.acard__item{display:flex;align-items:flex-start;gap:10px;font-size:1rem}
.acard__item i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:6px}
.acard__item--answers i{background:var(--src-answers)}
.acard__item--library i{background:var(--src-library)}
.acard__item--external i{background:var(--src-external)}
/* The policy trackers are a fourth kind of thing in this hub: ICPA's own
   standing watch on an open trade action, rather than an answer, a deck or
   somebody else's document. Gold rather than a fourth blue, so the rail
   reads as three collections plus the trackers. */
.acard__item--tracker i{background:var(--icpa-accent)}
.acard__label{display:block;color:var(--text-heading);font-weight:var(--weight-semibold)}
.acard__label a{color:inherit;text-decoration:none}
.acard__label a:hover{text-decoration:underline}
.acard__note{display:block;font:var(--type-caption);color:var(--text-meta);margin-top:2px}

/* ============================================================
   COLLECTION CARDS — "three collections, one search"
   ============================================================ */
.colls{background:var(--white);border-top:1px solid var(--border-rule);padding:64px var(--frame) 72px}
.colls__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px;
}
.coll{
  display:flex;flex-direction:column;
  padding:24px 26px;border-radius:var(--radius-lg);
  background:var(--white);border:1px solid var(--border-rule);
  text-decoration:none;color:inherit;
  transition:border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.coll:hover,.coll:focus-visible{
  border-color:var(--border-hairline);box-shadow:var(--shadow-card);transform:translateY(-1px);
}
.coll__kick{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.coll__dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.coll--answers .coll__dot{background:var(--src-answers)}
.coll--library .coll__dot{background:var(--src-library)}
.coll--external .coll__dot{background:var(--src-external)}
.coll--insights .coll__dot{background:var(--src-insights)}
.coll__kicker{
  font:var(--type-caption);font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--icpa-blue-on-light);
}
.coll__name{margin:0 0 10px;font-size:1.25rem;font-weight:var(--weight-bold);color:var(--text-heading)}
.coll__body{margin:0 0 16px;font-size:1rem;line-height:1.6;color:var(--text-body);text-wrap:pretty}
.coll__foot{
  display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--border-rule);font:var(--type-caption);color:var(--text-meta);
}
.coll__go{
  margin-top:14px;display:inline-flex;align-items:center;min-height:24px;
  font-size:.9375rem;font-weight:var(--weight-semibold);color:var(--icpa-navy);
}
@media (prefers-reduced-motion:reduce){
  .coll{transition:none}
  .coll:hover,.coll:focus-visible{transform:none}
}

/* ============================================================
   HOT LINKS — the public link library
   ============================================================ */
.hlink{background:var(--white);padding:52px var(--frame) 64px}
.hlink__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--border-rule);
}
.hlink__count{margin:10px 0 0;font-size:1rem;color:var(--text-meta)}

/* Region filter. A radiogroup: one region at a time, and "All regions"
   is the reset rather than a separate button. */
.hlink__filters{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 8px}
.hlink__chip{position:relative}
.hlink__chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hlink__chip span{
  display:inline-flex;align-items:center;min-height:36px;padding:8px 14px;
  border-radius:var(--radius-pill);border:1px solid var(--border-rule);
  background:var(--white);font-size:.9375rem;font-weight:var(--weight-semibold);
  color:var(--icpa-navy);cursor:pointer;white-space:nowrap;
  transition:var(--transition-control),transform var(--duration-fast) var(--ease-standard);
}
.hlink__chip span:hover{background:var(--surface-tint);border-color:var(--icpa-navy)}
.hlink__chip span:active{transform:scale(.97)}
.hlink__chip input:checked+span{
  background:var(--icpa-navy);border-color:var(--icpa-navy);color:var(--white);
}
.hlink__chip input:focus-visible+span{outline:2px solid var(--icpa-navy);outline-offset:2px}

.hlink__group{margin-top:44px}
.hlink__group-h{
  margin:0 0 4px;font-size:1.1875rem;font-weight:var(--weight-bold);color:var(--icpa-dark-navy);
}
.hlink__group-note{margin:0 0 18px;font:var(--type-caption);color:var(--text-meta)}
.hlink__list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2px;
  border-top:1px solid var(--border-rule);
}
/* A link library is a list of destinations, so each row is the whole
   target: name, what it is, and the host it actually goes to. The host
   is shown because half of these leave icpainc.org, and the reader is
   entitled to know that before clicking. */
.hlink__item{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;min-height:44px;
  border-bottom:1px solid var(--border-rule);
  text-decoration:none;color:inherit;
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.hlink__item:hover{background:var(--zone-light)}
.hlink__name{font-size:1rem;font-weight:var(--weight-semibold);color:var(--icpa-navy)}
/* Subject and publisher on one line: on a link library the question is
   almost always "which of these is the authority", and the agency name
   answers it faster than the link text does. */
.hlink__note{font-size:.875rem;line-height:1.45;color:var(--text-body)}
.hlink__item:hover .hlink__name{color:var(--icpa-dark-navy)}
.hlink__host{
  display:inline-flex;align-items:center;gap:6px;
  font:var(--type-caption);color:var(--text-meta);word-break:break-word;
}
.hlink__chev{color:var(--icpa-medium-blue);font-weight:var(--weight-bold)}
@media (prefers-reduced-motion:reduce){
  .hlink__chip span{transition:none}
  .hlink__chip span:active{transform:none}
  .hlink__item{transition:none}
}

/* ============================================================
   TAXONOMY — the answer database topic list
   Not links: ICPA publishes the parent category only, so a per-topic
   URL would be one we invented. They are labels until the client
   supplies the real slugs.
   ============================================================ */
.tax{background:var(--white);padding:56px var(--frame) 64px}
/* Three columns rather than auto-fit: there are exactly six groups, and
   auto-fit gave five across with "Industry specific" stranded alone on a
   second row. Three makes two even rows and holds the longest topic name
   on one line. */
.tax__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;margin-top:32px;
}
@media (max-width:1000px){.tax__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tax__grid{grid-template-columns:1fr}}
.tax__h{
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border-rule);
  font-size:.9375rem;font-weight:var(--weight-bold);text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--icpa-blue-on-light);
}
.tax__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.tax__list li{font-size:1rem;line-height:1.45;color:var(--text-body)}

/* ============================================================
   STEPS — "how it works" on the two gate pages
   ============================================================ */
.rsteps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:32px;
}
.rstep{padding-top:18px;border-top:var(--keyline) solid var(--icpa-navy)}
.rstep__n{
  font:var(--type-caption);font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--icpa-blue-on-light);
}
.rstep__h{margin:8px 0 8px;font-size:1.125rem;font-weight:var(--weight-bold);color:var(--icpa-dark-navy)}
.rstep__body{margin:0;font-size:1rem;line-height:1.6;color:var(--text-body)}

/* ============================================================
   ENTRY POINTS — the two presentation-library doors
   ============================================================ */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px}
.door{
  display:flex;flex-direction:column;padding:24px 26px;
  border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--border-rule);
  text-decoration:none;color:inherit;
  transition:border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.door:hover,.door:focus-visible{
  border-color:var(--border-hairline);box-shadow:var(--shadow-card);transform:translateY(-1px);
}
.door__lock{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  font:var(--type-caption);font-weight:var(--weight-semibold);color:var(--icpa-accent-on-light);
}
.door__h{margin:0 0 10px;font-size:1.25rem;font-weight:var(--weight-bold);color:var(--text-heading)}
.door__body{margin:0 0 16px;font-size:1rem;line-height:1.6;color:var(--text-body)}
.door__go{
  margin-top:auto;display:inline-flex;align-items:center;min-height:24px;
  font-size:.9375rem;font-weight:var(--weight-semibold);color:var(--icpa-navy);
}
@media (prefers-reduced-motion:reduce){
  .door{transition:none}
  .door:hover,.door:focus-visible{transform:none}
}

/* ============================================================
   A standing note, set quietly rather than as an alert box.
   Used for the "this is not legal advice" line the answer database
   has to carry, and for the quarterly link check on Hot Links.
   ============================================================ */
.rnote{
  margin-top:32px;padding:18px 22px;
  border:1px solid var(--border-rule);border-radius:var(--radius-md);
  background:var(--icpa-zone-warm);
  font-size:.9375rem;line-height:1.65;color:var(--ink-body);max-width:76ch;
}
.rnote b{color:var(--icpa-dark-navy)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hub__grid{grid-template-columns:1fr;gap:36px}
  /* The rail becomes two cards side by side before it stacks: full-width
     it is a lot of empty card for very little content. */
  .hub__aside{flex-direction:row;flex-wrap:wrap}
  .hub__aside>*{flex:1 1 300px}
}
@media (max-width:720px){
  .rrow{grid-template-columns:1fr;gap:14px}
  .rrow__side{flex-direction:row;align-items:center;gap:14px}
  .gate--strip{grid-template-columns:1fr}
  .hub__head{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:640px){
  .hub,.colls,.hlink,.tax{padding-left:20px;padding-right:20px}
  .rsearch{padding:18px 18px 20px}
  .hub__aside{flex-direction:column}
}

/* ============================================================
   BROWSE BY EVENT
   presentations.html -- the event-by-event half of the deck library.

   The five Resources pages above all fit in one screen of markup. This
   one stands in front of 2,143 files across 73 events, so it is the only
   page here whose rows are built by script rather than written out. What
   IS written out is the event index: every event, every count, grouped
   by year, complete with JavaScript off. The script fills an event in
   when you open it, and nothing about the spine of the page depends on
   it.

   Nothing here gates. Until August 21 2026 this block hid the deck rows
   from non-members (.is-member .pres-list), which made a deck title
   public in the search results above and private in the event list a
   screen below -- the same title, two answers. The catalogue is public
   and the login is asked for at the file, which is the only thing that
   was ever restricted, so the rows show. The search half of the page is
   styled in compliance-library.css.

   Prefixed pres- throughout. site.css already owns .list, .row, .filter
   and .year.
   ============================================================ */
.pres-ev[hidden],
.pres-yr[hidden],
.pres-note[hidden]{display:none}

.pres{background:var(--white);padding:52px var(--frame) 64px}
.pres__head{max-width:60ch}
.pres__count{margin:10px 0 0;font-size:1rem;color:var(--text-meta)}

/* ---------- jump to a year ----------
   A jump, not a filter. The search above already has an event picker, and
   two year controls that can disagree with each other is exactly the
   confusion that folding three pages into one was meant to end. */
.pres-jump{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  margin:26px 0 6px;padding-bottom:20px;
  border-bottom:1px solid var(--border-rule);
}
.pres-jump__h{
  margin-right:4px;font:var(--type-caption);font-weight:var(--weight-semibold);
  color:var(--text-meta);text-transform:uppercase;letter-spacing:.06em;
}
.pres-jump__y{
  display:inline-block;padding:5px 11px;border-radius:2px;
  font-size:.9375rem;font-weight:var(--weight-semibold);
  color:var(--icpa-navy);text-decoration:none;
  border:1px solid var(--icpa-pastel-grey-blue);background:var(--white);
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.pres-jump__y:hover{background:var(--surface-tint);border-color:var(--icpa-navy)}
.pres-jump__y:active{transform:scale(.97)}
.pres-jump__y:focus-visible{outline:2px solid var(--icpa-navy);outline-offset:2px}

/* ---------- the year / event index ---------- */
.pres-yr{margin-top:40px;scroll-margin-top:96px}
.pres-yr__h{
  margin:0 0 4px;padding-bottom:10px;
  font-size:1.5rem;font-weight:var(--weight-bold);color:var(--icpa-dark-navy);
  border-bottom:var(--keyline) solid var(--icpa-navy);
}
.pres-yr__note{margin:0 0 14px;font:var(--type-caption);color:var(--text-meta)}
.pres-yr__list{display:flex;flex-direction:column}

.pres-ev{border-bottom:1px solid var(--border-rule);scroll-margin-top:96px}
.pres-ev>summary{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:16px 4px;cursor:pointer;list-style:none;
  transition:background var(--dur-fast) var(--ease);
}
.pres-ev>summary::-webkit-details-marker{display:none}
.pres-ev>summary:hover{background:var(--zone-light)}
.pres-ev>summary:focus-visible{outline:2px solid var(--icpa-navy);outline-offset:-2px}
.pres-ev__name{font-size:1.0625rem;font-weight:var(--weight-semibold);color:var(--icpa-navy)}
.pres-ev[open]>summary .pres-ev__name{color:var(--icpa-dark-navy)}
.pres-ev__n{font:var(--type-caption);color:var(--text-meta);white-space:nowrap}
.pres-ev__go{
  margin-left:auto;font:var(--type-caption);font-weight:var(--weight-semibold);
  color:var(--icpa-medium-blue);white-space:nowrap;
}
.pres-ev[open]>summary .pres-ev__go{color:var(--icpa-navy)}
.pres-ev__body{padding:4px 4px 22px}

/* ---------- a deck inside an event ----------
   Plainer than the search row in compliance-library.css on purpose: inside
   an event, the event name on every line is noise and there is no query to
   mark. Track and format stay, because they are how a reader picks the
   ITAR session out of a conference they half remember. */
.pres-list__ol{margin:0;padding:0;list-style:none}
.pres-item{
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  padding:11px 12px 11px 14px;border-left:2px solid var(--border-rule);
  transition:border-color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.pres-item:hover{border-left-color:var(--icpa-accent);background:var(--zone-light)}
.pres-item__link{
  flex:1 1 420px;min-width:0;
  font-size:1rem;line-height:1.45;font-weight:var(--weight-semibold);
  color:var(--text-heading);text-decoration:none;
}
.pres-item__link:hover{color:var(--icpa-navy);text-decoration:underline}
.pres-item__link:focus-visible{outline:2px solid var(--icpa-navy);outline-offset:2px}
.pres-item__meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pres-item__track,
.pres-item__fmt{
  display:inline-block;padding:3px 9px;border-radius:2px;white-space:nowrap;
  font:var(--type-caption);font-weight:var(--weight-semibold);
}
.pres-item__track{
  color:var(--icpa-blue-on-light);background:var(--surface-tint);
  border:1px solid var(--icpa-pastel-grey-blue);
}
.pres-item__fmt{color:var(--text-meta);border:1px solid transparent}

.pres-note{margin:0;padding:14px 4px 4px;font-size:.9375rem;color:var(--text-meta)}

@media (max-width:720px){
  .pres-ev__go{margin-left:0;flex-basis:100%}
}

/* This page's headline is a full clause, not the two-word emphasis the
   24ch cap above was cut for, and it stacked the emphasis onto its own
   line. Widened only for this page. */
.page-presentations .phero--res h1{max-width:32ch}