/* ============================================================
   eye/accordion — items hung off a wire
   ============================================================

   The page title's connector at the size of a section. The header takes
   the red bullet, in the same column as the page title's; a trunk runs
   down the gutter from it, 21px in, where the title's stub runs; and
   every item branches off the trunk as a rule across the column. The
   rules are the separators, the last one closes the trunk off at the
   foot, so the whole element reads as one line drawn round its items.

   An item's node sits on the trunk beside its title: a ring while it is
   shut, the red of the bullet once it is open.

   Lines in currentColor, so the drawing follows the type.
   ------------------------------------------------------------ */
.acc {
  /* x of the trunk, from the reading column's left edge: the middle of
     .connector__stub, as for the teaser graph. */
  --acc-trunk: -20.5px;
  --acc-node: 9px;
  /* Where the text starts. 0 on desktop: the items sit on the column's own
     edge, in line with the copy, and the drawing stays in the gutter. */
  --acc-indent: 0px;
  --acc-pad: 0.667em;

  position: relative;
  margin: 2.668em 0;
}

/* ---- header and introduction -------------------------------- */
/* The core header, whichever type the editor picks, set exactly as on a core
   element: the heading, subheader and date take the content styles from
   layout.css, nothing is restyled here. Only its size is repeated, as a
   variable on the block, because the bullet and the stub below are drawn
   from the block and have to find the middle of the heading's first line.
   The steps are layout.css's h2–h4 and the browser's h1, h5, h6, which
   layout.css leaves as they are. The default type is h2. */
.acc__head {
  --acc-head-size: calc(var(--body-size) * 1.334);
  --acc-head-line: calc(var(--acc-head-size) * var(--line));

  position: relative;
  padding: 0 0 calc(var(--acc-pad) * 2) var(--acc-indent);
}

.acc__head:has(> header > h1:first-child) { --acc-head-size: calc(var(--body-size) * 2); }
.acc__head:has(> header > h3:first-child) { --acc-head-size: calc(var(--body-size) * 1.167); }
.acc__head:has(> header > h4:first-child) { --acc-head-size: var(--body-size); }
.acc__head:has(> header > h5:first-child) { --acc-head-size: calc(var(--body-size) * 0.83); }
.acc__head:has(> header > h6:first-child) { --acc-head-size: calc(var(--body-size) * 0.67); }

/* No heading, so no bullet and no stub to clear: the introduction keeps the
   column's own edge, in line with the copy above it, on phones too. */
.acc__head:not(:has(> header > :is(h1, h2, h3, h4, h5, h6):first-child)) {
  padding-left: 0;
}

/* Nothing to show: no header, or a hidden one, and no introduction. */
.acc__head:not(:has(> *)) { display: none; }

/* The header's own margins go: the space around it is the block's, and the
   bullet is measured from the top of the heading's line. */
.content .acc__head header > * { margin: 0; }

/* The heading's line-height, pinned to the one the bullet is measured with
   (h1, h5 and h6 would otherwise inherit theirs). */
.content .acc__head header > :is(h1, h2, h3, h4, h5, h6):first-child {
  line-height: var(--line);
}

/* The date: set as .date in layout.css, held close under the title here. */
.content .acc__head header > .date { margin-top: 0.25em; }

.content .acc__text { margin-top: calc(var(--acc-pad) * 1.5); }
.content .acc__head > :first-child { margin-top: 0; }
.content .acc__text > :last-child { margin-bottom: 0; }

/* Bullet and stub, when there is a heading to hang them off: the bullet on
   the middle of its first line, the stub from there down past the
   introduction to the first rule, where the items' trunk takes over. */
.acc__head:has(> header > :is(h1, h2, h3, h4, h5, h6):first-child)::before,
.acc__head:has(> header > :is(h1, h2, h3, h4, h5, h6):first-child)::after {
  content: "";
  position: absolute;
}

.acc__head::before {
  top: calc(var(--acc-head-line) / 2);
  bottom: 0;
  left: calc(var(--acc-trunk) - 0.5px);
  width: 1px;
  background: currentColor;
}

.acc__head::after {
  top: calc(var(--acc-head-line) / 2 - var(--bullet) / 2);
  left: calc(var(--acc-trunk) - var(--bullet) / 2);
  width: var(--bullet);
  height: var(--bullet);
  border-radius: 50%;
  background: var(--eye-red);
}

/* ---- the trunk and the rules -------------------------------- */
.acc__items { position: relative; }

/* From the first rule down to the closing one. Without a heading above, this
   is where the drawing starts. */
.acc__items::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--acc-trunk) - 0.5px);
  width: 1px;
  background: currentColor;
}

.acc__item { position: relative; }

.acc__item::before,
.acc__items::after {
  content: "";
  position: absolute;
  left: calc(var(--acc-trunk) - 0.5px);
  right: 0;
  height: 1px;
  background: currentColor;
}

.acc__item::before { top: 0; }
.acc__items::after { bottom: 0; }

/* ---- the row ------------------------------------------------ */
.acc__summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1em;
  padding: var(--acc-pad) 0 var(--acc-pad) var(--acc-indent);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.acc__summary:focus { outline: none; }

.acc__summary:focus-visible .acc__title {
  outline: 1px solid var(--eye-red);
  outline-offset: 3px;
}

.acc__title { transition: color 0.2s ease; }

/* On the trunk, centred on the title's first line. The paper fill is what
   breaks the trunk behind it, so a shut node reads as a ring on the line
   rather than a line through a ring. */
.acc__node {
  position: absolute;
  top: calc(var(--acc-pad) + var(--body-size) * var(--line) / 2 - var(--acc-node) / 2);
  left: calc(var(--acc-trunk) - var(--acc-node) / 2);
  width: var(--acc-node);
  height: var(--acc-node);
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--paper);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* A plus drawn in the rules' own hairline. Open, its upright lies down and
   leaves the minus. */
.acc__toggle {
  position: relative;
  width: 15px;
  height: calc(var(--body-size) * var(--line));
  transition: color 0.2s ease;
}

.acc__toggle::before,
.acc__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc__toggle::after { transform: rotate(90deg); }

/* ---- hover and open ----------------------------------------- */
.acc__summary:hover .acc__node,
.acc__summary:focus-visible .acc__node { border-color: var(--eye-red); }

.acc__summary:hover .acc__toggle,
.acc__summary:focus-visible .acc__toggle { color: var(--eye-red); }

.acc__item[open] .acc__node {
  border-color: var(--eye-red);
  background: var(--eye-red);
}

.acc__item[open] .acc__title,
.acc__item[open] .acc__toggle { color: var(--eye-red); }

.acc__item[open] .acc__toggle::after { transform: rotate(0deg); }

/* ---- the body ----------------------------------------------- */
.acc__body {
  padding: 0 calc(15px + 1em) calc(var(--acc-pad) * 2) var(--acc-indent);
}

/* The padding is the space before the next rule; a list's own margin would
   double it. */
.content .acc__body > :last-child { margin-bottom: 0; }

/* Short facts, mostly one line each: a third of a line between them is
   enough, where the copy's longer items take half a paragraph. */
.content .acc__body :is(ul, ol):not([class]) > li + li { margin-top: 0.334em; }

/* What an item holds is usually a list of short facts, and one long column of
   them makes an open item taller than the screen. Two, where there is room —
   unless the editor has set the element to one column, for lists whose items
   read in sequence or run over several lines. */
@media (min-width: 1024px) {
  .acc:not(.acc--one-column) .acc__body ul,
  .acc:not(.acc--one-column) .acc__body ol {
    columns: 2;
    column-gap: 2em;
  }

  .acc:not(.acc--one-column) .acc__body li { break-inside: avoid; }
}

/* Unfolds rather than appears, where the browser can animate to auto
   height. Elsewhere it simply opens. */
@supports (interpolate-size: allow-keywords) {
  .acc { interpolate-size: allow-keywords; }

  .acc__item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      content-visibility 0.3s allow-discrete;
  }

  .acc__item[open]::details-content { block-size: auto; }
}

/* frontend.js, for the moment it opens an item a link points at: the scroll
   has to measure the page as it will stand, not halfway through a fold. */
.acc.is-jumping .acc__item::details-content { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .acc__item::details-content,
  .acc__node,
  .acc__title,
  .acc__toggle,
  .acc__toggle::before,
  .acc__toggle::after { transition: none; }
}

/* ---- compact ------------------------------------------------ */
/* No gutter to hang the drawing in: the trunk takes the bullet's centre at
   the column's left edge, as the title's own connector does down here, and
   the text moves in to clear it. */
@media (max-width: 1023px) {
  .acc {
    --acc-trunk: calc(var(--bullet) / 2);
    --acc-indent: calc(var(--bullet) + 14px);
  }
}