/* ============================================================
   HOH EXAM SHELL · shared working-surface layout      2026-08-19
   ------------------------------------------------------------
   The layout proved out on the free diagnostic, lifted into one
   file so the timed mock, the question bank and the full-length
   simulator share one implementation instead of three.

   Load AFTER the page's own <style> and after hoh-drill-wide.css,
   which is what hides the 499px marketing footer and the sticky
   site nav while a scored screen is active.

   Everything here is prefixed hx- so it cannot collide with the
   .opts / .q-text / .btn classes these pages already use. Colors
   read the page's own local tokens first and fall back to the
   brand values, so one file works across three stylesheets.

   The rule that matters: a wide screen gets more COLUMNS, never
   longer lines, and the answer sheet is always on screen.
   ============================================================ */

/* The site nav is sticky at z-index 100 and would sit over this header, which
   is exactly the bug that hid the flag button on the diagnostic. While a scored
   screen is active the nav steps aside and the exam header is the only chrome.
   hoh-drill-wide.js sets body.hoh-drill-running off the .screen.active class. */
body.hoh-drill-running > nav,
body.hoh-drill-running nav.site-nav{ display:none; }

/* ---------- the exam header ---------- */
.hx-bar{
  position:sticky; top:0; z-index:40;
  background:rgba(239,235,245,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1.5px solid var(--sand-mid,#D8D1EA);
}
.hx-bar-fill{ height:4px; background:var(--sand-mid,#D8D1EA); }
.hx-bar-fill > i{ display:block; height:100%; width:0;
  background:var(--iris,#5B4BF5); transition:width .35s cubic-bezier(.22,.61,.36,1); }
.hx-row{ max-width:1400px; margin:0 auto; padding:9px 22px;
  display:flex; align-items:center; gap:10px; min-height:52px; }
.hx-label{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.64rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--deep-mid,#534178); white-space:nowrap; }
.hx-grow{ flex:1 1 40px; min-width:20px; }
.hx-count{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.72rem;
  letter-spacing:.06em; color:var(--mid,#6B6480); white-space:nowrap; }
.hx-btn{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer;
  border-radius:8px; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:0 11px; min-height:38px;
  background:transparent; border:1.5px solid var(--sand-mid,#D8D1EA);
  color:var(--deep-mid,#534178); transition:border-color .15s, background .15s, color .15s;
}
.hx-btn:hover{ border-color:var(--iris,#5B4BF5); color:var(--iris,#5B4BF5); }
.hx-btn[aria-pressed="true"]{ background:var(--terra-light,#F7EDE9);
  border-color:var(--terra,#BA7363); color:var(--wine,#8E5446); }
.hx-btn.solid{ background:var(--iris,#5B4BF5); border-color:var(--iris,#5B4BF5); color:#fff; }
.hx-btn.solid:hover{ background:var(--iris-dk,#4A3AD6); border-color:var(--iris-dk,#4A3AD6); color:#fff; }
.hx-btn.rose{ border-color:var(--terra,#BA7363); color:var(--wine,#8E5446); }
.hx-btn[disabled]{ opacity:.4; cursor:default; }
.hx-btn[disabled]:hover{ border-color:var(--sand-mid,#D8D1EA); color:var(--deep-mid,#534178); }
.hx-btn[hidden]{ display:none; }
.hx-glyph{ font-size:.92rem; line-height:1; }

/* the clock lives in the bar and has to stay readable at a glance */
.hx-clock{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.86rem;
  font-weight:600; letter-spacing:.04em; color:var(--deep,#3E3166);
  background:var(--white,#FFFDFB); border:1.5px solid var(--sand-mid,#D8D1EA);
  border-radius:8px; padding:7px 11px; white-space:nowrap; }
.hx-clock.warn{ color:#fff; background:var(--coral,#FF5C39); border-color:var(--coral,#FF5C39); }

/* The pages wrap their screens in a .stage with generous marketing padding.
   A working surface does not need it, and it is the difference between fitting
   a laptop viewport and not. Only while a scored screen is active. */
/* Each page caps .stage at 680 to 760px, which is right for its intro and far
   too narrow for a working surface. While a scored screen is active the stage
   gets out of the way and .hx-body does the centering. */
body.hoh-drill-running .stage{ max-width:none; padding:0; }

/* hoh-drill-wide.css gives every .screen a 20/30 vertical rhythm, which is right
   for a drill that owns its own padding and wrong for a screen wrapped in
   .hx-body, which already has its own. Where :has is unsupported the page simply
   keeps 50px it does not need. */
@media(min-width:1100px){
  .screen:has(> .hx-body){ padding-top:0; padding-bottom:0; }
}

/* ---------- the body: question beside the answer sheet ---------- */
.hx-body{ max-width:1400px; margin:0 auto; padding:18px 22px 26px;
  display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start; }
.hx-main{ min-width:0; }
.hx-prose{ max-width:74ch; }

/* ---------- the answer sheet ---------- */
.hx-rail{ background:var(--white,#FFFDFB); border:1.5px solid var(--sand-mid,#D8D1EA);
  border-radius:14px; padding:15px; }
.hx-rail-h{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:11px; }
.hx-rail-t{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.62rem;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--deep-mid,#534178); }
.hx-rail-x{ display:none; }
.hx-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mid,#6B6480); }
.hx-stats > span{ display:inline-flex; align-items:baseline; gap:3px;
  background:var(--oat,#F2ECE3); border-radius:7px; padding:4px 9px; }
.hx-stats b{ font-family:'Fraunces',Georgia,serif; font-size:.95rem; font-weight:600; }
.hx-sheet{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.hx-sec{ grid-column:1/-1; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.55rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sand-dark,#6B6480); margin-top:7px; }
.hx-sec:first-child{ margin-top:0; }
.hx-cell{ position:relative; height:30px; border-radius:7px; cursor:pointer;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.68rem; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; transition:transform .12s;
  background:var(--white,#FFFDFB); border:1.5px dashed var(--sand-dark,#9D93BE); color:var(--sand-dark,#6B6480); }
.hx-cell:hover{ transform:scale(1.08); }
.hx-cell.is-ans{ background:rgba(91,75,245,.12); border:1.5px solid var(--iris,#5B4BF5); color:var(--iris,#5B4BF5); }
.hx-cell.is-skip{ background:var(--oat,#F2ECE3); border:1.5px solid var(--sand-mid,#D8D1EA); color:var(--sand-dark,#6B6480); }
.hx-cell.is-right{ background:rgba(45,102,81,.13); border:1.5px solid var(--teal,#2D6651); color:var(--teal,#2D6651); }
.hx-cell.is-wrong{ background:rgba(255,92,57,.13); border:1.5px solid var(--coral,#FF5C39); color:var(--wine,#8E5446); }
.hx-cell.is-cur{ background:var(--iris,#5B4BF5); border:1.5px solid var(--iris,#5B4BF5); color:#fff;
  box-shadow:0 0 0 3px rgba(91,75,245,.18); }
.hx-cell.is-here{ box-shadow:0 0 0 3px rgba(91,75,245,.55); font-weight:800; }
.hx-cell .fl{ position:absolute; top:2px; right:2px; width:6px; height:6px;
  border-radius:50%; background:var(--terra,#BA7363); }
.hx-cell.is-cur .fl{ background:#fff; }
.hx-legend{ display:flex; flex-wrap:wrap; gap:5px 11px; margin-top:11px;
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.55rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--mid,#6B6480); }
.hx-legend span{ display:inline-flex; align-items:center; gap:5px; }
.hx-lg{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.hx-cta{ margin-top:13px; display:flex; flex-direction:column; gap:8px; }
.hx-cta > *{ justify-content:center; width:100%; }

/* Short options go two across on a wide screen, which halves the tallest block
   on the page. Only when every option is short, so a grid of ragged paragraphs
   never happens: the page sets .hx-two-up after measuring. */
@media(min-width:1100px){
  .hx-main .opts.hx-two-up{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px; align-items:start; }
  .hx-main .opts.hx-two-up > *{ margin-bottom:0; }
}

/* ---------- wide desktop ---------- */
@media(min-width:1100px){
  .hx-body{ grid-template-columns:minmax(0,1fr) 274px; }
  /* the rail starts below the sticky bar and the body padding, so the cap
     leaves room for both plus the bottom gutter */
  .hx-rail{ position:sticky; top:74px; max-height:calc(100vh - 142px); overflow:auto; }
  .hx-sheet-toggle{ display:none; }
}
/* the case chart rides beside the question instead of pushing it down */
@media(min-width:1380px){
  body.hx-has-chart .hx-body{ grid-template-columns:344px minmax(0,1fr) 274px; }
  body.hx-has-chart .hx-chart{ grid-column:1; grid-row:1; position:sticky; top:74px;
    margin:0; max-height:calc(100vh - 110px); overflow:auto; }
  body.hx-has-chart .hx-main{ grid-column:2; grid-row:1; }
  body.hx-has-chart .hx-rail{ grid-column:3; grid-row:1; }
}
@media(min-width:1100px) and (max-width:1379px){
  body.hx-has-chart .hx-chart{ grid-column:1; grid-row:1; max-height:26vh; overflow:auto; }
  body.hx-has-chart .hx-main{ grid-column:1; grid-row:2; }
  body.hx-has-chart .hx-rail{ grid-column:2; grid-row:1 / span 2; }
}

/* ---------- below 1100px the sheet is a drawer ---------- */
@media(max-width:1099px){
  .hx-rail{ position:fixed; inset:0; z-index:300; border-radius:0; border:none;
    padding:16px; overflow:auto; display:none; }
  body.hx-sheet-open{ overflow:hidden; }
  body.hx-sheet-open .hx-rail{ display:block; }
  .hx-rail-x{ display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:none; background:none; font-size:1.3rem;
    color:var(--mid,#6B6480); cursor:pointer; margin:-8px -8px 0 0; }
  .hx-sheet{ grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:8px; }
  .hx-cell{ height:44px; font-size:.8rem; }
  .hx-row{ padding:8px 16px; gap:8px; flex-wrap:wrap; }
  .hx-body{ padding:14px 16px 22px; }
  .hx-keys{ display:none; }
}

/* ---------- shared bits the pages reuse ---------- */
.hx-keys{ margin-top:14px; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.04em; color:var(--mid,#6B6480);
  display:flex; flex-wrap:wrap; gap:5px 15px; }
.hx-keys b{ color:var(--deep-mid,#534178); }
.hx-acts{ display:flex; align-items:center; gap:12px; margin-top:22px; flex-wrap:wrap; }
.hx-acts .hx-sp{ flex:1; }
.hx-link{ background:none; border:none; font-family:'Outfit',system-ui,sans-serif;
  font-weight:700; font-size:.83rem; color:var(--deep,#3E3166); cursor:pointer;
  padding:9px 6px; min-height:44px; }
.hx-link.quiet{ color:var(--mid,#6B6480); }
.hx-link:hover{ color:var(--iris,#5B4BF5); }
.hx-link[disabled]{ opacity:.36; cursor:default; }
.hx-link[disabled]:hover{ color:var(--deep,#3E3166); }

/* the end-of-exam screen */
.hx-fin{ max-width:1400px; margin:0 auto; padding:24px 22px 34px;
  display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
@media(min-width:1000px){ .hx-fin{ grid-template-columns:minmax(0,420px) minmax(0,1fr); } }
.hx-card{ background:var(--white,#FFFDFB); border:1.5px solid var(--sand-mid,#D8D1EA);
  border-radius:14px; padding:20px; }
.hx-nums{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0; }
.hx-nums > div{ flex:1 1 96px; background:var(--oat,#F2ECE3); border-radius:12px; padding:11px 13px; }
.hx-nums b{ display:block; font-family:'Fraunces',Georgia,serif; font-size:1.6rem; font-weight:600; line-height:1; }
.hx-nums span{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--mid,#6B6480); }
.hx-warn{ margin-top:15px; background:rgba(255,92,57,.07); border:1.5px solid rgba(255,92,57,.34);
  border-radius:12px; padding:12px 15px; font-size:.85rem; line-height:1.5; color:var(--wine,#8E5446); }
.hx-warn .hx-btn{ margin-top:9px; }

/* filter chips on a post-score review */
.hx-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.hx-chip{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; border-radius:50px;
  padding:0 14px; min-height:38px; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; border:1.5px solid var(--sand-mid,#D8D1EA); color:var(--deep-mid,#534178); }
.hx-chip:hover{ border-color:var(--iris,#5B4BF5); color:var(--iris,#5B4BF5); }
.hx-chip[aria-pressed="true"]{ background:var(--iris,#5B4BF5); border-color:var(--iris,#5B4BF5); color:#fff; }
.hx-chip[disabled]{ opacity:.4; cursor:default; }
.hx-chip i{ font-style:normal; opacity:.7; }
.hx-empty{ background:var(--white,#FFFDFB); border:1.5px dashed var(--sand-mid,#D8D1EA);
  border-radius:14px; padding:34px 24px; text-align:center; color:var(--mid,#6B6480); font-size:.95rem; }

@media(prefers-reduced-motion:reduce){
  .hx-cell:hover{ transform:none; }
  .hx-bar-fill > i{ transition:none; }
}