/* Shared component metrics. Keep equivalent actions and study content aligned across routes. */
:root {
 --text-body:1rem; --text-control:.875rem; --text-meta:.8125rem;
 --title-card:1.5rem; --title-panel:1.125rem;
 --space-panel:20px; --card-padding:20px; --inset-padding:16px;
 --radius-card:18px; --radius-control:12px; --control-height:44px;
}
main[data-view] h2 { line-height:1.35; }
main[data-view] h3 { line-height:1.4; }
main[data-view] .page-heading { gap:20px; margin-bottom:24px; }
main[data-view] .sub { margin-top:8px; line-height:1.6; }
main[data-view] .eyebrow { font-size:.75rem; line-height:1.5; letter-spacing:.1em; margin-bottom:8px; }
main[data-view] :is(.btn,.icon-button,.segment,.filter-select,.select-full,.tutor-followups button,.tutor-prompts button) {
 min-height:var(--control-height); border-radius:var(--radius-control); font-size:var(--text-control); line-height:1.4;
}
main[data-view] :is(.btn,.tutor-followups button,.tutor-prompts button) { padding:11px 16px; gap:8px; font-weight:600; }
main[data-view] :is(.tutor-followups button,.tutor-prompts button) { background:white; color:var(--ink); border:1px solid var(--line); box-shadow:var(--control-shadow); }
main[data-view] :is(.tutor-followups button,.tutor-prompts button):hover { background:#edf5df; border-color:#bed495; }
main[data-view] :is(.vocab-stepper,.vocab-deck-navigation,.concept-stepper,.deck-navigation) { gap:12px; margin:12px 0; min-height:44px; font-size:var(--text-control); }
main[data-view] :is(.rating-row,.tutor-followups,.tutor-links) { gap:12px; margin-top:16px; }
main[data-view] :is(.vocab-card,.guided-word-card,.guided-concept-card,.guided-question,.panel,.side-panel,.account-panel,.map-card,.stat-card,.compare-card,.tutor-widget) {
 padding:var(--card-padding); border-radius:var(--radius-card);
}
main[data-view] :is(.vocab-card,.guided-word-card) { background:white; border:1px solid var(--line); }
main[data-view] :is(.vocab-card,.guided-word-card,.guided-concept-card)>.section-line { margin-bottom:12px; min-height:32px; }
main[data-view] :is(.vocab-term h2,.guided-word-card>h2,.guided-concept-card>h2,.guided-question>h2,.glossary-item h2) { font-size:var(--title-card); line-height:1.35; letter-spacing:-.025em; }
main[data-view] :is(.guided-word-card>h2,.guided-concept-card>h2,.guided-question>h2) { margin:12px 0 16px; }
main[data-view] :is(.side-panel h2,.panel h2,.account-panel h2,.map-card h2,.widget-heading h3) { font-size:var(--title-panel); }
main[data-view] :is(.vocab-meaning,.guided-definition,.vocab-example,.guided-definition-example,.definition-example) {
 padding:var(--inset-padding); margin:12px 0 0; border:1px solid transparent; border-radius:var(--radius-control);
}
main[data-view] :is(.vocab-meaning,.guided-definition) { background:#eaf2db; }
main[data-view] :is(.vocab-example,.guided-definition-example,.definition-example) { background:#f3f6ef; }
main[data-view] :is(.guided-definition>span,.guided-definition-example>span,.definition-example>span) { display:block; color:var(--green); font-size:.75rem; font-weight:700; line-height:1.5; letter-spacing:.1em; margin:0 0 8px; }
main[data-view] :is(.vocab-meaning p,.vocab-example p,.guided-definition>p,.guided-definition-example>p,.definition-example p,.guided-concept-explanation,.chat-prose,.chat-prose p) { font-size:var(--text-body); line-height:1.65; }
main[data-view] :is(.guided-definition>p,.guided-definition-example>p) { margin:0; }
main[data-view] :is(.vocab-memory,.memory-hook) { font-size:var(--text-control); line-height:1.6; margin-top:16px; }
/* Secondary actions inside definitions sit below the example, aligned with its text block. */
main[data-view="learn"] .lesson-definition > .btn.ghost {
 margin:16px 0 20px; padding:10px 14px; min-height:44px;
 background:transparent; color:var(--green); border:1px solid var(--line);
 border-radius:10px; box-shadow:none; transform:none;
 transition:background-color 150ms ease,border-color 150ms ease;
}
main[data-view="learn"] .lesson-definition > .btn.ghost:hover {
 background:var(--surface-soft); border-color:var(--green); box-shadow:none; transform:none;
}
main[data-view="learn"] .lesson-definition > .btn.ghost:active { background:var(--surface-soft); transform:none; box-shadow:none; }
main[data-view="learn"] .lesson-definition > .btn.ghost .icon { width:16px; height:16px; }
main[data-view] :is(.small-note,.source-tag,.stat-row,.tutor-form-footer>span) { font-size:var(--text-meta); line-height:1.5; }
main[data-view] :is(.vocab-search input,.account-form input,.tutor-context select,.filter-select,.select-full,.tutor-form textarea) { border:1px solid #b8c8c1; border-radius:var(--radius-control); font-size:var(--text-body); line-height:1.5; padding:11px 14px; }
:is(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--green); outline-offset:3px; }
main[data-view="assistant"] .chat-message:not(.user) { padding:var(--card-padding); border-radius:var(--radius-card); }
main[data-view="assistant"] .chat-message { margin-bottom:24px; }
main[data-view="assistant"] .chat-message>strong { margin-bottom:12px; }
main[data-view="assistant"] .chat-prose p { margin-bottom:16px; }
main[data-view="assistant"] .chat-prose p:last-child { margin-bottom:0; }
main[data-view="assistant"] .tutor-widget { margin-top:16px; }
main[data-view="assistant"] .tutor-form textarea { border-radius:var(--radius-control); }
main[data-view="assistant"] .tutor-form-footer .btn { min-height:var(--control-height); padding:11px 16px; }
main[data-view="assistant"] .tutor-form-footer>span { font-size:.75rem; line-height:1.5; }
@media(max-width:680px) {
 :root { --card-padding:16px; --inset-padding:14px; --title-card:1.3rem; }
 main[data-view] .page-heading { gap:16px; margin-bottom:20px; }
 main[data-view] :is(.rating-row,.tutor-followups,.tutor-links) { gap:8px; flex-wrap:wrap; }
}

/* One compact composer row, with supporting text below it. */
main[data-view="assistant"] .tutor-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding-block:12px max(12px,env(safe-area-inset-bottom)); }
main[data-view="assistant"] .tutor-form>label { grid-column:1; grid-row:1; display:block; min-width:0; }
main[data-view="assistant"] .tutor-form textarea { display:block; height:56px; min-height:56px; padding:14px; line-height:26px; }
main[data-view="assistant"] .tutor-form-footer { display:contents; }
main[data-view="assistant"] .tutor-form-footer .btn { grid-column:2; grid-row:1; margin:0; }
main[data-view="assistant"] .tutor-form-footer>span { grid-column:1/-1; grid-row:2; margin:0; }
main[data-view="assistant"] .tutor-form>.account-error { grid-column:1/-1; grid-row:3; margin:0; }
@media(max-width:680px) {
 main[data-view="assistant"] .tutor-form { gap:8px; }
 main[data-view="assistant"] .tutor-form textarea { height:72px; min-height:72px; padding:10px 12px; line-height:24px; }
 main[data-view="assistant"] .tutor-form-footer .btn { padding:11px 12px; }
}

.billing-panel { margin-top:24px; } .billing-balance { display:flex; gap:12px; align-items:baseline; } .billing-balance strong { font-size:2rem; font-variant-numeric:tabular-nums; } .billing-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; } .billing-plans article { border:1px solid var(--line); border-radius:12px; padding:16px; } .billing-plans p { margin:12px 0; } @media(max-width:900px){.billing-plans{grid-template-columns:1fr;}}

.widget-value { font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }

.chat-message .widget-value { display:flex; align-items:center; gap:0; line-height:1.25; letter-spacing:0; }
.widget-value .number-slot { display:block; flex:none; height:1.25em; line-height:1.25; }
.widget-value .number-digit { position:relative; width:1ch; text-align:center; height:1.25em; line-height:1.25; overflow:hidden; }
.widget-value .number-glyph { position:absolute; inset:0; display:block; line-height:inherit; text-align:center; }

main[data-view="assistant"] .widget-chart { grid-column:1/-1; min-width:0; }
.tutor-chart { margin:0; padding:16px; background:white; border:1px solid var(--line); border-radius:12px; }
.tutor-chart svg { width:100%; max-height:260px; display:block; overflow:visible; }
.tutor-chart text { fill:var(--muted); font-size:11px; }
.chart-grid { stroke:var(--line); stroke-width:1; }
.chart-current,.chart-reference,.chart-saved { fill:none; stroke-width:2.5; stroke-linecap:round; }
.chart-current { stroke:var(--green); }.chart-reference { stroke:#899b92; }.chart-saved { stroke:#a7792a; stroke-dasharray:5 5; }.chart-marker { fill:var(--green); stroke:white; stroke-width:2; }
.tutor-chart figcaption { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.75rem; color:var(--muted); margin-top:8px; }
main[data-view="assistant"] .widget-actions { display:flex; flex-wrap:wrap; gap:8px; grid-column:1/-1; }

.chat-study-tool { margin:20px 0; padding:20px; border:1px solid var(--line); border-radius:18px; background:#f4f7f1; }
.chat-study-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; }
.chat-study-card { background:white; padding:20px; border:1px solid var(--line); border-radius:14px; }
.chat-study-card h3 { font-size:1.25rem; margin:0 0 16px; }.chat-study-card h4 { margin:8px 0; }
.chat-study-card p { margin:12px 0; }.chat-study-card .btn { margin-top:8px; }
.chat-study-options { display:grid; gap:10px; }.chat-study-options .answer-option { width:100%; text-align:left; }
.chat-study-stats { display:flex; gap:16px; flex-wrap:wrap; margin:16px 0; }.chat-study-stats strong { display:block; font-size:1.5rem; }
@media(max-width:680px){.chat-study-tool,.chat-study-card {padding:14px;}}