/** * css/agent-tablet.css — iPad layout system for the Royal LePage Turner * Realty AGENT backend (Mobile + iPad review, Part 2 / PR-5, 2026-09-17). * * Loaded fleet-wide (well, Gander-only — this backend is Gander-only) on * EVERY agent page, right after css/agent.css: Hub, Dashboard, Deals, CMA, * Registry, Market, Talking Points, Explaining the Market, Office, Document * Review. It is safe to load on every page even where a page's structural * work is deferred to a later PR (Deals' two-pane layout is PR-6, Document * Review's panes/verdict bar are PR-7) — everything in this file is either * a `pointer:coarse`/`hover:none` baseline (harmless everywhere) or scoped * to a specific page's real ids/classes, so it is a no-op on pages it * doesn't target. * * Tokens: same var()-with-literal-fallback pattern js/agent-shell.js and * css/agent.css already use (--bg #0a0a0a, --panel #18181b, --panel-2 * #212126, --border #2a2a2e, --text-dim #a0a0a8, --accent #EA002A) — this * file does NOT assume css/agent.css is also loaded (agent/dashboard.html's * generator template does NOT load it; the dashboard defines its own * identical inline token set instead), so every custom property reference * below carries its own literal fallback. * * --navh: agent/dashboard.html's own inline script (setNavH(), 2026-08-20 * mobile pass) already keeps `--navh` on in sync with the live * AgentShell nav's real height, for its mobile sticky viewbar. No other * agent page sets this variable. Real measured .ash-nav height (2026-09-17, * headless probe against the real agent-shell.js + real fonts, both at * 768px and 1024px once the nav-wrap fix below is applied): 53px. Every * sticky-header rule below reads `var(--navh, 56px)` — the live value on * the Dashboard, a 3px-safe fallback everywhere else — so a sticky table * header never overlaps the nav (Convention: "a sticky header that * overlaps the nav is a real bug"). */ /* ── Real pre-existing bug fix, required for the sticky-header math above to hold: .ash-nav (js/agent-shell.js) is `display:flex;flex-wrap:wrap`, and the flex line-breaking algorithm lays out .ash-links (flex:1 1 auto) using its CONTENT width, not its post-shrink width -- so at exactly 768px the identity control ("Miketurner ▾") gets pushed onto a second line, doubling the nav's real height from 53px to 92px (confirmed via a headless probe against the real file, both before and after this fix). .ash-links already has min-width:0 and its own overflow-x:auto scroller built for exactly this squeeze -- flex-basis:0 makes the line-breaking algorithm size it as "0" instead of "full content", so the row always fits on one line and the existing horizontal-scroll affordance takes over instead of wrapping. CSS-only; js/agent-shell.js is untouched (PR-3 owns that file). !important matches this file's other override of JS-injected nav CSS below (the standalone safe-area padding) and the dashboard's own existing pattern (.mb-ctl{font-size:16px!important}). */ @media (min-width: 768px) { .ash-links { flex-basis: 0 !important; } } /* ══════════════════════════════════════════════════════════════════════ 1. Foundational rules — tap targets, hover-only cues, standalone hooks ══════════════════════════════════════════════════════════════════════ */ /* Every interactive element on an agent page gets a real touch target on a touch device, regardless of viewport width (a phone in one hand at a showing needs this exactly as much as an iPad). */ @media (pointer: coarse) { .ash-links a, .ash-idbtn, .viewbar button, .ag-tile, .dx-btn, .dx-chip, .chip, .reg-chip, .reg-linkbtn, th.sortable, table.rowlink tbody tr, button:not(.reg-clear), a.cma-btn, a.hub-btn, a.reg-btn, a[class*="btn"] { min-height: 44px; } .ash-links a, .dx-btn, .dx-chip, .chip, .reg-chip, th.sortable, button:not(.reg-clear) { display: inline-flex; align-items: center; } th.sortable { padding-top: 12px; padding-bottom: 12px; } /* iOS Safari auto-zooms on focus for any text input under 16px and never zooms back out -- and gives it a comfortable tap height. Excludes checkbox/radio/range/color, which must stay their native small size. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px; min-height: 40px; } } /* Hover-only affordances that convey real information get a persistent touch-visible equivalent (a background tint doubles as the affordance here, per this PR's own instructions). Scoped to the exact rules found by grepping :hover across css/agent.css, agent/office.html, agent/registry.html and agent/cma.html -- most hits there are decorative (a button darkening, a chip's border tinting) or already have a static, always-visible affordance (.cma-prior-card's "Use these details →" line, .ag-tile's "Open ... →" line) so are left alone; these two are the ones that lose real information (this row is the clickable target) on a device with no hover at all. */ @media (hover: none) { .reg-results li { position: relative; padding-right: 30px; } .reg-results li::after { content: "\203A"; /* › */ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1; color: var(--text-dim, #a0a0a8); } .reg-vtable .lookup { text-decoration: underline; } } /* Standalone-chrome hooks (inert until PR-3 merges and starts setting data-app-mode + registering the 56px tab bar -- CSS-only, no matching markup exists yet, so this is a documented no-op today). Exact contract PR-3 is building to: html[data-app-mode="standalone"], .ash-nav, 56px. */ html[data-app-mode="standalone"] .ash-nav { padding-top: env(safe-area-inset-top, 0); } html[data-app-mode="standalone"] body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); } /* ══════════════════════════════════════════════════════════════════════ 2. Utility classes for this PR and later ones (PR-6 Deals, PR-7 Review) ══════════════════════════════════════════════════════════════════════ */ /* Generic scroll-wrap + sticky header, for any table not already covered by the dashboard's own .tblwrap mechanism (agent/dashboard.html wraps every .dash table in .tblwrap via JS at render time -- see §4 below, which targets .tblwrap directly rather than duplicating that JS). Apply .ag-tblwrap to a wrapping
around any other page's . */ .ag-tblwrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ag-tblwrap thead th { position: sticky; top: var(--navh, 56px); z-index: 5; background: var(--panel, #18181b); } /* Sticky first column -- opt in with .ag-tblwrap--pin1 alongside .ag-tblwrap on the same wrapper. Solid background so scrolled content doesn't show through behind the pinned column. */ .ag-tblwrap--pin1 table thead th:first-child, .ag-tblwrap--pin1 table tbody td:first-child, .ag-tblwrap--pin1 thead th:first-child, .ag-tblwrap--pin1 tbody td:first-child { position: sticky; left: 0; z-index: 4; background: var(--panel, #18181b); } .ag-tblwrap--pin1 thead th:first-child { z-index: 6; } /* Opt-in responsive card-stacking for a
at the 768-1023 tablet tier only -- reuses the EXACT mechanism agent/dashboard.html's own table.stackable already uses at <=560px (tools/build-agent-dashboard.py TEMPLATE), just re-scoped to the ag-stack marker and the tablet width range instead of duplicating a second, drifting copy of the same idea. At 1024+, ag-stack tables fall through to the ordinary sticky-header table treatment instead (no stacking) -- deliberately NOT repeated in the >=1024 tier below. */ @media (min-width: 768px) and (max-width: 1023px) { table.stackable.ag-stack, table.stackable.ag-stack tbody, table.stackable.ag-stack tr, table.stackable.ag-stack td { display: block; width: 100%; } table.stackable.ag-stack thead { display: none; } table.stackable.ag-stack tr { border: 1px solid var(--border, #2a2a2e); border-radius: var(--r-sm, 6px); padding: 10px 12px; margin-bottom: 8px; background: var(--panel, #18181b); } table.stackable.ag-stack tr.me { border-color: var(--accent, #EA002A); } table.stackable.ag-stack td { border: none; padding: 2px 0; white-space: normal; } table.stackable.ag-stack td::before { content: attr(data-l); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim, #a0a0a8); } table.stackable.ag-stack td:empty::before { content: none; } } /* ══════════════════════════════════════════════════════════════════════ 3. Hub tier (agent/index.html) ══════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) and (max-width: 1023px) { .ag-tiles-grid { grid-template-columns: repeat(2, 1fr); } /* "today strip" -> 2x2, scoped to the Hub's own strip only (#hub-strip) so Office's/Deals' identical-looking .dd-strip, built by the same shared DealsDash.render() component, is unaffected -- neither of those pages' tiers in this PR ask for a 2x2 strip. */ #hub-strip .dd-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; } #hub-strip .dd-strip > div { padding: 2px 0; } } @media (min-width: 1024px) { .ag-tiles-grid { grid-template-columns: repeat(3, 1fr); } } /* ══════════════════════════════════════════════════════════════════════ 4. Dashboard tier (tools/build-agent-dashboard.py TEMPLATE + agent/dashboard.html) ══════════════════════════════════════════════════════════════════════ */ /* The sticky segmented-control viewbar was @media(max-width:768px)-only (tools/build-agent-dashboard.py TEMPLATE inline