/* ==========================================================================
   BOSTON STUDY HUB ACADEMY — progress, search, tour, next-best-action,
   friendly validation messages and the mobile pass (360–420 px).
   Loaded after styles.css / pathway.css / theme-light.css / coach.css.
   ========================================================================== */
.mb-s{margin-bottom:10px}

/* ---------------- topbar search ---------------- */
.topsearch{margin-left:auto;display:flex;align-items:center;gap:6px;position:relative;min-width:0}
.topsearch + .topbar-right{margin-left:0}
.topsearch .input{width:230px;max-width:32vw;padding:7px 11px;font-size:13px;border-radius:999px;background:#fff}
.topsearch .input:focus{width:280px}
.topsearch-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--dim);place-items:center;flex:0 0 auto}
.topsearch-toggle:hover{color:var(--brand)}
@media (prefers-reduced-motion: no-preference){ .topsearch .input{transition:width .2s ease, border-color .15s} }

/* ---------------- next best action (dashboard) ---------------- */
.nba{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;border-left:3px solid var(--brand)}
.nba-main{flex:1 1 280px;min-width:0}
.nba-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);font-weight:700;margin-bottom:4px}
.nba-k span{color:var(--brand)}
.nba h3{font-size:16px;margin:0 0 3px}
.nba p{margin:0}
.nba-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------------- My progress ---------------- */
.prog-h{font-size:17px;margin:0}
.prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.prog-panel{padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pp-h{display:flex;align-items:center;gap:8px}
.pp-h h3{font-size:14.5px;margin:0;flex:1}
.pp-sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.pp-v{font-family:var(--display);font-size:24px;line-height:1;color:var(--text)}
.pp-v small{font-family:var(--font);font-size:11.5px;color:var(--dim-2)}
.pp-chart{position:relative}
.pc-svg{display:block;width:100%;height:auto;overflow:visible}
.pc-grid{stroke:var(--line);stroke-width:1}
.pc-axis{font-size:10px;fill:var(--dim-2);font-family:var(--font)}
.pc-target{stroke:var(--dim-2);stroke-width:1.2;stroke-dasharray:4 4}
.pc-target-l{font-size:10px;fill:var(--dim);font-family:var(--font)}
.pc-last{font-size:11.5px;font-weight:700;fill:var(--text);font-family:var(--font)}
.pc-val{font-size:10.5px;font-weight:600;fill:var(--dim);font-family:var(--font)}
.pc-bar{fill:var(--brand)}
.pc-hit{fill:transparent;cursor:default}
.pc-hit:hover + .pc-hit{fill:transparent}
.pp-empty{position:absolute;inset:18% 12% auto 12%;text-align:center;background:rgba(255,255,255,.92);border:1px dashed var(--line-2);border-radius:12px;padding:10px 12px}
.pp-empty p{font-size:12.6px;color:var(--dim);margin:0 0 6px}
.cal-svg{max-width:240px}
.cal-c{stroke:var(--panel);stroke-width:0}
.cal-0,.cal-legend .cal-0{fill:var(--panel-3);background:var(--panel-3)}
.cal-1,.cal-legend .cal-1{fill:#f4bcbc;background:#f4bcbc}
.cal-2,.cal-legend .cal-2{fill:#e06262;background:#e06262}
.cal-3,.cal-legend .cal-3{fill:var(--brand);background:var(--brand)}
.cal-f{fill:transparent;stroke:var(--line);stroke-width:1}
.cal-today{stroke:var(--text);stroke-width:1.5}
.cal-legend{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cal-legend i{display:inline-block;width:11px;height:11px;border-radius:3px}
.prog-stats{display:flex;gap:22px;flex-wrap:wrap}
.err-bar{height:10px;border-radius:6px;background:var(--rose-soft);overflow:hidden}
.err-bar i{display:block;height:100%;background:var(--mint);border-radius:6px 0 0 6px;border-right:2px solid var(--panel)}
.prog-next{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;text-decoration:none;border-left:3px solid var(--amber)}
.prog-next:hover{border-color:var(--amber)}
.pn-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);font-weight:700;flex-basis:100%}
.pn-main{display:flex;flex-direction:column}
.pn-main b{font-size:16px}
.pn-step{display:flex;flex-direction:column;flex:1;min-width:200px}
.pn-step span{font-weight:600;color:var(--brand)}
.pn-step small{font-size:12px;color:var(--dim)}
.prog-empty{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border:1px dashed var(--line-2)}
.prog-empty h3{margin:0 0 4px;font-size:16px}
.tbl-wrap{overflow-x:auto}
.tbl caption{text-align:left}
.chart-tip{position:fixed;z-index:90;pointer-events:none;max-width:280px;background:#0f172a;color:#f8fafc;font-size:12px;line-height:1.4;padding:6px 9px;border-radius:7px;box-shadow:0 10px 26px -12px rgba(0,0,0,.6)}
.chart-tip[hidden]{display:none}

/* ---------------- search page ---------------- */
.search-big{display:flex;gap:8px;max-width:680px;margin-bottom:6px}
.search-big .input{font-size:15px;padding:11px 14px}
.sr-group{margin-top:18px}
.sr-h{font-size:14px;letter-spacing:.02em;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.sr-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sr-list li[hidden]{display:none}
.sr-item{display:flex;flex-direction:column;gap:3px;padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);min-height:44px}
.sr-item:hover,.sr-item:focus-visible{border-color:#e2b9b4;background:var(--panel-2)}
.sr-item b{font-size:14px;color:var(--text);font-weight:600}
.sr-snip{font-size:12.8px;color:var(--dim);line-height:1.5;overflow-wrap:anywhere}
.sr-snip em{font-style:normal;color:var(--dim-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.sr-item mark{background:#FFE9A8;color:inherit;border-radius:3px;padding:0 1px}

/* ---------------- friendly validation ---------------- */
.qcard.q-missing{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-soft)}
.qcard.q-missing .qh::after{content:'Not answered';margin-left:auto;flex:0 0 auto;align-self:flex-start;white-space:nowrap;font-size:10.5px;font-weight:600;color:#9A6206;background:var(--amber-soft);border:1px solid #F6E1B7;border-radius:999px;padding:1px 8px}
.form-msg{margin:10px 0 0;padding:9px 12px;border-radius:9px;background:var(--amber-soft);border:1px solid #F6E1B7;color:#7A4E05;font-size:13px}

/* ---------------- tour ---------------- */
.tour-layer{position:fixed;inset:0;z-index:110}
.tour-scrim{position:absolute;inset:0;background:rgba(15,23,42,.38)}
.tour-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 20px 16px;box-shadow:0 30px 80px -30px rgba(15,23,42,.55);outline:none}
.tour-layer.anchored .tour-card{transform:none}
.tour-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:700;margin-bottom:6px}
.tour-card h2{font-family:var(--display);font-size:22px;font-weight:500;margin:0 0 8px}
.tour-card p{font-size:14px;color:#334155;margin:0 0 12px;line-height:1.6}
.tour-dots{display:flex;gap:5px;margin-bottom:12px}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.tour-dots i.on{background:var(--brand);width:18px;border-radius:4px}
.tour-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tour-sp{flex:1}
.tour-spot{position:relative;z-index:111!important;box-shadow:0 0 0 3px var(--brand),0 0 0 8px rgba(200,30,30,.25)!important;border-radius:10px}
.nav a.tour-spot{background:#fff}
@media (prefers-reduced-motion: no-preference){ .tour-card{animation:pop .2s ease} }

/* ==========================================================================
   Mobile & touch pass
   ========================================================================== */
/* no sideways page scroll; clip (not hidden) keeps position:sticky working */
.main{overflow-x:clip}
#view img,#view svg,#view video,#view iframe{max-width:100%}
.timerbar{max-width:100%;flex-wrap:wrap}
.seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.seg button{white-space:nowrap;flex:0 0 auto}
.palette{max-width:100%}
.passage,.prose p,.theory-block p{overflow-wrap:break-word}

/* Timers stay visible while answering */
#quizTimer,#exTimer,#mixedTimer,#diagTimer{position:sticky;top:66px;z-index:15}
#quizTimer:empty,#exTimer:empty,#mixedTimer:empty,#diagTimer:empty{position:static}
.paper-head .timerbar{position:fixed;right:14px;bottom:14px;z-index:45;box-shadow:0 12px 30px -12px rgba(15,23,42,.5)}

/* Quiz options: comfortable tap targets everywhere */
.opt{min-height:44px;align-items:center}
.opt span{overflow-wrap:anywhere}

/* Drawer: backdrop + no background scroll while open */
@media (max-width:980px){
  body.nav-open{overflow:hidden}
  body.nav-open .main::before{content:'';position:fixed;inset:0;z-index:35;background:rgba(15,23,42,.32)}
  .sidebar{z-index:50}
  .hamburger{min-width:42px;min-height:40px}
  .nav a{min-height:42px}
  .topsearch .input{max-width:38vw}
  .topsearch .input:focus{width:230px}
}

@media (max-width:640px){
  .topbar{gap:8px;padding:8px 12px}
  .crumbs{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1 1 auto}
  .topsearch{margin-left:auto}
  .topsearch-toggle{display:grid}
  .topsearch .input{display:none}
  .topsearch.open{flex:1 1 auto}
  .topsearch.open .input{display:block;width:100%;max-width:none;font-size:16px}  /* 16px stops iOS zoom */
  .topbar.search-open .crumbs,.topbar.search-open .streak{display:none}
  .topbar-right{gap:6px}
  #view{padding:16px 16px 48px}
  .view-head{margin-bottom:18px}
  .card{padding:16px}
  .btn{min-height:40px}
  .btn-sm{min-height:36px}
  .row > .btn{flex:0 1 auto}
  .passage{font-size:16px;padding:16px 14px;max-height:none}
  .prose p,.prose li,.theory-block p,.lesson-body{font-size:15px}
  .qcard{padding:13px 12px}
  .qcard .qh{font-size:15px}
  .opt{font-size:14.5px;padding:10px 12px}
  #runnerWrap .opts,.g-items .opts{gap:6px}
  .unit-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .unit-tabs button{white-space:nowrap;flex:0 0 auto;min-height:44px}
  .tbl{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .prose table{display:block;overflow-x:auto}
  .pdot{width:32px;height:32px;font-size:11px}
  .paper-bar{position:static}  /* 40-dot palette is too tall to pin on a phone; the timer floats instead */
  #quizTimer,#exTimer,#mixedTimer,#diagTimer{top:58px}
  .paper-head{flex-direction:column}
  .paper-head .timerbar{right:10px;bottom:10px;padding:8px 12px;gap:10px}
  .toast{bottom:78px;max-width:calc(100vw - 32px);text-align:center}
  .modal{padding:10px}
  .modal-card{padding:20px 16px;max-height:92vh}
  .search-big{flex-direction:column}
  .nba{padding:14px}
  .nba-act{width:100%}
  .nba-act .btn-primary{flex:1;justify-content:center}
  .prog-next{padding:14px}
  .tour-layer .tour-card,.tour-layer.anchored .tour-card{left:16px!important;right:16px;top:auto!important;bottom:16px;transform:none;width:auto}
  .hero{padding:18px}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:380px){
  .streak{display:none}
  .unit-grid{grid-template-columns:minmax(0,1fr)!important}
}

@media (prefers-reduced-motion: reduce){
  .tour-card,.topsearch .input{animation:none!important;transition:none!important}
}
@media print{
  .topsearch,.tour-layer,.chart-tip,.nba{display:none!important}
  .paper-head .timerbar{position:static}
}
.tour-lift{z-index:111!important}