/* ========================================================================= 📱 TÓIR ON A PHONE (Sean, 24 Sep 2026) 🔒 THIS WHOLE FILE IS LOADED WITH media="(max-width: 767.98px)" IN index.html, SO ABOVE 768px THE BROWSER DOES NOT APPLY ONE RULE OF IT. That is what keeps the desktop identical, structurally rather than by care: no rule in here can reach a desktop however it is written. It loads after styles.css, so a rule here beats a styles.css rule of equal specificity. ⚠️ DO NOT MOVE A RULE FROM HERE INTO styles.css, and do not put a desktop rule in here. The only phone things in styles.css are the `display: none` lines that keep the phone-only controls off a desktop. ========================================================================= */ :root { --m-safe-t: env(safe-area-inset-top, 0px); --m-safe-b: env(safe-area-inset-bottom, 0px); --m-safe-l: env(safe-area-inset-left, 0px); --m-safe-r: env(safe-area-inset-right, 0px); --m-pad: 12px; --m-bar: 56px; --m-tap: 44px; --ds-topbar-h: calc(var(--m-bar) + var(--m-safe-t)); /* 🔒 NOTHING UNDER 13px: every type token that resolved below 13px on a desktop is 13px here. Sizes set outside the tokens are floored further down, class by class, from what the phone probe measured. */ --ds-fs-row: 13.5px; --ds-fs-btn: 13px; --ds-fs-nav: 13px; --ds-fs-cap: 13px; --ds-fs-label-hero: 13px; --ds-fs-pill: 13px; --ds-fs-label: 13px; --ds-fs-cap-sm: 13px; --ds-fs-pill-sm: 13px; --ds-fs-hero: calc(28px * var(--ds-fs-scale)); --ds-btn-fs: 13px; --lv-fs: 1.1; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overscroll-behavior-y: none; } /* ---- the shell: a slim cream bar, the sidebar as a slide-over ----------- */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--ds-topbar-h); padding: var(--m-safe-t) max(var(--m-pad), var(--m-safe-r)) 0 max(4px, var(--m-safe-l)); background: var(--ds-cream); border-bottom: 1px solid var(--ds-line-dark-16); justify-content: flex-start; gap: 4px; pointer-events: auto; } .topquote { display: none !important; } .topbar .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--m-tap); height: var(--m-tap); padding: 0; flex: 0 0 auto; color: var(--ds-ink-dark); } .topbar .menu-toggle .lucide, .topbar .menu-toggle svg { width: 24px; height: 24px; color: var(--ds-ink-dark); } /* The logo in the bar is the sidebar's own cream-ground PNG, cropped to the emblem and the word (the file's margins are cream, like the bar). */ .topbar-logo { display: block; flex: 0 0 auto; width: 96px; height: 48px; padding: 0; border: 0; cursor: pointer; background: url("assets/toir-logo-cream.png") no-repeat center / contain; } .storage-badge { margin-left: auto; min-width: var(--m-tap); height: var(--m-tap); padding: 0 4px; border: 0; justify-content: center; gap: 0; color: var(--ds-ink-dark); } .storage-badge #storageLabel { display: none; } .storage-badge .dot, .storage-badge.cloud .dot { width: 10px; height: 10px; background: var(--ds-gold-deep); } .storage-badge:not(.cloud) .dot { background: var(--ds-ink-muted); } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; margin-top: 0; width: min(284px, 86vw); transform: translateX(-102%); transition: transform 0.25s var(--ease); overflow-y: auto; overscroll-behavior: contain; padding-top: var(--m-safe-t); padding-bottom: calc(16px + var(--m-safe-b)); padding-left: var(--m-safe-l); } .sidebar.open { transform: translateX(0); box-shadow: var(--ds-float-shadow); } .sidebar-flourish-shell { width: 100%; } .sidebar .brand-logo-img { height: 84px; } .sidebar .nav-item { min-height: 48px; } .nav-scrim { display: none; position: fixed; inset: 0; z-index: 55; background: var(--ds-scrim-058, rgba(0, 0, 0, 0.58)); } body.m-nav-open .nav-scrim { display: block; } body.m-nav-open { overflow: hidden; } .layout { display: block; min-height: calc(100vh - var(--ds-topbar-h)); } .layout > .content, .layout > .content[class] { padding: 14px max(var(--m-pad), var(--m-safe-r)) calc(28px + var(--m-safe-b)) max(var(--m-pad), var(--m-safe-l)) !important; width: 100%; max-width: 100vw; min-width: 0; } .content.has-bg::before { left: 0; } .section { max-width: 100% !important; min-width: 0; } .section-head { flex-wrap: wrap; } /* ---- banners and modals sit inside the screen -------------------------- */ .banner { top: calc(var(--ds-topbar-h) + 8px); left: var(--m-pad); right: var(--m-pad); max-width: none; transform: none; z-index: 70; } .modal-overlay { padding: calc(10px + var(--m-safe-t)) 10px calc(10px + var(--m-safe-b)) !important; } .modal { max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 24px - var(--m-safe-t) - var(--m-safe-b)); overflow-y: auto; } /* ---- form fields: 16px stops iOS zooming the page on focus -------------- */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } /* ---- tap targets: 44px on anything you press ---------------------------- */ /* `:is(#m-tap, *)` twice lifts the rule to (2,x,x) so it clears the desktop's own heavily-qualified button rules; `*` is what actually matches. */ :is(.content, .modal-overlay, .fire-dock, .dropdown-panel, .gmap-panel) :is(button, .btn, a.btn, select, [role="button"], input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])):is(#m-tap, *):is(#m-tap, *) { min-height: var(--m-tap) !important; } :is(.content, .modal-overlay, .fire-dock) :is(button, .btn, a.btn):is(#m-tap, *):is(#m-tap, *) { min-width: var(--m-tap) !important; } .content input[type="checkbox"], .modal-overlay input[type="checkbox"] { width: 22px; height: 22px; } /* ---- Dashboard ----------------------------------------------------------- */ #section-dash .dash2 * { overflow-wrap: break-word; } #section-dash .dash2-row, #section-dash .dash2-row[class] { grid-template-columns: minmax(0, 1fr) !important; } #section-dash .dash2-card { min-width: 0; max-width: 100%; } #section-dash .dash2-range { flex: 1 1 0; } #section-dash .dash2-ranges, #section-dash .dash2-top > :has(> .dash2-range) { display: flex; width: 100%; gap: 8px; } /* The hero is one full-width card: the photograph is a band across the top and the figures sit under it on the card's own ground, stacked. Nothing covers the photograph, and nothing on it has to be read. */ #section-dash .dash2-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; background: var(--ds-card); } #section-dash .dash2-hero-img { position: relative; inset: auto; height: 132px; flex: 0 0 auto; } #section-dash .dash2-hero .dash2-hero-grid { display: block; padding: 16px; } #section-dash .dash2-hero .dash2-hero-main { width: auto; padding: 0; } #section-dash .dash2-hero .dash2-hero-main::before { display: none; } #section-dash .dash2-hero .dash2-hero-grid, #section-dash .dash2-hero .dash2-hero-grid * { text-shadow: none !important; } #section-dash .dash2-dials { margin-top: 0; gap: 12px; align-items: baseline; } #section-dash .dash2-dials .dash2-cap { padding-bottom: 0; } #section-dash .dash2-hero-foot { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; } #section-dash .dash2-hero-foot > * { white-space: normal; font-size: 15px; } #section-dash .dash2-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ds-line-gold-16, rgba(255,255,255,.1)); width: 100%; } #section-dash .dash2-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; } #section-dash .dash2-stat .dash2-stat-v { font-size: 22px; } #section-dash .dash2-cap { white-space: normal; } #section-dash .dash2-dials-n { line-height: 1; } #section-dash .dash2-row-review .dash2-rev { min-height: 0; } #section-dash .dash2-row-review .dash2-rev.is-empty .dash2-rev-empty { min-height: 0; padding: 18px 0; } /* ---- Lead card: one column -------------------------------------------------- Hero (crumb, stage, address, key facts, the three outside links), then the actions as a wrapping two-column grid with Call across the top, then the contact panel (it already goes above the tabs below 1100px), then Overview / Activity / Notes. The hero's wrappers are `display: contents` so their children can be ordered; nothing moves in the markup. */ #section-inform .card.sales-record { padding: 0; border: 0; background: transparent; box-shadow: none; } #section-inform .card.sales-record .srec-hero, #section-inform .card.sales-record .srec-hero.has-bg { display: flex !important; flex-direction: column; gap: 14px; margin: 0 0 12px !important; padding: 14px 12px 16px !important; min-height: 0 !important; border-radius: 12px; overflow: visible; } #section-inform .card.sales-record .srec-hero > * { margin: 0 !important; min-width: 0; width: 100%; } #section-inform .card.sales-record .srec-topband, #section-inform .card.sales-record .srec-hero-actions { display: contents !important; } #section-inform .card.sales-record .srec-hero-top { order: 1; } #section-inform .card.sales-record .srec-topband-main { order: 2; padding: 0 !important; margin: 0 !important; min-width: 0; } #section-inform .card.sales-record .srec-keyfacts { order: 3; } #section-inform .card.sales-record .srec-topband-links { order: 4; } #section-inform .card.sales-record .srec-top-actions { order: 5; } /* crumb and record nav */ #section-inform .card.sales-record .lead-toprow { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } #section-inform .card.sales-record .sales-crumb { flex-wrap: nowrap; min-width: 0; } #section-inform .card.sales-record .sales-crumb .sales-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #section-inform .card.sales-record .lead-nav { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; min-width: 0; } #section-inform .card.sales-record .lead-nav > .btn { flex: 0 0 auto; } #section-inform .card.sales-record .lead-nav-right { display: flex; flex: 1 1 auto; gap: 6px; justify-content: flex-end; align-items: center; min-width: 0; } #section-inform .card.sales-record .lead-nav-right .btn { padding-left: 10px; padding-right: 10px; } /* the address */ #section-inform .card.sales-record .srec-address-row, #section-inform .card.sales-record .srec-field-address { width: 100%; max-width: 100%; } #section-inform .card.sales-record :is(.srec-address-input, .srec-addr, .srec-field-address textarea, .srec-field-address input) { font-size: 24px !important; line-height: 1.2; overflow-wrap: break-word; white-space: normal; } #section-inform .card.sales-record .srec-head { flex-wrap: wrap; gap: 8px; } /* key facts: two columns */ #section-inform .card.sales-record .srec-keyfacts { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; position: relative; padding-right: 0; } #section-inform .card.sales-record .srec-keyfacts .srec-keyfacts-edit { position: absolute; right: -6px; top: -12px; } /* Maps, CoStar and DealGround: one row of three buttons */ #section-inform .card.sales-record .srec-topband-links { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 8px; width: 100%; padding: 0 !important; margin: 0 !important; position: relative; } #section-inform .card.sales-record .srec-topband-links::before { display: none !important; } #section-inform .card.sales-record .srec-topband-links > .srec-en-block, #section-inform .card.sales-record .srec-topband-links .srec-en-row { display: contents !important; } #section-inform .card.sales-record .srec-topband-links :is(a, button) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: none !important; height: auto !important; min-height: var(--m-tap) !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; white-space: normal !important; line-height: 1.2; padding: 6px 6px !important; border-radius: var(--ds-r-8); } #section-inform .card.sales-record .srec-map-tile .srec-map-face, #section-inform .card.sales-record .srec-map-tile .srec-map-addr { display: none !important; } #section-inform .card.sales-record .srec-map-tile .srec-map-txt { display: flex; padding: 0 !important; align-items: center; justify-content: center; } #section-inform .card.sales-record .srec-map-tile .srec-map-cta { margin: 0 !important; white-space: normal; letter-spacing: 0.06em; } /* the actions: an even grid, Call across the top */ #section-inform .card.sales-record .srec-top-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; margin: 0 !important; padding: 0 !important; } #section-inform .card.sales-record .srec-top-actions > :is(.srec-primary-line, .fire-task-block) { display: contents !important; } #section-inform .card.sales-record .srec-top-actions .srec-actions-spacer { display: none !important; } #section-inform .card.sales-record .srec-top-actions :is(.btn, button) { width: 100%; min-width: 0 !important; margin: 0 !important; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; } #section-inform .card.sales-record .srec-top-actions .srec-call-btn { grid-column: 1 / -1; order: -1; min-height: 50px !important; } #section-inform .card.sales-record .srec-top-actions > .srec-hero-drops { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 4px 0 0 !important; } #section-inform .card.sales-record .srec-top-actions > .srec-hero-drops > * { flex: 1 1 0; min-width: 0; } #section-inform .card.sales-record .srec-top-actions .fire-task-block > :not(.btn) { grid-column: 1 / -1; } /* the contact panel above the tabs, then the tabs */ #section-inform .card.sales-record .srec-cols { display: flex; flex-direction: column; gap: 12px; } #section-inform .card.sales-record .srec-side { order: -1; position: static !important; width: 100% !important; max-width: 100% !important; max-height: none !important; flex: 0 0 auto !important; overflow: visible !important; } #section-inform .card.sales-record .srec-col-main { width: 100%; min-width: 0; } #section-inform .card.sales-record .srec-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; } #section-inform .card.sales-record .srec-tabs > * { flex: 1 0 auto; } #section-inform .card.sales-record * { overflow-wrap: break-word; } #section-inform .card.sales-record .phone-dial { white-space: nowrap; min-height: var(--m-tap); display: inline-flex; align-items: center; } #section-inform .card.sales-record .srec-hero { align-items: stretch !important; } #section-inform .card.sales-record :is(.srec-topband-main, .srec-topband-links, .srec-top-actions, .srec-keyfacts) { width: 100% !important; max-width: none !important; align-self: stretch !important; } #section-inform .card.sales-record .lead-nav { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; } #section-inform .card.sales-record .lead-nav > .btn { width: 100%; justify-content: center; } #section-inform .card.sales-record .lead-nav-right { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; width: 100%; } #section-inform .card.sales-record .lead-nav-right > .btn { width: 100%; justify-content: center; } #section-inform .card.sales-record .lead-nav-pos { white-space: nowrap; text-align: center; font-size: 14px; } #section-inform .card.sales-record .srec-tabs { flex-wrap: nowrap !important; } /* ---- Properties: each location a stacked card, the skyline a band on top -- */ #section-inform.props-view .loc-row { display: flex; flex-direction: column; min-height: 0 !important; height: auto !important; } #section-inform.props-view .loc-row .loc-thumb { position: relative !important; inset: auto !important; width: 100% !important; height: 120px !important; order: -1; border-left: 0 !important; border-bottom: 1px solid var(--ds-line-gold-22, rgba(255,255,255,.1)); } #section-inform.props-view .loc-row .loc-thumb-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; } #section-inform.props-view .loc-row .loc-main { margin-right: 0 !important; width: 100%; min-width: 0; padding: 14px 12px 14px 16px !important; align-items: center; } #section-inform.props-view .loc-row .loc-body { flex: 1 1 auto; min-width: 0; width: auto !important; max-width: none !important; } #section-inform.props-view .loc-row .loc-stats { flex-wrap: wrap; flex-direction: row; gap: 6px; } #section-inform.props-view .loc-row .loc-spacer { display: none; } #section-inform.props-view .props-head, #section-inform .props-head { flex-wrap: wrap; gap: 8px; } #section-inform.props-view .loc-row .loc-thumb.loc-thumb { max-width: none !important; min-width: 100% !important; align-self: stretch !important; left: 0 !important; right: auto !important; } /* ---- Filters fold behind a "Filters" button (app.js `mFiltersBtn`) ------- */ button.m-filters-btn.m-filters-btn { display: inline-flex !important; align-items: center; gap: 6px; flex: 0 0 auto; } .m-filters-open button.m-filters-btn.m-filters-btn { border-color: var(--ag); color: var(--ag); } #section-inform .re-filterbar:not(.m-filters-open) > .refp-section { display: none !important; } #section-inform .re-filterbar > .re-row { flex-wrap: wrap; gap: 8px; } #section-inform .re-filterbar .re-search-wrap, #section-inform .re-filterbar .re-row > .srch { flex: 1 1 100% !important; width: 100% !important; } #section-inform .re-filterbar .re-chips { flex-wrap: wrap; } #section-inform .re-filterbar .refp-section { display: block !important; } #section-inform .re-filterbar .refp-groups { display: flex !important; flex-wrap: wrap; gap: 8px; width: 100%; margin: 8px 0 0; } #section-inform .re-filterbar .refp-group { flex: 1 1 calc(50% - 8px); min-width: 0; } #section-inform .re-filterbar .refp-trigger { width: 100%; } .refp-panel { max-width: calc(100vw - 16px) !important; } /* ---- the lead list: one card per lead ------------------------------------ The list is virtualised and measures its row pitch from the first painted row, so every card is the same fixed height. */ #section-inform .lead-scroll { overflow: visible !important; } #section-inform .lead-scroll-in { min-width: 0 !important; width: 100% !important; } #section-inform .lead-head { display: none !important; } #section-inform .lead-row:not(.lead-head) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "status flags del" "addr addr addr" "contact contact contact" "phone phone last"; height: 138px !important; min-height: 0 !important; box-sizing: border-box; padding: 8px 12px 10px 14px !important; gap: 2px 8px !important; align-items: center; } #section-inform .lead-row > .lc { min-width: 0; width: auto !important; max-width: none !important; padding: 0 !important; overflow: hidden; } #section-inform .lead-row > .lc-check { grid-area: status; justify-self: start; } #section-inform .lead-row > .lc-status { grid-area: status; } #section-inform .lead-row:has(> .lc-check:not(:empty)) > .lc-status { padding-left: 34px !important; } #section-inform .lead-row > .lc-addr { grid-area: addr; } #section-inform .lead-row > .lc-contact { grid-area: contact; } #section-inform .lead-row > .lc-phone { grid-area: phone; } #section-inform .lead-row > .lc-last { grid-area: last; justify-self: end; text-align: right; } #section-inform .lead-row > .lc-flags { grid-area: flags; justify-self: end; display: flex; gap: 6px; align-items: center; overflow: visible; } #section-inform .lead-row > .lc-del { grid-area: del; justify-self: end; overflow: visible; } #section-inform .lead-row > :is(.lc-sub, .lc-type, .lc-sf, .lc-count, .lc-note, .lc-go) { display: none !important; } #section-inform .lead-row > .lc-deal:empty { display: none !important; } #section-inform .lead-row > .lc-deal:not(:empty) { grid-area: flags; } #section-inform .lead-row :is(.lead-street, .lead-city, .lc-t, .lc-nonum) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #section-inform .lead-row .lead-street { font-size: 19px; } #section-inform .lead-row > .lc-last::before { content: "Last call "; color: var(--ds-ink-faint); font-size: 13px; } #section-inform .lead-row a.lead-flag, #section-inform .lead-row .lead-flag { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } #section-inform .sales-rec-bar.sales-toolbar, #section-inform .sales-toolbar { flex-wrap: wrap; gap: 8px; } #section-inform .sales-rec-bar .sales-rec-actions { flex-wrap: wrap; gap: 8px; justify-content: flex-start; width: 100%; } /* ---- Contacts: one card per person ---------------------------------------- */ #section-contacts .contacts-tools { flex-wrap: wrap; gap: 8px; } #section-contacts .contacts-search-wrap { width: 100% !important; flex: 1 1 100% !important; } #section-contacts .contacts-az { display: none !important; } #section-contacts .contacts-with-az { display: block !important; } #section-contacts .contacts-card { width: 100%; min-width: 0; } #section-contacts .contacts-scroll { overflow: visible !important; } #section-contacts .contacts-grid { min-width: 0 !important; width: 100%; } #section-contacts .contacts-grid-head { display: none !important; } #section-contacts .contacts-grid-row { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "name name" "props last" "marks marks"; height: auto !important; min-height: 0 !important; gap: 4px 10px; padding: 12px 14px !important; align-items: center; } #section-contacts .contacts-grid-row > .contacts-name-cell { grid-area: name; height: auto !important; min-width: 0; } #section-contacts .contacts-grid-row > .contacts-props-n { grid-area: props; justify-self: start; text-align: left !important; font-family: var(--ds-font); font-size: 14px; } #section-contacts .contacts-grid-row > .contacts-props-n::before { content: "Properties "; color: var(--ds-ink-faint); } #section-contacts .contacts-grid-row > .contacts-lastcall { grid-area: last; justify-self: end; text-align: right !important; font-size: 14px; } #section-contacts .contacts-grid-row > .contacts-lastcall::before { content: "Last call "; color: var(--ds-ink-faint); } #section-contacts .contacts-grid-row > .contacts-markcell { grid-row: 3; justify-self: start; } #section-contacts .contacts-grid-row > .contacts-markcell:empty { display: none; } #section-contacts .contacts-grid-row > .contacts-markcell + .contacts-markcell { grid-column: 2; justify-self: end; } #section-contacts .contacts-letter-band { padding-left: 14px; padding-right: 14px; } #section-contacts :is(.contact-detail, .contacts-detail, .cd-grid, .cd-cols) { grid-template-columns: minmax(0, 1fr) !important; } #section-contacts * { overflow-wrap: break-word; } #section-contacts .contacts-filters, #section-contacts .contacts-toggles { flex-wrap: wrap; gap: 8px; } #section-contacts .contacts-grid-row { grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-areas: "name m1 m2" "props last last" !important; } #section-contacts .contacts-grid-row > .contacts-lastcall { grid-area: last !important; } #section-contacts .contacts-grid-row > .contacts-markcell { grid-area: m1; grid-row: auto; grid-column: auto; justify-self: end; } #section-contacts .contacts-grid-row > .contacts-markcell + .contacts-markcell { grid-area: m2; grid-column: auto; } :is(#section-contacts, #section-inform, #section-dash) .phone-dial { min-height: var(--m-tap); display: inline-flex; align-items: center; } #section-contacts a.contacts-email, #section-inform .card.sales-record a.srec-contact-extra { min-height: var(--m-tap); display: inline-flex; align-items: center; } /* ---- Listings ------------------------------------------------------------- */ /* ---- the map: full screen under the bar, Layers as a pull-up sheet --------- */ :is(#section-inform).map-view .gmap-wrap { position: fixed; top: var(--ds-topbar-h); left: 0; right: 0; bottom: 0; z-index: 30; min-height: 0; margin: 0; border-radius: 0; } :is(#section-inform).map-view .gmap-host { position: absolute; inset: 0; display: block; } /* !important: Leaflet writes an inline `position: relative` on the container. */ :is(#section-inform).map-view .gmap-canvas { position: absolute !important; inset: 0; width: auto; height: auto; min-height: 0; border-radius: 0; border: 0; margin: 0; } :is(#section-inform).map-view .gmap-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1100; width: auto; max-width: none; max-height: 70vh; margin: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 0 16px calc(14px + var(--m-safe-b)); transform: translateY(calc(100% - 60px - var(--m-safe-b))); transition: transform 0.25s var(--ease); } :is(#section-inform).map-view .gmap-panel.m-sheet-open { transform: none; } :is(#section-inform).map-view .gmap-panel-h { min-height: 56px; cursor: pointer; position: sticky; top: 0; z-index: 1; padding: 14px 0 8px; background: var(--ds-card); } :is(#section-inform).map-view .gmap-panel-h::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--ds-ink-faint); } :is(#section-inform).map-view .gmap-panel-h::after { content: "Tap to open"; margin-left: auto; font-family: var(--ds-font); font-size: 13px; font-weight: 500; color: var(--ds-ink-faint); } :is(#section-inform).map-view .gmap-panel.m-sheet-open .gmap-panel-h::after { content: "Tap to close"; } :is(#section-inform).map-view .gmap-panel :is(label, .gmap-row) { min-height: var(--m-tap); display: flex; align-items: center; } /* the Map / Cards switch floats over the top of the map */ #section-inform.map-view .gmap-bar .gmap-toggle { position: fixed; top: calc(var(--ds-topbar-h) + 10px); left: 10px; z-index: 36; background: var(--ds-card); } .gmap-canvas .leaflet-top.leaflet-left { top: 58px; } .gmap-canvas .leaflet-bar a { width: var(--m-tap) !important; height: var(--m-tap) !important; line-height: var(--m-tap) !important; } .gmap-seg { min-height: var(--m-tap); } /* ---- Power Dialer dock: a compact bar at the bottom ------------------------- The bar keeps the slots marked `m-main` in app.js (Exit, Start / Mute, Hang up / Log & next, Pause / Resume, Next lead) and a More button; everything else opens above them when More is pressed. Only the layout changes: every control is the same node doing the same thing, and nothing here touches the dialer's state, cursor or queue. */ .fire-dock.fire-dock { left: 0; right: 0; padding: 8px max(8px, var(--m-safe-r)) calc(8px + var(--m-safe-b)) max(8px, var(--m-safe-l)); gap: 6px; max-height: 78vh; overflow-y: auto; } .fire-dock.fire-dock > .fire-dock-row { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } .fire-dock .fire-dock-top { gap: 8px; flex-wrap: nowrap; min-width: 0; } .fire-dock .fire-dock-top > .fire-dock-pos { font-size: 18px; flex: 0 0 auto; } .fire-dock .fire-dock-top > .fire-dock-state { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .fire-dock:not(.m-more-open) .fire-dock-top > :is(.fire-dock-mode, .fire-dock-micslot, .fire-dock-skip, .fire-dock-chase) { display: none !important; } .fire-dock.m-more-open .fire-dock-top { flex-wrap: wrap; } .fire-dock.m-more-open .fire-dock-top > :is(.fire-dock-mode, .fire-dock-micslot, .fire-dock-skip, .fire-dock-chase) { flex: 1 1 100%; min-width: 0; } .fire-dock.fire-dock .fire-dock-controls { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .fire-dock:not(.m-more-open) .fire-dock-controls > :not(.m-main):not(.m-dock-more) { display: none !important; } .fire-dock .fire-dock-controls > * { min-width: 0 !important; width: auto !important; order: 10 !important; margin: 0 !important; } .fire-dock .fire-dock-controls > .m-main { order: 1 !important; } .fire-dock .fire-dock-controls > .m-dock-more { order: 2 !important; } /* An invalid control is hidden in its slot on a desktop so nothing slides; on the phone bar a slot with nothing valid in it simply goes. */ .fire-dock .fire-dock-controls .fire-slot > [hidden] { display: none !important; } .fire-dock .fire-dock-controls .fire-slot:not(:has(> :not([hidden]))) { display: none !important; } .fire-dock .fire-dock-controls .fire-slot { display: flex !important; min-width: 0; } .fire-dock .fire-dock-controls .fire-slot-group { display: flex !important; gap: 6px; grid-column: 1 / -1; } .fire-dock .fire-dock-controls .fire-slot-group > .fire-slot { flex: 1 1 0; } .fire-dock.fire-dock.fire-dock.fire-dock .fire-dock-controls .fire-slot > .btn.btn.btn, .fire-dock.fire-dock.fire-dock.fire-dock .fire-dock-controls > .btn.btn.btn { width: 100%; min-width: 0 !important; max-width: none !important; justify-content: center; padding-left: 6px !important; padding-right: 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px !important; } .fire-dock .fire-dock-controls > .fire-slot:has(> .fire-second-slot:not(:empty)) { grid-column: 1 / -1; } .fire-dock .fire-second-slot { min-width: 0; flex-wrap: wrap; } .fire-dock .fire-dock-controls > .fire-slot:has(> .fire-mark-btn) { margin-left: 0 !important; } button.m-dock-more.m-dock-more { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; } .fire-dock.m-more-open button.m-dock-more.m-dock-more { border-color: var(--ag); color: var(--ag); } /* Short labels on the bar: "Exit Power Dialer" and "Start Power Dialer" read "Exit" and "Start"; the icon and the button are unchanged. */ .fire-dock.fire-dock.fire-dock.fire-dock .fire-dock-controls > .fire-slot.m-main:first-child > .btn.btn.btn, .fire-dock.fire-dock.fire-dock.fire-dock .fire-dock-controls > .fire-slot.m-main:nth-child(2) > .fire-btn.btn.btn { font-size: 0 !important; gap: 6px; } .fire-dock .fire-dock-controls > .fire-slot.m-main:first-child > .btn::after { content: "Exit"; font-size: 13px; } .fire-dock .fire-dock-controls > .fire-slot.m-main:nth-child(2) > .fire-btn::after { content: "Start"; font-size: 13px; } /* the lead card clears the bar */ .fire-wrap { padding-bottom: calc(var(--fire-dock-h, 140px) + 16px) !important; } .fire-dock.fire-dock.fire-dock.fire-dock.m-more-open .fire-dock-controls > :not(.m-main) .btn.btn.btn { white-space: normal; line-height: 1.15 !important; text-overflow: clip; } /* ---- the 13px floor for sizes set outside the tokens ---------------------- Every class the phone probe measured under 13px. `:is(#m-floor, *)` twice lifts the rule to (2,1,0), above the desktop's own `!important` label rules; `*` is what matches. Only ever raises: each of these was under 13. */ .content input[type="range"] { min-height: var(--m-tap); } /* Undo after Dead: under the ordinary banner, inside the screen. */ .dead-undo-card { left: auto; right: var(--m-pad); max-width: calc(100vw - 2 * var(--m-pad)); margin-bottom: env(safe-area-inset-bottom); } /* Contacts: the Add contact form stacks to one column on a phone. */ .contacts-add-grid { grid-template-columns: minmax(0, 1fr); } /* Link column pencils (cream436): the line is the flex item, the pencil stays small. */ #section-inform .card.sales-record .srec-topband-links .srec-link-line { display: flex !important; flex: 1 1 0 !important; min-width: 0 !important; position: relative; } #section-inform .card.sales-record .srec-topband-links .srec-link-line > .btn { flex: 1 1 auto !important; width: 100% !important; } #section-inform .card.sales-record .srec-topband-links .srec-link-line > .srec-link-edit { position: absolute !important; right: 0 !important; top: 0 !important; transform: none !important; flex: none !important; width: 26px !important; min-width: 0 !important; height: 26px !important; min-height: 0 !important; padding: 0 !important; } /* The one dialer (cream479): docked across the bottom of a phone, never floated. */ .one-dialer.dialer-panel { left: 8px; right: 8px; } .one-dialer .dialer-card { width: auto; max-width: none; }