:root { /* Tokens — driven by data-theme + data-type + --accent from Tweaks */ --accent: #FF6A00; --accent-ink: #FFFFFF; /* Light (default) */ --bg: #F5F2EC; --bg-elev: #ECE8E0; --bg-elev-2: #E2DDD3; --ink: #0E0E0E; --ink-mute: #4A4843; --ink-dim: #8A8780; --line: #D8D3C8; --line-strong: #BCB6A8; /* Photo placeholder palette — warm daylight */ --ph-sky-top: #c9d8df; --ph-sky-bot: #e8dfcf; --ph-sun: #f6d89a; --ph-horizon: #8a8378; --ph-ground-top: #b0a593; --ph-ground-bot: #7d7162; --ph-equipment: #3a3631; --ph-shadow: #1a1815; --ph-glass: #6e7a80; /* Three faces, three jobs. The previous system aliased --mono to Barlow Condensed, so display, body and data were all one condensed grotesque at different sizes — which is exactly why it read as flat. Nothing in a ledger had a different voice from the headline above it. --display Barlow Condensed. Unchanged, and deliberately: the wordmark is condensed italic, so this is the one relationship worth keeping. --sans Schibsted Grotesk, sitewide body copy and admin console UI. --mono IBM Plex Mono, and genuinely monospaced this time. Stock numbers, meters, prices and dates need figures that form a column you can scan down. Shares a skeleton with Plex Sans, so three faces still read as one system. */ --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --display-weight: 700; --sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --brand: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --density: 1; /* 1 = default, 0.85 = compact, 1.15 = spacious */ --container: 1440px; --gutter: clamp(20px, 3vw, 48px); } [data-theme="dark"], .slab-dark { --bg: #0A0D12; --bg-elev: #12161A; --bg-elev-2: #1A2026; --ink: #FFFFFF; --ink-mute: #8A93A6; --ink-dim: #4B5263; --line: #222938; --line-strong: #323C52; --ph-sky-top: #0f1720; --ph-sky-bot: #2a1d15; --ph-sun: #ff8833; --ph-horizon: #15100b; --ph-ground-top: #2a231c; --ph-ground-bot: #12100d; --ph-equipment: #0a0805; --ph-shadow: #000; --ph-glass: #3e2a18; } .slab-dark { background: var(--bg); color: var(--ink); } /* Anywhere the micro face carries figures, they line up. A ledger whose numbers are proportional is a list, not a ledger. */ [class*="mono"], .stock-plate, .t-eyebrow { font-variant-numeric: tabular-nums; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* overflow-x lives on , not : setting a non-visible overflow-x on body while leaving overflow-y alone makes the UA compute overflow-y as auto (CSS spec), turning body into its own scroll container. That breaks position:sticky for every descendant, since sticky's containing block becomes body's scrollport instead of the real viewport — the exact cause of a sticky sidebar reading as "hidden until scroll." html is already the document's real scrolling element, so putting it there instead prevents the horizontal-scrollbar issue this existed for without the side effect. */ html { overflow-x: hidden; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--accent); color: var(--accent-ink); } button { font-family: inherit; } a { color: inherit; text-decoration: none; } /* Typography presets */ .t-eyebrow { font-family: var(--brand); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .t-eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; } .t-display { font-family: var(--display); font-weight: var(--display-weight, 700); line-height: 0.92; letter-spacing: -0.02em; } .t-display.italic { font-style: italic; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: calc(14px * var(--density)) calc(22px * var(--density)); border-radius: 999px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; border: 1px solid transparent; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; transform: translateZ(0); } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.1); box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--bg-elev); transform: translateY(-1px); } .btn-solid { background: var(--ink); color: var(--bg); } .btn-solid:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 20px -8px var(--line-strong); } .btn .arrow { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-ink); color: var(--accent); font-size: 11px; } .btn-ghost .arrow { background: var(--ink); color: var(--bg); } /* Chip / pill */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); background: color-mix(in srgb, var(--bg-elev) 80%, transparent); backdrop-filter: blur(8px); cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .chip:hover { border-color: var(--line-strong); color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .chip.active { background: var(--ink); border-color: var(--ink); color: var(--bg); } .chip.active::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* Inputs */ .input, .select, textarea.input { width: 100%; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; color: var(--ink); font-family: var(--sans); font-size: 15px; outline: none; transition: border-color 0.15s; } .input:focus, .select:focus, textarea.input:focus { border-color: var(--accent); } /* Input placeholder styling */ ::-webkit-input-placeholder { color: var(--ink-dim); } ::-moz-placeholder { color: var(--ink-dim); } :-ms-input-placeholder { color: var(--ink-dim); } ::-ms-input-placeholder { color: var(--ink-dim); } ::placeholder { color: var(--ink-dim); } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 40px)); } } /* Photo-style placeholder */ .ph-photo { position: relative; border-radius: inherit; } .ph-photo:hover .img-zoom { transform: scale(1.05); } /* Legacy stripe placeholder */ .ph { position: relative; background: repeating-linear-gradient(135deg, var(--bg-elev-2) 0 14px, var(--bg-elev) 14px 28px); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink-mute); font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 20%, var(--bg) 120%); pointer-events: none; } .ph .ph-label { position: relative; z-index: 2; padding: 4px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; } .ph .ph-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.35; z-index: 1; } /* Scroll marquee */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { display: flex; width: max-content; animation: marquee 40s linear infinite; } /* Grid helpers */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .divider { height: 1px; background: var(--line); width: 100%; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--bg-elev-2); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); } /* Page transitions */ .page-enter { animation: fadeUp 0.4s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ NAVIGATION — DESKTOP vs MOBILE ============================================================ */ /* Desktop nav visible by default */ .hide-desktop-nav { display: flex !important; } /* Mobile hamburger hidden by default */ .show-mobile-btn { display: none !important; } /* Utility: hide on mobile / show on mobile (companions to .hide-desktop-nav) */ .hide-mobile { display: initial; } .show-mobile { display: none; } /* Mobile menu hidden by default */ .mobile-menu { display: none; } .mobile-backdrop { display: none; } /* Fleet marquee */ .fleet-marquee-wrapper { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); } .fleet-marquee { display: flex; width: max-content; animation: marquee 35s linear infinite; } /* Brand strip — real manufacturer logos, desaturated so twenty brand palettes read as one band. Colour returns on hover, one logo at a time. */ .brand-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-elev); padding: 22px 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%); } .brand-cell { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 40px; flex: 0 0 auto; } .brand-logo { filter: grayscale(1) contrast(0.95); opacity: 0.55; transition: filter 0.35s ease, opacity 0.35s ease; } .brand-cell:hover .brand-logo { filter: none; opacity: 1; } /* Dark theme: light-ink art needs inverting, and the strip sits on the elevated ground. */ [data-theme="dark"] .brand-logo, .slab-dark .brand-logo { filter: grayscale(1) brightness(0) invert(1); opacity: 0.5; } [data-theme="dark"] .brand-cell:hover .brand-logo, .slab-dark .brand-cell:hover .brand-logo { filter: none; opacity: 1; } @media (max-width: 720px) { .brand-strip { padding: 16px 0; } .brand-cell { padding: 0 26px; height: 40px; } .brand-logo { transform: scale(0.82); transform-origin: center; } } /* Stock number plate — sits on the photo corner. Display face, stamped, not printed. */ .stock-plate { background: var(--ink); color: var(--bg); padding: 5px 10px 4px; border-radius: 3px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; } /* On the lot — trade filter + unit grid (home) */ .lot-trades { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } @media (max-width: 720px) { /* Too many trades to wrap on a phone without eating the fold — scroll them. */ .lot-trades { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; padding-bottom: 8px; margin-bottom: 20px; } .lot-trades .chip { flex: 0 0 auto; } } .lot-grid { display: grid; /* Fixed 3-up so six units read as two clean rows, not 4 + an orphan row. */ grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } @media (max-width: 1100px) { .lot-grid { grid-template-columns: repeat(2, 1fr); } } .lot-card { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev); overflow: hidden; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s; } .lot-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); } .lot-card img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .lot-card:hover img { transform: scale(1.06); } .lot-card-cta { font-size: 12px; color: var(--accent); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; } .lot-card:hover .lot-card-cta { opacity: 1; transform: translateX(0); } /* Body fills the card so the price row sits on the same line in every card, however long the model name runs. */ .lot-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; } .lot-card-meta, .lot-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lot-card-meta { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-mute); } .lot-card-title { font-family: var(--display); font-weight: var(--display-weight, 700); letter-spacing: 0.01em; font-size: 24px; margin: 6px 0 14px; line-height: 1.05; } .lot-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } @media (max-width: 640px) { .lot-grid { grid-template-columns: 1fr; gap: 16px; } .lot-card-title { font-size: 21px; } } /* ============================================================ MOBILE BREAKPOINT (max-width: 1024px) Matches useMobile() in primitives.jsx — covers iPhone (any orientation), iPad portrait, and narrow desktop windows. ============================================================ */ @media (max-width: 1024px) { /* Hide desktop nav, show hamburger */ .hide-desktop-nav { display: none !important; } .show-mobile-btn { display: inline-flex !important; } .hide-mobile { display: none !important; } .show-mobile { display: initial !important; } /* Mobile backdrop */ .mobile-backdrop { display: block; position: fixed; inset: 72px 0 0 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 98; animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ── Mobile menu ──────────────────────────────────────────────────────── The sheet is the page, full bleed: same ground, same ink, same rules as everything behind it, so opening the menu changes what you can reach and not what the site looks like. Ledger vocabulary throughout — ruled rows, condensed display type, a fact on the right of each row, orange reserved for where you are. The call leads the footer because on a phone, for this business, the call is the conversion. */ .mobile-menu { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); padding: 0; overflow-y: auto; overscroll-behavior: contain; animation: menuIn .3s cubic-bezier(.16,1,.3,1); } @keyframes menuIn { from { opacity: 0; } to { opacity: 1; } } /* A bar across the top so the close control has somewhere to live. */ .mobile-menu::before { content: ""; display: block; height: calc(72px + env(safe-area-inset-top)); flex: 0 0 auto; border-bottom: 1px solid var(--line); } .mm-nav { display: flex; flex-direction: column; } .mm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px var(--gutter); border-bottom: 1px solid var(--line); border-left: 3px solid transparent; text-decoration: none; animation: mmRow .38s cubic-bezier(.16,1,.3,1) backwards; } @keyframes mmRow { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } .mm-row:nth-child(1) { animation-delay: .03s; } .mm-row:nth-child(2) { animation-delay: .07s; } .mm-row:nth-child(3) { animation-delay: .11s; } .mm-row:nth-child(4) { animation-delay: .15s; } .mm-row:nth-child(5) { animation-delay: .19s; } .mm-row:nth-child(6) { animation-delay: .23s; } .mm-label { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .mm-meta { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .mm-row.is-on { border-left-color: var(--accent); background: var(--bg-elev); } .mm-row.is-on .mm-label { color: var(--accent); } .mm-row:active { background: var(--bg-elev); } /* ---- footer ---- */ .mm-foot { margin-top: auto; padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; animation: mmRow .38s cubic-bezier(.16,1,.3,1) .27s backwards; } .mm-call { display: flex; flex-direction: column; gap: 4px; text-decoration: none; min-height: 44px; } .mm-call-label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .mm-call-number { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 38px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .mm-call:active .mm-call-number { color: var(--accent); } .mm-cta { display: flex; flex-direction: column; gap: 10px; } .mm-cta > a { width: 100%; justify-content: space-between; min-height: 54px; padding-inline: 22px; } .mm-tail { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); } .mm-theme { background: none; border: none; cursor: pointer; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 4px; } /* Footer grid */ .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr !important; } } /* Tweaks panel */ .tweaks-panel { position: fixed; right: 20px; bottom: 20px; width: 320px; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 16px; padding: 18px; z-index: 9999; box-shadow: 0 20px 60px rgba(0,0,0,0.5); font-family: var(--sans); max-height: 80vh; overflow-y: auto; } .tweaks-panel h4 { font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 8px 0; font-weight: 400; } .tweaks-panel .tweak-row { margin-bottom: 16px; } .tweaks-panel .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .tweaks-panel .swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; transition: transform 0.15s; } .tweaks-panel .swatch:hover { transform: scale(1.1); } .tweaks-panel .swatch.active { border-color: var(--ink); transform: scale(1.15); } .tweaks-panel .seg { display: flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 2px; } .tweaks-panel .seg button { flex: 1; padding: 6px 10px; background: transparent; border: none; color: var(--ink-mute); font-size: 12px; border-radius: 6px; cursor: pointer; font-family: var(--sans); } .tweaks-panel .seg button.active { background: var(--ink); color: var(--bg); } /* ============================================================ Condition Report — print + PDF view The .cr-printable region is hidden in normal flow and revealed only when printing (or rendered on-screen at the /report-pdf route as a preview). Everything else on the page is hidden so the browser's print dialog produces a clean PDF. ============================================================ */ .cr-printable { display: none; } @media print { /* Force light theme for print regardless of UI setting */ :root, [data-theme="dark"] { --bg: #ffffff; --bg-elev: #f6f4ee; --bg-elev-2: #ece8e0; --ink: #0E0E0E; --ink-mute: #4A4843; --ink-dim: #8A8780; --line: #c9c3b6; --line-strong: #8a8378; } body { background: #fff !important; } /* Hide everything outside the printable region */ body > #root > header, body > #root > footer, body > #root > nav, .cr-no-print, .editor, .yc-toast, .yc-error-fixed, .tweaks-panel { display: none !important; } main.cr-edit { display: none !important; } .cr-printable { display: block !important; background: #fff; color: #0E0E0E; font-family: var(--sans); } /* Page setup */ @page { size: Letter; margin: 0.5in; } .cr-page { page-break-after: always; } .cr-page:last-child { page-break-after: auto; } .cr-photo-grid { page-break-inside: avoid; } .cr-row { page-break-inside: avoid; } } /* On-screen preview when previewing the printable layout */ .cr-printable.cr-preview { display: block; background: #fff; color: #0E0E0E; max-width: 8.5in; margin: 24px auto; padding: 0.5in; box-shadow: 0 8px 40px rgba(0,0,0,0.18); border-radius: 4px; } /* A Letter page is 816 px wide and a phone is not, so the preview used to run off the side of the screen with no way back — the button worked, the page was just unreadable. On a phone it goes fluid: this view is for checking the numbers before printing. The PDF itself is still laid out by the print rules above, at full page size. */ @media (max-width: 900px) { .cr-preview-wrap { padding: 0 12px; overflow-x: auto; } .cr-printable.cr-preview { max-width: 100%; padding: 20px; margin: 16px auto; } } /* Photo slot — capture-style tile shared across the form */ .cr-photo-slot { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--bg); border: 2px dashed var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; color: var(--ink-mute); font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-align: center; transition: border-color 0.15s, background 0.15s; } .cr-photo-slot:hover { border-color: var(--accent); background: var(--bg-elev); } .cr-photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cr-photo-slot .cr-slot-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; } .cr-photo-slot .cr-slot-btn { width: 32px; height: 32px; border-radius: 999px; border: none; background: rgba(0,0,0,0.6); color: #fff; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; } @media (max-width: 720px) { .cr-photo-slot .cr-slot-btn { width: 36px; height: 36px; font-size: 18px; } .cr-photo-slot .cr-slot-actions { top: 8px; right: 8px; gap: 6px; } } .cr-photo-slot .cr-slot-btn:hover { background: rgba(0,0,0,0.78); } .cr-photo-slot .cr-slot-label { z-index: 1; padding: 4px 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 4px; pointer-events: none; } .cr-photo-slot.cr-filled { border-style: solid; } .cr-photo-slot.cr-filled .cr-slot-label { display: none; } /* Section card */ .cr-section { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); padding: 24px; margin-top: 20px; } .cr-section legend { padding: 0 8px; } .cr-section h3, .cr-section-title { margin: 12px 0 4px; font-family: var(--display); font-size: 28px; letter-spacing: -0.01em; font-weight: 400; } @media (max-width: 720px) { .cr-section { padding: 16px; } } /* Task 4.7: the condition report at phone width. These were measured at 390px and were the last targets under the 44px the rest of the site holds. */ .cr-edit .container > a, .cr-no-print > a[href^="/"] { display: inline-flex; align-items: center; min-height: 44px; } .crumbs a, .crumbs span { display: inline-flex; align-items: center; min-height: 44px; } .cr-edit .cr-section legend { display: block; } /* The segmented Truck/Trailer and New/Used toggles. */ .cr-edit .cr-section button[type="button"] { min-height: 44px; } /* A bare checkbox is 18px and cannot be resized without breaking its look, so the whole label becomes the target instead. */ label:has(> input[type="checkbox"]) { min-height: 44px; display: inline-flex; align-items: center; } input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; } .cr-edit input[type="checkbox"] { width: 20px; height: 20px; } /* Mobile condition-report step form: full-screen, typeform-style. The bar escapes the ancestor .container's side gutter to sit flush with the physical screen edges; the fields below keep that gutter for readability. */ .cr-stepbar { margin: 0 calc(var(--gutter) * -1); background: var(--bg); border-bottom: 1px solid var(--line); } .cr-stepform-body .input, .cr-stepform-body .select, .cr-stepform-body textarea.input { font-size: 16px; /* below 16px, iOS Safari auto-zooms on focus */ } /* The hamburger, morphing into a cross. Three bars that rotate and collapse rather than one icon swapped for another. */ .burger { position: relative; width: 20px; height: 14px; display: inline-block; } .burger > span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .18s ease, top .28s cubic-bezier(.16,1,.3,1); } .burger > span:nth-child(1) { top: 0; } .burger > span:nth-child(2) { top: 6px; } .burger > span:nth-child(3) { top: 12px; } .burger.is-open > span:nth-child(1) { top: 6px; transform: rotate(45deg); } .burger.is-open > span:nth-child(2) { opacity: 0; transform: scaleX(.4); } .burger.is-open > span:nth-child(3) { top: 6px; transform: rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .burger > span { transition: none; } .mobile-menu > * { animation: none !important; } } /* Mobile menu footer: the quote button leads, the theme toggle sits beside it at the same height rather than floating as a small circle against a pill. */ .menu-actions { display: flex; gap: 10px; align-items: stretch; } .menu-actions > a, .menu-actions > button { min-height: 52px; } .menu-actions > a.btn { flex: 1 1 auto; justify-content: space-between; padding-inline: 22px; } .menu-theme { flex: 0 0 52px; width: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; } .menu-theme:hover { border-color: var(--ink-mute); } /* ── Category strip ─────────────────────────────────────────────────────── The chips used to be clipped by the container's own edge, so on a phone the last one was cut in half with nothing to suggest it scrolled. The row now scrolls edge to edge with the gutter as its own padding, so the final chip can reach the middle of the screen, and a fade on the right says there is more. */ .chipstrip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-elev); position: relative; } .chipstrip::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: linear-gradient(to right, transparent, var(--bg-elev)); pointer-events: none; } .chipstrip-row { display: flex; gap: 8px; padding: 16px var(--gutter); white-space: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--gutter); overscroll-behavior-x: contain; } .chipstrip-row::-webkit-scrollbar { display: none; } .chipstrip-row > * { scroll-snap-align: start; flex: 0 0 auto; } /* The last chip gets room to scroll clear of the fade. */ .chipstrip-row::after { content: ""; flex: 0 0 26px; } /* ── The inspection verdict, on the public unit page ────────────────────── Reads as a findings sheet, not marketing: ruled cells, mono labels, and orange used only where something needs attention. The whole point is that the faults are visible, so they are not styled away. */ .verdict-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 18px; } .verdict-head > div { background: var(--bg-elev); padding: 14px 16px; } .verdict-fact { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 19px; line-height: 1.15; margin-top: 7px; letter-spacing: -0.01em; } .verdict-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); font-weight: 500; } .verdict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .verdict-cell { background: var(--bg-elev); padding: 15px 16px; border-left: 3px solid transparent; } .verdict-cell.is-attention { border-left-color: var(--accent); } .verdict-cell.is-checked { border-left-color: var(--line-strong); } .verdict-cell.is-none { background: var(--bg); } .verdict-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } .verdict-state { font-size: 15px; font-weight: 600; margin-top: 6px; } .verdict-cell.is-attention .verdict-state { color: var(--accent); } .verdict-cell.is-none .verdict-state { color: var(--ink-dim); font-weight: 500; font-style: italic; } .verdict-note { font-size: 13px; color: var(--ink-mute); line-height: 1.5; margin: 7px 0 0; } .verdict-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 12px; } .verdict-photos figure { margin: 0; } .verdict-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev); } .verdict-photos figcaption { font-size: 12.5px; color: var(--ink-mute); margin-top: 7px; line-height: 1.45; } .verdict-foot { font-size: 13.5px; color: var(--ink-mute); line-height: 1.6; margin: 22px 0 0; max-width: 68ch; } @media (max-width: 620px) { .verdict-grid, .verdict-head { grid-template-columns: 1fr 1fr; } .verdict-photos { grid-template-columns: 1fr 1fr; gap: 10px; } } /* Grade and yes/no pickers for the lender's condition report. Sized for a gloved thumb in a yard: every option is its own 44px target, and the row wraps rather than shrinking the targets to fit. */ .cr-grades { display: flex; gap: 6px; flex-wrap: wrap; } .cr-grade { flex: 1 1 auto; min-width: 72px; min-height: 44px; padding: 0 12px; background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line); border-radius: 10px; font-family: var(--sans); font-size: 14px; cursor: pointer; } .cr-grade.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); } .cr-grade:hover:not(.is-on) { border-color: var(--ink-mute); } .cr-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); } .cr-subhead { margin: 22px 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } /* A section that stays shut until someone needs it. The summary is the whole 44px row, so it is a target you can hit with a glove. */ .cr-fold { margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elev); } .cr-fold > .cr-fold-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 20px; cursor: pointer; list-style: none; } .cr-fold > .cr-fold-head::-webkit-details-marker { display: none; } .cr-fold-title { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 20px; letter-spacing: -0.01em; } .cr-fold-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .cr-fold[open] > .cr-fold-head { border-bottom: 1px solid var(--line); } .cr-fold > .cr-fold-head::after { content: "+"; font-family: var(--mono); font-size: 18px; color: var(--ink-mute); line-height: 1; } .cr-fold[open] > .cr-fold-head::after { content: "\2212"; } /* The fieldset inside already carries the card, so drop its second border. */ .cr-fold .cr-section { border: none; background: transparent; margin-top: 0; } /* ── Unit documents (repair order · lender invoice · sale agreement) ─────── Same ledger vocabulary as the console. The editor is all `cr-no-print`, so the paper below the fold is exactly what comes out of the printer. */ .doc-crumb { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .doc-crumb .is-here { color: var(--ink); } /* A breadcrumb here is a navigation row, not a link inside a sentence, so it holds the same 44px the rest of the console does. */ .doc-crumb a { display: inline-flex; align-items: center; min-height: 44px; } .doc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin: 14px 0 20px; } .doc-title { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: clamp(32px, 6vw, 46px); line-height: 1; margin: 0; letter-spacing: -0.02em; } .doc-blurb { margin: 8px 0 0; color: var(--ink-mute); font-size: 14px; max-width: 56ch; } .doc-actions { display: flex; gap: 10px; flex-wrap: wrap; } .doc-switch { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 22px; } .doc-switch-item { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; color: var(--ink-mute); text-decoration: none; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .doc-switch-item.is-on { color: var(--ink); border-bottom-color: var(--accent); } .doc-h { margin: 24px 0 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } .doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .doc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .doc-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .doc-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); } .doc-warn { padding: 12px 14px; border-left: 2px solid var(--accent); background: var(--bg-elev); color: var(--ink-mute); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; max-width: 70ch; } .doc-err { padding: 12px 14px; border: 1px solid var(--accent); border-radius: 8px; color: var(--ink); font-size: 13.5px; margin-bottom: 16px; } .doc-gate { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); color: var(--ink-mute); font-size: 14px; line-height: 1.6; max-width: 68ch; } .doc-lines { display: flex; flex-direction: column; gap: 8px; } .doc-line { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line); } .doc-line .doc-field { margin-bottom: 0; } .doc-save { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .doc-saved { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .cr-preview-wrap { max-width: 8.5in; margin: 0 auto; padding: 0 16px; } /* Document shortcuts on a unit. Each is a full 44px row on any pointer. */ .doc-links { display: grid; gap: 8px; } .doc-link { display: flex; flex-direction: column; gap: 3px; justify-content: center; min-height: 56px; padding: 10px 14px; text-decoration: none; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); } .doc-link:hover { border-color: var(--ink-mute); } .doc-link-name { font-size: 14px; color: var(--ink); font-weight: 500; } .doc-link-blurb { font-size: 12.5px; color: var(--ink-mute); } @media (max-width: 900px) { /* A repair line becomes a card: the row has six fields and none of them survive being a sixth of a phone screen. */ .doc-line { grid-template-columns: 1fr 1fr; } .doc-line > .doc-field:first-child { grid-column: 1 / -1; } .doc-line .qbtn { grid-column: 1 / -1; justify-self: start; min-height: 44px; } .doc-switch-item { flex: 1 1 auto; justify-content: center; } } /* ── Conversion + accessibility additions (ironclad-conversion-dms) ───────── */ /* Visible focus for every interactive element (keyboard users). */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible, .chip:focus-visible { outline-offset: 2px; } a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; } /* Links that wrap cards must not inherit underline/colour. */ a.card-link { color: inherit; text-decoration: none; display: block; } a.btn { text-decoration: none; } /* Touch targets: chips and small toggles are 44px on touch devices. */ @media (pointer: coarse), (max-width: 1024px) { .chip { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } .btn { min-height: 44px; } } /* Request pricing (where a price used to be). */ .req-price { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--accent); white-space: nowrap; text-decoration: none; } /* Standing on its own it is a real link, so give it a real hit area. */ a.req-price { min-height: 44px; padding: 4px 0; } a.req-price:hover { text-decoration: underline; } /* Status pills. */ .pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; line-height: 1.2; background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line-strong); } .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .pill-available { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .pill-available::before { background: var(--accent); } .pill-pending { color: var(--ink); background: var(--bg-elev-2); } .pill-sold { color: var(--ink-dim); background: transparent; border-style: solid; } .pill-draft { color: var(--ink-mute); border-style: dashed; background: transparent; } /* Floating WhatsApp on small screens. Sits above the sticky detail bar. */ /* A circular icon button in the site's own ink. The previous version was a WhatsApp-green pill with the word "WhatsApp" set in it, which fought the bone-and-orange palette on every mobile page. The mark alone is recognised; the brand colour was doing nothing except shouting. */ .wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,0.22); transition: transform .15s ease; } .wa-float:hover { transform: translateY(-1px); } .wa-float:active { transform: translateY(0); } .wa-float.wa-float-raised { bottom: calc(84px + env(safe-area-inset-bottom)); } /* Placeholder-contact warning (admin only). */ .placeholder-banner { background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; padding: 8px var(--gutter); text-align: center; } /* Reduced motion: stop marquees, fades and the hero video. */ @media (prefers-reduced-motion: reduce) { .marquee, .fleet-marquee { animation: none !important; } .page-enter { animation: none !important; } .mobile-menu, .mobile-backdrop { animation: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ── Admin console ── */ /* Direction recorded in .21st/design.json. Hairline rules, tabular mono numerics, serif for the title and unit names only, orange reserved for Public, primary actions and the unhandled count. Tokens only. */ .yc { padding-bottom: 120px; font-family: var(--sans); } .yc-phone { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .yc-wrap { padding-top: 28px; } .yc-checking { padding: 80px 0; color: var(--ink-mute); font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; } .yc-strip { height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .yc-strip-warn { background: var(--accent); color: var(--accent-ink); } .yc-strip-ink { background: var(--ink); color: var(--bg); } .yc-eyebrow { font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; gap: 8px; align-items: center; } .yc-label { display: block; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; } .yc-note { color: var(--ink-mute); font-size: 14px; line-height: 1.5; margin: 0 0 12px; } .yc-error { color: var(--accent); font-family: var(--mono); font-weight: 600; font-size: 15px; margin-top: 8px; } .yc-error-block { margin: 0 0 16px; padding: 12px 14px; border-left: 2px solid var(--accent); background: var(--bg-elev); font-family: var(--sans); font-size: 14px; color: var(--ink); } .is-muted { color: var(--ink-mute); font-style: italic; font-weight: 400; } .ta-r { text-align: right; } /* head */ .yc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--ink); } .yc-title { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.02em; line-height: 1; margin: 8px 0 12px; } .yc-title em { font-style: italic; color: var(--accent); } .yc-figures { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .yc-figures b { color: var(--ink); font-weight: 500; } .yc-figures .is-hot b { color: var(--accent); } .yc-tools { display: flex; gap: 8px; flex-wrap: wrap; } /* tabs (desktop) */ .yc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .yc-tab { position: relative; min-height: 48px; padding: 0 18px; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-mute); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .yc-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); } .yc-count { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; padding: 2px 6px; background: var(--accent); color: var(--accent-ink); border-radius: 2px; } /* toolbar */ .yc-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 20px 0 12px; } .yc-search { flex: 1 1 240px; min-height: 44px; } .yc-storage { font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; } .yc-storage.is-hot { color: var(--accent); } .yc-empty { padding: 40px 16px; text-align: center; color: var(--ink-mute); font-size: 14px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); } .yc-loadmore { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 20px 0; flex-wrap: wrap; } .yc-phone-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); } /* quiet mono button (shared) */ /* .qbtn = neutral in-place action · .qbtn-nav = leaves this screen · .qbtn-pull = pulls data in · .is-danger = destructive / reverts */ .qbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; background: transparent; border: 1px solid var(--line); border-radius: 3px; font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.05em; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color 0.15s, background 0.15s; } .qbtn:hover { border-color: var(--line-strong); background: var(--bg-elev); } .qbtn.is-danger { color: var(--accent); } .qbtn.is-danger:hover { border-color: var(--accent); } .qbtn-nav { background: transparent; border-color: var(--accent); color: var(--accent); } .qbtn-nav:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .qbtn-pull { background: var(--line); border-color: var(--line); color: var(--ink); } .qbtn-pull:hover { background: color-mix(in srgb, var(--ink) 10%, var(--line)); } .qbtn-lg { min-height: 44px; flex: 1; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* status stepper */ .step { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--bg); } .step-btn { min-height: 40px; padding: 0 10px; background: transparent; border: none; border-right: 1px solid var(--line); font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink-mute); cursor: pointer; white-space: nowrap; } .step-btn:last-child { border-right: none; } .step-btn:hover { background: var(--bg-elev); color: var(--ink); } .step-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .step-btn[aria-pressed="true"].is-pending { background: var(--bg-elev-2); color: var(--ink); } .step-btn[aria-pressed="true"].is-draft { background: transparent; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; } .step-lg { display: flex; width: 100%; } .step-lg .step-btn { flex: 1; min-height: 44px; font-size: 13px; } /* public stamp */ .stamp { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: transparent; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; } button.stamp:hover { border-color: var(--line-strong); color: var(--ink); } .stamp.is-on { border-color: var(--accent); color: var(--accent); } .stamp[aria-disabled="true"] { cursor: default; } /* ledger (desktop) */ .ledger { border-top: 1px solid var(--ink); } .ledger-head, .ledger-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 96px 150px 100px 160px; gap: 14px; align-items: center; padding: 10px 8px; } .ledger[data-admin="1"] .ledger-head, .ledger[data-admin="1"] .ledger-row { grid-template-columns: 56px minmax(0, 1fr) 96px 150px 100px 120px 160px; } .ledger-head { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); padding-top: 12px; padding-bottom: 8px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .ledger-row { border-bottom: 1px solid var(--line); transition: background 0.12s; } .ledger-row:hover, .ledger-row.is-editing { background: var(--bg-elev); } .ledger-thumb { width: 56px; height: 42px; overflow: hidden; border-radius: 2px; background: var(--bg-elev-2); } .ledger-thumb .ph-photo, .ledger-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ledger-unit { min-width: 0; } .ledger-name { font-family: var(--display); font-size: 19px; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ledger-meta { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .ledger-num { font-family: var(--mono); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ledger-shown { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .ledger-actions { display: flex; gap: 6px; justify-content: flex-end; } /* condition-reports index: same ledger, report columns */ .ledger-reports .ledger-head, .ledger-reports .ledger-row { grid-template-columns: minmax(0, 2.2fr) 170px 150px 84px 88px 100px 216px; } .cr-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; text-transform: none; letter-spacing: 0; white-space: normal; overflow: visible; } .cr-stock-chip { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 3px; background: var(--ink); color: var(--bg); } .cr-stock-chip.is-empty { background: transparent; color: var(--ink-mute); border: 1px dashed var(--line-strong); } .cr-card-vin { font-family: var(--mono); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); } .cr-progress { display: flex; align-items: center; gap: 10px; min-width: 0; } .cr-progress-track { flex: 1 1 80px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .cr-progress-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .cr-progress.is-done .cr-progress-fill { background: var(--ink); } .cr-progress-label { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; } .cr-progress.is-done .cr-progress-label { color: var(--ink); } /* stock cards (phone) */ .stock-list { border-top: 1px solid var(--ink); } .stock-card { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; } .stock-card.is-editing { background: var(--bg-elev); } .stock-card-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } .stock-card-thumb { width: 96px; height: 72px; overflow: hidden; border-radius: 2px; background: var(--bg-elev-2); } .stock-card-thumb .ph-photo, .stock-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .stock-card-id { min-width: 0; } .stock-card-id .ledger-name { white-space: normal; font-size: 20px; } .stock-card-flags { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .stock-card-actions { display: flex; gap: 8px; } /* bottom bar (phone) — equal-width flex items, never scrolls. Count badges sit as a small corner dot instead of inline text so they never compete with the label for a share of an already-tight ~70-80px column. */ .yc-bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; background: var(--bg); border-top: 1px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); } .yc-bottombar > a, .yc-bottombar > button { flex: 1 1 0; min-width: 0; position: relative; min-height: 56px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-right: 1px solid var(--line); text-decoration: none; cursor: pointer; padding: 0 4px; } .yc-bottombar > :last-child { border-right: none; } .yc-bottombar > [aria-current="page"] { color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); } .yc-bottombar-label { font-family: var(--sans); font-size: 11px; font-weight: 600; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .yc-bottombar-n { position: absolute; top: 6px; right: 6px; font-family: var(--mono); font-weight: 600; font-size: 10px; line-height: 1; min-width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; border-radius: 999px; } .yc-bottombar-n.is-hot { color: var(--accent-ink); background: var(--accent); } /* toast */ /* The editor is a full-screen overlay at z-index 9998, so an error rendered in the page body underneath it was invisible on a phone: every failed save, upload and publish looked like a button that did nothing. Errors and the toast both float above it now. */ .yc-error-fixed { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top)); z-index: 10001; width: min(560px, calc(100vw - 24px)); margin: 0; border: 1px solid var(--accent); border-left-width: 3px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.28); } /* Kept in the layout rather than display:none — iOS Safari will not always open a file picker for an input it considers undisplayed. */ .visually-hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .yc-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10000; padding: 10px 16px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; } .yc-phone .yc-toast { bottom: calc(72px + env(safe-area-inset-bottom)); } /* sign-in */ /* Now that staff routes drop the marketing header and footer, this is the whole page — so it centres on both axes instead of sitting hard left under a nav that is no longer there. */ .yc-signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px var(--gutter); } .yc-signin-form { width: min(420px, 100%); } .yc-signin-title { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: clamp(44px, 6vw, 72px); letter-spacing: -0.02em; line-height: 0.95; margin: 12px 0 16px; } .yc-signin-title em { font-style: italic; color: var(--accent); } /* Sign-in alternates: reset and magic-link, reachable without leaving the form. Buttons rather than links because they switch mode, they do not navigate. */ .yc-signin-alt { margin-top: 14px; text-align: center; font-family: var(--sans); font-size: 14px; color: var(--ink-mute); } .yc-linkbtn { background: none; border: 0; padding: 8px 4px; min-height: 40px; font: inherit; color: var(--ink-mute); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .yc-linkbtn:hover, .yc-linkbtn:focus-visible { color: var(--accent); } .yc-back { display: inline-block; margin-top: 20px; font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; } .yc-back:hover { color: var(--ink); } /* inquiries */ /* Overdue inquiries. The bar is the first thing in the inbox because the report that counts them lives two taps away, and nobody opens a report to find out they have lost a lead. */ .inq-late-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 10px; background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--ink); text-align: left; cursor: pointer; min-height: 48px; font-family: var(--sans); font-size: 14px; } .inq-late-bar.is-on { background: color-mix(in oklch, var(--accent) 22%, transparent); } .inq-late-bar b { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 22px; line-height: 1; color: var(--accent); } .inq-late-bar em { margin-left: auto; font-style: normal; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .inq-age { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); } .inq-age.is-late { color: var(--accent); } .inq-row.is-late { background: color-mix(in oklch, var(--accent) 7%, transparent); } .inq-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0 8px; } .inq-toggle { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: 13px; cursor: pointer; } .inq-list { border-top: 1px solid var(--ink); } .inq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 12px; border-bottom: 1px solid var(--line); } .inq-row.is-open { box-shadow: inset 2px 0 0 var(--accent); } .inq-row.is-done { color: var(--ink-mute); } .inq-row.is-done .inq-unit { color: var(--ink-mute); } .inq-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .inq-time { font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .inq-unit { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; margin-top: 6px; } .inq-contact { margin-top: 6px; font-size: 14px; } .inq-contact a { color: inherit; padding: 4px 2px; margin: -4px -2px; display: inline-block; } .inq-meta { margin-top: 2px; font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-mute); } .inq-msg { margin: 8px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; max-width: 68ch; } @media (max-width: 1024px) { .inq-row { grid-template-columns: 1fr; } .inq-row .qbtn { justify-self: start; min-height: 44px; } } /* editor */ .editor { position: fixed; inset: 0; z-index: 9998; } .editor-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); border: none; padding: 0; cursor: default; } .editor-panel { position: absolute; top: 0; bottom: 0; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; } .editor-drawer .editor-panel { right: 0; width: min(680px, 100vw); border-left: 1px solid var(--ink); } .editor-full .editor-panel { left: 0; right: 0; width: 100%; } .editor-top { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 12px 20px 0; border-bottom: 1px solid var(--ink); } .editor-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; } .editor-stock { font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; color: var(--ink-mute); } .editor-close { min-width: 44px; min-height: 44px; background: transparent; border: none; font-size: 26px; color: var(--ink-mute); cursor: pointer; } .editor-close:hover { color: var(--ink); } .editor-name { font-family: var(--display); font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; margin: 8px 0 8px; } .editor-blockers { font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 10px; } .editor-seg-wrap { position: relative; margin: 0 -20px; } .editor-seg-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg)); } .editor-seg { display: flex; overflow-x: auto; padding: 0 20px; scrollbar-width: none; } .editor-seg::-webkit-scrollbar { display: none; } .editor-seg-btn { min-height: 44px; padding: 0 14px; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-mute); cursor: pointer; white-space: nowrap; } @media (max-width: 700px) { .editor-seg-btn { padding: 0 10px; } } .editor-seg-btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); } .editor-body { padding: 20px; flex: 1; } .editor-foot { position: sticky; bottom: 0; background: var(--bg); padding: 12px 20px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; } .editor-full .editor-foot .btn-row { flex: 1; justify-content: flex-end; } /* forms */ .form-col { display: flex; flex-direction: column; gap: 18px; } .form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-2-end { align-items: end; } @media (max-width: 480px) { .form-2 { grid-template-columns: 1fr; } } .field { display: block; } .yc-input, .yc .input, .yc .select, .shell-main .input, .shell-main .select { min-height: 44px; border-radius: 3px; } .yc textarea.input, .shell-main textarea.input { min-height: 0; } .summary-input { font-size: 15px; line-height: 1.5; } .counter { display: block; margin-top: 6px; font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .counter.is-short { color: var(--accent); } .check-row { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 14px; cursor: pointer; } .check-row input { width: 18px; height: 18px; accent-color: var(--ink); } .ledger-block { border: 1px solid var(--line); border-radius: 3px; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 6px; margin: 0; } .ledger-block legend { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); padding: 0 6px; } .ledger-block.is-locked { opacity: 0.7; } /* Financing settings: APR/Down payment/Budget side by side on wide screens instead of stacked in a narrow column — the panel has room to spare. */ /* More breathing room than the default .ledger-block padding — the content was sitting right up against the outer border ("too close to the line"). */ .fin-panel { padding: 20px 24px 24px; gap: 16px; } .fin-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } @media (max-width: 900px) { .fin-groups { grid-template-columns: 1fr; } } .grade-seg { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .grade-btn { flex: 1; min-height: 44px; background: transparent; border: none; border-right: 1px solid var(--line); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-mute); cursor: pointer; } .grade-btn:last-child { border-right: none; } .grade-btn:hover { background: var(--bg-elev); color: var(--ink); } .grade-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); } /* photos */ .photos { display: flex; flex-direction: column; gap: 16px; } .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 3px; background: var(--bg); cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; } .dropzone.is-over, .dropzone:hover { border-color: var(--accent); background: var(--bg-elev); } .dropzone-cta { font-family: var(--mono); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .dropzone-hint { font-size: 13px; color: var(--ink-mute); } .photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1024px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .photo-tile { margin: 0; display: flex; flex-direction: column; gap: 6px; } .photo-tile.is-dragging { opacity: 0.5; } .photo-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--bg-elev-2); border: 1px solid var(--line); } .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-cover { position: absolute; top: 6px; left: 6px; padding: 2px 6px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; } .photo-n { position: absolute; bottom: 6px; right: 6px; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; color: var(--bg); background: var(--ink); padding: 1px 5px; border-radius: 2px; font-variant-numeric: tabular-nums; } .photo-caption { min-height: 40px; padding: 8px 10px; font-size: 13px; } .photo-ctl { display: flex; gap: 4px; flex-wrap: wrap; } .photo-ctl .qbtn { min-height: 40px; padding: 0 8px; } @media (pointer: coarse), (max-width: 1024px) { .photo-ctl .qbtn { min-height: 44px; } } /* Phone hit sizes: later than the base rules so they win at equal specificity. */ @media (pointer: coarse), (max-width: 1024px) { .qbtn, .stamp, .step-btn, .photo-ctl .qbtn { min-height: 44px; } } /* Inline text links: breadcrumbs and the footer contact block. WCAG 2.2 AA 2.5.8 exempts inline links from the 24px minimum, but a 14px tap target is uncomfortable on any device, so give them a real hit area without changing how they look. Coarse pointers get the full 44px. */ .crumbs a { display: inline-block; padding: 5px 0; min-height: 24px; } footer p a, .contact-details a { display: inline-block; padding: 3px 0; min-height: 24px; } @media (pointer: coarse), (max-width: 1024px) { .crumbs a { padding: 12px 0; min-height: 44px; } footer p a, .contact-details a { padding: 11px 0; min-height: 44px; } } /* Remaining small targets at phone width: the footer column links and the wordmark link back to home. Same rule as the rest: 24px minimum always, 44px once the viewport is phone-sized or the pointer is coarse. */ footer li a { min-height: 24px; } a[aria-label^="IronClad Equipment"] { min-height: 44px; } @media (pointer: coarse), (max-width: 1024px) { footer li a { padding: 11px 0; min-height: 44px; } } /* Carousel position dots: the dot is 8px, the target is 44px. */ .gal-dot { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; } /* No-photo state for a unit. Deliberately a line drawing, never a photograph: a stock image standing in for real iron is the kind of thing a buyer should be able to trust a dealer not to do. */ .ph-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg-elev); border: 1px dashed var(--line-strong); color: var(--ink-dim); } .ph-empty-art { width: 46%; max-width: 190px; opacity: 0.32; } .ph-empty-art svg { width: 100%; height: auto; display: block; } .ph-empty-note { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); } /* ── Console shell ────────────────────────────────────────────────────── Persistent sidebar wrapping every staff screen (admin-shell.jsx). Same token layer as the rest of the console — no new colours or type faces. */ .shell-desk { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; align-items: start; } .shell-side { display: flex; flex-direction: column; padding: 24px 20px; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .shell-word { display: inline-flex; align-items: center; margin-bottom: 28px; color: var(--ink); text-decoration: none; } .shell-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .shell-nav-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 6px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-mute); text-decoration: none; } .shell-nav-link:hover { background: var(--bg-elev); color: var(--ink); } .shell-nav-link[aria-current="page"] { background: var(--ink); color: var(--bg); } .shell-nav-count { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; padding: 2px 6px; background: var(--accent); color: var(--accent-ink); border-radius: 2px; } .shell-nav-link[aria-current="page"] .shell-nav-count { background: var(--bg); color: var(--ink); } .shell-side-foot { padding-top: 18px; border-top: 1px solid var(--line); margin-top: 20px; display: flex; flex-direction: column; gap: 14px; } .shell-identity { display: flex; align-items: center; gap: 10px; min-width: 0; } .shell-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 600; font-size: 13px; } .shell-identity-text { min-width: 0; } .shell-role { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); } .shell-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .shell-side-actions .qbtn { justify-content: center; padding: 0 8px; } .shell-signout { width: 100%; justify-content: center; } .shell-main { padding: clamp(20px, 3vw, 40px); min-width: 0; } .shell-phone .shell-main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); } /* filter pills — shared by Inventory's status filter and Inquiries' open/all */ .yc-filters { display: flex; gap: 6px; flex-wrap: wrap; } .yc-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-mute); cursor: pointer; } .yc-pill:hover { border-color: var(--line-strong); color: var(--ink); } .yc-pill.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); } .yc-pill-n { font-family: var(--mono); font-weight: 600; font-size: 11px; opacity: 0.7; } /* live/public toggle — track + knob, replaces the old text-pill .stamp */ .live-switch { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 0; cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .live-switch[aria-disabled="true"] { cursor: default; } .live-switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line); transition: background 0.15s; flex-shrink: 0; } .live-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.15s; } .live-switch.is-on .live-switch-track { background: var(--accent); } .live-switch.is-on .live-switch-knob { transform: translateX(14px); } .live-switch.is-on { color: var(--accent); } /* inline status select in the ledger row (replaces the segmented StatusStepper there) */ .yc-status-select { min-height: 40px; padding: 0 8px; font-size: 13px; } /* Blocked-reason pills — used in the unit drawer's live-status box */ .yc-blocked-pills { display: flex; gap: 4px; flex-wrap: wrap; } .yc-blocked-pill { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 2px 6px; white-space: nowrap; } /* unit drawer's persistent header — compact thumbnail + name/meta, then the live-status box, shown above all 5 tabs. A full-bleed hero photo here ate too much vertical space before the actually-useful controls (feedback: "very crunched... the top image display above the title messes it up"). */ .editor-id { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .editor-thumb { flex: 0 0 64px; width: 64px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--bg-elev-2); border: 1px solid var(--line); } .editor-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .editor-id-text { min-width: 0; } .editor-manage-link { background: none; border: none; font: inherit; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 10px 4px; margin: -10px -4px; } .editor-manage-link:hover { color: var(--ink); } .editor-live { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; } .editor-live-title { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); flex: 1 1 auto; } @media (max-width: 1024px) { .shell-phone { display: block; } } /* ── Operational reports ────────────────────────────────────────────────── Same ledger vocabulary as the units console: ruled rows, mono numerics, orange reserved for what needs attention. Stacks on a phone, every control at least 44px on a coarse pointer. */ /* Standalone-screen spacing (yard-console-admin-redesign, task 4.3): OpsReports is promoted from an embedded Admin tab to its own top-level route (rendered by AdminSummaryPage, directly under AdminShell's bare
). The horizontal content-area gutter is the shell's job (AdminShell/.shell-main), the same convention every other console route (Inventory, Inquiries, Financing) now relies on rather than each screen re-adding its own — so ".ops-page" adds no side padding of its own. What it did lack for standalone use is breathing room under the page header it now sits directly beneath (no more embedded .yc-tabs bar in between): match the ".yc-toolbar" top-margin convention used elsewhere right after ".yc-head" instead of the old nested-tab-tuned 8px bottom-only gap. */ .ops-page { margin-top: 20px; padding-bottom: 20px; } .ops-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .ops-tab { flex: 0 0 auto; min-height: 44px; padding: 0 14px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--ink-mute); font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; margin-bottom: -1px; } .ops-tab.is-on { color: var(--ink); border-bottom-color: var(--accent); } .ops-why { margin: 0 0 16px; color: var(--ink-mute); font-size: 13.5px; max-width: 64ch; } .ops-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 20px; } .ops-figures > div { background: var(--bg-elev); padding: 12px 14px; } .ops-figures b { display: block; font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .ops-figures span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; } .ops-figures .is-hot b, .ops-figures .is-good b { color: var(--accent); } .ops-figures .is-warn b { color: var(--ink); } .ops-figures .is-warn span { color: var(--accent); } .ops-h { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 22px 0 8px; font-weight: 500; } .ops-list { border-top: 1px solid var(--line); } .ops-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); } .ops-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ops-stock { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); } .ops-name { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ops-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute); } .ops-blockers, .ops-nums { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .ops-nums span { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; } .ops-nums b { color: var(--ink); font-weight: 600; } .ops-nums .is-good b { color: var(--accent); } .ops-nums .is-warn { color: var(--accent); } .ops-need { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 3px 7px; white-space: nowrap; } .ops-has { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px; } .ops-control { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .ops-control label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .ops-control .select { width: auto; min-height: 44px; } .ops-control-note { font-size: 13px; color: var(--ink-mute); } /* Says what the report cannot tell you yet, and why. Reads as a note, not an error: the data is missing, nothing is broken. */ .ops-gap { margin: 0 0 18px; padding: 12px 14px; max-width: 70ch; border-left: 2px solid var(--accent); background: var(--bg-elev); color: var(--ink-mute); font-size: 13.5px; line-height: 1.55; } @media (pointer: coarse), (max-width: 1024px) { /* On a phone each unit becomes a card: name, then what it needs, then the action. */ .ops-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; } .ops-blockers, .ops-nums { justify-content: flex-start; } .ops-row .qbtn { justify-self: start; min-height: 44px; } .ops-figures { grid-template-columns: repeat(2, 1fr); } /* An odd count leaves a dead half-cell in a two-column grid. Let the last figure take the full row instead of sitting next to nothing. */ .ops-figures > div:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 620px) { /* Four tabs do not fit one phone row, and the fourth scrolled off-screen with nothing peeking, so nobody would know it was there. Two rows, all four visible, same underline-means-active vocabulary. */ .ops-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow-x: visible; border-bottom: none; margin-bottom: 14px; } .ops-tab { padding: 0 8px; margin-bottom: 0; text-align: left; border-bottom: 2px solid var(--line); } .ops-tab.is-on { border-bottom-color: var(--accent); } } /* ── Admin console mobile pass ───────────────────────────────────────── Placed last so it wins the cascade over every base rule above without needing !important. live-switch's own track is only 20px tall and .yc-pill sits at 36px — both real tap targets, not decoration, so they need the same 44px floor the rest of the console already uses. Admin inputs/selects are 15px/13px, under the 16px iOS Safari threshold that triggers zoom-on-focus — bumping them to 16px on a coarse pointer keeps the keyboard from yanking the viewport around mid-edit. */ @media (pointer: coarse), (max-width: 1024px) { .live-switch { min-height: 44px; padding: 0 4px; } .yc-pill { min-height: 44px; } .shell-main .input, .shell-main .select, .yc-status-select { font-size: 16px; } }