/* Desmos "live typing" component v2 (pairs with shared/desmos-typing.js). 2026-10-29.
   Desmos look: expression list (.dz) with header bar, numbered rows with color icons,
   graph card (.dzg) with Desmos grid + controls, + menu, add-slider bar, slider rows. */

/* typed rows and action markers are reveal fragments but always stay laid out */
.reveal .slides .dz-type.fragment { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.dz-act { display: none; }

/* ---- expression list ---------------------------------------------------- */
.dz { position: relative; background: #fff; border-radius: 12px; overflow: visible; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.dz > .dz-head { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 12px; background: #f6f7f8; border-bottom: 1px solid #e3e6e9; border-radius: 12px 12px 0 0; color: #6f7780; }
.dz-head svg { width: 22px; height: 22px; display: block; }
.dz-head .dz-plus { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.dz-head .sp { flex: 1; }
.dz-head .mute { opacity: 0.45; }
.dz .r { display: flex; align-items: stretch; border-bottom: 1px solid #e5e8ec; min-height: 58px; background: #fff; position: relative; }
.dz .r .dz-x { position: absolute; top: 6px; right: 10px; width: 16px; height: 16px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23c4c9ce' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dz .r.dz-later .dz-x, .dz .r.dz-next .dz-x { display: none; }
.dz .r:last-child { border-radius: 0 0 12px 12px; }
.dz .n { width: 40px; flex: 0 0 auto; background: #f3f4f6; color: #9aa3ab; font-size: 12px; display: flex; flex-direction: column; align-items: center; padding-top: 5px; gap: 6px; border-right: 1px solid #e5e8ec; }
.dz .b { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 9px 14px; min-width: 0; }
.dz .bl { display: flex; align-items: center; gap: 12px; }
.dz .e { font-size: 25px; color: #111; white-space: nowrap; position: relative; display: inline-block; }
.dz .o { align-self: flex-end; margin-right: 4px; font-size: 24px; color: #333; white-space: nowrap; display: none;  align-items: center; gap: 5px; font-family: 'Times New Roman', serif; }
.dz .o .eq { color: #777; margin-right: 3px; }
.dz .o .v { background: #f1f3f5; border: 1px solid #d5d9dd; border-radius: 5px; padding: 1px 8px; }
.dz .o.dz-on { display: flex; }
.dz .o.dz-long { align-self: stretch; margin-left: 0; }
.dz .o .vs { display: flex; gap: 5px; overflow: hidden; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.dz .o .more { font: 500 0.78em Inter, 'Helvetica Neue', sans-serif; color: #2f72dc; text-decoration: underline; margin-left: 10px; flex: 0 0 auto; }

/* reserve the final size: the final KaTeX holds the layout, the live render sits on top */
.dz-type .dz-final { visibility: hidden; }
.dz-type .dz-live { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; }
.dz-type td { position: relative; }
.dz-type td .dz-final { visibility: hidden; }
.dz-type td .dz-live { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* row icon (in the number column, like Desmos): color circle with a curve glyph */
.dz .d { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; position: relative; }
.dz .d.dz-ic-graph::after { content: ''; position: absolute; inset: 6px 4px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 10C5 10 6 2 10 2s5 8 9 8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dz .d.dz-ic-pts::after { content: ''; position: absolute; inset: 7px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='3' cy='3' r='2' fill='white'/%3E%3Ccircle cx='9' cy='5' r='2' fill='white'/%3E%3Ccircle cx='5' cy='9.5' r='2' fill='white'/%3E%3C/svg%3E"); }
.dz .d.dz-ic-err { border-radius: 0; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1.5L23 20.5H1z' fill='%23e8642c' stroke='%23e8642c' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 8v6M12 17v1' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important; }
.dz .d.dz-ic-table { border-radius: 0; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='6' cy='13' r='2' fill='%23a0a7ae'/%3E%3Ccircle cx='10.5' cy='9' r='2' fill='%23a0a7ae'/%3E%3Ccircle cx='15' cy='4.5' r='2' fill='%23a0a7ae'/%3E%3Cpath d='M3 17L17 3' stroke='%23a0a7ae' stroke-width='1.4' stroke-dasharray='2 2'/%3E%3C/svg%3E"); }
.dz .d.dz-ic-frac { width: 32px; height: 32px; border: 2px solid #8a9198; background: #fff no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Crect x='2' y='1' width='8' height='6' rx='1.5' fill='none' stroke='%238a9198' stroke-width='1.6'/%3E%3Cpath d='M1 9h10' stroke='%238a9198' stroke-width='1.6'/%3E%3Crect x='2' y='11' width='8' height='6' rx='1.5' fill='none' stroke='%238a9198' stroke-width='1.6'/%3E%3C/svg%3E"); }

/* active (typing) row: Desmos focus bar */
.dz-type.dz-typing { box-shadow: inset 4px 0 0 #2f72dc; background: #f5f9ff; }
.dz-type.dz-typing .n { background: #2f72dc; color: #fff; }
/* not-yet-typed rows: the first is Desmos's empty "next" row, later ones are blank space */
.dz-type.dz-later { border-bottom-color: transparent; }
.dz-type.dz-later > * { visibility: hidden; }
.dz-type.dz-absent { display: none; }

/* cursor, empty-slot boxes, auto-inserted (gray) closing brackets */
.dz-cur { display: inline-block; border-left: 2px solid #111; margin: 0 1px; animation: dzBlink 1s steps(1) infinite; }
@keyframes dzBlink { 50% { border-color: transparent; } }
.dz-ph { color: #b9c0c7; }
.dz-ghost { color: #b9c0c7; }

/* regression output block, laid out like Desmos (REGRESSION PARAMETERS / STATISTICS / RESIDUALS) */
.dz-stats { display: grid; grid-template-columns: minmax(160px, max-content) max-content; column-gap: 48px; justify-content: start; row-gap: 0; font-size: 24px; line-height: 1.2; color: #222; font-family: 'Times New Roman', serif; margin-top: 4px; }
.dz-stats:empty { display: none; }
.dz-stats .h { font: 500 14px Inter, 'Helvetica Neue', sans-serif; letter-spacing: 0.02em; color: #5f6870; text-transform: uppercase; margin-top: 4px; }
.dz-stats .h.full { grid-column: 1 / span 2; }
.dz-stats i { font-style: italic; }
.dz-stats .lm { font: 500 17px Inter, 'Helvetica Neue', sans-serif; color: #333; display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.dz-stats .lm .cb { width: 17px; height: 17px; border-radius: 3px; background: no-repeat center/12px #2f72dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.6L10 3.4' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
.dz-stats .plot { font: 500 15px Inter, sans-serif; border: 1px solid #c9ced3; border-radius: 5px; padding: 1px 9px; background: #f6f7f8; margin-left: 8px; }

/* tables */
.dzt { border-collapse: collapse; font-size: 26px; color: #111; margin: 4px 0; }
.dzt th, .dzt td { border: 0; border-bottom: 1px solid #d5d9dd; border-right: 1px solid #d5d9dd; padding: 2px 26px; text-align: center; min-width: 84px; height: 34px; }
/* like the real table: no header fill, a dark rule under the header, a dark divider after
   the first column, and an empty trailing column ready for the next entry */
.dzt th { background: none; font-weight: 400; border-bottom: 2px solid #222; }
.dzt tr > :first-child { border-right: 2px solid #222; }
.dzt .dz-pad { min-width: 56px; padding: 0; border-right: 0; }

/* add-slider bar (Desmos offers it under a row that uses an undefined letter) */
.dz-addsl { display: none; align-items: center; gap: 10px; font: 600 17px Inter, sans-serif; color: #555; margin-top: 6px; }
.dz-addsl.dz-on { display: flex; }
.dz-addsl-btn { border-radius: 6px; padding: 1px 14px; font-style: italic; font-family: 'Times New Roman', serif; font-size: 22px; color: #fff; background: #2f72dc; }

/* popups toggled by taps: + menu, settings, slider rows */
.dz-pop { display: none; }
.dz-pop.dz-on { display: flex; }
.dz-menu { position: absolute; left: 8px; top: 38px; z-index: 5; flex-direction: column; background: #fff; border: 1px solid #cfd4d9; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.28); padding: 4px 0; min-width: 170px; }
.dz-menu div { padding: 8px 16px; font: 500 18px Inter, sans-serif; color: #333; display: flex; align-items: center; gap: 10px; }

/* key-cap cue, like a screencast keystroke overlay */
.dz-key { position: absolute; transform: translate(-50%, -100%); opacity: 0; pointer-events: none; z-index: 6;
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 8px; background: #fdfdfd; color: #222; border: 1px solid #c9ced3;
  box-shadow: 0 3px 0 #b8bec5, 0 6px 14px rgba(0,0,0,0.3); font: 700 21px/34px Menlo, Consolas, monospace; text-align: center; white-space: nowrap; }
.dz-key.dz-on { animation: dzKey .75s ease-out forwards; }
@keyframes dzKey { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* tap ripple */
.dz-ripple { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; z-index: 8;
  background: rgba(47,114,220,0.35); border: 2px solid rgba(47,114,220,0.9); animation: dzRipple .85s ease-out forwards; }
@keyframes dzRipple { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(3.6); opacity: 0; } }

/* ---- graph card ------------------------------------------------------------ */
.dzg { position: relative; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 10px 26px rgba(0,0,0,0.38); }
.dzg-svg { display: block; width: 100%; height: auto; border-radius: 6px; overflow: hidden; font-family: 'Helvetica Neue', Arial, sans-serif; }
.dzg-grid .mn { stroke: #efefef; stroke-width: 1; }
.dzg-grid .mj { stroke: #cfcfcf; stroke-width: 1.3; }
.dzg-axes line { stroke: #1d1d1d; stroke-width: 2; }
.dzg-labels text { font-size: 19px; fill: #1f1f1f; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.dzg-curve { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dzg-fill { opacity: 0.22; }
.dzg-poi { fill: #8c8c8c; }
.dzg-poi-sel { fill: #333; }
.dzg-poi-box { fill: #fff; stroke: #c7ccd1; stroke-width: 1.5; }
.dzg-poi-text { font-size: 27px; fill: #222; font-weight: 500; }
.dzg-anno-line { stroke-width: 3; stroke-dasharray: 10 8; }
.dzg-anno-seg { stroke-width: 3.5; }
.dzg-anno-text { font-size: 25px; font-weight: 800; }
.dzg-anno-box { fill: #fff8e3; stroke-width: 2; }
/* Desmos graph controls (top right): wrench, then a joined zoom in / zoom out pair */
.dz-ctl { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.dz-ctl > div { width: 36px; background: #f4f5f6; border: 1px solid #d0d4d8; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.12); display: flex; flex-direction: column; }
.dz-ctl > div > div { height: 34px; display: flex; align-items: center; justify-content: center; color: #555; }
.dz-ctl > div > div + div { border-top: 1px solid #d0d4d8; }
.dz-ctl svg { width: 18px; height: 18px; }
.dz-settings { position: absolute; top: 12px; right: 62px; z-index: 4; flex-direction: column; width: 270px; background: #fff; border: 1px solid #cfd4d9; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.28); padding: 10px 12px; font: 400 14px 'Helvetica Neue', Arial, sans-serif; color: #222; }
.dz-settings .fs { display: flex; border: 1px solid #b9c0c7; border-radius: 4px; overflow: hidden; }
.dz-settings .fs div { flex: 1; text-align: center; padding: 3px 0; }
.dz-settings .fs .on { background: #5c5c5c; color: #fff; }
.dz-settings .ck { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.dz-settings .ck i { width: 14px; height: 14px; border: 1px solid #9aa1a8; border-radius: 3px; display: inline-block; position: relative; }
.dz-settings .ck i.on::after { content: ''; position: absolute; left: 3px; top: -2px; width: 5px; height: 10px; border: solid #2f72dc; border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.dz-settings hr { border: 0; border-top: 1px solid #e3e6e9; margin: 4px 0; }
.dz-settings .rng { font-family: 'Times New Roman', serif; font-size: 14px; margin: 0 0 3px 21px; color: #333; }
.dz-seg { display: flex; border: 1px solid #b9c0c7; border-radius: 4px; overflow: hidden; font-size: 15px; margin-top: 4px; }
.dz-seg div { flex: 1; text-align: center; padding: 6px 0; }
.dz-seg .on { background: #5c5c5c; color: #fff; }

/* the whole College Board calculator window (orientation view) */
.dz-calc { border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.45); background: #fff; }
.dz-calc .banner { background: #127c3f; color: #fff; font: 400 16px 'Helvetica Neue', Arial, sans-serif; display: flex; align-items: center; gap: 16px; padding: 8px 14px; }
.dz-calc .banner b { font: 600 22px 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.02em; }
.dz-calc .banner span { border-left: 1px solid rgba(255,255,255,0.5); padding-left: 16px; }
.dz-calc .body { display: flex; align-items: stretch; }
.dz-calc .body > div > .dz { border-radius: 0; box-shadow: none; border: 0; border-right: 1px solid #d0d4d8; height: 100%; box-sizing: border-box; }
.dz-calc .body > div > .dz .r:last-child { border-radius: 0; }
.dz-calc .body > div > .dz > .dz-head { border-radius: 0; }
.dz-calc .dzg { border-radius: 0; box-shadow: none; padding: 0; }
.dz-calc .dzg-svg { border-radius: 0; }

/* slider rows */
.dz-slider.dz-pop.dz-on { display: flex; }
.dz-knob { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: left .22s linear; }

.dz-settings .seg-deg { display: none; }
.dz-settings .seg-deg.dz-pop.dz-on { display: flex; }
.dz-settings .seg-deg.dz-on { display: flex; }
.dz-settings:has(.seg-deg.dz-on) .seg-rad { display: none; }
.dz .r.dz-pop:not(.dz-on) { display: none; }
.dz-stats sup { vertical-align: super; font-size: 0.68em; }
.dz-stats sub { vertical-align: sub; font-size: 0.68em; }
/* rows that will print an output reserve its line, so nothing jumps while typing */
.dz .o.dz-hasout { display: flex; visibility: hidden; min-height: 32px; }
.dz .o.dz-hasout.dz-on { visibility: visible; }
/* teaching magnifier (ours, gold-framed): enlarges a small Desmos control */
.dz-mag { position: absolute; left: 22px; bottom: 22px; z-index: 5; flex-direction: column; gap: 8px; color: #222; background: #fff; border: 3px solid #e7c24a; border-radius: 12px; padding: 12px 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.dz-mag .t { font: 700 15px Inter, sans-serif; color: #a8740a; }
.dz-mag .dz-seg { font-size: 24px; min-width: 250px; }
.dz-mag .dz-seg div { padding: 8px 0; }
/* the output that just changed after a tap gets a brief gold ring */
.dz .o.dz-alt .v { box-shadow: 0 0 0 3px #e7c24a; }
/* slider row details (real CB Desmos): play + loop icons, range editor, constant mode */
.dz-slider .dz-sbar { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.dz-slider .dz-smin, .dz-slider .dz-smax { color: #6f7780; font-size: 15px; min-width: 18px; text-align: center; }
.dz-slider .dz-track { flex: 1; height: 4px; background: #d7dbdf; border-radius: 3px; position: relative; }
.dz-slider .dz-sed { display: none; margin-top: 6px; align-items: center; gap: 8px; font: 15px 'Helvetica Neue', Arial, sans-serif; color: #444; }
.dz-slider .dz-sed i { font-family: 'Times New Roman', serif; font-size: 19px; }
.dz-slider .fld { display: inline-block; min-width: 44px; border-bottom: 1.5px solid #9aa1a8; text-align: center; font-family: 'Times New Roman', serif; font-size: 18px; padding: 0 4px; }
.dz-slider .fld.sel { background: #b5d3ff; }
.dz-slider .dz-sic { width: 24px; height: 24px; display: block; background: no-repeat center/contain; }
.dz-slider .dz-play { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%23707880' stroke-width='1.8'/%3E%3Cpath d='M9.5 7.5l7 4.5-7 4.5z' fill='%23707880'/%3E%3C/svg%3E"); }
.dz-slider .dz-loop { width: 20px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M3 5h12l-3-3M17 11H5l3 3' fill='none' stroke='%23a0a7ae' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.dz-slider .dz-cic { display: none; }
.dz-slider .dz-sout { display: none; }
.dz-slider .dz-sout.dz-on { display: flex; opacity: 1; }
.dz-slider.m-edit .dz-sbar { display: none; }
.dz-slider.m-edit .dz-sed { display: flex; }
.dz-slider.m-edit { box-shadow: inset 4px 0 0 #2f72dc; background: #f5f9ff; }
.dz-slider.m-const .dz-sbar, .dz-slider.m-none .dz-sbar { display: none; }
.dz-slider.m-const .dz-sic, .dz-slider.m-none .dz-sic { display: none; }
.dz-slider.m-const .dz-cic { display: block; }
/* teaching hint beside a tap target (ours, gold) */
.dz-hint { position: absolute; transform: translate(-100%, -150%); z-index: 9; white-space: nowrap; pointer-events: none;
  background: #fff8e3; border: 2px solid #e7c24a; color: #8a5f00; font: 700 16px Inter, sans-serif; padding: 4px 10px; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); animation: dzHint 1.9s ease forwards; }
@keyframes dzHint { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
/* belt and braces: never an output box on a slider / editing row */
.dz-slider.m-slider .dz-sout, .dz-slider.m-edit .dz-sout, .dz-slider.m-none .dz-sout { display: none !important; }
/* layout stability: nothing on the slide moves when Desmos state changes */
.dz-stats.dz-hold { visibility: hidden; }
.dz-type.dz-absent { display: none !important; }
.dz .r.dz-slider { min-height: 88px; box-sizing: border-box; }
.dz .o.dz-tallout { min-height: 58px; }
/* layout stability lives at the panel level: desmos-typing.js sets each panel's
   min-height to its tallest state, so rows sit flush like real Desmos */