/* Principle letters match Figure 1; numbered steps match Figure 2. */
.principle-index{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid color-mix(in srgb,var(--category) 40%,white);color:var(--metric-ink);font-size:12px;font-weight:600;background:white}
.metric-picker{gap:10px;border:0}
.metric-picker .finding-row{gap:11px;border:1px solid #dfe6e3;border-radius:6px;padding:15px 13px;margin:0;transition:background .15s,border-color .15s,box-shadow .15s}
.metric-picker .finding-row.selected{border-color:var(--category);background:color-mix(in srgb,var(--category) 5%,white);box-shadow:inset 0 -2px var(--category)}
.metric-picker .finding-row:hover{border-color:var(--category)}
.metric-picker .finding-row.selected .principle-index,.paper-tabs button[aria-selected=true] .principle-index{background:var(--category);border-color:var(--category);color:white}
.metric-picker .principle-question{margin-bottom:9px}

/* The next evidence action has priority over the optional walkthrough. */
.scene-controls{gap:10px;flex-wrap:wrap}
.scene-controls .tour-button{min-height:36px;padding:8px 11px;font-size:12px;background:white;border:1px solid #b8ccc5;color:#286c60}
.scene-controls .tour-button[aria-pressed=true]{background:#e9f3ef}
.scene-controls .segmented{padding:3px;gap:3px;background:#f0f4f2;border-color:#d1ddd7}
.scene-controls .segmented button{min-height:34px;padding:7px 13px;font-size:12px;color:#356d5c;font-weight:500}
.scene-controls .segmented button.selected{background:#2e5147;color:white;box-shadow:none}
.scene-controls .segmented button:not(.selected):hover{background:#e0eae5;color:#173e30}
.scene-controls button:focus-visible,.inspection-action:focus-visible,.paper-tabs button:focus-visible{outline:3px solid #80b9aa;outline-offset:3px}
.finding-panel [data-eval-step]{position:relative;padding:18px 0 18px 32px;border-bottom:0}
.finding-panel [data-eval-step]:not(:last-child)::before{content:"";position:absolute;left:10px;top:42px;bottom:-12px;width:1px;background:#dce5e0}
.finding-panel .check-step{margin-left:-32px;gap:10px;font-size:13px;line-height:22px}
.finding-panel .check-step>b{width:22px;height:22px;border:1px solid #b5cdc3;background:white;color:#356e5a;font-size:11px}
.finding-panel [data-state=current] .check-step>b{background:#267b72;border-color:#267b72;color:white}
.finding-panel [data-state=pending] .check-step{color:#8a9690}
.finding-panel [data-state=pending] .check-step>b{background:#f1f4f2;border-color:#e2e8e4;color:#8a9690}
#diagnosis-pending{margin-left:auto;font-size:11px;font-weight:400;color:#8a9690}
.evidence-actions{display:grid;grid-template-columns:1fr;gap:8px;padding-top:12px}
.inspection-action{width:100%;display:flex;align-items:center;gap:9px;min-height:42px;padding:10px 12px;border:1px solid #b4cdc4;border-radius:5px;background:white;color:#28634f;font-size:12px;line-height:1.4;font-weight:500;text-align:left;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.inspection-action svg,.paper-tabs svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.inspection-action .action-arrow{margin-left:auto;font-size:16px;line-height:1;transition:transform .15s}
.inspection-action:not(:disabled):hover{background:#eff6f2;border-color:#438b75;transform:translateY(-1px)}
.inspection-action:not(:disabled):hover .action-arrow{transform:translateX(3px)}
.inspection-action:active{transform:translateY(0)}
.inspection-action.is-next{background:#267b72;border-color:#267b72;color:white;box-shadow:0 2px 5px #184f3920}
.inspection-action.is-next:not(:disabled):hover{background:#1b665d;border-color:#1b665d}
.inspection-action:disabled{background:#f4f6f5;border-color:#e1e7e3;color:#87958c;box-shadow:none;opacity:1}
.inspection-action:disabled .action-arrow{visibility:hidden}
.revision-action{margin-top:14px}
.finding-panel .check-diagnosis{padding-bottom:0}
.finding-panel .door-result{font-size:12px;margin-top:11px}
.finding-panel .issue-status{font-size:10px}

/* Three principles, followed by the paper's evidence operations. */
.paper-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr);gap:10px;border:0;margin-bottom:28px}
.paper-tabs button{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px;border:1px solid #dfe6e3;border-radius:6px;background:white;color:var(--ink);font-size:13px;line-height:1.4;font-weight:500;text-align:left;margin:0;transition:background .15s,border-color .15s,box-shadow .15s}
.paper-tabs button:hover{background:color-mix(in srgb,var(--category) 4%,white);border-color:var(--category)}
.paper-tabs button[aria-selected=true]{background:color-mix(in srgb,var(--category) 6%,white);border-color:var(--category);color:var(--metric-ink);box-shadow:inset 0 -2px var(--category)}
.paper-tabs .evidence-operation{--category:#65777d;--metric-ink:#42585f;margin-left:10px;position:relative}
.paper-tabs .evidence-operation::before{content:"";position:absolute;left:-11px;top:8px;bottom:8px;width:1px;background:#dce3e0}
.paper-tabs .evidence-operation svg{width:22px;height:22px;color:#65777d}

@media(max-width:950px) and (min-width:721px){
  .metric-picker .finding-row{padding:13px 10px;gap:8px}.metric-picker small{font-size:13px}.metric-picker .principle-index{width:22px;height:22px}
  .paper-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.paper-tabs .evidence-operation{margin-left:0}.paper-tabs .evidence-operation::before{display:none}
}
@media(max-width:720px){
  .metric-picker{gap:7px}.metric-picker .finding-row{display:flex;flex-direction:column;gap:9px;padding:12px 9px}.metric-picker small{font-size:12px}.metric-picker .principle-index{width:23px;height:23px;font-size:11px}.metric-picker .principle-question{font-size:11px;line-height:1.5}
  .scene-toolbar{gap:9px;padding:10px}.scene-label{font-size:12px}.scene-controls{width:100%;justify-content:space-between;gap:6px}.scene-controls .tour-button{font-size:11px;min-height:36px}.scene-controls .segmented button{font-size:11px;padding:6px 10px}
  .finding-panel .check-step{font-size:14px}.inspection-action{min-height:44px;font-size:13px}.finding-panel .evidence-image{height:200px}
  .paper-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:22px}.paper-tabs button{gap:8px;padding:10px;min-height:62px;font-size:12px}.paper-tabs .principle-index{width:23px;height:23px;font-size:11px}.paper-tabs .evidence-operation{margin-left:0}.paper-tabs .evidence-operation::before{display:none}
}
@media(prefers-reduced-motion:reduce){.inspection-action,.inspection-action .action-arrow,.paper-tabs button,.metric-picker .finding-row{transition:none}.inspection-action:not(:disabled):hover,.inspection-action:not(:disabled):hover .action-arrow{transform:none}}

/* Let both scene views use the available desktop width. */
@media(min-width:1280px){
  .demo-section.page-width{width:calc(100% - 96px);max-width:1904px;padding-inline:32px}
  .demo-shell{grid-template-columns:minmax(0,1fr) clamp(380px,27vw,520px)}
  .scene-stage{height:clamp(600px,34vw,780px);min-height:clamp(600px,34vw,780px)}
  .finding-panel{padding:24px}
  .finding-panel .evidence-image{height:auto;aspect-ratio:4/3}
  .evidence-image canvas{position:absolute;inset:0}
  .section-top{margin-bottom:24px}
  .section-top h2{font-size:32px}
  .section-lead{font-size:17px}
  .demo-badge{font-size:12px}
  .metric-picker{gap:14px;margin-bottom:20px}
  .metric-picker .finding-row{padding:18px;gap:13px}
  .metric-picker small{font-size:16px}
  .metric-picker .principle-question{font-size:14px}
  .metric-picker strong{font-size:13px}
  .metric-picker .principle-index{width:30px;height:30px;font-size:13px}
  .scene-toolbar{min-height:64px;padding-inline:22px}
  .scene-label{font-size:14px}
  .scene-controls .tour-button,.scene-controls .segmented button{font-size:14px;min-height:40px}
  .scene-controls .tour-button{padding:9px 14px}
  .scene-controls .segmented button{padding:9px 16px}
  .panel-heading h3{font-size:17px}
  .panel-heading>span{font-size:14px}
  .finding-panel .check-step{font-size:15px;line-height:26px;margin-left:-36px}
  .finding-panel .check-step>b{width:26px;height:26px;font-size:12px}
  .finding-panel [data-eval-step]{padding-left:36px}
  .finding-panel [data-eval-step]:not(:last-child)::before{left:12px;top:46px}
  .check-question p{font-size:16px}
  .check-inspection>p{font-size:14px}
  .inspection-action{font-size:14px;min-height:46px;padding:11px 14px;gap:11px}
  .inspection-action svg{width:20px;height:20px}
  .evidence-image>span{font-size:10px;bottom:10px;left:12px}
  .evidence-detail h4{font-size:15px}
  .finding-panel .issue-status,#diagnosis-pending{font-size:12px}
  .finding-panel .door-result{font-size:14px}
  .diagnosis-label{font-size:12px}
  .diagnosis-objects,.check-diagnosis p{font-size:14px}
  .scene-bottom{height:58px;padding-inline:18px}
  .view-buttons button{font-size:13px;padding:9px}
  .view-buttons svg{width:17px;height:17px}
  .annotation-toggle,.scene-caption{font-size:12px}
  .camera-label{font-size:12px;padding:7px 10px}
  .hotspot{width:38px;height:38px;font-size:14px}
  .demo-footnote{font-size:12px}
}

/* Room-specific questions connect the principle tiers to the three hotspots. */
.room-checks-heading{margin:0 0 13px;font-size:16px;font-weight:550;line-height:1.5;color:var(--ink)}
.metric-picker .room-check-question{display:block;font-size:15px;line-height:1.5;color:var(--ink);font-weight:500;padding:0}
.metric-picker .finding-row.selected .room-check-question{color:var(--ink)}
.metric-picker .finding-row small{font-size:12px;margin:0 0 7px}
.evidence-operations{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}
.evidence-operations>span{display:inline-flex;align-items:center;gap:5px;min-height:25px;padding:4px 7px;border:1px solid #dde4e1;border-radius:4px;background:#f7f9f8;color:#74817a;font-size:10px;line-height:1.3;white-space:nowrap}
.evidence-operations>span::before{content:"";width:5px;height:5px;border:1px solid currentColor;border-radius:50%}
.evidence-operations>span.used{color:#226d64;border-color:#8dbcb2;background:#eaf5f1;font-weight:600}
.evidence-operations>span.used::before{background:currentColor}
.finding-panel .illustration-note{font-size:11px;line-height:1.6;color:#718078;margin:10px 0 0}
.illustration-note a,.revision-study-link{color:#2d756b;text-decoration:underline;text-decoration-color:#adc9c2;text-underline-offset:3px}
.revision-study-link{display:inline-block;margin-top:12px;font-size:11px;line-height:1.6}
@media(min-width:721px){.scene-column .scene-stage{flex:1}.scene-toolbar,.scene-bottom{flex-shrink:0}}
@media(min-width:1280px){
  .room-checks-heading{font-size:18px}
  .metric-picker .room-check-question{font-size:17px}
  .metric-picker .finding-row small{font-size:13px}
  .evidence-operations>span{font-size:11px;padding:5px 8px}
  .finding-panel .illustration-note,.revision-study-link{font-size:12px}
}
@media(max-width:720px){
  .room-checks-heading{font-size:15px;margin-bottom:10px}
  .metric-picker{grid-template-columns:1fr}
  .metric-picker .finding-row{flex-direction:row;align-items:flex-start;gap:11px;padding:12px}
  .metric-picker .finding-row small{font-size:11px;margin-bottom:3px}
  .metric-picker .room-check-question{font-size:13px;line-height:1.45}
  .evidence-operations>span{font-size:10px}
}