/* Orli v3 site · Safety, safeguarding and data · Accessibility statement ·
   Privacy notice · Cookies and storage
   ---------------------------------------------------------------------------
   One stylesheet for the reference pages (safety.html, accessibility.html,
   and since pol-pages, 19 Oct, privacy.html and cookies.html),
   after shell/shell.css. System tokens only: the six type steps, the spacing
   scale, the three radii, the two soft shadows, surfaces, ink and action
   colours. Classes are prefixed sf-; everything else is the v2 system.

   How the pages read (BRIEF-V2 §12 "Readability"): one title and one lead per
   section, then clearly separated groups. Sections alternate canvas and warm
   so they never blend; the one deep band (Safety) carries the most important
   instruction on the page. One decoration per section at most, and only
   one that means something (the envelope by "email us"). No Orlis here:
   these are reference pages read beside safeguarding concerns and
   complaints. No handwriting, nothing moves on its own.
   ------------------------------------------------------------------------- */

/* =============================================================== hero */
.sf-hero { padding-block: var(--o-space-7) var(--o-space-8); }
.sf-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-head-gap); align-items: start; }
/* Long words (safeguarding, Accessibility) break rather than push the page
   sideways at very large text sizes on a narrow screen. */
main :is(h1, h2, h3, h4, p, li) { overflow-wrap: anywhere; }
main .o-pill { white-space: normal; text-align: center; }
.sf-hero .o-section-head { margin: 0; }
.sf-hero .o-display { max-inline-size: 15ch; }
@media (min-width: 900px) {
  .sf-hero { padding-block-start: var(--o-space-8); }
  .sf-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--o-space-8); align-items: end; }
}

/* "Last updated … · Print this page": meta under the buttons. */
.sf-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-1) var(--o-space-3);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2);
}
.sf-meta .o-btn { margin-inline-start: calc(-1 * var(--o-space-3)); }
.sf-meta > p + .o-btn { margin-inline-start: 0; }

/* "On this page": the shared row (components/contents/contents.css), under
   the hero's words. */
.sf-hero .o-contents { margin-block-start: var(--o-space-7); }

/* ========================================================== shared bits */
/* A doodle in a soft round badge: the one icon style on these pages. */
.sf-badge {
  flex: none; display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--o-warm); color: var(--o-ink);
}
.o-section--warm .sf-badge { background: var(--o-surface); box-shadow: inset 0 0 0 1px var(--o-line); }
.o-card .sf-badge { background: var(--o-warm); box-shadow: none; }
.sf-badge .o-doodle { --size: 26px; }

/* A sub-heading inside a section (Albert, the heading step). */
.sf-subhead {
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); text-wrap: balance;
}

/* A plain list with soft dots. */
.sf-list { display: grid; gap: var(--o-space-3); margin: 0; padding: 0; list-style: none; }
.sf-list > li { position: relative; padding-inline-start: var(--o-space-5); text-wrap: pretty; }
.sf-list > li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--o-n3);
}
.sf-list strong { font-weight: var(--o-weight-strong); color: var(--o-ink); }

/* Card text in these pages reads at body size, ink-2. */
.sf-card-copy { display: grid; gap: var(--o-space-4); color: var(--o-ink-2); }
.sf-card-copy .sf-list { color: var(--o-ink-2); }
.sf-card-copy p { text-wrap: pretty; }

.sf-cards { margin: 0; padding: 0; list-style: none; }
.sf-cards .o-card__body { gap: var(--o-space-3); }
.sf-cards .o-card__text { max-inline-size: 44ch; }

/* The closing "email us" block on both pages: one column at reading width,
   its title on the content edge like every other section (RULES 3: no
   decoration with a section title; the envelope badge went, fpol-pages). */
.sf-mail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-4); max-inline-size: 46rem; }

/* A section that follows one on the same surface: a hairline, not a gap. */
.sf-rule { margin-block-end: var(--o-section); }

/* ======================================================= Safety: Not */
.sf-not .o-card__title { max-inline-size: 22ch; }

/* ===================================================== Safety: worried
   The one deep band on the page. Three short steps, numbered. */
.sf-worried .o-split { align-items: start; }
.sf-worried .o-section-head { margin: 0; }
.sf-steps { display: grid; gap: var(--o-space-5); margin: 0; padding: 0; list-style: none; counter-reset: sf-step; }
.sf-steps > li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--o-space-4); align-items: start;
  font-size: var(--o-text-lead); line-height: var(--o-lh-lead); text-wrap: pretty;
}
.sf-steps > li + li { padding-block-start: var(--o-space-5); border-block-start: 1px solid rgb(255 255 255 / .22); }
.sf-steps > li::before {
  counter-increment: sf-step; content: counter(sf-step);
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--o-mint); color: #fff;
  font: var(--o-weight-title) var(--o-text-body) / 1 var(--o-font-ui);
  translate: 0 -6px;
}
.sf-steps strong { font-weight: var(--o-weight-strong); }

/* ===================================================== Safety: sessions */
.sf-sessions__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-8); align-items: center; }
@media (min-width: 900px) { .sf-sessions__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--o-space-8); } }

.sf-points { display: grid; gap: var(--o-space-6); margin: 0; padding: 0; list-style: none; }
.sf-point { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--o-space-4); align-items: start; }
.sf-point__title {
  font: var(--o-weight-title) var(--o-text-lead) / 1.3 var(--o-font-ui); letter-spacing: -.008em;
  padding-block-start: 10px; margin-block-end: var(--o-space-2); text-wrap: balance;
}
.sf-point__text { color: var(--o-ink-2); text-wrap: pretty; max-inline-size: 52ch; }
.sf-point__later {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--o-space-2) var(--o-space-3);
  margin-block-start: var(--o-space-3); padding: var(--o-space-4) var(--o-space-5);
  border-radius: var(--o-r-control); background: var(--o-warm);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2);
}
.sf-point__later .o-pill { --pill-bg: var(--o-surface); }

.sf-figure { display: grid; gap: var(--o-space-4); margin: 0; min-width: 0; }
.sf-figure .ps-stack__stage { pointer-events: none; }
/* The two-device set is shorter than the module's four-device phone stage. */
@container ps-stack (max-width: 599px) { .sf-figure .ps-stack__stage { aspect-ratio: 1 / 1.02; } }
.sf-figure figcaption { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); max-inline-size: 52ch; text-wrap: pretty; }
@media (max-width: 899.98px) { .sf-figure { order: -1; } }

/* ========================================================= Safety: data */
.sf-data .o-card__body { padding: var(--o-space-5); gap: var(--o-space-4); }
.sf-data .o-card__title { margin-block-start: var(--o-space-1); }

/* The app: one full-width card under the two above. Its intro (title, line,
   link) on the left and three facts on the right; stacked on a phone. */
.sf-app { grid-column: 1 / -1; }
.sf-data .sf-app .o-card__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-5); align-items: start; }
.sf-app__intro { display: grid; gap: var(--o-space-3); justify-items: start; }
.sf-app__intro .o-card__title { margin-block-start: var(--o-space-1); }
.sf-app__list { color: var(--o-ink-2); }
@media (min-width: 900px) {
  .sf-data .sf-app .o-card__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--o-space-8); }
  .sf-app__list { padding-block-start: var(--o-space-1); }
  .sf-app__list > li + li { padding-block-start: var(--o-space-3); border-block-start: 1px solid var(--o-line); }
  .sf-app__list > li + li::before { top: calc(var(--o-space-3) + .62em); }
}

.sf-rights {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-4);
  margin-block-start: var(--o-head-gap); padding-block-start: var(--o-space-6);
  border-block-start: 1px solid var(--o-warm-high);
}
.sf-rights .o-body { color: var(--o-ink); }
@media (min-width: 900px) {
  .sf-rights { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--o-space-8); }
}

/* ======================================================== Safety: KCSIE */
.sf-kcsie .o-split { align-items: center; }
.sf-kcsie .o-section-head { margin: 0; }
.sf-linkcard .o-card__body { gap: var(--o-space-3); padding: var(--o-space-6); }
.sf-linkcard__source { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); letter-spacing: .01em; }
.sf-linkcard .o-card__foot { padding-block-start: var(--o-space-3); }
.sf-linkcard .o-card__foot span:first-child { font-size: var(--o-text-small); color: var(--o-ink-2); }

/* ====================================================== Safety: contact */
.sf-contact .o-section-head { margin: 0; }
.sf-contact .o-section-head > .o-small { margin-block-start: 0; color: var(--o-ink-2); }

/* ==================================================== Accessibility */
.sf-target__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-head-gap); align-items: start; }
.sf-target .o-section-head { margin: 0; }
@media (min-width: 900px) { .sf-target__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--o-space-8); } }

/* "What we design for": aims, not results, so plain dots, not ticks. One
   white panel, its rows on hairlines. (Doubled class: beats the system's
   ul[role="list"] padding reset.) */
.sf-aims.sf-aims {
  margin: 0; padding: var(--o-space-1) var(--o-space-5); list-style: none;
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
}
.sf-aims > li { position: relative; padding-block: var(--o-space-4); padding-inline-start: var(--o-space-5); text-wrap: pretty; }
.sf-aims > li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: calc(var(--o-space-4) + .62em);
  width: 7px; height: 7px; border-radius: 50%; background: var(--o-n3);
}
.sf-aims > li + li { border-block-start: 1px solid var(--o-line); }
.sf-aims__note { color: var(--o-ink-2); text-wrap: pretty; }
.sf-target__list { display: grid; gap: var(--o-space-4); align-content: start; }

/* The panel: two groups of setting cards. */
.sf-group + .sf-group { margin-block-start: var(--o-space-8); }
.sf-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-2) var(--o-space-3); margin-block-end: var(--o-space-5); }
.sf-group__note { margin-block-start: var(--o-space-5); color: var(--o-ink-2); max-inline-size: var(--o-measure); text-wrap: pretty; }
.sf-setting .o-card__body { gap: var(--o-space-2); }
.sf-setting__top { display: flex; align-items: center; gap: var(--o-space-4); margin-block-end: var(--o-space-2); }
.sf-setting .o-card__title { margin: 0; }
.sf-setting__options { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); letter-spacing: .005em; }
.sf-setting .o-card__text { color: var(--o-ink-2); }

/* Known limitations: a ruled list of rows (title | what happens, what to do). */
.sf-rows { margin: 0; padding: 0; list-style: none; border-block-end: 1px solid var(--o-warm-high); }
.sf-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-2) var(--o-space-8);
  padding-block: var(--o-space-5); border-block-start: 1px solid var(--o-warm-high);
}
.sf-row__title { font: var(--o-weight-title) var(--o-text-lead) / 1.3 var(--o-font-ui); letter-spacing: -.008em; text-wrap: balance; }
.sf-row__text { display: grid; gap: var(--o-space-2); max-inline-size: 62ch; text-wrap: pretty; }
@media (min-width: 900px) { .sf-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

.sf-checked__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-6); }
@media (min-width: 900px) { .sf-checked__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-8); } }
.sf-checked__grid > div { display: grid; gap: var(--o-space-4); align-content: start; }
.sf-scope { margin-block-start: var(--o-space-7); color: var(--o-ink-2); max-inline-size: var(--o-measure); }

.sf-help .sf-list { color: var(--o-ink); }
.sf-help__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-gap); align-content: start; }
.sf-help__text > .o-cluster { margin-block-start: calc(var(--o-gap-loose) - var(--o-gap)); }

/* The Accessibility panel opens from these pages through the shell's own
   sheet (popovertarget). Without the shell's script there's no sheet. */
html:not(.js) [popovertarget="s-access"], [data-print][hidden] { display: none !important; }

/* ================================================ Privacy and Cookies */
/* The draft note beside the title: one quiet panel, not a warning. */
.sf-draft {
  display: grid; gap: var(--o-space-3); justify-items: start; align-self: end;
  padding: var(--o-space-5); border-radius: var(--o-r-card);
  background: var(--o-warm); color: var(--o-ink);
  max-inline-size: 30rem; text-wrap: pretty;
}
.sf-draft .o-pill { --pill-bg: var(--o-surface); }

/* Where a thing is kept, under what it's for: the small print of a row. */
.sf-store { display: grid; gap: var(--o-space-1); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.sf-store > span { color: var(--o-ink-2); }
.sf-store code, .sf-rows code {
  font: 600 .875em / 1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 1px 5px; border-radius: 6px; background: var(--o-surface); color: var(--o-ink);
  box-shadow: inset 0 0 0 1px var(--o-line); overflow-wrap: anywhere;
}

/* Statistics: what's counted, then the one switch. */
.sf-stats__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-head-gap); align-items: start; }
.sf-stats .o-section-head { margin: 0; }
.sf-stats__body { display: grid; gap: var(--o-space-7); }
@media (min-width: 900px) { .sf-stats__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--o-space-8); } }
.sf-switch {
  display: grid; gap: var(--o-space-3);
  padding: var(--o-space-5); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  background: var(--o-surface); box-shadow: var(--o-shadow);
}
.sf-switch__status { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-action); }
.sf-switch__status:empty { display: none; }
.sf-switch__gpc { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }

/* Privacy: your rights (the list beside what to do), and the note under
   the providers. */
.sf-rights__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-6); align-items: start; }
@media (min-width: 900px) { .sf-rights__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--o-space-8); } }
.sf-helpers__note { margin-block-start: var(--o-space-5); max-inline-size: 70ch; }

/* A closing section on the canvas: one column at reading width. */
.sf-clear { display: grid; gap: var(--o-gap); max-inline-size: 46rem; }

/* Who helps us: a ruled two-column list (provider | what for). */
.sf-who { margin: 0; padding: 0; list-style: none; border-block-end: 1px solid var(--o-warm-high); }
.sf-who > li {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-1) var(--o-space-8);
  padding-block: var(--o-space-4); border-block-start: 1px solid var(--o-warm-high);
}
/* The code hosts follow straight on (one list to the eye, one hairline). */
.sf-who + .sf-who > li:first-child { border-block-start: 0; }
.sf-who__name { font: var(--o-weight-title) var(--o-text-body) / 1.4 var(--o-font-ui); }
.sf-who__what { color: var(--o-ink-2); text-wrap: pretty; max-inline-size: 62ch; }
@media (min-width: 900px) { .sf-who > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.o-section:not(.o-section--warm) :is(.sf-who, .sf-who > li, .sf-rows, .sf-row) { border-color: var(--o-line); }

/* ========================================================= motion
   Nothing here moves on its own. Link cards follow the system's levels. */

/* ===================================================== forced colours */
@media (forced-colors: active) {
  .sf-aims { border-color: CanvasText; }
  .sf-steps > li::before { forced-color-adjust: none; background: Canvas; color: CanvasText; box-shadow: inset 0 0 0 2px CanvasText; }
  .sf-badge .o-doodle { background-color: CanvasText; }
  .sf-list > li::before, .sf-aims > li::before { background: CanvasText; }
  .sf-draft, .sf-switch { border: 1px solid CanvasText; }
}

/* ================================================================ print
   Both pages are likely printed (a DSL's file, a DPO's pack, a governors'
   meeting). Print drops the site's frame and decoration and keeps every word:
   black on white, links spelled out, cards that don't split. */
.sf-print-head, .sf-print-only { display: none; }
@media print {
  @page { margin: 16mm 15mm 18mm; }
  :root {
    --o-section: 0px; --o-head-gap: 6mm; --o-gutter: 0px;
    /* The six steps, in print sizes */
    --o-text-display: 26pt; --o-text-title: 17pt; --o-text-heading: 12.5pt;
    --o-text-lead: 11.5pt; --o-text-body: 10.5pt; --o-text-small: 9pt;
  }
  html, body { background: #fff !important; }
  body { color: #000; }
  .o-skip, .s-header, .o-header, .s-footer, .o-footer, [popover], .s-toast, .sf-noprint, .o-contents, .sf-figure,
  .o-btn, .o-cluster:has(.o-btn) { display: none !important; }
  main { display: block; }
  .o-container { width: 100%; }
  .sf-print-head {
    display: flex; justify-content: space-between; gap: 8mm; align-items: baseline;
    margin-block-end: 8mm; padding-block-end: 3mm; border-block-end: 1px solid #000;
    font: 600 9pt/1.3 var(--o-font-ui);
  }
  .sf-print-head img { width: 56px; height: auto; }
  .o-section { padding-block: 0 !important; margin-block-end: 8mm; background: none !important; color: #000 !important; }
  .o-section--deep { padding: 5mm 6mm !important; border: 2pt solid #000; border-radius: 12px; break-inside: avoid; }
  .o-section--deep .o-section-head .o-lead, .o-section--deep .o-muted { color: #000 !important; }
  .sf-hero { padding: 0 !important; margin-block-end: 8mm; }
  .sf-hero__grid, .o-split, .sf-sessions__grid, .sf-target__grid, .sf-rights, .sf-checked__grid { display: block !important; }
  .sf-hero__grid > * + *, .o-split > * + *, .sf-sessions__grid > * + *, .sf-target__grid > * + *, .sf-checked__grid > * + * { margin-block-start: 4mm; }
  .o-display, .o-title, .o-lead, .o-body { max-inline-size: none; }
  .o-title, .sf-subhead, .o-card__title, .sf-point__title, .sf-row__title { break-after: avoid; }
  .sf-print-only { display: block !important; font-size: var(--o-text-small); word-break: break-all; }
  .o-section-head { margin-block-end: 4mm; gap: 2mm; }
  .o-card, .sf-aims { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; translate: none !important; }
  .o-cards { display: block !important; }
  .o-cards > * + * { margin-block-start: 3mm; }
  .o-card__body { padding: 4mm 5mm !important; }
  .sf-badge, .o-arrow { display: none !important; }
  .sf-point, .sf-mail, .sf-data .sf-app .o-card__body { grid-template-columns: 1fr !important; }
  .sf-aims { padding: 0 5mm !important; }
  .sf-aims > li { padding-block: 2.5mm; }
  .sf-aims > li::before { top: calc(2.5mm + .62em); background: #000; }
  .sf-list > li::before { background: #000; }
  .sf-point, .sf-row, .sf-steps > li, .sf-list > li, .sf-aims > li { break-inside: avoid; }
  .sf-data .sf-app .o-card__body { gap: 3mm; }
  .sf-points { gap: 4mm; }
  .sf-steps > li::before { box-shadow: inset 0 0 0 1.5pt #000; color: #000; }
  .sf-steps > li + li { border-color: #999; }
  .sf-point__later, .o-pill { background: none !important; border: 1px solid #999; }
  .o-card__text, .sf-point__text, .sf-card-copy, .sf-card-copy .sf-list, .sf-app__list, .sf-aims__note, .o-muted, .sf-meta, .sf-scope, .sf-group__note, .sf-row__text p { color: #000 !important; }
  a { color: #000 !important; }
  a[data-print-url]::after { content: " (" attr(data-print-url) ")"; font-size: 9pt; word-break: break-all; }
  /* An arrow link that prints its address: the address replaces the arrow. */
  .o-link--arrow[data-print-url] { display: inline; padding: 0; }
  .o-link--arrow[data-print-url]::after { display: inline; width: auto; height: auto; margin: 0; translate: none; background: none; -webkit-mask: none; mask: none; }
  .sf-row { grid-template-columns: 1fr !important; padding-block: 3mm; }
  .sf-who > li { grid-template-columns: 1fr !important; padding-block: 2.5mm; break-inside: avoid; }
  .sf-draft { background: none; border: 1px solid #999; padding: 3mm 4mm; margin-block-start: 4mm; }
  .sf-switch { display: none !important; }
  .sf-stats__grid, .sf-rights__grid { display: block !important; }
  .sf-store, .sf-store > span, .sf-who__what { color: #000 !important; }
  .sf-store code, .sf-rows code { box-shadow: none; background: none; padding: 0; }
}