` is a row group element with no CSS box of its own, so
* box-shadow on it doesn't paint reliably across browsers. Use an inset
* outline for keyboard-focusable rows (those carrying tabindex). */
.table tbody tr[tabindex]:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
box-shadow: none;
}
/* Two-column split utilities. Use these instead of inline
* `grid-template-columns: …` so the layout collapses to one column
* on phone without each page needing its own media query.
* .split-asym → 1.4fr / 1fr (main content + side panel)
* .split-even → 1fr / 1fr (paired form fields)
* Both fall back to a single column under 720px. */
/* minmax(0, …) everywhere: a bare `1fr` is minmax(auto, 1fr), so a
* wide child (data table, long unbreakable string) propagates its
* min-content into the track and pushes the grid past the viewport —
* seen at 961–1240px where the inventory table blew the 1.4fr column
* out by 240px+. minmax(0, …) keeps the ratio but lets children
* shrink (tables then scroll inside .table-wrap as designed). */
.split-asym {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 20px;
}
.split-even {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px 24px;
}
@media (max-width: 720px) {
.split-asym, .split-even { grid-template-columns: minmax(0, 1fr); }
}
/* Skip-link: visually hidden until focused. Lets keyboard users jump
* past the topbar + sidebar straight into main content. */
.skip-link {
position: absolute;
top: -40px; left: 8px;
z-index: 100;
background: var(--color-bg-elevated);
color: var(--color-ink);
border: 1px solid var(--color-border-strong);
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: top 100ms;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 8px;
outline: none;
box-shadow: var(--ring);
}
/* ============== RESPONSIVE ============== */
@media (max-width: 960px) {
.hero-a { grid-template-columns: 1fr; gap: 48px; }
.why-grid { grid-template-columns: 1fr; gap: 48px; }
/* minmax(0, …): the card's min-content (preview tables) must not
* widen the track past the viewport. */
.how-grid { grid-template-columns: minmax(0, 1fr); }
.quote-grid { grid-template-columns: 1fr; }
.pricing-grid { grid-template-columns: minmax(0, 1fr); }
.stat-band-grid { grid-template-columns: 1fr; gap: 40px; }
.stat-band { padding: 56px 0; }
.auth-grid { grid-template-columns: 1fr; }
.auth { padding: 64px 0; }
.logo-strip { grid-template-columns: repeat(3, 1fr); }
.public-footer .container { grid-template-columns: 1fr 1fr; gap: 32px; }
.preview-head { flex-direction: column; align-items: flex-start; }
.public-nav .nav-center { display: none; }
.public-nav { padding: 0 20px; }
.container { padding: 0 20px; }
section { padding: 64px 0; }
.hero { padding: 64px 0 48px; }
.legal-shell { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px 64px; }
.legal-nav { position: static; }
.docs-shell { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 64px; }
.docs-nav, .docs-toc { position: static; max-height: none; }
.docs-toc { display: none; }
}
@media (max-width: 560px) {
.public-footer .container { grid-template-columns: 1fr; }
.compare { grid-template-columns: 1fr; }
.hero .ctas { flex-direction: column; align-items: stretch; }
.hero .ctas .btn { justify-content: center; }
.final-cta h2 { font-size: 38px; }
/* The 38px price-line ("0% commission") is wider than a 320px card
* can get — one unbreakable word forces the pricing grid past the
* viewport. Scale it down on phones. */
.price-card .price-line { font-size: 30px; }
/* Full-width CTAs ("Create your publisher account") carry labels
* longer than a 320px card — wrap instead of nowrap-overflowing. */
.btn-block { white-space: normal; height: auto; min-height: 44px; text-align: center; }
/* Nav: brand + actions don't fit on one 375px line — let the row
* wrap instead of pushing the account button past the viewport.
* The actions row itself may wrap too (DE labels run longer). */
.public-nav { flex-wrap: wrap; height: auto; min-height: 64px; padding: 10px 16px; row-gap: 4px; }
.public-nav .nav-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
/* CTA rows outside the hero (proof / final-cta) are inline
* `display:flex` without wrap — centered nowrap buttons overflow
* both edges on phones. */
.ctas { flex-wrap: wrap; }
}
/* ============== APP CONSOLE — RESPONSIVE ============== */
/* Tablet (and narrower): collapse the sidebar to a horizontal scroll
* strip above the main content. This keeps every nav link reachable
* without a hamburger toggle (which would need JS in every v2 page). */
@media (max-width: 960px) {
.page-shell.app-layout { flex-direction: column; }
body[data-page="app"] .page-shell { flex-direction: column; }
/* Crumb truncation already at tablet width: between 561 and 960px a
* long outlet/booking name in the breadcrumb otherwise pushes the
* avatar out of the topbar (+13px horizontal scroll). The 560px block
* below only adjusts font-size/separators on top of this. */
.app-topbar .crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.sidebar {
width: 100%;
max-height: none;
position: static;
flex-direction: row;
align-items: center;
overflow-x: auto;
overflow-y: visible;
padding: 8px 12px;
gap: 4px;
border-right: none;
border-bottom: 1px solid var(--color-border);
}
/* Side-section headers ("INVENTORY", "FILTERS") look odd in a row.
* Hide them on the horizontal strip — links carry their own labels. */
.sidebar .side-section { display: none; }
.side-link { white-space: nowrap; flex-shrink: 0; height: 32px; }
.side-link .count { margin-left: 6px; }
.page-content { padding: 20px 16px; }
.page-title { font-size: var(--text-xl); }
/* Tables overflow horizontally instead of forcing the whole page wide.
* Scoped to .table-wrap: decorative mini-tables (how-card previews)
* have no scroll wrapper — a 640px floor there blows the grid track
* and drags the whole page wide. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .table { min-width: 640px; }
.toolbar { flex-wrap: wrap; gap: 8px; }
.toolbar .search { width: 100%; max-width: 320px; }
.subnav { padding: 0 12px; overflow-x: auto; white-space: nowrap; }
.subnav a { flex-shrink: 0; }
/* Topbar search input: shrink + flex so it doesn't push avatar off
* the right edge. Pages set inline width:240px / 280px on these
* inputs; override with !important since inline styles win otherwise. */
.app-topbar .input-search {
width: auto !important;
max-width: 200px;
min-width: 0;
flex: 1;
}
}
/* Phone: tighter padding, simpler stepper, shrink stat cards. */
@media (max-width: 560px) {
.page-content { padding: 16px 12px; }
.page-title { font-size: var(--text-lg); }
.stat { padding: 12px; }
.stat-value { font-size: 22px; }
/* Stepper (used on inventory-create / brief-lab) — drop the connecting
* lines on phone, they don't survive wrapping. */
.stepper { flex-wrap: wrap; gap: 8px; }
.step-sep { display: none; }
/* Topbar: drop everything except brand + breadcrumb tail + avatar.
* The "Buyer / Marketplace / X" crumb truncates the leading parts so
* the active page name remains visible. */
.app-topbar { padding: 0 12px; gap: 8px; }
.app-topbar .h-divider { display: none; }
.app-topbar .crumb { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.app-topbar .crumb .sep { margin: 0 4px; }
/* Allow page authors to opt columns out on phone. Add `class="hide-mobile"`
* to a | / | to hide it below 560px (used sparingly on data-dense
* tables where some cells are reference info, not action info). */
.hide-mobile { display: none; }
/* Topbar: drop the search input + ⌘K shortcut hint on phones.
* The search is rarely tapped on a small screen and pushes the
* avatar off the right edge; users can navigate via the subnav
* instead. Saved-search workflows live in the page body. */
.app-topbar .input-search,
.app-topbar .kbd { display: none; }
/* Buttons: ensure 44x44px minimum tap target on phones. Inputs
* also get a slightly taller minimum so they're easy to focus. */
.btn:not(.btn-sm),
.input,
select,
textarea { min-height: 44px; }
.btn-sm { min-height: 36px; }
/* Hero (landing page): hide the side preview mock on phones — it
* doesn't scale gracefully below ~400px and the hero copy carries
* the message on its own. */
.hero-mock { display: none; }
.hero-a { gap: 0; }
}
/* ============== MOBILE — PAGE-SHELL COLLAPSES ============== */
/* The v2 pages each define their shell layout in inline ` |