/* The family page, over site.css: the profiles as a family sees them, what a parent decides and is told,
   the child's side, how they learn and its measurement, and the tiles. Logical properties only; classes start with fam-. */

.site {
  --fam-control: var(--control, oklch(from var(--ink) l c h / 0.08));
  --fam-raise: var(--raise, 0 0 0 1px var(--line-strong));
  --fam-wait: var(--wait, var(--room-2));
  --fam-wait-line: var(--wait-line, var(--line-strong));
  --fam-menu: 0.75rem;
}

/* The promise, and the profiles as a family sees them */
.fam-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.fam-hero .site-hero-text { max-inline-size: none; }
.fam-pane { min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); box-shadow: var(--site-float); overflow: hidden; }
.fam-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.1rem; border-block-end: 1px solid var(--line); background: var(--site-side); font-size: 0.875rem; font-weight: 600; }
.fam-lock { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--room-2); color: var(--ink-soft); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.fam-lock .icon { inline-size: 0.85rem; block-size: 0.85rem; }
.fam-people li { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.1rem; border-block-end: 1px solid var(--line); }
.fam-people li:last-child { border-block-end: 0; }
.fam-face { display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; flex: none; border-radius: 50%; background: var(--room-2); font-style: normal; font-weight: 600; font-size: 0.9rem; }
.fam-people span { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.35; }
.fam-people small { color: var(--ink-soft); font-size: 0.8125rem; }
.fam-people li > .icon { color: var(--ink-faint); }
.fam-people .is-add { color: var(--ink-soft); font-size: 0.9rem; }
.fam-people .is-add .fam-face { background: transparent; border: 1px dashed var(--line-strong); }

/* They use it already */
.fam-versus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.fam-versus div { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem; border-radius: var(--fam-menu); }
.fam-versus div:first-child { background: var(--room-2); color: var(--ink-soft); }
.fam-versus div:last-child { border: 1.5px solid var(--site-fill); }
.fam-versus dt { color: var(--ink); font-size: 0.875rem; font-weight: 600; }

/* What a parent decides */
.fam-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.1rem; border-block-end: 1px solid var(--line); font-size: 0.9rem; }
.fam-row > span:last-child { color: var(--ink-soft); text-align: end; }
.fam-row.is-change { border-block-end: 0; color: var(--flame); }
.fam-row-head { padding: 0.9rem 1.1rem 0.25rem; color: var(--ink-soft); font-size: 0.75rem; font-weight: 600; }
.fam-topic { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 1.1rem 0.75rem; border-block-end: 1px solid var(--line); font-size: 0.9rem; }
.fam-choices { display: flex; gap: 0.25rem; padding: 0.2rem; border-radius: 999px; background: var(--room-2); }
.fam-choices span { flex: 1; padding: 0.3rem 0.5rem; border-radius: 999px; color: var(--ink-soft); font-size: 0.78rem; text-align: center; }
.fam-choices .is-on { background: var(--site-fill); color: var(--site-on-fill); }
.fam-more { padding: 0.6rem 1.1rem; border-block-end: 1px solid var(--line); color: var(--ink-soft); font-size: 0.8125rem; }

/* Told, without reading */
.fam-stack { display: flex; flex-direction: column; gap: 1.25rem; min-inline-size: 0; } .fam-stack .site-source { color: var(--ink-soft); }
.fam-notice { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem; border: 1px solid var(--fam-wait-line); border-radius: 1.125rem; background: var(--fam-wait); }
.fam-notice > p:first-child { display: flex; gap: 0.5rem; font-weight: 600; }
.fam-notice .icon { color: var(--flame-deep, var(--flame)); }
.fam-hint { color: var(--ink-soft); font-size: 0.875rem; }
.fam-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fam-time { padding: 1.1rem 1.2rem; }
.fam-time-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-size: 0.9rem; }
.fam-time-head span { color: var(--ink-soft); }
.fam-bars { display: block; inline-size: 100%; block-size: 5.5rem; margin-block-start: 0.9rem; }
.fam-bars rect { fill: oklch(from var(--ink) l c h / 0.16); }
.fam-bars rect.is-today { fill: var(--flame); }
.fam-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-block-start: 0.35rem; color: var(--ink-faint); font-size: 0.75rem; text-align: center; }
.fam-days .is-today { color: var(--ink); font-weight: 600; }

/* The child's side */
.fam-child { display: flex; flex-direction: column; gap: 0.9rem; padding-block-end: 0.8rem; }
.fam-child-top { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-block-end: 1px solid var(--line); }
.fam-child-top .fam-face { inline-size: 1.8rem; block-size: 1.8rem; font-size: 0.8rem; }
.fam-child-top .fam-lock { margin-inline-start: auto; }
.fam-asked { align-self: flex-end; max-inline-size: 75%; margin-inline: 1.2rem; padding: 0.45rem 0.9rem; border-radius: 1.125rem; background: var(--room-2); }
.fam-answer { margin-inline: 1.2rem; }
.fam-shared { display: flex; flex-direction: column; gap: 0.5rem; margin-inline: 1.2rem; padding: 0.8rem 0.9rem; border: 1px solid var(--fam-wait-line); border-radius: 1.125rem; background: var(--fam-wait); font-size: 0.85rem; }
.fam-shared .button { align-self: flex-start; font-size: 0.8125rem; }
.fam-box { display: flex; align-items: center; gap: 0.75rem; margin-inline: 1rem; padding: 0.7rem 0.6rem 0.7rem 1rem; border: 1px solid var(--line); border-radius: 1.375rem; box-shadow: var(--site-float); color: var(--ink-faint); }
.fam-box { flex-wrap: wrap; }
.fam-box > span:first-child { flex: 1 1 10rem; min-inline-size: 0; }
.fam-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--fam-control); box-shadow: var(--fam-raise); color: var(--ink); font-size: 0.8125rem; white-space: nowrap; }
.fam-chip .icon { inline-size: 1rem; block-size: 1rem; color: var(--flame); }
.fam-ai { text-align: center; color: var(--ink-faint); font-size: 0.75rem; }

/* How a child learns: three steps, help one rung at a time, and the measurement that holds it */
.fam-measure { padding-block-start: 0.9rem; border-block-start: 1px solid var(--line); color: var(--ink-soft); font-size: 0.875rem; max-inline-size: 36rem; }
.fam-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; counter-reset: step; }
.fam-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 0.55rem; }
.fam-steps li::before { content: counter(step) / ''; display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; background: var(--site-fill); color: var(--site-on-fill); font: 700 1.1rem/1 var(--display); }
.fam-steps p, .fam-ladder span { color: var(--ink-soft); }
.fam-steps h3, .fam-learn-head h3 { font: 700 1.4rem/1.2 var(--display); }
.fam-learn-head { display: flex; flex-direction: column; gap: 0.75rem; max-inline-size: 46rem; }
.fam-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; align-items: end; }
.fam-ladder li { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--fam-menu); background: var(--room); font-size: 0.9rem; }
.fam-ladder li:nth-child(1) { min-block-size: 7rem; }
.fam-ladder li:nth-child(2) { min-block-size: 8.25rem; }
.fam-ladder li:nth-child(3) { min-block-size: 9.5rem; }
.fam-ladder li:nth-child(4) { min-block-size: 10.75rem; border-style: dashed; background: transparent; }
.fam-ladder b { font-weight: 600; }
.fam-quote { margin: 0; color: var(--ink-soft); font: 700 1.2rem/1.4 var(--display); }
.fam-body { font-size: 1.05rem; }
.fam-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--site-pane); overflow: hidden; background: var(--room); font-size: 0.9rem; }
.fam-table :is(th, td) { padding: 0.75rem 1rem; border-block-start: 1px solid var(--line); text-align: start; vertical-align: baseline; }
.fam-table thead th { border-block-start: 0; background: var(--site-side); color: var(--ink-soft); font-size: 0.8125rem; font-weight: 600; }
.fam-table td { text-align: end; font-variant-numeric: tabular-nums; }
.fam-table tbody th { font-weight: 500; }
.fam-table small { display: block; color: var(--ink-soft); font-size: 0.8125rem; font-weight: 400; }

/* At home, not with us */
.fam-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.fam-where > div { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); }
.fam-where .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--flame); }
.fam-where p { color: var(--ink-soft); }
.fam-where > .is-never { background: transparent; border-style: dashed; }

/* For the whole family */
.fam-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fam-tiles li { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); }
.fam-tiles .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--flame); }
.fam-tiles p { font-weight: 500; line-height: 1.45; }
.fam-tiles .button { align-self: flex-start; margin-block-start: auto; font-size: 0.8125rem; }

/* Three steps, and the button */
.fam-start ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; counter-reset: step; }
.fam-start ol li { counter-increment: step; display: flex; align-items: baseline; gap: 0.5rem; color: var(--ink-soft); }
.fam-start ol li::before { content: counter(step); display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; flex: none; border-radius: 50%; background: var(--room-2); color: var(--ink); font-weight: 600; font-size: 0.85rem; }

/* The felt-tip pen's arrows: from what most homework apps do to what families want, and to the last button. */
.fam-versus div:last-child, .fam-go { position: relative; }
.fam-versus .felt-arc { position: absolute; inset-inline-end: calc(100% - 1.75rem); inset-block-start: -2.75rem; inline-size: 6.5rem; block-size: 3.75rem; }
.fam-go .felt-point { position: absolute; inset-inline-end: calc(100% + 0.75rem); inset-block-start: -1.5rem; inline-size: 5rem; block-size: 3.3rem; }

/* A child's drawing in wax crayon: around the profiles, the sun in the corner and the family on the grass,
   their kite's tail the tilde; on the fridge, the unicorn of Léa's invitation. A child's colours, lighter by night. */
.site {
  --crayon-sun: #f7c531;
  --crayon-ochre: #f2b705;
  --crayon-blue: #8fb0f0;
  --crayon-pink: #f08ab0;
  --crayon-green: #74d39a;
  --crayon-violet: #b79be8;
  --fam-paper: var(--room-2);
  --fam-sheet: 0 1px 1px oklch(0 0 0 / 0.3), 0 0.75rem 1.75rem -0.5rem oklch(0 0 0 / 0.6);
  --fam-tape: oklch(0.55 0.02 85 / 0.55);
  --fam-handle: oklch(0.27 0 0), oklch(0.34 0 0) 45%, oklch(0.24 0 0);
}
[data-theme='light'] .site {
  --crayon-ochre: #e8a70c;
  --crayon-blue: #2f5fb3;
  --crayon-pink: #d6457a;
  --crayon-green: #2f9e5b;
  --crayon-violet: #7b4bb3;
  --fam-paper: var(--room);
  --fam-sheet: 0 1px 1px oklch(0 0 0 / 0.06), 0 0.625rem 1.5rem -0.5rem oklch(0 0 0 / 0.22);
  --fam-tape: oklch(0.86 0.02 85 / 0.62);
  --fam-handle: oklch(0.93 0.003 90), oklch(0.98 0.002 90) 45%, oklch(0.9 0.004 90);
}
.fam-crayon { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.fam-crayon .is-sun { fill: var(--crayon-sun); }
.fam-crayon .is-ochre { stroke: var(--crayon-ochre); }
.fam-crayon .is-blue { stroke: var(--crayon-blue); }
.fam-crayon .is-pink { stroke: var(--crayon-pink); }
.fam-crayon .is-green { stroke: var(--crayon-green); }
.fam-crayon .is-violet { stroke: var(--crayon-violet); }
.fam-crayon .is-ink { stroke: var(--ink); }
.fam-crayon .is-eye { fill: var(--ink); }
.fam-crayon .is-kite { stroke: var(--crayon-pink); fill: oklch(from var(--crayon-pink) l c h / 0.55); }
.fam-crayon .is-horn { stroke: var(--crayon-sun); fill: oklch(from var(--crayon-sun) l c h / 0.35); }
.fam-hero { position: relative; overflow: clip; }
.fam-hero > :not(.fam-crayon) { position: relative; z-index: 1; }
.fam-sun, .fam-kids { position: absolute; display: none; }
.fam-sun { inset-block-start: 0; inset-inline-start: 0; inline-size: 9rem; block-size: 9rem; }
.fam-kids { inset-block-end: 0; inset-inline-end: 0; block-size: 100%; aspect-ratio: 760 / 800; }
:dir(rtl) :is(.fam-sun, .fam-kids) { scale: -1 1; }
@media (min-width: 64rem) {
  .fam-hero { padding-block-end: 8rem; }
  .fam-kids { display: block; }
}
@media (min-width: 88rem) {
  .fam-sun { display: block; }
}

/* For the whole family, on the fridge door: each idea a note held by tape or a magnet, Jean's magnet its
   tilde on sunflower, the drawing pinned beside the title and the door's handle at the window's edge. */
.fam-fridge { position: relative; }
.fam-fridge-head { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 2.5rem; align-items: start; }
.fam-fridge-head > header { display: flex; flex-direction: column; gap: 0.75rem; max-inline-size: 46rem; }
.fam-pinned { position: relative; padding: 0.5rem; background: var(--fam-paper); box-shadow: var(--fam-sheet); rotate: 4deg; }
.fam-unicorn { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 300 / 280; }
.fam-fridge .fam-tiles { gap: 1.75rem; padding-block-start: 0.75rem; }
.fam-fridge .fam-tiles li { position: relative; border: 0; border-radius: 0.25rem; background: var(--fam-paper); box-shadow: var(--fam-sheet); padding-block-start: 1.5rem; }
.fam-fridge .fam-tiles li:nth-child(4n + 1) { rotate: -2deg; }
.fam-fridge .fam-tiles li:nth-child(4n + 2) { rotate: 1.5deg; margin-block-start: 0.875rem; }
.fam-fridge .fam-tiles li:nth-child(4n + 3) { rotate: -1deg; }
.fam-fridge .fam-tiles li:nth-child(4n + 4) { rotate: 2.5deg; margin-block-start: 0.5rem; }
.fam-tape { position: absolute; inset-block-start: -0.875rem; inset-inline-start: calc(50% - 3rem); inline-size: 6rem; block-size: 1.75rem; background: var(--fam-tape);
  clip-path: polygon(2% 8%, 10% 0, 22% 10%, 34% 2%, 48% 9%, 62% 0, 76% 8%, 90% 1%, 100% 10%, 98% 92%, 88% 100%, 74% 91%, 60% 100%, 46% 92%, 32% 100%, 18% 92%, 6% 100%, 0 90%); }
.fam-tiles li:nth-child(4n + 3) .fam-tape { rotate: -6deg; }
.fam-magnet { position: absolute; inset-block-start: -1.375rem; inset-inline-start: calc(50% - 1.375rem); inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: #2f5fb3;
  box-shadow: 0 2px 0 oklch(0 0 0 / 0.12), 0 0.5rem 0.875rem -0.25rem oklch(0 0 0 / 0.35), inset 0 -3px 0 oklch(0 0 0 / 0.08); }
.fam-magnet.is-jean { background: #f7c531; }
.fam-magnet svg { display: block; inline-size: 100%; block-size: 100%; fill: none; stroke: #141414; stroke-width: 6; stroke-linecap: round; }
.fam-handle { position: absolute; inset-inline-end: 1.375rem; inset-block-start: 7rem; inline-size: 1.25rem; block-size: 55%; border-radius: 1rem; background: linear-gradient(90deg, var(--fam-handle)); box-shadow: -0.375rem 0.625rem 1.125rem -0.5rem oklch(0 0 0 / 0.25); }

/* A phone, or any narrow window: one column */
@media (max-width: 52rem) {
  .fam-hero, .fam-versus, .fam-where, .fam-fridge-head, .fam-steps { grid-template-columns: minmax(0, 1fr); }
  .fam-tiles, .fam-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fam-pinned, .fam-handle, .fam-versus .felt-arc { display: none; }
}
@media (forced-colors: active) {
  .fam-crayon, .fam-tape, .fam-magnet, .fam-handle { display: none; }
}
@media (max-width: 30rem) {
  .fam-choices span { font-size: 0.72rem; padding-inline: 0.3rem; }
  .fam-start ol { flex-direction: column; align-items: flex-start; text-align: start; }
}