/* Orli v3 site · Resources (resources.html)
   ---------------------------------------------------------------------------
   Free printables for schools. Four sections, each on its own surface so they
   never blend: the hero (canvas), the featured guide (the brand's mint wash),
   three more as cards (warm: the schools handout, the Orli pages and the
   feelings poster, held), and the optional email sign-up (canvas).

   One focal point per viewport: the paper on the table in the hero, the
   guide's two pages in its section. The previews are the real sheets, made by
   tools/build.mjs from the print pages, so what you see is what downloads.
   System tokens and components only; the sign-up fields follow the Orli
   Schools field styles (schools.css on origin/main, see INTEGRATION.md).
   ------------------------------------------------------------------------- */

/* ================================================================== hero */
.r-hero { padding-block: var(--o-space-7) var(--o-space-8); }
.r-hero .o-section-head { margin: 0; }
.r-hero .o-display { max-inline-size: 12ch; }
@media (min-width: 900px) {
  .r-hero { padding-block: var(--o-space-8) var(--o-space-9); }
  .r-hero .o-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* The sheets lying on a warm table, light from the upper left: the guide's
   two pages behind, the schools handout in front. */
.r-table {
  position: relative; isolation: isolate;
  aspect-ratio: 5 / 4; border-radius: var(--o-r-card);
  background: var(--o-warm); overflow: clip;
}
.r-table__sheet {
  position: absolute; height: auto; border-radius: 3px;
  box-shadow: 0 1px 2px rgb(60 57 50 / .1), 0 18px 34px -14px rgb(60 57 50 / .32);
}
.r-table__sheet--left { width: 37%; left: 7%; top: 10%; rotate: -6deg; }
.r-table__sheet--right { width: 37%; right: 7%; top: 9%; rotate: 5.5deg; }
.r-table__sheet--front { width: 42%; left: 29%; top: 15%; rotate: -1.5deg; z-index: 1; }

/* ======================================================== featured guide
   Phone: title, the two pages, then the details. From 900px: the pages on
   the left, the words on the right. */
.r-feature__grid { display: grid; gap: var(--o-space-6); grid-template-areas: "head" "spread" "body"; }
.r-feature__head { grid-area: head; margin: 0; }
.r-feature__body { grid-area: body; display: grid; justify-items: start; gap: var(--o-space-5); }
@media (min-width: 900px) {
  .r-feature__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--o-space-8); row-gap: var(--o-space-6);
    grid-template-areas: "spread head" "spread body"; grid-template-rows: auto 1fr; align-items: start;
  }
  .r-feature__head { align-self: end; }
}

/* The two pages, slightly fanned, on the section's wash. */
.r-spread { grid-area: spread; position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--o-r-card); }
.r-spread__page {
  position: absolute; width: 46%; height: auto; border-radius: 3px;
  box-shadow: 0 1px 2px rgb(60 57 50 / .1), 0 18px 34px -14px rgb(60 57 50 / .3);
  transition: translate var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
.r-spread__page--1 { left: 5%; top: 4%; rotate: -2deg; }
.r-spread__page--2 { right: 5%; top: 7%; rotate: 2.5deg; }
@media (hover: hover) and (pointer: fine) {
  .r-spread:hover .r-spread__page--1 { translate: var(--o-lift-x) var(--o-lift-y); box-shadow: 0 2px 4px rgb(60 57 50 / .12), 0 26px 44px -16px rgb(60 57 50 / .36); }
}

/* What's inside: two rows, a short label and its line. */
.r-inside { display: grid; gap: var(--o-space-3); margin: 0; max-inline-size: 40rem; }
.r-inside > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--o-space-3); }
.r-inside dt { font: var(--o-weight-ui) var(--o-text-body) / var(--o-lh-body) var(--o-font-ui); }
.r-inside dd { margin: 0; color: var(--o-ink); text-wrap: pretty; }

/* The safety line: the one thing a grown-up must read first. */
.r-safety {
  display: flex; align-items: flex-start; gap: var(--o-space-2);
  font: var(--o-weight-ui) var(--o-text-body) / 1.4 var(--o-font-ui); color: var(--world-deep);
}
.r-safety__icon {
  flex: none; width: 20px; height: 20px; translate: 0 1px; background: currentColor;
  -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;
}
.r-meta { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.r-feature__body .o-cluster { margin-block-start: calc(var(--o-space-2) * -1); }

/* ================================================================ cards */
.r-cards { display: grid; gap: var(--o-grid-gap); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
/* (three across only from 1100px, on their side below it, so the card's
   words never run under about 32 characters a line; spacing rules, 2 Nov) */
@media (min-width: 1100px) { .r-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 1099.98px) {
  .r-card { flex-direction: row; }
  .r-card > .r-card__media { flex: 0 0 40%; aspect-ratio: auto; min-height: 100%; }
}
.r-card { scroll-margin-top: calc(var(--o-header-h) + var(--o-space-5)); }
.r-card:target { border-color: var(--o-ink); box-shadow: var(--o-shadow-raised); }

/* The sheet on the card's tinted ground: a picture of the first page, as
   it downloads. The actions are in the card's foot. */
.r-card__media { --ratio: 4 / 3; position: relative; display: grid; place-items: center; min-height: 0; padding: var(--o-space-5); text-decoration: none; }
/* Every card's picture starts below where a status tag sits, so a tag never
   covers the sheet and the three sheets line up. */
.r-card > .r-card__media { padding-block-start: calc(var(--o-space-3) * 2 + 1.75rem); grid-template-rows: minmax(0, 1fr); }
.r-card__media .o-media__tag .o-pill { --pill-bg: var(--o-paper); --pill-ink: var(--o-ink); box-shadow: 0 1px 2px rgb(47 46 43 / .1); }
a.r-card__media { cursor: pointer; }
a.r-card__media:focus-visible { outline-offset: -6px; border-radius: var(--o-r-card) var(--o-r-card) 0 0; }
.r-paper {
  width: auto !important; height: 100% !important; max-height: 15rem; object-fit: contain;
  aspect-ratio: 400 / 566; border-radius: 3px; rotate: -1.5deg;
  box-shadow: 0 1px 2px rgb(60 57 50 / .1), 0 14px 26px -12px rgb(60 57 50 / .3);
  transition: translate var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) {
  a.r-card__media:hover .r-paper { translate: var(--o-lift-x) var(--o-lift-y); box-shadow: 0 2px 4px rgb(60 57 50 / .12), 0 20px 34px -14px rgb(60 57 50 / .36); }
}
a.r-card__media:focus-visible .r-paper { translate: var(--o-lift-x) var(--o-lift-y); }

/* The Orli pages: three of the scrapbook's world pages, fanned. */
/* The Orli pages: three of the scrapbook's world pages, side by side, each
   world's name in view. */
.r-pages { display: flex; align-items: center; justify-content: center; gap: 4%; width: 100%; height: 100%; max-height: 15rem; }
.r-pages img {
  width: 29%; height: auto; aspect-ratio: 360 / 504; border-radius: 3px;
  box-shadow: 0 1px 2px rgb(60 57 50 / .1), 0 12px 22px -12px rgb(60 57 50 / .3);
}
.r-pages img:nth-child(1) { rotate: -3deg; translate: 0 3%; }
.r-pages img:nth-child(2) { rotate: 2deg; translate: 0 -3%; }
.r-pages img:nth-child(3) { rotate: -1.5deg; translate: 0 2%; }

.r-card .o-card__body { gap: var(--o-space-3); }
.r-card .o-card__text { color: var(--o-ink); max-inline-size: 40ch; }
.r-card__foot { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--o-space-3) var(--o-space-4); }
.r-card__alt { display: inline-flex; align-items: center; min-height: var(--o-target); }
/* A second, quieter line: who it's for, or why it isn't ready. */
.r-note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); max-inline-size: 44ch; text-wrap: pretty; }

/* ============================================================== sign-up */
.r-signup .o-section-head { margin: 0; }
/* One sign-up in view: the page uses <orli-footer news="off">, because both
   forms sign people up to the same "Orli news" topic. */
.r-signup__card {
  padding: var(--o-space-6); border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  background: var(--o-surface); box-shadow: var(--o-shadow);
}
@media (max-width: 599.98px) { .r-signup__card { padding: var(--o-space-5); } }
.r-form { display: grid; gap: var(--o-space-5); }
.r-form__actions { display: flex; }
.r-fineprint { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }

/* The field is the site's one field style (v2/system/components.css:
   .o-field, .o-input, .o-field__error, .o-notice), so it grows with the
   browser's text size like every other form (fpol-pages). */

/* The honeypot: off screen, out of the tab order, hidden from assistive tech. */
.r-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sent: check your inbox. */
.r-done { display: grid; justify-items: start; gap: var(--o-space-3); }
.r-done h3:focus { outline: none; }
.r-done h3:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-space-1); border-radius: 4px; }
.r-done__mark {
  display: grid; place-items: center; width: 48px; height: 48px; margin-block-end: var(--o-space-1);
  border-radius: 50%; background: var(--world-soft); color: var(--o-action);
}
.r-done__mark::before {
  content: ""; width: 22px; height: 16px; background: currentColor;
  -webkit-mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat;
          mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat;
}
.r-done p { max-inline-size: 44ch; text-wrap: pretty; }
.r-done strong { overflow-wrap: anywhere; }
.r-done:not([hidden]) { animation: r-in var(--o-t-enter) var(--o-ease) both; }
@keyframes r-in { from { opacity: 0; translate: 0 6px; } }
.r-textbtn {
  display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .24em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); border-radius: 4px;
}
.r-textbtn:hover { text-decoration-color: currentColor; }

/* ======================================================== motion levels */
html:is([data-motion="reduced"], [data-motion="still"]) :is(.r-spread__page, .r-paper) { translate: none !important; }
html[data-motion="still"] :is(.r-spread__page, .r-paper) { transition: none !important; }
html[data-motion="still"] .r-done:not([hidden]) { animation: none; }
html[data-motion="reduced"] .r-done:not([hidden]) { animation-name: r-fade; }
@keyframes r-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) :is(.r-spread__page, .r-paper) { translate: none !important; }
  html:not([data-motion]) .r-done:not([hidden]) { animation-name: r-fade; }
}

/* ======================================================= forced colours */
@media (forced-colors: active) {
  :is(.r-table__sheet, .r-spread__page, .r-paper, .r-pages img) { border: 1px solid CanvasText; }
  .r-safety__icon, .r-done__mark::before { background: CanvasText; }
}

/* ================================================================ print
   Printing this page gives a plain list of what's here, the file details and
   where to find them. */
.r-print-only { display: none; }
@media print {
  .r-table, .r-spread, .r-card__media, .r-signup, .r-feature .o-cluster, .r-card__foot { display: none !important; }
  .r-print-only { display: block; }
  .o-section, .r-hero { padding-block: 6mm; background: none !important; }
  .r-hero .o-split, .r-feature__grid { display: block; }
  .r-feature__body { margin-block-start: 4mm; }
  .r-cards { grid-template-columns: 1fr; gap: 4mm; }
  .o-card { flex-direction: column; box-shadow: none; break-inside: avoid; }
}

/* ===================================================== confirm page
   resources/confirm.html: the double opt-in's confirm step. One card, one
   button, nothing else on the page. */
.r-confirm { min-height: calc(100svh - var(--o-header-h) - 120px); display: grid; align-items: center; }
.r-confirm__card {
  display: grid; justify-items: start; gap: var(--o-space-4);
  max-inline-size: 40rem; padding: var(--o-space-7); margin-inline: auto;
  border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  background: var(--o-surface); box-shadow: var(--o-shadow);
}
.r-confirm__card[hidden] { display: none; }
.r-confirm__card .o-section-head { margin: 0; }
.r-confirm__card h1:focus { outline: none; }
.r-confirm__card h1:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-space-1); border-radius: 4px; }
@media (max-width: 599.98px) { .r-confirm__card { padding: var(--o-space-5); } }