/* "Where this stands" stepper. All classes are prefixed ws-. Colours come from the site's tokens only
   (--paper, --page, --ink, --ink-2, --muted, --line, --accent, --accent-text, --accent-soft, --pine).
   The "current" ring uses --accent-text, not --accent: on the light theme --accent is 2.3:1 against --paper.
   Vertical by default; five columns on screens 600px and wider when the widget itself has at least 480px. Smallest text is 13px. */
.ws {
  --ws-sans: Inter, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;   /* the site's body stack; names fonts, loads none */
  container: ws / inline-size;
  margin: 1.2rem 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}
.ws p, .ws ul, .ws ol, .ws h2, .ws h3, .ws h4, .ws blockquote { margin: 0; padding: 0; }
.ws ul, .ws ol { list-style: none; }
.ws a { padding-block: .8rem; color: var(--accent-text); text-underline-offset: .18em; }   /* inline padding: a 44px target, no change to the line */
.ws a:focus-visible, .ws summary:focus-visible, .ws-btn:focus-visible, .ws-grp:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ws .ws-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ws .ws-h {
  color: var(--accent-text);
  font: 600 .8125rem/1.4 var(--ws-sans);
  letter-spacing: .16em; text-transform: uppercase; max-width: none;
}
.ws .ws-lead { margin-top: .3rem; color: var(--ink-2); font-size: 1rem; }
.ws .ws-lead strong { color: var(--ink); font-size: 1.125rem; }
.ws-multi { display: block; color: var(--ink); font-weight: 600; }
.ws .ws-read, .ws .ws-src { max-width: 70ch; margin-top: .5rem; color: var(--ink-2); font-size: .875rem; line-height: 1.55; }
.ws .ws-src { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.ws .ws-status { color: var(--ink); font-size: .875rem; font-weight: 600; }
.ws .ws-status:empty { display: none; }
.ws .ws-status { margin-top: .5rem; }

/* ---- a lane ---- */
.ws-lane { margin-top: 1rem; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-top: 3px solid var(--line); background: var(--paper); }
.ws-lane + .ws-lane { margin-top: .6rem; }
.ws .ws-lane-h { color: var(--ink); font: 700 1.125rem/1.3 var(--ws-sans); letter-spacing: 0; }
.ws .ws-sum { color: var(--ink); font-size: .9375rem; font-weight: 700; }
.ws .ws-note { max-width: 78ch; margin-top: .2rem; color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
.ws-k { color: var(--muted); }

/* ---- the path: vertical ---- */
.ws-path { margin-top: .9rem !important; }
.ws-step { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0 .75rem; padding-bottom: 1rem; }
.ws-step:last-child { padding-bottom: 0; }
.ws-step::before {                       /* connector to the next step */
  position: absolute; top: 1.75rem; bottom: 0; left: calc(.875rem - 1px); content: "";
  border-left: 2px solid var(--line);
}
.ws-step:last-child::before { display: none; }
.ws-step[data-state="no-record"]::before { border-left-style: dashed; }
.ws-step[data-state="done"]::before { border-left-color: var(--pine); }

.ws-mark {
  display: block; position: relative; z-index: 1; width: 1.75rem; height: 1.75rem; border: 2px solid var(--line); border-radius: 50%;
  background: var(--paper);
}
.ws-mark::after { position: absolute; content: ""; }
.ws-step[data-state="later"] .ws-mark { transform: scale(.62); }
.ws-step[data-state="no-record"] .ws-mark { border-style: dashed; border-color: var(--muted); }
.ws-step[data-state="done"] .ws-mark,
.ws-step[data-state="reached"] .ws-mark { border-color: var(--pine); background: var(--pine); }
.ws-step[data-state="done"] .ws-mark::after,
.ws-step[data-state="reached"] .ws-mark::after {          /* tick */
  top: 18%; left: 34%; width: 30%; height: 50%; border: solid var(--paper); border-width: 0 3px 3px 0; transform: rotate(42deg);
}
.ws-step[data-state="current"] .ws-mark { border: 3px solid var(--accent-text); }
.ws-step[data-state="current"] .ws-mark::after { inset: 22%; border-radius: 50%; background: var(--accent-text); }
.ws-step[data-state="reached"] .ws-mark,
.ws-step[data-state="ended"] .ws-mark { box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--accent-text); }
.ws-step[data-state="ended"] .ws-mark { border-color: var(--ink-2); border-radius: 3px; background: var(--ink-2); }
.ws-step[data-state="ended"] .ws-mark::after { top: calc(50% - 2px); right: 22%; left: 22%; height: 4px; background: var(--paper); }

.ws-cell { min-width: 0; }
.ws .ws-name { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 0 .4rem; min-height: 1.75rem; color: var(--ink); font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.ws-step[data-state="later"] .ws-name { color: var(--muted); font-weight: 600; }
.ws-step[data-state="no-record"] .ws-name { color: var(--ink-2); }
.ws-sub { color: var(--muted); font-size: .8125rem; font-weight: 400; }
.ws-btn {
  display: inline-flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 0 .4rem; min-width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.ws-btn .ws-nm { text-decoration: underline dotted var(--muted); text-underline-offset: .22em; }
.ws-btn:hover .ws-nm { color: var(--accent-text); text-decoration-color: currentColor; }
.ws-btn[aria-expanded="true"] .ws-nm { text-decoration-style: solid; text-decoration-color: var(--accent); }
.ws-step:has(.ws-btn) { padding-top: 0; }
.ws-step:has(.ws-btn) .ws-mark { margin-top: .5rem; }
.ws-step:has(.ws-btn)::before { top: 2.25rem; }
.ws .ws-state:not(.ws-sr) {
  display: inline-block; margin: .15rem 0 .2rem; padding: .16rem .5rem; border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--ink); font-size: .8125rem; font-weight: 700; line-height: 1.35;
}
.ws-rows { margin-top: .15rem !important; color: var(--ink-2); font-size: .875rem; line-height: 1.45; }
.ws-rows li { margin-top: .3rem; }
.ws-rows time, .ws-recs time { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ws-rows .ws-rec { display: inline; }
.ws-gap { color: var(--muted); font-style: italic; }
.ws-also { color: var(--muted); }
.ws-basis { color: var(--muted); }
.ws-mw { color: var(--muted); white-space: nowrap; }
.ws-mw::before { content: "· "; }
.ws-out .ws-t { color: var(--ink); font-weight: 700; }
.ws-o {                                   /* outcome mark: shape, not colour, tells them apart */
  display: inline-block; position: relative; width: .8rem; height: .8rem; margin-right: .4rem; border: 2px solid var(--ink); border-radius: 50%; vertical-align: -.08rem;
}
.ws-out[data-o="approved-locally"] .ws-o { background: var(--ink); }
.ws-out[data-o="denied-locally"] .ws-o::after { position: absolute; top: calc(50% - 1px); right: -3px; left: -3px; height: 2px; background: var(--ink); content: ""; transform: rotate(-45deg); }
.ws-out[data-o="local-review"] .ws-o { border-style: dotted; }
.ws-past { display: block; color: var(--ink); font-weight: 600; }

/* ---- the records, quoted ---- */
.ws-more { margin-top: .8rem; border: 1px solid var(--line); background: var(--paper); }
.ws-more summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; min-height: 2.75rem; padding: .4rem 1rem;
  color: var(--ink); font-size: .9375rem; font-weight: 700; cursor: pointer;
}
.ws-cnt { color: var(--muted); font: 400 .8125rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.ws-more > :not(summary) { margin-inline: 1rem !important; }
.ws .ws-more-h { margin-top: .6rem !important; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--ink); font: 700 1rem/1.3 var(--ws-sans); letter-spacing: 0; }
.ws-grp, .ws-unv { margin-block: .7rem 1rem !important; scroll-margin-top: calc(var(--header-h, 0rem) + 1rem); }
.ws-grp.ws-hit { outline: 2px solid var(--accent); outline-offset: .4rem; }
.ws .ws-grp-h { color: var(--accent-text); font: 700 .8125rem/1.4 var(--ws-sans); letter-spacing: .1em; text-transform: uppercase; }
.ws-recs > li { margin-top: .6rem; padding-left: .8rem; border-left: 2px solid var(--line); }
.ws-rl { color: var(--ink); font-size: .9375rem; }
.ws .ws-q { margin: .3rem 0 0; color: var(--ink-2); font-family: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif; font-size: .9375rem; line-height: 1.5; }
.ws .ws-q::before { content: "\201C"; }
.ws .ws-q::after { content: "\201D"; }
.ws .ws-w { color: var(--muted); font-size: .8125rem; }
.ws-unv ul { margin-top: .3rem !important; color: var(--ink-2); font-size: .875rem; }
.ws-unv li { margin-top: .3rem; padding-left: .8rem; border-left: 2px dashed var(--muted); }

/* ---- five columns on a screen 600px wide or more, provided the widget itself has 480px to work with ---- */
@media (min-width: 600px) {
  @container ws (min-width: 30rem) {
    .ws-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 .9rem; }
    .ws-step { display: block; padding-bottom: 0; }
    .ws-step::before { top: calc(.875rem - 1px); right: -.9rem; bottom: auto; left: 1.75rem; border-top: 2px solid var(--line); border-left: 0; }
    .ws-step[data-state="no-record"]::before { border-top-style: dashed; }
    .ws-step[data-state="done"]::before { border-top-color: var(--pine); }
    .ws-cell { margin-top: .45rem; }
    .ws .ws-name { min-height: 2.75rem; align-content: start; align-items: start; }
    .ws-btn { align-content: start; align-items: start; }
    .ws-step:has(.ws-btn) .ws-mark { margin-top: 0; }
    .ws-step:has(.ws-btn)::before { top: calc(.875rem - 1px); }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ws-grp { transition: outline-color .3s ease; }
}
@media print {
  .ws-more > :not(summary) { display: block !important; }
  .ws-lane { break-inside: avoid; }
}

/* phone fold: each lane's five steps behind a summary below 600px; the summary is hidden from 600px up */
.ws-fold > .ws-fold-s { display: flex; align-items: center; gap: .5rem; min-height: 44px; margin: .4rem 0 0; cursor: pointer;
  font: 600 .95rem/1.3 Inter, system-ui, sans-serif; color: var(--ink); list-style: none; }
.ws-fold > .ws-fold-s::-webkit-details-marker { display: none; }
.ws-fold > .ws-fold-s::before { content: ""; width: .55rem; height: .55rem; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s; }
.ws-fold[open] > .ws-fold-s::before { transform: rotate(45deg); }
.ws-fold > .ws-fold-s:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (min-width: 600px) { .ws-fold > .ws-fold-s { display: none; } }
@media (prefers-reduced-motion: reduce) { .ws-fold > .ws-fold-s::before { transition: none; } }
@media (max-width: 599.98px) {
  /* "How to read this" explains the five marks; while every lane is folded there are none on screen */
  .ws:not(:has(.ws-fold[open])) .ws-read { display: none; }
}
@media (max-width: 599.98px) {
  section.panel#where-this-stands { padding-top: 2rem; padding-bottom: 2rem; }
}