/* Subject vignettes: step-box labels ~11–14 SVG user units; header/caption/flow/order lines half of prior 22 (now 11) */
.pb-sa{--sa:#0F766E;--sa2:#5eead4;--sa-acc:#f5a524;margin:0 0 22px;max-width:760px;width:100%}
.pb-sa[data-tone=crimson]{--sa:#9F1239;--sa2:#FDA4AF;--sa-acc:#f5a524}
.pb-sa[data-tone=blue]{--sa:#1E40AF;--sa2:#93C5FD;--sa-acc:#f5a524}
.pb-sa[data-tone=gold]{--sa:#A16207;--sa2:#FDE68A;--sa-acc:#f5a524}
.pb-sa[data-tone=teal]{--sa:#0F766E;--sa2:#5eead4;--sa-acc:#f5a524}
.pb-sa-frame{
  border:1px solid var(--line);border-radius:14px;background:var(--bg2);
  box-shadow:0 12px 36px rgba(0,0,0,.2);overflow:hidden;contain:layout paint style;
  position:relative;min-height:0;width:100%;
  container-type:inline-size;container-name:pb-sa;
}
.pb-sa-frame.is-on{box-shadow:0 12px 36px rgba(0,0,0,.2),0 0 0 1px color-mix(in oklab,var(--sa) 40%,transparent),0 0 24px color-mix(in oklab,var(--sa) 22%,transparent)}
.pb-sa-label{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:8px 14px 0;font:700 clamp(11px,.12rem + 1.6cqw,14px) var(--m);color:var(--mu)}
.pb-sa-label b{color:var(--sa2);letter-spacing:.04em;text-transform:uppercase;font-size:clamp(12px,.14rem + 1.8cqw,15px)}
.pb-sa-tip{
  position:absolute;left:12px;right:12px;bottom:10px;z-index:2;
  padding:8px 10px;border-radius:10px;border:1px solid var(--line);
  background:color-mix(in oklab,var(--bg) 88%,var(--sa));color:var(--tx);
  font:700 clamp(11px,.12rem + 1.7cqw,14px) var(--m);line-height:1.3;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.pb-sa-tip.is-on{opacity:1;transform:none}
.pb-sa svg{display:block;width:100%;height:auto;padding:0 0 4px}
.pb-sa .sa-muted{
  fill:var(--mu);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;
}
.pb-sa .sa-tx,
.pb-sa .sa-tx-lg,
.pb-sa .sa-tx-sm{
  fill:var(--tx);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;
}
.pb-sa .sa-line{fill:none;stroke:var(--sa);stroke-width:2;stroke-linecap:round;opacity:.35}
.pb-sa .sa-line.is-on{opacity:1;filter:drop-shadow(0 0 6px color-mix(in oklab,var(--sa) 55%,transparent))}
.pb-sa .sa-node{fill:color-mix(in oklab,var(--bg2) 80%,var(--sa));stroke:var(--sa);stroke-width:1.4;opacity:.4}
.pb-sa .sa-node.is-on,.pb-sa .sa-node:focus-visible,.pb-sa .sa-hit.is-on .sa-node{opacity:1}
.pb-sa .sa-pill{fill:rgba(255,255,255,.04);stroke:var(--line);stroke-width:1}
.pb-sa .sa-pill.is-on,.pb-sa .sa-hit.is-on .sa-pill{stroke:var(--sa);fill:color-mix(in oklab,var(--sa) 18%,transparent)}
.pb-sa .sa-bar{fill:rgba(255,255,255,.06)}
.pb-sa .sa-fill{fill:url(#saGrad);transform-origin:left center;transform:scaleX(0)}
.pb-sa.is-ready .sa-fill, .pb-sa .sa-fill.is-on{transform:scaleX(1)}
.pb-sa .sa-dot{fill:var(--sa-acc);opacity:0}
.pb-sa .sa-dot.is-on{opacity:1;filter:drop-shadow(0 0 6px rgba(245,165,36,.55))}
.pb-sa .sa-hit{cursor:pointer;outline:none}
.pb-sa .sa-hit:focus-visible .sa-pill,
.pb-sa .sa-hit:focus-visible .sa-node{stroke:var(--sa-acc);stroke-width:2}
.pb-sa .sa-hit[tabindex]{touch-action:manipulation}
.pb-sa .sa-drag{cursor:grab;touch-action:none}
.pb-sa .sa-drag.is-dragging{cursor:grabbing;opacity:.95}
.pb-sa .sa-slot{stroke-dasharray:4 3}
.pb-sa .sa-slot.is-hot{stroke:var(--sa-acc);fill:color-mix(in oklab,var(--sa-acc) 14%,transparent)}
.pb-sa .sa-slot.is-filled{stroke:var(--sa);stroke-dasharray:none;fill:color-mix(in oklab,var(--sa) 18%,transparent)}
.pb-sa-mid{margin:28px 0}
[data-theme=light] .pb-sa .sa-pill{fill:rgba(0,0,0,.03)}
[data-theme=light] .pb-sa-frame{box-shadow:0 10px 28px rgba(15,23,42,.08)}
[data-theme=light] .pb-sa-tip{background:color-mix(in oklab,#fff 92%,var(--sa))}
@media (max-width:420px){
  .pb-sa{margin:0 0 16px}
}
@media (prefers-reduced-motion:reduce){
  .pb-sa .sa-line,.pb-sa .sa-node,.pb-sa .sa-pill,.pb-sa .sa-dot{opacity:1}
  .pb-sa .sa-fill{transform:scaleX(1)}
  .pb-sa-tip{transition:none}
}

/* Instructor Edition dashboard tiles — real links, touch-friendly */
.pb-sa .sa-instr-tiles{display:block;padding:4px 14px 14px;position:relative;z-index:3;pointer-events:auto}
.pb-sa .sa-instr-kicker{
  margin:0 0 10px;font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--mu);letter-spacing:.02em
}
.pb-sa .sa-instr-grid{
  display:grid;grid-template-columns:1.7fr 1fr .9fr;grid-template-rows:auto auto;gap:10px;
  min-height:96px
}
.pb-sa .sa-instr-tile{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:12px 10px;border-radius:12px;text-decoration:none!important;
  font:700 clamp(13px,.2rem + 1.8cqw,22px)/1.15 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--tx)!important;background:color-mix(in oklab,var(--sa) 14%,var(--bg3));
  border:1px solid color-mix(in oklab,var(--sa) 45%,var(--line));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--sa2) 12%,transparent);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  cursor:pointer;user-select:none;pointer-events:auto;position:relative;z-index:4;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease
}
.pb-sa .sa-instr-tile:hover,.pb-sa .sa-instr-tile:focus-visible{
  background:color-mix(in oklab,var(--sa) 26%,var(--bg3));
  border-color:var(--sa);color:var(--tx)!important;
  outline:2px solid var(--sa-acc);outline-offset:2px
}
.pb-sa .sa-instr-tile:active{transform:scale(.98)}
.pb-sa .sa-instr-tile-deck{grid-column:1;grid-row:1 / span 2;min-height:96px;font-size:clamp(18px,.35rem + 2.4cqw,27px)}
.pb-sa .sa-instr-tile-notes{grid-column:2;grid-row:1;font-size:clamp(12px,.15rem + 1.5cqw,14px)}
.pb-sa .sa-instr-tile-quiz{grid-column:2;grid-row:2;font-size:clamp(12px,.15rem + 1.5cqw,14px)}
.pb-sa .sa-instr-tile-roster{grid-column:3;grid-row:1 / span 2;min-height:96px;font-size:clamp(16px,.3rem + 2cqw,24px)}
@media (max-width:520px){
  .pb-sa .sa-instr-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .pb-sa .sa-instr-tile-deck{grid-column:1 / span 2;grid-row:1;min-height:56px}
  .pb-sa .sa-instr-tile-notes{grid-column:1;grid-row:2}
  .pb-sa .sa-instr-tile-quiz{grid-column:2;grid-row:2}
  .pb-sa .sa-instr-tile-roster{grid-column:1 / span 2;grid-row:3;min-height:52px}
}

.pb-sa[data-topic=instructor] .pb-sa-tip{display:none!important;pointer-events:none!important}
.pb-sa[data-topic=instructor] .pb-sa-frame{overflow:visible}
.pb-sa[data-topic=instructor] svg{pointer-events:none}