/* The free skill check (skill-check.html) and its report, which the Parent Zone
also draws (account.html, js/skill-report-view.js). Built on the shared tokens
in base.css and the question card from style.css; everything here is prefixed
sk- (the page) or skr-/skh- (the report and its history) so nothing leaks into
the game's own screens. Mobile first: the 5–8 band plays this on a phone. */
.sk-main { padding-bottom: 32px; }
.sk-here { background: var(--tl-orange-tint); color: var(--tl-orange-text); font-weight: 900; }
.sk-card { max-width: 560px; }
.sk-h1 { font-size: 1.7em; line-height: 1.2; }
.sk-h2 { font-size: 1.3em; line-height: 1.25; text-align: center; margin: 0 0 10px; }
.sk-lead { color: var(--tl-ink-soft); font-family: "Nunito", sans-serif; line-height: 1.6; margin: 0 0 12px; }
.sk-small { color: var(--tl-muted); font-family: "Nunito", sans-serif; font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; }
.sk-center { text-align: center; }
.sk-gets { list-style: none; padding: 0; margin: 0 0 18px; font-family: "Nunito", sans-serif; font-weight: 700;
color: var(--tl-ink); line-height: 1.5; }
.sk-gets li { padding: 6px 0; overflow-wrap: anywhere; }
.sk-wide { display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; margin-top: 12px; }
.sk-lab { display: block; font-family: "Baloo 2", sans-serif; font-size: 14px; font-weight: 800; color: #5A5140;
letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 8px; }
.sk-input { width: 100%; }
.sk-ages { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-age { border: 0; border-radius: 999px; padding: 9px 14px; font: inherit; font-weight: 800; cursor: pointer;
background: linear-gradient(180deg, #FFFDF7, var(--tl-surface-b)); color: var(--tl-ink);
box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--tl-ledge); }
.sk-age[aria-checked="true"] { background: linear-gradient(180deg, #FFF6E2, #F6E4C2);
box-shadow: inset 0 0 0 2.5px var(--tl-orange), 0 4px 0 #D5B57E; }
/* ---- the intro: five subject pictures, then the button ---- */
.sk-h1 { text-align: center; }
.sk-subjects { list-style: none; padding: 0; margin: 4px 0 6px; display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sk-subjects li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 14px; color: var(--tl-ink); }
.sk-subjects img { width: 48px; height: 48px; }
/* ---- how it works: the three-step loop ----
A row of three cards joined by arrows; on a phone the row turns into a column
and the arrows point down. Each card is a flex column so the three line up
whatever the text length. */
/* `.site-main > section` (site.css) sets the margin with more weight than a
lone class, so this has to name the same path to centre the section. */
.site-main > .sk-about { max-width: 760px; margin: 26px auto 0; }
.sk-flow { list-style: none; padding: 0; margin: 0; display: flex; align-items: stretch; gap: 6px; }
.sk-step { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 6px; padding: 18px 12px 16px; border-radius: 20px;
background: linear-gradient(180deg, #FFFDF7, var(--tl-surface-b));
box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--tl-ledge), 0 8px 14px rgba(120, 85, 40, .12);
font-family: "Nunito", sans-serif; }
.sk-step b { font-family: "Baloo 2", sans-serif; font-size: 20px; line-height: 1.15; color: var(--tl-head); }
.sk-step span:last-child { font-size: 14px; line-height: 1.45; color: var(--tl-ink-soft); }
.sk-step img { width: 64px; height: 64px; }
.sk-step-1 { box-shadow: inset 0 0 0 2.5px var(--tl-orange), 0 4px 0 var(--tl-ledge), 0 8px 14px rgba(120, 85, 40, .12); }
.sk-step-2 { box-shadow: inset 0 0 0 2.5px var(--tl-teal), 0 4px 0 var(--tl-ledge), 0 8px 14px rgba(120, 85, 40, .12); }
.sk-step-3 { box-shadow: inset 0 0 0 2.5px var(--tl-gold), 0 4px 0 var(--tl-ledge), 0 8px 14px rgba(120, 85, 40, .12); }
.sk-stepno { position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
background: var(--tl-head); color: #fff; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 15px; }
.sk-arrow { flex: 0 0 26px; align-self: center; height: 26px;
background: no-repeat center / 22px 22px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14m-6-6 6 6-6 6' fill='none' stroke='%23C56A1E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sk-loop { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 16px; border-radius: 16px;
background: var(--tl-teal-tint); color: var(--tl-teal-text); font-family: "Nunito", sans-serif; font-weight: 800;
font-size: 15px; line-height: 1.45; }
.sk-loop img { flex: 0 0 40px; width: 40px; height: 40px; }
.sk-sample { max-width: 320px; margin: 16px auto 0; }
.sk-facts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sk-facts li { padding: 6px 12px; border-radius: 999px; background: var(--tl-surface-b); font-family: "Nunito", sans-serif;
font-weight: 700; font-size: 13.5px; color: var(--tl-ink-soft); white-space: nowrap; }
/* On a phone three tall cards would fill two screens, so each step becomes a
row — picture left, words right — and the arrows point down between them. */
@media (max-width: 640px) {
.sk-flow { flex-direction: column; gap: 2px; }
.sk-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto;
column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 12px 14px; }
.sk-step img { grid-row: 1 / span 2; width: 56px; height: 56px; }
.sk-step b { font-size: 18px; align-self: end; }
.sk-step span:last-child { align-self: start; }
.sk-step span:last-child br { display: none; }
.sk-stepno { top: 50%; left: -8px; transform: translateY(-50%); width: 24px; height: 24px; font-size: 14px; }
.sk-arrow { flex-basis: 24px; width: 24px; height: 24px; transform: rotate(90deg); }
}
/* On a phone the five labels share ~275px, and "English" and "Science" are the
two widest words in the row: at 14px they ran into each other. */
@media (max-width: 480px) {
.sk-subjects { gap: 2px; }
.sk-subjects img { width: 42px; height: 42px; }
.sk-subjects li { font-size: 12.5px; }
/* The "you are here" pill pushed the Game button onto a second row of the
title bar; the page's own headline already says where you are. */
.sk-here { display: none; }
}
.sk-lead .nb { white-space: nowrap; }
.sk-status { font-family: "Nunito", sans-serif; color: var(--tl-ink-soft); line-height: 1.55; margin: 14px 0 0; min-height: 1.5em; }
.sk-off { font-family: "Nunito", sans-serif; font-weight: 800; color: var(--tl-ink-soft); text-align: center; margin-top: 12px; }
/* ---- the check ---- */
.sk-run { max-width: min(760px, 94vw); margin: 18px auto 0; }
.sk-runhead { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.sk-section { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 22px; color: var(--tl-head); }
.sk-read { font-size: 14px; padding: 8px 14px; }
.sk-read[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--tl-teal), 0 3px 0 var(--tl-ledge); }
.sk-dots { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 12px 0 4px; }
.sk-dots .qdots { margin-top: 0; }
.sk-count { text-align: center; font-family: "Nunito", sans-serif; font-size: 13px; color: var(--tl-muted); margin-bottom: 6px; }
.sk-q .pic { font-size: 26px; min-height: 0; line-height: 1.45; }
.sk-q .pic > * { max-width: 100%; }
.sk-q .qtext { --qsize: 22px; margin: 14px auto 12px; overflow-wrap: anywhere; }
.sk-q .opts { gap: 12px; }
.sk-q .opt { font-size: 19px; padding: 16px 12px; min-height: 3.2em; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
.sk-section { font-size: 19px; }
.sk-q .qtext { --qsize: 19px; }
.sk-q .opt { font-size: 17px; padding: 14px 10px; }
}
/* Skip: a quiet text link well below the answers, not a big tappable tile, so it
is never mistaken for one; the tap only opens a "Skip this one?" question. */
.sk-skip { margin: 26px auto 4px; text-align: center; min-width: 0; }
.sk-skip[hidden], .sk-skip-ask[hidden] { display: none; }
.sk-skip-btn { appearance: none; background: none; border: 0; padding: 10px 14px; min-height: 44px; max-width: 100%;
font: 700 14px "Nunito", sans-serif; color: var(--tl-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sk-skip-btn:hover, .sk-skip-btn:focus-visible { color: var(--tl-ink-soft); }
.sk-skip-btn:disabled { opacity: .5; cursor: default; }
.sk-skip-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.sk-skip-q { font: 800 15px "Nunito", sans-serif; color: var(--tl-ink-soft); overflow-wrap: anywhere; }
.sk-skip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 100%; }
.sk-skip-row .btn { font-size: 15px; padding: 10px 16px; min-width: 0; }
.sk-between { text-align: center; }
.sk-bigstar { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.sk-betweentxt { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 24px; color: var(--tl-head); margin-bottom: 16px; }
/* ---- the offer ---- */
.sk-price { font-family: "Nunito", sans-serif; font-weight: 800; color: var(--tl-ink); text-align: center; margin: 4px 0 0; }
.sk-price s { color: var(--tl-muted); font-weight: 700; }
.sk-price .sk-code { display: inline-block; background: var(--tl-orange-tint); color: var(--tl-orange-text);
border-radius: 8px; padding: 1px 8px; margin-left: 4px; }
.sk-recheck { margin-top: 16px; padding: 10px 12px; border-radius: 14px; background: var(--tl-teal-tint);
color: var(--tl-teal-text); font-family: "Nunito", sans-serif; font-weight: 800; text-align: center; }
.sk-recheck:empty { display: none; }
/* The offer card leads with its price and See plans, the note under the button,
then the lead and the list (skill-check.html #sk-offer). ONE RHYTHM (product
owner: "Spacing between the lines is not consistent"): every block in the
card, and every item in its list, sits 12px from the next, and all its text
runs at line-height 1.5. The blocks' own margins are cleared so the gap is
set in this one place. */
#sk-offer > * { margin-top: 0; margin-bottom: 0; }
#sk-offer > * + * { margin-top: 12px; }
#sk-offer .sk-lead, #sk-offer .sk-small { line-height: 1.5; }
#sk-offer .sk-gets li { padding: 0; }
#sk-offer .sk-gets li + li { margin-top: 12px; }
.sk-plannote { text-align: center; font-weight: 600; }
#sk-share .sk-lab { margin: 0; }
#sk-share .btnrow { margin-top: 12px; }
/* The buttons' own 18px top margin (style.css) stacked on the row's 12px gap. */
#sk-offer .btnrow > .btn { margin: 0; }
/* The phone bar keeping the offer in reach (skill-check.js sticky()). Phones
only: on a wide screen the offer is already beside the reader's eye. */
.sk-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: var(--tl-screen); box-shadow: 0 -4px 14px rgba(0, 0, 0, .12);
font-family: "Nunito", sans-serif; font-weight: 800; color: var(--tl-ink); }
.sk-sticky[hidden] { display: none; }
.sk-sticky-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sk-sticky .btn { flex: none; text-decoration: none; padding: 10px 18px; }
@media (min-width: 721px) { .sk-sticky { display: none !important; } }
.sk-share { margin-top: 16px; }
.sk-share .btnrow, .sk-offer .btnrow { flex-wrap: wrap; justify-content: center; }
/* ---- the report (also drawn in the Parent Zone) ---- */
.skr { font-family: "Nunito", sans-serif; color: var(--tl-ink); }
.skr-head { text-align: center; margin-bottom: 12px; }
.skr-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--tl-head); overflow-wrap: anywhere; }
.skr-sub { font-size: 13px; color: var(--tl-muted); margin-top: 2px; }
.skr-note { font-size: 14px; color: var(--tl-ink-soft); background: var(--tl-surface-b); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; line-height: 1.5; }
/* ONE LINE PER SUBJECT (product owner, 22–23 Oct 2026): icon · name · a
three-part bar (Developing · Typical · Ahead) with the child's part lit ·
"14 of 15". The bar's three parts are named once, in the header row
(.skr-hd), which uses the same grid so its labels sit over the parts. */
.skr-rows { display: grid; gap: 6px; }
.skr-row, .skr-hd { display: grid; grid-template-columns: 26px 70px minmax(0, 1fr) 50px; gap: 6px; align-items: center; }
.skr-row {
background: var(--tl-surface); border-radius: 12px; padding: 6px 8px 6px 6px;
box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--tl-ledge); }
.skr-row .skr-ic, .skr-row .skr-art { width: 26px; height: 26px; line-height: 26px; }
.skr-row .skr-name { font-size: 15px; overflow-wrap: normal; white-space: nowrap; }
.skr-row .skr-lv { text-align: right; font-size: 12px; white-space: nowrap; }
.skr-row .skr-lv b { font-size: 15px; color: var(--tl-ink); }
/* The header: no card, just the three labels over the bars. "Developing"
carries a soft hyphen, so on the narrowest phones it breaks as a word would
rather than mid-letter. */
.skr-hd { padding: 0 8px 0 6px; }
.skr-hd .skr-lv { font-size: 11px; font-weight: 800; color: var(--tl-muted); text-align: right; }
.skr-bar-h { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.skr-bar-h i { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--tl-muted); text-align: center;
line-height: 1.15; overflow-wrap: normal; hyphens: manual; }
/* On a phone the cards' 34px side padding left the bar ~100px wide — too
narrow for its three labels. The skill check's own cards take 16px there. */
@media (max-width: 520px) {
#sk-report.auth-card, #sk-offer.auth-card, #sk-more.auth-card { padding-left: 16px; padding-right: 16px; }
/* Shorter top and bottom too, and a smaller gap between the report and the
offer, so See plans in the offer card is on a phone's first screen (Asana:
"Need see plan option in page 1"). */
#sk-report.auth-card { padding-top: 20px; padding-bottom: 18px; margin-top: 16px; margin-bottom: 14px; }
#sk-offer.auth-card { padding-top: 18px; margin-top: 14px; }
}
/* The bar: three equal parts, only the child's part filled, in its band colour. */
.skr-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: none; padding: 0; }
.skr-bar b { display: block; height: 12px; border-radius: 3px; background: var(--tl-well); }
.skr-bar b:first-child { border-radius: 999px 3px 3px 999px; }
.skr-bar b:last-child { border-radius: 3px 999px 999px 3px; }
.skr-bar.skr-developing b.on { background: var(--tl-orange); }
.skr-bar.skr-typical b.on { background: #5B7FC0; }
.skr-bar.skr-above b.on { background: var(--tl-teal-text); }
.skr-lv .skr-up, .skr-lv .skr-down { margin-left: 4px; font-size: 12px; }
.skr-ic { display: block; width: 30px; height: 30px; font-size: 22px; line-height: 30px; text-align: center; }
.skr-art { display: block; width: 30px; height: 30px; }
/* The small inline art: opened-levels line, ideas, history cells, the check's
section heading, the read-aloud button. */
.skr-art-sm { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; margin-right: .3em; }
.skr-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 16.5px; line-height: 1.2;
min-width: 0; overflow-wrap: anywhere; }
/* What the check means in the game, as one plain sentence under the rows. */
.skr-opened { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--tl-ink-soft); }
.skr-strengths { font-size: 14px; line-height: 1.5; margin-top: 12px; }
/* Folded detail: the rest of the ideas. */
.skr-fold { margin-top: 6px; }
.skr-fold > summary { cursor: pointer; font-weight: 800; color: var(--tl-ink-soft); font-size: 14px;
padding: 4px 0; list-style-position: inside; }
.skr-fold > summary:focus-visible { outline: 3px solid var(--tl-orange); outline-offset: 2px; border-radius: 6px; }
/* The ⓘ button under the title (skill-report-view.js infoHtml): a small pill
that opens a left-aligned panel explaining the levels. */
.skr-info { margin-top: 8px; }
.skr-info > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
font-size: 13px; font-weight: 800; color: var(--tl-ink-soft); background: var(--tl-surface);
border: 2px solid var(--tl-hairline); border-radius: 999px; padding: 3px 12px 3px 4px; }
.skr-info > summary::-webkit-details-marker { display: none; }
.skr-info > summary:focus-visible { outline: 3px solid var(--tl-orange); outline-offset: 2px; }
.skr-info[open] > summary { border-color: var(--tl-orange); }
.skr-info-i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
background: #5B7FC0; color: #fff; font: italic 800 13px/1 Georgia, serif; }
.skr-info-body { text-align: left; margin: 10px 0 2px; padding: 10px 12px 10px 28px; border-radius: 14px;
background: var(--tl-surface-b, #F7F1E3); font-size: 13.5px; line-height: 1.5; color: var(--tl-ink-soft); }
.skr-info-body li + li { margin-top: 6px; }
.skr-band { font-size: 12px; font-weight: 900; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.skr-above { background: var(--tl-teal-tint); color: var(--tl-teal-text); }
.skr-typical { background: #E9EEF8; color: #34548A; }
.skr-developing { background: var(--tl-orange-tint); color: var(--tl-orange-text); }
.skr-lv { font-size: 13.5px; color: var(--tl-ink-soft); white-space: nowrap; }
.skr-up { color: var(--tl-teal-text); font-weight: 900; }
.skr-down { color: var(--tl-muted); font-weight: 800; }
.skr-same { color: var(--tl-muted); font-size: 12px; }
/* The narrowest phones: tighter gaps so the row stays on one line. */
@media (max-width: 360px) {
.skr-row, .skr-hd { grid-template-columns: 24px 62px minmax(0, 1fr) 48px; gap: 6px; padding-left: 6px; padding-right: 8px; }
.skr-row .skr-ic, .skr-row .skr-art { width: 24px; height: 24px; }
.skr-row .skr-name { font-size: 14px; }
.skr-bar-h i { font-size: 9.5px; }
}
.skr-block { margin-top: 16px; }
.skr-h { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 17px; color: var(--tl-head); }
.skr-block p { margin: 4px 0 0; line-height: 1.55; }
.skr-small { font-size: 12.5px; color: var(--tl-muted); }
.skr-work { margin: 6px 0 0; padding-left: 0; list-style: none; line-height: 1.7; }
.skr-work li { overflow-wrap: anywhere; }
.skr-disc { font-size: 12.5px; color: var(--tl-muted); line-height: 1.5; margin: 16px 0 0; }
/* ---- the Parent Zone history ---- */
.skh { display: grid; gap: 10px; }
.skh-row { background: var(--tl-surface); border-radius: 16px; padding: 12px; box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--tl-ledge);
font-family: "Nunito", sans-serif; }
.skh-who { font-size: 14px; color: var(--tl-ink-soft); overflow-wrap: anywhere; }
.skh-cells { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; font-weight: 800; }
.skh-cell sup { font-size: 11px; margin-left: 2px; }
.skh-open { font-size: 13.5px; padding: 6px 14px; }
/* ---- the static sample report (skill-sample-report.html) ----
Generated by scripts/build-skill-sample.js; everything here is prefixed sks-
and only that page uses it. The report and history inside it are the real
skr-/skh- markup above, so they need nothing extra. */
.sks-card { margin: 22px auto; }
.sks-card:first-child { margin-top: 18px; }
.sks-note { font-family: "Nunito", sans-serif; font-size: 14.5px; line-height: 1.55; color: var(--tl-ink-soft);
background: var(--tl-orange-tint); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; }
.sks-note b { color: var(--tl-orange-text); }
.sks-step { font-family: "Baloo 2", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--tl-muted); text-align: center; line-height: 1.4; margin: 0 0 10px;
overflow-wrap: anywhere; }
.sks-lead { text-align: center; margin: 0 0 14px; }
.sks-cta { text-align: center; }
.sks-cta .sk-lead { margin-bottom: 0; }
/* The site's card keeps its 30px/34px padding at every width; on a phone that
leaves the report ~275px. The sample is four cards of reading, so give it room. */
@media (max-width: 480px) {
.sks-card { padding: 22px 16px; border-radius: 22px; margin: 16px auto; }
/* skill-check.html hides its "you are here" pill on a phone because its own
headline says the same; on this page the pill IS the "this is a sample"
label in the title bar, so it stays. Pill and link together wrapped the
title bar onto two rows at 375px, so the link goes instead — the same
"Take the free skill check" button closes the page. */
.sk-here.sks-here { display: inline-flex; font-size: 12.5px; }
.sks-headlink { display: none; }
}