/*
 * Components shared by the four tools under sport/parents/. The site chrome (nav, mobile menu,
 * tap targets, btn-primary, btn-light) stays inline on each page like every other page on the
 * site; this file carries only what the four tools have in common, so a change to a question
 * card is one edit instead of four. Linked above assets/tailwind.css, which stays the last line
 * of <head>, so Tailwind utilities keep winning ties exactly as they do elsewhere.
 *
 * Palette and contrast rules: docs/design-system.md. Cards are ivory on #d5d3c9, never white;
 * small accent text is #3a6675; text on a teal fill is #ffffff; no side stripes, no gradients.
 */

.accent-ink{color:#3a6675}
[tabindex="-1"]:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #4a7c8c;outline-offset:3px;border-radius:4px}

/* ---------- buttons beyond the two the chrome defines ---------- */
.btn-ghost{background:transparent;color:#3a6675;border:1px solid #4a7c8c;border-radius:10px;padding:9px 22px;min-height:44px;font-weight:500;cursor:pointer;transition:background .2s;font-family:inherit;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn-ghost:hover{background:rgba(74,124,140,0.08)}
.btn-quiet{background:transparent;color:#5e5d59;border:none;padding:11px 14px;min-height:44px;font-weight:500;cursor:pointer;font-family:inherit;font-size:.95rem;border-radius:10px;transition:color .2s}
.btn-quiet:hover{color:#141413}
.btn-quiet[data-armed="1"]{color:#b53333;font-weight:700}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}

/* ---------- intro ---------- */
.hero-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 16px;background:rgba(74,124,140,0.08);border:1px solid rgba(74,124,140,0.22)}
.brief{background:#faf9f5;border:1px solid #d5d3c9;border-radius:16px;padding:2px 20px}
.brief-row{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-top:1px solid #f0eee6}
.brief-row:first-child{border-top:0}
.brief dt{flex:0 0 100px;font-size:14px;font-weight:700;color:#3a6675;line-height:1.5}
.brief dd{margin:0;font-size:14.5px;line-height:1.6;color:#3a3936}
@media (max-width:400px){.brief-row{flex-direction:column;align-items:stretch;gap:3px}.brief dt{flex:none}}
.resume-card{background:rgba(74,124,140,0.07);border:1px solid rgba(74,124,140,0.28);border-radius:16px;padding:18px}
.resume-card h3{font-size:16px;font-weight:800;color:#141413;margin-bottom:5px}
.resume-card p{font-size:14px;color:#3a3936;line-height:1.6}

/* ---------- the stepper ---------- */
.progress-wrap{height:4px;background:#e8e6dc;border-radius:99px;overflow:hidden}
.progress-bar{height:100%;width:100%;background:#4a7c8c;border-radius:99px;transform:scaleX(0);transform-origin:right center;transition:transform .3s ease}
.step-meta{font-size:14px;font-weight:600;color:#5e5d59}
.step-h{font-size:1.5rem;font-weight:700;color:#141413;letter-spacing:-.01em;line-height:1.3}
.step-lead{font-size:15px;color:#5e5d59;line-height:1.65}
.q-card{background:#faf9f5;border:1px solid #d5d3c9;border-radius:14px;padding:20px 18px}
.q-card+.q-card{margin-top:14px}
.q-card fieldset{border:0;margin:0;padding:0;min-width:0}
.q-label{display:block;font-size:15.5px;font-weight:700;color:#141413;line-height:1.5;margin-bottom:10px}
.q-hint{display:block;font-size:14px;color:#5e5d59;line-height:1.55;margin:-4px 0 12px}
.q-sub{font-size:14px;font-weight:700;color:#3a6675;margin:26px 2px 10px}
.q-count{font-size:14px;font-weight:700;color:#3a6675;margin-bottom:6px}

/* One option per row, the way the site's long-label option lists work (sleep-card's
   .chip-row.stack): the input covers its row, so the whole row is the target, and the checked
   row turns teal with a white label. The ring or box drawn before the label repeats the state
   in shape, so it never rests on colour alone. */
.opts{display:grid;grid-template-columns:1fr;gap:8px}
.opts.two{grid-template-columns:repeat(2,1fr)}
.opts.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:420px){.opts.three{grid-template-columns:1fr}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.opt span{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 14px;border-radius:11px;background:#faf9f5;border:1.5px solid #d5d3c9;color:#3a3936;font-size:15px;font-weight:500;line-height:1.45;text-align:start;transition:background .15s,border-color .15s,color .15s;user-select:none}
.opt span::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #8c8a81;background:#faf9f5;box-sizing:border-box}
.opt input[type=checkbox]+span::before{border-radius:4px}
.opt input:hover+span{border-color:#a8c0c7}
.opt input:checked+span{background:#4a7c8c;border-color:#4a7c8c;color:#ffffff}
.opt input:checked+span::before{border-color:#ffffff;background:#4a7c8c;box-shadow:inset 0 0 0 3px #4a7c8c,inset 0 0 0 8px #ffffff}
.opt input[type=checkbox]:checked+span::before{background:#ffffff;box-shadow:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c8c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.opt input:focus-visible+span{outline:2px solid #4a7c8c;outline-offset:2px}
.opt.na span{color:#5e5d59;border-style:dashed}
.opt.na input:checked+span{color:#ffffff;border-style:solid}

.pp-input{width:100%;padding:12px 14px;border-radius:12px;background:#faf9f5;border:1.5px solid #d5d3c9;color:#141413;font-family:inherit;font-size:16px;outline:none;transition:border-color .18s}
.pp-input:focus{border-color:#4a7c8c}
.pp-input::placeholder{color:#8c8a81}
textarea.pp-input{min-height:96px;resize:vertical;line-height:1.55}
select.pp-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e5d59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center;background-size:16px;padding-left:38px}
.field+.field{margin-top:16px}
.field-label{display:block;font-size:15px;font-weight:700;color:#141413;margin-bottom:6px}
.field-hint{display:block;font-size:14px;color:#5e5d59;line-height:1.5;margin-top:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

.err{font-size:14px;font-weight:600;color:#b53333;margin-top:10px}
.err:empty{display:none}
.step-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}

/* A note that appears under the answer that raised it. Accent tint and a full 1px border, the
   site's replacement for a coloured side stripe. */
.note-card{background:rgba(74,124,140,0.08);border:1px solid rgba(74,124,140,0.35);border-radius:14px;padding:16px;margin-top:14px}
.note-card h3,.note-card h4{font-size:15px;font-weight:800;color:#141413;margin-bottom:5px}
.note-card p{font-size:14.5px;color:#3a3936;line-height:1.6}
.note-card p+p{margin-top:8px}
.note-card.hidden{display:none}

/* ---------- results ---------- */
.rs-eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#3a6675;margin-bottom:10px}
.rs-h{font-size:1.25rem;font-weight:800;color:#141413;letter-spacing:-.01em;margin-bottom:12px}
.rs-section{margin-top:34px}
.res-card{background:#faf9f5;border:1px solid #d5d3c9;border-radius:16px;padding:20px}
.res-card+.res-card{margin-top:12px}
.res-card h3{font-size:17px;font-weight:800;color:#141413;line-height:1.35;margin-bottom:6px}
.res-card p{font-size:15px;color:#3a3936;line-height:1.65}
.res-card p+p{margin-top:8px}
.res-row{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid #f0eee6;font-size:14.5px;color:#3a3936;line-height:1.6}
.res-row b{flex:none;color:#3a6675;font-weight:700;min-width:84px}
.gate-card{background:rgba(74,124,140,0.08);border:1px solid rgba(74,124,140,0.35);border-radius:16px;padding:20px}
.gate-card+.gate-card{margin-top:12px}
.gate-card h3{font-size:17px;font-weight:800;color:#141413;margin-bottom:6px}
.gate-card p{font-size:15px;color:#3a3936;line-height:1.65}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;font-size:14px;padding:5px 12px;border-radius:999px;background:rgba(74,124,140,0.10);color:#3a6675;font-weight:500}
.disc-card{background:#f5f4ed;border:1px solid #d5d3c9;border-radius:14px;padding:18px}
.disc-card h3{font-size:14.5px;font-weight:800;color:#141413;margin-bottom:6px}
.disc-card p{font-size:14px;color:#5e5d59;line-height:1.65}
.disc-card p+p{margin-top:8px}
.act-card{background:#243b47;border-radius:16px;padding:22px 20px;color:#faf9f5}
.act-card h3{font-size:18px;font-weight:800;line-height:1.35;margin-bottom:6px}
.act-card p{font-size:15px;color:#d7e4e8;line-height:1.65}
.act-card a{color:#ffffff;text-decoration:underline;text-underline-offset:3px}
.share-box{background:#faf9f5;border:1px dashed #8c8a81;border-radius:14px;padding:18px;margin-top:14px}
.share-box h3{font-size:16px;font-weight:800;color:#141413;margin-bottom:6px}
.share-box p{font-size:14.5px;color:#3a3936;line-height:1.6}
.code-box{display:inline-block;direction:ltr;font-family:'Inter','Heebo',monospace;font-size:1.35rem;font-weight:700;letter-spacing:.08em;color:#141413;background:#f5f4ed;border:1px solid #d5d3c9;border-radius:10px;padding:6px 14px;margin:6px 0}
.plan-grid{display:grid;gap:12px}
@media (min-width:640px){.plan-grid{grid-template-columns:1fr 1fr}}
.plan-item{background:#faf9f5;border:1px solid #d5d3c9;border-radius:14px;padding:16px 18px}
.plan-item h3{font-size:16px;font-weight:800;color:#141413;margin-bottom:8px}
.plan-item p{font-size:14.5px;color:#3a3936;line-height:1.6}
.plan-item p+p{margin-top:6px}
.plan-item p b{color:#3a6675}
.plan-empty{font-size:14px;color:#5e5d59}

/* ---------- parenting-map report (pm-) ----------
   A dark opening block with the nine-area map, a short plan, and conversation cards. The map
   lights at most two areas to keep and two to check (the tool's own limit), in words, never a
   count or a score. Approved preview: 23.9.2026. */
.pm-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px}
.pm-ic svg{width:18px;height:18px}
.pm-hero{background:#243b47;color:#faf9f5;border-radius:16px;padding:26px 20px 22px}
.pm-eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#aebfc5}
.pm-eyebrow svg{width:16px;height:16px}
.pm-hero h2{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#ffffff;margin-top:8px}
.pm-thesis{font-size:1.15rem;font-weight:500;line-height:1.5;color:#d7e4e8;margin-top:10px}
.pm-thesis b{color:#ffffff;font-weight:800}
.pm-map{margin-top:22px}
.pm-map-cap{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-bottom:12px}
.pm-map-cap h3{font-size:15px;font-weight:700;color:#ffffff}
.pm-map-cap span{font-size:14px;color:#9fb3bb}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pm-tile{display:flex;flex-direction:column;gap:8px;min-height:124px;padding:12px;border-radius:12px;font-size:14px;line-height:1.35;font-weight:600;text-decoration:none;transition:transform .15s,background-color .15s}
.pm-tile .pm-st{margin-top:auto;display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:800}
.pm-tile .pm-st svg{width:15px;height:15px;stroke-width:2.5}
a.pm-tile:hover{transform:translateY(-2px)}
.pm-keep{background:#4a7c8c;color:#ffffff}
.pm-keep .pm-ic{background:rgba(255,255,255,0.18)}
a.pm-keep:hover{background:#3f6c7a}
.pm-check{background:#faf9f5;color:#141413}
.pm-check .pm-ic{background:rgba(74,124,140,0.16);color:#3a6675}
.pm-check .pm-st{color:#3a6675}
a.pm-check:hover{background:#f0eee6}
.pm-quiet{background:rgba(255,255,255,0.06);color:#aebfc5;font-weight:500}
.pm-quiet .pm-ic{color:#9fb3bb}
.pm-unread{border:1px dashed rgba(255,255,255,0.4);color:#9fb3bb;font-weight:500}
.pm-unread .pm-st{font-weight:600}
.pm-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:14px;color:#aebfc5}
.pm-legend span{display:inline-flex;align-items:center;gap:7px}
.pm-sw{width:14px;height:14px;border-radius:4px;flex:none}
.pm-sw.k{background:#4a7c8c}.pm-sw.c{background:#faf9f5}.pm-sw.q{background:rgba(255,255,255,0.14)}.pm-sw.u{border:1px dashed rgba(255,255,255,0.55)}
.pm-map-note{font-size:14px;line-height:1.6;color:#aebfc5;margin-top:10px}
.pm-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pm-jump a{flex:1 1 200px;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700;font-size:15.5px;transition:background-color .15s}
.pm-jump a svg{width:18px;height:18px;flex:none}
.pm-jump a .pm-go{margin-inline-start:auto}
.pm-jump .k{background:#4a7c8c;color:#ffffff}
.pm-jump .k:hover{background:#3f6c7a}
.pm-jump .c{background:#faf9f5;color:#141413}
.pm-jump .c svg:first-child{color:#3a6675}
.pm-jump .c:hover{background:#f0eee6}
.pm-ctx{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.14);display:grid;gap:8px}
.pm-ctx p{font-size:14px;color:#aebfc5;font-weight:600}
.pm-chips{display:flex;flex-wrap:wrap;gap:6px}
.pm-chip{font-size:14px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,0.09);color:#d7e4e8}
@media (max-width:460px){.pm-hero{padding:22px 14px 18px}.pm-hero h2{font-size:1.75rem}.pm-grid{gap:6px}.pm-tile{padding:10px 9px;min-height:132px}.pm-tile .pm-ic{width:28px;height:28px}}

.pm-sec{margin-top:40px}
.pm-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pm-head .pm-ic{width:44px;height:44px;border-radius:12px}
.pm-head .pm-ic svg{width:22px;height:22px}
.pm-head h3{font-size:1.4rem;font-weight:800;color:#141413;letter-spacing:-.01em;line-height:1.2}
.pm-head p{font-size:14.5px;color:#5e5d59;margin-top:2px}
.pm-ic.k{background:#4a7c8c;color:#ffffff}
.pm-ic.c{background:rgba(74,124,140,0.16);color:#3a6675}
.pm-ic.p{background:#e8e6dc;color:#3a6675}

.pm-plan{background:#faf9f5;border:1px solid #d5d3c9;border-radius:16px;overflow:hidden}
.pm-task{position:relative;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;cursor:pointer}
.pm-task+.pm-task{border-top:1px solid #f0eee6}
.pm-task:hover{background:#f5f4ed}
.pm-task input{position:absolute;opacity:0;width:1px;height:1px}
.pm-box{width:26px;height:26px;border-radius:8px;border:2px solid #4a7c8c;display:grid;place-items:center;flex:none;margin-top:1px;color:transparent;transition:background-color .15s}
.pm-box svg{width:16px;height:16px;stroke-width:3}
.pm-task input:checked+.pm-box{background:#4a7c8c;color:#ffffff}
.pm-task input:focus-visible+.pm-box{outline:2px solid #4a7c8c;outline-offset:3px}
.pm-tx{display:flex;flex-direction:column;gap:2px}
.pm-tx b{font-size:16px;font-weight:700;color:#141413;line-height:1.45}
.pm-tx span{font-size:14px;color:#5e5d59}
.pm-task input:checked~.pm-tx b{color:#5e5d59;text-decoration:line-through;text-decoration-color:#8c8a81}

.pm-keep-grid{display:grid;gap:12px}
@media (min-width:600px){.pm-keep-grid{grid-template-columns:1fr 1fr}.pm-keep-grid.cm-3{grid-template-columns:1fr 1fr 1fr}}
.pm-card{background:#faf9f5;border:1px solid #d5d3c9;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;scroll-margin-top:5rem}
.pm-card+.pm-card{margin-top:14px}
.pm-keep-grid .pm-card+.pm-card{margin-top:0}
.pm-card h4{font-size:1.1rem;font-weight:800;color:#141413;line-height:1.35}
.pm-card p{font-size:15px;color:#3a3936;line-height:1.65}
.pm-dom{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#3a6675}
.pm-dom .pm-ic{width:30px;height:30px}
.pm-bubble{position:relative;background:#ecefed;color:#141413;border-radius:16px;padding:18px 18px 14px;margin-top:6px}
.pm-bubble::after{content:"";position:absolute;bottom:-9px;inset-inline-start:28px;border-width:10px 10px 0;border-style:solid;border-color:#ecefed transparent transparent}
.pm-bubble .pm-k{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#3a6675;margin-bottom:6px}
.pm-bubble .pm-k svg{width:16px;height:16px}
.pm-bubble q{display:block;font-size:1.25rem;font-weight:700;line-height:1.45;color:#141413;quotes:"”" "”"}
.pm-copy{font:inherit;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:44px;padding:6px 14px;border-radius:10px;border:1px solid #4a7c8c;background:transparent;color:#3a6675;cursor:pointer}
.pm-copy svg{width:16px;height:16px}
.pm-copy:hover{background:rgba(74,124,140,0.12)}
.pm-copy:focus-visible{outline:2px solid #3a6675;outline-offset:2px}
.pm-do{display:flex;gap:12px;align-items:flex-start;margin-top:10px;padding:14px 16px;border-radius:12px;background:rgba(74,124,140,0.09)}
.pm-do .pm-ic{width:30px;height:30px;background:#4a7c8c;color:#ffffff}
.pm-do b{display:block;font-size:14px;color:#3a6675;font-weight:700}
.pm-do span{font-size:15px;color:#141413;font-weight:500;line-height:1.55}
.pm-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;font-size:15px;text-decoration:none;color:#3a6675}
.pm-more svg{width:16px;height:16px}
.pm-more:hover{text-decoration:underline;text-underline-offset:3px}
.pm-unread-line{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:14.5px;line-height:1.6;color:#5e5d59;padding:14px 16px;border:1px dashed #8c8a81;border-radius:12px}
.pm-unread-line svg{width:18px;height:18px;flex:none;margin-top:3px}
.pm-unread-line b{color:#141413}

.pm-tl{position:relative;display:flex;flex-direction:column;gap:14px;padding-inline-start:34px}
.pm-tl::before{content:"";position:absolute;inset-inline-start:11px;top:14px;bottom:14px;width:2px;background:#d5d3c9}
.pm-tl-item{position:relative;background:#faf9f5;border:1px solid #d5d3c9;border-radius:16px;padding:18px 20px}
.pm-dot{position:absolute;inset-inline-start:-34px;top:16px;width:24px;height:24px;border-radius:50%;background:#faf9f5;border:2px solid #4a7c8c;display:grid;place-items:center;color:#3a6675}
.pm-dot svg{width:12px;height:12px;stroke-width:3}
.pm-tl-item h4{font-size:16px;font-weight:800;color:#141413;margin-bottom:4px}
.pm-tl-item p{font-size:15px;color:#3a3936;line-height:1.65}
.pm-tl-q{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding-top:12px;border-top:1px solid #f0eee6}
.pm-tl-q svg{width:18px;height:18px;flex:none;color:#3a6675;margin-top:3px}
.pm-tl-q span{font-size:15px;color:#141413;font-weight:500;line-height:1.6}

.pm-next{background:#243b47;border-radius:16px;padding:26px 22px;color:#faf9f5}
.pm-next h3{font-size:1.35rem;font-weight:800;color:#ffffff;line-height:1.3}
.pm-next>p{font-size:15px;color:#d7e4e8;line-height:1.65;margin-top:6px}
.pm-steps{display:grid;gap:10px;margin-top:18px}
@media (min-width:600px){.pm-steps{grid-template-columns:repeat(3,1fr)}}
.pm-steps a{display:flex;flex-direction:column;gap:8px;background:#2c4754;border-radius:12px;padding:16px;text-decoration:none;color:#faf9f5;transition:background-color .15s}
.pm-steps a:hover{background:#34525f}
.pm-steps .pm-n{width:30px;height:30px;border-radius:50%;background:#faf9f5;color:#243b47;display:grid;place-items:center;font-weight:800;font-size:15px}
.pm-steps b{font-size:16px;color:#ffffff}
.pm-steps span{font-size:14px;color:#d7e4e8;line-height:1.5}
.pm-steps .pm-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#ffffff}
.pm-steps .pm-go svg{width:16px;height:16px}

details.pm-disc{background:#f5f4ed;border:1px solid #d5d3c9;border-radius:14px}
details.pm-disc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 18px;font-size:14.5px;font-weight:800;color:#141413}
details.pm-disc summary::-webkit-details-marker{display:none}
details.pm-disc summary svg{width:18px;height:18px;transition:transform .2s}
details.pm-disc[open] summary svg{transform:rotate(180deg)}
details.pm-disc .pm-in{padding:0 18px 16px}
details.pm-disc .pm-in p{font-size:14px;color:#5e5d59;line-height:1.65}
details.pm-disc .pm-in p+p{margin-top:8px}
@media (prefers-reduced-motion:reduce){.pm-tile,.pm-jump a,.pm-box,.pm-steps a,details.pm-disc summary svg{transition:none}a.pm-tile:hover{transform:none}}

/* The comparison screen: two files, each with its own code. */
.file-row{display:grid;grid-template-columns:1fr 190px;gap:14px;align-items:end}
@media (max-width:560px){.file-row{grid-template-columns:1fr}}
input[type=file].pp-input{padding:9px 10px;font-size:14px}
input.code-input{direction:ltr;text-align:left;letter-spacing:.08em;text-transform:uppercase;font-family:'Inter','Heebo',monospace}

/* No .hidden rule here: Tailwind owns it, and an !important copy beat md:flex and hid the nav tabs. */
.print-only{display:none}

@media (prefers-reduced-motion:reduce){.progress-bar,.opt span{transition:none}}

@media print{
  @page{size:A4;margin:14mm}
  html,body{background:#ffffff!important;color:#141413!important}
  body *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  nav,footer,.no-print,#intro{display:none!important}
  .print-only{display:block!important}
  /* Only the page-level sections (#intro, #flow). A wider `main section` also zeroed every card
     a tool happened to build as <section>, and put its text on the frame three times. */
  main > section{padding:0!important}
  main .max-w-2xl,main .max-w-3xl{max-width:100%!important;padding:0!important}
  .res-card,.gate-card,.disc-card,.act-card{break-inside:avoid}
  /* Support card: a long moment may continue on the next page rather than drag its whole row
     there and leave a page nearly empty; its title never ends a page alone, and the signature
     line never stands alone on a last page. */
  .plan-item{break-inside:auto}
  .plan-item h3{break-after:avoid;page-break-after:avoid}
  .card-end{break-inside:avoid;page-break-inside:avoid}
  /* A section heading never ends a page alone: it travels with the card under it. */
  .rs-h{break-after:avoid;page-break-after:avoid}
  /* .print-head already carries the tool name and date on paper. */
  .rs-eyebrow{display:none!important}
  .rs-section{margin-top:18px;break-inside:auto}
  .act-card{background:#ffffff!important;color:#141413!important;border:1px solid #d5d3c9}
  .act-card p{color:#3a3936!important}
  .act-card a{color:#141413!important}
  .print-head{display:flex!important;justify-content:space-between;align-items:baseline;border-bottom:1px solid #d5d3c9;padding-bottom:8px;margin-bottom:18px}
  .print-head b{font-size:18px}
  .print-head span{font-size:12px;color:#5e5d59}
  .print-frame{font-size:13px;color:#3a3936;margin:-8px 0 14px}
  .print-sign{display:block!important;margin-top:22px;padding-top:8px;border-top:1px solid #d5d3c9;font-size:12px;color:#5e5d59}
  /* Parenting-map report on paper: the dark blocks turn light, and the map stays readable in ink. */
  .pm-hero,.pm-next,.pm-bubble{background:#ffffff!important;color:#141413!important;border:1px solid #d5d3c9}
  .pm-hero h2,.pm-eyebrow{display:none}
  .pm-thesis,.pm-thesis b,.pm-map-cap h3,.pm-next h3,.pm-steps b,.pm-bubble q{color:#141413!important}
  .pm-thesis{margin-top:0}
  .pm-map{margin-top:12px}
  .pm-map-cap span,.pm-legend,.pm-map-note,.pm-ctx p,.pm-chip,.pm-next>p,.pm-steps span,.pm-bubble .pm-k{color:#3a3936!important}
  .pm-tile{min-height:0;padding:8px 9px;gap:4px}
  .pm-check,.pm-quiet{border:1px solid #d5d3c9}
  .pm-quiet{background:#f5f4ed!important}
  .pm-unread{border-color:#8c8a81}
  .pm-sw.q{background:#f5f4ed;border:1px solid #d5d3c9}.pm-sw.c{border:1px solid #d5d3c9}.pm-sw.u{border-color:#8c8a81}
  .pm-chip{background:#f5f4ed}
  .pm-ctx{border-color:#d5d3c9}
  .pm-bubble::after{display:none}
  .pm-bubble{padding:12px 14px}
  .pm-steps a{background:#f5f4ed!important;color:#141413!important;padding:10px 12px}
  .pm-steps .pm-n{background:#243b47;color:#ffffff}
  .pm-sec{margin-top:18px}
  /* Paper is denser than the screen: no decorative icons, and each point's action is left to the
     plan above it, where it is already listed. The page budget is 3 (docs/parents/README.md). */
  .pm-tl-item,.pm-plan,.pm-hero,.pm-next,.pm-bubble,.pm-task,.pm-card,details.pm-disc{break-inside:avoid}
  .pm-head{break-after:avoid;page-break-after:avoid;margin-bottom:8px}
  .pm-head .pm-ic,.pm-head p,.pm-tile .pm-ic,.pm-dom .pm-ic,.pm-do,.pm-tl::before,.pm-dot{display:none!important}
  .pm-head h3{font-size:1.15rem}
  /* The print padding of the hero, tighter than on screen. */
  .pm-hero{padding:12px 14px!important}
  .pm-map-cap{margin-bottom:6px}
  .pm-grid{gap:5px}
  .pm-tile{padding:6px 8px;gap:2px;line-height:1.3}
  .pm-legend{margin-top:6px;gap:4px 14px}
  .pm-map-note{margin-top:4px;line-height:1.45}
  .pm-ctx{margin-top:8px;padding-top:8px;gap:4px}
  .pm-chip{padding:2px 10px}
  .pm-task{padding:7px 12px;gap:10px}
  .pm-box{width:18px;height:18px;border-width:1.5px;border-radius:5px}
  .pm-tx b{font-size:14.5px;line-height:1.4}
  .pm-keep-grid{gap:8px}
  .pm-card{padding:12px 14px;gap:5px}
  .pm-card+.pm-card{margin-top:8px}
  .pm-card h4{font-size:15.5px}
  .pm-card p,.pm-tl-item p,.pm-tl-q span{font-size:14px;line-height:1.5}
  .pm-bubble{padding:8px 12px;margin-top:2px}
  .pm-bubble .pm-k{margin-bottom:0}
  .pm-bubble q{font-size:15.5px;line-height:1.4}
  .pm-unread-line{margin-top:8px;padding:8px 12px;font-size:14px;line-height:1.5}
  .pm-tl{padding-inline-start:0;gap:8px}
  .pm-tl-item{padding:10px 14px}
  .pm-tl-q{margin-top:6px;padding-top:6px}
  .pm-next{padding:12px 14px}
  .pm-next>p{margin-top:2px}
  .pm-steps{gap:6px;margin-top:8px}
  .pm-steps a{padding:8px 10px!important;gap:3px}
  .pm-steps .pm-n{width:24px;height:24px;font-size:14px;color:#ffffff!important}
  .pm-steps span{line-height:1.4}
  details.pm-disc summary{min-height:0;padding:8px 14px}
  details.pm-disc .pm-in{padding:0 14px 10px}
  details.pm-disc::details-content{content-visibility:visible;display:block}
  details.pm-disc summary svg{display:none}
}