/* app/phone.css — phone-only layout (Phase 3 of apple app.txt).
   Applies ONLY under html.phone, set before first paint by the inline script in index.html's <head>
   (touch screen whose short side is <= 600 px: every iPhone, never an iPad, never desktop).
   Every selector here MUST start with "html.phone" — scripts/test-phone-layout.mjs enforces it,
   so this file can never change desktop or iPad. */

/* ── Jobs (dashboard) ─────────────────────────────────────────────────────────
   Search first, then your jobs, most recent first. Portfolio stats and the activity widgets are a
   desktop overview; on a phone they pushed the job list two screens down. */
html.phone #dash #main-content { display: flex; flex-direction: column; padding-top: 10px; }
html.phone #dash .db-hero { order: 0; margin-bottom: 6px; padding-bottom: 0; border-bottom: 0; }
html.phone #dash .db-hero .db-cmd-label { font-size: 20px; }
html.phone #dash .db-filter-row { order: 1; margin: 0 0 10px; }
html.phone #dash #dbContinue { order: 2; }
html.phone #dash .dash-tabs { order: 3; margin-bottom: 10px; }
html.phone #dash #jg { order: 4; }
html.phone #dash #co-banner-wrap { order: 5; margin-top: 8px; }
html.phone #dash #dashStats,
html.phone #dash #dbWidgets { display: none !important; }
html.phone #dash .db-search { min-height: 44px; font-size: 16px; }   /* 16px: no iOS zoom-on-focus */
html.phone #dash .db-sort { min-height: 44px; }

/* Compact job rows: name, number, sheets + updated, and the "…" menu. */
html.phone #dash #jg { display: flex; flex-direction: column; gap: 8px; }
html.phone #dash .jcard { padding: 12px 14px !important; border-radius: 12px; }
html.phone #dash .jcard .statsbar,
html.phone #dash .jcard .jcard-grip { display: none !important; }
html.phone #dash .jcard .jname { font-size: 17px; line-height: 1.25; }
html.phone #dash .jcard .jnum { font-size: 12px; margin-top: 2px; }
html.phone #dash .jcard .jmeta { margin-top: 6px; }
html.phone #dash .jcard .jacts-more { min-width: 44px; min-height: 44px; }
/* !important: the dark theme forces .jnew to 140px with !important. */
html.phone #dash .jnew { min-height: 52px !important; flex-direction: row !important; gap: 8px; border-width: 1px !important; font-size: 15px; }
html.phone #dash .jnew .jnew-icon { width: 28px; height: 28px; font-size: 18px; }
html.phone #dash .jnew span + span { display: none; }

/* ── Job page ─────────────────────────────────────────────────────────────────
   Plan sets first (that is what people open the job for), then offline, reports, issues, photos. */
html.phone #job-detail .jd { display: flex; flex-direction: column; }
html.phone #job-detail .jd-head { order: 0; padding: 8px 0 4px !important; }
html.phone #job-detail .jd-head h1 { font-size: 24px !important; }
html.phone #job-detail .jd-plans-head { order: 1; margin: 10px 0 8px !important; }
html.phone #job-detail .jd-plans { order: 2; }
html.phone #job-detail .jd-offline { order: 3; margin: 6px 0 12px !important; }
html.phone #job-detail .jd-daily { order: 4; padding: 10px 14px !important; }
html.phone #job-detail .jd-issues { order: 5; }
html.phone #job-detail .jd-prod { order: 6; }
html.phone #job-detail .jd-team { order: 7; }
html.phone #job-detail .jd-share { order: 8; }
html.phone #job-detail .photo-section { order: 9; }
html.phone #job-detail .ew-desktop-only { order: 10; }

html.phone #job-detail .jd-stats,
html.phone #job-detail .jd-tip,
html.phone #job-detail .jd-newjob,
html.phone #job-detail .jd-addset { display: none !important; }
html.phone #job-detail .jd-addpdf { padding: 8px 12px !important; min-height: 44px; }

/* Plan-set rows: one line, one "…" for rename / restore / delete. */
html.phone #job-detail .plan-card { padding: 12px 10px 12px 14px !important; min-height: 60px; margin-bottom: 8px; }
html.phone #job-detail .plan-card .plan-actions,
html.phone #job-detail .plan-card .plan-arrow { display: none !important; }   /* tapping the card opens it */
html.phone #job-detail .plan-card .plan-name { font-size: 16px; }
html.phone #job-detail .plan-card .plan-more { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ── Plan viewer (classic) ────────────────────────────────────────────────────
   Thin top bar: Back, previous / sheet button / next, More. The sheet button shows the sheet name
   and opens the sheet list. Everything else is in More (Fit sheet and Undo added there on phones). */
html.phone #vh > :not(.back):not(#btnPrev):not(#pglbl):not(#btnNext):not(#vhMoreBtn):not(#offlinePill):not(#vhMoreMenu):not(#vhMoreBackdrop):not(input) { display: none !important; }
html.phone #vh { gap: 6px !important; }
html.phone #vh #vhMoreBtn { display: inline-flex !important; min-width: 44px; min-height: 44px; }
html.phone #vh #btnPrev,
html.phone #vh #btnNext { min-width: 44px; min-height: 44px; }
html.phone #vh #pglbl { flex: 1 1 auto; min-width: 0; max-width: none; min-height: 40px; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
html.phone #vh #pglbl { min-height: 44px; }
html.phone #vhMoreMenu .vh-phone-only { display: inline-flex !important; }
/* The edge tab only while the sheet list is open (then it closes it); the sheet button opens it. */
html.phone #viewer .vbody.sidebar-closed #sbtog { display: none !important; }
html.phone #dash .jcard .jnum-empty { display: none; }

/* ── Phase 2 polish (apple app.txt 17-B2/B5/B6, 21-D4) ───────────────────────── */
/* Desktop-only commands stay on desktop and iPad: exports, print, compare, scale, shortcuts,
   rotate-all, Field Mode (the phone layout is field mode), replacing / appending PDFs. */
html.phone #vhMoreMenu .vh-desk-only,
html.phone #viewer #btnAddSheets { display: none !important; }
/* One loading indicator: the corner "Loading sheet N..." pill; no second one in the middle. */
html.phone #ca.viewer-loading #cw::after,
html.phone #ca.viewer-loading #cw::before { display: none !important; }
/* Report a problem: the description and Send stay above the keyboard; screenshot below, smaller. */
html.phone #shakeModal > div { display: flex; flex-direction: column; max-height: calc(var(--app-h, 100dvh) - 12px) !important; padding-bottom: 16px !important; }
html.phone #shakeModal .mrow { order: 1; }
html.phone #shakeModal .mbtns { order: 2; margin-top: 10px !important; }
html.phone #shakeModal #shakePreview { order: 3; margin: 12px 0 0 !important; max-height: 26vh; }
html.phone #shakeModal #shakePreview img { max-height: 24vh; width: auto; object-fit: contain; }

/* "No scale" under the sheet name (2026-10-20). */
html.phone #vh #pglbl.no-scale { flex-direction: column; line-height: 1.05; gap: 1px; }
html.phone #vh #pglbl .pg-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.phone #vh #pglbl .pg-noscale { font-size: 11px; font-weight: 700; color: #F59E0B; letter-spacing: .02em; }

/* Loading placeholders shaped like the real phone rows, so nothing jumps when data arrives (2026-10-20). */
html.phone #dash .jcard.sk-card { min-height: 87px; padding: 12px 14px; justify-content: center; gap: 10px; }
html.phone #dash .jcard.sk-card .sk-chips { display: none !important; }
html.phone #job-detail .jd-stats-sk { display: none !important; }

/* Polish pass 2026-10-20 (E): toasts never sit on the tool bar; readable text; no tiny labels. */
html.phone #toast { font-size: 14px; }
html.phone body:has(#viewer.on) #toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 64px); transform: translateX(-50%) translateY(-12px); }
html.phone body:has(#viewer.on) #toast.on { transform: translateX(-50%) translateY(0); }
html.phone #dash .jcard .jmeta-none { font-size: 12px; }
html.phone #jdOffline { margin: 8px 12px 0; padding: 10px 12px; border-radius: 10px; background: rgba(234,179,8,.12); border: 1px solid rgba(234,179,8,.45); color: var(--txt, #f2ebe0); font-size: 14px; line-height: 1.4; }
html.phone #jdOffline { display: block; }
/* The iPhone Safari "Add to Home Screen" banner sat over bottom-sheet buttons (Next / Apply / Save). */
html.phone body:has(#mo.on) #ios-install-banner { display: none !important; }