/* ppq-pricelist — mobile-first CSS, no framework. Base = small screens. Progressive enhancement via @media (min-width:). Dark theme default; light via [data-theme="light"] on . */ :root { --bg: #0e1116; --bg-raised: #161b23; --bg-hover: #1d2430; --border: #2a3342; --text: #d7dee8; --text-dim: #8b96a5; --accent: #4ea1ff; --accent-dim: #2d5f96; --good: #3fb96f; --warn: #d9a13c; --bad: #d95c5c; --chip-bg: #202836; --shadow: 0 2px 10px rgba(0, 0, 0, 0.4); --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* 44px minimum touch targets on mobile (Apple HIG / WCAG 2.5.5) */ --tap: 44px; } [data-theme="light"] { --bg: #f5f7fa; --bg-raised: #ffffff; --bg-hover: #eef2f7; --border: #d5dbe4; --text: #1c2530; --text-dim: #5d6a7a; --accent: #1a6fd4; --accent-dim: #a8c8ec; --chip-bg: #e8edf4; --shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.45; /* respect iOS safe areas (notch/home bar) */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* prevent iOS auto-zoom on focus (needs >=16px) and keep taps comfortable; shared chrome so native controls (select!) match the custom-styled ones */ input, select, button, .vdd summary { font: inherit; min-height: var(--tap); color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; } a { color: var(--accent); } /* ---------- header ---------- */ header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-raised); position: sticky; top: 0; z-index: 10; } header h1 { font-size: 17px; margin: 0; } header h1 a { color: inherit; text-decoration: none; } header .meta { color: var(--text-dim); font-size: 12px; } header .meta .stale { color: var(--warn); } header .spacer { flex: 1; } header button { padding: 8px 14px; } /* roomier tap targets in the bar */ main { padding: 12px; } /* ---------- status ---------- */ #status { margin: 10px 0; padding: 10px 12px; border-radius: 6px; display: none; } #status.error { display: block; background: rgba(217,92,92,.12); border: 1px solid var(--bad); color: var(--bad); } #status.info { display: block; background: rgba(78,161,255,.1); border: 1px solid var(--accent-dim); color: var(--text-dim); } /* ---------- filters: stacked columns on mobile ---------- */ #filters { display: grid; grid-template-columns: 1fr 1fr; /* two controls per row */ gap: 8px; align-items: center; margin-bottom: 12px; } #filters > * { min-width: 0; } #search, #vendor-dd, #privacy { grid-column: span 2; } #filters input[type="search"] { width: 100%; } #filters select { width: 100%; } #filters .group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } #filters label.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-dim); user-select: none; padding: 0 4px; } #filters label.toggle input { width: 18px; height: 18px; } #filters label.toggle.on { color: var(--accent); } .chip { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; cursor: pointer; user-select: none; } .chip.on { background: var(--accent-dim); border-color: var(--accent); color: var(--text); } .price-range { display: flex; gap: 6px; align-items: center; color: var(--text-dim); grid-column: span 2; } .price-range input { width: 0; flex: 1; min-width: 0; } .price-range label { flex: none; } #clear-btn { grid-column: span 2; } /* ---------- vendor multi-select dropdown ---------- */ .vdd { position: relative; } .vdd summary { list-style: none; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; } .vdd summary::-webkit-details-marker { display: none; } .vdd summary::after { content: "▾"; color: var(--text-dim); margin-left: auto; padding-left: 8px; } .vdd[open] summary::after { content: "▴"; } .vdd-list { position: fixed; /* anchor to viewport on small screens */ left: 12px; right: 12px; top: auto; z-index: 30; width: auto; max-width: none; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 8px; } .vdd-actions { display: flex; gap: 6px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .vdd-actions input[type="search"] { flex: 1; min-width: 0; padding: 6px 10px; } .vdd-actions button { font-size: 12px; padding: 6px 12px; flex: none; } .vdd-items { max-height: min(320px, 50vh); overflow-y: auto; overscroll-behavior: contain; } .vdd-items label { display: flex; align-items: center; gap: 8px; padding: 9px 8px; /* ~44px rows with line-height */ border-radius: 6px; cursor: pointer; white-space: nowrap; } .vdd-items label:hover { background: var(--bg-hover); } .vdd-items label[hidden] { display: none; } .vdd-items .count { color: var(--text-dim); font-size: 11px; margin-left: auto; } .vdd-empty { color: var(--text-dim); padding: 8px 6px; } /* ---------- tables: horizontal scroll, comfortable rows ---------- */ section { margin-bottom: 24px; } section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0 0 8px; } .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); } table { border-collapse: collapse; width: 100%; min-width: 760px; } th, td { padding: 9px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); } tbody tr:last-child td { border-bottom: none; } tbody tr.model-row:hover { background: var(--bg-hover); cursor: pointer; } tbody tr.detail-row td { background: var(--bg-raised); white-space: normal; } thead th { background: var(--bg-raised); color: var(--text-dim); font-weight: 600; font-size: 12px; cursor: pointer; user-select: none; } thead th:hover { color: var(--text); } thead th .arrow { color: var(--accent); font-size: 10px; } td.num, th.num { text-align: right; font-family: var(--mono); font-size: 13px; } .badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-dim); vertical-align: middle; } .badge.popular { color: var(--warn); border-color: var(--warn); } .badge.zdr { color: var(--good); } .badge.e2e { color: var(--accent); } .badge.anon { color: var(--text-dim); } .mono { font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .quick { font-family: var(--mono); font-size: 11.5px; color: var(--accent); margin-top: 1px; } .mod-chips { display: inline-flex; gap: 3px; flex-wrap: wrap; } .mod-chips .chip { cursor: default; font-size: 10px; padding: 1px 6px; min-height: 0; } .mod-chips .arrow { color: var(--text-dim); font-size: 10px; align-self: center; } /* ---------- detail row ---------- */ .detail-grid { display: grid; grid-template-columns: 1fr; /* single column on mobile */ gap: 10px; padding: 6px 2px; } .detail-grid dt { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .detail-grid dd { margin: 1px 0 8px; font-family: var(--mono); font-size: 12px; word-break: break-all; white-space: normal; } /* ---------- self-tests / footer ---------- */ #selftest { font-family: var(--mono); font-size: 12px; padding: 10px 14px; } #selftest .pass { color: var(--good); } #selftest .fail { color: var(--bad); } footer { padding: 14px; color: var(--text-dim); font-size: 12px; border-top: 1px solid var(--border); } /* ================================================================= Desktop enhancement — only ≥ 720px ================================================================= */ @media (min-width: 720px) { main { padding: 16px 20px 60px; max-width: 1400px; margin: 0 auto; } header { padding: 12px 20px 10px; align-items: baseline; } header button { padding: 5px 10px; } /* filter bar flows back to one wrapping row */ #filters { display: flex; flex-wrap: wrap; gap: 8px; } #search, #vendor-dd, #privacy, .price-range, #clear-btn { grid-column: auto; } #search { flex: 1 1 220px; width: auto; } #vendor-dd { flex: 0 0 auto; } #privacy { flex: 0 0 auto; width: auto; } .price-range { flex: 0 0 auto; } #clear-btn { flex: 0 0 auto; padding: 5px 10px; } #filters select { width: auto; } #filters label.toggle { padding: 0; } .chip { min-height: 0; padding: 3px 9px; } /* dropdown anchors to its trigger again */ .vdd-list { position: absolute; left: 0; right: auto; top: calc(100% + 4px); width: 280px; border-radius: 6px; } .vdd-items label { padding: 3px 6px; } table { min-width: 980px; } th, td { padding: 7px 10px; } .detail-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } thead th { font-size: 12px; } } /* very narrow phones: one filter control per row */ @media (max-width: 380px) { #filters { grid-template-columns: 1fr; } #search, #vendor-dd, #privacy, .price-range, #clear-btn { grid-column: span 1; } }