/* Orli v3 site · inclusion · the printable one-page
   ---------------------------------------------------------------------------
   One A4 sheet. On a wide screen it shows at print size (210 mm) on the
   canvas, with its own type in points so what you see is what prints. Below
   860 px it reflows as a plain page in the system's type. In print it is the
   sheet alone, no margins from the browser (@page margin 0, the sheet pads
   itself), one page.
   Tokens only, except the print sizes (pt and mm), which have no tokens. */

.op { background: var(--o-canvas); }

/* ------------------------------------------------------------- the bar */
.op-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--o-space-3) var(--o-space-5);
  width: min(100% - 2 * var(--o-gutter), 210mm); margin: 0 auto;
  padding-block: var(--o-space-5);
}
.op-bar__back {
  display: inline-flex; align-items: center; min-height: var(--o-target);
  font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui);
}

/* ----------------------------------------------------------- the sheet */
.sheet {
  --sheet-line: var(--o-n2);
  position: relative;
  width: min(100% - 2 * var(--o-gutter), 210mm); margin: 0 auto var(--o-space-8);
  padding: var(--o-space-6) var(--o-space-5);
  background: var(--o-surface); color: var(--o-ink);
  border: 1px solid var(--o-line); border-radius: var(--o-r-control);
  box-shadow: var(--o-shadow-raised);
}
.sheet:focus { outline: none; }
.sheet b { font-weight: var(--o-weight-strong); }

/* Head: logo and kicker, the title, one lead; Orla on her soft shadow. */
.sheet__head { position: relative; display: grid; gap: var(--o-space-3); }
.sheet__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-space-2); padding-inline-end: 80px; }
.sheet__title { padding-inline-end: 80px; }
.sheet__logo { width: 72px; height: auto; }
.sheet__kicker {
  font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--o-ink-2);
}
.sheet__title {
  font: var(--o-weight-title) var(--o-text-title) / var(--o-lh-title) var(--o-font-ui);
  letter-spacing: var(--o-track-title); text-wrap: balance;
}
.sheet__lead { font-size: var(--o-text-lead); line-height: var(--o-lh-lead); max-inline-size: 36em; text-wrap: pretty; }
.sheet__orla { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 64px; margin: 0; }
.sheet__orla img { position: relative; width: 100%; height: auto; }
.sheet__orla::before {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 57 50 / .22), rgb(60 57 50 / 0));
}

/* Blocks: a hairline and a heading, one job each. */
.sheet__block { margin-block-start: var(--o-space-5); padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--sheet-line); }
.sheet__h2 {
  margin-block-end: var(--o-space-3);
  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;
}
.sheet__p { max-inline-size: 68ch; text-wrap: pretty; }
.sheet__p + * { margin-block-start: var(--o-space-3); }
.sheet__p--cost { margin-block-start: var(--o-space-3); }
.sheet__p--not { margin-block-start: var(--o-space-3); color: var(--o-ink-2); }

.needs { display: grid; gap: var(--o-space-3) var(--o-space-5); margin: 0; }
.needs > div, .tpl__rows > div { display: grid; gap: 2px; align-content: start; }
.needs dt, .tpl__rows dt { font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--o-ink); }
.needs dd, .tpl__rows dd { margin: 0; text-wrap: pretty; }

/* Lists with doodle marks: ticks for where Orli fits and what it is,
   crosses for what it isn't. */
.fits, .is__list { display: grid; gap: var(--o-space-2); margin: 0; padding: 0; list-style: none; }
:is(.fits, .is__list) li { position: relative; padding-inline-start: 26px; text-wrap: pretty; }
:is(.fits, .is__list) li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.fits li::before, .is__list--yes li::before { --m: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg"); color: var(--o-action); }
.is__list--no li::before { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--close.svg"); color: var(--o-ink-2); scale: .8; }

/* The template: two columns on paper, each a hairline box. */
.tpl { display: grid; gap: var(--o-space-4); }
.tpl__col { padding: var(--o-space-4); border: 1px solid var(--sheet-line); border-radius: var(--o-r-control); }
.tpl__h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--o-space-2);
  margin-block-end: var(--o-space-3);
  font: var(--o-weight-title) var(--o-text-body) / 1.25 var(--o-font-ui);
}
.tpl__h span { font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); color: var(--o-ink-2); }
.tpl__rows { display: grid; gap: var(--o-space-3); margin: 0; }

.is { display: grid; gap: var(--o-space-3) var(--o-space-5); }

.sheet__foot {
  display: grid; gap: var(--o-space-2);
  margin-block-start: var(--o-space-5); padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--sheet-line);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2);
}
.sheet__contact b { color: var(--o-ink); }

@media (min-width: 600px) {
  .needs, .tpl, .is { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet { padding: var(--o-space-7) var(--o-space-6); }
  .sheet__orla { width: 88px; }
  .sheet__brand, .sheet__title { padding-inline-end: 104px; }
}

/* ------------------------------------------------ the sheet at print size
   From 860 px wide, and in print, the sheet is the A4 page itself, in points
   and millimetres, so the screen shows what the printer will. */
@media print, (min-width: 860px) {
  .sheet { padding: 11mm 14mm 9mm; min-height: 297mm; font-size: 9.1pt; line-height: 1.4; }
  .sheet__p { max-inline-size: none; }
  .sheet__head { gap: 2.6mm; padding-inline-end: 32mm; }
  .sheet__brand { flex-direction: row; align-items: center; gap: 4mm; padding-inline-end: 0; }
  .sheet__title { padding-inline-end: 0; }
  .sheet__kicker { padding-inline-start: 4mm; border-inline-start: 1px solid var(--sheet-line); }
  .sheet__logo { width: 20mm; }
  .sheet__kicker { font-size: 8.4pt; }
  .sheet__title { font-size: 22pt; line-height: 1.08; }
  .sheet__lead { font-size: 10.2pt; line-height: 1.42; max-inline-size: none; }
  .sheet__orla { width: 25mm; inset-block-start: 1mm; }
  .sheet__block { margin-block-start: 3.6mm; padding-block-start: 3.2mm; }
  .sheet__h2 { font-size: 11.4pt; margin-block-end: 2mm; }
  .needs, .tpl, .is { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .needs { gap: 2.2mm 7mm; }
  .needs dt, .tpl__rows dt { font-size: 8.4pt; }
  .fits, .is__list { gap: 1.4mm; }
  :is(.fits, .is__list) li { padding-inline-start: 6mm; }
  :is(.fits, .is__list) li::before { width: 4mm; height: 4mm; top: .15em; }
  .tpl { gap: 4mm; }
  .tpl__col { padding: 3.2mm 3.6mm; }
  .tpl__h { font-size: 10pt; margin-block-end: 2mm; }
  .tpl__h span { font-size: 8.2pt; }
  .tpl__rows { gap: 2mm; }
  .sheet__p + * { margin-block-start: 2.4mm; }
  .sheet__p--cost, .sheet__p--not { margin-block-start: 2.6mm; }
  .is { gap: 2mm 7mm; }
  .sheet__foot { margin-block-start: 4mm; padding-block-start: 3mm; font-size: 7.6pt; line-height: 1.4; gap: 1mm; }
}

/* ---------------------------------------------------------------- print */
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  .op-bar, .o-skip { display: none !important; }
  .sheet {
    width: 210mm; height: 297mm; min-height: 0; margin: 0; overflow: hidden;
    border: 0; border-radius: 0; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .sheet__block { break-inside: avoid; }
}

@media (forced-colors: active) {
  :is(.fits, .is__list) li::before { background: CanvasText; }
  .sheet__orla::before { display: none; }
}