/* Small-screen layer (REVIEW-B2). Loaded last; desktop layout is unchanged above 700px. */
/* B2-2 Operator tables become labelled cards. Labels come from the column headings (mobile-ux.js). */
@media(max-width:700px){.table-wrap:has(>.stack-table){overflow:visible}.data-table.stack-table{min-width:0!important;width:100%;border-collapse:separate}.stack-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.stack-table,.stack-table tbody,.stack-table tr,.stack-table td,.stack-table tbody th{display:block}.stack-table tbody tr{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:14px;margin:0 0 12px;background:#fff}.stack-table tbody td,.stack-table tbody th{border:0!important;padding:0!important;display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);gap:10px;align-items:baseline;text-align:left;overflow-wrap:anywhere}.stack-table td[data-label]::before,.stack-table tbody th[data-label]::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:600;line-height:1.5}.stack-table tbody tr>:first-child{display:block;font-size:15px}.stack-table tbody tr>:first-child::before,.stack-table td[colspan]::before{display:none}.stack-table td[colspan]{display:block}.stack-table tbody tr>:first-child small{display:block;margin-top:3px}.stack-table tbody tr>*{min-width:0;max-width:100%;white-space:normal}.stack-table .btn.text{white-space:normal;text-align:left}
.work-queue-table tbody td:nth-child(3){order:-1;display:block}.work-queue-table tbody td:nth-child(3)::before{display:none}.work-queue-table tbody tr>:first-child{order:-2}.work-queue-table tbody td:last-child{display:block;margin-top:6px}.work-queue-table tbody td:last-child::before{display:none}.work-queue-table td:last-child .btn{display:flex;width:100%;justify-content:center;white-space:normal;text-align:center;min-height:44px}.stack-table tbody td:last-child:has(.btn){display:block;margin-top:6px}.stack-table tbody td:last-child:has(.btn)::before{display:none}.stack-table tbody td:last-child .btn{display:flex;width:100%;justify-content:center;text-align:center;white-space:normal;min-height:44px}}
/* B2-3 Horizontal rows: edge fades show there is more to scroll (classes from mobile-ux.js); the scroller itself is masked so no wrapper is needed. */
.scroll-fade-end{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}.scroll-fade-start{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px);mask-image:linear-gradient(to right,transparent,#000 36px)}.scroll-fade-start.scroll-fade-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
@media(max-width:760px){.workspace-tabs,.op-filter-nav,.client-nav{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}.workspace-tabs>*,.op-filter-nav>*,.client-nav>*{flex-shrink:0}.auto-glance{right:max(16px,env(safe-area-inset-right))}.auto-glance .auto-fault-count{right:-3px;top:-3px}}
/* B2-4 Floating controls. The fixed mobile bar is 66px plus the safe area; page content always ends above it and above Genie. */
:root{--mobile-bar:66px;--genie-reserve:88px}
body:has(>.genie-launch) .site-wrap{padding-bottom:var(--genie-reserve)}
@media(max-width:600px){.site-wrap:has(+ .mobile-nav),body:has(>.genie-launch) .site-wrap:has(+ .mobile-nav){padding-bottom:calc(var(--mobile-bar) + env(safe-area-inset-bottom) + 16px)}body:has(>.genie-launch) .site-wrap:has(+ .mobile-nav){padding-bottom:calc(var(--mobile-bar) + env(safe-area-inset-bottom) + 72px)}}
@media(max-width:640px){.genie-launch{right:max(10px,env(safe-area-inset-right));bottom:calc(var(--mobile-bar) + env(safe-area-inset-bottom) + 10px);width:44px;height:44px;padding:0;border-radius:50%;font-size:0;display:grid;place-items:center}.genie-launch span{font-size:19px;margin:0}body:not(:has(.mobile-nav)) .genie-launch{bottom:calc(14px + env(safe-area-inset-bottom))}body:has(nav[aria-label="Operator destinations"]) .genie-launch{display:none}}
/* B2-5 Settings tables with inputs: each field stacks under its label at full width; the Save bar returns to normal flow. */
@media(max-width:700px){.stack-fields tbody td{display:block}.stack-fields td[data-label]::before{display:block;margin-bottom:6px}.stack-fields select,.stack-fields input:not([type=checkbox]):not([type=radio]),.stack-fields textarea{width:100%;max-width:none!important;min-width:0!important}.stack-fields .check-field{white-space:normal}.stack-fields .pricing-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stack-fields td:empty{display:none}.prep-options-save{position:static;margin-top:20px;padding:16px 0 0}.stack-table tbody tr>th:first-child{font-weight:700;color:var(--ink)}}
/* B2-6 Upload page: the checklist sits in normal flow under the single journey tracker. */
@media(max-width:900px){.intake-grid>.intake-aside{position:static;z-index:auto}.intake-aside .eyebrow{display:block;margin:0 0 6px}.intake-checklist{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
/* REVIEW-B4. B4-1 Privacy notice line under client upload controls and in the footer (text: src/legal-content.ts). B4X-3 footer policy links wrap as one group. */
.privacy-note{font-size:12px;line-height:1.6;color:#5d7086;margin:10px 0 0}.privacy-note a{color:var(--blue);text-decoration:underline}.upload-zone .privacy-note{text-align:center}footer .footer-link{color:inherit;text-decoration:underline}.footer-links{display:flex;flex-wrap:wrap;column-gap:14px}
/* B4-2 The landing demo is framed as an example window; its upload control is a flat placeholder, never a button. */
.demo-frame-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#e9eef4;border-bottom:1px solid #d7e0eb}.demo-frame-bar i{width:9px;height:9px;border-radius:50%;background:#c3cedb}.demo-frame-bar span{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#4d6178;border:1px solid #b9c6d5;border-radius:999px;padding:1px 9px;background:#fff}
.sample-empty .sample-choose{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px dashed #c3cfdc;border-radius:8px;background:#f1f4f8;color:#6f8093;font-size:13px;cursor:default;pointer-events:none}
/* B4-5 Phone targets ≥44px and text ≥12px on the landing and sign-in screens; desktop unchanged. */
@media(max-width:760px){.wordmark{min-height:44px}.brand-workspace{font-size:12px;letter-spacing:1px}.mobile-sample-link{min-height:44px}.landing .eyebrow,.demo-heading .eyebrow,.upload-hint,.landing .file-types,.stage-title,.stage-title span:last-child,.stage-caption,.demo-footnote,.sample-playback p,.sample-steps small,.local-banner,footer,footer>div>span{font-size:12px}footer .footer-links{width:100%;padding-right:60px;box-sizing:border-box}footer .footer-link{display:inline-flex;align-items:center;min-height:44px}}
/* B4-6a The notification dot and its count stay inside the viewport and below the status bar. */
@media(max-width:760px){.auto-glance{top:calc(12px + env(safe-area-inset-top))}.auto-glance .auto-fault-count{top:-2px;right:-2px}}
/* B4-6d The compact Genie sits in a reserved slot at the right of the bottom bar, so it never covers page content. */
@media(max-width:640px){body:has(>.genie-launch):not(:has(nav[aria-label="Operator destinations"])) .mobile-nav{padding-right:calc(66px + env(safe-area-inset-right))}body:has(.mobile-nav) .genie-launch{bottom:calc(11px + env(safe-area-inset-bottom));z-index:31}body:has(>.genie-launch) .site-wrap:has(+ .mobile-nav){padding-bottom:calc(var(--mobile-bar) + env(safe-area-inset-bottom) + 16px)}}