/* Phone layout (iPhone first). Loaded after every other stylesheet.
   Phones get one column, a compact header with a Menu, viewers that flow down the page (no boxes that scroll
   inside the page), pictures that open full screen (phone.mjs), 16 px text boxes (Safari zooms into smaller
   ones), 40+ px tap targets, and room for the notch and the home bar. Portrait and landscape both count:
   the query matches phone.mjs PHONE_QUERY, so a phone turned sideways keeps the phone layout.
   Everything is inside the media query except the parts that are harmless everywhere (marked). */

/* Everywhere: iOS must not enlarge text on rotation, and clinical pictures get no long-press "Save to Photos"
   (that would copy them into the phone's photo library and iCloud). Downloads stay explicit buttons. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.study-thumb img, .image-pane img, .clinic-frames img, .clinic-pages img, .clinic-part img, .oct-host img, .cataract-host img, .pv-image {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.phone-menu-button { display: none; }
.hover-copy, .touch-copy { display: inline; }
@media (hover: none) { .hover-copy { display: none; } }
@media (hover: hover) { .touch-copy { display: none; } }

/* ---------- full-screen picture viewer (opened only on phones) ---------- */
dialog.phone-viewer { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden; }
dialog.phone-viewer[open] { display: flex; flex-direction: column; }
dialog.phone-viewer::backdrop { background: #000; }
html.phone-viewer-open, html.phone-viewer-open body { overflow: hidden; }
.pv-bar, .pv-foot { display: flex; align-items: center; gap: 10px; background: #0b1622; z-index: 2; flex-shrink: 0; }
.pv-bar { min-height: 56px; padding: calc(6px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
.pv-foot { min-height: 56px; padding: 6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.pv-close, .pv-step { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff38; background: #ffffff12; color: #fff; font-size: 18px; line-height: 1; padding: 0; }
.pv-step { font-size: 26px; padding-bottom: 3px; }
.pv-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pv-patient { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-title { font-size: 13px; color: #cdd9e4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-title .laterality-badge { margin-right: 6px; vertical-align: 1px; }
.pv-title small { color: #93a7b9; font-size: 12px; }
.pv-count { font-size: 13px; color: #cdd9e4; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.pv-stage { flex: 1; position: relative; overflow: hidden; touch-action: none; min-height: 0; }
.pv-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; transform-origin: 0 0; pointer-events: none; }
.pv-hint { flex: 1; text-align: center; font-size: 12px; color: #93a7b9; }
.pv-slider { flex: 1; min-width: 0; height: 44px; accent-color: var(--gold, #d7a841); }
/* Sideways: the bars float over the picture so it can use the whole height. */
@media (orientation: landscape) and (max-height: 500px) {
  .pv-stage { position: absolute; inset: 0; }
  .pv-bar, .pv-foot { position: absolute; left: 0; right: 0; background: #0b1622b8; min-height: 48px; }
  .pv-bar { top: 0; padding-top: calc(2px + env(safe-area-inset-top)); padding-bottom: 2px; }
  .pv-foot { bottom: 0; padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
}

@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  /* ---------- basics ---------- */
  button, a, select, summary, [role=tab], label { touch-action: manipulation; }
  /* Safari zooms the whole page into any text box under 16 px when it is tapped. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=button]):not([type=submit]), select, textarea { font-size: 16px !important; }

  /* ---------- header: logo and Menu; the tabs and account controls fold into the menu ---------- */
  .app-header { height: auto; min-height: calc(50px + env(safe-area-inset-top)); flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 0 10px;
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); z-index: 60; }
  .app-logo { display: flex; align-items: center; min-height: 50px; }
  .app-logo img { width: 118px; }
  .phone-menu-button { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; min-height: 40px; min-width: 76px; justify-content: center; padding: 0 14px;
    border: 1px solid var(--rule); border-radius: 20px; background: #fff; color: var(--navy); font-size: 15px; font-weight: 600; }
  .phone-menu-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold, #d7a841); color: var(--navy); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
  .phone-menu-count[hidden] { display: none; }
  .app-header:not(.menu-open) .app-nav, .app-header:not(.menu-open) .user-menu { display: none; }
  .app-header.menu-open { padding-bottom: 10px; box-shadow: 0 10px 24px #12304d1f; }
  .app-header.menu-open .app-nav, .clinic-mode .app-header.menu-open .app-nav { display: flex; order: 3; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; height: auto; overflow: visible; border-top: 1px solid var(--line); margin-top: 2px; }
  .app-header.menu-open .nav-link { height: auto; min-height: 48px; font-size: 16px; padding: 0 4px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; justify-content: space-between; }
  .app-header.menu-open .nav-link.active { border-bottom-color: var(--line); border-left-color: var(--navy); padding-left: 10px; }
  .app-header.menu-open #studies-nav { display: none; }
  .app-header.menu-open .user-menu { display: flex; order: 4; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; padding-top: 12px; }
  .app-header.menu-open .user-name { display: inline; font-size: 15px; color: var(--ink); margin-right: auto; }
  .app-header.menu-open .user-avatar { width: 34px; height: 34px; font-size: 12px; }
  .app-header.menu-open .user-menu .text-button, .app-header.menu-open #logout { order: 9; flex: 1 0 100%; min-height: 44px; font-size: 16px; padding: 10px; border: 1px solid var(--rule); background: #fff; }
  .app-header.menu-open .clinic-settings-link { display: flex; align-items: center; order: 1; flex: 1 0 100%; min-height: 48px; font-size: 16px; color: var(--steel); margin: 0; border-bottom: 1px solid var(--line); }
  .app-header.menu-open .clinic-room-picker { display: flex; order: 2; flex: 1 0 100%; justify-content: space-between; margin: 0; font-size: 13px; }
  .app-header.menu-open .clinic-room-picker > span { display: inline; }
  .app-header.menu-open .clinic-room-picker select { height: 44px; min-width: 150px; }

  /* ---------- page frame ---------- */
  .app-main { padding: 12px max(12px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .patient-mode .app-main { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .app-footer { font-size: 11px; padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .toast { bottom: calc(16px + env(safe-area-inset-bottom)); font-size: 14px; }

  /* ---------- patient list ---------- */
  .page-heading { margin-bottom: 12px; }
  .page-heading h1 { font-size: 24px; }
  .patient-list-tabs button { min-height: 40px; font-size: 14px; padding: 6px 14px; }
  .search-field input { padding: 11px 0; }
  .compact-field { font-size: 13px; }
  .compact-field select { height: 42px; }
  .filter-bar > .text-button { min-height: 40px; font-size: 14px; padding: 8px 10px; }
  .patient-name { font-size: 17px; }
  .patient-cell small, .record-dob small { font-size: 12px; }
  .record-number { font-size: 14px; }
  .eye-pill { font-size: 12px; min-width: 32px; }
  .eye-row span:last-child { font-size: 12px; }
  .open-record { min-height: 44px; font-size: 15px; }
  .table-footer { font-size: 12px; }
  .workspace-note p { font-size: 13px; }
  .workspace-note strong { font-size: 14px; }

  /* ---------- patient banner ---------- */
  .patient-identity, .patient-mode .patient-identity { height: auto; min-height: 0; margin: 0; padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); gap: 8px 10px; flex-wrap: wrap; background: #fff; border-bottom: 1px solid var(--rule); }
  .patient-identity .compact-back { min-width: 40px; min-height: 40px; font-size: 20px; border-radius: 8px; }
  .patient-identity .patient-title-block { flex: 1 1 0; min-width: 0; }
  .patient-identity .title-line { flex-wrap: wrap; gap: 4px 8px; }
  .patient-identity h1 { font-size: 19px; line-height: 1.2; }
  .patient-identity .synthetic-badge { font-size: 10px; padding: 2px 5px; }
  .patient-identity .identity-meta { font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
  .patient-identity .identity-visit { display: none; }
  .patient-identity .eye-switch { order: 4; flex: 1 0 100%; max-width: none; margin: 0; padding: 3px; gap: 3px; border-radius: 10px; }
  .patient-identity .eye-switch button { flex: 1; min-height: 40px; justify-content: center; font-size: 13px; padding: 4px 6px; gap: 6px; border-radius: 8px; }
  .patient-identity .eye-switch b { font-size: 13px; }
  .clinic-strip { order: 5; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 2px; scrollbar-width: none; }
  .clinic-strip::-webkit-scrollbar { display: none; }
  .clinic-strip .button, .clinic-strip button { min-height: 38px; font-size: 14px; padding: 6px 12px; flex-shrink: 0; }
  /* A scan is open: the banner shrinks to one line (name, record, eye) so the picture gets the screen. */
  .scan-open .patient-identity .identity-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scan-open .patient-identity .eye-switch { order: 3; flex: 0 0 auto; margin-left: auto; }
  .scan-open .patient-identity .eye-switch button { flex: 0 0 auto; min-width: 44px; padding: 4px 8px; }
  .scan-open .patient-identity .eye-switch button > span { display: none; }
  .scan-open .clinic-strip { display: none; }

  /* ---------- workspace: full width, the page scrolls (never a box inside it) ---------- */
  .study-workspace, .study-workspace.details-open { display: flex; flex-direction: column; border: 0; border-radius: 0; min-height: 0; overflow: visible; }
  .study-sidebar { padding: 8px max(10px, env(safe-area-inset-left)); gap: 8px; scrollbar-width: none; }
  .study-sidebar::-webkit-scrollbar { display: none; }
  .study-sidebar .sidebar-heading { display: none; }
  .visit-button { min-height: 44px; padding: 6px 12px; border-radius: 22px; }
  .visit-button strong { font-size: 14px; }
  .visit-button small { font-size: 11.5px; }
  .scan-open .study-sidebar { display: none; }
  .viewer-column, .viewer-column[data-workspace-view] { overflow: visible; min-height: 0; }
  .viewer-column[data-workspace-view] .viewer-titlebar { height: auto; min-height: 52px; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); gap: 8px; flex-wrap: wrap; overflow: visible; background: #fff; }
  .viewer-titlebar h2 { font-size: 16px; }
  .viewer-titlebar .viewer-heading > p:last-child { font-size: 12px; }
  html .workspace-shared-heading #all-scans { min-height: 40px; font-size: 15px; padding: 6px 10px; }
  html #workspace-shared-actions > .button { min-height: 40px; font-size: 14px; padding: 6px 12px; }
  /* The scan bar names the patient too, because the banner scrolls away. */
  .scan-open .workspace-shared-heading #viewer-subtitle { display: block; font-size: 12px; color: var(--muted); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scan-open .workspace-shared-heading #viewer-subtitle::before { content: attr(data-patient) ' · '; color: var(--navy); font-weight: 600; }
  .workspace-shared-heading #viewer-title { font-size: 15px; }
  html .patient-mode .pentacam-toolbar .pentacam-tabs > button, html .iol-toolbar .iol-tabs > button, html .cv-toolbar .cv-tabs > button { min-height: 40px; font-size: 13px; padding: 6px 10px; }
  html .patient-mode .pentacam-toolbar .pentacam-layout-switch button, html .patient-mode .pentacam-toolbar .pentacam-expand { min-height: 36px; font-size: 12px; padding: 6px 8px; }
  .viewer-column[data-workspace-view] .workspace-shared-heading { flex: 1 1 220px; min-width: 0; }
  #workspace-active-eye { flex-shrink: 0; }
  #tile-smaller, #tile-larger, .gallery-tools #clear-studies, #viewer-keyboard { display: none !important; }
  .gallery-tools { flex: 1 0 100%; order: 5; margin: 0; }
  .gallery-tools .study-filter { flex: 1; }
  html .gallery-tools .study-filter select#study-modality { height: 42px; max-width: none; width: 100%; padding-left: 10px; }

  /* ---------- scan gallery ---------- */
  #scan-gallery { padding: 10px max(10px, env(safe-area-inset-right)) 14px max(10px, env(safe-area-inset-left)); overflow: visible; }
  #scan-gallery .study-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #scan-gallery .study-item { border-radius: 10px; }
  #scan-gallery .study-item strong { font-size: 14px; line-height: 1.3; }
  #scan-gallery .study-item small { font-size: 11.5px; line-height: 1.35; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
  #scan-gallery .study-item small + small { display: none; }
  #scan-gallery .study-thumb .laterality-badge { font-size: 12px; }
  .study-parts { font-size: 11px; }

  /* ---------- viewers ---------- */
  /* Pictures: as tall as the screen allows; a tap opens them full screen. Dragging on them scrolls the page. */
  .viewer-stage, .viewer-stage.comparing { height: clamp(300px, calc(100svh - 200px), 140vw); min-height: 0; flex: none; }
  .viewer-stage.comparing { height: clamp(520px, calc(100svh - 120px), 200vw); }
  .image-pane { touch-action: pan-y; cursor: zoom-in; padding: 8px; }
  .pane-label { font-size: 12px; }
  /* Zoom, fit and brightness stay for the in-page picture (pinch-zoom lives in the full-screen viewer). */
  .viewer-toolbar { flex-wrap: wrap; gap: 6px; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
  html #workspace-toolbar .viewer-toolbar { height: auto; min-height: 44px; }
  html #workspace-toolbar .tool-button { min-width: 40px; min-height: 40px; height: 40px; font-size: 20px; }
  .viewer-toolbar .labelled-tool { font-size: 13px; padding: 0 10px; }
  #image-adjustments summary { min-height: 40px; padding: 9px 12px; font-size: 13px; }
  .brightness-control input { width: 140px; height: 32px; }
  .report-toggle button { min-height: 40px; font-size: 13px; }
  .image-pane::after, .clinic-frames::after { content: 'Tap for full screen'; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 11px; border-radius: 14px; background: #0b1622c4; color: #dbe6f0; font-size: 12px; pointer-events: none; white-space: nowrap; }
  .clinic-frames { position: relative; cursor: zoom-in; }
  .clinic-frame-hint { display: none; }
  .clinic-doc-bar { font-size: 13px; padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); gap: 8px; }
  .clinic-doc-bar .button { min-height: 38px; font-size: 13px; padding: 6px 12px; }
  .clinic-doc-bar input[type=range] { height: 40px; min-width: 0; }
  .clinic-doc-bar [data-doc-zoom] { display: none; }
  .clinic-parts { padding: 6px max(8px, env(safe-area-inset-left)); gap: 8px; scrollbar-width: none; }
  .clinic-parts::-webkit-scrollbar { display: none; }
  .clinic-part { min-height: 44px; font-size: 13px; flex-shrink: 0; }
  /* Summaries, plans and reports flow down the page at their natural height. */
  .viewer-stage.oct-stage, .viewer-stage.cataract-stage, .viewer-stage.pages-stage { height: auto; min-height: 0; overflow: visible; }
  .patient-mode .viewer-stage.oct-stage .clinic-doc-viewer, .patient-mode .viewer-stage.cataract-stage .clinic-doc-viewer, .patient-mode .viewer-stage.pages-stage .clinic-doc-viewer { position: static; display: block; overflow: visible; }
  .patient-mode .viewer-stage.oct-stage .oct-host, .patient-mode .viewer-stage.cataract-stage .cataract-host { overflow: visible; min-height: 0; }
  .oct-host { padding: 10px max(10px, env(safe-area-inset-right)) 14px max(10px, env(safe-area-inset-left)); }
  .viewer-stage.pages-stage .clinic-pages { overflow: visible; padding: 10px 0; gap: 10px; }
  .viewer-stage.pages-stage .clinic-pages img { width: 100%; cursor: zoom-in; }
  .cataract-host [data-cat-print], .cataract-host .cat-print { display: none; }

  /* Controls inside the viewers: at least 36 px tall (min-height also beats a fixed height). */
  .oct-host button, .oct-host select,
  .cataract-host button, .cataract-host select, .cataract-host input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .pentacam-view select, .pentacam-view summary, .iol-view button, .iol-view select, .iol-view input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .corvis-view button, .clinic-view input:not([type=checkbox]):not([type=radio]):not([type=range]) { min-height: 36px; }
  .oct-link { padding-block: 11px; }
  /* Safari sizes drop-downs by height, not min-height; the planner's buttons carry a more specific minimum. */
  .cataract-host select { height: 40px; max-width: none; }
  html .cataract-host .button { min-height: 38px; font-size: 13px; }
  .cataract-host .cat-field input { height: 38px; }
  .cataract-host .cat-check-field input { width: 22px; height: 22px; }
  html .pentacam-view select, html .patient-mode .pentacam-more-panel select, .iol-view select { height: 40px; }
  .cataract-host button { min-width: 36px; }
  .cataract-host summary { padding-block: 10px; }
  .cataract-host input[type=checkbox], .cataract-host input[type=radio] { width: 24px; height: 24px; }
  .cataract-host .cat-tb-link { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; }
  .login-header a, .login-footer a { display: inline-flex; align-items: center; min-height: 40px; }

  /* ---------- details panel ---------- */
  .detail-sidebar { padding: 16px max(14px, env(safe-area-inset-right)) 20px max(14px, env(safe-area-inset-left)); }
  .study-metadata { font-size: 13px; }
  .detail-summary { font-size: 13px; }

  /* ---------- clinic pages ---------- */
  .clinic-view .button, .clinic-view button.button { min-height: 40px; font-size: 14px; }

  /* Portrait: header and the scan bar stay at the top while the page scrolls. */
  @media (orientation: portrait) {
    .app-header { position: sticky; top: 0; }
    .scan-open .viewer-column[data-workspace-view] .viewer-titlebar { position: sticky; top: calc(50px + env(safe-area-inset-top)); z-index: 30; box-shadow: 0 1px 0 var(--rule); }
  }
  /* Landscape: nothing sticks (the screen is short); a picture fills the height under the scan bar. */
  @media (orientation: landscape) {
    #scan-gallery .study-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .viewer-stage, .viewer-stage.comparing { height: calc(100svh - 60px); }
    .viewer-stage.comparing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .viewer-stage.comparing .image-pane + .image-pane { border-top: 0; border-left: 1px solid #2d3b49; }
    /* Room to scroll the scan bar to the top of the screen, whatever is below it. */
    .scan-open .viewer-column { min-height: 100svh; }
    .patient-identity .eye-switch { order: 3; flex: 0 0 auto; margin-left: auto; }
    .patient-identity .eye-switch button { flex: 0 0 auto; }
    .clinic-strip { order: 2; flex: 0 1 auto; }
  }
}