/* ==========================================================================
   Draco EMT Prep: textbook illustrations (includes/figures.php), the Visual Guides page and the marketing showcase.
   The art always sits on its own white panel, in both themes, and is never inverted or filtered. The label discs,
   numerals and leader lines match the printed book (navy #243f5e, white numerals, white halos); those two values are
   the only literal hex colors here, besides the black rgba() shadows and scrim and the white hairline on the light
   theme's steel button. Everything else uses the site's tokens: style.css on the desktop pages, phone.css (and
   tablet.css) on phones and tablets, so each value names both spellings where they differ.
   ========================================================================== */

.emtp-fig, .emtp-figview{
  --fig-paper:#fff;      /* the art's panel, the disc numerals and halos (fixed: the art is drawn on white) */
  --fig-navy:#243f5e;    /* the book's label disc and leader line (fixed: matches the printed figures) */
}

/* ---------- Figure ---------- */
.emtp-fig{
  --fig-disc:24px;
  position:relative; box-sizing:border-box; width:100%; max-width:var(--fig-max, none);
  margin:0 auto 36px; color:var(--text);
  container-type:inline-size; container-name:emtpfig;
}
.emtp-fig *, .emtp-fig *::before, .emtp-fig *::after{box-sizing:border-box}
.emtp-fig__body{display:block}
.emtp-fig__media{min-width:0}
.emtp-fig__panel{
  background:var(--fig-paper); border:1px solid var(--border); border-radius:12px; padding:10px;
  box-shadow:var(--shadow-card, var(--shadow, none));
}
.emtp-fig__stage{
  --fig-disc:24px;
  position:relative; width:100%; margin:0 auto; line-height:0; container-type:inline-size;
  /* the picture's own width at most, and short enough to see whole on the screen */
  max-width:min(100%, var(--fig-w, 100%), calc(var(--fig-ar, 1) * 78vh));
}
@supports (width:1cqi){
  .emtp-fig__stage, .emtp-figview__stage{--fig-disc:clamp(18px, 2.7cqi, 30px)}
}
.emtp-fig__stage picture{display:block}
.emtp-fig__img{display:block; width:100%; height:auto; border-radius:4px}
.emtp-fig__stage.is-zoomable{cursor:zoom-in}

/* Leader lines, target dots and numbered discs: drawn over the picture, sized to it, never filtered. */
.emtp-fig__overlay{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none}
.emtp-fig__lines{position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible}
.emtp-fig__leader{transition:opacity .15s ease}
.emtp-fig__halo, .emtp-fig__line{fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke}
.emtp-fig__halo{stroke:var(--fig-paper); stroke-width:4px}
.emtp-fig__line{stroke:var(--fig-navy); stroke-width:1.6px}
.emtp-fig__dot, .emtp-fig__disc{position:absolute; transform:translate(-50%, -50%)}
.emtp-fig__dot{
  width:calc(var(--fig-disc) * .32); height:calc(var(--fig-disc) * .32); border-radius:50%;
  background:var(--fig-navy); box-shadow:0 0 0 1.5px var(--fig-paper); transition:opacity .15s ease, box-shadow .15s ease;
}
.emtp-fig__disc{
  display:flex; align-items:center; justify-content:center; width:var(--fig-disc); height:var(--fig-disc);
  border-radius:50%; background:var(--fig-navy); color:var(--fig-paper);
  font-family:var(--font-body, var(--font, system-ui)); font-weight:700; font-size:max(10px, calc(var(--fig-disc) * .5));
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; user-select:none; -webkit-user-select:none;
  box-shadow:0 0 0 2px var(--fig-paper), 0 1px 4px rgba(0,0,0,.35);
  pointer-events:auto; transition:opacity .15s ease, box-shadow .15s ease;
}
/* One label picked (a key name hovered or focused, or its disc hovered): the others step back, it gains a ring. */
.emtp-fig.has-active .emtp-fig__disc, .emtp-fig.has-active .emtp-fig__dot, .emtp-fig.has-active .emtp-fig__leader{opacity:.3}
.emtp-fig.has-active .emtp-fig__disc.is-active, .emtp-fig.has-active .emtp-fig__dot.is-active,
.emtp-fig.has-active .emtp-fig__leader.is-active{opacity:1}
.emtp-fig__disc.is-active{z-index:2; box-shadow:0 0 0 2px var(--fig-paper), 0 0 0 5px var(--fig-navy), 0 0 0 7px var(--fig-paper), 0 2px 8px rgba(0,0,0,.4)}
.emtp-fig__dot.is-active{box-shadow:0 0 0 1.5px var(--fig-paper), 0 0 0 4px var(--fig-navy)}
.emtp-fig__leader.is-active .emtp-fig__halo{stroke-width:6px}
.emtp-fig__leader.is-active .emtp-fig__line{stroke-width:2.6px}

/* Enlarge (shown by figures.js; a secondary button: steel in light, outlined in dark, never a white ground). */
.emtp-fig__tools{display:flex; justify-content:flex-end; margin-top:8px}
.emtp-fig__tools[hidden]{display:none}
.emtp-fig__zoom, .emtp-figview__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; min-width:44px; padding:0 16px;
  border:1px solid rgba(255,255,255,.18); border-radius:8px; background:var(--gradient-steel, var(--grad-primary));
  color:var(--fig-paper); box-shadow:var(--shadow-btn, none); cursor:pointer;
  font-family:var(--font-body, var(--font, system-ui)); font-size:.92rem; font-weight:500; line-height:1; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.emtp-fig__zoom:hover, .emtp-figview__btn:hover{background:var(--gradient-steel-dark, var(--grad-primary))}
.emtp-fig__zoom svg, .emtp-figview__btn svg{flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
[data-theme="dark"] .emtp-fig__zoom, [data-theme="dark"] .emtp-figview__btn{background:transparent; border-color:var(--field-border, var(--field)); color:var(--text); box-shadow:none}
[data-theme="dark"] .emtp-fig__zoom:hover, [data-theme="dark"] .emtp-figview__btn:hover{background:var(--accent-fill, var(--grad-primary)); border-color:transparent; color:var(--fig-paper)}
/* Phone and tablet (phone.css has no steel gradient): a utility button in the touch kit's outline style (.m-btn--outline),
   so it never looks like the page's primary action. */
:is(.m-app, .t-app) :is(.emtp-fig__zoom, .emtp-figview__btn), :is(.m-app, .t-app) :is(.emtp-fig__zoom, .emtp-figview__btn):hover{
  background:var(--surface); color:var(--accent); border:1.5px solid var(--border); box-shadow:none}

/* Key: a real ordered list; each name carries its number chip, styled like the disc it matches. */
.emtp-fig__key{list-style:none; margin:14px 0 0; padding:0; columns:3 15rem; column-gap:24px}
.emtp-fig__key li{
  display:flex; align-items:flex-start; gap:10px; min-height:44px; margin:0; padding:9px 10px; border-radius:8px;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  color:var(--text); font-size:.95rem; line-height:1.4; transition:background-color .15s ease;
}
.emtp-fig__chip{
  flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-top:-1px;
  border-radius:50%; background:var(--fig-navy); color:var(--fig-paper);
  font-size:.75rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
}
[data-theme="dark"] .emtp-fig__chip{box-shadow:0 0 0 1.5px var(--fig-paper)}
.emtp-fig__name{min-width:0; padding-top:1px}
.emtp-fig__key li.is-active{background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-strong, var(--border))}
.emtp-fig__key li.is-active .emtp-fig__chip{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--focus)}
.emtp-fig__key li:focus{outline:none}
.emtp-fig__key li:focus-visible{outline:3px solid var(--focus); outline-offset:1px}
.emtp-fig__key--sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Card figures (2.23.0): the book's text cards where a labeled figure has its key, a caption under the picture and an
   optional lead line. Plain list items with a hairline rule, not boxes: the figure is already one surface. */
.emtp-fig__piccap{margin:10px 2px 0; font-size:.9rem; line-height:1.5; color:var(--muted)}
.emtp-fig__info{margin-top:14px}
.emtp-fig__lead{margin:0 0 10px; font-size:1rem; line-height:1.5; font-weight:500; color:var(--heading, var(--text))}
.emtp-fig__cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap:4px 24px}
.emtp-fig__card{margin:0; padding:9px 0 9px 12px; border-left:2px solid var(--border-strong, var(--border)); font-size:.95rem; line-height:1.5; color:var(--text)}
.emtp-fig__card-h{font-weight:600; color:var(--heading, var(--text))}

/* Caption: title, the teaching note, the credit. */
.emtp-fig__cap{margin-top:14px; padding-top:12px; border-top:1px solid var(--border)}
.emtp-fig__title{margin:0 0 4px; font-size:1.05rem; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--heading, var(--text))}
.emtp-fig__note{margin:0 0 6px; font-size:.95rem; line-height:1.55; color:var(--text)}
.emtp-fig__credit{margin:0; font-size:.8rem; line-height:1.4; color:var(--muted)}

/* Upright and square pictures: the key beside the picture once the figure is wide enough. */
@container emtpfig (min-width:720px){
  .emtp-fig--tall .emtp-fig__body{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(220px, 1fr); gap:24px; align-items:start}
  .emtp-fig--tall .emtp-fig__key{margin-top:0; columns:1}
  .emtp-fig--tall .emtp-fig__info{margin-top:0}
  .emtp-fig--tall .emtp-fig__cards{grid-template-columns:1fr}
  .emtp-fig--tall.emtp-fig--longkey .emtp-fig__key{columns:2 11rem; column-gap:12px}
}
@supports not (container-type:inline-size){
  @media (min-width:900px){
    .emtp-fig--tall .emtp-fig__body{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(220px, 1fr); gap:24px; align-items:start}
    .emtp-fig--tall .emtp-fig__key{margin-top:0; columns:1}
    .emtp-fig--tall .emtp-fig__info{margin-top:0}
    .emtp-fig--tall .emtp-fig__cards{grid-template-columns:1fr}
  }
}

/* ---------- Viewer (a <dialog> built by figures.js) ---------- */
html.emtp-figview-open{overflow:hidden}
.emtp-figview{
  --fig-disc:24px;
  width:min(1400px, calc(100vw - 32px)); height:calc(100vh - 32px); height:calc(100dvh - 32px);
  max-width:none; max-height:none; margin:auto; padding:0; overflow:hidden;
  border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.emtp-figview[open]{display:flex; flex-direction:column}
.emtp-figview::backdrop{background:rgba(6,12,20,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.emtp-figview__bar{flex:none; display:flex; align-items:center; gap:8px; padding:8px 8px 8px 16px; border-bottom:1px solid var(--border)}
.emtp-figview__title{flex:1; min-width:0; margin:0; font-size:1rem; font-weight:600; line-height:1.3; color:var(--heading, var(--text));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.emtp-figview__btn[hidden]{display:none}
.emtp-figview__close{padding:0}
.emtp-figview__scroll{flex:1; min-height:0; display:flex; overflow:auto; padding:16px; background:var(--surface-2); overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.emtp-figview__stage{
  /* auto margins centre it in the scroll box while it fits, and fall to 0 when it overflows (Actual Size), so all
     of it can still be scrolled to */
  flex:none; position:relative; margin:auto; line-height:0; background:var(--fig-paper); container-type:inline-size;
  width:min(100%, var(--fig-w, 100%), calc(var(--fig-availh, 70vh) * var(--fig-ar, 1)));
}
.emtp-figview.is-actual .emtp-figview__stage{width:var(--fig-w, 100%); max-width:none}
.emtp-figview__stage img{display:block; width:100%; height:auto}
.emtp-figview__stage picture{display:block}
.emtp-figview__stage .emtp-fig__img, .emtp-figview__img{cursor:zoom-in; border-radius:0}
.emtp-figview.is-actual .emtp-figview__stage .emtp-fig__img, .emtp-figview.is-actual .emtp-figview__img{cursor:zoom-out}
.emtp-figview__scroll:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
.emtp-figview__btn:focus-visible, .emtp-fig__zoom:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
@media (max-width:640px){
  .emtp-figview{width:100vw; height:100vh; height:100dvh; border:0; border-radius:0}
  .emtp-figview__scroll{padding:10px}
  .emtp-figview__btn span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
}
@media (prefers-reduced-motion:no-preference){
  .emtp-figview[open]{animation:emtpFigIn .16s ease-out}
  @keyframes emtpFigIn{from{opacity:0}to{opacity:1}}
}

/* ---------- Visual Guides page (visual-guides.php, views/_shared/visual-guides-body.php) ---------- */
.vg{max-width:1100px; margin:0 auto}
.vg-head{margin:0 0 8px}
.vg-head h1{margin:6px 0 10px}
.vg-lead{max-width:68ch; margin:0}
.vg-jump{margin:20px 0 0}
.vg-jump ul{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.vg-jump li{margin:0}
.vg-jump a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 8px 0 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); text-decoration:none;
  font-size:.9rem; font-weight:500; transition:border-color .15s ease, background-color .15s ease;
}
.vg-jump a:hover{border-color:var(--navy-light); color:var(--text)}
.vg-jump a:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.vg-jump a span{display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:999px;
  background:var(--surface-2); color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums}
.vg-group{margin-top:40px; padding-top:28px; border-top:1px solid var(--border); scroll-margin-top:12px}
/* Desktop has no scroll-padding for its 75px sticky header: a topic or figure link would land under it. */
.vg--desktop .vg-group, .vg--desktop .emtp-fig{scroll-margin-top:90px}
.vg-group__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin:0 0 20px}
.vg-group__head > div{flex:1 1 320px; min-width:0}
.vg-group__title{margin:0 0 6px; font-size:1.5rem; line-height:1.2; color:var(--heading, var(--text))}
.vg-group__intro{margin:0; max-width:64ch; color:var(--muted)}
.vg-group__head .m-btn{width:auto; padding:0 22px}
.vg-related{margin:0 0 8px; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2)}
.vg-related p{margin:0 0 6px; font-weight:600; color:var(--text)}
.vg-related ul{margin:0; padding-left:20px}
.vg-related li{margin:0}
.vg-related li a{display:inline-flex; align-items:center; min-height:44px}
/* Dark: on --surface-2 the in-text link blue would be under 4.5:1 (as for style.css's and phone.css's other tinted
   boxes), so these links are the brighter link color (weight 600, never underlined). */
[data-theme="dark"] .vg-related{--link-text:var(--link, var(--sky-2))}
.vg-empty{text-align:center; padding:32px 24px}
.vg-empty p{margin:0}
.vg-disclaimer{margin:40px 0 0; font-size:.85rem; color:var(--muted)}
.vg--phone .vg-group{margin-top:28px; padding-top:22px}
.vg--phone .vg-group__title{font-size:1.25rem}
.vg--phone .vg-group__head .m-btn{width:100%}
.vg--phone .emtp-fig{margin-bottom:28px}

/* ---------- Marketing showcase (views/_shared/figures-showcase.php) ---------- */
.figshow{max-width:1100px; margin:0 auto}
.figshow-pair{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:8px 32px}
.figshow-cta{text-align:center; margin:4px 0 0}
.figshow .emtp-fig{margin-bottom:28px}

/* ---------- Print, forced colors, reduced motion ---------- */
@media print{
  .emtp-fig__tools{display:none!important}
  .emtp-fig{break-inside:avoid; page-break-inside:avoid}
  .emtp-fig.has-active .emtp-fig__disc, .emtp-fig.has-active .emtp-fig__dot, .emtp-fig.has-active .emtp-fig__leader{opacity:1}
}
@media (forced-colors:active){
  .emtp-fig__disc, .emtp-fig__chip, .emtp-fig__dot, .emtp-fig__panel{forced-color-adjust:none}
}
@media (prefers-reduced-motion:reduce){
  .emtp-fig__leader, .emtp-fig__dot, .emtp-fig__disc, .emtp-fig__key li, .emtp-fig__zoom, .emtp-figview__btn, .vg-jump a{transition:none}
}