/* The family diagram (family-diagram.js): a tutor card, its children, their roads,
   joined by lines drawn on a sheet of paper. Ink lines, paper cards, the brand's
   own tokens from primer.css; nothing here names a colour of its own except the
   card paper, which is the one the desks' cards already use.

   Two layouts, chosen by the room the desk gives it and not by the window, so the
   same diagram works in a wide column and in a narrow one: "tree" (children side
   by side, roads under each) and "stack" (one column, every card hung off a line
   down its parent's left edge). The script sets data-layout and measures the lines
   after the cards are laid out.

   Reduced motion and the hidden attribute are primer.css's: its global rules turn every
   transition and animation off under prefers-reduced-motion and make [hidden] display
   none, and these parts rely on both rather than say them again. The walk checks both. */
.fd-host { display: block; }
.fd { --fd-card: #fffdf8; --fd-wire: color-mix(in srgb, var(--ink) 72%, var(--paper)); --fd-hatch: color-mix(in srgb, var(--ink) 28%, transparent); --fd-gutter: 30px;
  /* A stacking context of its own, so the hatching behind each card (z-index -1) falls behind the card and never behind the desk's own background. */
  isolation: isolate; position: relative; color: var(--ink); font: 15px/1.4 var(--sans); }
.fd *, .fd *::before, .fd *::after { box-sizing: border-box; }
.fd :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.fd-bar { display: flex; margin: 0 0 18px; }
.fd-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--fd-card); color: var(--ink); font: 600 15px/1.2 var(--sans); cursor: pointer; transition: background-color .15s ease; }
.fd-back::before { content: ""; width: 8px; height: 8px; margin-left: 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.fd-back:hover { background: var(--paper-2); }

.fd-stage { position: relative; display: grid; row-gap: 56px; padding: 4px 8px 10px 0; }
.fd-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.fd-wires path { fill: none; stroke: var(--fd-wire); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fd-wires circle { fill: var(--ink); }

/* A card: paper, an ink line cut a little unevenly, and the light hatching a pencil leaves where a shadow falls. No transform on it, because a transform would make it a stacking context and bring the hatching in front of its face. */
.fd-card { position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: 12px 14px 13px; border: 1.5px solid var(--ink); border-radius: 13px 10px 14px 9px / 10px 14px 9px 13px; background: var(--fd-card); color: var(--ink); text-align: left; font: inherit; -webkit-appearance: none; appearance: none; }
.fd-card::after { content: ""; position: absolute; inset: 6px -5px -5px 6px; z-index: -1; border-radius: inherit; background: repeating-linear-gradient(135deg, var(--fd-hatch) 0 1px, transparent 1px 5px); pointer-events: none; }
button.fd-card { cursor: pointer; transition: background-color .15s ease; }
button.fd-card:hover { background: var(--paper-2); }
.fd-eye { display: block; margin: 0 0 4px; font: 500 11px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.fd-tutor .fd-eye { color: var(--oxblood); }
.fd-name { display: block; font: 600 20px/1.2 var(--serif); font-variation-settings: "opsz" 24; overflow-wrap: anywhere; }
.fd-sub { display: block; margin-top: 2px; font: 13px/1.35 var(--sans); color: var(--ink-soft); }
.fd-note { color: var(--oxblood); }
.fd-tomorrow { color: var(--ink); overflow-wrap: anywhere; }
.fd-empty { border-style: dashed; background: transparent; color: var(--ink-soft); }
.fd-empty::after { display: none; }
.fd-empty .fd-name { color: var(--ink-soft); font-size: 17px; }
.fd-none { margin: 0; color: var(--ink-soft); }

.fd-top { display: flex; justify-content: center; }
.fd-tutor { width: min(100%, 300px); background: var(--paper-2); text-align: center; }
.fd-tutor.fd-empty { background: transparent; }
/* Opaque, because the hatching sits behind the card and would show through a translucent face. */
button.fd-tutor:hover { background: color-mix(in srgb, var(--paper-2) 94%, var(--ink)); }

.fd-kids { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; gap: 16px; }
.fd-kid { flex: 1 1 232px; max-width: 320px; min-width: 0; container-type: inline-size; }
.fd-child { background: color-mix(in srgb, var(--leaf) 16%, var(--fd-card)); }
button.fd-child:hover { background: color-mix(in srgb, var(--leaf) 26%, var(--fd-card)); }
.fd-child-box { padding: 0; }
.fd-child-open { display: block; width: 100%; min-height: 44px; padding: 12px 14px 13px; border: 0; border-radius: inherit; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.fd-child-open:hover { background: color-mix(in srgb, var(--leaf) 26%, var(--fd-card)); }

/* The roads hang off a line in the gutter on the child's left, each joined by a curve into its own card's side. */
.fd-roads { list-style: none; margin: 28px 0 0; padding: 0 0 0 var(--fd-gutter); display: grid; gap: 16px; }
.fd-noroad { margin: 28px 0 0 var(--fd-gutter); width: calc(100% - var(--fd-gutter)); color: var(--ink-soft); font: 14px/1.3 var(--sans); }
.fd-road { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px 8px 8px; }
.fd-road[aria-current="true"] { background: color-mix(in srgb, var(--lemon) 34%, var(--fd-card)); box-shadow: 0 0 0 2.5px var(--lemon); }
.fd-pic { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1.5px solid var(--ink); border-radius: 8px 6px 9px 6px; background: var(--paper-2); }
.fd-nopic { display: block; border-style: dashed; border-color: var(--line-strong); }
.fd-road-text { display: grid; gap: 2px; min-width: 0; }
.fd-daily { margin: 16px 0 0 var(--fd-gutter); width: calc(100% - var(--fd-gutter)); }
.fd-daily .fd-eye { letter-spacing: 0; }
.fd-own .fd-daily { grid-column: 3; margin: 0; width: 100%; }
.fd-road-name { font: 600 15px/1.25 var(--serif); font-variation-settings: "opsz" 18; overflow-wrap: anywhere; }
.fd-road-words { font: 500 13px/1.3 var(--sans); color: var(--ink-soft); }
/* The one mission next (2026-10-08: one next mission, not seven): a single line in the ink, with a leaf mark before it. */
.fd-road-next { position: relative; padding-left: 13px; font: 600 13px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.fd-road-next::before { content: ""; position: absolute; left: 1px; top: .42em; width: 6px; height: 6px; border: 1.4px solid var(--ink); border-radius: 1.5px; background: var(--leaf); transform: rotate(45deg); }
@container (min-width: 280px) { .fd-road { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; } }
/* The founder's press under a road card, drawn only when the desk hands the diagram onRemoveRoad: small and quiet, never a card. */
.fd-remove { display: inline-block; margin: 4px 0 0 10px; padding: 2px 0; border: 0; background: none; color: var(--ink-soft); font: 500 12.5px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fd-remove:hover, .fd-remove:focus-visible { color: var(--oxblood); }
/* Under the Daily maths card, which stands in from the child's column by the gutter like the road cards. */
.fd-daily + .fd-remove-daily { margin-left: calc(var(--fd-gutter) + 10px); }
/* "Ask for the next mission" under a road whose next mission is missing: the one action that road needs, so it reads as one. */
.fd-ask { display: inline-block; margin: 4px 0 0 10px; padding: 2px 0; border: 0; background: none; color: var(--ink); font: 600 12.5px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fd-ask:hover, .fd-ask:focus-visible { color: var(--oxblood); }
.fd-road-goal { display: block; margin-top: 2px; color: var(--ink); font: 600 12px/1.3 var(--sans); }
/* "+ Add a road" under a child's roads, drawn only when the desk hands the diagram onAddRoad and has a road to offer her (2026-10-08): a quiet press in the leaf's colour that opens the list of roads, each a full width press a finger can hit. */
.fd-add { margin: 12px 0 0 var(--fd-gutter); width: calc(100% - var(--fd-gutter)); }
.fd-add-open { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; border: 0; background: none; color: var(--ink-soft); font: 600 13.5px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fd-add-open:hover, .fd-add-open:focus-visible, .fd-add-open[aria-expanded="true"] { color: var(--leaf-ink, var(--ink)); }
.fd-journal { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 6px 6px; padding: 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.fd-journal:hover { background: var(--fd-card); }
.fd-journal img { width: 20px; height: 20px; }
.fd-self .fd-journal { margin: 8px 0 -7px -8px; }
/* Start fresh under a child's roads (2026-10-08): quiet like Remove this road, oxblood on a hover, as tall as a finger. */
.fd-fresh { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; border: 0; background: none; color: var(--ink-soft); font: 600 13.5px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fd-fresh:hover, .fd-fresh:focus-visible { color: var(--oxblood); }
.fd-add-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.fd-add-road { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px dashed var(--line-strong, var(--ink)); border-radius: 8px; background: var(--fd-card); color: var(--ink); text-align: left; font: 600 14px/1.25 var(--sans); overflow-wrap: anywhere; cursor: pointer; }
.fd-add-road:hover, .fd-add-road:focus-visible { border-style: solid; border-color: var(--ink); background: color-mix(in srgb, var(--leaf) 16%, var(--fd-card)); }

/* One child in the centre, her book on the left and her current mission on the right. */
.fd-own { grid-template-columns: minmax(0, 1fr) minmax(190px, 250px) minmax(0, 1fr); grid-template-areas: "book self mission"; column-gap: 72px; align-items: center; padding-block: 14px 18px; }
.fd-self { grid-area: self; background: color-mix(in srgb, var(--leaf) 16%, var(--fd-card)); text-align: center; }
.fd-book { grid-area: book; display: grid; gap: 4px; justify-items: start; padding: 14px 16px; }
.fd-mission { grid-area: mission; display: grid; gap: 4px; padding: 10px 10px 12px; }
.fd-mission .fd-eye { margin-top: 6px; }
.fd-pic-wide { width: 100%; }
.fd-book-art { width: 46px; height: 46px; margin-bottom: 4px; }
.fd-book-art .cover { fill: color-mix(in srgb, var(--oxblood) 82%, var(--paper)); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fd-book-art .spine { fill: none; stroke: var(--ink); stroke-width: 2; }
.fd-book-art .lines { fill: none; stroke: var(--paper); stroke-width: 1.8; stroke-linecap: round; }
.fd-link { display: block; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font: 600 18px/1.25 var(--serif); font-variation-settings: "opsz" 20; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; }
.fd-link:hover { color: var(--oxblood); }
.fd-btn { min-height: 44px; margin-top: 8px; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 8px; background: transparent; color: var(--ink); font: 600 14px/1.2 var(--sans); cursor: pointer; transition: background-color .15s ease; }
.fd-btn:hover { background: var(--paper-2); }

/* Stacked: one column, each card hung off a line down its parent's left edge. */
.fd[data-layout="stack"] .fd-top { justify-content: flex-start; }
.fd[data-layout="stack"] .fd-tutor { width: min(100%, 460px); text-align: left; }
.fd[data-layout="stack"] .fd-kids { display: grid; gap: 36px; justify-content: stretch; padding-left: var(--fd-gutter); }
.fd[data-layout="stack"] .fd-kid { max-width: 460px; }
.fd[data-layout="stack"] .fd-own { grid-template-columns: minmax(0, 1fr); grid-template-areas: "self" "book" "mission"; row-gap: 40px; }
.fd[data-layout="stack"] .fd-self { width: min(100%, 460px); text-align: left; }
.fd[data-layout="stack"] .fd-book, .fd[data-layout="stack"] .fd-mission { width: min(calc(100% - var(--fd-gutter)), 430px); margin-left: var(--fd-gutter); }
.fd[data-layout="stack"] .fd-own .fd-daily { grid-column: 1; width: min(calc(100% - var(--fd-gutter)), 430px); margin-left: var(--fd-gutter); }
/* The generation stage of the road's next mission, from its ticket (the founder's desk): one quiet line under Now, Next or Finished. */
.fd-road-stage { padding-left: 13px; font: 500 12px/1.3 var(--sans); color: var(--ink-soft, var(--muted, #55625b)); overflow-wrap: anywhere; }