/* ── Road Name Searchable Combobox ── */ .road-combo { position:relative; display:inline-block; min-width:180px; } .road-combo input { width:100%; box-sizing:border-box; cursor:pointer; } .road-combo-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-dim); font-size:1.1rem; cursor:pointer; padding:0 4px; line-height:1; z-index:2; } .road-combo-clear:hover { color:var(--text); } .road-combo-list { position:absolute; top:100%; left:0; right:0; max-height:280px; overflow-y:auto; background:var(--bg-card); border:1px solid var(--border); border-radius:0 0 8px 8px; box-shadow:0 4px 12px rgba(0,0,0,0.25); z-index:100; } .road-combo-list .road-opt { padding:0.45rem 0.7rem; font-size:0.84rem; font-family:var(--font-body); color:var(--text); cursor:pointer; border-bottom:1px solid var(--border); } .road-combo-list .road-opt:last-child { border-bottom:none; } .road-combo-list .road-opt:hover, .road-combo-list .road-opt.active { background:rgba(212,168,67,0.15); } .road-combo-list .road-opt .road-count { float:right; font-size:0.75rem; color:var(--text-dim); } /* ── Insurance report print styles (Session 112) ── */ /* When the user prints, hide app chrome and show just the report content. */ @media print { .sidebar, .mobile-nav, .tut-help-widget, #tut-help-widget, #tut-overlay, #gmail-help-overlay, #onboarding-map-overlay, #onboarding-return-bar, .header, #mnav, .nav-toggle, .report-controls, .qa-fab, #qa-panel, #export-report-btn, #report-type, select, button { display: none !important; } body, html { background: #fff !important; color: #000 !important; } .main, #main-content, #page-reports, #page-reports * { background: #fff !important; color: #000 !important; box-shadow: none !important; } #ins-report-hdr .ins-report-title { color: #000; font-size: 18pt; } #ins-report-hdr .ins-report-meta span, #ins-report-hdr .ins-report-subtitle { color: #333; } #ins-report-foot { color: #000 !important; } #ins-report-foot .ins-report-footer div[style*="border-bottom"] { border-bottom-color: #000 !important; } .ins-photo-placeholder { background: #eee !important; color: #666 !important; border: 1px solid #999; } table { page-break-inside: auto; } tr { page-break-inside: avoid; } thead { display: table-header-group; } /* repeat headers per page */ .item-table th, .item-table td { border: 1px solid #888 !important; padding: 4pt 6pt; font-size: 9pt; } .item-num { color: #000 !important; font-weight: bold; } } /* Compact UI (Session 161+) ============================================== */ .table-wrap thead th { position: sticky; top: 0; z-index: 5; background: var(--surface); box-shadow: 0 1px 0 var(--border); } .qa-add-dropdown-wrap { position: relative; display: inline-flex; } .qa-add-dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.35rem; box-shadow: 0 6px 24px rgba(0,0,0,0.35); z-index: 50; flex-direction: column; gap: 0.2rem; } .qa-add-dropdown-menu button { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; background: transparent; border: none; color: var(--text); font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; border-radius: 7px; text-align: left; } .qa-add-dropdown-menu button:hover { background: var(--surface2); } body.compact-mode .table-wrap td, body.compact-mode .table-wrap th { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; font-size: 0.78rem !important; } body.compact-mode #coll-icon-legend { display: none !important; } body.compact-mode .qa-tr-actions .qa-tr-btn { padding: 0.3rem 0.5rem !important; font-size: 0.72rem !important; } /* ── Want/Upgrade list: density, fit-to-width, responsive ── */ #page-upgrade .item-table { table-layout: fixed; width: 100%; } #page-upgrade .item-table td, #page-upgrade .item-table th { padding: 0.42rem 0.55rem; } #page-upgrade .item-table th { line-height: 1.15; } #page-upgrade .item-table th:nth-child(1), #page-upgrade .item-table td:nth-child(1) { width: 116px; overflow: hidden; text-overflow: ellipsis; } #page-upgrade .item-table td:last-child { white-space: normal; } #page-upgrade .item-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-upgrade .item-table th:nth-child(3), #page-upgrade .item-table td:nth-child(3) { width: 74px; } #page-upgrade .item-table th:nth-child(4), #page-upgrade .item-table td:nth-child(4) { width: 62px; } #page-upgrade .item-table th:nth-child(5), #page-upgrade .item-table td:nth-child(5) { width: 60px; } #page-upgrade .item-table th:nth-child(6), #page-upgrade .item-table td:nth-child(6) { width: 66px; } #page-upgrade .item-table th:nth-child(7), #page-upgrade .item-table td:nth-child(7) { width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-upgrade .item-table th:nth-child(8), #page-upgrade .item-table td:nth-child(8) { width: 186px; } #page-upgrade .item-table td:last-child { white-space: normal; } @media (max-width: 760px) { #page-upgrade .item-table th:nth-child(3), #page-upgrade .item-table td:nth-child(3), #page-upgrade .item-table th:nth-child(7), #page-upgrade .item-table td:nth-child(7), #page-upgrade .item-table th:nth-child(8), #page-upgrade .item-table td:nth-child(8) { display: none; } } /* ── For Sale list: density, fit-to-width, responsive ── */ #page-forsale .item-table { table-layout: fixed; width: 100%; } #page-forsale .item-table td, #page-forsale .item-table th { padding: 0.42rem 0.55rem; } #page-forsale .item-table th { line-height: 1.15; } #page-forsale .item-table th:nth-child(1), #page-forsale .item-table td:nth-child(1) { width: 54px; } #page-forsale .item-table th:nth-child(2), #page-forsale .item-table td:nth-child(2) { width: 116px; overflow: hidden; text-overflow: ellipsis; } #page-forsale .item-table th:nth-child(3), #page-forsale .item-table td:nth-child(3) { width: 70px; } #page-forsale .item-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-forsale .item-table th:nth-child(5), #page-forsale .item-table td:nth-child(5) { width: 48px; } #page-forsale .item-table th:nth-child(6), #page-forsale .item-table td:nth-child(6) { width: 86px; } #page-forsale .item-table th:nth-child(7), #page-forsale .item-table td:nth-child(7) { width: 84px; } #page-forsale .item-table th:nth-child(8), #page-forsale .item-table td:nth-child(8) { width: 88px; } #page-forsale .item-table th:nth-child(9), #page-forsale .item-table td:nth-child(9) { width: 200px; } #page-forsale .item-table td:last-child { white-space: normal; } @media (max-width: 760px) { #page-forsale .item-table th:nth-child(3), #page-forsale .item-table td:nth-child(3), #page-forsale .item-table th:nth-child(7), #page-forsale .item-table td:nth-child(7), #page-forsale .item-table th:nth-child(8), #page-forsale .item-table td:nth-child(8), #page-forsale .item-table th:nth-child(9), #page-forsale .item-table td:nth-child(9) { display: none; } } /* ── Sold Items list: density, fit-to-width, responsive ── */ #page-sold .item-table { table-layout: fixed; width: 100%; } #page-sold .item-table td, #page-sold .item-table th { padding: 0.42rem 0.55rem; } #page-sold .item-table th { line-height: 1.15; } #page-sold .item-table th:nth-child(1), #page-sold .item-table td:nth-child(1) { width: 54px; } #page-sold .item-table th:nth-child(2), #page-sold .item-table td:nth-child(2) { width: 88px; } #page-sold .item-table th:nth-child(3), #page-sold .item-table td:nth-child(3) { width: 84px; } #page-sold .item-table td:nth-child(4) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #page-sold .item-table th:nth-child(5), #page-sold .item-table td:nth-child(5) { width: 70px; } #page-sold .item-table th:nth-child(6), #page-sold .item-table td:nth-child(6) { width: 56px; } #page-sold .item-table th:nth-child(7), #page-sold .item-table td:nth-child(7) { width: 86px; } #page-sold .item-table th:nth-child(8), #page-sold .item-table td:nth-child(8) { width: 96px; } @media (max-width: 760px) { #page-sold .item-table th:nth-child(3), #page-sold .item-table td:nth-child(3), #page-sold .item-table th:nth-child(5), #page-sold .item-table td:nth-child(5), #page-sold .item-table th:nth-child(8), #page-sold .item-table td:nth-child(8) { display: none; } } /* ── Cataloged Master List: tighter rows ── */ #page-browse .item-table:not(.collection-view) td, #page-browse .item-table:not(.collection-view) th { padding: 0.45rem 0.6rem; } @media print { #page-reports .table-wrap { max-height: none !important; overflow: visible !important; } } /* ── v0.9.854: dashboard card text = frame navy; numbers stay black ── */ /* Labels/sub-text inside stat cards and dash panel titles pick up navy */ /* by re-scoping the two shared text vars. Numbers use var(--text) and */ /* are unaffected. High-contrast theme re-overridden below (a11y). */ .main .stat-card, .main #dash-panels-host .section-title { --text-dim:#2980b9; --text-mid:var(--text); } .main .stat-label, .main #dash-panels-host .section-title { font-weight:700; } .main .stat-card::before { background:#2980b9; } html[data-theme="high-contrast"] .main .stat-card, html[data-theme="high-contrast"] .main #dash-panels-host .section-title { --text-dim:#c0c0c0; --text-mid:#e0e0e0; } /* ── v0.9.869: ONE master lever — all colored action buttons -> blue/gray scheme ── Any button styled inline with one of the legacy action colors (green, orange, purple, teal, legacy blues, accent orange) is reskinned here: gray border, want-list blue text, gray tint background. Destructive red (#e74c3c) and neutral gray buttons keep their colors on purpose. Solid primary buttons go solid blue. High-contrast theme re-overridden below (a11y). */ .main button[style*="#2ecc71"], .main button[style*="#e67e22"], .main button[style*="#8b5cf6"], .main button[style*="#16a085"], .main button[style*="#3498db"], .main button[style*="#2980b9"], .main button[style*="var(--accent)"] { border-color:#8b8e94 !important; color:#2980b9 !important; /* v0.9.1274 (Brad: "still transparent"): this !important beat every one of the 139 opaque backgrounds v0.9.1273 wrote into the buttons — the sweep was right, and this line painted the 12% wash straight back over it. Same tint, now mixed into the card colour so nothing behind shows through. Two declarations on purpose: a browser without color-mix drops the second and keeps the first (opaque, slightly wrong tint). */ background:var(--bg-card) !important; background:color-mix(in srgb, rgb(139,142,148) 12%, var(--bg-card)) !important; } .main .btn-primary { background:#2980b9 !important; color:#fff !important; } .main .btn-primary:hover { background:#216f9e !important; } html[data-theme="high-contrast"] .main button[style*="#2ecc71"], html[data-theme="high-contrast"] .main button[style*="#e67e22"], html[data-theme="high-contrast"] .main button[style*="#8b5cf6"], html[data-theme="high-contrast"] .main button[style*="#16a085"], html[data-theme="high-contrast"] .main button[style*="#3498db"], html[data-theme="high-contrast"] .main button[style*="#2980b9"], html[data-theme="high-contrast"] .main button[style*="var(--accent)"] { border-color:#ffffff !important; color:#ffb000 !important; background:#000000 !important; } html[data-theme="high-contrast"] .main .btn-primary { background:#ffb000 !important; color:#000 !important; } /* ── v0.9.870: destructive buttons — gray frame, bright orange text ── */ button[style*="#e74c3c"] { border-color:#8b8e94 !important; color:#f05008 !important; /* v0.9.1274: same fix as the v0.9.869 lever above — opaque, not a wash. */ background:var(--bg-card) !important; background:color-mix(in srgb, rgb(139,142,148) 12%, var(--bg-card)) !important; } html[data-theme="high-contrast"] button[style*="#e74c3c"] { border-color:#ffffff !important; color:#ffb000 !important; background:#000000 !important; } /* v0.9.908 (Brad, item [8]): detail-page photos — on wider screens show them bigger and at their natural shape instead of cropping to a square. Mobile keeps the compact square grid (inline styles); this only overrides >=700px. */ @media (min-width: 700px) { #ni-detail-photos, #item-detail-photos, [id^="grp-photos-"] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; align-items: start; } #ni-detail-photos a[href], #item-detail-photos a[href], [id^="grp-photos-"] a[href] { aspect-ratio: auto !important; } #ni-detail-photos a[href] img, #item-detail-photos a[href] img, [id^="grp-photos-"] a[href] img { height: auto !important; max-height: 70vh; object-fit: contain !important; } } /* v0.9.933 (Brad): the same big-uncropped treatment now covers GROUP items (paired A units, sets) whose photos render in grp-photos-N containers — they were stuck at the 120px square crop the singles fix didn't reach. */ /* ── Dashboard photo ticker (v0.9.1017, Brad) ───────────────────────── A screen-wide strip of thumbnails drifting right-to-left above the large cards. Desktop only (dashboard.js gates it). The track holds the thumbnails TWICE — when the first copy has fully scrolled out (-50%), the loop restarts invisibly. Hover pauses so a photo can be clicked. */ @keyframes rr-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .rr-ticker-track { display: flex; gap: 0.5rem; width: max-content; animation: rr-ticker-scroll var(--rr-ticker-dur, 80s) linear infinite; } .rr-ticker-wrap:hover .rr-ticker-track { animation-play-state: paused; } /* ── Bottom-nav "more" hint (v0.9.1019, Brad) ───────────────────────── The bar scrolls sideways with the scrollbar hidden — nothing said so. A fade + chevron on the right edge marks the off-screen buttons; it disappears once the user scrolls to the end (app.js listener). */ .mobile-nav { position: fixed; } .mnav-more { display: none; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; pointer-events: none; align-items: center; justify-content: flex-end; padding-right: 4px; color: var(--text-dim); font-size: 1.5rem; line-height: 1; background: linear-gradient(90deg, rgba(0,0,0,0), var(--surface) 72%); opacity: 1; transition: opacity 0.25s; } .mnav-more.gone { opacity: 0; } @media (max-width: 640px) { .mnav-more { display: flex; } } /* ── Item-detail action buttons on phones (v0.9.1021, Brad) ─────────── Five buttons wrapped into a ragged three rows with small tap targets. On phones they become a tidy grid: the PRIMARY action (first button — Update Info/Pictures) spans the full width, the rest sit two-across. Every button gets the app's 48px phone tap-target floor. Desktop keeps the existing single flex row. */ @media (max-width: 640px) { .rr-detail-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem !important; align-items: stretch; } .rr-detail-actions > button { width: 100%; min-height: 48px; justify-content: center; font-size: 0.84rem !important; padding: 0.5rem 0.6rem !important; } .rr-detail-actions > button:first-child { grid-column: 1 / -1; } /* an odd last button fills the row rather than leaving a gap */ .rr-detail-actions > button:last-child:nth-child(even) { grid-column: 1 / -1; } } /* ── Phone tap-target floor for small square controls (v0.9.1021) ───── The app promises 44-48px targets on phones, but small square buttons added since (showcase ‹ ⏸ ›, photo ✂ crop, picker checkboxes) were 26px and 15px. One rule, applied by class. */ @media (max-width: 640px) { .rr-tap { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; font-size: 1.05rem !important; } .rr-tap-box { width: 22px !important; height: 22px !important; } } /* ── For Sale page on phones (v0.9.1022, Brad) ─────────────────────── "Share / Customers" is a desk job — hidden on phones. "Share to a friend" and the "+ Add" dropdown share one row below the title, equal width, at the phone tap-target height. Card action buttons likewise. */ @media (max-width: 640px) { #page-forsale .fs-share-customers { display: none !important; } #page-forsale .page-title { flex-wrap: wrap; row-gap: 0.5rem; } #page-forsale .page-title > span:first-child { flex: 1 1 100%; } #page-forsale .page-title > div { flex: 1 1 0; min-width: 0; margin-left: 0 !important; } #page-forsale .page-title .qa-tr-actions { flex: 1 1 0; margin-left: 0 !important; } #page-forsale .qa-add-dropdown-wrap { display: block; width: 100%; } #page-forsale .fs-share-friend, #page-forsale .qa-add-btn { width: 100%; justify-content: center; min-height: 44px; font-size: 0.8rem !important; padding: 0.5rem 0.6rem !important; } /* card actions: three equal buttons at the tap-target floor */ .rr-fs-actions > button { min-height: 44px; flex: 1 1 0 !important; } } /* ── For Sale on phones: fit three listings without scrolling ───────── (v0.9.1023, Brad). Every band above the first card was costing rows: an oversized page title, a tall button row, a chunky search box and generous card padding. Trimmed together, plus half-height card buttons on ONE line each, three cards now land above the fold on a normal phone. Desktop untouched. */ @media (max-width: 640px) { /* card action buttons: half the height, one line, evenly spaced */ .rr-fs-actions { gap: 0.35rem !important; margin-top: 0.45rem !important; } .rr-fs-actions > button { min-height: 34px !important; padding: 0.25rem 0.3rem !important; font-size: 0.74rem !important; white-space: nowrap; line-height: 1.1; } /* title band */ #page-forsale .page-title { font-size: 1.15rem !important; margin-bottom: 0.4rem !important; row-gap: 0.35rem; } #page-forsale #forsale-title-stats { font-size: 0.72rem !important; margin-left: 0.4rem !important; } /* the two header buttons — shorter, still comfortably tappable */ #page-forsale .fs-share-friend, #page-forsale .qa-add-btn { min-height: 38px !important; padding: 0.35rem 0.5rem !important; font-size: 0.74rem !important; white-space: nowrap; } #page-forsale .fs-share-friend svg { flex-shrink: 0; } /* search band */ #page-forsale #forsale-search { font-size: 16px !important; } /* iOS: no zoom-on-focus */ #page-forsale .fs-search-band { margin-bottom: 0.45rem !important; } #page-forsale .fs-search-band > div { max-width: none !important; padding: 0.3rem 0.6rem !important; } /* cards: tighter padding + gap */ #forsale-cards { gap: 0.45rem !important; } #forsale-cards > div { padding: 0.6rem 0.7rem !important; } /* page gutter */ #page-forsale { padding-top: 0.25rem; } } /* ── Want/Upgrade on phones: compact filter block (v0.9.1024, Brad) ─── The four controls wrapped into three tall rows and pushed the first card off the fold. On phones they become a 2x2 grid at a tighter height, the "Showing x of y" count moves up into the page title, and card buttons match the For Sale half-height treatment. */ @media (max-width: 640px) { #page-upgrade .page-title { font-size: 1rem !important; margin-bottom: 0.4rem !important; letter-spacing: 0.02em; } #page-upgrade #upgrade-title-stats { white-space: nowrap; } #page-upgrade .wu-filter-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem !important; margin-bottom: 0.5rem !important; align-items: stretch; } #page-upgrade .wu-filter-bar > select { width: 100%; min-height: 38px !important; min-width: 0; padding: 0.3rem 0.45rem !important; font-size: 0.8rem !important; } #page-upgrade .wu-filter-bar > div { /* the search pill */ max-width: none !important; min-width: 0 !important; min-height: 38px; padding: 0.25rem 0.5rem !important; } #page-upgrade #upgrade-count { display: none !important; } /* lives in the title now */ #page-upgrade #upgrade-cards { gap: 0.45rem !important; } #page-upgrade #upgrade-cards > div { padding: 0.6rem 0.7rem !important; } #page-upgrade #upgrade-cards button { min-height: 34px !important; padding: 0.25rem 0.3rem !important; font-size: 0.72rem !important; white-space: nowrap !important; line-height: 1.1; } } /* ── My Collection / Catalog on phones (v0.9.1025, Brad) ───────────── • the filter block moves into a bottom sheet behind a Filters button, so it costs one button instead of a third of the screen; • nothing scrolls sideways — rows are clamped to the viewport; • rows are tighter, and the row thumbnail sits on the right. */ @media (max-width: 640px) { /* filters live in the sheet — hidden inline, shown when moved into it */ #page-browse > #hierarchy-chip-row { display: none !important; } #rr-filter-sheet #hierarchy-chip-row.rr-in-sheet { display: flex !important; background: transparent; border: none; padding: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0.5rem; } #rr-filter-sheet #hierarchy-chips { gap: 0.4rem; } #rr-filter-sheet #browse-search-wrap { max-width: none !important; width: 100%; } /* no sideways scrolling anywhere on this page */ #page-browse { overflow-x: hidden; } #browse-cards { width: 100%; max-width: 100%; } .browse-card { max-width: 100%; box-sizing: border-box; overflow: hidden; } .browse-card > div { min-width: 0; } /* tighter rows */ #page-browse .page-title { font-size: 1rem !important; margin-bottom: 0.4rem !important; flex-wrap: wrap; row-gap: 0.4rem; } #browse-cards { gap: 0.4rem !important; } .browse-card { padding: 0.55rem 0.65rem !important; } } /* v0.9.1026 (Brad): long titles must not run under the row thumbnail — the number line clips with an ellipsis instead of overflowing. */ @media (max-width: 640px) { .browse-card .browse-card-num { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .browse-card .browse-card-num + span, .browse-card > div > div { min-width: 0; } .browse-card > div > div:first-of-type > div:first-child { overflow: hidden; } } /* ── Filter sheet polish (v0.9.1028, Brad) ─────────────────────────── Inside the sheet the chips get room to breathe: the duplicated "Filters" caption and the decorative > separators come off (the sheet already says Filters), the clear-all X moves to the end, and the chip row loses its inline panel styling so it reads as one clean block. */ #rr-filter-sheet #hierarchy-chip-row .ph-label, #rr-filter-sheet #hierarchy-chip-row .ph-sep { display: none !important; } #rr-filter-sheet #hierarchy-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } #rr-filter-sheet #hierarchy-chips button { min-height: 40px; } #rr-filter-sheet #hierarchy-chip-row .ph-clear { order: 99; margin-left: auto; min-height: 40px; } #rr-filter-sheet #browse-search-wrap { width: 100%; max-width: none !important; min-height: 44px; margin-top: 0.2rem; } #rr-filter-panel { color: var(--text); } /* ── Wizard footer on phones (v0.9.1028, Brad) ─────────────────────── "Done with Photos" wrapped onto three lines and dragged the whole footer to a third of the screen. Buttons now sit on one line each, shrink to fit, and the footer keeps a sane height. */ @media (max-width: 640px) { .modal-footer { padding: 0.6rem 0.7rem !important; gap: 0.4rem !important; flex-wrap: nowrap; } .modal-footer .btn { padding: 0.5rem 0.6rem !important; font-size: 0.72rem !important; letter-spacing: 0.03em !important; white-space: nowrap; min-height: 44px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .modal-footer #wizard-next-btn { flex: 0 0 auto; } } /* Filter-sheet action button: an explicit hex keeps it out of the light-theme "recolour inline-styled buttons" rule (v0.9.1028). */ #rr-filter-panel > button:last-child { background: #f05008 !important; color: #fff !important; border: none !important; } #rr-filter-sheet #hierarchy-chip-row .ph-clear { margin-left: 0 !important; order: 0; } /* Footer labels on phones (v0.9.1029): Back and Cancel become their symbols so "Done with Photos" stays fully readable. All four buttons share one row, centred, at the same height. */ .wiz-lbl-short { display: none; } @media (max-width: 640px) { .wiz-lbl-full { display: none; } .wiz-lbl-short { display: inline; } .modal-footer { align-items: center !important; } .modal-footer .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.15; } .modal-footer #wizard-skip-photos-btn { flex: 1 1 auto; font-size: 0.68rem !important; } .modal-footer #wizard-back-btn, .modal-footer .btn:nth-child(2) { flex: 0 0 auto; padding: 0.5rem 0.7rem !important; } } /* ══ Phone compacting — remaining list pages (v0.9.1030, Brad) ═══════ Same treatment already applied to For Sale, Want/Upgrade and My Collection: smaller page title, filter controls in a tidy grid rather than three ragged wrapped rows, tighter cards, and card buttons at half height on ONE line. Desktop is untouched throughout. */ @media (max-width: 640px) { /* ── shared: titles + card blocks on every list page ── */ #page-parts .page-title, #page-sold .page-title, #page-sets .page-title, #page-contacts .page-title { font-size: 1rem !important; margin-bottom: 0.4rem !important; flex-wrap: wrap; row-gap: 0.4rem; letter-spacing: 0.02em; } #page-parts, #page-sold, #page-sets, #page-contacts { overflow-x: hidden; } /* ── Parts Needed ── */ #page-parts > div:nth-of-type(2) { /* the explainer paragraph */ font-size: 0.74rem !important; margin-bottom: 0.5rem !important; line-height: 1.35; } #parts-list { display: flex; flex-direction: column; gap: 0.45rem; } #parts-list > div { padding: 0.6rem 0.7rem !important; } #parts-list button { min-height: 34px !important; padding: 0.25rem 0.4rem !important; font-size: 0.74rem !important; white-space: nowrap; line-height: 1.1; } /* ── Sold Items ── */ #page-sold .filter-bar { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem !important; align-items: stretch; } #page-sold .filter-bar > select, #page-sold .filter-bar > button { width: 100%; min-width: 0; min-height: 38px !important; padding: 0.3rem 0.45rem !important; font-size: 0.8rem !important; } #page-sold .filter-bar > div { min-width: 0; } /* search rides beside the sort arrow */ #page-sold > div:nth-of-type(3) { margin-bottom: 0.5rem !important; } #sold-cards { gap: 0.45rem !important; } #sold-cards > div { padding: 0.6rem 0.7rem !important; } #sold-cards button { min-height: 34px !important; padding: 0.25rem 0.4rem !important; font-size: 0.74rem !important; white-space: nowrap; line-height: 1.1; } /* ── Sets ── */ #page-sets .sets-filter-bar { /* search + year + gauge row */ display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem !important; margin-bottom: 0.5rem !important; align-items: stretch; } #page-sets .sets-filter-bar > div:first-child { grid-column: 1 / -1; max-width: none !important; min-height: 38px; } #page-sets .sets-filter-bar > select { width: 100%; min-width: 0; min-height: 38px !important; padding: 0.3rem 0.45rem !important; font-size: 0.8rem !important; } #sets-count-label { grid-column: 1 / -1; text-align: right; } #sets-cards { gap: 0.45rem !important; } #sets-cards > div { padding: 0.6rem 0.7rem !important; } #sets-cards button { min-height: 34px !important; padding: 0.25rem 0.4rem !important; font-size: 0.74rem !important; white-space: nowrap; line-height: 1.1; } /* ── Contacts (built by contacts.js) ── */ #page-contacts .filter-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.4rem !important; } #page-contacts .filter-bar > * { width: 100%; min-width: 0; min-height: 38px !important; } /* ── the condition pip everywhere else (Brad: "just delete it") ── */ .condition-pip { display: none !important; } } /* ══════════════════════════════════════════════════════════════════════ v0.9.1033 (Brad: "when the keyboard pops up, you can hardly see what you're typing"). While the on-screen keyboard is up on a phone, the wizard popup only has an inch or two of height left — so its chrome stands down and gives that space to the field being typed in. .wiz-kb is put on / taken off the popup by _kbApply() in wizard.js. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .modal.wiz-kb .modal-header { padding-top: 0.5rem !important; padding-bottom: 0.35rem !important; } .modal.wiz-kb .modal-title { font-size: 0.95rem !important; line-height: 1.15 !important; } .modal.wiz-kb .modal-item-num { font-size: 0.62rem !important; margin-bottom: 0 !important; } .modal.wiz-kb #wizard-progress-wrap { display: none !important; } .modal.wiz-kb #wizard-adding-banner { display: none !important; } /* the ITEM TYPE selector stays put — Brad wants the maker/type visible while typing */ .modal.wiz-kb .modal-footer { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; } } /* ══════════════════════════════════════════════════════════════════════ v0.9.1036 (Brad: "can't scroll down to hit next when adding a grouped item"). The bottom nav is pinned to the screen at layer 800; popups sit at layer 200, so on a phone the nav painted straight over the wizard's footer and swallowed the Next button. Rather than re-stack them, the popup now ends ABOVE the nav — everything inside still scrolls, and the footer is always on screen where you can reach it. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* the nav is ~85px tall on a phone — clear it with a little to spare */ .modal-overlay { padding-bottom: 92px; } #wizard-modal .modal { max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); } }