/* Interactive › Vision (perception_controls.js). One column: the switch and what Tony sees, then the
   comment style, options and activity, each disclosed on demand. Reuses dance_studio.css's controls. */
.pv{width:100%;max-width:760px;display:grid;gap:14px;align-content:start}
.pv[hidden]{display:none!important}
.pv-card{background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:18px 22px;min-width:0}
.pv-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pv-head h2{font-size:17px;font-weight:650;letter-spacing:-.3px}
.pv-status{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:13px;color:var(--label-2);font-variant-numeric:tabular-nums}
.pv-status strong{font-weight:500}
.pv-status>span{flex:none;width:8px;height:8px;border-radius:50%;background:var(--label-4)}
.pv-status[data-tone=live]>span{background:var(--green-fill);animation:pv-pulse 1.8s ease-in-out infinite}
.pv-status[data-tone=busy]>span{background:var(--accent)}
.pv-status[data-tone=warn]{color:var(--orange)}.pv-status[data-tone=warn]>span{background:#ff9f0a}
@keyframes pv-pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,164,93,.35)}50%{box-shadow:0 0 0 5px rgba(47,164,93,0)}}
@media (prefers-reduced-motion:reduce){.pv-status[data-tone=live]>span{animation:none}}
.pv-intro{margin-top:12px;font-size:13px;line-height:1.5;color:var(--label-3)}
.pv-callout{margin-top:12px}
.pv-switch{margin-top:0;flex:none}
.pv-switch-main input{width:42px;height:25px;border-radius:13px}
.pv-switch-main input::before{width:21px;height:21px}
.pv-switch-main input:checked::before{transform:translateX(17px)}
.pv-switch input:disabled{opacity:.45;cursor:default}
.pv-rows{display:grid;margin-top:14px;border-top:1px solid var(--separator)}
.pv-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--separator)}
.pv-row-text{min-width:0}
.pv-row-text label{font-size:13px;font-weight:600;color:var(--label)}
.pv-row-text p{font-size:12px;line-height:1.45;color:var(--label-3);margin-top:2px}
.pv-row-controls{display:flex;align-items:center;gap:10px;flex:none}
.pv-quiet{height:26px;padding:0 11px;border:0;border-radius:13px;background:var(--fill-2);color:var(--label-2);font-size:12px;font-weight:600}
.pv-quiet:hover:not(:disabled){color:var(--label)}
.pv-quiet[aria-pressed=true]{background:var(--orange-wash);color:var(--orange)}
.pv-quiet[hidden]{display:none}
.pv-quiet:disabled{opacity:.45;cursor:default}

/* What Tony sees: the picture with boxes, and the SCENE note the conversation gets. */
.pv-see{margin-top:14px;border-top:0;padding-top:0}
.pv-see[open]{gap:10px}
.pv-preview{position:relative;overflow:hidden;border-radius:var(--radius-group);background:#111;aspect-ratio:16/9;margin-top:4px}
.pv-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.pv-preview[data-state=empty] img,.pv-preview[data-state=empty] .pv-boxes{display:none}
.pv-preview-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:rgba(255,255,255,.6)}
.pv-preview[data-state=live] .pv-preview-empty{display:none}
.pv-boxes{position:absolute;inset:0}
.pv-box{position:absolute;border:2px solid #30d158;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.pv-box[data-kind=object]{border-color:#64d2ff}
.pv-box span{position:absolute;z-index:2;left:-2px;bottom:100%;margin-bottom:3px;max-width:240px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.66);color:#fff;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(6px)}
.pv-box[data-looking]{border-width:3px;border-color:#ffd60a}
.pv-box[data-looking] span{background:rgba(255,214,10,.92);color:#000}
.pv-face{position:absolute;border:1px dashed rgba(255,255,255,.7);border-radius:4px}
.pv-face[data-speaking=yes]{border:2px solid rgba(255,214,10,.7)}
.pv-face[data-speaking=clear]{border:2px solid #ffd60a;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 10px rgba(255,214,10,.6)}
.pv-face span{position:absolute;left:-2px;top:100%;margin-top:3px;padding:1px 6px;border-radius:6px;background:#ffd60a;color:#000;font-size:11px;font-weight:700;white-space:nowrap}.pv-face[data-side=right] span{left:auto;right:-2px}.pv-face[data-speaking=no][data-known=yes]{border:2px solid #30d158}.pv-face[data-speaking=no][data-known] span{background:rgba(0,0,0,.72);color:#fff}.pv-face[data-speaking=no][data-known=yes] span{background:#30d158;color:#00210c}.pv-box[data-known=yes]:not([data-looking]) span{background:#30d158;color:#00210c}
.pv-centre{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)) center/2px 100% no-repeat,linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)) center/100% 2px no-repeat;filter:drop-shadow(0 0 1px rgba(0,0,0,.8))}
.pv-scene-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:var(--label-2)}
.pv-scene-head span:last-child{font-weight:400;color:var(--label-3);font-variant-numeric:tabular-nums}
.pv-scene{margin:0;padding:10px 12px;border-radius:10px;background:var(--fill);font:12px/1.55 var(--mono);color:var(--label-2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}

/* Disclosed sections. */
.pv-section{padding:0}
.pv-section>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px;font-size:14px;font-weight:600;color:var(--label);cursor:pointer;list-style:none;border-radius:var(--radius-card)}
.pv-section>summary::-webkit-details-marker{display:none}
.pv-section>summary>span:first-child{display:inline-flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.pv-section>summary>span:first-child::before{content:"";width:6px;height:6px;border-right:1.6px solid var(--label-3);border-bottom:1.6px solid var(--label-3);transform:rotate(-45deg);transition:transform .15s}
.pv-section[open]>summary>span:first-child::before{transform:rotate(45deg)}
.pv-section>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pv-summary-note{min-width:0;font-size:12px;font-weight:400;color:var(--label-3);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-section-body{padding:2px 22px 20px;display:grid;gap:16px}
/* Settings › Vision › Scene model: which model describes and whether it works, then Gemini's costs as three tiles. */
.pv-sm-status{margin-top:0;font-size:14px;color:var(--label)}
.pv-sm-status strong{font-weight:600}
.pv-sm-head{display:grid;gap:3px}
.pv-sm-detail{margin:0;padding-left:15px;overflow-wrap:anywhere}
.pv-sm-detail[hidden]{display:none}
.pv-sm-rows{margin-top:0}
.pv-sm-note[data-tone=warn]{color:var(--orange);font-weight:600}
.pv-sm-costs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.pv-sm-cost{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--separator);min-width:0}
.pv-sm-cost span{font-size:11px;font-weight:600;color:var(--label-3)}
.pv-sm-cost strong{font-size:17px;font-weight:650;letter-spacing:-.2px;color:var(--label);font-variant-numeric:tabular-nums}
.pv-sm-cost small{font-size:11px;color:var(--label-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;align-items:start}
.pv-field{display:grid;gap:6px;min-width:0;border:0;padding:0;margin:0}
.pv-field-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pv-field label,.pv-field legend,.pv-label{font-size:12px;font-weight:600;color:var(--label-2);padding:0}
.pv-field legend{margin-bottom:6px}
.pv-field .ds-fine{margin-top:0}
.pv-field textarea{width:100%;resize:vertical;min-height:96px;padding:9px 11px;border:1px solid var(--separator);border-radius:10px;background:var(--surface);font:inherit;font-size:13px;line-height:1.5;color:var(--label)}
.pv-field textarea:focus,.pv-field select:focus,.pv-camera input:focus,.pv-stop-short input:focus{outline:3px solid var(--accent-wash);border-color:var(--accent)}
.pv-field select{height:32px;padding:0 10px;border:1px solid var(--separator);border-radius:9px;background:var(--surface);font:inherit;font-size:13px;color:var(--label)}
.pv-chips{display:flex;flex-wrap:wrap;gap:6px}
.pv-chip{display:inline-flex;cursor:pointer}
.pv-chip input{position:absolute;opacity:0;pointer-events:none}
.pv-chip span{height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:14px;background:var(--fill-2);color:var(--label-2);font-size:12px;font-weight:600;transition:background .15s,color .15s}
.pv-chip input:checked+span{background:var(--accent-wash);color:var(--accent-text)}
.pv-chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}
.pv-chip input:disabled+span{opacity:.5}
.pv-segment{display:inline-grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border-radius:10px;background:var(--fill-2)}
.pv-segment button{height:26px;border:0;border-radius:7px;background:transparent;color:var(--label-2);font-size:12px;font-weight:600}
.pv-segment button[aria-checked=true]{background:var(--surface);color:var(--label);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pv-segment button:disabled{opacity:.5;cursor:default}
.pv-test{display:flex;align-items:center;gap:12px}
.pv-test .ds-fine{margin-top:0}
.pv-camera{display:flex;flex-wrap:wrap;gap:8px 14px}
.pv-camera label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:400;color:var(--label-2)}
.pv-camera input{width:64px;height:28px;padding:0 6px;border:1px solid var(--separator);border-radius:8px;background:var(--surface);font:inherit;font-size:12px;color:var(--label);font-variant-numeric:tabular-nums}
.pv-stop-short input{width:64px;height:28px;padding:0 6px;border:1px solid var(--separator);border-radius:8px;background:var(--surface);font:inherit;font-size:12px;color:var(--label);font-variant-numeric:tabular-nums}
.pv-stop-short{display:grid;gap:6px;max-width:380px}
.pv-stop-short label{display:grid;grid-template-columns:1fr 64px auto 48px;align-items:center;gap:6px;font-size:12px;font-weight:400;color:var(--label-2)}
.pv-stop-short .ds-fine{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.pv-worker{grid-column:1/-1}
.pv-worker:empty{display:none}

/* Activity: the last events, what Tony decided and why. */
.pv-activity{list-style:none;margin:0;padding:0;display:grid}
.pv-activity li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--separator);align-items:baseline}
.pv-activity li:last-child{border-bottom:0}
.pv-activity time{font-size:12px;color:var(--label-3);font-variant-numeric:tabular-nums}
.pv-activity-text{font-size:13px;color:var(--label);overflow-wrap:anywhere}
.pv-activity small{grid-column:2/-1;font-size:11px;color:var(--label-3)}
.pv-activity small:empty{display:none}
.pv-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--fill-2);color:var(--label-2);white-space:nowrap}
.pv-badge[data-decision=sent],.pv-badge[data-decision=spoken]{background:var(--green-wash);color:var(--green)}
.pv-badge[data-decision=cancelled]{background:var(--orange-wash);color:var(--orange)}
.pv-badge[data-decision=waiting],.pv-badge[data-decision=pending]{background:var(--accent-wash);color:var(--accent-text)}

@media (max-width:700px){
  .pv-card{padding:16px}
  .pv-section{padding:0}.pv-section>summary{padding:14px 16px}.pv-section-body{padding:2px 16px 16px}
  .pv-grid{grid-template-columns:minmax(0,1fr)}
}

/* Interactive › Vision › Follow and attention (attention_controls.js) */
.fa-follow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 0 10px}
.fa-follow .ds-fine{flex:1 1 180px}
.fa-follow .fa-distance{flex:1 1 100%}
.fa-more{margin-top:8px}
.fa-more .pv-grid{margin-top:10px}
#fa-speed{grid-template-columns:repeat(2,1fr)}

/* Interactive › Vision › Hand guide (hand_guide_controls.js) */
.hg-head{cursor:pointer;-webkit-tap-highlight-color:transparent}
.hg-head-controls{display:flex;align-items:center;gap:10px;flex:none}
.hg-allow{margin-top:0;cursor:pointer}
.hg-expand{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:16px;background:var(--fill);color:var(--label-2)}
.hg-expand:hover{color:var(--label)}
.hg-expand svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.hg-card[data-open=true] .hg-expand svg{transform:rotate(180deg)}
.hg-body[hidden],.hg-body .pv-rows[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.hg-expand svg{transition:none}}
.hg-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px}
.hg-actions[hidden]{display:none}
/* Sensitivity: a closed disclosure under Dry run, the two head sliders inside */
.hg-sens{border-top:0;padding:12px 0 0}
.hg-sens[hidden]{display:none}
.hg-sens[open]{display:block}
.hg-sens summary{min-height:32px}
.hg-sens .hg-gain:last-child{border-bottom:0}
.hg-lead-row .pv-label{font-size:13px;font-weight:600;color:var(--label)}
.hg-lead{grid-template-columns:repeat(2,minmax(64px,1fr));flex:none}
.hg-lead button{height:32px;font-size:13px}
.hg-gain{padding:12px 0;border-bottom:1px solid var(--separator)}
.hg-gain[hidden]{display:none}
.hg-plot[data-lead=head] .hg-hand{display:none}
.hg-actions .ds-fine{flex:1 1 180px}
.hg-live{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center;margin-top:14px}
.hg-live[hidden],.hg-more[hidden]{display:none}
.hg-plot{width:200px;height:200px;border-radius:14px;background:var(--fill)}
.hg-axis{font-size:9px;font-weight:500;fill:var(--label-3);stroke:none;letter-spacing:.04em}
.hg-cross{stroke:var(--separator);stroke-width:1}
.hg-ring{fill:var(--accent-wash);fill-opacity:.55;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 3}
.hg-ring-off{fill:none;stroke:var(--label-4);stroke-dasharray:2 2}
.hg-tony circle{fill:var(--surface);stroke:var(--label-2);stroke-width:1.5}
.hg-tony path{fill:none;stroke:var(--label-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hg-tony .hg-hand{fill:var(--label-2);stroke:none}
.hg-arrow{stroke:var(--label-3);stroke-width:3;stroke-linecap:round}
.hg-tip{fill:var(--label-3)}
.hg-plot[data-state=walking] .hg-arrow{stroke:var(--green-fill)}.hg-plot[data-state=walking] .hg-tip{fill:var(--green-fill)}
.hg-readout{display:grid;gap:10px;margin:0}
.hg-readout div{display:grid;gap:1px}
.hg-readout dt{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label-3)}
.hg-readout dd{margin:0;font-size:14px;color:var(--label);font-variant-numeric:tabular-nums}
.hg-more{margin-top:12px}
.hg-details{margin-top:8px;line-height:1.5}
@media (max-width:520px){.hg-live{grid-template-columns:minmax(0,1fr);justify-items:center}.hg-readout{width:100%}}

/* Presenter mode (presenter_controls.js): the teleprompter on Tony's picture and the card's script. */
.pv-tp{position:absolute;border:2px solid #bf5af2;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.pv-tp>span{position:absolute;left:-2px;bottom:100%;margin-bottom:3px;padding:2px 7px;border-radius:6px;background:#bf5af2;color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.pv-tp-line{position:absolute;border-left:3px solid rgba(191,90,242,.9);pointer-events:none}
.pv-tp-line[data-said=yes]{border-left-color:#30d158}
.pv-tp-text{list-style:none;margin:8px 0 0;padding:8px 10px;border-radius:var(--radius-group,12px);background:#1c1c1e;color:#f5f5f7;font-size:14px;line-height:1.4;display:grid;gap:2px}
.pv-tp-text li{overflow-wrap:anywhere;padding-left:10px;border-left:3px solid #bf5af2}
.pv-tp-text li[data-said=yes]{border-left-color:#30d158;color:#b8f5c8}
.pr-live{display:grid;gap:12px;margin-top:4px}
.pr-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pr-actions .ds-btn{min-height:40px}
.pr-note{min-height:1em;margin:0}
.pr-script-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--text-secondary,#6e6e73);text-transform:none}
.pr-size{font-weight:500}
.pr-script{list-style:none;margin:0;padding:8px 10px;max-height:220px;overflow-y:auto;border-radius:var(--radius-group,12px);background:rgba(120,120,128,.08);display:grid;gap:4px;font-size:14px;line-height:1.35}
.pr-script:empty{display:none}
.pr-script li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px;overflow-wrap:anywhere}
.pr-script li[data-said=yes]>span:first-child{color:#30d158;font-weight:700}
.pr-script li[data-said=no]{color:var(--text-secondary,#6e6e73)}
.pr-script li[data-said=next]{color:#bf5af2}
.pr-more p{margin:6px 0 0}