/* Result cards, "What's Yours?" landing and Course Quests in the Void Deck Playground skin.
   Tokens only (assets/tokens.css): 3px outlines, pill choices with a pressed edge, Nunito Sans. */
.card-options{margin:0 0 var(--space-4);padding:14px 16px;border:3px solid var(--outline);border-radius:18px;background:var(--card);min-width:0}
.card-options legend{padding:0 6px;font:800 1rem/1.3 var(--font-head);color:var(--ink)}
.card-format{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.card-format label,.card-hide{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:3px solid var(--field-border);border-radius:999px;font:700 .875rem/1.2 var(--font-body);cursor:pointer;background:var(--card);color:var(--ink);box-shadow:var(--press)}
.card-format label:has(input:checked),.card-hide:has(input:checked){border-color:var(--blue);background:var(--tile-sky);box-shadow:none}
.card-format input,.card-hide input{margin:0}
.card-format label:focus-within,.card-hide:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.card-options p{margin:10px 0 0}
.card-preview-slot{margin:0 0 var(--space-4)}
.card-preview{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:14px;align-items:start;padding:12px;border:3px solid var(--outline);border-radius:18px;background:var(--soft)}
.card-preview-image{display:block;width:100%;height:auto;border-radius:12px;border:2px solid var(--hair);background:var(--conc)}
.card-preview-actions{display:flex;flex-direction:column;gap:8px}
.card-preview-actions .btn{min-height:44px;justify-content:center;text-align:center}
.card-preview-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.card-preview-help{margin:0}
.card-preview-manual label{display:block;margin:0 0 4px;font-size:.875rem}
.card-preview-manual textarea{box-sizing:border-box;width:100%;padding:8px 10px;border:3px solid var(--field-border);border-radius:12px;background:var(--card);color:var(--ink);font:.9375rem/1.4 var(--font-body);resize:vertical}
/* "What's Yours?": a rubber stripe down the left edge in the page's stage colour. */
.whats-yours{position:relative;margin:0 0 var(--space-block);padding:18px 20px 20px 36px;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm)}
.whats-yours::before{content:"";position:absolute;left:12px;top:18px;bottom:18px;width:8px;border-radius:8px;background:var(--rubber),var(--stage,var(--red))}
.whats-yours h2{margin:2px 0 6px;font-size:1.5rem}
.whats-yours p{margin:0 0 12px;max-width:44rem}
.whats-yours .btn{min-height:44px}
.course-quest{margin:var(--space-8) 0;padding:22px;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card)}
.course-quest h3{font-size:1.3125rem;margin:0 0 12px}
.course-quest fieldset{border:0;margin:0 0 12px;padding:0;min-width:0}
.course-quest legend{font-weight:700;margin-bottom:10px;line-height:1.6;padding:0}
.course-quest-option{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:10px 14px;margin:0 0 8px;border:3px solid var(--field-border);border-radius:14px;cursor:pointer;line-height:1.5;background:var(--card)}
.course-quest-option input{margin:0;flex:none}
/* The 24px box leaves the text less room on a small phone at large text: a little less padding, and a
   long word wraps inside the card instead of spilling out of it. */
.course-quest-option>span{min-width:0;overflow-wrap:break-word}
@media(max-width:400px){.course-quest-option{gap:8px;padding-inline:10px}}
.course-quest-option:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.course-quest-option[data-state=correct]{border-color:var(--green);background:var(--tile-mint)}
.course-quest-tag{display:block;width:fit-content;margin-top:6px;padding:1px 10px;border:2px solid var(--green-ink);border-radius:999px;font-weight:800;font-size:.875rem;color:var(--ink)}
.course-quest-option[data-state=chosen]{border-style:dashed}
.course-quest .btn{min-height:44px}
.course-quest-feedback:empty{display:none}
.course-quest-feedback{margin:12px 0 0;padding:12px 14px;border:2px dashed var(--note-edge);background:var(--card);border-radius:14px}
.course-complete{margin:var(--space-8) 0;padding:22px;border:3px solid var(--outline);border-radius:var(--radius);background:var(--tile-butter)}
.course-complete h3{font-size:1.3125rem;margin:0 0 8px}
@media(max-width:700px){
 .card-preview{grid-template-columns:minmax(0,120px) minmax(0,1fr)}
 .whats-yours{padding:16px 16px 18px 32px}
 .whats-yours h2{font-size:1.375rem}
 .whats-yours .btn,.course-quest .btn,.course-complete .btn{width:100%;justify-content:center}
 .course-quest,.course-complete{padding:18px}
 .course-quest h3,.course-complete h3{font-size:1.25rem}
}
/* Milestone block under a calculator result (the platform's .money-milestone, kept by name). */
.money-milestone,.family-milestone{margin:var(--space-block) 0 0;padding:16px 18px;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card)}
.money-milestone h2,.family-milestone h2{font-size:1.375rem;margin:4px 0 8px}
.money-milestone p,.family-milestone p{margin:0 0 10px}
.money-milestone .btn,.family-milestone .btn{min-height:44px}
.money-milestone .note,.family-milestone .note{margin:10px 0 0}
.money-milestone #milestone-card-status:empty{display:none}
@media(max-width:700px){.money-milestone .btn,.family-milestone .btn{width:100%;justify-content:center}}
/* Large text: a result block taller than the space above the phone tab bar. tool-page.js sets
   html.result-focus while that block is on screen, so the whole block reads above the screen edge;
   the tab bar comes back as soon as the reader scrolls the block away. */
@media(max-width:767px){
  html.result-focus .tab-bar{transform:translateY(100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .tab-bar{transition:transform .2s ease}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){html.result-focus .tab-bar,.tab-bar{transition:none}}

/* ---------- Result layout (17 October 2026): save and share first ----------
   Under the result, in this order: Save my result (free), the one main action (docked by tool-page.js),
   with Email me my plan and one small line under it; the one-tap share row (WhatsApp, Telegram, IG Story,
   More); a quieter Create share image; then "More ways to share", closed, with the copy buttons and the
   image options. Nothing shows until there is a result (.has-result); without JavaScript it all shows. */
.result-actions{display:none}
.result-panel.has-result>.result-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1);margin:var(--space-5) 0 0}
.result-save{min-width:0}
.result-save:empty{display:none}
/* The docked Save section is just its button (its heading stays for screen readers). */
.result-actions .saved-results.is-docked{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.result-actions .saved-results.is-docked>h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.result-actions .saved-results.is-docked>h2+p{display:none}
.result-actions .saved-results.is-docked .result-save-button{width:100%;min-height:52px;margin:0;padding-inline:16px;white-space:normal;font-size:1.0625rem}
.result-actions .saved-results.is-docked [role=status]:empty{display:none}
.result-email-link{align-self:center;min-height:44px;padding:0 var(--space-3);border:0;background:none;font:inherit;font-weight:800;color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.result-email-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.result-save-fine{margin:0;text-align:center;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.result-save-note{margin:var(--space-1) 0 0;font-size:.875rem;line-height:1.5;color:var(--muted)}
.result-save-link{display:inline;padding:12px 0;margin:-12px 0;border:0;background:none;font:inherit;font-weight:800;color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.result-save-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* One-tap share row and Create share image. */
.result-panel.has-actions:not(.has-result)>.result-quick{display:none}
.result-quick{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-4) 0 0}
.result-quick .resource-sharing--quick{margin:0}
/* One row at normal text; where the names would not fit (large text, narrow phones) the row is two by two. */
.resource-sharing--quick .resource-share-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-2);width:100%}
@container share-row (max-width:18.25rem){.resource-sharing--quick .resource-share-actions{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}}
.resource-sharing--quick .resource-share-actions>:is(a,button){flex-direction:column;gap:var(--space-1);width:auto;height:auto;min-height:72px;padding:0;border:0;border-radius:var(--radius-field);background:none;color:var(--ink)}
.resource-sharing--quick .resource-share-actions>:is(a,button):hover{transform:none;background:none;color:var(--brand)}
.resource-sharing--quick .resource-share-icon{width:48px;height:48px;padding:11px;border:3px solid var(--outline);border-radius:var(--radius-btn);background:var(--card);stroke-width:2}
.resource-sharing--quick .resource-share-actions>:is(a,button):hover .resource-share-icon{border-color:var(--brand)}
.resource-share-name{font-size:.8125rem;font-weight:800;line-height:1.2;text-align:center}
.resource-sharing--quick .resource-share-actions [hidden]{display:none}
.result-more-row{display:flex;flex-direction:column;gap:var(--space-3)}
.result-more-row>.card-preview-slot{order:1;margin:0}
.result-more-row>.result-share{order:2}
.result-quick .result-image-button{width:100%;min-height:44px;margin:0}
/* More ways to share: closed until asked for. */
.result-share{margin:0;border-top:2px dashed var(--hair)}
.result-share>summary{display:flex;align-items:center;min-height:44px}
.result-share-body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2) 0 var(--space-3)}
.result-share .share-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));gap:8px;margin:0}
.result-share .share-actions .btn{width:100%;margin:0}
.result-share .card-options{margin:0;padding:0;border:0;background:none}
.result-share .card-options legend{padding:0;margin-bottom:8px}
.result-share .resource-sharing{margin:0;padding-top:var(--space-3);border-top:2px dashed var(--hair)}
.result-share .link-private{margin:0}
.share-actions .btn.is-copied,.card-preview-actions .btn.is-copied{border-color:var(--green-ink);background:var(--tile-mint);color:var(--ink)}
@media(prefers-reduced-motion:no-preference){.share-actions .btn,.card-preview-actions .btn{transition:background-color .1s ease,border-color .1s ease,color .1s ease}}
@media print{.result-actions,.result-quick,.result-share{display:none!important}}
/* Live results: while a number is half-typed the last result stays, with a badge that never moves the layout. */
.result-panel.is-live{position:relative}
.result-panel.is-live.is-stale::before{position:absolute;top:-15px;left:16px;margin:0;max-width:calc(100% - 32px);z-index:1}
.result-panel.is-live.is-stale:not(.has-error)::before{content:"Waiting for your numbers"}

/* Desktop: inputs and result side by side from 75em (1200px), the result staying in view while it fits
   the window. Below 75em, and for "stacked" tools (catalog layout: a list, plan, timeline or wide table),
   the form sits on top and the result follows full width (the peek bar is for phones and tablets). */
@media(min-width:75em){
 html body[data-tool] main{max-width:1180px}
 body[data-tool] main .tool-workspace:not(.is-stacked){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:var(--space-6);align-items:start}
 body[data-tool] main .tool-workspace:not(.is-stacked)>.input-panel{margin-bottom:0}
 body[data-tool] main .result-column.is-sticky{position:sticky;top:var(--result-column-top,104px)}
 /* Beside the form the tile sits a little higher, so a 800px-tall window shows all of it on the first screen. */
 body[data-tool] main .tool-workspace:not(.is-stacked) .result-column .result-panel{padding-top:var(--space-2)}
 /* Beside the form the save and share block sits a little tighter (the one-tap icons stay 44px). */
 body[data-tool] main .tool-workspace:not(.is-stacked) .result-quick{gap:var(--space-2);margin-top:var(--space-3)}
 body[data-tool] main .tool-workspace:not(.is-stacked) .resource-sharing--quick .resource-share-actions>:is(a,button){min-height:62px}
 body[data-tool] main .tool-workspace:not(.is-stacked) .resource-sharing--quick .resource-share-icon{width:44px;height:44px;padding:10px}
 /* Create share image and More ways to share on one line; opened, More ways to share takes the full width. */
 body[data-tool] main .tool-workspace:not(.is-stacked) .result-more-row{flex-flow:row wrap;align-items:center;gap:var(--space-2) var(--space-3)}
 body[data-tool] main .tool-workspace:not(.is-stacked) .result-more-row>.result-image-button{flex:0 0 auto;width:auto;padding-inline:var(--space-4)}
 body[data-tool] main .tool-workspace:not(.is-stacked) .result-more-row>.result-share{flex:1 1 0;min-width:0;border-top:0}
 body[data-tool] main .tool-workspace:not(.is-stacked) .result-more-row>.result-share:not([open])>summary{justify-content:center;white-space:nowrap}
 body[data-tool] main .tool-workspace:not(.is-stacked) .result-more-row>.result-share[open]{flex-basis:100%;border-top:2px dashed var(--hair)}
 body[data-tool] main .tool-workspace:not(.is-stacked) .result-more-row>.card-preview-slot{flex-basis:100%}
 /* The answer is already beside the form: the form's own button is not needed. */
 body[data-tool].is-live-tool main .tool-workspace:not(.is-stacked) #run-tool{display:none}
}
/* One column (phones, up to 75em, stacked tools): the sticky bar waits until the parent is in the
   form, then peeks at the live answer. */
@media(min-width:561px) and (max-width:74.99em){.mobile-action.has-peek{display:block;position:sticky;bottom:0;padding:12px 0;background:var(--paper);border-top:1px solid var(--hair);z-index:10}}
@media(min-width:561px){body .mobile-action.has-peek>.mobile-peek{max-width:34rem;margin:0 auto}}
/* From 75em no peek bar: stacked tools show the result under the form, with Jump to your result,
   and a pinned bar would cover the fields scrolling under it (visual QA A1 and A25, ui-layout). */
.mobile-action.is-idle,.mobile-action.is-covering{visibility:hidden;opacity:0;pointer-events:none}
.mobile-peek{display:none}
.mobile-action.has-peek>.btn{display:none}
.mobile-action.has-peek>.mobile-peek{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;margin:0;padding:6px 6px 6px 18px;border:3px solid var(--outline);border-radius:999px;background:var(--spinner);color:var(--spinner-ink);font:inherit;text-align:left;box-shadow:var(--press);cursor:pointer}
.mobile-peek-text{display:flex;flex-direction:column;min-width:0}
/* The label and the answer wrap whole words onto a second line rather than end in "…" (P1-017). */
.mobile-peek-label{font:700 .75rem/1.25 var(--font-body);overflow-wrap:normal;text-wrap:balance}
.mobile-peek-value{font:900 1.375rem/1.1 var(--font-head);font-variant-numeric:tabular-nums;overflow-wrap:normal;text-wrap:balance}
.mobile-peek-value.is-long{font-size:1.0625rem;line-height:1.15}
@media(max-width:360px){.mobile-peek-go{padding:0 12px}}
.mobile-peek-go{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--card);font:800 .875rem/1 var(--font-head)}
.mobile-peek:active{transform:translateY(2px);box-shadow:none}
.mobile-peek:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* "Keep this result?" on tablet and desktop (first-visit.js): docked under Save in the result column,
   in the page flow, so it never covers the form or the result. Phones keep the slim bottom bar. */
.save-sheet.save-sheet--docked{position:relative;left:auto;bottom:auto;z-index:auto;transform:none;width:auto;margin:var(--space-3) 0 0;padding:14px 16px;border:3px solid var(--outline);border-radius:18px;box-shadow:none;grid-template-columns:auto auto;justify-content:start;align-items:center}
.save-sheet.save-sheet--docked .save-sheet-text{grid-column:1/-1}
/* Long forms (catalog answerNear): an answer shown just under its own fields. */
.input-panel .answer-near{margin:var(--space-3) 0 var(--space-2);padding:12px 14px}
/* "See the full result ↓" under a section's own answer (tool-page.js); it goes with its answer. */
.input-panel .answer-near-more{display:inline-flex;align-items:center;min-height:44px;margin:0 0 var(--space-4);padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.input-panel .answer-near[hidden]+.answer-near-more{display:none}