/* Active V2ICC composer / processing / ObservationCard translated to local HTML.
   Only native 3/6/12/24 spacing and 4/16/24 radii; no product styles modified. */
.maxter-demo{--demo-xs:3px;--demo-sm:6px;--demo-md:12px;--demo-lg:24px;--demo-radius-sm:4px;--demo-radius-md:16px;--demo-radius-lg:24px;--demo-bg:#303030;--demo-panel:#3b3b3b;--demo-text:#fff;--demo-muted:#f2f2f2;--demo-border:#484c4c;--demo-success:#2fa772;--demo-orange:#e98a3a;min-width:0;margin:0;overflow-anchor:none;font-family:var(--font,Ubuntu,Arial,sans-serif);color:var(--demo-text)}
.maxter-demo *{box-sizing:border-box}
.maxter-demo-screen{position:relative;overflow:hidden;border:1px solid var(--demo-border);border-radius:var(--demo-radius-lg);background:linear-gradient(0deg,rgba(89,177,181,.051),rgba(252,102,102,.051)),var(--demo-bg);box-shadow:var(--shadow)}
.maxter-demo-stage{min-width:0;padding:var(--demo-md);font-size:12px;line-height:1.5}
.maxter-demo-stage+.maxter-demo-stage{border-top:1px solid var(--demo-border)}
/* All stages share one grid cell. Hidden stages still reserve their natural
   height, so the tallest current-width state determines the panel size. */
.maxter-demo-ready .maxter-demo-screen{display:grid}
.maxter-demo-ready .maxter-demo-stage{grid-area:1 / 1;display:flex;flex-direction:column;border-top:0}
.maxter-demo-ready .maxter-demo-stage[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.maxter-demo-ready .maxter-demo-stage[hidden] *{visibility:hidden!important}
.maxter-demo-stage p{margin:0;color:var(--demo-text)}
.maxter-demo-entry,.maxter-demo-processing{display:flex;flex-direction:column;gap:var(--demo-lg)}
.maxter-demo-entry{justify-content:flex-end}
.maxter-demo-message{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--demo-md);align-items:start}
.maxter-demo-message p{padding-block:var(--demo-md);line-height:1.6}
.maxter-demo-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:1px solid var(--demo-border);border-radius:var(--demo-radius-lg);background:var(--demo-bg)}
.maxter-demo-avatar img{display:block;max-width:none;object-fit:contain;flex:none}
.maxter-demo-composer{padding:var(--demo-md);border:1px solid var(--demo-border);border-radius:var(--demo-radius-lg);background:var(--demo-bg)}
.maxter-demo-prompt{min-height:48px;line-height:1.5;color:var(--demo-muted);padding:var(--demo-sm)}
.maxter-demo-prompt [hidden]{display:none!important}
.maxter-demo-voice-row{display:flex;align-items:center;gap:var(--demo-md)}
.maxter-demo-voice-control{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:1px solid var(--demo-border);border-radius:var(--demo-radius-lg);background:var(--demo-bg)}
.maxter-demo-voice-pill{height:40px;flex:1;min-width:0;padding-inline:var(--demo-md);border:1px solid var(--demo-border);border-radius:var(--demo-radius-lg);background:var(--demo-bg)}
.maxter-demo-voice-capture{display:flex;align-items:center;height:100%;gap:var(--demo-sm)}
.maxter-demo-record-dot{width:7px;height:7px;flex:none;border-radius:var(--demo-radius-lg);background:#e85d6a}
.maxter-demo-record-time{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.maxter-demo-wave{height:32px;min-width:0;flex:1;display:flex;align-items:center;justify-content:space-between;margin-left:var(--demo-md);overflow:hidden}
.maxter-demo-wave i{display:block;width:2px;height:12px;flex:none;border-radius:var(--demo-radius-sm);background:var(--demo-text)}
.maxter-demo-transcribing{height:100%;display:flex;align-items:center;justify-content:center;gap:var(--demo-sm);font-weight:600}
.maxter-demo-spinner{width:16px;height:16px;border:2px solid var(--demo-border);border-top-color:var(--demo-text);border-radius:var(--demo-radius-lg)}
.maxter-demo-spinner{animation:maxter-demo-spin 1000ms linear infinite;animation-play-state:paused}
.maxter-demo-composer-actions{display:flex;justify-content:flex-end;gap:var(--demo-sm)}
.maxter-demo-composer-actions>span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--demo-radius-lg)}
.maxter-demo-composer-actions img{width:20px;height:20px;object-fit:contain}
.maxter-demo-processing-stack{display:flex;flex-direction:column;gap:var(--demo-md)}
.maxter-demo-processing-line{display:flex;align-items:center;gap:var(--demo-sm)}
.maxter-demo-processing-message{font-size:12px;line-height:20px}
.maxter-demo-animated-hands{position:relative;isolation:isolate;background:rgba(252,102,102,.051);border-color:rgba(252,102,102,.051)}
.maxter-demo-animated-hands::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(0deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);mask:url('./icons/maxter.svg') center / 25px 20px no-repeat;pointer-events:none}
.maxter-demo:is([data-stage="1"],[data-stage="4"]) .maxter-demo-animated-hands{animation:maxter-demo-turn 1000ms cubic-bezier(.86,0,.07,1) infinite;animation-play-state:paused}
.maxter-demo:is([data-stage="1"],[data-stage="4"]) .maxter-demo-animated-hands::after{animation:maxter-demo-shimmer 1000ms cubic-bezier(.86,0,.07,1) infinite;animation-play-state:paused}
.maxter-demo-processing-draft{width:100%;max-width:640px;padding:var(--demo-md);border:1px solid rgba(255,255,255,.1);border-radius:var(--demo-radius-lg);background:rgba(59,59,59,.5)}
.maxter-demo-processing-title{font-size:14px;font-weight:600;margin-bottom:var(--demo-md)!important}
.maxter-demo-processing-field{display:grid;grid-template-columns:7px 86px minmax(0,1fr);gap:var(--demo-md);align-items:start;padding-bottom:var(--demo-sm);font-size:12px;line-height:1.5}
.maxter-demo-state-dot{display:block;width:7px;height:7px;margin-top:var(--demo-sm);border-radius:var(--demo-radius-sm);background:var(--demo-muted);transition:background 250ms}
.maxter-demo-state-dot[data-state=reviewing]{background:var(--demo-border)}
.maxter-demo-state-dot[data-state=ready]{background:var(--demo-success)}
.maxter-demo-assistant{margin-bottom:var(--demo-md)}
.maxter-demo-observation-card{overflow:hidden;border:1px solid var(--demo-border);border-radius:var(--demo-radius-lg);background:linear-gradient(0deg,rgba(89,177,181,.051),rgba(252,102,102,.051)),var(--demo-bg)}
.maxter-demo-card-header{padding:var(--demo-md);border-bottom:2px dotted var(--demo-border);font-family:var(--display,Barlow,'Arial Narrow',sans-serif);font-weight:400;font-size:22px;line-height:1.2}
.maxter-demo-output-fields{display:grid;gap:var(--demo-md);margin:0;padding:var(--demo-md)}
.maxter-demo-output-field{padding:var(--demo-sm) var(--demo-md);border-bottom:1px solid var(--demo-border);background:var(--demo-panel)}
.maxter-demo-output-field dt{margin:0 0 var(--demo-xs);font-size:12px;line-height:1.4;color:var(--demo-muted)}
.maxter-demo-output-field dd{margin:0;font-size:12px;line-height:1.5;color:var(--demo-text)}
.maxter-demo-card-actions{display:grid;gap:var(--demo-md);padding:var(--demo-md);border-top:1px solid var(--demo-border)}
.maxter-demo-app-control{display:flex;align-items:center;justify-content:center;gap:var(--demo-md);min-height:48px;padding:var(--demo-sm) var(--demo-md);border:1px solid var(--demo-border);border-radius:var(--demo-radius-lg);font-size:14px;line-height:1.4;cursor:default}
.maxter-demo-app-control img{display:block;width:20px;height:20px;object-fit:contain}
.maxter-demo-app-secondary{background:var(--demo-bg);color:var(--demo-text)}
.maxter-demo-app-primary{background:var(--demo-text);color:var(--demo-bg)}
.maxter-demo-app-primary img{filter:brightness(.188)}
@keyframes maxter-demo-turn{from{transform:rotate(0);opacity:.25}to{transform:rotate(1turn);opacity:1}}
@keyframes maxter-demo-shimmer{0%,100%{opacity:0}50%{opacity:1}}
@keyframes maxter-demo-spin{to{transform:rotate(1turn)}}
@media(max-width:380px){.maxter-demo-processing-field{grid-template-columns:7px 72px minmax(0,1fr);gap:var(--demo-sm)}}
@media(prefers-reduced-motion:reduce){.maxter-demo *,.maxter-demo *::after{animation:none!important;transition:none!important}}

.maxter-demo:focus-visible{outline:3px solid var(--demo-orange);outline-offset:var(--demo-sm)}
.maxter-demo-photo{display:block;width:90px;height:60px;max-width:none;object-fit:cover;border-radius:var(--demo-radius-md)}
.maxter-demo-photo-row{display:flex;align-items:center;gap:var(--demo-md);padding:0 var(--demo-md) var(--demo-md);margin:0 calc(-1 * var(--demo-md)) var(--demo-md);border-bottom:1px solid var(--demo-border)}
.maxter-demo-photo-control{display:flex;align-items:center;justify-content:center;flex:none;width:60px;height:60px;border:1px solid var(--demo-border);border-radius:var(--demo-radius-sm);background:var(--demo-bg)}
.maxter-demo[data-phase=photo] .maxter-demo-photo-control{animation:maxter-demo-snap 1200ms ease-in-out;animation-play-state:paused}
/* Keep CSS animation instances alive while paused, retaining their playheads. */
.maxter-demo-playing .maxter-demo-spinner,.maxter-demo-playing[data-stage="1"] .maxter-demo-animated-hands,.maxter-demo-playing[data-stage="1"] .maxter-demo-animated-hands::after,.maxter-demo-playing[data-phase=photo] .maxter-demo-photo-control{animation-play-state:running}
@keyframes maxter-demo-snap{0%,100%{border-color:var(--demo-border)}50%{border-color:var(--demo-text);background:var(--demo-panel)}}

/* Inspection-photo markup is a presentation overlay, not an edited source asset. */
.maxter-photo-marked{position:relative;display:block;width:90px;height:60px;overflow:hidden;border-radius:var(--demo-radius-md)}
.maxter-photo-mark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:var(--orange);stroke-width:1;stroke-linecap:round}
.maxter-photo-mark ellipse{stroke-dasharray:1;stroke-dashoffset:var(--mark-progress,0)}
.maxter-demo[data-phase=photo] .maxter-demo-entry .maxter-photo-mark,.maxter-demo[data-phase=annotation] .maxter-demo-entry .maxter-photo-marked .maxter-photo-mark{visibility:hidden}
.maxter-annotation-preview{position:absolute;inset:0;z-index:4;display:grid;place-items:center;overflow:hidden;background:var(--demo-bg)}
.maxter-annotation-image{position:relative;width:100%}
.maxter-annotation-image>img{display:block;width:100%;height:auto}
.maxter-demo-playing[data-stage="4"] .maxter-demo-animated-hands,.maxter-demo-playing[data-stage="4"] .maxter-demo-animated-hands::after{animation-play-state:running}

.maxter-result-photo{padding:var(--demo-md);border-bottom:1px solid var(--demo-border)}

.maxter-demo-tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--demo-md);padding:var(--demo-md)}
.maxter-demo-priority-tags{display:flex;flex-wrap:wrap;gap:var(--demo-sm)}
.maxter-demo-tag{display:inline-flex;padding:var(--demo-xs) var(--demo-sm);border:1px solid var(--demo-border);border-radius:var(--r-full);background:var(--demo-panel);font-size:11px}
.maxter-demo-tag.is-selected{background:var(--coral);color:var(--bg);border-color:var(--coral)}

.maxter-annotation-preview{grid-template-rows:auto minmax(0,1fr) auto}
.maxter-annotation-image{height:100%;min-height:0;display:grid;place-items:center}
.maxter-annotation-image>img{height:100%;object-fit:contain}
.maxter-editor-top,.maxter-editor-tools{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--demo-md);gap:var(--demo-sm);background:var(--demo-bg);z-index:1}
.maxter-editor-top img,.maxter-editor-tools img{width:20px;height:20px}
.maxter-editor-top>span{display:flex;gap:var(--demo-md)}
.maxter-editor-tools>span{display:grid;justify-items:center;gap:var(--demo-xs)}
.maxter-editor-tools small{font-size:10px}


.maxter-demo-assistant{display:flex;align-items:center;gap:var(--demo-sm)}
.maxter-speaker{display:block;font-size:12px}
.maxter-demo-message .maxter-speaker{margin-bottom:var(--demo-sm)}
.maxter-demo-ready .maxter-demo-stage:not([hidden]){animation:maxter-scene-fade 650ms ease both}
@keyframes maxter-scene-fade{from{opacity:0}to{opacity:1}}
.maxter-annotation-preview:not([hidden]),.maxter-demo-voice-row:not([hidden]){animation:maxter-scene-fade 500ms ease both}
.maxter-system-history{position:absolute;inset:var(--demo-md);bottom:calc(var(--demo-lg)*7);overflow:hidden;mask-image:linear-gradient(#000 80%,transparent)}
.maxter-history-speaker{font-weight:600;margin-bottom:var(--demo-sm)}
.maxter-demo[data-stage="3"] .maxter-system-history{animation:maxter-history-scroll 2200ms cubic-bezier(.22,.61,.36,1) both}
.maxter-demo-stage[data-maxter-stage="3"]>.maxter-demo-composer{position:relative;z-index:1}
@keyframes maxter-history-scroll{from{transform:translateY(0);opacity:1}to{transform:translateY(calc(var(--demo-lg)*-5));opacity:.65}}
@media(prefers-reduced-motion:reduce){.maxter-demo-ready .maxter-demo-stage,.maxter-annotation-preview,.maxter-demo-voice-row,.maxter-system-history{animation:none!important}}

.maxter-editor-top,.maxter-editor-tools{padding-inline:var(--demo-lg)}

/* Illustrate inspector review with anchored pointers; no real submission occurs. */
[data-review-target]{position:relative}
.maxter-review-pointer{position:absolute;right:var(--demo-md);bottom:0;width:24px;height:28px;z-index:3;opacity:0;pointer-events:none;transform:translate(12px,18px);transition:opacity 180ms ease,transform 260ms ease}
.maxter-review-pointer svg{width:100%;height:100%}
[data-review-action="maintenance"] [data-review-target="maintenance"]>.maxter-review-pointer,
[data-review-action="repair"] [data-review-target="repair"]>.maxter-review-pointer,
[data-review-action="notes"] [data-review-target="notes"]>.maxter-review-pointer,
[data-review-action="submit"] [data-review-target="submit"]>.maxter-review-pointer{opacity:1;transform:translate(0,12px)}
.maxter-review-pointer::after{content:"";position:absolute;inset:0;border:2px solid var(--demo-orange);border-radius:50%;animation:maxter-review-click 1300ms ease infinite;animation-play-state:paused}
.maxter-demo-playing .maxter-review-pointer::after{animation-play-state:running}
@keyframes maxter-review-click{0%,55%{opacity:0;transform:scale(.35)}65%{opacity:.9}100%{opacity:0;transform:scale(1.5)}}
[data-review-action="notes"] [data-review-target="notes"]{outline:1px solid var(--demo-orange);outline-offset:-1px}
.maxter-review-caret{display:none;border-right:1px solid currentColor;margin-left:var(--demo-xs)}
[data-review-action="notes"] .maxter-review-caret{display:inline}
[data-submit-disabled="true"] [data-review-target="submit"]{background:var(--demo-panel);color:var(--demo-muted);opacity:.45;cursor:not-allowed}
[data-submit-disabled="true"] [data-review-target="submit"] img{filter:none}
.maxter-demo-tag[data-review-target="maintenance"].is-selected{background:var(--yellow);border-color:var(--yellow);color:var(--demo-bg)}
@media(prefers-reduced-motion:reduce){.maxter-review-pointer{display:none}}