/* Page-local tool surfaces. Shared tokens/components come from app.css. */
.tools-page,.practice-page{background:var(--bg)}
.page{padding-top:clamp(28px,6vw,64px)}
.tool-hero{display:grid;gap:var(--space-3);max-width:760px;padding:0 0 clamp(28px,5vw,52px)}
.tool-hero h1{max-width:14ch}.tool-hero .lead{max-width:58ch}
.tool-grid{display:grid;gap:var(--space-4);padding-bottom:var(--space-10)}
.tool-card{position:relative;min-height:190px;display:flex;align-items:flex-end;padding:var(--space-6);overflow:hidden;background:var(--surface);border-color:var(--line);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.tool-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:var(--shadow-raised)}.tool-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--primary)}
.tool-card:nth-child(2)::before{background:var(--accent)}.tool-card:nth-child(3)::before{background:var(--ok)}.tool-card:nth-child(4)::before{background:var(--warn)}
.tool-card .tool-icon{position:absolute;top:var(--space-6);left:var(--space-6);display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--primary-soft);color:var(--primary)}
.tool-card:nth-child(2) .tool-icon{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}.tool-card:nth-child(3) .tool-icon{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}.tool-card:nth-child(4) .tool-icon{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn)}
.tool-card .tool-icon svg{width:25px;height:25px}.tool-card h2{margin:0 0 6px;font-size:clamp(1.25rem,2vw,1.5rem)}.tool-card p{max-width:28ch;margin:0;color:var(--muted)}.tool-card .arrow{margin-inline-start:auto;color:var(--primary);font-size:1.7rem;line-height:1}
.tool-shell{display:grid;gap:var(--space-6);max-width:1120px;margin:0 auto;padding-bottom:var(--space-10)}.tool-panel{display:grid;gap:var(--space-6);padding:clamp(18px,4vw,36px);background:var(--surface);border-color:var(--line)}.tool-form{display:grid;gap:var(--space-5)}
.seg-wrap{display:grid;gap:var(--space-2)}.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);padding:4px;background:var(--surface-2);border-radius:var(--radius)}.seg label{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;border-radius:var(--radius-sm);font-weight:750;cursor:pointer;text-align:center}.seg label:has(input:checked){background:var(--bg);color:var(--primary);box-shadow:var(--shadow-soft)}.seg input,.choice input{accent-color:var(--primary)}
.skill-grid{display:grid;gap:var(--space-3)}.skill-card{display:grid;grid-template-columns:1fr minmax(120px,170px);gap:var(--space-3);align-items:center;padding:var(--space-4);background:var(--bg)}.skill-card label{font-weight:800}.skill-card .result{grid-column:1/-1;min-height:30px;display:flex;align-items:center;padding-top:var(--space-2);border-top:1px solid var(--line);font-size:.92rem;font-weight:750;color:var(--muted)}.skill-card .result:not(:empty){color:var(--primary)}.skill-card.is-lowest{border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg));padding:calc(var(--space-4) - 1px)}.skill-card.is-lowest .result{color:var(--accent)}
.score-input{width:100%;min-height:48px;padding:10px 14px;font-size:18px;font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink)}.score-input:focus{outline:3px solid color-mix(in srgb,var(--primary) 25%,transparent);outline-offset:1px;border-color:var(--primary)}
.summary{display:grid;gap:var(--space-2);background:var(--night);color:var(--night-ink);border:0;box-shadow:var(--shadow-raised)}.summary h2{font-size:1.25rem}.summary p{margin:0;color:color-mix(in srgb,var(--night-ink) 78%,var(--night))}
.date-note,.source-note{font-size:.85rem;color:var(--muted)}.notice.tool-footnote{margin:var(--space-6) 0 0}.inline-link{color:var(--primary);font-weight:700}
.tool-cta{display:grid;gap:var(--space-4);align-items:center;padding:clamp(20px,4vw,32px);background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));border-radius:var(--radius-lg)}.tool-cta h2{font-size:clamp(1.45rem,3vw,2rem);max-width:18ch}.tool-cta p{margin:0;color:var(--muted);max-width:55ch}.tool-cta .btn{justify-self:start}
.result-card{display:none}.result-card.show{display:block}.result-card h2{font-size:1.5rem}.result-card ul{padding-inline-start:1.2rem;margin-bottom:0}.result-card li+li{margin-top:var(--space-3)}.question-list .choice{min-height:56px;padding:14px 16px;font-size:1.02rem}.question-list .choice input{width:20px;height:20px;flex:0 0 auto}.question-list>.btn{margin-top:var(--space-2)}.tools-page .result-card.show{border:2px solid var(--primary);background:var(--primary-soft);box-shadow:var(--shadow-raised)}.nclc-shell .summary{min-height:100%;align-content:center}.nclc-shell .summary p{font-size:1.08rem}.nclc-shell .summary h2{margin:0}
.question-list{display:grid;gap:var(--space-4);max-width:760px}.question{display:grid;gap:var(--space-2);padding:clamp(18px,3vw,28px)}.question legend{padding:0;font:720 1.2rem/1.2 var(--font-heading)}.choice{display:flex;align-items:center;gap:var(--space-3);min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer}.choice:has(input:checked){border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:750}
.timer-panel{background:var(--night);color:var(--night-ink)}.timer-panel label,.timer-panel .field-label{color:var(--night-ink)}.timer-panel .source-note{color:color-mix(in srgb,var(--night-ink) 78%,var(--night))}.timer-wrap{text-align:center;padding:var(--space-4) 0}.timer-wrap #phase{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:800;color:color-mix(in srgb,var(--primary) 70%,var(--night-ink))}.ring{width:min(72vw,300px);height:min(72vw,300px);margin:var(--space-6) auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--primary) var(--ring,0deg),var(--line) 0);position:relative}.ring:after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--night)}.ring strong{position:relative;z-index:1;font:750 clamp(3rem,14vw,5.2rem)/1 var(--font-heading);font-variant-numeric:tabular-nums;letter-spacing:-.08em}.timer-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}.timer-actions .btn-ghost{color:var(--night-ink);border-color:var(--line)}.timer-actions .btn-ghost:hover{background:var(--surface-2);color:var(--night-ink)}.recording-list{display:grid;gap:var(--space-3)}.recording-item{display:grid;grid-template-columns:1fr auto;gap:var(--space-2);align-items:center}.recording-item audio{grid-column:1/-1;width:100%}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.stats-grid .stat{min-height:90px;padding:var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.counter-output{font:750 clamp(1.8rem,6vw,2.8rem)/1 var(--font-heading);letter-spacing:-.06em}.word-stats{margin-top:0}.practice-state{padding:12px 14px;border-radius:var(--radius-sm);font-weight:750}.practice-state.under{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn)}.practice-state.in{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}.practice-state.over{background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--bad)}.accent-row{display:flex;flex-wrap:wrap;gap:6px}.accent{min-width:42px;min-height:42px;padding:4px 8px}.tool-form textarea{min-height:210px;line-height:1.7}
@media(min-width:600px){.tool-grid{grid-template-columns:repeat(2,1fr)}.skill-grid{grid-template-columns:repeat(2,1fr)}.tool-cta{grid-template-columns:1fr auto}.tool-cta .btn{justify-self:end}.question-list{margin-inline:auto}}
@media(min-width:768px){.tool-card{min-height:240px}.tool-card .arrow{font-size:2rem}}
@media(min-width:1024px){.tool-grid{grid-template-columns:repeat(4,1fr)}.tool-card{min-height:270px}.tool-shell{grid-template-columns:minmax(0,1fr) minmax(300px,320px);align-items:start}.tool-shell .tool-cta{grid-column:2;grid-template-columns:1fr;align-self:stretch}.tool-shell .tool-cta .btn{justify-self:start}.tool-shell .tool-footnote{grid-column:1/-1}.tool-shell .tool-panel{grid-column:1}.nclc-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.nclc-shell .tool-hero{grid-column:1/-1}.nclc-shell #nclc-form{grid-column:1}.nclc-shell .summary{grid-column:2}.nclc-shell .tool-cta{grid-column:1/-1}.nclc-shell .tool-footnote,.nclc-shell .source-note{grid-column:1/-1}}

/* Responsive tool refinements from design review. */
.tool-hero h1{font-size:clamp(2.5rem,6vw,4.75rem);max-width:18ch;text-wrap:balance}
.tool-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:start;padding-top:96px;min-height:210px}
.tool-card .arrow{align-self:center;margin-inline-start:var(--space-3)}
.nclc-shell .summary{min-height:220px;align-self:start;align-content:start;padding:32px;position:sticky;top:116px}
.timer-panel .field>label:has(#record){display:flex;align-items:center;gap:10px;min-height:44px}
.timer-panel .field>label input[type="checkbox"]{width:20px;height:20px;min-width:20px;min-height:20px;padding:0;flex:0 0 20px}
@media(min-width:1024px){.tool-card{min-height:220px}.tool-shell .tool-cta{align-self:start;min-height:0}}
@media(max-width:699px){.tools-page .tabbar{display:none}.tools-page .page{padding-bottom:64px}}
.timer-actions #pause{min-height:44px}