/* Mobile App, turns 2a/2b/2c. Theme, type, motion and controls inherit the shared app system. */
.mobile-only { display:none; }
.mobile-new-job-note { display:none; }
textarea#prompt { resize:none; padding-block:10px; line-height:20px; height:40px; white-space:nowrap; }
.mobile-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mobile-action-list { display:flex; flex-direction:column; gap:12px; }
@media (max-width:700px) {
  .app { overflow:hidden; }
  .mobile-only { display:block; }
  .desktop-only { display:none; }
  .app > .body { min-height:0; }
  .nav .menu, .nav .avatar, .panel, .panel-backdrop { display:none; }
  .mobile-help, .mobile-icon, #mobileMore, .viewer #vClose { min-width:0; }
  .mobile-help { width:44px; height:44px; border:1.5px solid var(--border); border-radius:50%; text-decoration:none; font-weight:700; font-size:18px; flex:none; }
  .nav { min-height:64px; }
  /* Panel 2a: a 22px circle inside the balance pill, with the shared 44px invisible hit area. */
  .credits .add { width:22px; height:22px; min-height:22px; }
  .mobile-nav { display:grid; grid-template-columns:repeat(4,1fr); flex:none; background:var(--card); border-top:1px solid var(--divider); padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  .mobile-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:52px; font-size:12px; color:var(--muted); border-radius:var(--r-md); }
  .mobile-nav button svg { width:20px; height:20px; }
  .mobile-nav button.on { color:var(--accent); background:var(--accent-tint); }
  .main { overflow-y:auto; overflow-x:hidden; padding-bottom:0; gap:14px; }
  .main > * { flex-shrink:0; }
  .main .gridwrap { flex:0 0 auto; min-height:auto; overflow:visible; }
  .mobile-jobs { padding-bottom:20px; }
  .mobile-jobs .mobile-heading { margin:2px 0 18px; }
  .mobile-jobs .input { width:100%; margin-bottom:12px; }
  .mobile-jobs .pills { margin-bottom:18px; }
  .mobile-job { display:flex; align-items:center; gap:12px; padding:16px 0; width:100%; text-align:left; white-space:normal; border-bottom:1px solid var(--divider); }
  .mobile-job img, .mobile-job-placeholder { width:76px; height:76px; object-fit:cover; border-radius:12px; flex:none; background:var(--surface); }
  .mobile-job-placeholder { display:grid; place-items:center; color:var(--muted); font-size:28px; }
  .mobile-job > span:nth-child(2) { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
  .mobile-job b { font-size:16px; }
  .mobile-job small { color:var(--muted); font-size:12px; }
  .mobile-job small.needs-review { color:var(--accent); }
  .mobile-browsing .main > :not(#mobileJobs):not(#systemNotice):not(#boot) { display:none !important; }
  .mobile-overview .main > :not(#mobileJobOverview):not(#systemNotice):not(#boot) { display:none !important; }
  .mobile-job-overview { flex:1; display:flex; flex-direction:column; min-height:100%; }
  .mobile-overview > .nav { display:none; }
  .mobile-job-heading { margin:0 -4px 20px; min-height:52px; gap:8px; }
  .mobile-job-heading > div { flex:1; min-width:0; }
  .mobile-job-overview h2 { margin:0 0 5px; font-size:18px; overflow-wrap:anywhere; }
  #mobileJobMeta { margin:0; font-size:11px; }
  .mobile-icon { width:44px; flex:none; padding:0; font-size:22px; text-decoration:none; }
  #mobileSetCards { display:flex; flex-direction:column; gap:12px; }
  .mobile-set-card { width:100%; display:flex; align-items:center; gap:12px; padding:12px; background:var(--surface); border-radius:16px; text-align:left; white-space:normal; }
  .mobile-set-open { flex:1; min-width:0; display:flex; align-items:center; gap:12px; text-align:left; white-space:normal; }
  .mobile-set-chevron { flex:none; color:var(--muted); }
  .mobile-set-card img, .mobile-set-placeholder { width:64px; height:64px; object-fit:cover; border-radius:12px; background:var(--surface); flex:none; }
  .mobile-set-placeholder { display:grid; place-items:center; color:var(--muted); font-size:24px; }
  .mobile-set-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; overflow-wrap:anywhere; }
  .mobile-set-copy b { font-size:15px; }
  .mobile-set-copy small { color:var(--muted); font-size:12px; line-height:1.5; }
  .mobile-set-copy .spin { display:inline-block; vertical-align:middle; margin-right:5px; }
  .mobile-set-copy .needs-review { color:var(--accent); }
  .mobile-set-copy .needs-attention { color:var(--warn-fg); }
  .mobile-set-action { display:flex; align-items:center; justify-content:center; flex:none; min-height:44px; min-width:44px; padding:0 18px; border-radius:var(--r-pill); background:var(--surface); font-weight:600; font-size:13px; white-space:nowrap; }
  .mobile-set-action.review { background:var(--accent-fill); color:var(--on-accent); }
  .mobile-set-action.edit { border:1.5px solid var(--border); background:transparent; }
  #mobileOverviewAdd { align-self:center; margin:12px 0 20px; }
  #mobileJobRunBar { position:sticky; bottom:0; margin-top:auto; padding:12px 0 max(12px,env(safe-area-inset-bottom)); background:var(--bg); }
  #mobileJobRunNotice { margin:0 0 10px; }
  #mobileJobPrimary { width:100%; min-height:52px; height:auto; padding:12px 20px; white-space:normal; }
  #mobileJobActionsDialog .dlg { gap:16px; }
  #mobileJobStatus .statusmenu { position:static; width:100%; margin-top:8px; }
  .jobhead h4 { white-space:normal; overflow-wrap:anywhere; }
  .jobhead .meta { max-width:100%; white-space:normal; font-size:11px; }
  .jobhead #reset { display:none; }
  .jobhead-actions { flex-wrap:wrap; justify-content:flex-end; }
  .jobhead-actions .btn, .statuspill { min-height:44px; }
  .toolbar { gap:10px; }
  .toolbar > .row { gap:8px; padding:0; border:0; background:transparent; }
  .toolbar .promptwrap { flex:1 1 100%; min-width:0; }
  .toolbar #prompt { height:64px; min-height:64px; max-height:112px; font-size:16px; line-height:22px; padding:10px 40px 10px 12px; white-space:pre-wrap; overflow:auto; }
  .promptclear { width:44px; height:44px; top:2px; right:0; transform:none; }
  .toolbar .modelpick { flex:1 1 100%; width:100%; }
  .toolbar #provider { width:100%; height:44px; font-size:16px; }
  .mobile-warning { width:100%; padding:12px; border-radius:var(--r-md); background:var(--warn-bg); color:var(--warn-fg); font-size:13px; }
  .mobile-warning .btn { margin-top:10px; }
  .model-mismatch { width:100%; padding:12px; border-radius:var(--r-md); font-size:13px; }
  .model-mismatch .btn { min-height:44px; }
  .presets { scroll-snap-type:x proximity; }
  .presets .preset { scroll-snap-align:start; min-width:60px; }
  .presets .add { display:none; }
  .action-bar { position:sticky; bottom:0; margin:0 -12px; padding:10px 12px max(10px,env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--divider); z-index:9; }
  .action-bar #steps { display:none; }
  #mobileLadder { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0 0 10px; padding:0; gap:5px; counter-reset:step; }
  #mobileLadder li { font-size:10px; color:var(--muted); border-top:3px solid var(--track); padding-top:4px; counter-increment:step; }
  #mobileLadder li::before { content:counter(step) '. '; }
  #mobileLadder li.on { color:var(--accent); border-color:var(--accent); font-weight:700; }
  .mobile-run-actions { display:flex; gap:8px; }
  #mobilePrimary { flex:1; min-width:0; min-height:52px; height:auto; padding:12px 20px; font-size:14px; line-height:1.3; white-space:normal; }
  #mobilePrimary .tag { flex:none; }
  #mobileMore { width:52px; min-height:52px; flex:none; padding:0; font-size:22px; }
  #mobileStop { min-height:52px; padding:0 20px; }
  #mobileRunNotice { margin:0 0 10px; overflow-wrap:anywhere; }
  #mobileExportProgress { width:100%; height:6px; margin-bottom:10px; accent-color:var(--accent-fill); }
  #mobileSelection { margin:8px 0 0; }
  .empty { padding:10px 0; }
  .empty h2 { font-size:22px; }
  .dropzone { padding:24px 16px; }
  .dropzone .hint { white-space:normal; text-align:center; }
  .btn, .seg button, .pills button, .seg2 button { min-height:44px; }
  .btn-secondary { border-width:1.5px; }
  .card .head .btn-icon.h24 { width:44px; }
  .card .head { flex-wrap:wrap; }
  .card .head .fn { flex:1 1 80px; }
  .card .make-main { display:inline-flex; }
  .card .xdel { opacity:1; }
  .card .head .main-price { display:none; }
  /* The pair fills the card here, so the grid takes the whole width and both tracks stay equal. A button that
     goes full width drops its radius: a stretched pill is exactly what the pass removes. Decision controls stay
     at the 52px touch size the mobile spec sets, above the 44px floor. */
  .card:not(.ghost) .foot .acts { width:100%; min-width:0; }
  .card .foot .acts .btn { min-height:52px; min-width:0; height:auto; padding:10px; white-space:normal; line-height:1.3; border-radius:10px; }
  .dlg-actions > .btn { min-height:52px; padding-inline:20px; }
  .input, select.input, textarea { font-size:16px; }
  .mobile-account { max-width:820px; margin:auto; padding-bottom:20px; }
  #mobileAccountWho { color:var(--muted); overflow-wrap:anywhere; }
  .mobile-value-row { width:100%; display:flex; gap:12px; align-items:center; min-height:60px; padding:12px 4px; text-align:left; border-bottom:1px solid var(--divider); color:var(--text); }
  .mobile-value-row b { flex:1; font-weight:500; }
  .mobile-value-row span { color:var(--muted); font-size:13px; }
  #settingsPane > .pane-wrap { display:none; }
  #mobileSettingsContent .s-sec { padding:8px 0 16px; box-shadow:none; }
  #mobileSettingsContent.single-section .s-head h5 { display:none; }
  #mobileSettingsContent .s-row { flex-wrap:wrap; }
  #mobileSettingsContent .s-row .input { width:100% !important; min-height:44px; }
  #mobileSettingsContent .seg { flex-wrap:wrap; }
  #mobileSettingsContent #setMeta { overflow-wrap:anywhere; }
  #mobileSettingsContent #setStructure:has(.opt:disabled) { opacity:.7; }
  /* Every dialog is a bottom sheet lifted above the software keyboard — except sign-in, which is a page: lifting a
     top-aligned page by the keyboard height jammed the field against the status bar over a void (Josh, iPhone,
     2026-09-22). The page keeps its top and scrolls, with the keyboard's height as bottom padding so the field can
     still be brought above it. */
  dialog:not(.auth) { position:fixed; inset:auto 0 var(--keyboard-inset,0px); margin:0; width:100%; max-width:none; max-height:calc(100dvh - var(--keyboard-inset,0px) - 20px); overflow:auto; overscroll-behavior:contain; border-radius:24px 24px 0 0; background:var(--card); }
  dialog.auth[open] { position:fixed; inset:0; height:auto; overflow:auto; overscroll-behavior:contain; padding-bottom:calc(24px + var(--keyboard-inset,0px)); }
  dialog .dlg, #jobDialog .dlg, #quoteDialog .dlg { width:100% !important; max-width:none; padding:20px 18px max(20px,env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; box-shadow:none; }
  .dlg .two { grid-template-columns:1fr; }
  /* The sheet already scrolls; a second scroll area inside it is hard to use with a thumb. */
  .expick { max-height:none; overflow:visible; }
  #jobForm.new-job label:has([name="date"]), #jobForm.new-job label:has([name="client"]) { display:none; }
  #jobForm:not(.new-job) .mobile-new-job-note { display:none; }
  .dlg-actions { flex-wrap:wrap; }
  .dlg-actions > .btn-primary { flex:1; }
  .dlg label .input { min-height:44px; }
  #diagnosticsDialog { padding:18px; }
  .c-packs { grid-template-columns:1fr; }
  .c-pack { display:flex; gap:12px; align-items:center; flex-wrap:wrap; text-align:left; }
  .c-pack .f { flex:1; }
  #credLedger table, #credLedger tbody { display:block; width:100%; }
  #credLedger thead { display:none; }
  #credLedger tr { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:14px 0; border-bottom:1px solid var(--divider); }
  #credLedger td { display:block; padding:0; border:0; }
  #credLedger .what { grid-column:1; grid-row:1; white-space:normal; }
  #credLedger .when { grid-column:1; grid-row:2; font-size:12px; }
  #credLedger .amt { grid-column:2; grid-row:1; }
  #credLedger .m { grid-column:2; grid-row:2; font-size:11px; }
  #credLedger .m::before { content:'Balance '; }
  .viewer { padding:0; isolation:isolate; }
  .viewer .v-stage { position:absolute; inset:0; min-height:0; }
  .viewer .v-scroll { min-width:0; width:100%; height:100%; touch-action:none; overscroll-behavior:contain; }
  .viewer .v-scroll.zoomed { display:grid; align-items:center; justify-content:safe center; }
  .viewer .v-stack { touch-action:none; }
  /* Photo comparison owns the long press. Suppress Safari selection/callouts on the
     actual images and labels too, without cancelling card scrolling or viewer gestures. */
  .viewer .v-scroll, .viewer .v-scroll *, .card .pair, .card .pair *, #mobileOriginalHint {
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
  }
  .card .pair img { -webkit-user-drag:none; }
  .viewer .v-top { position:absolute; top:0; left:0; right:0; z-index:3; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:start; gap:8px; padding:calc(12px + env(safe-area-inset-top)) 12px 28px; background:linear-gradient(#0b0d11d9, #0b0d1180 65%, transparent); border:0; pointer-events:none; }
  .viewer .v-top > * { pointer-events:auto; }
  .viewer .v-heading { grid-column:2; grid-row:1; width:auto; min-height:44px; display:block; }
  .viewer .v-title { display:flex; flex-direction:column; align-items:flex-start; gap:5px; white-space:normal; }
  .viewer .v-title #vName { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
  .viewer .v-title #vDims { max-width:100%; font-size:10px; line-height:1.4; color:#c3c9d6; }
  .viewer .v-review-state, .viewer .v-bottom { display:none; }
  .viewer .v-top > .v-actions { position:static; grid-column:1; grid-row:1; }
  .viewer #vClose { width:44px; height:44px; padding:0; border-radius:var(--r-pill); background:#0b0d1180; color:#fff; }
  .viewer #vZoom { grid-column:3; grid-row:1; border:0; background:#0b0d1180; color:#fff; font-size:13px; }
  #mobileZoomScale { grid-column:2; grid-row:2; align-self:center; justify-self:start; background:#0b0d1180; border-radius:var(--r-pill); padding:8px 12px; font-size:13px; font-variant-numeric:tabular-nums; }
  #mobileVersions { grid-column:2 / 4; grid-row:2; justify-self:end; display:inline-flex; height:44px; font-size:12px; padding:0 18px; background:#0b0d1180; color:#E8EAF0; }
  .viewer .v-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; min-width:44px; padding:0; display:grid; place-items:center; color:#fff; background:#0b0d1180; border-radius:var(--r-pill); }
  .viewer #vPrev { left:8px; } .viewer #vNext { right:8px; }
  .viewer .v-nav:disabled { visibility:hidden; }
  .viewer .sbadge { top:calc(124px + env(safe-area-inset-top)); min-height:44px; z-index:2; }
  #mobileViewerBottom { display:flex; flex-direction:column; gap:10px; position:absolute; z-index:3; bottom:0; left:0; right:0; padding:36px 12px max(12px,env(safe-area-inset-bottom)); background:linear-gradient(transparent, #0b0d11d9 35%); pointer-events:none; }
  #mobileViewerBottom > * { pointer-events:auto; }
  #mobileViewerModes { align-self:center; }
  #mobileViewerModes .seg2 { display:flex; gap:2px; padding:3px; height:44px; border:0; border-radius:var(--r-pill); background:#0b0d1180; }
  #mobileViewerModes [data-vmode="compare"] { display:none; }
  #mobileViewerModes .seg2 button { min-height:38px; height:38px; padding:0 18px; border-radius:var(--r-pill); font-size:13px; color:#E8EAF0; }
  #mobileViewerModes .seg2 button.on { background:#fff; color:#14171D; }
  #mobileViewerNotice { margin:0; color:#c3c9d6; font-size:12px; line-height:1.5; text-align:center; }
  #mobileReviewActions { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
  #mobileReviewActions .btn { min-height:52px; height:auto; padding:12px 20px; font-size:14px; line-height:1.3; border-radius:var(--r-pill); white-space:nowrap; flex:none; }
  #mobileReviewActions #vApprove { flex:1; }
  #mobileReviewActions #vFinal { flex:1 0 100%; order:-1; white-space:normal; }
  .viewer #mobileReviewActions .btn-secondary { border:0; background:#e8eaf029; color:#E8EAF0; }
  .viewer #mobileReviewActions .btn-secondary:hover { background:#e8eaf03d; }
  .viewer.mobile-reviewed #vApprove svg { color:#E8EAF0; }
  #mobileViewerDownload { display:flex; justify-content:center; }
  #mobileViewerDownload:has(#vDownload[hidden]) { display:none; }
  .viewer #vDownload { min-height:44px; height:auto; padding:0 18px; background:transparent; border:0; color:#E8EAF0; font-size:14px; font-weight:500; text-decoration:none; }
  #mobileOriginalHint { display:none; position:absolute; top:calc(20px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:4; padding:6px 12px; border-radius:var(--r-pill); background:#0b0d1180; color:#fff; font-size:12px; white-space:nowrap; pointer-events:none; }
  .viewer .v-top, .viewer #mobileViewerBottom, .viewer .v-nav, .viewer .sbadge { transition:opacity 160ms ease; }
  .viewer.mobile-chrome-hidden .v-top, .viewer.mobile-chrome-hidden #mobileViewerBottom, .viewer.mobile-chrome-hidden .v-nav, .viewer.mobile-chrome-hidden .sbadge,
  .viewer.mobile-holding .v-top, .viewer.mobile-holding #mobileViewerBottom, .viewer.mobile-holding .v-nav, .viewer.mobile-holding .sbadge { opacity:0; pointer-events:none; }
  .viewer.mobile-chrome-hidden .v-top *, .viewer.mobile-chrome-hidden #mobileViewerBottom *, .viewer.mobile-holding .v-top *, .viewer.mobile-holding #mobileViewerBottom * { pointer-events:none; }
  .viewer.mobile-holding #mobileOriginalHint { display:block; }
  @media (prefers-reduced-motion:reduce) { .viewer .v-top, .viewer #mobileViewerBottom, .viewer .v-nav, .viewer .sbadge { transition:none; } }
  .mobile-version-row { display:flex; flex-direction:column; gap:6px; text-align:left; white-space:normal; width:100%; padding:14px; border:1.5px solid var(--border); border-radius:12px; margin-bottom:10px; }
  .mobile-version-row.on { border-color:var(--accent); background:var(--accent-tint); }
  .mobile-version-row span, .mobile-version-row small { color:var(--muted); font-size:12px; }
  #mobileAdvanced { margin-top:8px; }
  #mobileAdvanced summary { min-height:44px; padding:12px 0; cursor:pointer; }
  #mobileAdvancedControls { display:flex; flex-direction:column; gap:16px; }
  #mobileAdvancedControls .v-blend { display:flex; color:var(--text); min-height:44px; flex-wrap:wrap; }
  #mobileAdvancedControls .v-blend input { flex:1; min-width:100px; }
  #mobileAdvancedControls .pct { color:var(--text); }
  #mobileAdvancedControls #vBlendMode { min-height:44px; border:1.5px solid var(--border); border-radius:var(--r-pill); }
  .toasts { bottom:calc(86px + env(safe-area-inset-bottom)); left:12px; right:12px; width:auto; }
}
@media (hover:none) { [data-mobile-settings="keyboard"] { display:none; } }

/* Mobile App 2d: the photo owns the card; state and actions use the same 52px decision row. */
@media (max-width:700px) {
  .nav .mark { width:auto; height:32px; }
  .nav .brand { min-height:44px; display:flex; align-items:center; }
  .toolbar #prompt { max-height:none; overflow:hidden; }
  .toolbar .preset { flex:0 0 98px; width:98px; min-width:0; }
  .toolbar .preset.custom { flex:0 0 66px; width:66px; scroll-snap-align:none; }
  .toolbar .presets { scroll-padding-left:78px; }
  .toolbar .preset .l { max-width:100%; white-space:normal; overflow:visible; text-overflow:clip; }
  #mobileActionList [data-mobile-action], #mobilePhotoActionList [data-photo-delegate="hero"], #mobilePhotoActionList [data-photo-delegate="delimg"] { min-height:52px; }
  #droptile { display:none; }
  .card.is-main:not([data-selected]) { border-color:var(--border); }
  .card .head { flex-wrap:nowrap; gap:8px; padding:0 8px 0 12px; min-height:44px; }
  .card .head .fn { flex:1; font-size:14px; }
  .card .head .desktop-card-actions, .card .batch-check, .card .select-reason { display:none; }
  .card .head .main-tag { height:22px; padding:0 8px; }
  .card .pair { position:relative; display:block; aspect-ratio:16/9; background:#000; touch-action:pan-y; }
  .card .pair > .ph { position:absolute; inset:0; aspect-ratio:auto; }
  .card .pair > .ph:first-child { z-index:1; }
  .card .pair.has-edit > .ph:first-child { visibility:hidden; }
  .card .pair.has-edit > .ph:nth-child(2), .card .pair:has(.center.onDark, .center.fail) > .ph:nth-child(2) { z-index:2; }
  .card .pair.show-original > .ph:first-child, .card .pair.holding-original > .ph:first-child { visibility:visible; z-index:3; }
  .card .pair.has-edit .cap { display:none; }
  .card .pair img { object-fit:contain; pointer-events:none; }
  .card-compare-hint { position:absolute; z-index:4; bottom:10px; left:10px; height:28px; padding:0 12px; display:flex; align-items:center; border-radius:var(--r-pill); background:#0b0d119e; color:#fff; font-size:12px; pointer-events:none; transition:opacity 160ms var(--ease); }
  .compare-used .card-compare-hint { opacity:0; }
  .card-compare-toggle { position:absolute; z-index:4; top:8px; right:8px; height:44px; padding:0 18px; border-radius:var(--r-pill); background:#0b0d119e; color:#fff; font-size:13px; }
  .holding-original .card-compare-toggle { opacity:0; }
  .card .foot .acts .btn { padding:10px 20px; }
  .card .foot .acts .btn-secondary { border:0; background:var(--disc); color:var(--text); }
  /* Top-right belongs to the compare toggle on this viewport, so the state badge takes the opposite corner, and
     steps below the structure tag on the rare local build that renders one. */
  .card .badge { top:8px; right:auto; left:8px; }
  .card .ph:has(.stag) .badge { top:42px; }
  .viewer.mobile-reviewed #mobileReviewActions #vApprove { background:transparent; border:1.5px solid #ffffff50; }
  @media (max-width:360px) {
    .nav .mark { height:26px; }
    .card .foot .acts .btn { padding-inline:12px; }
  }
  @media (prefers-reduced-motion:reduce) { .card-compare-hint { transition:none; } }
}

@media (max-width:700px) {
  .toolbar #prompt { border-radius:var(--r-input); }
  .card .foot .acts .approval-toggle { flex:1; min-width:0; }
  .card .foot .acts .approval-toggle[aria-pressed="false"] { background:var(--disc); border-color:transparent; color:var(--text); }
  .card .foot .acts .approval-toggle[aria-pressed="true"] { background:transparent; border:1.5px solid var(--border); }
  #mobileReviewActions #vApprove { order:3; min-width:0; width:auto; flex:0 0 calc((100% - 8px) / 2); }
  #mobileReviewActions #vRedo { order:2; min-width:0; width:auto; flex:0 0 calc((100% - 8px) / 2); white-space:normal; padding-inline:12px; }
  #mobileReviewActions #vKeepOld { order:1; flex:0 0 calc((100% - 8px) / 2); }
  #mobileReviewActions:has(#vKeepOld:not([hidden])) #vRedo { order:0; margin-right:calc((100% + 8px) / 2); }
  .mobile-nav button svg { width:24px; height:24px; }
}

@media (max-width:700px) {
  .prompt-section { width:100%; }
  .toolbar .modelpick #provider { height:52px; }
  .card.resolved .foot .acts .approval-toggle { background:transparent; border:1.5px solid var(--border); }
}

/* The tray on a phone (Claude Design, Add-ons §3): full width, the label on its own line, the adds in a scrolling
   row at 44px, the inline 28px controls keeping their type but taking a 44px hit box, wrapped lines packing. */
@media (max-width: 700px) {
  .tray { width:100%; flex-direction:column; align-items:stretch; gap:8px; padding:10px 12px; }
  .tray::before { left:calc(var(--tray-caret, 137px) - 6px); }
  .tray-status { flex-wrap:wrap; }
  .tray[data-active="1"] .tray-status::after { display:none; }
  .tray > .recipe-adds { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .tray > .recipe-adds::-webkit-scrollbar { display:none; }
  .tray .recipe-adds .btn { flex:none; min-height:44px; }
  .tray .recipe-adds .full { display:none; } .tray .recipe-adds .short { display:inline; }
  .tray .h28 { position:relative; min-height:28px; }
  .tray .h28::after { content:''; position:absolute; inset:-8px 0; }
  .tray-inline { gap:0 4px; }
  .staging-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .staging-fields .pill { height:44px; width:100%; }
  .staging-actions { flex-wrap:wrap; }
  .tray-question { flex-direction:column; align-items:stretch; }
  .sky-field { width:100%; }
  .sky-seg { flex:1; height:auto; }
  .sky-seg button { flex:1 1 auto; min-width:0; min-height:44px; padding:0 8px; font-size:12px; white-space:nowrap; }
  .sky-seg .full { display:none; } .sky-seg .short { display:inline; }
}