/* Parent cards: the age, school and area pages.
   Built on Maali's own variables so the cards follow the site's light and
   dark schemes and its fonts. No inline styles anywhere: bars are SVG with
   width attributes, and the card scripts only toggle classes. */

.tip-cards { max-width: 760px; margin: 2rem auto 3rem; display: grid; gap: 1.25rem; }
.tip-cards h1 { margin: 0; }
.tip-lede { color: var(--color-text-acc); font-size: 1.1em; margin: 0; }
.tip-kicker { font-family: var(--font-headings); font-weight: 600; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ghost-accent-color); margin: 0; }
.tip-draft { justify-self: start; font: 600 .7rem/1 var(--font-mono); padding: .35rem .55rem; border-radius: 4px; background: #fdf3d2; color: #6b4e00; }
html[data-color-scheme=dark] .tip-draft { background: #3a321b; color: #e7c873; }

.tip-card { border: 1px solid var(--color-border); border-radius: 10px; padding: 1.2rem 1.3rem; display: grid; gap: .9rem; min-width: 0; background: var(--color-bg); }
.tip-card > header { display: grid; gap: .3rem; }
.tip-card h2, .tip-card h3 { font-family: var(--font-headings); margin: 0; line-height: 1.25; }
.tip-card h2 { font-size: 1.3rem; }
.tip-card h3 { font-size: 1rem; }
.tip-card p, .tip-card ul, .tip-card ol { margin: 0; }
.tip-card .content-free, .tip-card p { font-family: var(--font-body); }
.tip-small { font-size: .88rem; }
.tip-muted { color: var(--color-text-acc); }
.tip-num { font-variant-numeric: tabular-nums; }

.tip-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.tip-row > * { min-width: 0; }
.tip-field { display: grid; gap: .3rem; font-family: var(--font-headings); font-weight: 600; font-size: .9rem; }
.tip-field small { font-weight: 400; color: var(--color-text-acc); }
.tip-field input, .tip-field select { font: inherit; font-weight: 400; color: var(--color-text); background: var(--color-bg-acc); border: 1px solid var(--color-border); border-radius: 6px; padding: .5rem .6rem; min-width: 0; }
.tip-field input[type=number] { width: 6.5rem; font-variant-numeric: tabular-nums; }
.tip-field input[type=search] { width: 100%; }
.tip-field--wide { flex: 1 1 100%; }

.tip-example { font-size: .82rem; padding: .45rem .65rem; border-radius: 6px; background: #fdf3d2; color: #6b4e00; margin: 0; }
html[data-color-scheme=dark] .tip-example { background: #3a321b; color: #e7c873; }
.tip-privacy { font-size: .85rem; color: #23794a; display: flex; gap: .45rem; align-items: baseline; margin: 0; }
.tip-privacy::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: none; }
html[data-color-scheme=dark] .tip-privacy { color: #8fd1a6; }

.tip-pill { display: inline-block; font: 600 .74rem/1 var(--font-headings); padding: .32rem .55rem; border-radius: 99px; white-space: nowrap; border: 1px solid var(--color-border); color: var(--color-text-acc); background: var(--color-bg); }
.tip-pill--good { background: #e3f0e7; color: #1f5c39; border-color: transparent; }
.tip-pill--note { background: #fbeed3; color: #6b4e00; border-color: transparent; }
.tip-pill--flag { background: #f6e2df; color: #8f2c22; border-color: transparent; }
html[data-color-scheme=dark] .tip-pill--good { background: #1d3426; color: #8fd1a6; }
html[data-color-scheme=dark] .tip-pill--note { background: #3a321b; color: #e7c873; }
html[data-color-scheme=dark] .tip-pill--flag { background: #3e2522; color: #f2a297; }

.tip-callout { border-radius: 8px; padding: .8rem .95rem; background: hsl(var(--color-brand-hsl) / .1); display: grid; gap: .4rem; }
.tip-callout--warm { background: #fbeadc; }
html[data-color-scheme=dark] .tip-callout--warm { background: #3b2a1c; }

.tip-table-wrap { overflow-x: auto; }
.tip-table-wrap .tip-table, .tip-table { display: table; white-space: normal; border-left: 0; border-right: 0; margin: 0; max-width: 100%; align-self: auto; }
.tip-table td, .tip-table th { white-space: normal; word-break: normal; }
.tip-table td:first-child { min-width: 9rem; }
.tip-table { border-collapse: collapse; width: 100%; font-size: .92rem; font-family: var(--font-headings); font-weight: 400; }
.tip-table th, .tip-table td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tip-table th { font-weight: 600; font-size: .74rem; color: var(--color-text-acc); letter-spacing: .03em; }
.tip-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tip-table tr:last-child td { border-bottom: 0; }

/* Bars: <div class="tip-bar"><span>label</span><svg viewBox="0 0 100 8"><rect class="tip-bar__track" .../><rect class="tip-bar__fill" width="62" .../></svg><span>62%</span></div> */
.tip-bars { display: grid; gap: .45rem; }
.tip-bar { display: grid; grid-template-columns: 8rem 1fr 3.2rem; gap: .6rem; align-items: center; font: .88rem var(--font-headings); }
.tip-bar svg { width: 100%; height: .7rem; display: block; }
.tip-bar__track { fill: var(--color-bg-acc); stroke: var(--color-border); stroke-width: .3; }
.tip-bar__fill { fill: hsl(var(--color-brand-hsl) / .55); }
.tip-bar--you .tip-bar__fill { fill: #d97a2b; }
.tip-bar > :last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* KS2 histogram */
.tip-hist { width: 100%; height: auto; display: block; }
.tip-hist text { fill: var(--color-text-acc); font: 11px var(--font-headings); }
.tip-hist .axis { stroke: var(--color-border); }
.tip-hist .h-below { fill: var(--color-border); }
.tip-hist .h-exp { fill: hsl(var(--color-brand-hsl) / .35); }
.tip-hist .h-high { fill: hsl(var(--color-brand-hsl) / .7); }
.tip-hist .h-you, .tip-hist text.t-you { fill: #d97a2b; }
.tip-hist text.t-you { font-weight: 600; }

/* Milestones */
.tip-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.tip-checklist label { display: flex; gap: .55rem; align-items: baseline; font-family: var(--font-body); font-weight: 400; }
.tip-checklist input { flex: none; }
.tip-checklist--plain li { color: var(--color-text-acc); font-family: var(--font-body); }
.tip-domain { display: grid; gap: .5rem; }

/* Search results */
.tip-matches { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.tip-matches a { display: block; padding: .55rem .7rem; border: 1px solid var(--color-border); border-radius: 6px; text-decoration: none; color: inherit; font-family: var(--font-headings); }
.tip-matches a:hover, .tip-matches a:focus-visible { border-color: var(--ghost-accent-color); }
.tip-matches small { display: block; color: var(--color-text-acc); font-weight: 400; }

.tip-links { columns: 2 16rem; padding-left: 1.1rem; margin: 0; font-family: var(--font-headings); font-size: .92rem; }
.tip-links li { break-inside: avoid; margin-bottom: .25rem; }

.tip-credits { font-size: .8rem; color: var(--color-text-acc); display: grid; gap: .35rem; border-top: 1px solid var(--color-border); padding-top: .9rem; }
.tip-credits p { margin: 0; font-family: var(--font-headings); }

@media (max-width: 34rem) { .tip-bar { grid-template-columns: 5.5rem 1fr 2.8rem; } .tip-card { padding: 1rem; } }

/* Readers who chose "system" and whose device is dark */
@media (prefers-color-scheme: dark) {
  html[data-color-scheme=system] .tip-draft, html[data-color-scheme=system] .tip-example { background: #3a321b; color: #e7c873; }
  html[data-color-scheme=system] .tip-privacy { color: #8fd1a6; }
  html[data-color-scheme=system] .tip-pill--good { background: #1d3426; color: #8fd1a6; }
  html[data-color-scheme=system] .tip-pill--note { background: #3a321b; color: #e7c873; }
  html[data-color-scheme=system] .tip-pill--flag { background: #3e2522; color: #f2a297; }
  html[data-color-scheme=system] .tip-callout--warm { background: #3b2a1c; }
}

/* Home page: the band introducing the cards, and age-section links */
.tip-tools .section-title { margin-bottom: 1.2rem; }
.tip-tools__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.tip-tool { display: grid; gap: .45rem; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid var(--color-border); border-radius: 10px; text-decoration: none; color: inherit; background: var(--color-bg); }
.tip-tool:hover, .tip-tool:focus-visible { border-color: var(--ghost-accent-color); }
.tip-tool strong { font-family: var(--font-headings); font-size: 1.1rem; line-height: 1.25; }
.tip-tool > .tip-desc { font-family: var(--font-body); color: var(--color-text-acc); font-size: .95rem; }
.tip-tools .tip-privacy { margin-top: 1rem; }
.tip-stage-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 1rem 0 0; font-family: var(--font-headings); font-size: .9rem; }
.tip-stage-links a { color: var(--ghost-accent-color); }

/* Buttons (Matt, 22 Oct 2026: everything clickable should look clickable) */
.tip-go { justify-self: start; margin-top: .35rem; padding: .5rem .95rem; border-radius: 6px; background: var(--ghost-accent-color); color: var(--color-brand-contrast, #000); font-family: var(--font-headings); font-weight: 600; font-size: .85rem; line-height: 1.2; }
.tip-go::after { content: " \2192"; }
.tip-tool:hover .tip-go, .tip-tool:focus-visible .tip-go { filter: brightness(.92); }
.tip-stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.tip-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.tip-btn { text-decoration: none; }
.tip-stage-links { gap: .6rem; }
.tip-stage-links a { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--ghost-accent-color); border-radius: 6px; text-decoration: none; color: inherit; }
.tip-stage-links a:hover, .tip-stage-links a:focus-visible { background: var(--ghost-accent-color); color: var(--color-brand-contrast, #000); }
.tip-stage-links a::after { content: " \2192"; }

/* Scores card: what kind of score is it? */
.tip-kinds { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; min-width: 0; }
.tip-kinds legend { margin-bottom: .4rem; padding: 0; }
.tip-kind { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; }
.tip-kind input { margin-top: .3rem; flex: none; }
.tip-kind span { display: grid; gap: .1rem; font-family: var(--font-headings); }
.tip-kind strong { font-weight: 600; font-size: .95rem; }
.tip-kind small { color: var(--color-text-acc); font-size: .82rem; line-height: 1.35; }
.tip-kind:has(input:checked) { border-color: var(--ghost-accent-color); background: hsl(var(--color-brand-hsl) / .07); }
.tip-hist line.h-you { stroke: #d97a2b; }

/* Maali restyles form inputs; give radios and checkboxes in cards their
   native look back so the choice is visible. */
.tip-kind input[type=radio], .tip-checklist input[type=checkbox] {
  -webkit-appearance: auto; appearance: auto; width: 1.05rem; height: 1.05rem; min-width: 1.05rem;
  padding: 0; margin: .25rem 0 0; border: 0; background: none; box-shadow: none; accent-color: var(--ghost-accent-color);
}