/* Hallmark · macrostructure: Workbench · tone: playful · anchor hue: coral */
/* Goaliva full-project UX system — structure before explanation.
   Applied across Home, Goals, Progress, Preferences, preparation, practice, feedback and results. */
:root{
  --ux-canvas:#fff8f3;--ux-surface:#fffdfa;--ux-ink:#32102f;--ux-muted:#746d78;
  --ux-line:#eadfda;--ux-coral:#ff6b5d;--ux-coral-soft:#fff0ec;--ux-mint:#4fd6a5;
  --ux-radius-lg:24px;--ux-radius-md:14px;--ux-control:48px;
  --ux-white:#fff;--ux-paper:#fffdf9;--ux-feedback:#f3fcf8;--ux-feedback-line:#ccefe1;
  --ux-ink-subtle:rgba(50,16,47,.03);--ux-coral-focus:rgba(255,107,93,.12);
  --ux-display-font:Manrope,sans-serif;
}
body{background:var(--ux-canvas);color:var(--ux-ink)}
/* Shared hierarchy: one page title, one primary action, calmer secondary metadata. */
.page-heading{align-items:flex-end;border-bottom:1px solid var(--ux-line);padding-bottom:20px;margin-bottom:28px}
.page-heading .tag{display:none}
.section-eyebrow,.label,.mission-label,.section-title .label{font-size:10px;letter-spacing:.12em;line-height:1.2}
.muted,.hint,.tiny{color:var(--ux-muted)}
.card,.wide-empty,.readiness-card,.path-readiness,.approved-hero{border-radius:var(--ux-radius-lg)}
.card{box-shadow:0 1px 0 var(--ux-ink-subtle)}
/* Navigation communicates location through position and contrast, not icon noise. */
nav{gap:6px}nav a{min-height:44px;display:flex;align-items:center}
nav a.active{background:var(--ux-ink);color:var(--ux-white)}
.sidebar-note{padding-top:28px}
/* All async actions expose a stable pending state without layout jumps. */
button:disabled,.button:disabled,[aria-disabled="true"]{cursor:wait}
/* Creation: the first decision is the goal, not the implementation settings. */
#modal{width:min(680px,calc(100% - 24px));padding:0;background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:var(--ux-radius-lg);overflow:hidden}
#modal-content{padding:30px;max-height:min(780px,calc(100vh - 48px));overflow:auto}
#modal-content>.modal-title{position:sticky;top:-30px;z-index:2;margin:-30px -30px 22px;padding:22px 30px 18px;background:var(--ux-surface);border-bottom:1px solid var(--ux-line)}
#modal-content>.modal-title h2{font-size:clamp(24px,4vw,32px);line-height:1.12;max-width:14ch}
#modal-content form{gap:20px}
#modal-content .create-journey{display:none}
#modal-content .create-source{border:0;padding:0;margin:0;display:grid;gap:14px}
#modal-content .create-source legend{font-family:var(--ux-display-font);font-size:18px;font-weight:800;padding:0;margin:0}
#modal-content .source-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#modal-content .source-choices label{border:1px solid var(--ux-line);border-radius:12px;padding:13px 14px;background:var(--ux-white);display:flex;align-items:center;gap:10px}
#modal-content .source-choices label:has(input:checked){border-color:var(--ux-coral);background:var(--ux-coral-soft);box-shadow:0 0 0 2px var(--ux-coral-focus)}
#modal-content [data-source-inputs] wa-input{--wa-input-border-color:var(--ux-coral)}
#modal-content .goal-advanced{border-top:1px solid var(--ux-line);padding-top:16px}
#modal-content .goal-advanced summary{font-weight:700;cursor:pointer;list-style:none}
#modal-content .goal-advanced summary::after{content:"＋";float:right;color:var(--ux-coral);font-size:18px}
#modal-content .goal-advanced[open] summary::after{content:"−"}
#modal-content .goal-advanced .form-row{margin-top:16px}
#modal-content .create-submit-bar{position:sticky;bottom:-30px;padding:18px 0 0;background:linear-gradient(transparent,var(--ux-surface) 18%)}
#modal-content .create-submit-bar wa-button{width:100%}
#modal-content #create-guidance{min-height:20px;margin:0}
#modal-content #form-error:empty{display:none}
/* Shared forms: controls align and remain reachable on narrow screens. */
form wa-input,form wa-select,form wa-textarea{width:100%}
form wa-button.button{min-height:var(--ux-control)}
.settings-section{padding:22px 0;border-top:1px solid var(--ux-line)}
.settings-section:first-child{border-top:0;padding-top:0}
.settings-section h2{font-size:19px;margin-bottom:14px}
.settings-section .hint{max-width:62ch}
/* Home and route surfaces use one visual rhythm. */
.approved-hero{margin-bottom:28px}
.path-readiness{border:1px solid var(--ux-line);background:var(--ux-surface);padding:26px}
.program-grid,.readiness-grid{align-items:stretch}
.program-card,.readiness-card{height:100%;display:flex;flex-direction:column}
.program-card .button,.readiness-card .card-link-label{margin-top:auto}
/* Practice is a focused workspace: source, question and one next action. */
.quiz{max-width:800px}
.quiz-top{border-bottom:1px solid var(--ux-line);padding-bottom:14px}
.quiz .card{border:1px solid var(--ux-line);box-shadow:none}
.quiz .progress-track{height:5px;margin-top:16px}
.quiz h2{font-size:clamp(23px,4vw,34px);line-height:1.35;max-width:34ch}
.question-stimulus{background:var(--ux-paper);border-left:3px solid var(--ux-coral);padding:15px 18px;border-radius:0 12px 12px 0;margin-bottom:24px}
.feedback{border:1px solid var(--ux-feedback-line);background:var(--ux-feedback);color:var(--ux-ink)}
/* Preparation / result surfaces share the same start-to-finish language and density. */
.journey-visual,.preparation-scene,.exam-dashboard,.exam-result{max-width:980px;margin-inline:auto}
.journey-rail{margin-bottom:24px}
.exam-dashboard-actions,.exam-next-action{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* Motion is a small confirmation, never decoration. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media(max-width:760px){
  #modal{width:calc(100% - 16px);border-radius:20px;max-height:calc(100vh - 16px)}
  #modal-content{padding:22px 18px;max-height:calc(100vh - 16px)}
  #modal-content>.modal-title{top:-22px;margin:-22px -18px 18px;padding:18px;background:var(--ux-surface)}
  #modal-content>.modal-title h2{max-width:12ch;font-size:25px}
  #modal-content .source-choices{grid-template-columns:1fr}
  #modal-content .create-submit-bar{bottom:-22px}
  .page-heading{align-items:flex-start;display:block}
  .page-heading h1{max-width:18ch}
  .path-readiness{padding:20px}
  .quiz h2{font-size:24px}
}

/* Hallmark audit fixes: remove redundant hierarchy, protect text layers, and keep functional labels readable. */
.section-eyebrow,.label,.mission-label,.section-title .label{font-size:12px;line-height:1.3}
.tiny{font-size:12px;line-height:1.4}
.readiness-ring svg{z-index:0;pointer-events:none}
.readiness-ring>span{position:relative;z-index:1;display:grid;place-items:center;min-width:0}
.readiness-ring>span small{font-size:12px;line-height:1.2;max-width:12ch}
.welcome-subtitle{max-width:58ch}
.mission-description{max-width:42ch}
@media(max-width:480px){
  .welcome-subtitle{max-width:310px}
  .mission-description{max-width:165px}
}

/* Hallmark audit fixes: keep visible metadata useful at small-screen reading sizes. */
.brand-caption,.tag,.label,.pill,.text-link,.logout,.card-link-label,
.step-number,.path-number,.stat span,.mode span,footer,.site-footer{font-size:12px}
.hero .tag{font-size:12px}
.site-footer .footer-disclaimer{max-width:56ch}
.mobile-slogan{font-size:12px}


/* Guided goal journey: one decision, one question, one clear next step. */
.guided-create{display:grid;gap:24px}
.guided-create [hidden]{display:none!important}
.guided-intro{max-width:48ch;margin:0 0 22px;color:var(--ux-muted);font-size:16px;line-height:1.55}
.guided-progress{margin:0 0 4px}
.guided-progress ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.guided-progress li{display:grid;gap:5px;color:var(--ux-muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.guided-progress li::before{content:"";height:4px;border-radius:999px;background:var(--ux-line)}
.guided-progress li.is-current,.guided-progress li.is-complete{color:var(--ux-ink)}
.guided-progress li.is-current::before{background:var(--ux-coral)}
.guided-progress li.is-complete::before{background:var(--ux-mint)}
.guided-step{display:grid;gap:15px;align-content:start;min-height:310px}
.guided-step h3{margin:0;max-width:24ch;font-size:clamp(25px,4vw,34px);line-height:1.13}
.guided-kicker{margin:0;color:var(--ux-coral);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.guided-question-note{max-width:53ch;margin:0;color:var(--ux-muted);font-size:16px;line-height:1.55}
.guided-choice-grid,.guided-choice-stack{display:grid;gap:12px}
.guided-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.guided-choice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:13px;min-height:112px;padding:18px;border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);background:var(--ux-paper);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.guided-choice:hover{border-color:var(--ux-coral)}
.guided-choice.is-selected{border-color:var(--ux-coral);background:var(--ux-coral-soft);box-shadow:0 0 0 3px var(--ux-coral-focus)}
.guided-choice:has(.guided-choice-input:focus-visible){outline:3px solid var(--ux-coral-focus);outline-offset:2px}
.guided-choice-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.choice-index{display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:var(--ux-line);color:var(--ux-ink);font-weight:800}
.guided-choice.is-selected .choice-index{background:var(--ux-coral);color:var(--ux-white)}
.choice-copy{display:grid;gap:7px;min-width:0}
.choice-copy strong{font-family:var(--ux-display-font);font-size:17px;line-height:1.2}
.choice-copy span{color:var(--ux-muted);font-size:14px;line-height:1.45}
.guided-info{display:grid;place-items:center;inline-size:24px;block-size:24px;border:1px solid var(--ux-line);border-radius:50%;color:var(--ux-ink);font-family:Georgia,serif;font-size:15px;font-weight:700}
.guided-info:focus-visible{outline:3px solid var(--ux-coral-focus);outline-offset:2px}
.guided-source-wrap{display:contents}
.guided-material-panel{display:grid;gap:15px;padding:18px;border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);background:var(--ux-paper)}
.guided-material-panel>label{display:grid;gap:7px;font-weight:800}
.guided-material-panel .hint{font-weight:400}
.guided-settings-grid{display:grid;gap:16px}
.guided-settings-grid>[data-goal-languages]{display:grid;gap:8px}
.guided-native-controls{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.guided-more-settings{border-top:1px solid var(--ux-line);padding-top:16px}
.guided-more-settings summary{cursor:pointer;font-weight:800}
.guided-review{display:grid;gap:0;border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);overflow:hidden;background:var(--ux-paper)}
.guided-review>div{display:grid;gap:5px;padding:15px 17px;border-bottom:1px solid var(--ux-line)}
.guided-review>div:last-child{border-bottom:0}
.guided-review span{color:var(--ux-muted);font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.guided-review strong{overflow-wrap:anywhere;font-size:16px}
.guided-actions{display:flex;align-items:center;gap:10px;border-top:1px solid var(--ux-line);padding-top:18px}
.guided-actions .guided-back{margin-inline-end:auto}
.guided-actions wa-button[disabled]{opacity:.55}
.guided-create #create-guidance{min-height:1.4em;margin:0}
.progress-evidence{margin-top:24px}
.progress-evidence .card-head{margin-bottom:10px}
.progress-evidence-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}
.progress-evidence-grid>div{display:grid;gap:4px;padding:14px;border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);background:var(--ux-paper)}
.progress-evidence-grid strong{font-family:var(--ux-display-font);font-size:26px;line-height:1}
.progress-evidence-grid span{color:var(--ux-muted);font-size:12px;line-height:1.35}
@media(max-width:620px){
 .guided-choice-grid{grid-template-columns:1fr}
 .guided-step{min-height:360px}
 .guided-actions{position:sticky;bottom:-22px;margin-inline:-18px;padding:14px 18px;background:var(--ux-surface);z-index:3}
 .progress-evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}