/* Ortho Photos card. Mobile-first, on the shared styles.css tokens. Prefixed `op-`. */
.op-shell { width: 100%; max-width: 720px; box-sizing: border-box; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); overflow-x: hidden; }
.op-hidden { display: none; }
.op-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); min-width: 0; }
.op-body > * { min-width: 0; }
.op-card { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; min-inline-size: 0; max-inline-size: 100%; }
.op-card h2 { margin: 0; font-size: 1.1rem; color: var(--ink); }
.op-muted { color: var(--muted); font-size: 0.9rem; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.op-empty { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); text-align: center; padding: 14px 0 2px; }
.op-wait-line { text-align: center; padding: 18px 0; }
.op-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 0.9rem; color: var(--ink-soft); }
.op-field input, .op-field select { font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel-subtle); color: var(--ink); min-width: 0; max-width: 100%; min-height: 48px; width: 100%; box-sizing: border-box; }
/* On iPhone Safari the native date control's border can render beyond a 100%-wide
   grid item. Size it from a zero-basis flex slot instead, including its padding. */
.op-date-field { inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; }
.op-date-control { display: flex; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; }
.op-date-control input[type="date"] { display: block; flex: 1 1 0px; width: 0; inline-size: 0; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; color-scheme: light; }
.op-date-control input[type="date"]::-webkit-date-and-time-value { min-inline-size: 0; }
:root[data-theme="dark"] .op-field input[type="date"] { color-scheme: dark; }
.op-btn { font: inherit; font-size: 1rem; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); cursor: pointer; }
.op-btn:disabled { opacity: 0.5; cursor: default; }
.op-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.op-btn-danger { color: var(--danger); }
.op-btn-lg { min-height: 56px; font-size: 1.05rem; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.op-btn-lg small { font-size: 0.78rem; font-weight: 500; opacity: 0.85; }
.op-btn-slim { min-height: 48px; padding: 0 16px; font-size: 0.95rem; }
.op-row { display: flex; gap: 10px; flex-wrap: wrap; }
.op-row > .op-btn { flex: 1 1 140px; }
.op-link { background: none; border: 0; padding: 12px 8px; min-height: 48px; font: inherit; font-size: 0.95rem; color: var(--link); text-decoration: underline; cursor: pointer; text-align: center; align-self: center; }
.op-link:disabled { opacity: 0.5; }

.op-results { display: flex; flex-direction: column; gap: 8px; }
.op-result { text-align: left; font: inherit; padding: 12px 14px; min-height: 56px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel-subtle); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.op-result small { color: var(--muted); display: block; }
.op-result:disabled { opacity: 0.65; cursor: default; }
.op-today { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-strong); padding-top: 16px; min-width: 0; }
.op-today[hidden] { display: none; }
.op-today h3 { margin: 0; font-size: 1rem; color: var(--ink); }
.op-patient { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); min-width: 0; }
:root[data-theme="dark"] .op-patient { background: rgba(79, 109, 255, 0.16); }
.op-patient-main { min-width: 0; overflow-wrap: anywhere; }
.op-patient small { display: block; color: var(--muted); }
.op-show-all { margin: 0; }
.op-draft-note { flex: none; font-size: 0.78rem; color: var(--muted); min-width: 4.5em; text-align: right; }

.op-step-title { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0; }
.op-progress-head { display: flex; align-items: baseline; gap: 8px; }
.op-progress-head strong { font-size: 1.5rem; color: var(--ink); }
.op-progress-head span { color: var(--muted); }
.op-progress { height: 10px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.op-progress > div { height: 100%; width: 0; background: var(--brand); transition: width 0.25s; }

/* big thumbnails: photo hub, iTero previews, history photos */
.op-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.op-tile { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--panel-subtle); border: 2px solid var(--line-strong); padding: 0; font: inherit; color: var(--ink); cursor: pointer; display: block; min-width: 0; }
.op-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-xray-thumb { display: block; width: 100%; height: 100%; background: var(--panel-subtle) center / cover no-repeat; }
.op-xray-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.op-xray-tile { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 88px; padding: 0; overflow: hidden; text-align: left; font: inherit; color: var(--ink); background: var(--panel-subtle); border: 2px solid var(--line-strong); border-radius: 14px; cursor: pointer; }
.op-xray-tile.is-done { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.op-xray-tile .op-xray-thumb { min-height: 88px; }
.op-xray-label { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 12px 14px; font-weight: 650; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.op-xray-label small { color: var(--brand); font-size: 0.78rem; font-weight: 700; }
.op-scan-download-list { display: grid; gap: 8px; }
.op-scan-download { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 14px; text-align: left; font: inherit; color: var(--ink); background: var(--panel-subtle); border: 2px solid var(--line-strong); border-radius: 12px; cursor: pointer; }
.op-scan-download span { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.op-scan-download small { flex: none; color: var(--brand); font-weight: 700; }
.op-scan-download.is-done { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
#opXrayDownload { overflow: hidden; padding: 0; gap: 0; }
.op-xray-scroll { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.op-xray-footer { flex: none; display: grid; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); background: var(--panel, #fff); box-shadow: 0 -8px 22px rgba(0,0,0,.08); }
.op-xray-status { min-height: 1.25em; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.35; font-variant-numeric: tabular-nums; text-align: center; }
.op-xray-footer .op-row { margin: 0; }
.op-tile.is-done { border-color: var(--brand); }
.op-tile .op-tile-guide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: 0.85; filter: invert(1); transform: scale(var(--op-guide-scale, 1)); transform-origin: var(--op-guide-origin-x, 50%) var(--op-guide-origin-y, 12%); }
.op-guide-toggle { margin-left: auto; font-size: 0.85rem; }
.op-tile.is-next { border-color: var(--brand); border-style: dashed; }
.op-tile-empty { position: absolute; inset: 0 0 34px 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; color: var(--muted); font-size: 0.9rem; }
.op-tile.is-next .op-tile-empty { color: var(--brand); font-weight: 600; }
.op-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 8px; font-size: 0.82rem; line-height: 1.2; background: rgba(10, 12, 18, 0.72); color: #fff; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-tile-wide { grid-column: 1 / -1; aspect-ratio: auto; min-height: 64px; display: flex; align-items: center; padding: 12px 16px; text-align: left; }
.op-tile-cap-wide { display: flex; flex-direction: column; gap: 2px; }
.op-tile-cap-wide small { color: var(--muted); }
.op-tiles-itero .op-tile { aspect-ratio: 4 / 3; }
/* 5 intraoral tiles: buccal / frontal / buccal across the top (3), then the two occlusals side by side (2), all the same size. (The old
   2-column grid left the last tile alone on a row, so the lower occlusal stretched over the whole width.) */
.op-tiles.op-tiles-itero { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.op-tiles-itero .op-tile { grid-column: span 3; }
.op-tiles-itero .op-tile:nth-child(-n+3) { grid-column: span 2; }
.op-tile:disabled { cursor: default; opacity: 0.8; }

/* the one primary action of a screen, pinned above the bottom edge */
.op-sticky { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 0; padding: 10px 0 calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 14px); z-index: 5; }
.op-sticky-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.op-sticky-links .op-nav-btn { flex: 1 1 120px; align-self: stretch; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--ink-soft); text-decoration: none; }

/* Workflow navigation belongs at the top of the destination screen, not disguised as a footer hyperlink. */
.op-back-row { display: flex; align-items: center; min-height: 44px; }
.op-back { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.op-back svg { width: 18px; height: 18px; flex: none; }
.op-back:disabled { opacity: 0.5; cursor: default; }

.op-collage-wrap { position: relative; }
.op-cg-cell { position: absolute; overflow: hidden; pointer-events: none; }
.op-cg-frame { position: absolute; background: #84cc16; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.op-cg-edit { position: absolute; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.op-cg-edit:hover, .op-cg-edit:focus-visible { outline: 3px solid #84cc16; outline-offset: -3px; }
.op-collage { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-strong); display: block; }
.op-error { background: var(--pc-warn-bg, #fff4da); border: 1px solid #ebd29a; color: #603b06; padding: 12px 14px; border-radius: 12px; font-size: 0.95rem; overflow-wrap: anywhere; }
:root[data-theme="dark"] .op-error { background: #3a2c10; border-color: #6b531f; color: #f3d9a0; }
.op-ok { background: #ebf9f5; border: 1px solid #b9ded5; color: #075e55; padding: 12px 14px; border-radius: 12px; }
:root[data-theme="dark"] .op-ok { background: #0f2f2a; border-color: #1f5a50; color: #9fe0d3; }
.op-wait { background: var(--panel-subtle); border: 1px solid var(--line-strong); color: var(--ink); padding: 12px 14px; border-radius: 12px; }
.op-card-inner { display: flex; flex-direction: column; gap: 12px; }

/* confirm dialog: bottom sheet on phones, centred card on wider screens. */
.op-sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 50; }
.op-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel, #fff); color: var(--ink); border-radius: 18px 18px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25); }
.op-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-sheet-head h2 { margin: 0; font-size: 1.1rem; }
@media (min-width: 640px) {
  .op-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(480px, 92vw); border-radius: 18px; }
  #opXrayDownload { width: min(680px, 92vw); }
}

/* iTero scan list */
.op-scans { display: flex; flex-direction: column; gap: 8px; }
.op-scan { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 10px 14px; text-align: left; font: inherit; color: inherit;
  background: var(--panel-subtle); border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; }
.op-scan:disabled { opacity: 0.6; cursor: default; }
.op-scan.is-last { border-color: var(--brand); }
.op-scan-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-scan-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-scan-tag { flex: none; font-size: 0.9rem; font-weight: 600; color: var(--brand); }

/* ── tabs, lists, pills ── */
.op-tabs { display: flex; gap: 6px; background: var(--panel-subtle); padding: 4px; border-radius: 999px; border: 1px solid var(--line-strong); }
.op-tab { flex: 1; min-width: 0; font: inherit; min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; font-weight: 600; }
.op-main-tabs .op-tab { white-space: nowrap; }
.op-tab.is-active { background: var(--brand); color: #fff; }
.op-list { display: flex; flex-direction: column; gap: 8px; }
.op-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel-subtle); color: var(--ink); font: inherit; text-align: left; min-height: 60px; }
.op-item-stack { flex-direction: column; align-items: stretch; }
.op-item-btn { width: 100%; cursor: pointer; }
.op-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.op-item-main small { color: var(--muted); }
.op-item-actions { display: flex; gap: 8px; }
.op-item-actions .op-btn { flex: 1; }
.op-history-item { align-items: center; }
.op-history-open { flex: 1 1 auto; min-width: 0; display: flex; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.op-history-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.op-history-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.op-history-by { max-width: 18rem; color: var(--muted); font-size: 0.76rem; font-weight: 600; line-height: 1.2; text-align: right; overflow-wrap: anywhere; }
.op-status-by { display: block; margin-top: 4px; font-size: 0.84rem; font-weight: 600; }
.op-pill { flex: none; font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--line-strong); color: var(--ink); }
.op-pill-ok { background: #d8f3ea; color: #075e55; }
.op-pill-bad { background: #fde1e1; color: #8a1f1f; }
.op-pill-wait { background: #fff0cc; color: #6a4708; }
:root[data-theme="dark"] .op-pill-ok { background: #0f2f2a; color: #9fe0d3; }
:root[data-theme="dark"] .op-pill-bad { background: #3a1616; color: #f2b4b4; }
:root[data-theme="dark"] .op-pill-wait { background: #3a2c10; color: #f3d9a0; }
.op-h2 { margin: 4px 0 0; font-size: 1rem; color: var(--ink); }
.op-collage-btn { padding: 0; border: 0; background: none; cursor: zoom-in; }
.op-collage-btn.op-collage-wrap { display: block; width: 100%; }
.op-btn-danger-solid { background: #c0392b; border-color: #c0392b; color: #fff; font-weight: 600; }
.op-confirm p { margin: 0; color: var(--ink-soft); }

/* lightbox */
.op-lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 64px 12px calc(20px + env(safe-area-inset-bottom)); }
.op-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.op-lb-actions { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
.op-lb-actions .op-btn { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.op-lb-cap { color: #fff; font-size: 0.9rem; }

/* ── fullscreen layers: live camera + review ── */
body.op-noscroll { overflow: hidden; }
.op-layer { position: fixed; left: 0; top: 0; right: 0; height: 100dvh; z-index: 800; background: #000; color: #fff; display: flex; flex-direction: column; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.op-cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; background: #000; }
.op-top { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
.op-top-label { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; min-width: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.op-top-label strong { font-size: 0.98rem; font-weight: 600; }
.op-top-label span { font-size: 0.78rem; opacity: 0.8; }
.op-top-spacer { width: 48px; flex: none; }
.op-x { width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.3); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.op-leave { min-height: 40px; flex: none; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; background: rgba(0, 0, 0, 0.35); color: #fff; font: inherit; font-size: 0.82rem; cursor: pointer; }
.op-leave:active { background: rgba(255, 255, 255, 0.2); }
.op-cam-stage { position: relative; z-index: 1; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.op-cam-frame { position: relative; flex: none; overflow: hidden; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.32); outline: 1px solid rgba(255, 255, 255, 0.25); }
.op-ed-frame { background: #10131b; box-shadow: none; outline: 0; border-radius: 6px; }
.op-ed-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.op-cam-frame .op-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; color: #fff; pointer-events: none; opacity: var(--op-guide-op, 1); filter: invert(1); transform: scale(var(--op-guide-scale, 1)); transform-origin: var(--op-guide-origin-x, 50%) var(--op-guide-origin-y, 12%); }   /* optional Step back guide is 15% smaller around the crown/face anchor; art is inverted to black */
.op-cam-hint, .op-ed-hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(112px + env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 0.88rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); pointer-events: none; animation: opFade 0.6s ease 4s forwards; }
.op-ed-hint { bottom: calc(96px + 50px + env(safe-area-inset-bottom)); }   /* clears the straighten slider above the buttons */
.op-ed-inner { position: absolute; }     /* the full 4:5 frame (photo + outline), sized/offset in JS so only the collage window shows in .op-ed-frame */
.op-cam-frame .op-overlay { transition: opacity 0.12s ease; }
.op-cam-frame.op-guide-off .op-overlay { opacity: 0; }   /* review: tap the photo to hide the outline, tap again to show it (camera: hold one finger down until you let go) */
.op-ed-rot { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 18px 0; color: #fff; }
.op-ed-rot-l { font-size: 0.82rem; opacity: 0.85; white-space: nowrap; }
.op-ed-rot input[type="range"] { flex: 1 1 auto; min-width: 0; height: 32px; margin: 0; background: transparent; accent-color: var(--brand, #4f6dff); touch-action: none; cursor: pointer; }
.op-ed-rot-v { flex: none; min-width: 3.6rem; padding: 6px 2px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 0.9rem; font-variant-numeric: tabular-nums; text-align: right; cursor: pointer; }
@keyframes opFade { to { opacity: 0; visibility: hidden; } }
.op-cam-msg { position: absolute; z-index: 3; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); text-align: center; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.75); font-size: 0.95rem; line-height: 1.4; }
.op-cam-msg[hidden] { display: none; }
.op-cam-bar { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; padding: 10px 12px calc(18px + env(safe-area-inset-bottom)); }
.op-shutter { width: 68px; height: 68px; border-radius: 50%; border: 4px solid #fff; background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 0 0 4px #000; cursor: pointer; flex: none; padding: 0; }
.op-cam-import { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.35); color: #fff; font: inherit; font-size: 0.85rem; cursor: pointer; }   /* small "Import a photo" button beside the shutter */
.op-shutter:active { transform: scale(0.94); }
.op-shutter:disabled { opacity: 0.4; }
.op-ed-bar { position: relative; z-index: 2; flex: none; display: flex; gap: 12px; padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); }
.op-ed-bar .op-btn { flex: 1; width: auto; background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.op-ed-bar .op-btn-primary { background: var(--brand); border-color: var(--brand); }
/* site-wide floating launchers would sit on top of the camera/review controls */
body.op-noscroll .report-bug-btn, body.op-noscroll .phone-workspace-launcher, body.op-noscroll .clinical-recorder-launcher { display: none !important; }
/* On a phone (narrow screen, or any touch device) the site-wide call / bug / recording launchers (injected by feedback-widget.js) sit on top of this
   page's own bottom buttons (Take photo, Continue, Save & exit, Retake, Use photo), so they are hidden on this page for the whole visit. */
@media (max-width: 639px), (hover: none) and (pointer: coarse) {
  .report-bug-btn, .phone-workspace-launcher, .clinical-recorder-launcher { display: none !important; }
}

/* iTero step wording helpers */
.op-center { text-align: center; }
.op-matched { margin: 0; font-size: 0.95rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; overflow-wrap: anywhere; }
.op-link-inline { padding: 0; min-height: 48px; font-size: 0.9rem; display: inline-flex; align-items: center; }
.op-scan-main strong { font-size: 1.1rem; }
.op-row-center { justify-content: center; }
.op-row-center > .op-btn { flex: 0 0 auto; min-width: 160px; }

.op-review-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }   /* type + date, editable at the end */

/* Examples tab: a patient's records side by side, de-identified */
.op-case-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.op-case-head small { display: block; color: var(--muted); }
.op-strip-shell { position: relative; }
.op-strip { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.op-strip-arrow { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; width: 36px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(16, 19, 28, 0.82); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); font: 600 2rem/1 system-ui, sans-serif; cursor: pointer; }
.op-strip-arrow:hover { background: rgba(16, 19, 28, 0.96); }
.op-strip-arrow:focus-visible { outline: 3px solid var(--brand, #6680ff); outline-offset: 2px; }
.op-strip-prev { left: 8px; }
.op-strip-next { right: 8px; }
.op-ex { position: relative; flex: 0 0 min(72%, 260px); aspect-ratio: 4 / 3; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #fff; padding: 0; cursor: pointer; scroll-snap-align: start; }
.op-ex img { width: 100%; height: 100%; object-fit: contain; display: block; }
.op-ex.is-hidden { opacity: 0.5; }
.op-ex-badge { position: absolute; top: 8px; left: 8px; background: #7a1f1f; color: #fff; font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; }
.op-ex-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 9px; background: rgba(0, 0, 0, 0.62); color: #fff; text-align: left; font-size: 0.82rem; line-height: 1.25; }
.op-ex-cap small { display: block; opacity: 0.85; }
.op-check { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; margin: 10px 0; }
/* the site-wide `input { width: 100%; min-height: 38px }` made this checkbox span the whole row: pin it to a normal checkbox size */
.op-check input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; padding: 0; margin: 0; accent-color: var(--brand, #4f6dff); cursor: pointer; }
@media (hover: none), (pointer: coarse) { .op-strip-arrow { display: none; } }
.op-check { cursor: pointer; }
.op-faces-check { margin: 0 0 10px; font-weight: 600; }
.op-faces-check.is-needed { color: var(--danger, #b42318); }
.op-redact { display: block; max-width: 100%; margin: 10px auto; border: 1px solid var(--line-strong); border-radius: 8px; touch-action: none; cursor: crosshair; background: #fff; }
.op-example-photo { min-width: 0; }
.op-example-photo .op-tile { width: 100%; }
.op-example-photo .op-link { display: inline-block; margin: 8px 0 4px; }
@media (min-width: 640px) { .op-ex { flex-basis: 260px; } }

.op-danger-link { color: var(--danger); margin-top: 18px; font-size: 0.85rem; }   /* deliberately small and at the very bottom of an opened example */
.op-btn-sm { min-height: 36px; padding: 0 14px; font-size: 0.85rem; flex: none; width: auto; }
/* compare a patient's records over time: FULL SCREEN (side by side / fade through / wipe) */
body.op-cmp-open { overflow: hidden; }
.op-cmp-full { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #0d0f14; color: #fff; }
.op-cmp-top-bar { flex: none; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 14px 8px; }
.op-cmp-title { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-cmp-modes { flex: 1 1 auto; margin: 0; }
.op-cmp-modes .op-tab { color: #fff; }
.op-cmp-close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; font-size: 1.1rem; cursor: pointer; }
.op-cmp-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.op-cmp-foot { flex: none; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); }
.op-cmp-stage { position: relative; width: 100%; height: 100%; }
.op-cmp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.op-cmp-wipe .op-cmp-top { position: absolute; inset: 0; }
.op-cmp-line { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--brand, #4f6dff); transform: translateX(-1.5px); pointer-events: none; z-index: 5; }
.op-cmp-side { display: flex; gap: 10px; width: 100%; height: 100%; overflow-x: auto; align-items: stretch; scroll-snap-type: x proximity; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.op-cmp-side img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.op-cmp-fig { flex: 1 0 min(46%, 100%); margin: 0; min-width: min(46%, 90vw); display: flex; flex-direction: column; scroll-snap-align: start; }
.op-cmp-fig img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #fff; border-radius: 8px; }
.op-cmp-fig { position: relative; }
.op-cmp-empty { align-items: center; justify-content: center; border: 2px dashed rgba(255,255,255,.28); border-radius: 8px; }
.op-cmp-add { display: flex; flex-direction: column; gap: 12px; width: min(280px, 80%); }
.op-cmp-add .op-btn { width: 100%; }
.op-media-panel { position: fixed; z-index: 1400; top: 12px; right: 12px; bottom: 12px; width: min(980px, calc(100vw - 24px)); border-radius: 14px; overflow: hidden; background: #0d0f14; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.op-media-panel iframe { width: 100%; height: 100%; border: 0; }
.op-media-panel .op-cmp-close { position: absolute; top: 16px; right: 16px; z-index: 1; }
.op-cmp-fig figcaption { flex: none; margin-top: 6px; font-size: 0.9rem; text-align: center; color: rgba(255,255,255,0.85); }
.op-cmp-cap { text-align: center; margin: 0 0 6px; color: rgba(255,255,255,0.85); min-height: 1.3em; }
.op-cmp-ctl { display: flex; align-items: center; gap: 12px; }
.op-cmp-ctl input[type="range"], #opCmpWipe { flex: 1 1 auto; width: 100%; min-height: 0; padding: 0; accent-color: var(--brand, #4f6dff); }
.op-cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 8px; align-items: end; }
.op-cmp-pick label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.op-cmp-select-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.op-cmp-example-backdrop { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.68); }
.op-cmp-example-picker { position: absolute; z-index: 21; inset: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); width: min(980px, calc(100% - 36px)); margin: auto; overflow: auto; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: #171a21; color: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
.op-cmp-example-title { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px; background: #171a21; border-bottom: 1px solid rgba(255,255,255,.16); }
.op-cmp-example-title h2 { margin: 0 0 4px; font-size: 1.25rem; }
.op-cmp-example-title p { margin: 0; color: rgba(255,255,255,.7); }
.op-cmp-example-title-copy { min-width: 0; flex: 1 1 auto; }
.op-cmp-example-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.op-cmp-example-tags .op-chip { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.op-cmp-example-tags .op-chip.is-on { border-color: var(--brand); background: var(--brand); }
.op-cmp-example-empty { padding: 20px; }
.op-cmp-example-list { display: grid; gap: 14px; padding: 16px; }
.op-cmp-example-case { min-width: 0; padding: 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.05); }
.op-cmp-example-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.op-cmp-example-head > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.op-cmp-example-head small { color: rgba(255,255,255,.65); }
.op-cmp-example-use { flex: none; white-space: nowrap; }
.op-cmp-example-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.op-cmp-example-record { min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; text-align: left; }
.op-cmp-example-record img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #fff; }
.op-cmp-example-record span { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.op-cmp-example-record small { color: rgba(255,255,255,.65); }
.op-cmp-case-nav { display: flex; align-items: center; gap: 6px; padding: 3px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.1); }
.op-cmp-case-nav button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.op-cmp-case-nav button:hover { background: rgba(255,255,255,.24); }
.op-cmp-case-nav button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.op-cmp-case-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.op-cmp-case-nav span { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }

.op-tab-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: #c2410c; color: #fff; font-size: 0.75rem; line-height: 20px; text-align: center; vertical-align: 1px; }
.op-todo { color: #c2410c; }
.op-resume { border: 2px solid #c2410c; }

.op-te-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; max-height: 46vh; overflow-y: auto; }
.op-te-row { display: flex; gap: 8px; align-items: center; }
.op-te-in { flex: 1 1 auto; min-width: 0; }
.op-te-del { flex: none; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--danger); cursor: pointer; font: inherit; }

/* Examples: tags, filter chips, per-patient tag editor */
.op-case-actions { display: flex; gap: 6px; flex: none; }
.op-tagbar { align-items: center; justify-content: space-between; }
.op-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }
.op-chip { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--panel-subtle); border: 1px solid var(--line-strong); font-size: 0.8rem; color: var(--ink); }
.op-chip-btn { cursor: pointer; font: inherit; font-size: 0.85rem; padding: 4px 12px; }
.op-chip-btn small { opacity: 0.7; }
.op-filter .op-chip-btn[data-id] { touch-action: none; }
.op-chip-btn.is-dragging, .op-te-row.is-dragging { opacity: 0.55; outline: 2px dashed var(--brand, #4f6dff); outline-offset: 2px; }
.is-sorting, .is-sorting * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.op-te-handle { flex: none; display: grid; place-items: center; width: 28px; min-height: 40px; color: var(--muted); font-size: 1.1rem; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.op-chip-manage { border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); font-weight: 600; }
.op-chip-manage:hover { color: var(--ink); border-color: var(--ink); }
.op-ex-actions + .op-chips { margin-top: 12px; }
.op-ex-hint { margin: 6px 0 0; font-size: 0.85rem; }
.op-chip-btn.is-on { background: var(--brand, #4f6dff); border-color: var(--brand, #4f6dff); color: #fff; }
.op-ce-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin: 8px 0; }
.op-sheet:has(.op-ce-tags) { max-height: 94vh; max-height: 94dvh; }   /* case editor: show every tag without an inner scroll box */
.op-ce-tags .op-check { margin: 4px 0; min-width: 0; overflow-wrap: anywhere; }

.op-patient-main small { display: block; }
/* the full-screen compare bar is dark: light-on-dark tabs, buttons and inputs */
.op-cmp-full .op-tabs { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); }
.op-cmp-full .op-tab { color: #fff; background: transparent; }
.op-cmp-full .op-tab.is-active { background: var(--brand, #4f6dff); color: #fff; }
.op-cmp-full .op-btn { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.op-cmp-full .op-cmp-pick select { width: min(440px, 100%); max-width: 100%; min-height: 40px; text-overflow: ellipsis; }
.op-cmp-full select { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.op-cmp-full select option { color: #111; }

/* Device-specific adaptations: one information architecture, comfortable controls in each context. */
.op-drop-hint { display: none; margin: 0; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-soft); background: var(--panel-subtle); font-size: 0.9rem; line-height: 1.4; text-align: center; }
.op-btn:focus-visible, .op-link:focus-visible, .op-back:focus-visible, .op-tab:focus-visible, .op-tile:focus-visible, .op-ex:focus-visible, .op-result:focus-visible, .op-item-btn:focus-visible, .op-history-open:focus-visible, .op-scan:focus-visible, .op-chip-btn:focus-visible, .op-cmp-close:focus-visible, .op-te-del:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 48%, transparent); outline-offset: 2px; }

@media (max-width: 520px) {
  .op-review-details { grid-template-columns: minmax(0, 1fr); }
  .op-ex-actions .op-btn { flex-basis: 100%; }
  .op-case-head { flex-direction: column; align-items: stretch; }
  .op-case-head > :first-child { min-width: 0; overflow-wrap: anywhere; }
  .op-case-actions { width: 100%; flex-wrap: wrap; }
  .op-case-actions .op-btn { flex: 1 1 120px; }
  .op-cmp-top-bar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
  .op-cmp-title { grid-column: 1; grid-row: 1; max-width: none; overflow-wrap: anywhere; white-space: normal; }
  .op-cmp-close { grid-column: 2; grid-row: 1; }
  .op-cmp-modes { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .op-cmp-fig { flex: 0 0 86vw; min-width: 86vw; }
}

@media (max-width: 390px) {
  .op-card { padding: 14px; }
  .op-tabs { gap: 2px; padding: 3px; }
  .op-tab { font-size: 0.88rem; }
  .op-main-tabs .op-tab { padding-inline: 7px; font-size: 0.78rem; }
  .op-cmp-pick { grid-template-columns: minmax(0, 1fr); }
  .op-cmp-select-row { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: hover) and (pointer: fine) {
  /* Desktop command bars stay dense and content-sized; phone controls retain
     the larger full-width touch treatment above. */
  .op-main-tabs { align-self: flex-start; width: auto; max-width: 100%; gap: 3px; padding: 3px; }
  .op-main-tabs .op-tab { flex: 0 0 auto; min-height: 40px; padding: 0 15px; font-size: 0.9rem; }
  .op-ex-actions { align-items: center; }
  .op-ex-actions .op-btn { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-size: 0.9rem; }
  .op-tagbar { justify-content: flex-start; gap: 8px; }
  .op-card .op-btn-lg[data-act="ex-pick-go"],
  .op-card .op-btn-lg[data-act="ex-save"] { width: auto; align-self: flex-start; min-height: 40px; padding: 0 16px; font-size: 0.95rem; }
  .op-drop-hint { display: block; }
  .op-btn-sm { min-height: 40px; }
  .op-sticky { position: static; padding-top: 2px; background: none; }
}

@media (pointer: coarse) {
  .op-btn-sm { min-height: 44px; }
  .op-te-del { width: 44px; height: 44px; }
  .op-chip-btn, .op-check { min-height: 44px; }
}

@media (min-width: 900px) {
  .op-shell.op-shell-wide { max-width: 1180px; }
  .op-examples-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .op-examples-list .op-card { height: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
  .op-progress > div, .op-cam-frame .op-overlay { transition: none; }
  .op-cam-hint, .op-ed-hint { animation: none; }
}

.op-toast { position: fixed; z-index: 2000; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 12px; background: #1f2937; color: #fff; font-size: 0.95rem; line-height: 1.35; box-shadow: 0 12px 32px rgba(0,0,0,.28); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.op-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.op-toast.is-bad { background: #b42318; }