/* CRAIC Papers 1.0.0 — the solutions paper library.
   Tokens come from the theme (--red, --ink, --ink-dim, --stage, --paper, --font-mono, --measure);
   every one carries a fallback, so the library still reads correctly if the plugin is ever
   active under a different theme. */

.craic-papers { margin-block-start: var(--gap-head, 2rem); }

.craic-papers__lead {
  max-inline-size: var(--measure, 68ch);
  margin-block-end: var(--gap-head, 2rem);
}

/* ---- the controls -----------------------------------------------------------------------
   THE CHIPS LOOKED LIKE FILTERS AND ONLY JUMPED. Measured on the deployed page: 164 titles,
   all of them on screen, 7,710px on a desktop and 15,876px on a phone — forty screens of
   scrolling — with a row of eight counted chips above them that a reader would reasonably
   press expecting the list to get shorter. It did not; it scrolled. The chips filter now, a
   search box joins them, and the count says what is showing, so the row does what it looks
   like it does and the page is as long as the reader's question.

   One block, on the page ground, set off by a rule top and bottom rather than a filled panel:
   this sits between the client's own sentence and their material, and a grey box here would
   read as a third thing competing with both. */
.craic-papers__controls {
  display: grid;
  gap: 1.25rem;
  margin-block-end: calc(var(--gap-section, 4.5rem) * 0.55);
  padding-block: 1.5rem;
  border-block: 1px solid rgba(20, 22, 27, 0.14);
}
@media (min-width: 900px) {
  .craic-papers__controls {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    column-gap: var(--gap-head, 3.25rem);
    align-items: start;
  }
  .craic-papers__search { grid-column: 1; grid-row: 1; }
  .craic-papers__all    { grid-column: 1; grid-row: 2; }
  .craic-papers__index  { grid-column: 2; grid-row: 1 / span 2; }
  .craic-papers__status { grid-column: 1 / -1; }
}

.craic-papers__search { display: grid; gap: 0.5rem; }
.craic-papers__search label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim, #585B63);
}
.craic-papers__q {
  inline-size: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(20, 22, 27, 0.28);
  background: #fff;
  font: inherit;
  font-size: 1rem;              /* 16px: anything smaller makes iOS zoom the page on focus */
  color: var(--stage, #0D0E10);
}
.craic-papers__q:focus-visible {
  outline: 3px solid var(--stage, #0D0E10);
  outline-offset: 2px;
  border-color: var(--stage, #0D0E10);
}
.craic-papers__all {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-dim, #585B63);
}
.craic-papers__all strong { color: var(--stage, #0D0E10); }
.craic-papers__status {
  margin: 0;
  min-block-size: 1.4em;        /* reserved, so a count appearing cannot shift the list */
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  color: var(--ink-dim, #585B63);
}
.craic-papers__empty {
  max-inline-size: var(--measure, 68ch);
  margin-block: var(--gap-head, 2rem) 0;
}

/* ---- the index -------------------------------------------------------------------------
   164 titles is a long scroll and somebody who works in one field should not have to read the
   other seven to find out whether theirs is covered — the same reason, and the same device, as
   the field index on /solutions/applications/. The COUNT is on each entry because "how much is
   there on my subject" is the question this index is actually answering. */
.craic-papers__index { margin: 0; }
.craic-papers__index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-inline-size: none;
}
.craic-papers__index li { margin: 0; }
.craic-papers__chipname { white-space: nowrap; }
.craic-papers__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.55rem 0.5rem 0.9rem;
  border: 1px solid rgba(20, 22, 27, 0.18);
  background: #fff;
  color: var(--stage, #0D0E10);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 140ms ease;
}
.craic-papers__chip:hover { border-color: var(--stage, #0D0E10); }
.craic-papers__chip:focus-visible { outline: 3px solid var(--stage, #0D0E10); outline-offset: 2px; }
/* THE PRESSED STATE IS THE WHOLE POINT of turning these into filters: a reader must be able to
   see which one is on without pressing another to find out. Inverted rather than tinted —
   a tint at this size reads as a hover that got stuck. */
.craic-papers__chip[aria-current] {
  background: var(--stage, #0d0e10);
  border-color: var(--stage, #0d0e10);
  color: var(--white, #fff);
}
.craic-papers__chip[aria-current] .craic-papers__chipn {
  /* OPAQUE, so the contrast is knowable. A translucent layer means no checker — and no
     person reading computed style — can say what is actually behind the text: S-CONTRAST-59
     reported this as its one AMBIGUOUS shape on the site, three runs it could not measure
     rather than a violation it found. #343536 is exactly what rgba(255,255,255,.16) resolves
     to over --stage, so nothing looks different and the value can now be checked. */
  background: #343536;
  color: var(--white, #fff);
}
button.craic-papers__chip { font-family: inherit; cursor: pointer; }
/* The count is data, so it is set in the face this site uses for data. */
.craic-papers__chipn {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  background: var(--paper, #f4f4f5);
  color: var(--ink-dim, #585B63);
}

/* ---- one field -------------------------------------------------------------------------
   Picture on the trailing side, titles at the reading measure beside it — the same
   copy-then-picture arrangement the tab panels use, so the library does not introduce a
   second way of pairing a picture with a list on a site that already has one. */
.craic-papers__field {
  margin-block-end: var(--gap-section, 4.5rem);
  scroll-margin-block-start: 6.5rem;   /* the jump lands below the sticky masthead */
}
.craic-papers__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-block-end: 1.5rem;
  padding-block-end: 0.75rem;
  border-block-end: 2px solid var(--red, #ee2e24);
}
.craic-papers__name {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
.craic-papers__count {
  margin: 0;
  margin-inline-start: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim, #585B63);
  white-space: nowrap;
}

/* `display` BEATS THE hidden ATTRIBUTE, which is how a filtered-out section stayed on screen.
   The attribute's effect is a UA rule of `display:none`, and any author `display` out-ranks it —
   so with Forensics selected, Geology went on rendering its heading, its rule and its
   photomicrograph above the words "0 papers". Every element this script hides needs to say so
   in CSS as well, and it is stated once here rather than per rule. */
.craic-papers [hidden] { display: none !important; }

@media (min-width: 900px) {
  .craic-papers__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    column-gap: var(--gap-head, 3.25rem);
    align-items: start;
  }
  .craic-papers__head { grid-column: 1 / -1; }
  .craic-papers__plate { grid-column: 2; grid-row: 2; }
  .craic-papers__list { grid-column: 1; grid-row: 2; }
}

/* The picture keeps its own pixels — every one of these is a real photomicrograph and none is
   enlarged past what the file holds, which is the rule the rest of this site's figures follow. */
.craic-papers__plate { margin: 0; }
.craic-papers__img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
}
.craic-papers__cap {
  margin-block-start: 0.7rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-dim, #585B63);
  max-inline-size: 36ch;
}

/* ---- the titles ------------------------------------------------------------------------
   A paper is a request, so its title is the control. Two columns once there is room: these are
   short lines and a single column of 38 of them wastes the width and lengthens the scroll. */
.craic-papers__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-inline-size: none;
}
@media (min-width: 700px) {
  .craic-papers__list { columns: 20rem; column-gap: var(--gap-head, 3.25rem); }
}
.craic-papers__list li {
  margin: 0 0 0.5rem;
  break-inside: avoid;
  padding-inline-start: 1.15rem;
  position: relative;
}
/* The aperture square, the mark this site uses wherever it says "this is the subject". */
.craic-papers__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 7px;
  block-size: 7px;
  background: var(--red, #ee2e24);
}
.craic-papers__list a {
  display: inline-block;
  padding-block: 0.15rem;         /* a 24px hit box on a 15px line (WCAG 2.5.8) */
  color: var(--stage, #0D0E10);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration-line: underline;
  text-decoration-color: rgba(238, 46, 36, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.craic-papers__list a:hover {
  text-decoration-color: var(--red, #ee2e24);
  text-decoration-thickness: 2px;
}
.craic-papers__list a:focus-visible { outline: 3px solid var(--stage, #0D0E10); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .craic-papers__chip { transition: none; }
}