/* Personal discovery mobile surface. Desktop and print stay in work.css. */
@media screen and (max-width:700px){
  body:not(.branding-page){--personal-card:#fffef8;--personal-soft-shadow:0 5px 18px #284e3710;background:#f4f5e9}
  body:not(.branding-page) .wrap{width:calc(100% - 32px)}
  body:not(.branding-page) button,body:not(.branding-page) summary{touch-action:manipulation}
  body:not(.branding-page) button:active:not(:disabled){transform:scale(.985)}
  body:not(.branding-page) input,body:not(.branding-page) textarea,body:not(.branding-page) select{font-size:16px}
  body:not(.branding-page) .button{min-height:54px;border-width:1.5px;border-radius:14px;font-size:17px;padding:13px 16px;box-shadow:0 3px 0 #203c3422;gap:10px}
  body:not(.branding-page) .button.primary{background:#f6d778}
  body:not(.branding-page) .text-button{font-size:15px;min-height:44px}
  body:not(.branding-page) .source-note{font-size:14px;line-height:1.8}

  /* Start screen: a short invitation followed by one prominent action. */
  body[data-view="home"] .home-hero{padding-top:22px;padding-bottom:28px;gap:22px}
  body[data-view="home"] .hero-badge{font-size:13px;border:0;padding:6px 11px;border-radius:30px;transform:none;background:#e3eddc}
  body[data-view="home"] .hero-copy h1{font-size:clamp(29px,8vw,36px);line-height:1.5;margin:17px 0}
  body[data-view="home"] .hero-description{font-size:16px;line-height:1.85;margin-bottom:18px}
  body[data-view="home"] .hero-copy>.button{min-width:0;width:100%;font-size:18px;min-height:58px;padding:15px;border-radius:16px}
  body[data-view="home"] .hero-bottomline{display:flex;gap:4px 10px;font-size:13px;margin-top:12px}
  body[data-view="home"] .hero-meta{font-size:13px;margin:0;gap:10px}
  body[data-view="home"] .intro-note{font-size:13px;line-height:1.8;margin-top:16px}
  body[data-view="home"] .hero-playground{padding-block:10px 20px}
  body[data-view="home"] .hero-feature-card{border-width:1px;box-shadow:var(--personal-soft-shadow);transform:none;border-radius:22px;padding:19px 13px}
  body[data-view="home"] .hero-figure{transform:none}
  body[data-view="home"] .hero-sticker{border-width:1px;box-shadow:0 3px 0 #203c3422;font-size:13px;padding:6px 10px}
  body[data-view="home"] .quiz-home-guide{padding-block:26px}
  body[data-view="home"] .quiz-home-guide h2{font-size:24px;line-height:1.6}
  body[data-view="home"] .quiz-home-example{border-radius:18px;box-shadow:none}

  /* The question stays central, while progress and back remain close. */
  body[data-view="quiz"] #quiz-view{padding-top:0;padding-bottom:24px}
  body[data-view="quiz"] .quiz-topline{position:sticky;top:var(--app-header-height,60px);z-index:12;min-height:57px;gap:10px;padding:8px 0;background:#f4f5e9;border-bottom:1px solid #dce2d2}
  body[data-view="quiz"] .quiz-top-back{width:44px;height:44px;flex-basis:44px;border:1px solid #c2cebb;background:var(--personal-card);font-size:21px;box-shadow:none}
  body[data-view="quiz"] .quiz-topline>.chapter-label{font-size:14px;line-height:1.5;letter-spacing:0}
  body[data-view="quiz"] .quiz-count{font-size:14px;padding:4px 10px;line-height:1.7;border:0;background:#e0ead4}
  body[data-view="quiz"] #quiz-view .quiz-progress{height:4px;margin:8px 0 0;background:#dce6d4}
  body[data-view="quiz"] .quiz-ticket-trail{margin:12px 0 16px;gap:7px}
  body[data-view="quiz"] .quiz-ticket{min-width:44px;width:44px;min-height:44px;border:1px solid #c4cebd;box-shadow:none;border-radius:11px;background:#edf0e4}
  body[data-view="quiz"] .quiz-ticket.done{border:1px solid #80a081;background:#fffef8;box-shadow:none}
  body[data-view="quiz"] .quiz-ticket.current{outline-width:2px;outline-offset:1px;border:1px solid #5d805e;background:#f7df8c}
  body[data-view="quiz"] .quiz-ticket-check{width:17px;height:17px;font-size:12px;border-color:#83a083;background:#dbeacb;right:-3px;top:-3px}
  body[data-view="quiz"] .quiz-ticket-art.scene-art{width:30px;height:30px;border-radius:7px}
  body[data-view="quiz"] .quiz-ticket-number{font-size:14px}
  body[data-view="quiz"] .quiz-story-panel{grid-template-columns:70px minmax(0,1fr);padding:14px 12px;gap:12px;margin-bottom:18px;border:1px solid #c4cfb8;border-radius:18px;background:var(--scene-paper);box-shadow:none}
  body[data-view="quiz"] .quiz-story-art.scene-art{width:70px;height:70px;border-radius:12px}
  body[data-view="quiz"] .quiz-scene-caption{font-size:13px;line-height:1.65;margin-bottom:4px;color:#62735a}
  body[data-view="quiz"] .quiz-story-text{font-size:16px;line-height:1.8;font-weight:600}
  body[data-view="quiz"] .quiz-prompt{font-size:22px;line-height:1.6;letter-spacing:0;margin:0 0 7px}
  body[data-view="quiz"] .quiz-pick-instruction{font-size:14px;line-height:1.8;margin-bottom:15px;color:#65705b}
  body[data-view="quiz"] .quiz-options.quiz-action-grid{gap:11px;grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-view="quiz"] .quiz-choice.quiz-action-card{min-height:126px;padding:14px 11px 12px;gap:8px;border:1px solid #afbea3;border-radius:15px;box-shadow:0 3px 0 #a8b69830;transition:background .15s,transform .1s}
  body[data-view="quiz"] .quiz-choice.quiz-action-card:nth-child(1){background:#fffef8}
  body[data-view="quiz"] .quiz-choice.quiz-action-card:nth-child(2){background:#eaf1e3}
  body[data-view="quiz"] .quiz-choice.quiz-action-card:nth-child(3){background:#fff1ca}
  body[data-view="quiz"] .quiz-choice.quiz-action-card:nth-child(4){background:#f7e4d9}
  body[data-view="quiz"] .quiz-choice.quiz-action-card>.quiz-action-title{font-size:17px;line-height:1.55;font-weight:800;white-space:normal;letter-spacing:0;word-break:normal}
  body[data-view="quiz"] .quiz-choice.quiz-action-card>.quiz-action-detail{font-size:15px;line-height:1.8;font-weight:500;letter-spacing:0;text-wrap:pretty}
  body[data-view="quiz"] .quiz-choice.quiz-action-card.selected{background:#f9df8c;outline:2px solid #487352;outline-offset:1px;border-color:#487352}
  body[data-view="quiz"] .quiz-choice.quiz-action-card>.quiz-action-status{font-size:12px;top:-10px;right:6px;border-radius:20px;background:#356446;border-color:#356446;padding:2px 8px}
  body[data-view="quiz"] .quiz-choice.quiz-unknown{min-height:45px;padding:9px;border-radius:12px;background:transparent;border:1px dashed #b4c1aa}
  body[data-view="quiz"] .quiz-choice.quiz-unknown>span{font-size:14px}
  body[data-view="quiz"] #quiz-view .quiz-back{margin-top:13px;align-items:center;gap:12px}
  body[data-view="quiz"] .quiz-back .text-button{font-size:14px;padding-block:8px}
  body[data-view="quiz"] #quiz-view .storage-note{font-size:12px;line-height:1.8;padding-top:10px;margin-top:7px;border-top:1px solid #dce1d3}
  body[data-view="quiz"] .quiz-old-answer{font-size:14px;line-height:1.8;padding:10px 12px}

  /* Results keep the illustrated reveal, then move into practical card sections. */
  body[data-view="quiz-result"] #quiz-result-view{padding-top:17px;padding-bottom:24px}
  body[data-view="quiz-result"] .result-topline{gap:10px;margin-bottom:14px}
  body[data-view="quiz-result"] .result-topline>span{font-size:12px;line-height:1.65;text-align:right}
  body[data-view="quiz-result"] .result-topline>.text-button{font-size:14px}
  body[data-view="quiz-result"] .quiz-result-cover,
  body[data-view="quiz-result"] .quiz-result-cover.solo{padding:22px 18px;border:1px solid #d5c58d;border-radius:22px;box-shadow:0 5px 0 #d5c58d33;margin-bottom:23px;background:#fcf0c8}
  body[data-view="quiz-result"] .quiz-result-kicker{font-size:13px;line-height:1.8;letter-spacing:0}
  body[data-view="quiz-result"] .quiz-result-cover h1,
  body[data-view="quiz-result"] .quiz-result-cover.solo>h1{font-size:26px;line-height:1.6;margin:12px 0 16px;letter-spacing:0}
  body[data-view="quiz-result"] .quiz-result-cover.solo .quiz-animal-card:only-child .animal-art{width:155px}
  body[data-view="quiz-result"] .quiz-animal-lineup{gap:13px;margin:12px 0 17px}
  body[data-view="quiz-result"] .quiz-animal-card{flex-basis:44%}
  body[data-view="quiz-result"] .quiz-animal-card .animal-art{max-width:100%;width:135px}
  body[data-view="quiz-result"] .quiz-animal-card strong{font-size:16px;line-height:1.7}
  body[data-view="quiz-result"] .quiz-animal-card>p,
  body[data-view="quiz-result"] .quiz-result-cover.solo .quiz-animal-card:only-child>p{font-size:14px;line-height:1.8}
  body[data-view="quiz-result"] .quiz-result-body,
  body[data-view="quiz-result"] .quiz-result-cover.solo>.quiz-result-body{font-size:17px;line-height:1.9;margin-top:16px;font-weight:600}
  body[data-view="quiz-result"] .quiz-result-cover>.source-note,
  body[data-view="quiz-result"] .quiz-result-cover.solo>.source-note{font-size:12px;line-height:1.85;margin-top:16px;padding-top:12px}
  body[data-view="quiz-result"] .quiz-opportunities{padding:0;margin:0 0 23px}
  body[data-view="quiz-result"] .quiz-opportunities>h2{font-size:23px;line-height:1.65}
  body[data-view="quiz-result"] .quiz-opportunities-intro{font-size:15px;line-height:1.85}
  body[data-view="quiz-result"] .quiz-opportunity-list{display:grid;gap:12px}
  body[data-view="quiz-result"] .quiz-opportunity{padding:17px 16px 17px 49px;background:var(--personal-card);border:1px solid #d4ddcb;border-radius:16px;box-shadow:var(--personal-soft-shadow)}
  body[data-view="quiz-result"] .quiz-opportunity:before{top:18px;left:13px;width:26px;height:26px;font-size:12px;border:0;background:#e4edda}
  body[data-view="quiz-result"] .quiz-opportunity h3{font-size:19px;line-height:1.65;letter-spacing:0;margin-bottom:8px}
  body[data-view="quiz-result"] .quiz-opportunity p{font-size:16px;line-height:1.85}
  body[data-view="quiz-result"] .quiz-opportunity .quiz-opportunity-evidence{font-size:14px;line-height:1.85;padding-left:10px;margin-top:12px}
  body[data-view="quiz-result"] .quiz-small-step{margin-top:22px;padding:22px 17px;border:1px solid #b4cbb7;border-radius:19px;box-shadow:none;background:#e6efdf}
  body[data-view="quiz-result"] .quiz-small-step h2{font-size:22px;line-height:1.65;margin-bottom:11px}
  body[data-view="quiz-result"] .quiz-small-step p{font-size:16px;line-height:1.9}
  body[data-view="quiz-result"] .quiz-experiment-options{gap:12px;margin:18px 0}
  body[data-view="quiz-result"] .quiz-experiment{font-size:16px;line-height:1.8;padding:13px 12px;border:1px solid #a9bea3;border-radius:14px;box-shadow:0 3px 0 #b5c9a630;min-height:60px}
  body[data-view="quiz-result"] .quiz-experiment-status{font-size:13px;line-height:1.8}
  body[data-view="quiz-result"] .quiz-experiment.selected{outline-width:2px;outline-offset:1px;background:#f6df91}
  body[data-view="quiz-result"] .quiz-small-step #quiz-step-body{font-size:16px;line-height:1.9;padding-top:15px;margin-top:17px}
  body[data-view="quiz-result"] .quiz-section{padding-block:21px}
  body[data-view="quiz-result"] .quiz-fit legend{font-size:17px;line-height:1.8}
  body[data-view="quiz-result"] .quiz-fit .choice-option{font-size:15px;min-height:45px;padding:9px 12px;border-radius:12px}
  body[data-view="quiz-result"] .optional-section{background:var(--personal-card);padding:0 15px;border:1px solid #d5dece;border-radius:15px;margin-top:15px}
  body[data-view="quiz-result"] .optional-section>summary{min-height:53px;padding-block:13px;font-size:16px;line-height:1.8}
  body[data-view="quiz-result"] .quiz-result-actions{display:grid;grid-template-columns:1fr;gap:12px;margin-block:22px}
  body[data-view="quiz-result"] .quiz-result-actions .button{width:100%;font-size:16px;min-height:52px}
  body[data-view="quiz-result"] .quiz-deepen{padding:22px 17px;border:1px solid #d0dcca;border-radius:18px;box-shadow:none;background:var(--personal-card);margin-top:24px}
  body[data-view="quiz-result"] .quiz-deepen h2{font-size:22px;line-height:1.7}
  body[data-view="quiz-result"] .quiz-deepen p{font-size:15px;line-height:1.85}
  body[data-view="quiz-result"] .quiz-deepen .chapter-label{font-size:13px;line-height:1.8}
  body[data-view="quiz-result"] .quiz-deepen .button{width:100%;font-size:16px;margin-top:16px}
  body[data-view="quiz-result"] .result-end{align-items:stretch;gap:9px;margin-top:22px}
  body[data-view="quiz-result"] .result-end .text-button{font-size:14px}

  /* The optional workbook inherits the same gentle card and input treatment. */
  body[data-view="work"] #work-view{padding-top:19px;padding-bottom:24px}
  body[data-view="work"] .work-topline{gap:10px}
  body[data-view="work"] .work-topline .chapter-label{font-size:16px}
  body[data-view="work"] .work-topline #app-step-count{font-size:14px;border:0;border-radius:20px;background:#e1ebd8;min-height:32px;min-width:62px}
  body[data-view="work"] .work-toolbar{gap:12px;padding-top:15px}
  body[data-view="work"] .work-toolbar .button{min-height:52px}
  body[data-view="work"] .scene-card{border-width:1px;box-shadow:0 3px 0 #9db39533;border-radius:15px}
  body[data-view="work"] .field-group input,body[data-view="work"] .field-group textarea{border-radius:13px;background:var(--personal-card)}
}
@media screen and (max-width:360px){
  body[data-view="quiz"] .quiz-story-panel{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:12px 10px}
  body[data-view="quiz"] .quiz-story-art.scene-art{width:58px;height:58px}
  body[data-view="quiz"] .quiz-ticket{min-width:44px;width:44px}
  body[data-view="quiz"] .quiz-ticket-trail{gap:6px}
  body[data-view="quiz"] .quiz-choice.quiz-action-card>.quiz-action-title{font-size:16px}
  body[data-view="quiz"] .quiz-choice.quiz-action-card>.quiz-action-detail{font-size:14px}
}
@media screen and (max-width:330px){
  body[data-view="quiz"] .quiz-options.quiz-action-grid{grid-template-columns:1fr}
  body[data-view="quiz"] .quiz-choice.quiz-action-card{min-height:85px}
  body[data-view="quiz"] .quiz-ticket{min-width:44px;width:44px}
  body[data-view="quiz"] .quiz-ticket-trail{gap:4px}
}
@media screen and (prefers-reduced-motion:reduce){
  body:not(.branding-page) .button,
  body[data-view="quiz"] .quiz-choice.quiz-action-card{transition:none}
  body:not(.branding-page) button:active:not(:disabled){transform:none}
}