/* ============================================================
   HOH DRILL LAYOUT · wide desktop + small-screen notice
   ------------------------------------------------------------
   Loaded LAST in every drill, after that drill's inline <style>,
   so it wins on equal specificity without editing 15 stylesheets.

   Nothing here changes anything below 1100px. Phones, tablets and
   small laptops render exactly as they did before.

   The rule that matters: a wide screen gets more COLUMNS, never
   longer lines. Prose stays at a readable measure no matter how
   wide the shell gets.
   ============================================================ */

/* ---------- the small-screen notice (see hoh-drill-wide.js) ---------- */
.hoh-smallnote{
  display:flex; gap:10px; align-items:flex-start;
  max-width:680px; margin:16px auto 0; padding:12px 14px;
  border:1.5px solid var(--line,#E4DBCD);
  border-left:4px solid var(--iris,#5B4BF5);
  border-radius:10px; background:#FBF8F3;
  font:500 .84rem/1.45 'Outfit',system-ui,sans-serif;
  color:var(--ink,#1C1929);
}
.hoh-smallnote span{ flex:1 1 auto; }
.hoh-smallnote b{ font-weight:700; }
.hoh-smallnote button{
  flex:0 0 auto; border:0; background:none; cursor:pointer; padding:2px 4px;
  font:600 1rem/1 system-ui,sans-serif; color:var(--sand-dark,#6E667F);
}
.hoh-smallnote button:hover{ color:var(--iris,#5B4BF5); }
@media(min-width:900px){ .hoh-smallnote{ display:none !important; } }

/* ---------- wide desktop ---------- */
@media(min-width:1100px){

  /* Text drills get the wider shell. The labeling drills carry body.art-drill
     because their artwork scales with its container: widening them would only
     make every figure taller. They keep their own calibrated width and take
     just the vertical tightening below. */
  body:not(.art-drill) .stage,
  body:not(.art-drill) .pbar-wrap{ max-width:1240px; }

  /* Artwork is calibrated, and it scales with its container, so a wider
     page would simply make every figure taller. Cap the art and give the
     reclaimed width to the panel beside it, where a wider name bank wraps
     into fewer rows. No viewBox or landmark coordinate is touched. */
  .figure, .figwrap, .hero-art, .chart-orient{
    max-width:780px; margin-left:auto; margin-right:auto;
  }
  /* The drill screens are working surfaces, so they get a tighter
     vertical rhythm than the marketing pages they inherit it from. */
  .screen{ padding-top:20px; padding-bottom:30px; }
  .pbar-wrap{ padding-top:14px; }

  /* Any stack of answer cards becomes columns. auto-fit means a drill
     with three short options gets three across and one with two long
     ones gets two, without a per-drill rule. */
  .opts, .say-list, .steps, .check-list{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:12px; align-items:start;
  }
  .opts > *, .say-list > *, .steps > *, .check-list > *{ margin-bottom:0; }

  /* Matching boards. Definitions are long, so they get a wider track. */
  .duty-board, .duty-board.wide{
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  }
  .duty-board.buckets{ grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); }
  .move-pool{ gap:10px; }

  /* The patient chart rides beside the decision instead of pushing it
     down the page. Drills with no chart collapse to a single column. */
  #screen-shift.active{
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    column-gap:30px; align-items:start;
  }
  #screen-shift.active > *{ grid-column:1; min-width:0; }
  #screen-shift.active > #chart-card{
    grid-column:2; grid-row:1 / span 30;
    width:330px; margin:0; position:sticky; top:88px;
  }


  /* One labeling drill stacks two full radiographs, which is the only art
     layout that does not fit. Those two go side by side instead, so the
     films get shorter without either one shrinking much. */
  body.art-films .stage, body.art-films .pbar-wrap{ max-width:1240px; }
  body.art-films .films{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px; align-items:start;
  }

  /* Prose keeps a readable line length inside the wider shell. */
  .scenario, .q-text, .moment, .feedback, .intro-p, .board-hint,
  .seq-hint, .lead, .res-copy{ max-width:76ch; }
}

/* ---------- a drill in progress is a working surface ----------
   The marketing footer is 499px tall and sits under every drill screen,
   which is what actually forces the scroll on a desktop. It belongs on
   the intro and the results, not underneath a question. hoh-drill-wide.js
   sets body.hoh-drill-running while a scored screen is active. */
body.hoh-drill-running .site-footer{ display:none; }

@media(prefers-reduced-motion:reduce){ .hoh-smallnote{ transition:none; } }