/* Phone navigation and comfortable controls; all playbook sections remain available. */
:root{--mobile-nav-height:76px}
html{scroll-padding-top:1rem;scroll-padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0px) + 1rem)}
.mobile-nav{display:none}
.ai-handoff{margin-top:1rem;border:1px solid var(--line);border-radius:8px;padding:1rem;background:#f6f8fd}
.ai-handoff .eyebrow{margin-bottom:.4rem}
.ai-handoff p:last-child{margin-bottom:0;margin-top:.85rem}
.ai-launch{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.2rem;border:1px solid #abb8cc;border-radius:7px;font-weight:650;text-decoration:none}
.ai-launch:hover{background:#eaf0fa}
.heading-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.feedback{scroll-margin-top:1rem}
.feedback:focus{outline:3px solid var(--purple);outline-offset:4px}
main,main>*,.work-columns>*,.two-columns>*,.role-grid>*,.page-heading>*,.field,.option span,.review-top>div{min-width:0}
main p,main h1,main h2,main h3,main li,main summary,.navlink,.ai-handoff{overflow-wrap:anywhere}
fieldset{min-width:0}
summary,footer button{min-height:44px}
summary{padding-block:.35rem}
.option,.check{touch-action:manipulation}
.check{min-height:44px}
button,.ai-launch{touch-action:manipulation}

@media(max-width:800px), (max-device-width:600px) and (pointer:coarse){
  #app.signed-in{padding-bottom:calc(82px + env(safe-area-inset-bottom) + 16px)}
  .topbar{padding-top:max(.75rem,env(safe-area-inset-top,0px));padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}
  main{width:100%;padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}
  .sidebar{display:none}
  .sidebar.has-reviewer{display:block;padding:.35rem 1rem;background:#f4f7fb}
  .sidebar .navlink:not([data-view="review"]){display:none}
  .sidebar .navlink[data-view="review"]{margin-left:auto}
  .mobile-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;z-index:8;bottom:0;left:0;right:0;min-height:var(--mobile-nav-height);padding:.4rem max(.35rem,env(safe-area-inset-right,0px)) max(.4rem,env(safe-area-inset-bottom,0px)) max(.35rem,env(safe-area-inset-left,0px));border-top:1px solid #cbd5e5;background:#fff;box-shadow:0 -4px 18px #12206c0b;gap:.2rem}
  .mobile-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-width:0;min-height:60px;border:0;border-radius:8px;padding:.35rem .15rem;background:transparent;color:#58667a;font-size:.875rem;line-height:1.2;letter-spacing:0}
  .mobile-tab svg{width:22px;height:22px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobile-tab.active{background:#edf0fa;color:var(--navy);box-shadow:inset 0 3px var(--purple)}
  .mobile-tab:focus-visible{outline-offset:-3px}
  .signed-in~#toast{top:max(.75rem, env(safe-area-inset-top));bottom:auto}
  .focus-banner{margin-bottom:1.15rem;gap:.75rem}
  .heading-actions{width:100%}
  .heading-actions>button{flex:1 1 auto}
  .practice-card,.panel{max-width:100%}
  .table-scroll{max-width:100%;overscroll-behavior-x:contain}
}

@media(max-width:520px), (max-device-width:600px) and (pointer:coarse){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .7rem}
  .topbar .logo{width:155px;max-width:100%;grid-column:1;grid-row:1}
  .topbar .account{max-width:100%;margin:0;grid-column:1/-1;grid-row:2;overflow-wrap:anywhere}
  .topbar .quiet{margin:0;min-height:44px;grid-column:2;grid-row:1}
  .card-content,.panel{padding:1rem}
  .focus-banner{padding:.9rem}
  .focus-banner .small{font-size:.82rem}
  .focus-banner button{font-size:.9rem}
  .card-head .version{max-width:100%}
  .actions{gap:.6rem}
  .actions>button{flex:1 1 100%;width:100%}
  .ai-launch{width:100%}
  .heading-actions>button{font-size:.9rem}
  .feedback form>button{width:100%}
  .review-top{flex-wrap:wrap}
  .question-count{gap:.5rem;font-size:.7rem}
  .stakes-fields{padding:.7rem}
  .prompt{min-height:250px}
}

/* Keep phone reading sizes comfortable, including reviewer controls. */
@media(max-width:800px), (max-device-width:600px) and (pointer:coarse){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .workspace{min-height:calc(100dvh - 260px)}
  .sidebar.has-reviewer{padding:.4rem 1rem;background:white}
  .sidebar .navlink[data-view="review"]{font-size:1rem;min-height:48px;width:100%;text-align:center;border:1px solid var(--line);border-radius:8px}
  .topbar .account,.small,.field,.check,.option,.notice,.error,.success{font-size:1rem}
  .page-heading p{font-size:1rem;line-height:1.6}
  button{min-height:48px}
  .page-heading{margin-bottom:1.25rem}
  .review-top{gap:.75rem}
}

.home-hub{max-width:760px;margin:auto}.home-tiles{display:grid;gap:1rem;margin-top:1.5rem}
.home-tile{display:grid;grid-template-columns:48px 1fr 20px;align-items:center;gap:1rem;text-align:left;width:100%;padding:1.2rem;background:white;border:1px solid #cbd5e5;box-shadow:0 3px 12px #12206c08;color:var(--navy)}
.home-tile strong{display:block;font-size:1.2rem}.tile-detail{display:block;font-size:1rem;font-weight:400;color:var(--muted);line-height:1.5;margin-top:.35rem}.tile-number{display:grid;place-items:center;background:#edf0fa;border-radius:14px;width:48px;height:48px;font-size:1.4rem}.tile-arrow{font-size:1.8rem}
@media(max-width:600px){
 :root{font-size:18px;--mobile-nav-height:82px}
 main{padding:1.2rem 1rem}.signed-out{padding-top:1.2rem}
 .auth-layout{display:block;max-width:none}.intro{padding:0}.intro h1{font-size:1.85rem;line-height:1.15;margin-bottom:.65rem}.intro>p:not(.eyebrow){font-size:1rem;margin-bottom:1.2rem}
 .auth-panel{padding:1rem;margin:0}.auth-panel h2{font-size:1.3rem}.auth-panel p{font-size:1rem}.auth-panel button[type=submit]{width:100%;min-height:58px;font-size:1.05rem}
 .topbar{min-height:76px}.topbar .logo{width:170px}.topbar .account{font-size:.85rem}
 h1,.page-heading h1{font-size:1.75rem}.eyebrow{font-size:.72rem;letter-spacing:.07em}
 .field input,.field select,.field textarea{font-size:1rem;min-height:56px}.field{margin:.9rem 0}button{min-height:56px}
 .home-tile{grid-template-columns:42px 1fr 14px;padding:1rem .8rem;gap:.7rem;min-height:112px;border-radius:14px}.tile-number{width:42px;height:42px}.home-tile strong{font-size:1.15rem}.tile-detail{font-size:.95rem}
 .mobile-tab{font-size:.8rem;min-height:64px}.mobile-tab svg{width:26px;height:26px}
 .home-hub>p{margin-bottom:.8rem}.home-tiles{gap:.75rem;margin-top:1rem}
 footer{font-size:.8rem;padding:1rem}.workspace{min-height:calc(100dvh - 210px)}
}

#display-tools{padding:.35rem 1rem;background:transparent;text-align:center}#phone-display{min-height:38px;border:0;background:transparent;color:var(--muted);font-size:.8rem;text-decoration:underline;text-underline-offset:3px}html.large-phone-display #display-tools{padding:.25rem 1rem}html.large-phone-display #phone-display{font-size:.8rem;min-height:38px}
@media(max-width:600px){.focus-banner:not([open]){padding:.4rem .75rem;margin-bottom:.8rem}.focus-banner:not([open]) .eyebrow{display:none}.focus-banner summary{min-height:44px}.current-prompt-heading{margin-bottom:.75rem}.current-prompt-heading h1{font-size:1.4rem}.current-prompt-heading p{margin:0;font-size:.9rem}.practice-card .card-content h2{font-size:1.3rem}.practice-card .card-content{padding:1rem}.practice-card .journey-step{margin:.1rem 0 .4rem}.practice-background{margin-top:1rem}.heading-actions{margin:1rem 0}}

/* full-bleed phone viewport */
html,body{width:100%;max-width:100%;min-height:100%;min-height:100dvh;margin:0}
#app{width:100%;max-width:100%}
@media(max-width:600px),(max-device-width:600px) and (pointer:coarse){
  html.large-phone-display{zoom:1!important}
  html.large-phone-display body{min-height:100dvh}
  .signed-out,.auth-layout,.home-hub{max-width:none;width:100%;margin-left:0;margin-right:0}
  main{max-width:none;width:100%}
}