/* My Child Growth Journey - page layouts and the small pieces pages share.
   Colours come from /theme.css and from the data itself (framework.yaml); nothing here is specific to one family or school. */

.page-in { animation: page-in 0.28s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-in > * + * { margin-top: 1.1rem; }
.page-in > .page-head { margin-bottom: 1.4rem; }
.muted { color: var(--ink-soft); }
.notice.ok { background: #e3f6e3; border-left-color: var(--good); }
.check-line { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 700; margin: 0 0 1rem; }
.check-line input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; accent-color: var(--primary); }
.spin { display: inline-block; width: 1rem; height: 1rem; border: 3px solid var(--line-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.9s linear infinite; vertical-align: -0.15rem; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lane-flash { 0% { box-shadow: 0 0 0 0 var(--sun); } 30% { box-shadow: 0 0 0 8px var(--sun); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ------------------------------------------------------------------ small shared pieces */
.tag {
  --tag: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.76rem; font-weight: 800;
  background: color-mix(in srgb, var(--tag) 12%, #fff); color: var(--ink); border: 1.5px solid var(--tag); line-height: 1.5; white-space: nowrap;
}
.tag i { font-style: normal; font-size: 0.8em; }
.etype { --tag: var(--ink-soft); font-weight: 800; color: var(--ink); white-space: nowrap; }
.etype::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--tag); margin-right: 0.3rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.chips:empty { display: none; }
.chip[aria-pressed="false"] { background: var(--surface); border: 1px dashed var(--line-strong); color: var(--ink-soft); }
.chip[aria-pressed="false"] .dot { opacity: 0.5; }
.chip { white-space: normal; }
.stats { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.4rem; padding: 0.5rem 0.8rem; border-radius: var(--radius-small); background: var(--bg); border: 2px solid transparent; font-weight: 700; color: var(--ink); }
.stat.clickable:hover { border-color: var(--sun); background: var(--sun-soft); }
.stat .n { font: 800 var(--step-3)/1 var(--font-heading); }
.stat .l { margin-top: 0.15rem; font-size: 0.8rem; color: var(--ink-soft); text-align: center; }
.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-top: 0.6rem; }
.card-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.card-link:hover { text-decoration-color: var(--primary); color: var(--primary-deep); }
.jmeta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: center; margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--ink-soft); font-weight: 700; }
.from-file { font-size: 0.8rem; color: var(--ink-soft); margin: 0.4rem 0 0; overflow-wrap: anywhere; }
.tip-line { margin: 0.3rem 0 0; font-size: 0.88rem; color: var(--ink); }
.section-head h3 { font-size: var(--step-2); }
.section-head .sub { margin: 0.2rem 0 0; }
.tab-panel > * + *, .sections > * + *, .find-tab > * + * { margin-top: 1.1rem; }
.page-head + .tabs { margin-top: -0.4rem; }
.up-hints { margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius-small); padding: 0.55rem 0.9rem; background: var(--surface-soft); }
.up-hints summary { cursor: pointer; font-weight: 800; }
.up-hints[open] summary { margin-bottom: 0.4rem; }
.up-hints .field { margin-bottom: 0.4rem; }

/* ------------------------------------------------------------------ Journey: who they are today */
.j-banner { --c: var(--primary); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.6rem; align-items: center; border-top: 6px solid var(--sun); }
.j-photo { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.photo-btn { font-size: 0.82rem; }
.j-id h2 { font-size: var(--step-4); line-height: 1.05; }
.j-id .chips { margin: 0.5rem 0 0.2rem; }
.j-lead { margin: 0.5rem 0 0.2rem; font-size: var(--step-1); color: var(--ink); max-width: 52ch; }
.j-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
.j-banner .stats { grid-column: 1 / -1; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.j-banner .stat { flex: 1 1 5.4rem; max-width: 9rem; }

/* the school years, Playgroup to Std 10 */
.stage-path-wrap { overflow-x: auto; padding: 0.3rem 0 0.5rem; }
.stage-path { display: flex; gap: 0.6rem; min-width: 58rem; }
.band { --c: var(--ink-soft); min-width: 0; border-top: 5px solid var(--c); border-radius: 4px 4px var(--radius-small) var(--radius-small); background: color-mix(in srgb, var(--c) 7%, var(--surface)); padding: 0.45rem 0.35rem 0.5rem; }
.band h4 { font: 800 0.78rem var(--font-body); color: var(--ink-soft); margin: 0 0 0.2rem 0.4rem; }
.band ol { list-style: none; margin: 0; padding: 0; display: flex; }
.stage-step { --step: var(--ink-soft); position: relative; flex: 1 1 0; min-width: 3.5rem; text-align: center; }
.stage-step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 1.8rem; left: calc(50% + 1.45rem); width: calc(100% - 2.9rem); height: 3px; background: var(--step); border-radius: 2px; }
.stage-step.next:not(:last-child)::after, .stage-step.later:not(:last-child)::after { background: repeating-linear-gradient(90deg, var(--step) 0 5px, transparent 5px 10px); }
.stage-hit { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.12rem; border: 0; background: none; padding: 0.4rem 0.1rem 0.3rem; border-radius: 12px; color: var(--ink); }
.stage-hit:hover { background: color-mix(in srgb, var(--step) 14%, #fff); }
.stage-step .node { position: relative; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; font-size: 1.35rem; border-radius: 50%; border: 3px solid var(--step); background: color-mix(in srgb, var(--step) 22%, #fff); }
.stage-step .badge { position: absolute; top: -0.35rem; right: -0.55rem; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--ink); color: #fff; font: 800 0.7rem/1.3rem var(--font-body); text-align: center; border: 2px solid var(--surface); }
.stage-step .name { font-weight: 800; font-size: 0.82rem; line-height: 1.15; }
.stage-step small { color: var(--ink-soft); font-size: 0.7rem; line-height: 1.1; }
.stage-step .state { margin-top: 0.1rem; font-size: 0.68rem; font-weight: 800; color: var(--ink-soft); }
.stage-step.current .node { background: var(--step); box-shadow: 0 0 0 4px var(--sun); }
.stage-step.current .state { background: var(--ink); color: #fff; padding: 0 0.55rem; border-radius: 999px; }
.stage-step.next .node, .stage-step.later .node { background: var(--surface); border-style: dashed; }
.stage-step.later { opacity: 0.8; }
.stage-step.done .state::before { content: "✓ "; }

/* the roadmap */
.road-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); margin-top: 0.8rem; }
.road-card { --rc: var(--primary); background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--rc); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; }
.road-card[data-step="now"] { --rc: var(--sun); }
.road-card[data-step="celebrate"] { --rc: var(--good); }
.road-card[data-step="work_on"] { --rc: var(--primary); }
.road-card[data-step="ahead"] { --rc: #6250d6; }
.road-card h4 { font-size: var(--step-1); }
.road-card .sub { margin: 0.15rem 0 0.6rem; }
.road-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ri { display: flex; gap: 0.65rem; align-items: flex-start; }
.ri-hit { display: flex; gap: 0.65rem; align-items: flex-start; width: 100%; padding: 0; border: 0; background: none; text-align: left; border-radius: 8px; }
.ri-hit:hover strong { text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 3px; }
.ri .ic { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg); font-size: 1.05rem; }
.ri strong { display: block; font-size: 0.95rem; line-height: 1.3; }
.ri small { color: var(--ink-soft); font-size: 0.78rem; }
.ri div { min-width: 0; overflow-wrap: anywhere; }

/* skills gained and things to work on */
.lvl-lists { margin-top: 1rem; display: grid; gap: 0.4rem; }
.lvl-list { border: 1px solid var(--line); border-radius: var(--radius-small); padding: 0.5rem 0.8rem; background: var(--surface-soft); }
.lvl-list summary { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; list-style: none; }
.lvl-list summary::-webkit-details-marker { display: none; }
.lvl-list summary::before { content: "▸"; color: var(--ink-soft); }
.lvl-list[open] summary::before { content: "▾"; }
.lvl-list .key { width: 0.8rem; height: 0.8rem; border-radius: 3px; flex: none; }
.skill-list { list-style: none; margin: 0.5rem 0 0.2rem; padding: 0; display: grid; gap: 0.3rem; }
.skill-list li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: baseline; font-size: 0.92rem; }
.skill-list small { display: block; color: var(--ink-soft); }
.skill-list .when { display: inline; color: var(--ink-soft); white-space: nowrap; }
.imp-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.imp { background: var(--surface-soft); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 6px var(--radius-small) var(--radius-small) 6px; padding: 0.7rem 0.95rem; }
.imp.done { opacity: 0.72; }
.imp h4 { font: 800 1rem/1.3 var(--font-body); }
.imp .segmented { margin-top: 0.6rem; flex-wrap: wrap; }
.segmented.small button { padding: 0.15rem 0.65rem; font-size: 0.78rem; }

/* the winding trail of key events */
.trail-panel .filter-chips { margin: 0.4rem 0 0.8rem; }
.trail-stage { --c: var(--ink-soft); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 6px var(--radius-small) var(--radius-small) 6px; padding: 0.55rem 0.9rem; margin-bottom: 0.6rem; background: var(--surface); }
.trail-stage > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.trail-stage > summary::-webkit-details-marker { display: none; }
.trail-stage > summary::before { content: "▸"; color: var(--ink-soft); }
.trail-stage[open] > summary::before { content: "▾"; }
.ts-icon { font-size: 1.3rem; }
.jtrail { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.jrow { display: grid; grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1fr); }
.jrow .jroad { grid-column: 2; grid-row: 1; }
.jrow.left .jcard { grid-column: 1; grid-row: 1; }
.jrow.right .jcard { grid-column: 3; grid-row: 1; }
.jroad { position: relative; min-height: 5.4rem; }
.jroad svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; max-width: none; }
.jroad path { fill: none; vector-effect: non-scaling-stroke; }
.jroad .base { stroke: var(--bg-deep); stroke-width: 16; }
.jroad .line { stroke: var(--viz-accent, var(--primary)); stroke-width: 4; stroke-linecap: round; }
.jnode { position: absolute; left: var(--nx, 50%); top: 50%; transform: translate(-50%, -50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; background: color-mix(in srgb, var(--c) 30%, #fff); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--c); }
.jcard { --c: var(--ink-soft); align-self: center; margin: 0.35rem 0; padding: 0.65rem 0.9rem 0.75rem; background: var(--surface-soft); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 6px var(--radius-small) var(--radius-small) 6px; min-width: 0; }
.jcard h4 { font: 800 1rem/1.3 var(--font-body); }
.jcard p { margin: 0.25rem 0 0; font-size: 0.9rem; }

/* ------------------------------------------------------------------ Moments (cards, dialog, media) */
.media-ph { display: grid; place-items: center; align-content: center; gap: 0.2rem; width: 100%; aspect-ratio: 4 / 3; background: var(--bg-deep); color: var(--ink-soft); font-size: 2rem; }
.media-ph small { font-size: 0.75rem; font-weight: 700; }
.media-video { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #1d1c3a; overflow: hidden; }
.media-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-video .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 1; }
.pdf-frame { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); }
.moment-dialog .moment-view { display: grid; gap: 1rem 1.4rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.moment-dialog .moment-view:not(:has(.moment-media)) { grid-template-columns: minmax(0, 1fr); }
.moment-media { min-width: 0; }
.moment-media img, .moment-media video { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: var(--radius-small); background: #1d1c3a; }
.moment-media audio { width: 100%; }
.moment-text h3 { font-size: var(--step-2); margin: 0.2rem 0 0.4rem; }
.evidence-quote { margin: 0.6rem 0; padding: 0.5rem 0.9rem; border-left: 4px solid var(--sun); background: var(--sun-soft); border-radius: 0 var(--radius-small) var(--radius-small) 0; font-style: italic; font-size: 0.92rem; }
.moment-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }
.moment-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.moment-card { --c: var(--ink-soft); display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--c); border-radius: var(--radius-small); overflow: hidden; }
.moment-card.fav { box-shadow: 0 0 0 2px var(--sun); }
.moment-media-btn { display: block; padding: 0; border: 0; background: none; width: 100%; }
.moment-media-btn img, .moment-media-btn .media-ph, .moment-media-btn .media-video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.moment-media-btn:hover img { filter: brightness(1.05); }
.moment-body { padding: 0.65rem 0.85rem 0.8rem; min-width: 0; }
.moment-body h4 { font: 800 1rem/1.3 var(--font-body); }
.moment-body p { margin: 0.25rem 0 0; font-size: 0.9rem; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fav-mark { color: var(--warn-ink); font-size: 1rem; }

/* ------------------------------------------------------------------ Memory Lane */
.lane-lead { margin: 0; color: var(--ink-soft); font-size: var(--step-1); }
.lane-toolbar { position: sticky; top: 3.7rem; z-index: 20; background: var(--bg); padding: 0.5rem 0; display: grid; gap: 0.5rem; }
.lane-jump { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
.jump-btn { --c: var(--ink-soft); flex: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.8rem; border: 2px solid var(--line); border-bottom: 4px solid var(--c); border-radius: 12px; background: var(--surface); font-weight: 800; font-size: 0.85rem; }
.jump-btn:hover { background: color-mix(in srgb, var(--c) 12%, #fff); }
.jump-btn.now { background: var(--sun-soft); border-color: var(--sun); border-bottom-color: var(--c); }
.jump-btn.warn { --c: var(--warn); }
.jump-btn b { background: var(--ink); color: #fff; border-radius: 999px; padding: 0 0.45rem; font-size: 0.72rem; line-height: 1.4; }
.lane-filters { display: flex; gap: 0.6rem 1rem; flex-wrap: wrap; align-items: center; }
.lane-filters .segmented { flex-wrap: wrap; }
.lane-search { flex: 1 1 14rem; max-width: 22rem; padding: 0.4rem 0.8rem; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--surface); min-height: 2.4rem; }
.lane-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.on-day { border-left: 6px solid var(--sun); background: var(--sun-soft); }
.on-day h3 { font-size: var(--step-1); }
.on-day ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.on-day .ago { display: inline-block; min-width: 6.5rem; font-weight: 800; color: var(--warn-ink); }
.undated-tray { border-left: 6px solid var(--warn); }
.undated-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.undated-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 1.2rem; flex-wrap: wrap; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.u-what { min-width: 0; flex: 1 1 14rem; }
.u-date { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.u-date input { padding: 0.35rem 0.6rem; border: 2px solid var(--line-strong); border-radius: var(--radius-small); min-height: 2.2rem; }
.lane { display: grid; gap: 0.4rem; }
.lane-stage { --c: var(--ink-soft); position: relative; margin: 1rem 0 0 1.2rem; padding: 0.1rem 0 1rem 1.5rem; border-left: 5px solid var(--c); scroll-margin-top: 8rem; border-radius: 0 0 0 6px; }
.lane-stage.flash, .undated-tray.flash { animation: lane-flash 1.4s ease-out; }
.lane-stage:focus, .undated-tray:focus { outline: none; }
.lane-stage.now { border-left-width: 8px; }
.lane-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; position: relative; }
.lane-icon { position: absolute; left: -3.45rem; width: 3rem; height: 3rem; display: grid; place-items: center; font-size: 1.5rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 25%, #fff); border: 4px solid var(--c); box-shadow: 0 0 0 4px var(--bg); }
.lane-head > div:not(.page-tools) { flex: 1 1 14rem; min-width: 0; }
.lane-head h3 { font-size: var(--step-2); }
.lane-head .sub { margin: 0.1rem 0 0; }
.lane-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); align-items: start; }
.lane-empty { margin: 0; padding: 0.4rem 0; }

/* ------------------------------------------------------------------ Uploads */
.dropzone { text-align: center; padding: 1.8rem 1.2rem; border: 3px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-soft); transition: background 0.15s, border-color 0.15s; }
.dropzone.over { border-color: var(--primary); background: var(--primary-soft); }
.dz-art { font-size: 2.2rem; letter-spacing: 0.3rem; }
.dz-title { font: 700 var(--step-2)/1.2 var(--font-heading); margin: 0.4rem 0; }
.dz-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0 0.6rem; }
.dz-types { font-size: 0.78rem; margin: 0; overflow-wrap: anywhere; }
.note-box { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.note-box h4 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.note-box textarea { width: 100%; }
.send-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.send-row { display: grid; grid-template-columns: minmax(0, 1fr) 8rem minmax(8rem, auto); gap: 0.5rem; align-items: center; font-size: 0.88rem; }
.send-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.send-row.ok small { color: var(--good-ink); }
.send-row.bad small { color: var(--bad-ink); font-weight: 700; }
progress { width: 100%; height: 0.6rem; accent-color: var(--primary); }
.status-panel > * { margin-bottom: 0.4rem; }
.status-panel > :last-child { margin-bottom: 0; }
.reading { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.reading progress { flex: 1 1 10rem; max-width: 22rem; }
.ok-line { color: var(--good-ink); font-weight: 800; }
.ai-line { font-size: 0.85rem; }
.up-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.up-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: start; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.up-row:first-child { border-top: 0; }
.up-row.failed { background: #fff5f4; margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 8px; }
.up-thumb { width: 4.2rem; height: 4.2rem; border-radius: 10px; overflow: hidden; background: var(--bg-deep); display: grid; place-items: center; }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kind-ic { font-size: 1.8rem; }
.up-main { min-width: 0; }
.up-name { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.up-name a { color: var(--ink); }
.up-error { color: var(--bad-ink); font-weight: 700; font-size: 0.88rem; margin: 0.2rem 0 0; }
.up-note { font-size: 0.82rem; margin: 0.2rem 0 0; }
.up-row .row-actions { margin: 0; justify-content: flex-end; }
.found { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.found li { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding: 0.5rem 0; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ Schools and teachers */
.ladder-wrap { padding-bottom: 0.4rem; }
.ladder { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
.ladder-step { --c: var(--ink-soft); min-width: 0; }
.ladder-step button { width: 100%; height: 100%; min-height: 5.4rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.1rem; padding: 0.45rem 0.4rem; border: 2px dashed var(--line-strong); border-radius: var(--radius-small); background: var(--surface); text-align: center; }
.ladder-step button:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.ladder-step.has button { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.ladder-step.now button { box-shadow: 0 0 0 3px var(--sun); }
.ladder-step .st { font-weight: 800; font-size: 0.82rem; }
.ladder-step .sch { font-size: 0.78rem; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ladder-step:not(.has) .sch { color: var(--ink-faint); }
.ladder-step small { color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; }
.record-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.record { --c: var(--ink-soft); display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: start; padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 6px var(--radius-small) var(--radius-small) 6px; background: var(--surface-soft); }
.rec-stage strong { display: block; }
.rec-stage small { color: var(--ink-soft); font-weight: 700; }
.rec-main p { margin: 0.15rem 0 0; font-size: 0.9rem; }
.record .row-actions { margin: 0; }
.suggest { border-left: 6px solid var(--primary); background: var(--primary-soft); }
.suggest-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.suggest-list li { display: flex; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; align-items: center; padding-top: 0.5rem; border-top: 1px solid color-mix(in srgb, var(--primary) 20%, #fff); }
.suggest-list p { margin: 0.1rem 0 0; font-size: 0.85rem; }
.suggest-list .row-actions { margin: 0; }
.teacher-grid, .school-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.teacher-card, .school-card { --c: var(--primary); background: var(--surface-soft); border: 1px solid var(--line); border-top: 5px solid var(--c); border-radius: var(--radius-small); padding: 0.8rem 1rem 0.9rem; min-width: 0; }
.teacher-card.best { background: var(--sun-soft); border-color: var(--sun); border-top-color: var(--sun); }
.school-card.short { box-shadow: 0 0 0 2px var(--sun); }
.t-top, .s-top { display: flex; gap: 0.7rem; align-items: flex-start; justify-content: space-between; }
.t-top > div, .s-top > div:first-child { flex: 1; min-width: 0; }
.t-top h4, .s-top h4 { font: 800 1.05rem/1.25 var(--font-body); overflow-wrap: anywhere; }
.t-top p, .s-top p { margin: 0.1rem 0 0; font-size: 0.85rem; }
.t-ic { font-size: 1.6rem; line-height: 1; }
.t-rating { margin: 0.4rem 0 0; display: flex; align-items: center; gap: 0.3rem; }
.avg { flex: none; text-align: center; padding: 0.2rem 0.6rem; border-radius: var(--radius-small); background: var(--bg); }
.avg b { display: block; font: 800 var(--step-2)/1.1 var(--font-heading); }
.avg small { font-size: 0.7rem; color: var(--ink-soft); font-weight: 700; }
.dist-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.88rem; margin: 0.4rem 0; }
.dist-row input { width: 5rem; padding: 0.25rem 0.5rem; border: 2px solid var(--line-strong); border-radius: var(--radius-small); }
.my-review { margin: 0.5rem 0; padding: 0.5rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); }
.my-review p { margin: 0.15rem 0; font-size: 0.9rem; }
.aspect-grid { display: grid; gap: 0 1.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.review { padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface-soft); }
.review p { margin: 0.3rem 0 0; font-size: 0.92rem; }
.rv-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* find a school */
.where { margin: 0.4rem 0 0.8rem; }
.where p { margin: 0 0 0.4rem; }
.sliders { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 0.6rem 0 1rem; }
.slider { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: 0.15rem 0.6rem; align-items: center; font-weight: 800; font-size: 0.9rem; }
.slider .sl-name { grid-column: 1 / -1; }
.slider input[type="range"] { width: 100%; accent-color: var(--primary); }
.slider output { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.result-card { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.9rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rank { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 800 1.15rem var(--font-heading); }
.result-card:first-child .rank { background: var(--sun); color: var(--sun-ink); }
.res-main { min-width: 0; }
.res-top { display: flex; justify-content: space-between; gap: 0.8rem; align-items: flex-start; }
.res-top h4 { font-size: var(--step-1); overflow-wrap: anywhere; }
.res-top p { margin: 0.1rem 0 0; font-size: 0.88rem; }
.score { flex: none; text-align: center; padding: 0.25rem 0.8rem; border-radius: var(--radius-small); background: var(--primary-soft); }
.score b { display: block; font: 800 var(--step-3)/1 var(--font-heading); color: var(--primary-deep); }
.score small { font-size: 0.7rem; font-weight: 800; color: var(--ink-soft); }
.why { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.why li { margin: 0.12rem 0; }
.g-block { margin-top: 0.7rem; padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface-soft); }
.g-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.g-name { font-weight: 800; color: var(--ink-soft); }
.g-review { margin: 0.5rem 0 0; padding: 0 0 0 0.8rem; border-left: 3px solid var(--line-strong); font-size: 0.88rem; }
.g-review p { margin: 0; }
.g-review footer { color: var(--ink-soft); font-size: 0.75rem; margin-top: 0.15rem; }
.attrib { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--ink-soft); }
.how { margin-top: 0.6rem; font-size: 0.88rem; }
.how summary { cursor: pointer; font-weight: 800; color: var(--primary-deep); }
.how-bars { display: grid; gap: 0.3rem; margin: 0.5rem 0; }
.how-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 2.2rem; gap: 0.6rem; align-items: center; }
.how-row small { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Hobbies */
.hobby-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.hobby-card { --c: var(--primary); background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--c); border-radius: var(--radius); padding: 1rem 1.2rem 1.1rem; min-width: 0; }
.hobby-card header { display: flex; align-items: center; gap: 0.8rem; }
.hobby-card header > div { flex: 1; min-width: 0; }
.hobby-card h3 { font-size: var(--step-2); }
.hobby-card header p { margin: 0; font-size: 0.85rem; }
.hob-ic { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; font-size: 1.7rem; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, #fff); border: 3px solid var(--c); flex: none; }
.hob-since { margin: 0.7rem 0 0.2rem; font-weight: 800; }
.hob-now { margin: 0.2rem 0 0.4rem; }
.hob-ladder-wrap { overflow-x: auto; padding: 0.3rem 0 0.5rem; }
.hob-ladder { list-style: none; margin: 0; padding: 0; display: flex; min-width: min-content; }
.rung { position: relative; flex: 1 0 5.2rem; text-align: center; padding: 0 0.2rem; }
.rung:not(:last-child)::after { content: ""; position: absolute; top: 0.85rem; left: calc(50% + 0.9rem); width: calc(100% - 1.8rem); height: 3px; background: var(--c); border-radius: 2px; }
.rung.next:not(:last-child)::after, .rung.current:not(:last-child)::after { background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px); }
.rung .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin: 0 auto; border-radius: 50%; border: 3px solid var(--c); background: var(--c); color: #fff; font-size: 0.8rem; font-weight: 800; }
.rung.next .dot { background: var(--surface); border-color: var(--line-strong); }
.rung.current .dot { background: var(--sun); color: var(--sun-ink); box-shadow: 0 0 0 3px var(--ink); }
.rung-label { display: block; margin-top: 0.3rem; font-size: 0.75rem; line-height: 1.2; font-weight: 700; color: var(--ink-soft); overflow-wrap: anywhere; }
.rung.current .rung-label { color: var(--ink); font-weight: 800; }
.hob-goal { margin: 0.4rem 0; padding: 0.45rem 0.8rem; border-radius: var(--radius-small); background: var(--sun-soft); font-size: 0.92rem; }
.hobby-card h4 { font: 800 0.92rem var(--font-body); margin: 0.8rem 0 0.3rem; color: var(--ink-soft); }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.log-row { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) auto; gap: 0.2rem 0.7rem; align-items: start; padding: 0.4rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.log-row:first-child { border-top: 0; }
.log-row time { font-weight: 800; color: var(--ink-soft); font-size: 0.82rem; }
.log-row .row-actions { margin: 0; }

/* ------------------------------------------------------------------ Ask (extras) */
.examples { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.example { text-align: left; padding: 0.45rem 0.95rem; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 0.92rem; }
.example:hover { border-color: var(--primary); background: var(--primary-soft); }

/* ------------------------------------------------------------------ Administration */
.admin-students { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.admin-student { display: grid; grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr) auto; gap: 0.5rem 1.2rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.admin-student:first-child { border-top: 0; }
.as-id { display: flex; align-items: center; gap: 0.7rem; }
.as-id > div { display: flex; flex-direction: column; min-width: 0; }
.as-parents { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.as-parents select { border: 2px solid var(--line-strong); border-radius: 999px; padding: 0.2rem 0.6rem; background: var(--surface); font-size: 0.85rem; max-width: 14rem; }
.chip-x { border: 0; background: none; color: var(--ink-soft); font-size: 0.8rem; padding: 0 0.15rem; border-radius: 50%; line-height: 1; }
.chip-x:hover { color: var(--bad-ink); }
.admin-student .row-actions { margin: 0; }
.data-table.accounts td .row-actions, .data-table.accounts .row-actions { margin: 0; flex-wrap: nowrap; }
.temp-box { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin: 0.8rem 0; padding: 0.8rem 1rem; background: var(--bg); border: 2px dashed var(--line-strong); border-radius: var(--radius-small); }
.temp-pass { font: 800 1.5rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; user-select: all; overflow-wrap: anywhere; }
.failed-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.failed-list li { display: flex; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.failed-list .up-error { margin: 0.15rem 0 0; }
.settings-box > * + * { margin-top: 1.1rem; }
code.path { display: inline-block; padding: 0.3rem 0.7rem; background: var(--bg); border-radius: 8px; border: 1px solid var(--line); overflow-wrap: anywhere; font-size: 0.9rem; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 62rem) {
  .moment-dialog .moment-view { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  .j-banner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .j-id .chips, .j-actions { justify-content: center; }
  .j-lead { margin-inline: auto; }
  .lane-toolbar { top: 3.3rem; }
  .lane-stage { margin-left: 0.4rem; padding-left: 1.1rem; }
  .lane-icon { left: -2.45rem; width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
  .record { grid-template-columns: minmax(0, 1fr); }
  .up-row { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .up-thumb { width: 3.2rem; height: 3.2rem; }
  .up-row .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .send-row { grid-template-columns: minmax(0, 1fr) 6rem; }
  .send-row small { grid-column: 1 / -1; }
  .admin-student { grid-template-columns: minmax(0, 1fr); }
  .result-card { grid-template-columns: minmax(0, 1fr); }
  .rank { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .how-row { grid-template-columns: 8rem minmax(0, 1fr) 2rem; }
  .log-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .jrow { grid-template-columns: 3rem minmax(0, 1fr); }
  .jrow .jroad { grid-column: 1; }
  .jrow.left .jcard, .jrow.right .jcard { grid-column: 2; }
  .jroad svg { display: none; }
  .jroad::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2.5px; background: var(--viz-accent, var(--primary)); border-radius: 3px; }
  .jnode { left: 50%; width: 2.3rem; height: 2.3rem; }
  .skill-list li { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .skill-list .when { grid-column: 2; }
  .stat { min-width: 4.6rem; padding: 0.45rem 0.6rem; }
}
@media (max-width: 40rem) {
  /* the logins table becomes one block per person, so nothing has to scroll sideways */
  .data-table.accounts thead { display: none; }
  .data-table.accounts, .data-table.accounts tbody, .data-table.accounts tr, .data-table.accounts td { display: block; width: 100%; }
  .data-table.accounts tr { padding: 0.6rem 0; border-top: 1px solid var(--line); }
  .data-table.accounts td, .data-table.accounts tbody th { padding: 0.1rem 0; border: 0; }
  .data-table.accounts tbody th { display: block; font-size: 1.05rem; }
  .data-table.accounts .row-actions { flex-wrap: wrap; margin-top: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-in, .spin, .lane-stage.flash, .undated-tray.flash { animation: none; }
}

/* ------------------------------------------------------------------ print: a parent can print the journey or the lane */
@media print {
  .page-in { animation: none; }
  .no-print, .row-actions, .lane-toolbar, .dropzone, .photo-btn { display: none !important; }
  .j-banner { border-top-width: 4px; }
  .road-card, .imp, .jrow, .moment-card, .lane-head, .teacher-card, .school-card, .hobby-card { break-inside: avoid; }
  .road-grid { display: block; }                           /* stacked cards read better on a portrait page */
  .road-grid > .road-card { margin-bottom: 0.7rem; }
  .lvl-list:not([open]) > :not(summary) { display: block; }
  .trail-stage:not([open]) > :not(summary) { display: block; }
  .stage-path { min-width: 0; }
  .lane-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lane-stage { break-inside: auto; margin-left: 0.2rem; }
  .lane-icon { box-shadow: none; }
  .moment-card .clamp { -webkit-line-clamp: unset; display: block; }
  .media-video video { display: none; }
}