/* ==========================================================================
   Exam-room teaching deck
   drcrodriguez.com  /teach/
   --------------------------------------------------------------------------
   All brand values are in :root. To match the main site, change these six
   lines and nothing else.
   No web fonts by design: hospital wifi and guest networks are unreliable,
   and a font that fails to load should never change the layout at the bedside.
   ========================================================================== */

:root {
  --ink:      #14181d;   /* body text */
  --ink-soft: #52585f;   /* secondary text */
  --paper:    #faf9f6;   /* page */
  --line:     #dcded8;   /* rules, dividers */
  --duct:     #1f4e5f;   /* structure, ducts, links */
  --bile:     #a67c10;   /* the accent: bile. used for "your case" only */
  --alert:    #8c2f1e;   /* red flags */
  --draft:    #f4d35e;   /* unset placeholder highlight */

  --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: clamp(1.25rem, 4vw, 3.5rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-text-size-adjust: 100%;
}

body.deck {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ---------- shell -------------------------------------------------------- */

.deck-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  max-width: 1400px;
  margin: 0 auto;
}

.deck-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem var(--pad);
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.deck-top .who {
  font-family: var(--display);
  color: var(--ink);
  font-size: 0.95rem;
}

.deck-top .dx {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bile);
  border: 1px solid var(--bile);
  border-radius: 2px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

.deck-top .spacer { flex: 1; }

.deck-top a {
  color: var(--duct);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.draft-badge {
  background: var(--draft);
  color: #3a2f00;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}

/* ---------- stage -------------------------------------------------------- */

.stage {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  padding: clamp(1rem, 3vh, 2.5rem) var(--pad);
  overflow-y: auto;
  position: relative;
}

@media (min-width: 900px) {
  .stage { grid-template-columns: 1fr 210px; gap: var(--pad); }
}

.frame {
  max-width: 42ch;
  animation: rise 180ms ease-out;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.frame .step {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.9rem;
}

.frame h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
}

.frame p {
  font-size: clamp(1.08rem, 2.3vw, 1.45rem);
  line-height: 1.5;
  margin: 0 0 1rem;
  max-width: 38ch;
}

.frame p.lead { color: var(--ink); }
.frame p.aside { color: var(--ink-soft); font-size: clamp(0.98rem, 1.9vw, 1.15rem); }

/* the personalization band: the only place the accent is used */
.yours {
  border-left: 4px solid var(--bile);
  background: rgba(166, 124, 16, 0.07);
  padding: 0.85rem 1rem;
  margin: 1.4rem 0;
}

.yours .yours-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bile);
  display: block;
  margin-bottom: 0.35rem;
}

.yours p { font-size: clamp(1rem, 2vw, 1.2rem); margin: 0; }

.flags { list-style: none; padding: 0; margin: 1rem 0 0; }
.flags li {
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.4;
  padding: 0.5rem 0 0.5rem 1.6rem;
  border-top: 1px solid var(--line);
  position: relative;
}
.flags li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 0.55rem; height: 0.55rem;
  background: var(--alert);
  border-radius: 50%;
}

.readmore {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--duct);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* unset practice-specific values, impossible to miss */
.set {
  background: var(--draft);
  color: #3a2f00;
  padding: 0 0.25rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.85em;
}

/* ---------- the biliary rail (signature element) ------------------------- */

.rail {
  display: none;
  position: sticky;
  top: 0;
}

@media (min-width: 900px) { .rail { display: block; } }

.rail svg { width: 100%; height: auto; }

.rail .seg {
  fill: none;
  stroke: var(--line);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke 200ms ease, stroke-width 200ms ease;
}

.rail .organ {
  fill: #eceee7;
  stroke: var(--line);
  stroke-width: 2;
  transition: fill 200ms ease, stroke 200ms ease;
}

.rail .seg.lit { stroke: var(--bile); stroke-width: 10; }
.rail .organ.lit { fill: rgba(166, 124, 16, 0.22); stroke: var(--bile); }

.rail .stone { fill: var(--ink); opacity: 0; transition: opacity 220ms ease; }
.rail .stone.lit { opacity: 1; }

.rail-caption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 0.5rem;
  min-height: 2.4em;
  line-height: 1.35;
}

/* ---------- controls ----------------------------------------------------- */

.deck-bottom {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem var(--pad) max(0.6rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.dots { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }

.dot {
  width: 22px; height: 5px;
  background: var(--line);
  border: none;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
}
.dot.done { background: var(--ink-soft); }
.dot.here { background: var(--bile); }

.nav {
  display: flex;
  gap: 0.5rem;
  flex: none;
}

.nav button {
  font-family: var(--body);
  font-size: 1rem;
  min-width: 3.4rem;
  min-height: 2.9rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 4px;
  cursor: pointer;
}
.nav button:disabled { opacity: 0.35; cursor: default; }
.nav button.primary { background: var(--duct); color: #fff; border-color: var(--duct); }

/* invisible tap zones for one-handed use, phone only */
.tapzone {
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tapzone.prev { left: 0; }
.tapzone.next { right: 0; }
@media (min-width: 900px) { .tapzone { display: none; } }

:focus-visible { outline: 3px solid var(--duct); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, .frame { animation: none !important; transition: none !important; }
}

/* ---------- picker page -------------------------------------------------- */

.pick-wrap { max-width: 60rem; margin: 0 auto; padding: var(--pad); }

.pick-wrap h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  margin: 0 0 0.4rem;
}

.pick-wrap .sub { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 2rem; max-width: 46ch; }

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.pick {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  padding: 1rem 1.1rem;
  min-height: 5.6rem;
}

.pick strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  display: block;
  margin-bottom: 0.25rem;
}

.pick span { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.35; display: block; }

.pick.ready { border-left: 4px solid var(--bile); }

.pick.pending {
  opacity: 0.55;
  cursor: not-allowed;
  background: transparent;
}

.pick .tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-top: 0.5rem;
}

.opts { margin: 2.4rem 0 0; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.opts h2 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; margin: 0 0 0.3rem; }
.opts p { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 1rem; max-width: 50ch; }

.toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.toggle input { accent-color: var(--bile); width: 1.05rem; height: 1.05rem; }
.toggle.on { border-color: var(--bile); background: rgba(166, 124, 16, 0.08); }

.start {
  display: inline-block;
  margin-top: 1.6rem;
  background: var(--duct);
  color: #fff;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border-radius: 4px;
  font-size: 1.05rem;
}

.fineprint {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 60ch;
}

/* your own graphics take over the rail when a frame has one */
.rail-art {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

/* ---------- frame art: the picture leads when a frame has one ------------ */
/* Added Aug 25, 2026: pictures render large in the frame itself, like the
   exam-room talk. The rail keeps the schematic as the constant map. */
.frame-art { margin: 0 0 1.3rem; }
.frame-art img {
  display: block;
  width: 100%;
  max-height: 48vh;
  object-fit: contain;
  object-position: left center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
@media (min-width: 900px) { .frame { max-width: 62ch; } }

/* ---------- Aug 25 revisions: paired images and title spacing ------------ */
.frame h1 { margin-bottom: 1.5rem; }
.frame-art { margin-top: 0.2rem; }
.frame-art.multi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  align-items: start;
}
.frame-art.multi img { max-height: 38vh; }
/* a third image in a pair-grid spans the full width */
.frame-art.multi img:nth-child(3) { grid-column: 1 / -1; max-height: 44vh; }
@media (max-width: 560px) {
  .frame-art.multi { grid-template-columns: 1fr; }
}

/* extras that do not apply to the chosen diagnosis */
.toggle.na { opacity: 0.35; cursor: not-allowed; }
.toggle.na input { cursor: not-allowed; }

/* ==========================================================================
   Aug 27: the closing QR frame, and the no-diagnosis screen
   ========================================================================== */

/* ---------- closing frame: scan to take it home ------------------------- */
/* The frame is normally capped at 42ch for reading. This one is a code plus
   a short instruction, so it gets the room instead.
   The class is set by the engine rather than matched with :has(), because
   exam-room desktops are exactly where an old browser turns up. */
.frame.is-qr { max-width: 62ch; }

.qr-wrap {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
  margin-top: 0.4rem;
}

.qr-code {
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.5rem;
  line-height: 0;
}

/* The library emits a plain <svg>; make it fill its box and stay square. */
.qr-code svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  shape-rendering: crispEdges;   /* keeps module edges hard at any scale */
}


/* Way back to the rest of the site, under the code. Deliberately not the
   deck's own URL: that string is unretypeable. Sized as a real tap target,
   because most of the people who reach it are on a phone. */
.qr-brand {
  display: block;
  max-width: none !important;
  margin-top: 1.6rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--duct);
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
}

.qr-brand span {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}

.qr-brand strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  color: var(--duct);
}

.qr-brand:hover { border-color: var(--duct); background: rgba(31, 78, 95, 0.04); }

@media (max-width: 720px) {
  .qr-wrap { grid-template-columns: 1fr; }
  .qr-code { max-width: 260px; }
}

/* ---------- no diagnosis in the URL ------------------------------------- */
body.nodeck { overflow: auto; }
body.nodeck .stage { grid-template-columns: 1fr; }

.nodx { max-width: 54ch; padding: clamp(1rem, 4vh, 3rem) 0; }

.nodx .eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 1rem;
}

.nodx h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1.3rem;
}

.nodx p {
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 46ch;
}

.nodx .actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.9rem;
}

.nodx .actions a {
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.65rem 1.05rem;
  border: 1px solid var(--duct);
  color: var(--duct);
  border-radius: 2px;
}

.nodx .actions a.primary { background: var(--duct); color: var(--paper); }
.nodx .actions a:hover { border-color: var(--ink); }

.nodx .staff {
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.nodx .staff a { color: var(--duct); }

/* ---------- talks + slide catalog ---------------------------------------
   /teach/talks.html is the walk-throughs already built, one tap each, and
   reuses .pick-grid and .pick as they are. /teach/custom.html is the slide
   catalog: the talk you are assembling at the top, everything available in
   collapsed groups underneath. Added Sep 13, 2026. */

a.pick { text-decoration: none; color: inherit; display: block; }
a.pick:hover { border-color: var(--bile); }

/* The two ways in sit on the heading line: the page you are on is the h1, the
   other one is a link on the far right. One line, no second row of furniture. */
.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  margin: 0 0 0.4rem;
}
.page-head h1 { margin: 0; }
.mode {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  font-size: 0.92rem;
  color: var(--duct);
  text-decoration: none;
  white-space: nowrap;
}
.mode:hover { border-color: var(--duct); background: var(--paper); }

.next-page {
  margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.next-page a { color: var(--duct); font-weight: 600; }
.next-page span { display: block; color: var(--ink-soft); font-size: 0.88rem; margin-top: 0.2rem; }

.mini {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  padding: 0.25rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--ink-soft);
  cursor: pointer;
}
.mini:hover:not(:disabled) { border-color: var(--duct); color: var(--duct); }
.mini:disabled { opacity: 0.3; cursor: default; }

/* ---- the talk being assembled ---- */
.talk-panel {
  margin: 1.8rem 0 2.2rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--bile);
  background: #fff;
  padding: 1rem 1.1rem 1.2rem;
}
.talk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.talk-head h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.15rem; margin: 0;
}
.talk-empty { color: var(--ink-soft); font-size: 0.9rem; margin: 0.5rem 0 0; }

.slide-list { list-style: none; margin: 0.7rem 0 0; padding: 0; counter-reset: slide; }

.slide-row {
  display: flex; align-items: center; gap: 0.6rem;
  border-bottom: 1px solid var(--line);
  padding: 0.42rem 0;
}
.slide-row:last-child { border-bottom: none; }
.slide-row::before {
  counter-increment: slide;
  content: counter(slide);
  font-family: var(--mono); font-size: 0.78rem; color: var(--bile); min-width: 1.5rem;
}
.slide-title { flex: 1; font-size: 0.96rem; line-height: 1.35; }
.slide-from { color: var(--ink-soft); font-size: 0.82rem; margin-left: 0.5rem; }
.slide-from::before { content: "\2014 "; }
.slide-move { display: flex; gap: 0.22rem; }

.talk-panel .start { margin-top: 1.2rem; }
.start[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---- the catalog ---- */
.cat-group { border-top: 1px solid var(--line); }
.cat-group:last-of-type { border-bottom: 1px solid var(--line); }
.cat-group > summary {
  cursor: pointer; padding: 0.75rem 0.2rem;
  font-family: var(--display); font-size: 1.05rem;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.cat-group > summary::-webkit-details-marker { display: none; }
.cat-group > summary::marker { content: ""; }
.cat-group > summary::before {
  content: "+"; font-family: var(--mono); color: var(--ink-soft); width: 1rem;
}
.cat-group[open] > summary::before { content: "\2013"; }
.cat-n { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); }

.cat-items { padding: 0 0 0.8rem 1.6rem; }
.cat-row {
  display: flex; align-items: baseline; gap: 0.55rem;
  padding: 0.34rem 0; cursor: pointer; font-size: 0.95rem; line-height: 1.35;
}
.cat-row input { accent-color: var(--bile); width: 1.05rem; height: 1.05rem; }
.cat-row:hover { color: var(--duct); }

/* ==========================================================================
   Sep 19, 2026: bigger pictures on the exam-room screen, and the web address
   moved up beside the QR code
   ========================================================================== */

/* ---------- pictures fill the column on a wide screen --------------------
   The frame was capped at 62ch, so on the exam-room monitor every picture
   stopped at about 630px and left a third of the screen empty to its right.
   From 900px up the frame takes the whole column and the picture grows to
   fit it, limited by height so the first lines of text stay on screen.
   width:auto lets the border hug the picture instead of boxing in white
   space. Phones are untouched: below 900px none of this applies. */
@media (min-width: 900px) {
  .frame, .frame.is-qr { max-width: none; }
  .frame p { max-width: 58ch; }
  .frame-art img {
    width: auto;
    max-width: 100%;
    max-height: 58vh;
  }
  /* A pair shares one row at one height, whatever the two shapes are. The
     engine sets each picture's flex-grow to its own width-to-height ratio
     once it has loaded, which is what makes the heights come out equal. */
  .frame-art.multi { display: flex; align-items: flex-start; gap: 0.6rem; }
  .frame-art.multi img,
  .frame-art.multi img:nth-child(3) {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    height: auto;
    max-height: none;
  }
}

/* ---------- closing frame, rearranged ------------------------------------
   The web address used to sit under everything, below the fold on the
   exam-room screen. It now sits beside the code, second thing on the right,
   and is the first thing on a phone. */
.qr-wrap {
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  grid-template-areas:
    "code lead"
    "code brand"
    "code fine";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
  row-gap: 0;
}
.qr-code  { grid-area: code; }
.qr-lead  { grid-area: lead; }
.qr-brand { grid-area: brand; }
.qr-fine  { grid-area: fine; }
.qr-lead p, .qr-fine p { max-width: 40ch; }
.qr-fine p:last-child { margin-bottom: 0; }

.qr-brand {
  margin: 0.2rem 0 1.3rem;
  padding: 1rem 1.2rem;
  max-width: 30rem !important;
  background: var(--duct);
  border: 1px solid var(--duct);
  border-radius: 4px;
  color: #fff;
}
.qr-brand span { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }
.qr-brand strong { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.qr-brand:hover { background: #173c49; border-color: #173c49; }

@media (max-width: 720px) {
  .qr-wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "code" "lead" "fine";
    grid-template-rows: none;
  }
  .qr-brand { margin: 0 0 1.2rem; }
  .qr-code { margin-bottom: 1.1rem; }
}

/* ---------- picker: a choice that another choice has ruled out ----------- */
.toggle.na[data-why]::after {
  content: attr(data-why);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-left: 0.2rem;
}

/* ==========================================================================
   Sep 19, 2026: a second deck (inguinal hernia)
   ========================================================================== */

/* ---------- rail additions the hernia map needs --------------------------
   thin     a fine line (the skin nerves) rather than a duct-weight one
   overlay  drawn over the map and hidden until lit (the mesh), the way the
            stones are in the gallbladder map
   text     the 1, 2, 3 that match the numbers on the slide art */
.rail .seg.thin { stroke-width: 3; }
.rail .seg.thin.lit { stroke-width: 4; }
.rail .overlay {
  fill: rgba(166, 124, 16, 0.16);
  stroke: var(--bile);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
  opacity: 0;
  transition: opacity 220ms ease;
}
.rail .overlay.lit { opacity: 1; }
.rail text {
  font-family: var(--mono);
  font-size: 13px;
  fill: var(--ink-soft);
  text-anchor: middle;
  pointer-events: none;
}

/* ---------- picker: which operation -------------------------------------- */
.proc-switch { margin: 0 0 1.6rem; }
.proc-switch .toggle { font-size: 1.05rem; padding: 0.6rem 1.1rem; }
[hidden] { display: none !important; }

/* ---------- phone: a long chip plus the draft badge must wrap -------------
   "Open and robotic · Inguinal hernia" and a Draft badge together are wider
   than a phone, and a header that cannot wrap drags the whole deck sideways. */
.deck-top { flex-wrap: wrap; row-gap: 0.35rem; }
.deck-top .spacer { min-width: 0; }
.stage, .frame { min-width: 0; }
@media (max-width: 560px) {
  .deck-top .dx { white-space: normal; }
}

/* ==========================================================================
   Sep 20, 2026: THE PICTURE COMES FIRST  (body.deck-wide)
   --------------------------------------------------------------------------
   Standing rule from Dr. Rodriguez, for every deck: the picture has to read
   from across the exam room. Opt in per deck with
       <body class="deck deck-wide">
   A deck without the class is untouched. Phones (under 700px) never see any
   of this.

   700px and up   the deck uses the whole window, the anatomy rail steps
                  aside until the window is 1500px wide, and a picture may
                  grow to the full width of the slide.
   1000px and up  a slide with one picture becomes two columns: the picture
                  on the left, as tall as the window allows, and the slide
                  number, title and words on the right. Nothing sits above
                  the picture, which buys it another 100px of height.
                  A slide with a pair keeps its title on top and runs the
                  pair the width of the slide.
   ========================================================================== */
@media (min-width: 700px) {
  body.deck-wide .deck-shell { max-width: none; }
  body.deck-wide .frame,
  body.deck-wide .frame.is-qr { max-width: none; }
  body.deck-wide .stage { grid-template-columns: minmax(0, 1fr); padding-top: clamp(0.7rem, 2vh, 1.4rem); padding-bottom: clamp(0.5rem, 1.5vh, 1rem); }
  body.deck-wide .rail { display: none; }

  body.deck-wide .frame-art { margin: 0 0 1rem; }
  body.deck-wide .frame-art img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 13rem);
    border: 0;
    border-radius: 6px;
    background: #fff;
  }
  body.deck-wide .frame p { max-width: 60ch; }
}

@media (min-width: 1500px) {
  body.deck-wide .stage { grid-template-columns: minmax(0, 1fr) 170px; column-gap: 2rem; }
  body.deck-wide .rail { display: block; }
}

@media (min-width: 1000px) and (min-height: 520px) {
  /* ---- one picture: picture left, everything else right ---- */
  body.deck-wide .frame:has(> .frame-art:not(.multi)) {
    display: grid;
    grid-template-columns: auto minmax(17rem, 1fr);
    grid-template-rows: repeat(12, min-content) 1fr;
    column-gap: clamp(1.5rem, 2.4vw, 3rem);
    align-items: start;
  }
  body.deck-wide .frame:has(> .frame-art:not(.multi)) > * { grid-column: 2; min-width: 0; }
  body.deck-wide .frame:has(> .frame-art:not(.multi)) > .readmore { justify-self: start; }
  body.deck-wide .frame:has(> .frame-art:not(.multi)) > .frame-art {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0;
  }
  /* The height is set, not capped, so a small picture is scaled up to fill
     the screen too. 9.2rem is the top bar, the bottom bar and the stage
     padding. The width cap leaves the words their 17rem. */
  body.deck-wide .frame-art:not(.multi) img {
    height: calc(100vh - 9.2rem);
    max-height: none;
    width: auto;
    max-width: min(64vw, calc(100vw - 17rem - 3 * var(--pad)));
    object-fit: contain;
    object-position: left top;
    background: transparent;
  }
  body.deck-wide .frame:has(> .frame-art:not(.multi)) h1 {
    font-size: clamp(1.7rem, 2.5vw, 2.9rem);
    margin-bottom: 1rem;
  }
  body.deck-wide .frame p { font-size: clamp(1.15rem, 1.4vw, 1.65rem); line-height: 1.4; max-width: 36ch; margin-bottom: 0.8em; }
  body.deck-wide .frame p.aside { font-size: clamp(1.02rem, 1.15vw, 1.3rem); }
  body.deck-wide .flags li { font-size: clamp(1.15rem, 1.35vw, 1.55rem); }

  /* ---- a pair: title on top, the pair as wide as the slide ---- */
  body.deck-wide .frame-art.multi { max-width: none; margin-bottom: 0.9rem; }
  body.deck-wide .frame-art.multi img { max-height: none; background: #fff; }
  body.deck-wide .frame:has(> .frame-art.multi) { max-width: calc((100vh - 25.5rem) * 3.5); }
  body.deck-wide .frame-art.multi ~ p { max-width: none; margin-bottom: 0.55rem; }

  /* ---- slides with no picture: let the words be big ---- */
  body.deck-wide .frame:not(:has(> .frame-art)):not(.is-qr) p { max-width: 46ch; }
}
@media (min-width: 1500px) and (min-height: 520px) {
  body.deck-wide .frame-art:not(.multi) img { max-width: min(60vw, calc(100vw - 17rem - 3 * var(--pad) - 170px - 2rem)); }
}

/* ---------- the closing slide, rebuilt ------------------------------------
   One square, one column of words, and every block in that column the same
   width with the same left edge. The square is as tall as the column beside
   it, so the two halves line up top and bottom instead of trailing off. */
@media (min-width: 700px) {
  body.deck-wide .frame.is-qr h1 { margin-bottom: clamp(0.8rem, 2vh, 1.4rem); }
  body.deck-wide .qr-wrap {
    grid-template-columns: min(44vw, calc(100vh - 15rem), 640px) minmax(0, 34rem);
    grid-template-areas:
      "code lead"
      "code brand"
      "code fine";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(1.6rem, 3.5vw, 4rem);
    row-gap: clamp(0.9rem, 2vh, 1.5rem);
    align-items: start;
    margin-top: 0;
  }
  body.deck-wide .qr-code { padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; max-width: none; margin: 0; }
  body.deck-wide .qr-lead p,
  body.deck-wide .qr-fine p { max-width: none; margin: 0; }
  body.deck-wide .qr-lead p { font-size: clamp(1.25rem, 1.7vw, 1.9rem); line-height: 1.4; }
  body.deck-wide .qr-fine { align-self: end; border-top: 1px solid var(--line); padding-top: clamp(0.8rem, 1.6vh, 1.2rem); }
  body.deck-wide .qr-fine p.lead { font-size: clamp(1.05rem, 1.25vw, 1.4rem); line-height: 1.45; }
  body.deck-wide .qr-fine p.aside { font-size: clamp(0.95rem, 1.05vw, 1.15rem); margin-top: 0.7rem; }
  body.deck-wide .qr-brand {
    max-width: none !important;
    width: 100%;
    margin: 0;
    padding: clamp(1rem, 2vh, 1.5rem) clamp(1.1rem, 1.6vw, 1.7rem);
    border-radius: 6px;
  }
  body.deck-wide .qr-brand span { font-size: clamp(0.95rem, 1.05vw, 1.15rem); margin-bottom: 0.35rem; }
  body.deck-wide .qr-brand strong { font-size: clamp(1.5rem, 2.3vw, 2.5rem); }
}

/* ==========================================================================
   Sep 20, 2026: the anatomy map stays  (body.deck-wide.deck-rail)
   --------------------------------------------------------------------------
   The wide layout above hides the side map under 1500px. The inguinal hernia
   deck teaches from its map on every slide, so that deck keeps it from 900px
   up and the picture gives up that column. Opt in per deck with
       <body class="deck deck-wide deck-rail">
   ========================================================================== */
@media (min-width: 900px) {
  body.deck-wide.deck-rail .stage { grid-template-columns: minmax(0, 1fr) 170px; column-gap: 2rem; }
  body.deck-wide.deck-rail .rail { display: block; }
}
@media (min-width: 1000px) and (min-height: 520px) {
  body.deck-wide.deck-rail .frame-art:not(.multi) img,
  body.deck-wide.deck-rail .frame-art:not(.multi) video {
    max-width: min(60vw, calc(100vw - 17rem - 3 * var(--pad) - 170px - 2rem));
  }
}

/* ==========================================================================
   Sep 20, 2026: video as slide art, and tap a picture to enlarge it.
   --------------------------------------------------------------------------
   A slide's art may be an .mp4 (see teach-engine.js). It takes the same box a
   picture would. The enlarge overlay only exists on decks that ask for it
   (zoom: true in the data file), which puts can-zoom on the body.
   ========================================================================== */
.frame-art video {
  position: relative; z-index: 3; display: block; width: 100%; max-height: 48vh;
  border: 1px solid var(--line); border-radius: 4px; background: #000;
}
@media (min-width: 900px) { .frame-art video { width: auto; max-width: 100%; max-height: 58vh; } }
@media (min-width: 1000px) and (min-height: 520px) {
  body.deck-wide .frame-art:not(.multi) video {
    height: calc(100vh - 9.2rem); max-height: none; width: auto; border: 0;
    max-width: min(64vw, calc(100vw - 17rem - 3 * var(--pad)));
  }
}
body.deck-wide.deck-rail .frame-art { align-self: start; }

body.can-zoom .frame-art img { position: relative; z-index: 3; cursor: zoom-in; }
.zoomhint {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 0.45rem;
}
.frame-art.multi .zoomhint { flex-basis: 100%; grid-column: 1 / -1; }
@media (min-width: 900px) { body.can-zoom .frame-art.multi { flex-wrap: wrap; } }
.zoom { position: fixed; inset: 0; z-index: 100; background: rgba(12, 14, 16, 0.97); display: flex; }
.zoom[hidden] { display: none; }
.zoom-scroll { flex: 1; display: flex; overflow: auto; -webkit-overflow-scrolling: touch; }
.zoom-scroll img { margin: auto; width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; }
.zoom.in .zoom-scroll img { width: 260%; height: auto; max-width: none; object-fit: unset; }
.zoom-x {
  position: fixed; top: 0.6rem; right: 0.7rem; z-index: 101; width: 3rem; height: 3rem;
  border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.55);
  color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
/* ---------- closing frame: Watch at home (CRod, Oct 11, 2026) ------------
   A link to the deck's own video on the site, under the web address. Only
   decks that set T.VIDEOS get the extra grid row. */
.qr-wrap.has-watch {
  grid-template-areas:
    "code lead"
    "code brand"
    "code watch"
    "code fine";
  grid-template-rows: auto auto auto 1fr;
}
.qr-watch-list { grid-area: watch; display: flex; flex-direction: column; gap: 0.7rem; margin: 0 0 1.3rem; max-width: 30rem; }
.qr-watch { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-decoration: none; }
.qr-watch:hover { border-color: var(--duct); }
.qr-play { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--duct); display: inline-grid; place-items: center; flex: none; }
.qr-play::after { content: ""; border-left: 0.8rem solid #fff; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; margin-left: 0.2rem; }
.qw-text { display: flex; flex-direction: column; gap: 0.1rem; }
.qw-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.qw-t { font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.qw-n { font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 720px) {
  .qr-wrap.has-watch { grid-template-areas: "brand" "watch" "code" "lead" "fine"; grid-template-rows: none; }
}
@media (min-width: 700px) {
  body.deck-wide .qr-wrap.has-watch {
    grid-template-areas:
      "code lead"
      "code brand"
      "code watch"
      "code fine";
    grid-template-rows: auto auto auto 1fr;
  }
  body.deck-wide .qr-watch-list { max-width: none; margin: 0; }
}