/* Orli v3 site · How Orli maps to Ofsted and DfE guidance
   ---------------------------------------------------------------------------
   A reference page for school leaders. Read with v2/system/RULES.md: system
   tokens only, the approved buttons unchanged, one focal point per viewport.

     intro ............ title, one lead, the date the quotes were checked;
                        Orla's island, small and quiet, beside it (not on a
                        phone)
     Where Orli fits .. two tables on the warm band (Ofsted, DfE), one row
                        per area: what the guidance asks (set as quotation,
                        on a rule), how Orli helps (our words, in ink),
                        today's status. Each row opens for the detail.
     belonging ........ the definition, Luna's island (Luna's world family)
     what Orli isn't .. safeguarding (KCSIE 50) and what we haven't shown
                        (KCSIE 49), each with where to read more
     sources .......... every document, with its status and date
     trial ............ the one deep band: Request a free trial, one-pager
     print ............ everything open, no chrome, A4

   Three layouts for a row: phone (one column), tablet and small laptop
   (760–1239: name and status on top, the two labelled columns below), and
   desktop (1240+: one line per area under real column heads).

   Rows are open without JavaScript (html:not(.js)) and print open. With it,
   they start closed with hidden="until-found", so find-in-page still reaches
   every word (the shell's [hidden] rule leaves until-found alone).
   ------------------------------------------------------------------------- */

.fw-print-head, .fw-print-only { display: none; }

/* ================================================================ intro
   Short on purpose: at 1280 × 720 the table's title and key are in the
   first screen. */
.fw-hero { padding-block: var(--o-space-7); }
.fw-hero__in { display: grid; gap: var(--o-space-6); align-items: center; }
.fw-hero__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-gap); }
.fw-hero__words > .o-kicker { margin-block-end: calc(var(--o-gap-tight) - var(--o-gap)); }
.fw-hero__title { max-inline-size: 22ch; }
.fw-hero__words .o-lead { max-inline-size: 38em; }
.fw-checked {
  display: inline-flex; align-items: flex-start; gap: var(--o-space-2);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  color: var(--o-ink-2);
}
.fw-checked .o-doodle { color: var(--o-action); margin-block-start: -1px; }

/* The islands: a cut-out on its own soft contact shadow, light from the
   upper left like every world. Still: nothing here moves. */
.fw-hero__art, .fw-belong__pic { position: relative; justify-self: center; }
.fw-hero__art { display: none; }
.fw-hero__art img, .fw-belong__pic img { position: relative; width: 100%; height: auto; }
.fw-island__shadow {
  position: absolute; inset-inline: 17%; inset-block-end: -3%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 57 50 / .2), rgb(60 57 50 / 0));
}
@media (min-width: 600px) {
  .fw-hero__in { grid-template-columns: minmax(0, 1fr) auto; }
  .fw-hero__art { display: block; width: clamp(160px, 22vw, 280px); }
}
@media (min-width: 900px) {
  .fw-hero__in { gap: var(--o-space-8); }
}

/* ============================================================== areas
   Title, one lead, the two ways to take it away (print, one page), the key,
   then the tables. Open all sits on the first table's head, where it acts. */
.fw-areas { padding-block-start: var(--o-space-8); }
.fw-areas__head { margin-block-end: var(--o-space-4); }
.fw-areas__head > .o-lead { max-inline-size: 60em; }
.fw-areas__head > .fw-tools { gap: var(--o-space-2); margin-block-start: calc(-1 * var(--o-space-2)); margin-inline-start: calc(-1 * var(--o-space-3)); }
/* A phone prints from its own share menu; one way to take it away is enough. */
@media (max-width: 599.98px) { .fw-tools [data-fw-print] { display: none; } }
.fw-tools__meta { font-weight: var(--o-weight-body); }
@media (min-width: 900px) {
  /* The tools beside the title, so the lead runs the full width on one line. */
  .fw-areas__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--o-space-6); }
  .fw-areas__head > .o-title { grid-column: 1; grid-row: 1; }
  .fw-areas__head > .fw-tools { grid-column: 2; grid-row: 1; margin: 0 calc(-1 * var(--o-space-3)) 0 0; }
  .fw-areas__head > .o-lead { grid-column: 1 / -1; grid-row: 2; }
}

/* The key: what the two status words mean. */
.fw-key {
  display: flex; flex-wrap: wrap; gap: var(--o-space-2) var(--o-space-6);
  margin: 0 0 var(--o-space-6);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2);
}
.fw-key > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-1); }
.fw-key dt { display: inline-flex; align-items: center; gap: var(--o-space-2); font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink); }
.fw-key dt::after { content: ":"; margin-inline-start: calc(-1 * var(--o-space-2)); }
.fw-key dd::before { content: " "; white-space: pre; }
.fw-key dd { margin: 0; }
.fw-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.fw-dot--live { background: var(--o-action); }
.fw-dot--dev { box-shadow: inset 0 0 0 2px var(--o-ink-2); }

/* A group: one source family, one table. */
.fw-group + .fw-group { margin-block-start: var(--o-space-8); }
.fw-group__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--o-space-1) var(--o-space-4);
  margin-block-end: var(--o-space-4);
}
.fw-group__title {
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading);
}
.fw-group__meta { grid-column: 1 / -1; font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }
.fw-group__all { grid-column: 2; grid-row: 1; }
@media (min-width: 900px) {
  .fw-group__head { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--o-space-4); align-items: baseline; }
  .fw-group__meta { grid-column: 2; grid-row: 1; }
  .fw-group__all { grid-column: 3; align-self: center; }
  .fw-group__head:has(.fw-group__all) { margin-block-start: calc(-1 * var(--o-space-2)); margin-block-end: var(--o-space-3); }
}

/* The table: one white card, rows on hairlines. */
.fw-table {
  background: var(--o-surface);
  border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
  overflow: clip;
}
.fw-cols { display: none; }
.fw-rows { margin: 0; padding: 0; list-style: none; }
.fw-row + .fw-row { border-block-start: 1px solid var(--o-line); }
.fw-row.is-open { background: color-mix(in srgb, var(--o-warm) 45%, var(--o-surface)); }

/* The summary: phone first, one column. */
.fw-row__sum {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 32px;
  grid-template-areas: "name chev" "asks asks" "helps helps" "status status";
  gap: var(--o-space-4);
  padding: var(--o-space-5) var(--o-space-4);
  transition: background-color var(--o-t-interact) var(--o-ease);
}
@media (min-width: 600px) { .fw-row__sum { padding-inline: var(--o-space-5); } }
html.js .fw-row__sum { cursor: pointer; }
/* Pointing at a row: it tints, its name underlines and its round button
   darkens, so it reads as something you can press. */
@media (hover: hover) and (pointer: fine) {
  html.js .fw-row__sum:hover { background: color-mix(in srgb, var(--o-warm) 85%, var(--o-surface)); }
  html.js .fw-row__sum:hover .fw-row__toggle {
    text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em;
  }
  html.js .fw-row__sum:hover .fw-row__chev { background: var(--o-warm-high); box-shadow: inset 0 0 0 1.5px var(--o-ink); }
}
.fw-row__name { grid-area: name; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-1); align-content: start; justify-items: start; }
.fw-row__area {
  font: var(--o-weight-title) var(--o-text-lead) / 1.3 var(--o-font-ui);
  letter-spacing: var(--o-track-heading); text-wrap: balance;
}
.fw-row__toggle {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: start;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 4px; cursor: pointer;
}
html:not(.js) .fw-row__toggle { cursor: text; }
/* The ring goes round the whole row, inside the card's edge. */
@supports selector(:has(*)) {
  .fw-row__toggle:focus-visible { outline: none; }
  .fw-row__sum:has(.fw-row__toggle:focus-visible) { outline: var(--o-focus-ring); outline-offset: calc(-1 * var(--o-space-2)); border-radius: var(--o-r-control); }
}
.fw-row__src { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
/* The one date on the page that leaders have to act on. */
.fw-row__due {
  display: inline-flex; align-items: center; gap: var(--o-space-1);
  margin-block-start: var(--o-space-2); padding: var(--o-space-1) var(--o-space-3) var(--o-space-1) var(--o-space-2); max-inline-size: 100%;
  /* one line at ordinary sizes; it wraps inside its column at very large text
     (a pill at one line, a soft card at two or three) */
  border-radius: 1em; background: var(--o-warm);
  font: var(--o-weight-ui) var(--o-text-small) / 1.35 var(--o-font-ui); color: var(--o-ink);
}
.fw-row.is-open .fw-row__due { background: var(--o-warm-high); }

/* What the guidance asks: set as quotation, on a rule, in the second ink.
   How Orli helps: our words, in ink. The labels say which is which below
   1240px; the column heads say it above. */
.fw-row__asks { grid-area: asks; }
.fw-row__helps { grid-area: helps; }
.fw-quote, .fw-quote__lead {
  margin: 0; padding-inline-start: var(--o-space-4);
  border-inline-start: 2px solid var(--o-n2);
}
.fw-quote { color: var(--o-ink-2); }
.fw-quote p, .fw-row__helps p { text-wrap: pretty; }
.fw-quote__lead {
  padding-block-end: var(--o-space-1);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2);
}
.fw-label {
  margin-block-end: var(--o-space-2);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  color: var(--o-ink-2);
}

/* Today. A row with anything in development shows both. */
.fw-row__status { grid-area: status; display: flex; flex-wrap: wrap; align-content: start; gap: var(--o-space-2) var(--o-space-4); margin: 0; padding: 0; list-style: none; }
.fw-status {
  display: flex; align-items: flex-start; gap: var(--o-space-2);
  font: var(--o-weight-ui) var(--o-text-small) / 1.35 var(--o-font-ui); color: var(--o-ink);
}
.fw-status::before { content: ""; flex: none; width: 10px; height: 10px; margin-block-start: .3em; border-radius: 50%; }
.fw-status__what, .fw-status__word { white-space: nowrap; }
.fw-status--live::before { background: var(--o-action); }
.fw-status--dev { color: var(--o-ink-2); }
.fw-status--dev::before { box-shadow: inset 0 0 0 2px var(--o-ink-2); }

/* Open and close: a hand-drawn chevron in a round 32px button shape. The
   whole summary is the target; the real button is the area name. */
.fw-row__chev {
  grid-area: chev; justify-self: end; align-self: start;
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-block-start: -3px; border-radius: 50%;
  background: var(--o-surface); box-shadow: inset 0 0 0 1.5px var(--o-n2);
  transition: background-color var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
.fw-row__chev::before {
  content: ""; width: 14px; height: 9px; translate: 0 1px;
  background: var(--o-ink);
  -webkit-mask: url("img/doodle-chevron.svg") center / contain no-repeat;
          mask: url("img/doodle-chevron.svg") center / contain no-repeat;
  transition: rotate var(--o-t-interact) var(--o-ease);
}
.fw-row.is-open .fw-row__chev { background: var(--o-warm-high); box-shadow: inset 0 0 0 1.5px var(--o-ink); }
.fw-row.is-open .fw-row__chev::before { rotate: 180deg; translate: 0 -1px; }
.fw-row__sum:has(.fw-row__toggle:focus-visible) .fw-row__chev { background: var(--o-warm-high); box-shadow: inset 0 0 0 1.5px var(--o-ink); }
html:not(.js) .fw-row__chev { display: none; }

/* The detail. hidden="until-found" keeps it findable; no padding on the
   hidden element itself, so a closed row has no gap. */
html:not(.js) .fw-row__more[hidden] { display: block !important; content-visibility: visible !important; }
.fw-more {
  display: grid; gap: var(--o-space-5);
  padding: 0 var(--o-space-4) var(--o-space-6);
}
@media (min-width: 600px) { .fw-more { padding-inline: var(--o-space-5); } }
.fw-more__title {
  margin: 0 0 var(--o-space-2);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  letter-spacing: .01em; color: var(--o-ink-2);
}
.fw-more__title:not(:first-child) { margin-block-start: var(--o-space-5); }
/* The guidance's column keeps its rule, so it lines up with the quote. */
.fw-more__guide { align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-space-2);
  padding-inline-start: var(--o-space-4); border-inline-start: 2px solid var(--o-n2);
}
.fw-more__guide > p { max-inline-size: var(--o-measure); text-wrap: pretty; }
.fw-more__guide > .fw-more__title { margin: 0; }
.fw-cite { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.fw-cite + .fw-cite { margin-block-start: calc(-1 * var(--o-space-1)); }
.fw-more__guide .o-link:not(.o-link--arrow) { text-decoration-color: currentColor; }

/* Links out: a small list, one link per item. Each item is a 44px target
   (the link's padding fills it exactly, so neighbours never overlap), and
   the link hugs its words: if a label wraps in a narrow column, the arrow
   follows the last word instead of drifting to the far edge. */
.fw-srcs { display: grid; justify-items: start; gap: var(--o-space-1); margin: 0; padding: 0; list-style: none; }
.fw-srcs li { padding-block: 12px; line-height: 1.2; text-wrap: balance; }
.fw-more__orli > .fw-srcs { margin-block-start: var(--o-space-3); }
.fw-srcs .o-link--arrow { display: inline; min-height: 0; padding-block: 12px; line-height: 1.2; }
.fw-srcs .o-link--arrow::after { display: inline-block; margin-inline-start: var(--o-space-2); vertical-align: 1px; }
.fw-more__guide > .fw-srcs { margin-block-start: calc(-1 * var(--o-space-2)); }

.fw-ticks, .fw-devs, .fw-principles { margin: 0; padding: 0; list-style: none; }
.fw-ticks li, .fw-devs li, .fw-principles li { position: relative; padding-inline-start: var(--o-space-6); text-wrap: pretty; }
:is(.fw-ticks, .fw-devs, .fw-principles) li + li { margin-block-start: var(--o-space-2); }
.fw-ticks li::before, .fw-principles li.is-orli::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .22em; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  --m: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg"); color: var(--o-action);
}
/* In development: the hollow ring from the key above the tables. */
.fw-devs li::before {
  content: ""; position: absolute; inset-inline-start: 5px; top: .5em; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--o-ink-2);
}
/* The seven principles: the one Orli fits under is ticked and named. */
.fw-principles { counter-reset: fw-p; }
.fw-principles li { counter-increment: fw-p; color: var(--o-ink-2); }
.fw-principles li:not(.is-orli)::before {
  content: counter(fw-p); position: absolute; inset-inline-start: 0; top: 0; width: 20px; text-align: center;
  font: var(--o-weight-ui) var(--o-text-small) / calc(var(--o-text-body) * var(--o-lh-body)) var(--o-font-ui); color: var(--o-ink-2);
}
.fw-principles li.is-orli { color: var(--o-ink); font-weight: var(--o-weight-strong); }
.fw-principles__tag {
  display: block; margin-block-start: 2px;
  font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--o-ink-2);
}
.fw-more__orli > .fw-cite { margin-block-start: var(--o-space-3); max-inline-size: 52ch; text-wrap: pretty; }

.fw-more__not {
  display: flex; align-items: flex-start; gap: var(--o-space-2);
  padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink);
}
.fw-more__not::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-block-start: 1px; background: var(--o-ink);
  -webkit-mask: url("../../../v2/system/assets/doodles/info.svg") center / contain no-repeat;
          mask: url("../../../v2/system/assets/doodles/info.svg") center / contain no-repeat;
}
.fw-more__not b { margin-inline-end: .25em; }

/* Opening a row: the detail settles in (full motion); a fade (reduced);
   nothing (still). Nothing else moves. */
.fw-row.is-arriving .fw-more { animation: fw-in var(--o-t-enter) var(--o-ease) both; }
@keyframes fw-in { from { opacity: 0; translate: 0 -6px; } }
@keyframes fw-fade { from { opacity: 0; } }

/* Tablet and small laptop: name and status on top, the two labelled
   columns of words below. The most readable form of the table. */
@media (min-width: 760px) {
  .fw-row__sum {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
    grid-template-areas: "name status chev" "asks helps helps";
    gap: var(--o-space-4) var(--o-space-6);
    padding: var(--o-space-5) var(--o-space-6);
  }
  .fw-row__status { justify-content: flex-end; padding-block-start: 3px; }
  .fw-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: var(--o-space-5) var(--o-space-6); padding: 0 var(--o-space-6) var(--o-space-6); }
  .fw-more__guide { grid-column: 1; grid-row: 1; }
  .fw-more__orli { grid-column: 2 / 4; grid-row: 1; }
  .fw-more__not { grid-column: 1 / -1; }
}

/* Desktop: one line per area under real column heads. Today keeps room for
   "In development:" on one line, its feature on the next. */
@media (min-width: 1240px) {
  .fw-cols, .fw-row__sum, .fw-more {
    grid-template-columns: minmax(12rem, 2.6fr) minmax(0, 4fr) minmax(0, 4fr) minmax(10.5rem, 1.6fr) 32px;
    column-gap: var(--o-space-6);
  }
  .fw-cols {
    display: grid; padding: var(--o-space-4) var(--o-space-6);
    border-block-end: 1px solid var(--o-line);
    font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
    color: var(--o-ink-2);
  }
  .fw-cols > :nth-child(2) { padding-inline-start: calc(var(--o-space-4) + 2px); }
  .fw-row__sum { grid-template-areas: "name asks helps status chev"; padding: var(--o-space-6); }
  .fw-row__status { flex-direction: column; justify-content: flex-start; gap: var(--o-space-3); padding-block-start: 3px; }
  .fw-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .fw-more { padding: 0 var(--o-space-6) var(--o-space-6); row-gap: var(--o-space-5); }
  .fw-more__guide { grid-column: 2; grid-row: 1; }
  .fw-more__orli { grid-column: 3 / 5; grid-row: 1; }
  .fw-more__not { grid-column: 2 / 5; }
}

/* ========================================================== belonging */
.fw-belong__in { display: grid; gap: var(--o-space-7); align-items: center; }
.fw-belong__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-space-5); }
.fw-belong__def {
  max-inline-size: 26ch;
  font: var(--o-weight-title) var(--o-text-heading) / 1.35 var(--o-font-ui);
  letter-spacing: var(--o-track-heading); color: var(--world-deep);
  text-wrap: balance;
}
.fw-belong__note { max-inline-size: 50ch; text-wrap: pretty; }
.fw-belong__art { margin: 0; display: grid; justify-items: center; gap: var(--o-space-5); }
.fw-belong__pic { width: min(100%, 480px); }
.fw-belong__art .o-media__caption { text-align: center; }
@media (min-width: 900px) {
  .fw-belong__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--o-space-8); }
}

/* ===================================================== what it isn't */
.fw-isnt__grid { display: grid; gap: var(--o-space-7); }
.fw-isnt__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-space-3);
  padding-block-start: var(--o-space-5); border-block-start: 1px solid var(--o-line);
}
.fw-isnt__item p { max-inline-size: var(--o-measure); text-wrap: pretty; }
.fw-isnt__item > .fw-srcs { margin-block-start: var(--o-space-1); }
@media (min-width: 900px) {
  .fw-isnt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-8); }
}

/* ============================================================ sources */
.fw-sources__in {
  display: grid; gap: var(--o-space-5);
  padding-block-start: var(--o-space-7); border-block-start: 1px solid var(--o-line);
}
.fw-sources__head { display: flex; flex-direction: column; gap: var(--o-space-3); }
.fw-sources__head p { max-inline-size: 40ch; text-wrap: pretty; }
.fw-sources__list { display: grid; gap: var(--o-space-4) var(--o-space-6); margin: 0; padding: 0; list-style: none; }
.fw-sources__list li { display: grid; align-content: start; gap: 2px; font-size: var(--o-text-small); line-height: var(--o-lh-small); }
.fw-sources__list a {
  justify-self: start; border-radius: 4px;
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
  color: var(--o-ink); text-decoration-thickness: 1.5px; text-underline-offset: .24em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: text-decoration-color var(--o-t-interact) var(--o-ease);
}
.fw-sources__list a:hover { text-decoration-color: currentColor; }
.fw-sources__list span { color: var(--o-ink-2); }
@media (min-width: 900px) {
  .fw-sources__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--o-space-8); }
  .fw-sources__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================== trial */
.fw-cta .o-section-head { margin: 0; }
.fw-cta .o-section-head .o-title { max-inline-size: 18ch; }

/* ====================================================== motion levels */
html[data-motion="reduced"] .fw-row.is-arriving .fw-more { animation-name: fw-fade; }
html[data-motion="reduced"] .fw-row__chev::before { transition: none; }
html[data-motion="still"] .fw-row.is-arriving .fw-more { animation: none; }
html[data-motion="still"] :is(.fw-row__sum, .fw-row__chev, .fw-sources__list a),
html[data-motion="still"] .fw-row__chev::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .fw-row.is-arriving .fw-more { animation-name: fw-fade; }
  html:not([data-motion]) .fw-row__chev::before { transition: none; }
}

/* ===================================================== forced colours */
@media (forced-colors: active) {
  .fw-table { border-color: CanvasText; }
  .fw-row + .fw-row, .fw-cols, .fw-more__not { border-color: CanvasText; }
  .fw-quote, .fw-quote__lead, .fw-more__guide { border-color: GrayText; }
  .fw-row.is-open, .fw-row__sum:hover { background: Canvas; }
  .fw-dot--live, .fw-status--live::before { forced-color-adjust: none; background: CanvasText; }
  .fw-dot--dev, .fw-status--dev::before { forced-color-adjust: none; box-shadow: inset 0 0 0 2px CanvasText; }
  .fw-row__chev { forced-color-adjust: none; background: Canvas !important; box-shadow: inset 0 0 0 1.5px CanvasText !important; }
  .fw-row__chev::before, .fw-ticks li::before, .fw-principles li.is-orli::before, .fw-more__not::before { background: CanvasText; }
  .fw-devs li::before { forced-color-adjust: none; box-shadow: inset 0 0 0 2px CanvasText; }
  .fw-row__due { border: 1px solid CanvasText; }
  .fw-island__shadow { display: none; }
}

/* ============================================================== print
   For a governors' pack: every row open, no header, footer, buttons or
   pictures; ink on white; links to the sources written out. Print uses its
   own type scale in points (the screen scale is fluid with the window) and
   the desktop table's columns. Rows may break between summary and detail,
   never inside either, so pages fill. */
@media print {
  @page { size: A4; margin: 16mm 15mm 18mm; }
  :root {
    --o-text-display: 24pt; --o-text-title: 17pt; --o-text-heading: 12.5pt;
    --o-text-lead: 11pt; --o-text-body: 9.5pt; --o-text-small: 8pt; --o-lh-body: 1.42; --o-lh-small: 1.35;
    --o-section: 0; --o-head-gap: 4mm;
  }
  html, body { background: #fff !important; color: #000; }
  body { font-size: var(--o-text-body); }
  orli-header, orli-footer, .o-skip, .s-toast, .s-loader,
  .fw-tools, .fw-group__all, .fw-hero__art, .fw-belong__art, .fw-row__chev, .fw-cta .o-cluster, .fw-cta #fw-pdf-meta { display: none !important; }
  .fw-print-head {
    display: block; margin: 0 0 6mm; padding-block-end: 2mm; border-block-end: .5pt solid #999;
    font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: #444;
  }
  .fw-print-only { display: block; margin-block-start: 3mm; font-size: var(--o-text-body); }
  .o-container { width: 100%; }
  .o-section, .fw-hero { padding: 0 !important; background: none !important; color: #000 !important; }
  main > section + section { margin-block-start: 8mm; }
  .fw-hero__in { display: block; }
  .fw-hero__title { max-inline-size: none; }
  .fw-areas__head { display: block; margin-block-end: 3mm; }
  .fw-key { margin-block-end: 5mm; }
  .fw-group + .fw-group { margin-block-start: 7mm; }
  .fw-group__head { break-after: avoid; margin-block-end: 2.5mm; }
  .fw-table { box-shadow: none; border: .5pt solid #999; border-radius: 3mm; overflow: visible; }
  .fw-cols { border-color: #999; break-after: avoid; }
  .fw-sources__list a { text-decoration: none; }
  .fw-row + .fw-row { border-color: #bbb; }
  .fw-row, .fw-row.is-open { background: none !important; }
  .fw-row__sum { break-inside: avoid; }
  .fw-more__guide, .fw-more__orli { break-inside: avoid; }
  .fw-screen-only, .fw-more__not::before { display: none !important; }
  .fw-row__sum { padding: 3mm 4mm 2mm; gap: 2mm 4mm; }
  .fw-cols, .fw-row__sum, .fw-more {
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 4fr) minmax(0, 4fr) minmax(25mm, 1.6fr) 0;
    column-gap: 4mm;
  }
  .fw-cols { display: grid; padding: 2.5mm 4mm; font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: #444; border-block-end: .5pt solid #999; }
  .fw-cols > :nth-child(2) { padding-inline-start: 3mm; }
  .fw-row__sum { grid-template-areas: "name asks helps status chev"; }
  .fw-row__status { flex-direction: column; justify-content: flex-start; gap: 1.5mm; }
  .fw-status::before, .fw-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fw-row__due { background: none; padding: 0; margin-block-start: 1mm; }
  .fw-row__due .o-doodle { display: none; }
  .fw-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fw-quote, .fw-quote__lead, .fw-more__guide { padding-inline-start: 3mm; border-color: #bbb; color: #333; }
  .fw-row__more[hidden] { display: block !important; content-visibility: visible !important; }
  .fw-more { padding: 0 4mm 3mm; gap: 2mm 4mm; animation: none !important; }
  /* On paper the detail uses the full width: the guidance under the area
     and its quote, Orli under how it helps and today. */
  .fw-more__guide { grid-column: 1 / 3; grid-row: 1; }
  .fw-more__orli { grid-column: 3 / 5; grid-row: 1; }
  .fw-more__not { grid-column: 1 / 5; padding-block-start: 2mm; border-color: #ccc; }
  .fw-more__title:not(:first-child) { margin-block-start: 2mm; }
  .fw-more__title { margin-block-end: 1mm; }
  .fw-ticks li, .fw-devs li, .fw-principles li { padding-inline-start: 5mm; }
  :is(.fw-ticks, .fw-devs, .fw-principles) li + li { margin-block-start: 1mm; }
  .fw-ticks li::before, .fw-principles li.is-orli::before { width: 3.4mm; height: 3.4mm; }
  .fw-principles li:not(.is-orli)::before { width: 3.4mm; line-height: 1.5; }
  .fw-devs li::before { inset-inline-start: 1mm; width: 2.2mm; height: 2.2mm; }
  .fw-srcs { gap: 0; }
  .fw-srcs li { padding: 0; }
  .fw-srcs .o-link--arrow { display: inline; padding: 0; font-size: var(--o-text-small); text-decoration: none; }
  .fw-srcs .o-link--arrow::after { display: none; }
  .fw-sources__list a::after {
    content: " " attr(href); display: inline; width: auto; height: auto; background: none; -webkit-mask: none; mask: none;
    font: 400 7pt / 1.3 var(--o-font-body); color: #444; word-break: break-all;
  }
  .fw-belong__in, .fw-isnt__grid, .fw-sources__in { display: block; }
  .fw-belong__words { gap: 2mm; break-inside: avoid; }
  .fw-belong__def { color: #000; max-inline-size: none; }
  .fw-isnt__item { padding-block-start: 3mm; margin-block-start: 3mm; break-inside: avoid; }
  .fw-sources__in { padding-block-start: 5mm; border-color: #999; }
  .fw-sources__head { margin-block-end: 3mm; }
  .fw-sources__list { display: block; columns: 2; column-gap: 8mm; }
  .fw-sources__list li { break-inside: avoid; margin-block-end: 2mm; }
  .fw-cta { break-inside: avoid; }
  .fw-cta .o-section-head .o-title { font-size: var(--o-text-heading); max-inline-size: none; }
  .fw-cta .o-lead { display: none; }
  .fw-cta, .fw-cta * { color: #000 !important; }
  .fw-cta .o-section-head { align-items: flex-start; text-align: start; }
  .fw-cta .o-section-head > * { margin-inline: 0; }
  .o-muted, .o-on-dark .o-muted { color: #444 !important; }
  a { color: #000 !important; }
  h2, h3, h4, h5 { break-after: avoid; }
}