/* ═══════════════════════════════════════════════════════════════════════════
Your.Reviews — the style sheet
───────────────────────────────────────────────────────────────────────────
SOURCE OF TRUTH: the homepage (demo/source/index.html, bundle shipped 2 Sep
2026). Every value below was lifted from it, not invented. If this file and
the homepage ever disagree, the homepage is right and this file is wrong.
How to use it on a new page
1. then this file.
2. Wrap the page in .yr-page (it sets the container so cqw units work).
3. Build with the classes here; reach for the tokens (var(--yr-…)) for
anything the classes don't cover. Don't type a colour or a size by hand.
4. Run tools/pagecheck.js on the finished page. It fails on anything that
isn't in this system.
The written rules (why things are the way they are) live in STYLE-GUIDE.md.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Colour ──────────────────────────────────────────────────────────── */
--yr-dark: #323232; /* THE dark SURFACE: the dark tile, the slab's pill, a tooltip, the rating card's head, the gauge track, a primary button's hover (5 Sep 2026: no longer the ink — see --yr-ink) */
--yr-dark-hover: #3a3a3a; /* the dark block one step lighter: the rating card’s head on hover, since it is the jump to the reviews (6 Sep 2026) */
--yr-ink: var(--yr-dark); /* THE ink: headings, body text, marks (5 Sep 2026, the role split for dark mode: in the dark theme the ink goes light while the dark surfaces stay dark, lifted a touch) */
--yr-surface: var(--yr-white); /* the page's and a card's ground (5 Sep 2026: --yr-white stays the colour white; the ground is a role) */
--yr-btn-white: var(--yr-white); /* a white button's ground: white in BOTH modes (Vadim, 5 Sep 2026: "just make that white") */
--yr-btn-white-ink: var(--yr-dark); /* its words */
--yr-slab-pill: var(--yr-dark); /* the slab's sliding pill: the dark in light mode, WHITE in the dark */
--yr-slab-on: var(--yr-white); /* the words on the pill */
--yr-hover-bg: var(--yr-dark); /* the surface law: on a light ground a button hovers to the dark; on the dark ground, to the light grey */
--yr-hover-ink: var(--yr-white);
--yr-primary-hover-bg:var(--yr-dark); /* a purple button's hover: the dark on a light ground, white on the dark (the CTA band's law) */
--yr-primary-hover-ink:var(--yr-white);
--yr-plan-bg: var(--yr-card-on-white); /* the plan tiles (the home page's pricing): a plain tile and the picked, dark tile — the light page inverted in the dark (Vadim, 5 Sep 2026: Base and Premium take the dark, Business takes the white); since 7 Sep 2026 the pricing band is white and a plain tile takes the card-on-white grey — a card takes whichever tone its band is not */
--yr-plan-fg: var(--yr-dark);
--yr-plan-muted: var(--yr-text-muted);
--yr-plan-border: var(--yr-hairline);
--yr-plan-shadow: none;
--yr-plan-dark-bg: var(--yr-dark);
--yr-plan-dark-fg: var(--yr-white);
--yr-plan-dark-muted: var(--yr-on-dark-70);
--yr-plan-dark-border:var(--yr-on-dark-line-16);
--yr-plan-dark-shadow:var(--yr-shadow-tile);
--yr-plan-cta-hover-bg:var(--yr-dark); /* a plain tile's lilac button hovers to the dark; in the dark theme the plain tile is dark, so to white */
--yr-plan-cta-hover-ink:var(--yr-white);
--yr-plan-dark-cta-hover-bg:var(--yr-band); /* the picked tile's purple button hovers to the light grey; in the dark theme the picked tile is white, so to the dark */
--yr-plan-dark-cta-hover-ink:var(--yr-dark);
--yr-lilac-fill: var(--yr-lilac); /* a lilac pill, chip, square or button: lilac in light mode, solid PURPLE in the dark (Vadim, 5 Sep 2026: "that lavender colour doesn't work") */
--yr-lilac-fill-line: var(--yr-lilac-line);
--yr-lilac-fill-ink: var(--yr-purple-ink); /* its words: purple ink on lilac, white on purple */
--yr-lilac-soft-fill: var(--yr-lilac-soft); /* the step-number chip: the same law */
--yr-lilac-soft-ink: var(--yr-purple-deep);
--yr-strip-bg: var(--yr-lilac); /* the strip (the price alert, the owner's claim): lilac in light mode, an off-white card in the dark */
--yr-strip-title: var(--yr-ink);
--yr-strip-copy: var(--yr-purple-ink);
--yr-strip-btn-hover-bg:var(--yr-dark); /* the strip's purple button hovers to the dark in both modes: it always sits on a light ground */
--yr-strip-btn-hover-ink:var(--yr-white);
--yr-ghost-on-dark-bg: transparent; /* the ghost button on a dark panel (Contact sales): clear with a 24% white line in light mode; in the dark it IS the white button — one shade for every non-purple button (Vadim, 5 Sep 2026) */
--yr-ghost-on-dark-line:var(--yr-on-dark-btn-line);
--yr-ghost-on-dark-ink: var(--yr-on-dark);
--yr-slab-on-soft: var(--yr-on-dark-70); /* the quieter words on the pill (a menu's label and chevron, a row's count) */
--yr-menu-hover-bg: var(--yr-band); /* a menu button's soft hover: the band in light mode; in the dark the soft surface — LIGHTER than rest, never darker (5 Sep 2026) */
--yr-rule: var(--yr-hairline); /* a divider across the page: under the header, above and below the section bar. The hairline in light mode; in the dark HALF of it — a 10% white line on a dark ground glows (Vadim, 5 Sep 2026: "really prominent, dial that down by at least fifty percent") */
--yr-footer-bg: var(--yr-panel); /* the footer's ground: the panel in light mode; in the dark the page's own grey, #1b1b1b, with a hairline on top as its edge (Vadim, 5 Sep 2026: "make the footer everywhere #171717") */
--yr-other: var(--yr-band); /* THE OTHER GREY — the two-greys law (Vadim, 7 Sep 2026: "whenever we have one particular grey for the background, in order to get that section to stand out … we add the other grey. That's the universal law. One rule."). The body is the surface, so the other is the band; every ground-bearing part re-sets it for its children by inheritance (the rules after the drawer), so an open menu, a hover or a focus is never out-ranked. In light mode only tiles and the notice read it (the light law: a card takes the tone its band is not); in the dark every white part does. */
--yr-card-bg: var(--yr-surface); /* a card's ground: white in light mode (#fcfcfd on a white band is --yr-card-on-white); the other grey in the dark */
--yr-tile-bg: var(--yr-band); /* a tile is the tone its section is not, in both themes: each section declares it (the context rules after the drawer); this is the fallback */
--yr-block-bg: var(--yr-surface); /* a white block on a card or a section — a logo plate, a glance chip, a tag, a FAQ item, a menu list: white in light mode, the other grey in the dark */
--yr-pic-bg: var(--yr-surface); /* a picture tile's own ground behind a contained picture: white in light mode, the other grey in the dark */
--yr-field-on-surface: var(--yr-surface); /* a field's inside on a surface-coloured ground (a card, a white section): white in light mode, the band grey in the dark so it can be seen against the card (Vadim, 7 Sep 2026: "make these sections this colour so we can see them better #1b1b1b") */
--yr-field-bg: var(--yr-field-on-surface); /* what a field pill, a switch row and a text box paint. The CONTEXT sets it by inheritance: on a band-grey ground (a grey section, the drawer, an inset) a field is the surface — the tone its ground is not — and a card inside that ground sets it back; see the rules after the drawer */
--yr-rating-head-bg: var(--yr-dark); /* the rating card's head: the dark block in light mode; #191919 in the dark — between the dark block and the card (Vadim, 7 Sep 2026: "make these 2 sections #191919") */
--yr-inset-bg: var(--yr-band); /* the inset block inside the rating card (owner response rate, median reply time): the band grey in light mode; #191919 in the dark (the same mark). The review rail and the notice stay on the band grey. */
--yr-pic-line: var(--yr-hairline); /* a picture tile's edge: the hairline in light mode; none in the dark, where a light line round a picture read as a white frame (Vadim, 5 Sep 2026) */
--yr-hover-on-dark-bg:var(--yr-band); /* the surface law's other half: on a dark ground a button hovers to the light grey — and in the dark theme, where every ground is dark, to white (Vadim, 5 Sep 2026: "buttons don't go dark on a dark background, they go light") */
--yr-hover-on-dark-ink:var(--yr-dark);
--yr-veil-rgb: 50,50,50; /* the wash over a picture card: the dark in light mode, black in the dark */
--yr-veil-a: .08; /* at rest (.08 — "go lighter again", 4 Sep 2026) */
--yr-veil-hover-a: .32; /* under the mouse, so the words read */
--yr-gauge-track: var(--yr-dark); /* the trust dial's track under the purple arc: the dark in light mode, a visible grey in the dark (Vadim, 5 Sep 2026: "really hard to see") */
--yr-panel: #212121; /* the three dark PANELS only: review screening, Help Center band, footer */
--yr-white: #fff;
--yr-band: #fafafb; /* the ONE light grey: alternating bands, category tiles */
--yr-card-on-white: #fcfcfd; /* a card sitting on a WHITE band (reviewer card, FAQ card) */
--yr-purple: #713fff; /* brand accent: primary buttons, hero highlight, gauge arc, avatars, ticks */
--yr-purple-deep: #4f22d6; /* purple links and emphasis. NOT a hover: a purple button goes to --yr-dark on hover (Vadim, 3 Sep 2026) */
--yr-purple-ink: #3d1f9e; /* text on lilac */
--yr-purple-light: #8b5fff; /* icon strokes on a dark panel */
--yr-bar-hover-fill: var(--yr-purple-deep); /* a breakdown bar under the pointer: its fill a step stronger (deeper on white; lighter in the dark) and its track a step off the ground — a state on the parts, never a layer behind the row (7 Sep 2026) */
--yr-bar-hover-track: var(--yr-fill-soft);
--yr-purple-pale: #a88aff; /* note icon on a dark panel */
--yr-purple-hover-line:#c7b6ff; /* category tile border on hover */
--yr-purple-tint: rgba(113,63,255,.06); /* the wash under a chart line (the price history, 3 Sep 2026) */
--yr-purple-wash: rgba(113,63,255,.28); /* the wash that marks a picked picture in the gallery editor (3 Sep 2026: the faint tint was "too faint to see") */
--yr-lilac: #f4f0ff; /* lilac fill: light CTA, chips, tile initials */
--yr-lilac-line: #e4dbff; /* lilac border: a lilac button's line in light mode (through --yr-lilac-fill-line). The open FAQ item's border is the hairline since 5 Sep 2026 */
--yr-lilac-soft: #f0ecff; /* step-number chip */
--yr-text-muted: #5b5f66; /* secondary copy, eyebrows, notes, footer links */
--yr-text-faint: #8a8f97; /* the smallest labels inside artworks */
--yr-text-placeholder:#9aa0a6; /* search placeholder and icon */
--yr-surface-soft: #f2f3f5; /* avatar discs, the billing toggle track, closed FAQ icon */
--yr-surface-bubble: #f6f6f8; /* message bubbles in the thread artwork */
--yr-amber: #f5a524; /* stars, chart accent */
--yr-green: #1d9e5a; /* the one green: a verified listing (Vadim, 4 Sep 2026: "make it green") */
--yr-star-empty: #e5e7ea; /* an empty star on the page (#e8dcc6 inside the held card) */
--yr-highlight: #fdf0d8; /* the FAQ highlighter stroke */
--yr-held: #fdf3e3; /* the held review card in the thread */
--yr-hairline: rgba(50,50,50,.10); /* EVERY border and divider on a light surface */
--yr-hairline-strong: rgba(50,50,50,.18); /* the reviewer card's metric dividers (his call) */
--yr-hairline-nav: rgba(50,50,50,.16); /* the rule between nav links and Login */
--yr-hairline-login: rgba(50,50,50,.22); /* the Login button's border */
--yr-hairline-rgb: 50,50,50; /* the hairline's colour as a triple, for any alpha: rgba(var(--yr-hairline-rgb),.12) — white in the dark (5 Sep 2026) */
--yr-shadow-rgb: 50,50,50; /* the shadows' colour as a triple — black in the dark */
--yr-fill-soft: var(--yr-hairline-strong); /* a soft grey FILL, not a line: the off switch's track, a platform bar's other share, the highlight's dashes, a sheet's grab handle (split from the strong hairline 7 Sep 2026 so the dark theme can thin every line without fading a fill) */
--yr-line-clear: rgba(50,50,50,.22); /* a border that has to be seen: every part of the gallery editor (Vadim, 3 Sep 2026: "so faint … everything needs a little bit of a border") */
--yr-on-dark: #fff;
--yr-on-dark-72: rgba(255,255,255,.72); /* body copy on a dark panel */
--yr-on-dark-70: rgba(255,255,255,.7); /* labels on the dark tile */
--yr-on-dark-60: rgba(255,255,255,.6); /* footer text */
--yr-on-dark-55: rgba(255,255,255,.55); /* eyebrows on a dark panel */
--yr-on-dark-line: rgba(255,255,255,.14); /* hairline on a dark panel */
--yr-on-dark-line-16: rgba(255,255,255,.16); /* the dark tile's border */
--yr-on-dark-track: var(--yr-on-dark-line); /* a bar's track on a dark panel — a FILL, not a line (the home page's screening panel) */
--yr-star-empty-on-dark: var(--yr-on-dark-line-16); /* the empty star on the rating card's dark head — a MARK, not a line */
--yr-on-dark-btn-line:rgba(255,255,255,.24); /* ghost button border on a dark panel */
--yr-on-dark-tint: rgba(255,255,255,.045); /* frameless feature cards on a dark panel */
--yr-shadow-card: 0 2px 10px rgba(50,50,50,.05); /* review cards in the marquee */
--yr-shadow-search: 0 6px 22px rgba(50,50,50,.07); /* the hero search bar */
--yr-shadow-tile: 0 8px 28px rgba(50,50,50,.16); /* the dark plan tile; also a popover card */
--yr-shadow-thumb: 0 2px 8px rgba(50,50,50,.16); /* the slider's thumb */
--yr-scrim: rgba(50,50,50,.32); /* the dim behind a phone sheet */
/* ── Type ────────────────────────────────────────────────────────────── */
--yr-font: 'Nunito', system-ui, sans-serif;
--yr-h1: clamp(31px,4.4cqw,52px); /* hero only; 52px on a desktop */
--yr-score: clamp(41px,14.8cqw,63px); /* the rating card’s number: 63px in the desktop card (74 was oversized, he said: fifteen percent off), sized from the head’s own content width below that (the head is a container), so it and the stars never meet (Vadim’s pick, 6 Sep 2026) */
--yr-score-stars: clamp(31px,12.4cqw,53px); /* its five stars, a touch taller than its cap; 53px in the desktop card (46, then "make the stars 15% bigger") */
--yr-h2: clamp(24px,2.7cqw,38px); /* EVERY section heading, no exceptions, never balanced */
--yr-h3: clamp(22px,2.1cqw,32px); /* the Help Center band's heading */
--yr-lede: 16px; /* the paragraph under a section heading, line-height 1.6 */
--yr-card-copy: 14.5px; /* copy inside cards, secondary buttons */
--yr-review: 14px; /* review text, feature labels on the dark panel */
--yr-small: 13px; /* notes, counts, tabs, the line beside a heading */
--yr-eyebrow: 11.5px; /* eyebrows: uppercase, .09em, 700 */
--yr-footer-link: 13.5px;
/* ── Layout ──────────────────────────────────────────────────────────── */
--yr-content: 1300px;
--yr-gutter: max(clamp(20px,5cqw,72px), (100cqw - var(--yr-content)) / 2);
--yr-section-pad: clamp(40px,4.4cqw,64px); /* illustrated sections */
--yr-section-pad-tight:clamp(32px,3.4cqw,52px); /* list sections: categories, FAQ, reviews */
--yr-col-gap: clamp(28px,3.9cqw,56px); /* between an illustration and its copy */
--yr-row-gap: 24px; /* between the two when stacked */
--yr-tile-gap: 14px; /* category tiles */
--yr-plan-gap: 16px; /* plan tiles */
--yr-item-gap: 10px; /* FAQ items */
--yr-radius-card: 20px; /* cards, artworks, plan tiles, the Help Center band */
--yr-radius-tile: 18px; /* category tiles, review cards */
--yr-radius-item: 16px; /* FAQ items */
--yr-radius-feat: 14px; /* feature cards on the dark panel, artwork inner cards */
--yr-radius-btn: 12px; /* buttons */
--yr-radius-nav: 10px; /* nav and footer buttons */
--yr-radius-pill: 999px; /* pills, tabs, light buttons, chips */
/* ── The two heights (Vadim, 3 Sep 2026) ──────────────────────────────
Every pill is 38px: slab options, tabs, field pills, dropdown buttons, switch rows, light pill buttons, the
hero pills, the toggle options. Every square button is 46px: primary, light square, lilac, ghost, the header
Login / Signup / Add buttons, the footer pair. Heights come from min-height with no vertical padding, so no
font size or hairline can nudge them; a pill group's frame is 46 around its 38 pills. */
--yr-pill-h: 38px;
--yr-btn-h: 46px;
/* ── Motion ──────────────────────────────────────────────────────────── */
--yr-ease: cubic-bezier(.4,0,.2,1); /* every artwork loop and slide */
--yr-rise: cubic-bezier(.16,1,.3,1); /* the hero's entrance */
--yr-loop: 15s; /* every artwork loop; holds carry the time, moves stay .5-.7s */
--yr-hover: .18s; /* button hovers */
--yr-ride: .36s cubic-bezier(.6,0,.25,1); /* every sliding slab and menu pill, the drawer's height: slow away, quick middle, soft arrival (Vadim, 2 Sep 2026) */
--yr-ramp: .28s cubic-bezier(.45,0,.25,1); /* header button hovers ramp in and out */
--yr-settle: cubic-bezier(.2,.8,.2,1); /* contents settling into place (menu lists, the drawer's inner) */
}
/* ── The two-greys law, the dark half (Vadim, 7 Sep 2026: "whenever we have one particular grey for the background … we add the other grey. That's the universal law. One rule."): every white part paints the OTHER grey of the ground it sits on, read at the point of use — a custom property that points at --yr-other resolves where it is declared, so the tokens above cannot do this per context. Placed BEFORE the parts so their state rules (a hover, an open menu, the tab that is on) still win at equal specificity. The contexts that set --yr-other sit after the drawer. The review's rail is the one exception (it keeps --yr-band on the card: the review beside it carries the card). ── */
[data-theme="dark"] .yr-card:not(.yr-card--dark), [data-theme="dark"] .yr-review-card, [data-theme="dark"] .yr-artwork { background:var(--yr-card-bg); } /* a card paints the ground its section declares for cards */
[data-theme="dark"] .yr-card .yr-card { background:var(--yr-card2-bg); } /* a card in a card paints what the outer card declares — a card can re-set only what it does not paint */
[data-theme="dark"] .yr-btn--light, [data-theme="dark"] .yr-btn--nav.yr-btn--login, [data-theme="dark"] .yr-btn--nav.yr-btn--plain, [data-theme="dark"] .yr-btn--ghost-on-dark, [data-theme="dark"] .yr-tab, [data-theme="dark"] .yr-field, [data-theme="dark"] .yr-switch-row, [data-theme="dark"] .yr-compose textarea, [data-theme="dark"] .yr-qa-ask textarea, [data-theme="dark"] .yr-item, [data-theme="dark"] .yr-menu-list, [data-theme="dark"] .yr-glance-chip, [data-theme="dark"] .yr-tag:not(.is-top), [data-theme="dark"] .yr-pic, [data-theme="dark"] .yr-logo-plate, [data-theme="dark"] .yr-srow-logo, [data-theme="dark"] .yr-award-plate, [data-theme="dark"] .yr-notice { background:var(--yr-other); } /* a leaf paints the other grey of the ground it sits on */
/* ── Page ─────────────────────────────────────────────────────────────────── */
.yr-page {
container-type:inline-size; /* cqw resolves against the page, as on the homepage artboard */
width:100%;
margin:0;
background:var(--yr-surface);
color:var(--yr-ink);
font-family:var(--yr-font);
font-size:15px;
line-height:1.5;
overflow:clip; /* clips stray horizontal overflow like `hidden`, but `hidden` makes the page a scroll box and kills position:sticky inside it — the product page's section bar never pinned (2 Sep 2026) */
-webkit-font-smoothing:antialiased;
}
.yr-page *, .yr-page *::before, .yr-page *::after { box-sizing:border-box; }
.yr-plain { color:inherit; text-decoration:none; } /* a real link that looks like the part it is: a nav option, a pill, a button, a tile, a row, a footer word (7 Sep 2026; the home page carries its own copy). It sits HERE, before every part, so a part's own colour always wins — placed later it painted a purple button's words dark (Vadim's find, 7 Sep 2026: "black text on a purple button") */
/* ── Bands ────────────────────────────────────────────────────────────────
Every section is a band. They ALTERNATE white / grey down the page, the
grey is --yr-band and nothing else, and a dark panel (--yr-panel) breaks the
run. The section under a dark panel is white. Adding or removing a section
flips every band below it - re-check the whole run, never patch one seam. */
.yr-section {
padding:var(--yr-section-pad) var(--yr-gutter);
background:var(--yr-surface);
border-top:1px solid var(--yr-hairline);
}
.yr-section--tight { padding-block:var(--yr-section-pad-tight); }
.yr-section--grey { background:var(--yr-band); }
.yr-section--dark { background:var(--yr-panel); color:var(--yr-on-dark); border-top:0; }
.yr-section--dark .yr-eyebrow { color:var(--yr-on-dark-55); }
.yr-section--dark .yr-lede { color:var(--yr-on-dark-72); }
/* ── Type ─────────────────────────────────────────────────────────────────── */
.yr-eyebrow {
font-size:var(--yr-eyebrow);
letter-spacing:.09em;
text-transform:uppercase;
font-weight:700;
color:var(--yr-text-muted);
margin:0 0 10px;
}
.yr-h1 {
font-family:var(--yr-font);
font-size:var(--yr-h1);
font-weight:800;
line-height:1.14;
letter-spacing:-.03em;
text-wrap:balance; /* the hero headline is centred, so balance is right here - and ONLY here */
max-width:17.75ch; /* the one licensed measure cap: keeps it two lines, never three */
margin:0 auto clamp(22px,2.6cqw,38px);
text-align:center;
}
.yr-h1 strong { color:var(--yr-purple); font-weight:inherit; }
.yr-h2 {
font-family:var(--yr-font);
font-size:var(--yr-h2); /* one size for every section heading; never sized individually, never balanced */
font-weight:800;
line-height:1.08;
letter-spacing:-.03em;
margin:0 0 16px;
}
.yr-h3 {
font-family:var(--yr-font);
font-size:var(--yr-h3);
font-weight:800;
letter-spacing:-.03em;
margin:0 0 8px;
}
.yr-lede {
font-size:var(--yr-lede);
line-height:1.6;
margin:0;
text-wrap:pretty; /* no max-width, ever: the paragraph fills its column */
}
.yr-lede--muted { color:var(--yr-text-muted); }
/* three lines and More (4 Sep 2026, the two stacks law; the words end whole, 5 Sep 2026): a description in the overview is a fixed block.
The behaviours hold .yr-clamp to --yr-clamp-lines: when the text is longer, the shown text ends on the last whole word that leaves
room for "… More" as the next word on the last line; open, the paragraph shows all of it with "Less" after the text, and the columns
end where they end. The kit's one text control: it is part of the paragraph, not an action. The max-height and the clip are for the
slide only (the closed text fits by construction). */
.yr-clamp { position:relative; line-height:1.6; --yr-clamp-bg:var(--yr-surface); transition:max-height .45s var(--yr-settle); } /* More and Less slide like a shelf (Vadim, 5 Sep 2026): the behaviours carry max-height between the closed and the open height; the band follows through the module's column observer */
.yr-section--grey .yr-clamp { --yr-clamp-bg:var(--yr-band); }
.yr-clamp.is-clamped { max-height:calc(var(--yr-clamp-lines, 3) * 1.6em); overflow:hidden; overflow:clip; } /* clip, not hidden: hidden makes a scroll container, and focus on More, find-in-page or a harness would scroll the hidden lines up half a line (seen in the pane, 5 Sep 2026); clip cannot scroll */
.yr-clamp-more { display:inline; margin:0; padding:0; border:0; background:none; font:inherit; line-height:inherit; font-weight:700; color:var(--yr-purple-deep); cursor:pointer; } /* part of the text (5 Sep 2026): the words end whole and "… More" is the next word on the line — nothing is ever stamped over a cut word, and no haze (2 and 5 Sep 2026) */
.yr-clamp-more.is-more::before { content:'… '; font-weight:400; color:var(--yr-text); }
.yr-clamp-more:hover { color:var(--yr-purple-ink); }
.yr-clamp-more { transition:opacity .18s ease; }
.yr-clamp-more.is-fading { opacity:0; }
.yr-clamp-more.is-off { position:absolute; visibility:hidden; } /* measuring: out of the line but still rendered, so a fade in flight runs on (display:none would cancel it — the pop after a close, 6 Sep 2026) */ /* the motion law: the control fades out before the shelf moves and back in after it stops — never a flick */
@media (prefers-reduced-motion:reduce) { .yr-clamp { transition:none; } }
.yr-note { font-size:var(--yr-small); color:var(--yr-text-muted); }
/* ── The right-hand note ──────────────────────────────────────────────────
A short line that belongs to a heading or a button sits flush RIGHT on the
same row ("28,914 listings · updated daily", "Join early…", "Free plan · no
card required"). It drops under the heading only when the row cannot hold
both. */
.yr-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:clamp(16px,2cqw,32px);
flex-wrap:wrap;
}
.yr-row--head { margin-bottom:clamp(24px,2.4cqw,36px); }
.yr-row--head > .yr-h2 { margin:0; }
/* ── Buttons ─────────────────────────────────────────────────────────────── */
.yr-btn {
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
border:1px solid transparent;
cursor:pointer;
font-family:inherit;
text-decoration:none;
white-space:nowrap;
transition:background-color var(--yr-hover) ease, color var(--yr-hover) ease, border-color var(--yr-hover) ease, transform .2s ease;
}
/* primary: purple, white text, 12px radius. Hover: the dark grey — every purple button goes dark on hover, never a deeper purple (Vadim, 3 Sep 2026). */
.yr-btn--primary {
background:var(--yr-purple);
border-color:var(--yr-purple);
color:var(--yr-on-dark);
border-radius:var(--yr-radius-btn);
min-height:var(--yr-btn-h);
padding:0 24px;
font-weight:700;
font-size:15.5px;
}
.yr-btn--primary:hover { background:var(--yr-primary-hover-bg); border-color:var(--yr-primary-hover-bg); color:var(--yr-primary-hover-ink); }
/* primary sitting ON THE DARK TILE: hover inverts to white with dark text */
.yr-btn--primary.yr-btn--on-dark-tile:hover { background:var(--yr-hover-on-dark-bg); border-color:var(--yr-hover-on-dark-bg); color:var(--yr-hover-on-dark-ink); } /* the surface law: on a dark surface a button hovers to the light grey (Vadim, 3 Sep 2026) */
/* light: white, hairline, pill. Hover: INVERTS to dark. Used for "See all…", "Explore more FAQ's". */
.yr-btn--light {
background:var(--yr-btn-white);
border-color:var(--yr-hairline);
color:var(--yr-btn-white-ink);
border-radius:var(--yr-radius-pill);
min-height:var(--yr-pill-h);
padding:0 26px;
font-weight:600;
font-size:var(--yr-card-copy);
}
.yr-btn--light.yr-btn--square { border-radius:var(--yr-radius-btn); min-height:var(--yr-btn-h); padding:0 20px; }
.yr-btn--light:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); }
/* lilac: the CTA inside a light plan tile. Hover: INVERTS to dark. */
.yr-btn--lilac {
background:var(--yr-lilac-fill);
border-color:var(--yr-lilac-fill-line);
color:var(--yr-lilac-fill-ink);
border-radius:var(--yr-radius-btn);
min-height:var(--yr-btn-h);
padding:0 13px;
width:100%;
font-weight:700;
font-size:15px;
}
.yr-btn--lilac:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); }
/* on a dark panel: purple primary (hover deeper purple) and a ghost with a 24% white border */
.yr-btn--ghost-on-dark {
background:var(--yr-ghost-on-dark-bg);
border-color:var(--yr-ghost-on-dark-line);
color:var(--yr-ghost-on-dark-ink);
border-radius:var(--yr-radius-btn);
min-height:var(--yr-btn-h);
padding:0 24px;
font-weight:600;
font-size:15px;
}
.yr-btn--ghost-on-dark:hover { background:var(--yr-hover-on-dark-bg); border-color:var(--yr-hover-on-dark-bg); color:var(--yr-hover-on-dark-ink); } /* the surface law: on a dark surface a button hovers to the light grey */
/* hero pills: purple, 999 radius, lift 2px on hover */
.yr-btn--hero {
background:var(--yr-purple);
border-color:var(--yr-purple);
color:var(--yr-on-dark);
border-radius:var(--yr-radius-pill);
min-height:var(--yr-btn-h); /* the hero pills are the one pill at the button height: the pill group's frame, not its 38 pills (Vadim, 3 Sep 2026) */
padding:0 clamp(22px,2.1cqw,30px);
font-size:clamp(14px,1.1cqw,16px);
font-weight:600;
}
.yr-btn--hero:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); } /* no lift: nothing on the site moves on hover (Vadim, 3 Sep 2026) */
/* nav / footer buttons: 10px radius, 38px tall */
.yr-btn--nav {
min-height:var(--yr-btn-h); /* 46: the square height, which is also the slab group's frame beside it (3 Sep 2026; was 42) */
border-radius:var(--yr-radius-nav);
padding:0 17px;
font-size:14px;
font-weight:600;
line-height:1;
transition:background-color var(--yr-ramp), border-color var(--yr-ramp), color var(--yr-ramp); /* header buttons ramp in and out (Vadim, 3 Sep 2026: the .18s ease "feels off"); no transform, so nothing jumps */
}
/* Login / Signup (Vadim, 2 Sep 2026): at rest Login is white and Signup purple. Hover Login and the two
swap — Login purple, Signup white. Hover Signup and it goes one shade deeper, so a press has a tell.
Login must sit directly before Signup in the markup: the swap is the sibling rule below.
.yr-btn--plain: any other header button (Add Business / Add Products) at the same height and hairline,
with the light button's DARK hover — purple belongs to Login / Signup only. */
.yr-btn--nav.yr-btn--login, .yr-btn--nav.yr-btn--plain { background:var(--yr-btn-white); border-color:var(--yr-hairline); color:var(--yr-btn-white-ink); } /* same hairline as the slab group beside them */
.yr-btn--nav.yr-btn--signup { background:var(--yr-purple); border-color:var(--yr-purple); color:var(--yr-on-dark); }
.yr-btn--nav.yr-btn--login:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); } /* the swap (Login purple, Signup white) is gone: every button goes to the dark grey on hover (Vadim, 3 Sep 2026) */
.yr-btn--nav.yr-btn--signup:hover { background:var(--yr-primary-hover-bg); border-color:var(--yr-primary-hover-bg); color:var(--yr-primary-hover-ink); }
.yr-btn--nav.yr-btn--plain:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); }
/* THE SURFACE LAW (Vadim, 3 Sep 2026): on a light surface every button hovers to the dark grey; on a dark surface —
a dark section, the Help Center band, the dark plan tile, a card on a dark panel — it hovers the other way, to the
light grey with dark text. The same effect, inverted for the ground it sits on. */
.yr-section--dark .yr-btn:hover, .yr-dark-band .yr-btn:hover, .yr-card--dark .yr-btn:hover, .yr-panel-card .yr-btn:hover { background:var(--yr-hover-on-dark-bg); border-color:var(--yr-hover-on-dark-bg); color:var(--yr-hover-on-dark-ink); }
/* ── Tabs, pills, chips ──────────────────────────────────────────────────── */
.yr-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.yr-tab {
border-radius:var(--yr-radius-pill);
display:inline-flex; align-items:center; box-sizing:border-box;
min-height:var(--yr-pill-h);
padding:0 16px;
font-size:var(--yr-small);
font-weight:600;
cursor:pointer;
background:var(--yr-surface);
color:var(--yr-ink);
border:1px solid var(--yr-hairline);
transition:background-color var(--yr-hover) ease, color var(--yr-hover) ease, border-color var(--yr-hover) ease;
}
.yr-tab.is-on, .yr-tab:hover { background:var(--yr-slab-pill); color:var(--yr-slab-on); border-color:var(--yr-slab-pill); }
.yr-chip {
display:inline-flex;
align-items:center;
gap:5px;
background:var(--yr-lilac-fill);
color:var(--yr-lilac-fill-ink);
border-radius:var(--yr-radius-pill);
padding:4px calc(10px - .04em) 4px 10px; /* the right pad gives back the tracking that trails the last letter, so the ink sits dead centre (Vadim, 3 Sep 2026) */
font-size:10.5px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap; /* a chip is one line; on the phone a chip that cannot fit half a row takes a whole one (yr.chips) rather than breaking its words */
}
.yr-chip--popular { background:var(--yr-purple); color:var(--yr-on-dark); } /* the base chip's size: one height across a set (4 Sep 2026) */
/* the billing toggle: a track with ONE dark pill that slides to the option under the mouse */
.yr-toggle {
position:relative;
display:inline-flex;
align-items:center;
gap:6px;
background:var(--yr-surface-soft);
border-radius:var(--yr-radius-pill);
padding:4px;
cursor:pointer;
}
.yr-toggle-pill {
position:absolute; top:4px; bottom:4px; left:4px; width:0;
border-radius:var(--yr-radius-pill);
background:var(--yr-slab-pill); /* the selected pill: white in the dark (5 Sep 2026) */
pointer-events:none;
}
.yr-toggle.is-ready .yr-toggle-pill { transition:left .25s var(--yr-ease), width .25s var(--yr-ease); }
.yr-toggle-opt {
position:relative; z-index:1;
border-radius:var(--yr-radius-pill);
display:inline-flex; align-items:center; box-sizing:border-box;
min-height:var(--yr-pill-h);
padding:0 16px;
font-size:var(--yr-small);
font-weight:600;
color:var(--yr-text-muted);
transition:color .25s ease;
}
.yr-toggle-opt[data-on="true"] { color:var(--yr-slab-on); }
.yr-toggle:has(.yr-toggle-opt:hover) .yr-toggle-opt[data-on="true"]:not(:hover) { color:var(--yr-text-muted); }
.yr-toggle .yr-toggle-opt:hover { color:var(--yr-slab-on); }
/* Slab nav — the toggle's mechanism used for navigation: a pill group where one
dark slab slides to whatever you hover and settles back on the current link
(or disappears if the page is not one of the links, as on the homepage).
Markup: .yr-slab > .yr-slab-pill + .yr-slab-opt (.is-on marks the current one).
JS moves the pill (transform + width), sets .is-hot on the hovered option and
.is-hovering on the group, adds .is-ready after the first placement so the
pill does not animate in from nowhere. Chosen by Vadim from three demos, 2 Sep 2026. */
/* 46px tall — 4px more than the 42px nav buttons, set by eye on the homepage and matched here (Vadim, 2 Sep 2026):
1px border + 3px padding + 38px option (14px type, line-height 1, 12px padding) + 3 + 1. The dark slab is the
option's size, so it is 38 inside the 46. Gap 11px, identical between every pair. */
.yr-slab { position:relative; display:flex; align-items:center; gap:11px; padding:3px; min-height:46px; box-sizing:border-box; border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-pill); background:var(--yr-surface); } /* on a grey band the group takes the band's colour instead (the homepage hero uses --yr-band): no white interior on grey */
.yr-slab-pill { position:absolute; top:3px; left:0; width:0; height:0; border-radius:var(--yr-radius-pill); background:var(--yr-slab-pill); will-change:transform; }
.yr-slab.is-ready .yr-slab-pill { transition:transform var(--yr-ride), width var(--yr-ride); } /* one ride for every slab: slow away, quick middle, soft arrival, .36s (Vadim, 2 Sep 2026 — "the same speed") */
.yr-slab-opt { position:relative; z-index:1; display:inline-flex; align-items:center; box-sizing:border-box; min-height:var(--yr-pill-h); padding:0 30px; border-radius:var(--yr-radius-pill); font-size:14px; line-height:1; font-weight:600; color:var(--yr-text-muted); cursor:pointer; white-space:nowrap; transition:color .12s ease; }
.yr-slab-opt.is-hot, .yr-slab:not(.is-hovering) .yr-slab-opt.is-on { color:var(--yr-slab-on); }
.yr-nav .yr-slab { display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-inline:auto; } /* centred between the logo and the switch (Vadim, 7 Sep 2026: "keep it centred, not justified to the left") */ /* the site’s three options one width, the widest’s (Vadim, 7 Sep 2026: "make Businesses and Products a little wider so they match Media & Creators") */
.yr-nav .yr-slab-opt { justify-content:center; }
/* ── Cards and tiles ─────────────────────────────────────────────────────
A card takes whichever tone its band is NOT: white on a grey band, grey on
a white band. Always a hairline border, never a heavier one. */
.yr-card {
background:var(--yr-card-bg); /* white in light mode; the other grey in the dark (the two-greys law, 7 Sep 2026) */
border:1px solid var(--yr-hairline);
border-radius:var(--yr-radius-card);
padding:26px;
}
.yr-card--on-white { background:var(--yr-card-on-white); }
.yr-card--dark { /* the selected plan tile */
background:var(--yr-dark);
color:var(--yr-on-dark);
border-color:var(--yr-on-dark-line-16);
box-shadow:var(--yr-shadow-tile);
}
.yr-card--dark .yr-note, .yr-card--dark .yr-eyebrow { color:var(--yr-on-dark-70); }
.yr-card--dark .yr-divider { border-color:var(--yr-on-dark-line-16); }
.yr-tile { /* category tile: grey on the white band */
background:var(--yr-tile-bg); /* the tone its section is not, in both themes (7 Sep 2026: the business page’s similar tiles sat band on band) */
border:1px solid var(--yr-hairline);
border-radius:var(--yr-radius-tile);
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
cursor:pointer;
transition:border-color var(--yr-hover) ease;
}
.yr-tile:not(.yr-pic):hover { background:var(--yr-surface-soft); } /* a fill, never a border (Vadim, 5 Sep 2026: "I never asked for a purple border that lights up"); a picture tile shows its veil instead — a fill under a picture pulsed through the ring around it */
.yr-review-card { /* marquee card: white, hairline, soft shadow */
background:var(--yr-card-bg);
border:1px solid var(--yr-hairline);
border-radius:var(--yr-radius-tile);
box-shadow:var(--yr-shadow-card);
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
}
.yr-item { /* FAQ accordion item */
background:var(--yr-block-bg);
border:1px solid var(--yr-hairline);
border-radius:var(--yr-radius-item);
overflow:hidden;
}
.yr-item.is-open { border-color:var(--yr-hairline); } /* the open item keeps the hairline — a border never says selected (law 6); its purple icon says it (Vadim, 5 Sep 2026: "I don't like the FAQ section with a purple border") */
.yr-item-head { display:flex; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; font-weight:700; font-size:16px; letter-spacing:-.01em; line-height:1.35; }
.yr-item-icon { width:26px; height:26px; flex:none; border-radius:8px; background:var(--yr-surface-soft); color:var(--yr-ink); display:grid; place-items:center; font-size:16px; font-weight:600; line-height:1; }
.yr-item.is-open .yr-item-icon { background:var(--yr-purple); color:var(--yr-on-dark); }
.yr-item-body { padding:0 20px 20px 60px; font-size:var(--yr-card-copy); line-height:1.65; color:var(--yr-text-muted); }
.yr-divider { border:0; border-top:1px solid var(--yr-hairline); margin:0; }
.yr-panel-card { /* a card ON a dark panel */
border:1px solid var(--yr-on-dark-line);
border-radius:var(--yr-radius-card);
padding:20px;
background:rgba(255,255,255,.04);
}
.yr-feat { /* frameless feature card on a dark panel */
background:var(--yr-on-dark-tint);
border-radius:var(--yr-radius-feat);
padding:17px 18px;
display:flex;
flex-direction:column;
justify-content:center;
gap:9px;
min-width:0;
}
.yr-feat-lbl { font-size:var(--yr-review); font-weight:700; letter-spacing:-.01em; }
.yr-feat-cp { font-size:var(--yr-small); font-weight:600; line-height:1.45; color:rgba(255,255,255,.56); text-wrap:pretty; }
.yr-dark-band { /* the Help Center band: a dark card inside a white section */
background:var(--yr-panel);
color:var(--yr-on-dark);
border-radius:var(--yr-radius-card);
padding:clamp(24px,2.6cqw,40px);
display:flex;
gap:24px;
flex-wrap:wrap;
align-items:center;
}
/* ── Small parts ─────────────────────────────────────────────────────────── */
.yr-avatar { /* purple disc with an initial */
width:42px; height:42px; flex:none; border-radius:50%;
background:var(--yr-purple); color:var(--yr-on-dark);
display:grid; place-items:center;
font-family:var(--yr-font); font-weight:800; font-size:16px;
}
.yr-avatar--soft { background:var(--yr-surface-soft); color:var(--yr-text-muted); font-size:12px; }
.yr-initial { /* the lilac square on a category tile */
width:40px; height:40px; flex:none; border-radius:var(--yr-radius-btn);
background:var(--yr-lilac-fill); color:var(--yr-lilac-fill-ink);
display:grid; place-items:center;
font-family:var(--yr-font); font-weight:800; font-size:16px;
}
.yr-stars { display:inline-flex; gap:2px; line-height:1; color:var(--yr-amber); font-size:15px; letter-spacing:1px; }
.yr-stars .is-empty { color:var(--yr-star-empty); }
.yr-stars .is-half { position:relative; display:inline-block; color:var(--yr-star-empty); } /* a half star is a clipped star: the amber half painted over a grey one (from the product page's rating card, into the kit 4 Sep 2026) */
.yr-stars .is-half > span { position:absolute; left:0; top:0; width:50%; overflow:hidden; color:var(--yr-amber); }
.yr-step-number { /* "01" beside a step title, never above it */
display:grid; place-items:center; width:32px; height:32px; flex:none;
border-radius:var(--yr-radius-nav); background:var(--yr-lilac-soft-fill); color:var(--yr-lilac-soft-ink);
font-size:12px; font-weight:800;
}
.yr-step-head { display:flex; align-items:center; gap:10px; min-width:0; }
.yr-step-title { color:var(--yr-ink); font-size:var(--yr-card-copy); font-weight:700; line-height:1.3; }
.yr-step p { margin:0; color:var(--yr-text-muted); font-size:13.5px; line-height:1.55; }
.yr-link { color:var(--yr-purple-deep); font-weight:600; cursor:pointer; }
/* ── Layout grids ────────────────────────────────────────────────────────
THE ONE LAW: content sizes to its column, never to itself. A heading, a
paragraph and a button stacked in a column all start on the same left edge
and end on the same right edge. Two columns beside each other are the same
height (align-items:stretch) and each distributes its own slack. */
.yr-grid-illustrated { /* artwork .67 / copy 1 - the artwork never renders larger than the copy */
display:grid;
grid-template-columns:minmax(0,.67fr) minmax(0,1fr);
column-gap:var(--yr-col-gap);
row-gap:var(--yr-row-gap);
align-items:stretch;
}
.yr-grid-illustrated--flip { grid-template-columns:minmax(0,1fr) minmax(0,.67fr); }
.yr-grid-illustrated--flip > .yr-copy { grid-column:1; grid-row:1; }
.yr-grid-illustrated--flip > .yr-artwork-wrap { grid-column:2; grid-row:1; }
.yr-grid-illustrated > * { min-width:0; }
.yr-artwork-wrap { display:flex; }
.yr-copy { display:flex; flex-direction:column; justify-content:space-between; }
.yr-copy--centred { justify-content:center; } /* copy against a taller card: slack sits evenly above and below */
.yr-artwork { /* a fluid HTML illustration: fills its column, fixed-px type inside */
position:relative;
width:100%;
height:100%;
overflow:hidden;
border-radius:var(--yr-radius-card);
background:var(--yr-card-bg);
border:1px solid var(--yr-hairline);
container-type:inline-size;
container-name:yrart;
/* NO max-width, NO aspect-ratio, NO min-height, NO margin-inline:auto - ever */
}
.yr-artwork--on-white { background:var(--yr-card-on-white); }
.yr-grid-3 { /* three across, width-driven, never more */
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--yr-plan-gap);
align-items:stretch;
}
.yr-grid-3--tiles { gap:var(--yr-tile-gap); }
.yr-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.yr-faq-layout { /* copy + card .8 / list 1.2 */
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(24px,3.4cqw,52px);
align-items:stretch;
}
.yr-faq-media { min-width:0; display:flex; flex-direction:column; }
.yr-faq-media > .yr-artwork { flex:1 1 auto; }
.yr-list { display:flex; flex-direction:column; gap:var(--yr-item-gap); min-width:0; }
/* tiers — from the homepage, container-driven, not viewport-driven */
@container (max-width:1249px) and (min-width:680px) {
.yr-grid-illustrated, .yr-grid-illustrated--flip { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@container (max-width:1049px) and (min-width:680px) {
.yr-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.yr-grid-3 > :last-child:nth-child(odd) { grid-column:1 / -1; } /* a lone last tile runs edge to edge (the balance law); an even last one stays in its column */
}
@container (max-width:819px) {
.yr-faq-layout { grid-template-columns:minmax(0,1fr); }
}
@container (max-width:799px) {
.yr-grid-illustrated, .yr-grid-illustrated--flip { grid-template-columns:minmax(0,1fr); row-gap:20px; }
.yr-grid-illustrated--flip > .yr-copy, .yr-grid-illustrated--flip > .yr-artwork-wrap { grid-column:auto; grid-row:auto; }
}
@container (max-width:679px) {
.yr-grid-3 { grid-template-columns:minmax(0,1fr); }
.yr-grid-3 > :last-child { grid-column:auto; }
.yr-grid-2 { grid-template-columns:minmax(0,1fr); }
}
/* ── Interactive parts ────────────────────────────────────────────────────
Grown on the product page (2–3 Sep 2026), shared from here on. Every open,
hover or selected state is a FILL, never a darker border. The open fill sits
under a transparent border so no ring shows while the fill fades in. */
/* Field pill: a filter control, a search box, a dropdown's button. 38px, hairline, white. */
.yr-field { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-pill); padding:0 14px; min-height:var(--yr-pill-h); font-size:13.5px; font-weight:600; color:var(--yr-text-muted); background:var(--yr-field-bg); box-sizing:border-box; }
.yr-field--grow { flex:1 1 0; margin-left:auto; min-width:172px; } /* the search fills whatever the row leaves it — between Sort and Filters, or to the row's end (Vadim, 5 Sep 2026: "expand that so it fills the space"); under 600 it is a full row of its own, first (the tier below) */
.yr-lbl { color:var(--yr-text-muted); margin-right:6px; } /* "Sort", "Near" — the label before the value */
.yr-chev { margin-left:6px; font-size:11px; color:var(--yr-text-muted); }
.yr-count { font-size:12px; background:var(--yr-slab-pill); color:var(--yr-slab-on); /* a pill: white with a dark number in the dark theme (the button audit, 5 Sep 2026) */ border-radius:var(--yr-radius-pill); padding:1px 7px; font-weight:700; margin-left:6px; }
.yr-search, .yr-input { cursor:text; color:var(--yr-text-muted); } /* .yr-input: any text field in a form (email, phone, a price); same pill, an icon or a label, then the bare input */
.yr-search { min-width:220px; }
.yr-field--grow.yr-search { min-width:172px; } /* a growing search may also shrink, down to its glass and placeholder, so a three-control row stays one row to 600px (the search sheet, 5 Sep 2026) */
.yr-search svg, .yr-input svg { width:14px; height:14px; flex:none; }
.yr-search input, .yr-input input { border:0; outline:0; background:transparent; font:inherit; color:var(--yr-ink); width:100%; min-width:0; padding:0; }
.yr-search input { min-width:120px; }
.yr-search input::placeholder, .yr-input input::placeholder { color:var(--yr-text-muted); }
/* Dropdown menu: .yr-menu[data-menu] > .yr-menu-btn[data-menu-btn] + .yr-menu-list(hidden) > .yr-menu-pill + .yr-menu-item*.
The JS (product page) opens the list, glides the dark pill to the hovered row and settles it on the
picked one (.is-on); a pick fires "menupick" on the menu with the value. */
.yr-menu { position:relative; }
.yr-menu-btn { cursor:pointer; color:var(--yr-ink); transition:background-color var(--yr-hover) ease, border-color var(--yr-hover) ease, color var(--yr-hover) ease; }
.yr-menu-btn:hover { background:var(--yr-menu-hover-bg); } /* soft: lighter than rest in both modes */
.yr-menu.is-open .yr-menu-btn, .yr-menu-btn.is-open { background:var(--yr-slab-pill); border-color:transparent; color:var(--yr-slab-on); } /* open = the selected pill: the dark in light mode, white in the dark (5 Sep 2026) */
.yr-menu.is-open .yr-menu-btn .yr-lbl, .yr-menu.is-open .yr-menu-btn .yr-chev, .yr-menu-btn.is-open .yr-chev { color:var(--yr-slab-on-soft); }
.yr-menu-btn.is-open .yr-count { background:var(--yr-surface); color:var(--yr-ink); }
.yr-menu-list { position:absolute; top:calc(100% + 6px); left:0; z-index:6; min-width:184px; padding:6px; background:var(--yr-block-bg); border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-btn); box-shadow:var(--yr-shadow-search); animation:yrMenuIn .22s var(--yr-settle); }
@keyframes yrMenuIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.yr-menu-pill { position:absolute; left:6px; right:6px; top:0; height:0; border-radius:8px; background:var(--yr-slab-pill); will-change:transform; }
.yr-menu-list.is-ready .yr-menu-pill { transition:transform var(--yr-ride), height var(--yr-ride); }
.yr-menu-item { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:8px 12px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; transition:color .12s ease; }
.yr-menu-item small { font-size:12px; font-weight:600; color:var(--yr-text-muted); transition:color .12s ease; }
.yr-menu-item.is-hot, .yr-menu-list:not(.is-hovering) .yr-menu-item.is-on { color:var(--yr-slab-on); }
.yr-menu-item.is-hot small, .yr-menu-list:not(.is-hovering) .yr-menu-item.is-on small { color:var(--yr-slab-on-soft); }
/* Switch: the small on/off dot. Purple when on, hairline grey when off; the row it sits in carries data-on. */
.yr-switch { width:30px; height:17px; border-radius:var(--yr-radius-pill); background:var(--yr-purple); position:relative; flex:none; transition:background-color var(--yr-hover) ease; }
.yr-switch::after { content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--yr-surface); transform:translateX(13px); transition:transform .22s var(--yr-settle); } /* the dot slides across, it does not jump */
[data-on="false"] .yr-switch, .yr-switch[data-on="false"] { background:var(--yr-fill-soft); } /* data-on sits on the row, or on the switch itself */
[data-on="false"] .yr-switch::after, .yr-switch[data-on="false"]::after { transform:none; }
.yr-input .yr-switch { margin-left:auto; cursor:pointer; } /* a channel row: the address and its own switch in one pill */
.yr-switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-pill); background:var(--yr-field-bg); padding:0 14px; min-height:var(--yr-pill-h); font-size:13.5px; font-weight:600; cursor:pointer; box-sizing:border-box; }
/* Slider: one purple fill up to the thumb on a soft track; the thumb is a white disc with a hairline that takes the
lilac fill while held. The script keeps --p (the fill) in step with the value; the page sets the words under it. */
.yr-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--yr-radius-pill); background:linear-gradient(to right, var(--yr-purple) 0 var(--p, 0%), var(--yr-surface-soft) var(--p, 0%) 100%); outline:0; margin:0; display:block; cursor:pointer; }
.yr-range::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--yr-surface); border:1px solid var(--yr-hairline); box-shadow:var(--yr-shadow-thumb); cursor:grab; transition:background-color var(--yr-hover) ease; }
.yr-range::-webkit-slider-thumb:hover, .yr-range:active::-webkit-slider-thumb { background:var(--yr-lilac); }
.yr-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--yr-surface); border:1px solid var(--yr-hairline); box-shadow:var(--yr-shadow-thumb); cursor:grab; }
.yr-range-scale { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12px; color:var(--yr-text-muted); margin-top:9px; }
.yr-range-scale b { color:var(--yr-ink); font-weight:700; font-size:13px; }
/* Drawer: a panel that opens under a bar by gliding its height (the JS sets height to scrollHeight, then auto),
pushing what is below it down; the inner settles in a beat later. Never display:none — that cannot animate. */
.yr-drawer { overflow:hidden; height:0; transition:height var(--yr-ride); background:var(--yr-band); }
.yr-drawer-inner { border-bottom:1px solid var(--yr-hairline); padding:18px 22px 20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 20px; opacity:0; transform:translateY(-10px); transition:opacity .22s ease, transform .3s var(--yr-settle); }
.yr-drawer.is-open .yr-drawer-inner { opacity:1; transform:none; transition-delay:.12s; }
.yr-lab { font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--yr-text-muted); margin-bottom:6px; }
.yr-drawer .yr-menu, .yr-drawer .yr-menu-btn { width:100%; }
.yr-drawer .yr-menu-btn { justify-content:space-between; }
.yr-drawer .yr-menu-list { left:0; right:0; }
/* ── The two-greys law (Vadim, 7 Sep 2026) ── every ground says which grey the blocks on it paint: --yr-other for a white button, a field, a plate, a chip, a tag, a menu list, the notice (and the home page’s FAQ items and tabs); --yr-card-bg for a card; --yr-tile-bg for a tile. A card then says the opposite for its own children. Declared per context with literal values, because a custom property resolves where it is declared: an element cannot read a variable it also re-sets. By inheritance, so state fills (an open menu, a hover, a focus) are never out-ranked. The exception is the review’s rail (band on the card: the review beside it carries the card). A page-local card must say so itself (the product page’s price alert). */
.yr-page, .yr-nav, .yr-secbar, .yr-section:not(.yr-section--grey):not(.yr-section--dark) { --yr-other:var(--yr-band); --yr-tile-bg:var(--yr-band); } /* surface grounds, both themes */
.yr-section--grey, .yr-section--dark, .yr-dark-band, .yr-drawer, .yr-footer { --yr-other:var(--yr-surface); --yr-tile-bg:var(--yr-surface); } /* band-grey (and darker) grounds, both themes — in light mode this is the light law’s white on grey (the business page’s similar tiles sat band on band until 7 Sep 2026) */
[data-theme="dark"] .yr-page, [data-theme="dark"] .yr-nav, [data-theme="dark"] .yr-secbar, [data-theme="dark"] .yr-section:not(.yr-section--grey):not(.yr-section--dark) { --yr-card-bg:var(--yr-band); } /* in the dark a card on a surface ground is the band … */
[data-theme="dark"] .yr-section--grey, [data-theme="dark"] .yr-section--dark, [data-theme="dark"] .yr-dark-band, [data-theme="dark"] .yr-drawer, [data-theme="dark"] .yr-footer { --yr-card-bg:var(--yr-surface); } /* … and on a band ground the surface */
[data-theme="dark"] .yr-section--grey .yr-card, [data-theme="dark"] .yr-section--dark .yr-card, [data-theme="dark"] .yr-drawer .yr-card, [data-theme="dark"] .yr-footer .yr-card { --yr-other:var(--yr-band); --yr-card2-bg:var(--yr-band); } /* a card on a band ground is the surface: its blocks take the band */
[data-theme="dark"] .yr-section:not(.yr-section--grey):not(.yr-section--dark) .yr-card, [data-theme="dark"] .yr-page > .yr-card { --yr-other:var(--yr-surface); --yr-card2-bg:var(--yr-surface); } /* a card on a surface ground is the band: its blocks take the surface */
[data-theme="dark"] .yr-section--grey .yr-card .yr-card, [data-theme="dark"] .yr-section--dark .yr-card .yr-card { --yr-other:var(--yr-surface); } /* a card in a card: one more turn (its own ground is --yr-card2-bg, declared by the outer card) */
[data-theme="dark"] .yr-section:not(.yr-section--grey):not(.yr-section--dark) .yr-card .yr-card { --yr-other:var(--yr-band); }
.yr-drawer-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
/* Section bar: a sticky white row under the page's top fold holding one slab group that spans the content
(first pill at the left edge, last at the right); the slab settles on the section in view. As tall as a
card with 40px marks (15 + 46 + 15). The wrapper above it must not be overflow:hidden, or it never pins. */
.yr-secbar { position:sticky; top:0; z-index:5; padding:15px var(--yr-gutter); background:var(--yr-surface); border-top:1px solid var(--yr-rule); border-bottom:1px solid var(--yr-rule); } /* --yr-rule: half the hairline in the dark (Vadim, 5 Sep 2026) */
.yr-secbar + .yr-section { border-top:0; } /* one hairline under the bar, not two */
.yr-secbar-slab { width:100%; justify-content:space-between; border-color:transparent; }
.yr-secbar-slab .yr-slab-opt small { font-weight:600; opacity:.7; margin-left:5px; font-size:12.5px; }
.yr-secbar-slab .yr-slab-opt { transition:color .25s ease; }
[data-sec] { scroll-margin-top:78px; } /* the bar's height: a jump lands the section's top edge right under it, so the section's own top padding is the air above its heading (3 Sep 2026) */
/* Award card: split in two. The plate on top is a stage for someone else's mark and nothing else — words never
go into artwork; the words sit below. A mark with its own ground fills the plate edge to edge (.is-cover,
the image cropped to the plate, never redrawn); a transparent mark sits centred on the band grey. */
.yr-award { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.yr-award-plate { position:relative; background:var(--yr-band); height:150px; display:grid; place-items:center; padding:24px 28px; }
.yr-award-plate img { max-height:88px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; }
.yr-award-plate.is-cover { padding:0; }
.yr-award-plate.is-cover img { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; transform:none; } /* pinned to the plate, not sized by the grid: a wide card once let the crop grow past the plate (3 Sep 2026) */
.yr-award-words { padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; flex:1 1 auto; }
.yr-award-words .yr-btn { margin-top:auto; width:100%; box-sizing:border-box; } /* the card's action is a button pinned to the bottom, full width like a seller card's (Vadim, 3 Sep 2026: actions are buttons, never text links) */
.yr-award-name { font-size:15px; font-weight:700; letter-spacing:-.01em; }
.yr-award-note { font-size:12.5px; color:var(--yr-text-muted); margin-top:3px; }
/* ── Tooltip (VB2's .gd-tip, the owner's standard) ───────────────────────── */
.yr-tip {
position:fixed; z-index:9402;
font-family:var(--yr-font);
background:var(--yr-dark); color:var(--yr-on-dark);
font-size:12px; font-weight:600; line-height:1; letter-spacing:.01em;
padding:7px 12px; border-radius:9px; white-space:nowrap;
pointer-events:none; forced-color-adjust:none;
}
/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
.yr-page *, .yr-page *::before, .yr-page *::after { animation:none !important; transition:none !important; }
}
/* ══ Parts promoted from the product page into the kit (4 Sep 2026) — the header, breadcrumbs and meta, the title block, chips,
the glance bar, marks, stack rows, list foot and pager, filter rows, seller rows, review cards with the trust dial, the AI
summary, platform and aspect bars, the picture card (tint), the dark band's actions, the empty state, the footer, the small
and full buttons. Written for the product page first; the same rules, the same order, now shared. ══ */
.yr-sec-short { display:none; } /* the section switcher's short words: the phone only */
.yr-nav { display:flex; align-items:center; gap:clamp(16px,2.4cqw,34px); padding:clamp(14px,1.4cqw,20px) var(--yr-gutter); background:var(--yr-surface); border-bottom:.5px solid var(--yr-rule); font-size:clamp(13px,1.05cqw,15px); font-weight:500; } /* .5px: one device pixel on any screen — thinner — and half the hairline in the dark (Vadim, 5 Sep 2026) */
.yr-nav + .yr-section { border-top:0; } /* one line under the header, not the header's and the first section's stacked — that pair read as a drop shadow (Vadim, 5 Sep 2026) */
.yr-nav-logo { display:block; width:clamp(132px,12.8cqw,184px); height:auto; margin-right:8px; aspect-ratio:387 / 113; object-fit:contain; object-position:left center; } /* one box for both logos (the white file is a wider shape): the header's height never moves on the flip (Vadim, 5 Sep 2026) */
.yr-nav-right { display:flex; align-items:center; gap:clamp(16px,2.4cqw,34px); } /* the home page’s spacing between the rule, the switch and the pair (Vadim, 7 Sep 2026: "the spacing on the home page ... is perfect") */
.yr-nav-rule { width:1px; height:16px; background:var(--yr-hairline-nav); flex:none; } /* the rule before the switch, as on the home page */
.yr-plus { display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px; }
.yr-nav-auth { display:flex; align-items:center; gap:10px; }
/* The phone header (7 Sep 2026, Vadim from his phone: "there's no hamburger menu when I go to certain pages ... the login and signup
... should be justified to the far right ... I also need a back button"): from 799 down the slab hides, a burger before the logo
opens the site's menu, and the switch with the pair sit at the far right; from 599 down the trail of crumbs collapses to one Back
button. The home page has its own burger (.yr-live-burger) with the same bars and the same fold. Markup: markup.js burger(). */
.yr-nav { position:relative; z-index:5; } /* the open menu paints over the section under the header */
.yr-burger-wrap { position:relative; display:none; flex:none; }
.yr-burger { display:flex; flex-direction:column; justify-content:center; gap:4px; width:38px; height:38px; padding:9px; margin:0; box-sizing:border-box; border:0; border-radius:10px; background:none; color:var(--yr-ink); cursor:pointer; transition:background-color var(--yr-hover) ease; }
.yr-burger:hover { background:var(--yr-menu-hover-bg); } /* soft: a fill, never a border */
.yr-burger i { display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .2s ease, opacity .2s ease; } /* the bars fold into a cross when open */
.yr-burger-wrap.is-open .yr-burger i:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.yr-burger-wrap.is-open .yr-burger i:nth-child(2) { opacity:0; }
.yr-burger-wrap.is-open .yr-burger i:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.yr-burger-menu { position:absolute; top:calc(100% + 10px); left:0; z-index:7; min-width:208px; display:flex; flex-direction:column; padding:6px; background:var(--yr-block-bg); border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-btn); box-shadow:var(--yr-shadow-search); opacity:0; translate:0 -6px; visibility:hidden; pointer-events:none; transition:opacity .2s ease, translate .2s ease, visibility 0s linear .2s; } /* the dropdown of 7 Sep; since 8 Sep the menu is the SHEET from the bottom on the phone — your-reviews-shell.css overrides this from 799 down, which is the only place the burger shows (Vadim: "bring it in from the bottom half") */
.yr-burger-wrap.is-open .yr-burger-menu { opacity:1; translate:0 0; visibility:visible; pointer-events:auto; transition:opacity .2s ease, translate .2s ease, visibility 0s; }
.yr-burger-menu a { display:flex; align-items:center; min-height:40px; padding:0 12px; border-radius:8px; font-size:14px; font-weight:600; color:var(--yr-ink); transition:background-color .12s ease, color .12s ease; } /* the whole row is the link */
.yr-burger-menu a:hover { background:var(--yr-menu-hover-bg); }
.yr-burger-menu a.is-on { background:var(--yr-slab-pill); color:var(--yr-slab-on); } /* the page's own option: the slab's pill */
[data-theme="dark"] .yr-burger-menu { background:var(--yr-other); } /* the two-greys law: the menu is a leaf on the header's ground */
.yr-crumbs { display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px; color:var(--yr-text-muted); }
.yr-crumbs b { color:var(--yr-ink); font-weight:600; }
.yr-head { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:20px; row-gap:14px; align-items:center; } /* the name and its chips sit centred on the mark's height, not at its top (Vadim, 4 Sep 2026, both pages); the phone tier keeps its own placement */
.yr-brand-mark { width:96px; height:96px; border-radius:var(--yr-radius-feat); background:var(--yr-lilac); display:grid; place-items:center; font-weight:800; font-size:var(--yr-h2); color:var(--yr-purple-ink); grid-row:1; } /* not .pr-mark — that was the old price-history dot, gone 3 Sep 2026 */
.yr-title { display:flex; flex-direction:column; gap:10px; grid-row:1; }
.yr-under { grid-column:1 / -1; display:flex; flex-direction:column; gap:14px; } /* flows under the mark */
.yr-glance-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; margin-top:calc(-1 * var(--yr-row-gap) + var(--yr-plan-gap)); } /* the three facts under the photos (Vadim's pick "B", 2 Sep 2026); the old "At a glance" label is gone */
.yr-glance-bar .yr-glance-chip { border:0; background:transparent; padding:6px 10px; font-size:13.5px; } /* in the bar a chip is words with a dot, not a block: no ground of its own (7 Sep 2026; it painted the surface, invisible in light mode and a same-grey block in the dark) */
.yr-sep { width:1px; height:22px; background:var(--yr-hairline); }
.yr-actions-right { margin-left:auto; display:flex; gap:10px; }
.yr-brand-name { font-weight:800; font-size:15px; letter-spacing:-.01em; }
.yr-chips { display:flex; flex-wrap:wrap; gap:8px; }
.yr-chip--neutral { background:var(--yr-surface-soft); color:var(--yr-text-muted); }
.yr-chip--verified { background:var(--yr-green); color:var(--yr-on-dark); } /* the verified listing: the one green, sized like the purple chip */
.yr-meta { display:flex; flex-wrap:wrap; gap:9px; font-size:12.5px; color:var(--yr-text-muted); }
.yr-meta b { color:var(--yr-ink); font-weight:600; }
.yr-actions { display:flex; flex-wrap:wrap; gap:10px; }
.yr-btn--sm { padding-left:16px; padding-right:16px; font-size:13.5px; } /* smaller words, the same 46px (the two heights, 3 Sep 2026) */
.yr-price .yr-lbl, .yr-price input { font-weight:700; font-size:15px; color:var(--yr-ink); }
.yr-price .yr-lbl { margin-right:2px; }
.yr-glance { display:flex; flex-wrap:wrap; gap:8px; }
.yr-glance-chip { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-nav); padding:6px 12px; font-size:12.5px; font-weight:600; background:var(--yr-block-bg); }
.yr-swatch { width:14px; height:14px; border-radius:4px; background:var(--yr-purple-light); flex:none; }
.yr-bars { display:flex; flex-direction:column; gap:5px; } /* 5, not 8 (5 Sep 2026): three pixels a row lent to the rating chart below the bars */
.yr-bar { display:grid; grid-template-columns:28px minmax(0,1fr) minmax(18px,auto); align-items:center; gap:10px; font-size:12.5px; color:var(--yr-text-muted); position:relative; isolation:isolate; } /* the count column grows with its digits (522 overflowed an 18px cell, 4 Sep 2026) */
.yr-bar[data-goto] { cursor:pointer; }
/* the hover on a breakdown row is a state on the parts, not a layer behind the row (Vadim, 7 Sep 2026: "why would you get an overlapping bar? … that bar should get a little brighter, and maybe the four and the star could get a little bit brighter … don’t slap a block over the top of it"): the fill and the track a step brighter, the digit to the ink; the 6 Sep layer under the row is gone */
.yr-bar[data-goto] .yr-fill, .yr-bar[data-goto] .yr-track { transition:background-color var(--yr-hover) ease; }
.yr-bar[data-goto] .yr-bar-l { transition:color var(--yr-hover) ease; }
.yr-bar[data-goto]:hover .yr-fill { background:var(--yr-bar-hover-fill); }
.yr-bar[data-goto]:hover .yr-track { background:var(--yr-bar-hover-track); }
.yr-bar[data-goto]:hover .yr-bar-l { color:var(--yr-ink); }
.yr-bar-l { display:inline-flex; align-items:center; gap:3px; } /* the digit, a little air, the star (Vadim, 6 Sep 2026: "sitting really close to each other") */
.yr-bar-star { color:var(--yr-amber); } /* gold, like the stars in the head */
.yr-bar b { text-align:right; color:var(--yr-ink); font-weight:700; }
.yr-track { height:8px; border-radius:var(--yr-radius-pill); background:var(--yr-surface-soft); overflow:hidden; }
.yr-fill { height:100%; border-radius:var(--yr-radius-pill); background:var(--yr-purple); }
.yr-btn--full { width:100%; }
.yr-btn > svg:not(.yr-plus) { width:16px; height:16px; flex:none; margin-right:8px; } /* a mark inside a button (the photos grid, the pencil): 16px, then its words — the product page sized its own; the kit does now (4 Sep 2026) */
.yr-btn--icon > svg:not(.yr-plus) { margin-right:0; } /* a square button whose mark IS the label (the lightbox's chevrons): the mark sits dead centre — the 8px after a mark is for words that follow it (Vadim, 5 Sep 2026: the chevrons were 4px left of centre on both pages) */
.yr-tech { display:flex; align-items:center; gap:clamp(20px,2.8cqw,40px); padding:18px 24px; }
.yr-tech-marks { flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.yr-tech-marks img { height:40px; width:auto; display:block; }
.yr-grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--yr-plan-gap); }
.yr-row-right { display:flex; align-items:center; gap:clamp(14px,1.6cqw,24px); flex-wrap:wrap; }
.yr-ai { display:flex; align-items:center; gap:24px; }
.yr-ai img { width:64px; height:auto; flex:none; }
.yr-aspects { display:flex; flex-direction:column; gap:11px; }
.yr-aspect { display:grid; grid-template-columns:132px minmax(0,1fr) 104px; align-items:center; gap:14px; }
.yr-aspect-name { font-size:13.5px; font-weight:600; }
.yr-aspect .yr-track { height:9px; }
.yr-aspect-score { font-size:15px; font-weight:800; }
.yr-aspect-count { font-size:12px; color:var(--yr-text-muted); margin-left:6px; font-weight:600; }
.yr-tags { display:flex; flex-wrap:wrap; gap:8px; }
.yr-tag { border:1px solid var(--yr-hairline); background:var(--yr-block-bg); border-radius:var(--yr-radius-pill); padding:6px 14px; font-size:13px; font-weight:600; white-space:nowrap; }
.yr-tag.is-top { background:var(--yr-lilac-fill); border-color:var(--yr-lilac-fill-line); color:var(--yr-lilac-fill-ink); }
.yr-tag small { font-weight:600; opacity:.6; margin-left:6px; }
.yr-seller { display:flex; flex-direction:column; gap:12px; padding:22px; }
.yr-seller-top { display:flex; gap:16px; align-items:center; }
.yr-logo-plate { width:76px; height:76px; flex:none; border-radius:var(--yr-radius-feat); font-size:12px; }
.yr-seller-name { font-size:16px; font-weight:700; letter-spacing:-.01em; }
.yr-seller-price { font-family:var(--yr-font); font-weight:800; font-size:26px; letter-spacing:-.03em; line-height:1.1; }
.yr-seller-price small { font-size:13px; font-weight:600; color:var(--yr-text-muted); letter-spacing:0; margin-left:6px; }
.yr-stock { font-size:13px; color:var(--yr-text-muted); flex:1 1 auto; }
.yr-srows { padding:0; overflow:hidden; margin-top:var(--yr-plan-gap); }
.yr-filters { padding:16px 22px; border-bottom:1px solid var(--yr-hairline); display:flex; flex-direction:column; gap:12px; }
.yr-filter-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.yr-filter-row .yr-eyebrow { margin:0 6px 0 0; }
.yr-cols { display:grid; grid-template-columns:minmax(0,2fr) repeat(4, minmax(0,1fr)) 96px; gap:16px; align-items:center; padding:10px 22px; background:var(--yr-band); border-bottom:1px solid var(--yr-hairline); }
.yr-cols .yr-eyebrow { margin:0; font-size:10.5px; }
.yr-srow { display:grid; grid-template-columns:minmax(0,2fr) repeat(4, minmax(0,1fr)) 96px; /* the balance rule (Vadim, 3 Sep 2026): Seller takes two shares, Highlight, Rating, Distance and Price one equal share each with their contents centred, Visit a fixed 96px at the end; equal columns and centred contents put the same air between every pair, at every width */ gap:16px; align-items:center; padding:12px 22px; border-bottom:1px solid var(--yr-hairline); font-size:13.5px; }
.yr-srow:last-child { border-bottom:0; }
.yr-srow-id { display:flex; align-items:center; gap:12px; min-width:0; }
.yr-srow-logo { width:36px; height:36px; flex:none; border-radius:9px; font-size:10px; padding:0; }
.yr-srow-name { font-size:14.5px; font-weight:600; }
.yr-srow-tag, .yr-srow-rating, .yr-srow-dist, .yr-srow-price, .yr-srow-hours { text-align:center; }
.yr-srow-tag .yr-chip { min-width:min(112px, 100%); justify-content:center; box-sizing:border-box; }
.yr-cols > :nth-child(n+2):nth-child(-n+5) { text-align:center; }
.yr-srow-sub { font-size:12.5px; color:var(--yr-text-muted); margin-top:2px; }
.yr-srow-val { display:none; } /* the last column's value, copied to the end of the sub-line by yr.srows; shown only in the narrow row (the 1049px tier) */
.yr-srow-rating b { font-weight:700; }
.yr-srow-rating .yr-stars { font-size:13px; letter-spacing:0; margin:0 4px; } /* the score, then the star, then the count (Vadim, 4 Sep 2026: "the rating first, then the stars, then the amount of reviews") */
.yr-srow-rating .yr-stars > :not(:first-child) { display:none; } /* the Rating column shows one star and the score; the phone's standing box shows all five (the markup carries them, one span each) */
.yr-srow-chip { display:none; } /* the chip copied into the rating cell by yr.srows; shown only in the narrow row's standing box */
.yr-srow-dist, .yr-srow-hours { color:var(--yr-text-muted); } /* hours read like the distance: plain, muted, the row's size (Vadim, 4 Sep 2026: "nobody cares about hours") */
.yr-srow-price { font-weight:800; font-size:16px; letter-spacing:-.02em; } /* a PRICE only — "the thing people give a shit about"; never dress another value in it */
.yr-srow .yr-btn { justify-self:end; padding:0 14px; font-size:13px; }
.yr-list-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 22px; border-top:1px solid var(--yr-hairline); font-size:13px; color:var(--yr-text-muted); }
.yr-list-foot .yr-row-right { margin-left:auto; }
.yr-review { padding:0; overflow:clip; display:grid; grid-template-columns:268px minmax(0,1fr); } /* clip, not hidden: hidden makes the card a scroll container and the rail’s sticky content pins to the card instead of the page (6 Sep 2026) */
.yr-rail { background:var(--yr-band); border-right:1px solid var(--yr-hairline); padding:22px 22px 24px; }
.yr-rail-in { position:sticky; top:92px; display:flex; flex-direction:column; gap:14px; } /* the rail’s content sits at the top of the card and follows the reader down a long one — when More or the comments open a card up it no longer floats in the middle of the band (Vadim, 6 Sep 2026); 92 = the section bar’s 78 and a gap */
.yr-who { display:flex; align-items:center; gap:12px; }
.yr-tier { display:block; font-size:9.5px; font-weight:800; letter-spacing:.11em; color:var(--yr-purple); }
.yr-name { display:block; font-size:13px; font-weight:800; letter-spacing:.01em; margin-top:3px; text-transform:uppercase; }
.yr-gauge { width:150px; margin:0 auto; padding-bottom:26px; container-type:inline-size; } /* the reading below is sized from the dial's width, so a smaller dial keeps the same picture (Vadim, 4 Sep 2026: words over the arc are "a massive no no") */
.yr-dial { position:relative; } /* the read block hangs from the dial, not from the padded box */
.yr-dial svg { display:block; width:100%; height:auto; }
.yr-gauge-read { position:absolute; left:0; right:0; bottom:11.76%; transform:translateY(46%); text-align:center; }
.yr-gauge-cap { font-size:clamp(6px, 6cqw, 9px); font-weight:800; letter-spacing:.1em; color:var(--yr-text-muted); line-height:1; } /* 9px at 150 */
.yr-gauge-num { font-size:clamp(16px, 17.33cqw, 26px); font-weight:800; letter-spacing:-.02em; line-height:1; margin-top:clamp(2px, 2.67cqw, 4px); } /* 26px at 150; the caption sits 4px closer to the number, lower in the arc, so it has more room at its sides (Vadim, 5 Sep 2026: "almost touching the semicircle") */
.yr-gauge-of { font-size:clamp(8px, 7.33cqw, 11px); font-weight:600; color:var(--yr-text-faint); line-height:1; margin-top:clamp(4px, 4.67cqw, 7px); } /* 11px at 150 */
.yr-metrics { border-top:1px solid var(--yr-hairline-strong); }
.yr-metric { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--yr-hairline-strong); font-size:13px; font-weight:600; line-height:1.3; color:var(--yr-text-muted); }
.yr-metric:last-child { border-bottom:0; padding-bottom:0; }
.yr-metric b { font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--yr-ink); flex:none; }
.yr-body { padding:24px 28px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.yr-body-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--yr-text-muted); } /* the review’s HEADER (Vadim, 6 Sep 2026: "the most important thing on the page"): the score, then the stars, then the date, the verified chip at the right end */
.yr-body-score { font-family:var(--yr-font); font-size:var(--yr-h3); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--yr-ink); } /* 32px on a desktop: the number leads (his rule: score, then stars, then count) */
.yr-body-top .yr-stars { font-size:26px; letter-spacing:2px; }
.yr-body-top .yr-chip { margin-left:auto; }
.yr-review-title { font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.35; }
.yr-review-text.yr-clamp { --yr-clamp-lines:8; white-space:pre-line; line-height:1.6; } /* 1.6, the clamp’s own: its cap is lines × 1.6em, and the review’s 1.65 left the eighth line 5px under it (the sweep, 6 Sep 2026) */ /* a review holds to eight lines with "… More" (6 Sep 2026), its paragraphs kept: the clamp keeps blank lines, pre-line shows them */
.yr-review-text { font-size:14.5px; line-height:1.65; margin:0; }
.yr-reply { border-left:3px solid var(--yr-purple-hover-line); padding-left:16px; }
.yr-reply .yr-eyebrow { color:var(--yr-purple-ink); margin-bottom:6px; }
.yr-reply p { margin:0; font-size:14px; line-height:1.6; color:var(--yr-text-muted); }
/* the thread (6 Sep 2026): reader replies folded behind the count, on the same purple rule as the business's reply; Reply opens the box */
.yr-fold { margin-top:14px; } /* the comments indicator: a button that says how many comments the fold holds, and unfolds it like More (Vadim, 6 Sep 2026) */
.yr-thread { max-height:0; overflow:clip; transition:max-height var(--yr-ride); } /* the ride: its duration and easing in one token */
.yr-thread-inner { padding:14px 0 22px; display:flex; flex-direction:column; gap:12px; } /* room under the reply box before the actions row (Vadim, 6 Sep 2026: "more of a buffer below that") */
.yr-thread-row { border-left:3px solid var(--yr-purple-hover-line); padding-left:16px; display:grid; grid-template-columns:32px minmax(0,1fr); gap:0 12px; align-items:start; }
.yr-thread-row--nested { margin-left:44px; } /* one level under the comment answered (his pick, B, 6 Sep 2026): the avatar and its gap, so the nested line starts under the parent’s words; a reply to a reply stays at this level and names the person answered in its line */
.yr-thread-row--removed .yr-thread-text { color:var(--yr-text-faint); } /* a removed comment keeps its place as a grey line ("This comment was removed"), so the replies under it keep their sense */
.yr-thread-row .yr-avatar { width:32px; height:32px; font-size:11px; grid-row:1 / span 2; }
.yr-thread-who { font-size:12.5px; color:var(--yr-text-muted); display:flex; align-items:center; gap:12px; margin-bottom:6px; } /* the line: the person (.yr-thread-meta) at the left, the comment’s Reply pill at the right — the review head’s shape one level down (6 Sep 2026) */
.yr-thread-meta { display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline; min-width:0; }
.yr-thread-who .yr-btn { margin-left:auto; } /* the small height for the smaller thing: a pill under the review’s squares (the two heights) */
.yr-thread-who .yr-edited { color:var(--yr-text-faint); } /* "· edited" after the date */
.yr-thread-to b { font-size:inherit; font-weight:600; } /* "replying to Sarah Johnson": a reply to a reply, at the same level, names the person */
.yr-thread-who b { color:var(--yr-ink); font-size:13.5px; }
.yr-thread-who .yr-eyebrow { margin:0; color:var(--yr-purple-ink); font-size:9.5px; }
.yr-thread-text { margin:0; font-size:14px; line-height:1.6; color:var(--yr-text-muted); --yr-clamp-lines:3; white-space:pre-line; }
.yr-slot { max-height:0; overflow:clip; transition:max-height var(--yr-ride); } /* a box folded away: the Q&A’s answer box after a question’s actions; [data-reply=""] slides it open with the cursor in it, pressed again folds it, and opening one folds any other in the card (6 Sep 2026). A thread has no folded boxes: one box at its end, aimed — .yr-compose-to */
.yr-slot .yr-compose { padding-top:12px; }
.yr-compose { display:flex; flex-wrap:wrap; gap:0 10px; align-items:flex-start; } /* the reply box runs the review’s full width, level with the words, the comment rows and the actions row (Vadim, 6 Sep 2026: "make it the same length ... we’re always interested in balance"); it wraps only for its aim line, which carries its own space so the closed line takes none */
.yr-compose textarea { flex:1 1 auto; min-width:0; min-height:46px; box-sizing:border-box; padding:12px 14px; border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-btn); background:var(--yr-field-bg); color:var(--yr-ink); font:inherit; font-size:14px; line-height:1.5; resize:vertical; outline:0; }
.yr-compose textarea::placeholder { color:var(--yr-text-muted); }
/* the aimed box (6 Sep 2026, "one box per thread"): a thread has one box, at its end. A comment’s Reply aims it: "Replying to Name ×" rises over the field (the ride’s slide), the prompt reads "Reply to Name", the cursor lands in it; the × or the review’s own Reply drops back to a plain comment. Two boxes never sit side by side. */
.yr-compose-to { flex:1 1 100%; display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--yr-text-muted); max-height:0; opacity:0; overflow:clip; margin-bottom:0; transition:max-height var(--yr-ride), opacity .18s ease, margin-bottom var(--yr-ride); }
.yr-compose-to.is-on { opacity:1; margin-bottom:8px; }
.yr-thread-inner > .yr-compose { margin-top:16px; } /* the box sits 28px under the last comment, not on top of it (Vadim, 6 Sep 2026: "not much of a buffer") */
.yr-thread-row.is-new { max-height:0; opacity:0; overflow:clip; transition:max-height var(--yr-ride), opacity .18s ease .12s; } /* a posted comment slides in on the ride and fades up as it comes */
.yr-thread-row.is-new.is-in { opacity:1; }
.yr-compose-to b { color:var(--yr-ink); font-weight:700; }
.yr-compose-x { margin-left:auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--yr-hairline); background:var(--yr-btn-white); color:var(--yr-ink); display:grid; place-items:center; font-size:15px; line-height:1; cursor:pointer; transition:background-color var(--yr-hover) ease, color var(--yr-hover) ease, border-color var(--yr-hover) ease; } /* the dismiss: a small round control, the one size the kit keeps beside the two heights for a control that is not an action (the switch is the other) */
.yr-compose-x:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); }
.yr-tick { vertical-align:-2px; margin-left:3px; } /* the business’s or the brand’s mark beside its name in a thread or an answer: the purple tick, no word (6 Sep 2026) */
/* Q&A (6 Sep 2026, "create a few Q&As so I know what it looks like"): one card; a question is a row like a comment’s head (a 40px disc, the person, the question in bold), its answers under it as thread rows — the owner’s (the brand’s on a product) and customers’ alike, the eyebrow saying who; Answer and Useful close each question with its count at the right, the answer box folded after them; the ask box ends the card */
.yr-card.yr-qa { padding:0 26px; }
.yr-qa-item { padding:24px 0; border-top:1px solid var(--yr-hairline); }
.yr-qa-item:first-child { border-top:0; }
.yr-qa-item > * + * { margin-top:16px; }
.yr-qa-item > .yr-slot { margin-top:0; }
.yr-qa-q { display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 14px; align-items:start; }
.yr-qa-q .yr-avatar { width:40px; height:40px; font-size:13px; }
.yr-qa-text { margin:0; font-size:16px; font-weight:700; line-height:1.45; color:var(--yr-ink); }
.yr-qa-answers { display:flex; flex-direction:column; gap:12px; padding-left:54px; } /* under the question’s words: the disc and its gap */
.yr-qa-foot { display:flex; align-items:center; gap:10px; padding-left:54px; }
.yr-qa-foot .yr-note { margin-left:auto; }
.yr-qa-item .yr-slot .yr-compose { margin-left:54px; padding-top:16px; }
.yr-qa-ask { padding:22px 0 26px; border-top:1px solid var(--yr-hairline); }
@media (prefers-reduced-motion:reduce) { .yr-thread, .yr-slot, .yr-compose-to, .yr-compose-x, .yr-thread-row.is-new { transition:none; } }
.yr-review-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; } /* four white buttons — Useful, Reply, Share, and Flag at the right — the same button as How we verify (Vadim, 5 Sep 2026: "they all need to look like the Useful button … that's the default") */
.yr-review-actions .yr-link { font-size:13px; }
.yr-review-actions .yr-flag { margin-left:auto; }
.yr-pager { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid transparent; font-size:13px; color:var(--yr-text-muted); }
.yr-pager .yr-row-right { margin-left:auto; }
.yr-plat { display:grid; grid-template-columns:170px minmax(0,1fr) 126px; align-items:center; gap:16px; }
.yr-plat + .yr-plat { margin-top:14px; }
.yr-plat-name { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--yr-text-muted); }
.yr-plat-name.is-ours { color:var(--yr-ink); font-weight:700; }
.yr-plat-name img { width:19px; height:auto; }
.yr-plat .yr-track { height:14px; }
.yr-plat .yr-fill--other { background:var(--yr-fill-soft); }
.yr-plat-score { text-align:right; font-size:16px; font-weight:800; }
.yr-plat-score small { display:block; font-size:12px; font-weight:600; color:var(--yr-text-muted); margin-top:2px; }
.yr-plat-foot { margin-top:18px; padding-top:14px; border-top:1px solid var(--yr-hairline); font-size:12.5px; color:var(--yr-text-muted); display:flex; align-items:center; gap:8px; }
.yr-empty { text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 24px; }
.yr-empty-title { font-size:16px; font-weight:700; }
.yr-empty p { margin:0; font-size:var(--yr-card-copy); color:var(--yr-text-muted); line-height:1.55; }
.yr-empty .yr-btn { margin-top:8px; }
.yr-pic { position:relative; display:block; padding:0; aspect-ratio:424 / 236; overflow:hidden; background:var(--yr-pic-bg); border-color:var(--yr-pic-line); } /* NO max-height: with an aspect ratio a height cap transfers to the width (CSS size transfer), and the tile stopped 467px wide in any column wider than that — a hole on its right at 600 to 680 and on the lone tile of a two-column row (Vadim, 5 Sep 2026: "why do I have all this negative space") */
.yr-pic img { position:absolute; left:10px; top:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain; max-width:none; display:block; }
.yr-pic.is-fit img { object-fit:fill; }
.yr-pic-veil { position:absolute; inset:0; background:rgb(var(--yr-veil-rgb)); opacity:var(--yr-veil-a); transition:opacity var(--yr-hover) ease; will-change:opacity; } /* by opacity, not colour: the picture under it is never re-painted on hover (5 Sep 2026: a big picture flickered) */ /* light at rest (.08 — "go lighter again"), darker on hover so the words read (Vadim, 4 Sep 2026: "make the current tint even lighter, but it goes darker when you hover") */
.yr-pic:hover .yr-pic-veil { opacity:var(--yr-veil-hover-a); } /* the veil is a token: in the dark it is black and stronger under the mouse, so the white words read (Vadim, 5 Sep 2026) */
.yr-pic-txt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; }
.yr-pic-name { font-size:16px; font-weight:700; color:var(--yr-on-dark); }
.yr-pic-note { font-size:12.5px; color:rgba(255,255,255,.85); margin-top:3px; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.yr-pic-note b { color:var(--yr-on-dark); }
.yr-pic-note .yr-stars { font-size:12px; letter-spacing:0; }
.yr-cta { justify-content:space-between; }
.yr-cta > div:first-child { flex:1 1 320px; min-width:0; padding:18px 0; } /* the 36px the eyebrow used to take, split above and below, so the band keeps the height it had and the text stays centred (Vadim, 4 Sep 2026: "restore the height") */
.yr-cta .yr-lede { color:var(--yr-on-dark-72); }
.yr-cta .yr-h3 { margin:0; } /* no margin at all: the line boxes' own leading leaves about 8px, half of what the heading's usual 8px margin made (Vadim, 4 Sep 2026: "that spacing is way too much"); no top margin either, so the two lines sit centred in the band */
.yr-cta-right { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.yr-cta-right .yr-note { color:var(--yr-on-dark-55); }
.yr-footer { background:var(--yr-footer-bg); color:var(--yr-on-dark-60); padding:clamp(32px,3.4cqw,52px) var(--yr-gutter) 26px; border-top:1px solid var(--yr-hairline); } /* a line between the page and the footer: in the dark the last section and the footer are near one colour (Vadim, 5 Sep 2026) */
.yr-footer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,max-content)); justify-content:space-between; align-items:start; gap:clamp(24px,3.4cqw,52px); margin-bottom:clamp(24px,2.4cqw,36px); }
.yr-footer-brand { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.yr-footer-brand img { display:block; width:clamp(132px,12.8cqw,184px); height:auto; }
.yr-footer-btns { display:flex; gap:10px; flex-wrap:wrap; }
a.yr-footer-btn { text-decoration:none; } /* a footer button that is a link (the demo’s Admin, 7 Sep 2026) */
.yr-footer-btn { display:inline-flex; align-items:center; box-sizing:border-box; min-height:var(--yr-btn-h); border-radius:var(--yr-radius-nav); padding:0 18px; font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:background-color var(--yr-hover) ease, border-color var(--yr-hover) ease; }
.yr-footer-btn:hover { background:var(--yr-hover-on-dark-bg); border-color:var(--yr-hover-on-dark-bg); color:var(--yr-hover-on-dark-ink); } /* the dark-surface law: on the dark footer the pair hovers to the light grey */
.yr-footer-btn--login, .yr-footer-btn--signup { background:var(--yr-purple); border-color:var(--yr-purple); color:var(--yr-on-dark); } /* the footer pair is purple (5 Sep 2026: the rules were page CSS on the product page and missing on the business page, where the two sat transparent until hovered) */
.yr-footer-col h4 { font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--yr-on-dark); margin:0 0 14px; }
.yr-footer-col div { display:flex; flex-direction:column; gap:9px; font-size:var(--yr-footer-link); }
.yr-footer-legal { border-top:1px solid var(--yr-on-dark-line); padding-top:20px; display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-size:13px; }
.yr-footer-legal img { height:20px; width:auto; display:block; opacity:.75; }
.yr-footer-legal .yr-legal-left { display:inline-flex; align-items:center; gap:10px; }
.yr-footer-legal .yr-legal-right { margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; }
/* ── the business page's parts (4 Sep 2026) — the product page's sister, composed from the kit; these are the parts it needed that the kit did not
have, made once here with a row in the rulebook and a live example on the reference page ─────────────────────────────────────────────── */
.yr-topline { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:clamp(20px,2.4cqw,32px); } /* breadcrumbs left, the meta line right (Vadim, 2 Sep 2026) */
.yr-meta--right { justify-content:flex-end; text-align:right; margin-left:auto; }
.yr-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); column-gap:var(--yr-col-gap); row-gap:var(--yr-row-gap); align-items:stretch; } /* the words and the pictures left, the rating card right; both columns end on the same line */
.yr-overview > * { min-width:0; }
.yr-overview-left { display:flex; flex-direction:column; gap:var(--yr-row-gap); min-width:0; }
.yr-overview > .yr-rating-card { align-self:start; } /* the two stacks law (4 Sep 2026): the card is a stack of fixed blocks and never stretches — when the other stack is taller (the band at its floor, the description open) the card ends where it ends, no hole above Write a review */
/* the strip (4 Sep 2026): a lilac card with a round mark, a bold line, a plain line and one button at the right — the price alert on the
product page, "Is this your business?" on an unclaimed business page (his pick A: a question, in the first screen, the one purple button
in its stack, the site's own shape so it reads as content, not an ad). Under 720 the button drops under the words, edge to edge. */
.yr-strip { display:flex; align-items:center; gap:16px; background:var(--yr-strip-bg); border-radius:16px; padding:16px 20px; }
.yr-strip .yr-btn--primary:hover { background:var(--yr-strip-btn-hover-bg); border-color:var(--yr-strip-btn-hover-bg); color:var(--yr-strip-btn-hover-ink); } /* on the strip's light ground the purple button hovers to the dark, in both modes */
.yr-strip-mark { width:40px; height:40px; border-radius:50%; background:var(--yr-purple); color:var(--yr-on-dark); display:grid; place-items:center; flex:none; }
.yr-strip-mark svg { width:18px; height:18px; }
.yr-strip-copy { min-width:0; flex:1 1 200px; } /* a basis, not auto: under 720 the words stay beside the mark and only the button drops to the next row */
.yr-strip-copy b { display:block; font-size:15px; letter-spacing:-.01em; color:var(--yr-strip-title); }
.yr-strip-copy span { display:block; font-size:13.5px; color:var(--yr-strip-copy); margin-top:2px; line-height:1.45; }
.yr-strip > .yr-btn { margin-left:auto; flex:none; min-width:200px; }
@container (max-width:720px) {
.yr-strip { flex-wrap:wrap; }
.yr-strip > .yr-btn { width:100%; margin-left:0; box-sizing:border-box; }
}
.yr-brand-mark.is-logo { background:var(--yr-surface); border:1px solid var(--yr-hairline); position:relative; overflow:hidden; } /* a supplied mark on the white tile with a tenth of air around it, never redrawn (the seller-mark rule) */
.yr-brand-mark.is-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:12%; box-sizing:border-box; display:block; }
/* the photo band, Hero + 2 (the gallery's first structure, 3 Sep 2026): the hero at the band's full height on the left, two squares stacked on the
right, one 12px gap; every picture pinned to its tile and cover-cropped so a hero never sits in white */
.yr-photos { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; flex:1 1 auto; min-height:clamp(220px,20cqw,300px); }
.yr-photo { position:relative; overflow:hidden; border-radius:var(--yr-radius-tile); background:var(--yr-band); min-height:0; }
.yr-photo:first-child { grid-row:1 / 3; }
.yr-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* the rating card: a dark head with the score, the stars and the count; the breakdown; the card's own rows; the button pinned to the bottom */
/* the card rides with the words (Vadim, 5 Sep 2026: "like an accordion, at least to some degree"): when the description slides open beside
it, the behaviours set --yr-t on the card (0 closed … 1 at the caps) and every block grows in step — the head's air, the bars' gaps and
thickness, the chart's plot, the inset, the body's gaps, the button — each by its cap × t. The caps add up to --yr-give-max
(176px here — measured, not summed: a thicker bar adds no height, its row is set by its text), which the behaviours read to size t: the words' extra height beyond what the band gives, over the caps, so the columns
end level up to about ten lines and the card stops at its caps past that. A registered property, so the sheet's one transition carries
all of it in time with the text; t is 0 in one column and on the phone. */
@property --yr-t { syntax:''; inherits:true; initial-value:0; }
.yr-rating-card { padding:0; overflow:hidden; display:flex; flex-direction:column; --yr-t:0; --yr-give-max:176; transition:--yr-t .45s var(--yr-settle); }
.yr-rating-card .yr-bars, .pr-rating .yr-bars { gap:calc(5px + 5px * var(--yr-t, 0)); } /* four gaps: 20 */
.yr-rating-card .yr-track, .pr-rating .yr-track { height:calc(8px + 3px * var(--yr-t, 0)); } /* thicker, not taller: the row is its text's height */
.yr-rating-card .yr-inset { padding:calc(16px + 6px * var(--yr-t, 0)) 18px; } /* 12 */
.yr-rating-card .yr-block { gap:calc(16px + 4px * var(--yr-t, 0)); } /* 4 */
.yr-rating-head { container-type:inline-size; background:var(--yr-rating-head-bg); color:var(--yr-on-dark); padding:calc(22px + 12px * var(--yr-t, 0)) 24px calc(26px + 12px * var(--yr-t, 0)); } /* his pick, 6 Sep 2026: the eyebrow at the card’s own 24px ("restore the position of Your.Reviews rating"), the score row inset 34px more so the number and the stars sit closer so the number and the stars sit closer; a container so they size from its width; the ride still lends 12px top and bottom to the chart */
.yr-rating-head[data-goto], .pr-rating-head[data-goto] { cursor:pointer; transition:background-color var(--yr-hover) ease; } /* the head is the jump to the reviews — people click the rating to get to them (Baymard; Vadim, 6 Sep 2026) */
.yr-rating-head[data-goto]:hover, .pr-rating-head[data-goto]:hover { background:var(--yr-dark-hover); }
.yr-rating-head .yr-eyebrow { color:var(--yr-on-dark-55); margin-bottom:12px; } /* the one line of words: "Your.Reviews rating · N reviews" — no "Based on", no "out of 5": the five stars say it (Vadim, 6 Sep 2026) */
.yr-eyebrow-sep { opacity:.6; margin:0 2px; }
.yr-score { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:0 16px; padding:0 clamp(8px,8cqw,34px); } /* the stars centred on the number’s height ("centre the height of the stars to 4.7/4.5", 6 Sep 2026) */ /* the row’s own inset: 34px in the desktop card (22 first; "nudge them a little closer together", twice), less in a narrow one so the pair still fits */ /* the number at the left, the stars at the right end, one baseline (his pick B, 6 Sep 2026) */
.yr-score-num { font-family:var(--yr-font); font-weight:800; font-size:var(--yr-score); line-height:.85; letter-spacing:-.04em; }
.yr-score .yr-stars { font-size:var(--yr-score-stars); letter-spacing:3px; justify-self:end; position:relative; top:-3px; } /* the boxes centre, the ink does not: the digits sit 3px higher in theirs than the stars in theirs, so the stars lift 3px to centre on the number’s shape */
.yr-score .yr-stars .is-empty, .yr-score .is-half { color:var(--yr-star-empty-on-dark); }
.yr-rating-body { padding:20px 24px 18px; display:flex; flex-direction:column; gap:calc(18px + 4px * var(--yr-t, 0)); flex:1 1 auto; } /* the ride: three gaps, 12 */
.yr-block { display:flex; flex-direction:column; gap:16px; }
.yr-rating-body .yr-block { margin-top:auto; }
.yr-rating-card .yr-btn--full { display:inline-flex; align-items:center; justify-content:center; min-height:calc(52px + 8px * var(--yr-t, 0)); } /* the ride: 8 */ /* the rating card's buttons are 52: his one named exception to the 46px square (3 Sep 2026) */
/* the rating trend (4 Sep 2026, rebuilt at the strip's height — the two stacks law): one value a month as dots on a line, whole and half
stars as gridlines with their labels at the left, the last month's value on its dot, the month names under. The line lives in a
stretched SVG with a non-scaling stroke; the dots, the tag, the gridlines and the labels are HTML (the chart law). The plot's height
is a fixed size, --yr-trend-h: the card is a stack of fixed blocks, and this is the block that grew by the owner strip's height when
the strip went into the other stack (72px + the 24px row gap = 96px more card). .yr-trend--area fills under the line. */
.yr-trend { border-top:1px solid var(--yr-hairline); padding-top:16px; --yr-trend-h:calc(164px + 100px * var(--yr-t, 0)); --yr-trend-l:40px; --yr-trend-r:20px; } /* the ride: the plot takes the most, up to 100 */ /* the lane: 40px at the left for the scale, 20px at the right so the last dot, its tag and the last month stay inside the chart's box. THE CORNERS LAW (Vadim, 5 Sep 2026): no two labels come close in a corner of a chart — the scale column ends 9px before the first month's edge (half a month name is 11px), the month row sits 16px under the plot (a scale label hangs 6px below its line), the value tag drops under its dot when it would leave the plot at the top. The plot is 140 so the card's height did not move for the two extra gaps. */
.yr-trend-head { display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.yr-trend-head .yr-eyebrow { margin:0; }
.yr-trend-head b { margin-left:auto; font-size:12.5px; color:var(--yr-purple-deep); }
.yr-trend-head .yr-note { font-size:12px; }
.yr-trend-plot { position:relative; height:var(--yr-trend-h); } /* the plot is the chart's full width; the dots, the tag and the months are placed from its edges: left:calc(var(--yr-trend-l) + (100% - var(--yr-trend-l) - var(--yr-trend-r)) * f) */
.yr-trend-grid { position:absolute; left:calc(var(--yr-trend-l) - 8px); right:0; height:1px; background:var(--yr-hairline); }
.yr-trend-grid i { position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); font-style:normal; font-size:11px; font-weight:700; line-height:1; color:var(--yr-text-muted); white-space:nowrap; }
.yr-trend-plot svg { position:absolute; top:0; left:var(--yr-trend-l); width:calc(100% - var(--yr-trend-l) - var(--yr-trend-r)); height:100%; display:block; overflow:visible; }
.yr-trend-plot polyline { fill:none; stroke:var(--yr-purple); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.yr-trend-plot polygon { fill:var(--yr-purple); opacity:.08; stroke:none; display:none; }
.yr-trend--area .yr-trend-plot polygon { display:block; }
.yr-trend-dot { position:absolute; width:27px; height:27px; transform:translate(-50%,-50%); cursor:pointer; transition:transform var(--yr-hover, .18s) ease; } /* the element is the finger-sized hit box, centred on the point; the dot itself is drawn inside it (nothing overflows its box) */
.yr-trend-dot::before { content:''; position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%; background:var(--yr-purple); box-shadow:0 0 0 2px var(--yr-surface); transform:translate(-50%,-50%); }
.yr-trend-dot.is-last::before { width:11px; height:11px; }
.yr-trend-dot.is-hot { transform:translate(-50%,-50%) scale(1.3); }
/* the tooltip (5 Sep 2026): the price history's look — dark, two lines, over the dot, under it near the top */
.yr-trend-tip { position:absolute; z-index:3; background:var(--yr-dark); color:var(--yr-on-dark); border-radius:9px; padding:7px 12px; font-size:12px; line-height:1.4; white-space:nowrap; pointer-events:none; transform:translate(-50%, calc(-100% - 10px)); opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility 0s .2s, left .18s ease, top .18s ease; } /* the motion law (5 Sep 2026): a tooltip fades in and rises 4px, fades out, and glides between dots — never a flick; shown by .is-on, never by hidden */
.yr-trend-tip.is-on { opacity:1; visibility:visible; transform:translate(-50%, calc(-100% - 14px)); transition:opacity .2s ease, transform .22s var(--yr-settle), visibility 0s, left .18s ease, top .18s ease; }
.yr-trend-tip.is-below { transform:translate(-50%, 12px); }
.yr-trend-tip.is-below.is-on { transform:translate(-50%, 16px); }
.yr-trend-tip b { display:block; font-weight:700; }
.yr-trend-tip span { display:block; font-size:11px; color:var(--yr-on-dark-72); }
.yr-trend-tag { position:absolute; transform:translate(-50%,-100%); margin-top:-9px; font-size:12px; font-weight:800; line-height:1; color:var(--yr-purple-deep); white-space:nowrap; }
.yr-trend-tag.is-below { transform:translate(-50%,0); margin-top:9px; } /* the last value in the top 15% of the plot: the tag goes under its dot, never up into the head row */
.yr-trend-x { position:relative; height:12px; margin-top:16px; }
.yr-trend-x span { position:absolute; top:0; transform:translateX(-50%); font-size:11px; line-height:1; color:var(--yr-text-muted); white-space:nowrap; }
/* a block inside a card sits on the band grey (the law); a row of stat tiles in it is spread edge to edge: the first flush left, the last flush right */
.yr-inset { background:var(--yr-inset-bg); border-radius:var(--yr-radius-feat); padding:16px 18px; }
.yr-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:14px; }
.yr-stats > :last-child { text-align:right; }
.yr-stats > :not(:first-child):not(:last-child) { text-align:center; }
.yr-stat b { display:block; font-family:var(--yr-font); font-weight:800; font-size:19px; letter-spacing:-.02em; line-height:1.1; }
.yr-stat .yr-note { display:block; margin-top:4px; font-size:11.5px; line-height:1.35; }
/* a notice: one line on the band grey with a mark before it (a dispute under investigation) */
.yr-notice { display:flex; align-items:center; gap:12px; background:var(--yr-other); border-radius:var(--yr-radius-feat); padding:14px 18px; font-size:13.5px; color:var(--yr-text-muted); line-height:1.5; }
.yr-notice svg { width:18px; height:18px; flex:none; }
/* an offer card: what a business sells — its type, name, one line, its own rating, its price and the actions; the cards in a row end level */
.yr-offer { display:flex; flex-direction:column; gap:10px; }
.yr-offer > .yr-eyebrow { color:var(--yr-purple-deep); margin:0; }
.yr-offer-title { font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.yr-offer > p { margin:0; font-size:var(--yr-card-copy); line-height:1.55; color:var(--yr-text-muted); flex:1 1 auto; }
.yr-offer-price { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--yr-hairline); }
.yr-offer-price .yr-note { display:block; font-size:11px; }
.yr-offer-price b { display:block; font-size:16px; font-weight:700; }
.yr-offer-price .yr-btn { margin-left:auto; }
/* facts: a label over its value, two across; rows: a label on the left, its value on the right, hairlines between */
.yr-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; font-size:var(--yr-card-copy); line-height:1.5; }
.yr-fact-lab { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--yr-text-muted); margin-bottom:3px; }
.yr-kv { border-top:1px solid var(--yr-hairline); margin-top:16px; padding-top:6px; font-size:14px; }
.yr-kv > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--yr-hairline); }
.yr-kv > div:last-child { border-bottom:0; }
.yr-kv span:first-child { color:var(--yr-text-muted); }
.yr-kv span:last-child { font-weight:600; text-align:right; }
.yr-eyebrow-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; } /* an eyebrow with a chip at its right end: the About cards’ heads (5 Sep 2026) */
.yr-eyebrow-row .yr-eyebrow { margin:0; }
.yr-tick { display:inline-block; width:12px; height:12px; margin-left:6px; vertical-align:-1px; color:var(--yr-green); } /* the tick after a detail we verified (5 Sep 2026) */
.yr-tick svg { width:12px; height:12px; display:block; }
.yr-about { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--yr-plan-gap); align-items:stretch; }
.yr-about > .yr-card { display:flex; flex-direction:column; }
.yr-about .yr-facts { flex:1 1 auto; align-content:space-evenly; } /* two cards side by side end level, and the shorter one spreads its rows evenly through its height rather than pooling white at the bottom (the balance law) */
/* ── the gallery (3–4 Sep 2026): the photo band, the lightbox and the Edit gallery tool — one module, style/your-reviews-gallery.js, for every page
with pictures. The band (#pr-photos) is one of four SET STRUCTURES laid out by the script — Hero + 2, 3 Rows, Grid, Hero + 4 — each tile at an exact
shape, the hero absorbing the slack, every picture cropped from its focal point; the lightbox (#pr-gal) and the editor (#pr-edit) are injected by the
script and sit outside .yr-page, whose containment traps position:fixed. A page sets window.yrGalleryConfig { pics, hero, key, owner } before the
script. The names keep their pr- prefix for now: the checks (resizecheck, editorcheck, touchcheck) and the state harness know them. ── */
.pr-photo { background:var(--yr-surface); border:1px solid var(--yr-hairline); border-radius:var(--yr-radius-feat); overflow:hidden; box-sizing:border-box; } /* a tile: the white plate with the hairline and the 14px corners — the product page had this from its placeholder rule, and One's tiles came out square without it (his mark, 4 Sep 2026) */
.pr-photos { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:12px; flex:1 1 auto; min-height:clamp(220px,20cqw,300px); }
.pr-photos .pr-ph { width:100%; height:100%; }
.pr-photos .pr-ph:nth-child(1), .pr-photos .pr-ph:nth-child(2) { grid-row:1 / 3; }
.pr-photos { display:block; position:relative; flex:1 1 auto; min-height:0; } /* beside the card the band has ONE floor, the module's (the hero at 2.2:1, 4 Sep 2026) — a min-height here would be a second, muddled one; the one-column tier keeps its own */
.pr-photos .pr-ph { position:absolute; box-sizing:border-box; }
.pr-photo { padding:0; overflow:hidden; cursor:pointer; }
.pr-photo img { position:absolute; display:block; max-width:none; }
.pr-photo::after { content:''; position:absolute; inset:0; background:rgba(50,50,50,0); transition:background-color var(--yr-ramp); }
.pr-photo:hover::after { background:rgba(50,50,50,.05); }
.pr-edit-btn, .pr-all-btn { gap:8px; }
.pr-edit-btn svg, .pr-all-btn svg { width:16px; height:16px; }
.pr-gal { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background:var(--yr-dark); color:var(--yr-on-dark); font-family:var(--yr-font); animation:prFade .22s ease; }
.pr-gal.is-closing { opacity:0; transition:opacity .2s ease; }
.pr-gal-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px clamp(16px,3vw,40px) 6px; }
.pr-gal-count { font-size:14.5px; font-weight:600; color:var(--yr-on-dark-60); }
.pr-gal-count b { color:var(--yr-on-dark); font-weight:800; }
.pr-gal-btns { display:flex; gap:10px; }
.pr-gal .pr-gal-prev, .pr-gal .pr-gal-next { width:46px; padding:0; } /* square: the arrow is the label */
.pr-gal svg { width:20px; height:20px; }
.pr-gal-stage { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:46px minmax(0,1fr) 46px; grid-template-rows:minmax(0,1fr); align-items:center; gap:clamp(12px,2vw,28px); padding:10px clamp(16px,3vw,40px); }
.pr-gal-frame { position:relative; height:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
.pr-gal-frame img { max-width:100%; max-height:100%; width:auto; height:auto; border-radius:var(--yr-radius-card); display:block; background:var(--yr-surface); transition:transform var(--yr-ride), opacity .24s ease; }
.pr-gal-frame img.is-out-l { transform:translateX(-56px); opacity:0; }
.pr-gal-frame img.is-out-r { transform:translateX(56px); opacity:0; }
.pr-gal-frame img.is-in-r { transform:translateX(56px); opacity:0; transition:none; }
.pr-gal-frame img.is-in-l { transform:translateX(-56px); opacity:0; transition:none; }
.pr-gal-cap { text-align:center; font-size:14.5px; font-weight:600; color:var(--yr-on-dark-72); padding:12px clamp(16px,3vw,40px) 0; }
.pr-gal-thumbs { display:flex; justify-content:center; padding:14px clamp(16px,3vw,40px) 20px; overflow-x:auto; }
.pr-gal-strip { position:relative; display:inline-flex; gap:8px; flex:none; }
.pr-gal-thumb { flex:none; width:72px; height:51px; border-radius:8px; overflow:hidden; cursor:pointer; opacity:.45; transition:opacity var(--yr-ramp); background:var(--yr-surface); }
.pr-gal-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pr-gal-thumb:hover { opacity:.75; }
.pr-gal-thumb.is-on { opacity:1; }
.pr-gal-mark { display:none; } /* the purple line under the thumbnail that is on: gone (Vadim, 4 Sep 2026: "remove the underline, keep the highlight"); the thumbnail's full opacity is the highlight */
.pr-gal-top .pr-gal-prev, .pr-gal-top .pr-gal-next { display:none; }
@media (max-width:720px) {
.pr-gal-stage { grid-template-columns:minmax(0,1fr); padding:6px 12px; }
.pr-gal-stage .pr-gal-prev, .pr-gal-stage .pr-gal-next { display:none; }
.pr-gal-top .pr-gal-prev, .pr-gal-top .pr-gal-next { display:inline-flex; }
.pr-gal-thumbs { justify-content:flex-start; }
}
.pr-edit { position:fixed; inset:0; z-index:70; background:var(--yr-surface); color:var(--yr-ink); font-family:var(--yr-font); overflow:auto; animation:prFade .22s ease; }
.pr-edit-top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(16px,3vw,40px); border-bottom:1px solid var(--yr-hairline); position:sticky; top:0; background:var(--yr-surface); z-index:4; }
.pr-edit-title { font-size:var(--yr-h3); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.pr-edit-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pr-edit-body { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:30px; width:min(100% - 2 * clamp(16px,3vw,40px), 1800px); margin:0 auto; padding:26px 0 48px; } /* the whole width on a desktop (Vadim, 3 Sep 2026: "fill the width as best as we can") */
.pr-edit-main { display:grid; grid-template-columns:minmax(0,1fr); gap:30px; }
.pr-edit-col { display:grid; gap:30px; align-content:start; }
.pr-edit-pager { display:none; }
.pr-edit:not(.is-wide) .pr-edit-pager { display:grid; gap:8px; justify-items:center; }
.pr-edit:not(.is-wide) .pr-edit-pager .yr-slab { width:100%; box-sizing:border-box; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.pr-edit:not(.is-wide) .pr-edit-pager .yr-slab-opt { justify-content:center; }
.pr-edit-swipehint { margin:0; }
@media (hover:hover) and (pointer:fine) { .pr-edit-swipehint { display:none; } } /* the hint is for a thumb */
.pr-edit:not(.is-wide) .pr-edit-pages { overflow:hidden; touch-action:pan-y; transition:height var(--yr-ride); }
.pr-edit:not(.is-wide) .pr-edit-main { display:flex; width:200%; gap:0; align-items:flex-start; transform:translateX(0); transition:transform var(--yr-ride); }
.pr-edit:not(.is-wide) .pr-edit-main.is-dragging { transition:none; }
.pr-edit:not(.is-wide) .pr-edit-page { width:50%; flex:none; display:grid; gap:30px; align-content:start; box-sizing:border-box; }
.pr-edit.is-wide .pr-edit-main { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-items:stretch; } /* the pages dissolve: the card takes the right column top to bottom, Structure and The page the left column's top, the thumbnails the height left under them */
.pr-edit.is-wide .pr-edit-page--edit { display:contents; }
.pr-edit.is-wide .pr-edit-sec--picture { grid-column:2; grid-row:1 / 3; }
.pr-edit.is-wide .pr-edit-sec--pictures { grid-column:1; grid-row:2; }
.pr-edit.is-wide .pr-edit-col { grid-column:1; grid-row:1; }
.pr-edit.is-wide .pr-edit-sec--pictures { display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; } /* the Add bar, then the thumbnails' box, which ends level with the card */
.pr-edit.is-wide .pr-edit-strip-wrap { position:relative; min-height:0; overflow:hidden; }
.pr-edit.is-wide .pr-edit-strip { position:absolute; left:0; right:0; top:0; } /* out of the flow, so the thumbnails never grow the row: the box is exactly what the card leaves, and the fit works inside it */
.pr-edit.is-wide .pr-edit-thumb { aspect-ratio:auto; height:var(--th, auto); } /* the fit sets the height; the columns set the width */
.pr-edit.is-wide .pr-edit-strip-wrap.is-scroll { overflow-y:auto; }
/* ── Disconnected (7 Sep 2026, the overnight run; Vadim: "build it anyway, just make it pretty obvious ... that it needs to be wired up") ──
a block standing where a section's data would be when the live API does not feed it yet: the inset grey, an amber chip that says
DISCONNECTED, one line naming what needs wiring. The same shape at every size; the chip is amber so it cannot pass for content. */
.yr-disconnected { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--yr-inset-bg); border-radius:var(--yr-radius-feat); padding:16px 18px; }
.yr-disconnected .yr-chip { background:var(--yr-amber); color:var(--yr-dark); }
.yr-disconnected-words { min-width:0; flex:1; font-size:13.5px; line-height:1.45; color:var(--yr-text-muted); }
.yr-disconnected-words b { color:var(--yr-ink); font-weight:700; }
.yr-disconnected--tall { min-height:180px; justify-content:center; text-align:center; flex-direction:column; gap:10px; }
.yr-rail .yr-disconnected, .pr-hl .yr-disconnected, .yr-seller .yr-disconnected, .pr-alert-wrap .yr-disconnected { flex-direction:column; align-items:flex-start; gap:8px; padding:12px 14px; } /* in a narrow place the chip sits over the words */
.yr-rail .yr-disconnected-words, .pr-hl .yr-disconnected-words, .yr-seller .yr-disconnected-words { font-size:12.5px; }
/* ── Scrollbars (7 Sep 2026) ── any scrolling part inside the kit: a 4px pill thumb in the soft fill with 4px of air on either side, a bare track, no arrows,
clear of the corners; hover a shade stronger. Put `.yr-scroll` on a new scroller. The document keeps the browser's own bar. The home page
carries the same rules for its search card (it does not load this sheet). */
.yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll::-webkit-scrollbar { width:12px; height:12px; }
.yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll::-webkit-scrollbar-track { background:transparent; }
.yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll::-webkit-scrollbar-track:vertical { margin:12px 0; } /* the thumb stays clear of the rounded corners */
.yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll::-webkit-scrollbar-track:horizontal { margin:0 12px; }
.yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll::-webkit-scrollbar-thumb { background:var(--yr-fill-soft); background-clip:padding-box; border:4px solid transparent; border-radius:999px; } /* a 4px pill with 4px of air on either side */
.yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll::-webkit-scrollbar-thumb:hover { background-color:color-mix(in srgb, var(--yr-fill-soft), var(--yr-ink) 25%); }
.yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll::-webkit-scrollbar-button { display:none; width:0; height:0; }
.yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll::-webkit-scrollbar-corner { background:transparent; }
@supports not selector(::-webkit-scrollbar) { .yr-scroll, .pr-gal-thumbs, .pr-edit, .pr-edit-strip-wrap.is-scroll { scrollbar-width:thin; scrollbar-color:var(--yr-fill-soft) transparent; } }
.pr-edit.is-wide .pr-edit-strip { justify-content:stretch; }
.pr-edit.is-wide .pr-edit-card { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; } /* the frame on top, the tools under it, the note last */
.pr-edit-sec--picture { container-type:inline-size; display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; } /* one column: the card stacks its frame over its tools when the column is narrow */
.pr-edit-card { grid-template-rows:minmax(0,1fr) auto; }
.pr-edit-stage { align-self:start; }
.pr-edit-add.is-full { pointer-events:none; background:var(--yr-band); color:var(--yr-text-muted); border:1px solid var(--yr-hairline); } /* the gallery holds 20 pictures */
.pr-edit-sec { display:grid; gap:12px; }
.pr-edit .yr-lab { margin:0; }
.pr-edit .yr-slab { width:100%; box-sizing:border-box; }
.pr-edit .yr-slab-opt { flex:1 1 0; min-width:0; padding-left:6px; padding-right:6px; display:inline-flex; justify-content:center; gap:10px; text-align:center; white-space:nowrap; } /* four equal options, the word and its schematic in the middle of the pill */
.pr-edit-ico { display:inline-block; width:36px; height:23px; flex:none; }
.pr-edit-ico svg { display:block; width:100%; height:100%; }
.pr-edit-preview-wrap { overflow:hidden; border-radius:var(--yr-radius-feat); }
.pr-edit-preview { position:relative; transform-origin:0 0; } /* the band, laid out at its exact size (Vadim, 3 Sep 2026: "they need to represent each other") */
.pr-edit-preview .pr-photo { cursor:pointer; }
.pr-edit-preview .pr-photo.is-picked::after, .pr-edit-preview .pr-photo.is-picked:hover::after { background:var(--yr-purple-wash); } /* the picture being edited: a wash, never a border */
.pr-edit-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; background:var(--yr-band); border-radius:var(--yr-radius-feat); padding:20px; }
.pr-edit-stage { position:relative; aspect-ratio:5 / 4; background:var(--yr-surface); border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pr-edit-dim { position:absolute; display:block; max-width:none; opacity:.26; pointer-events:none; }
.pr-edit-frame { position:relative; overflow:hidden; box-shadow:0 0 0 1px rgba(50,50,50,.2); cursor:grab; touch-action:none; background:var(--yr-surface); outline:none; }
.pr-edit-frame.is-dragging { cursor:grabbing; }
.pr-edit-frame img { position:absolute; display:block; max-width:none; pointer-events:none; user-select:none; }
.pr-edit-grid { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity var(--yr-ramp); background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size:100% 33.34%, 33.34% 100%; }
.pr-edit-grid { opacity:1; } /* the thirds grid is always on (Vadim, 3 Sep 2026) */
.pr-edit-tools { display:flex; flex-direction:column; gap:10px; }
.pr-edit-remove-lvl { margin-top:auto; display:grid; gap:10px; } /* the two buttons, no labels ("the buttons say it all"), at the bottom of the tools (Vadim, 3 Sep 2026) */
.pr-edit-tools .yr-lab { margin-top:6px; }
.pr-edit-tools .yr-lab:first-child { margin-top:0; }
.pr-edit-zoom { display:flex; align-items:center; gap:12px; }
.pr-edit-zoom .yr-range { flex:1 1 auto; }
.pr-edit-zoom .yr-btn { width:46px; padding:0; flex:none; }
.pr-edit-zoom svg { width:18px; height:18px; }
.pr-edit-row { display:flex; flex-wrap:wrap; gap:10px; }
.pr-edit-hero, .pr-edit-remove { width:100%; }
.pr-edit-rot { display:grid; gap:0; padding-top:8px; } /* the rotation slider (Vadim, 3 Sep 2026: "a rotation slider not buttons"): −180° to 180°, snapping near the quarter turns */ /* the full width of the tools column (Vadim, 3 Sep 2026: "extend the hero picture button"); order is the drag in the grid, the Move buttons are gone */
.pr-edit-hero.is-on { background:var(--yr-lilac-fill); border-color:var(--yr-lilac-fill); color:var(--yr-lilac-fill-ink); pointer-events:none; } /* the picture that IS the hero: a soft on, not an action */
.pr-edit .yr-input { width:100%; box-sizing:border-box; }
.pr-edit-left { display:grid; gap:14px; align-content:start; }
.pr-edit-note { margin:0; font-size:13px; line-height:1.5; color:var(--yr-text-muted); }
.pr-edit-card > .pr-edit-note { grid-column:1 / -1; margin-top:-4px; }
.pr-edit-note--centre { text-align:center; } /* the line under the thumbnails, centred (Vadim, 3 Sep 2026) */ /* one line across the card's bottom, rotate included (Vadim, 3 Sep 2026) */
.pr-edit-strip { position:relative; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 220px)); justify-content:space-between; gap:12px; touch-action:pan-y; } /* pan-y, not none: a finger scrolls the page over the thumbnails, and moves one only after a hold (Vadim, 4 Sep 2026); as many thumbnails as fit, each growing from 150 to 220px, the width left over spread evenly between them (Vadim, 3 Sep 2026); positioned so the cells' offsets are measured against the strip during a drag */
.pr-edit-thumb { position:relative; aspect-ratio:3 / 2; border-radius:10px; overflow:hidden; cursor:grab; background:var(--yr-surface); border:1px solid var(--yr-hairline); box-sizing:border-box; }
.pr-edit-thumb img { position:absolute; display:block; max-width:none; pointer-events:none; }
.pr-edit-thumb.is-lifted { opacity:.5; cursor:grabbing; }
.pr-edit-thumb::after { content:''; position:absolute; inset:0; background:rgba(50,50,50,0); transition:background-color var(--yr-ramp); }
.pr-edit-thumb.is-on::after { background:var(--yr-purple-wash); } /* the picture being edited: the same wash as its tile on the page */
.pr-edit-thumb .yr-chip { position:absolute; left:8px; top:8px; z-index:1; }
.pr-edit-add { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border-radius:12px; background:var(--yr-purple); cursor:pointer; font-size:15px; font-weight:700; color:var(--yr-on-dark); transition:background-color var(--yr-ramp); } /* Add pictures (Vadim, 5 Sep 2026: "virtually invisible … make it purple … taller"): the editor's one purple action, 52 like the rating card's pair, dark on hover like every purple button */ /* a bar the width of the column above the thumbnails: add pictures (click, or drop files on it or the grid); lilac while files hover — a fill (Vadim, 3 Sep 2026: "move the Add Pictures button to the top of the thumbnails and make it long") */
.pr-edit-add svg { width:18px; height:18px; display:block; }
.pr-edit-add:hover, .pr-edit-add.is-over { background:var(--yr-primary-hover-bg); color:var(--yr-primary-hover-ink); } /* a purple button's hover: the dark in light mode, white in the dark */
.pr-edit-structnote { font-size:13px; color:var(--yr-text-muted); margin:0; }
.pr-edit-gate { position:absolute; inset:0; z-index:3; background:rgba(255,255,255,.6); display:grid; place-items:center; padding:24px; }
.pr-edit-gate-card { background:var(--yr-band); border-radius:var(--yr-radius-feat); padding:22px 24px; width:min(420px, 100%); box-sizing:border-box; text-align:center; }
.pr-edit-gate-card b { display:block; font-size:16px; margin-bottom:6px; }
.pr-edit-gate-card p { margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--yr-text-muted); }
.pr-edit-gate .pr-alert-actions { margin-top:0; }
.pr-edit-thumb, .pr-edit-stage, .pr-edit-preview .pr-photo { border-color:var(--yr-line-clear); }
.pr-edit-stage { border:1px solid var(--yr-line-clear); }
.pr-edit .yr-btn--light, .pr-edit .yr-slab { border-color:var(--yr-hairline); }
.pr-edit-hero.is-on { border-color:var(--yr-lilac-line); }
.pr-edit-card { border:1px solid var(--yr-hairline); }
.pr-edit-frame { box-shadow:0 0 0 1px var(--yr-line-clear); }
.pr-edit-thumb { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
@keyframes pr-wiggle { 0% { transform:rotate(-1.8deg); } 50% { transform:rotate(1.8deg); } 100% { transform:rotate(-1.8deg); } }
.pr-edit-thumb.is-armed img, .pr-edit-ghost.is-armed img { animation:pr-wiggle .26s ease-in-out infinite; transform-origin:50% 50%; }
@media (prefers-reduced-motion:reduce) { .pr-edit-thumb.is-armed img, .pr-edit-ghost.is-armed img { animation:none; } }
.pr-edit-slot { aspect-ratio:3 / 2; border-radius:10px; border:1px dashed var(--yr-line-clear); background:var(--yr-band); box-sizing:border-box; } /* thin, grey and quiet (Vadim, 3 Sep 2026: the purple dashes were "way too strong") */
.pr-edit-strip .pr-edit-thumb, .pr-edit-strip .pr-edit-slot { will-change:transform; }
.pr-edit-ghost { position:fixed; left:0; top:0; z-index:80; pointer-events:none; border-radius:10px; overflow:hidden; border:1px solid var(--yr-line-clear); background:var(--yr-surface); box-sizing:border-box; will-change:transform; }
.pr-edit-ghost img { position:absolute; display:block; max-width:none; }
.pr-edit-ghost.is-settling { transition:transform var(--yr-ride), width var(--yr-ride), height var(--yr-ride); }
@container (max-width:560px) { .pr-edit-card { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; } }
.pr-edit-sec--picture .pr-edit-card { min-height:0; }
@media (max-width:720px) {
.pr-edit-card { grid-template-columns:minmax(0,1fr); }
.pr-edit-strip { grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); }
.pr-edit .yr-slab-opt { gap:6px; }
.pr-edit-ico { display:none; }
}
@media (prefers-reduced-motion:reduce) { .pr-gal, .pr-gal-frame img, .pr-gal-mark, .pr-gal-thumb, .pr-photo::after, .pr-edit, .pr-edit-grid, .pr-edit-thumb::after { animation:none; transition:none; } }
@container (max-width:1049px) {
.pr-photos { min-height:clamp(240px,30cqw,340px); } /* one column: the band has no card to stretch to, so its height follows its width (3 Sep 2026: at 220px the packer could only fit the hero, stretched flat) */
}
@container (max-width:799px) {
.pr-photos { min-height:0; } /* the page sets the band's height: the hero on top, three squares under it */
}
.pr-edit-gate-card .pr-alert-actions { display:flex; gap:10px; justify-content:center; margin-top:14px; }
/* ═══ Dark mode (5 Sep 2026; his pick A, Charcoal, with his corrections) ═══════════════════════════════════════════════════
[data-theme="dark"] on . The ink goes light, the ground goes dark, and the dark blocks stay DARK — darker than the cards
around them, never a washed grey ("that's a shit colour"). Purple stays purple. A white button stays white ("just make that white")
and the slab's pill turns white with dark words. On the dark ground every button hovers to the light — a white button to the light
grey, a purple one to white (the CTA band's law). Set by the switch (.yr-theme, yr.theme in the behaviours), remembered in
localStorage; light unless chosen. Supplied artwork keeps a white plate; the site's logo has a white twin (.yr-only-dark). */
[data-theme="dark"] {
color-scheme:dark;
--yr-surface:#1e1e1e; --yr-band:#1b1b1b; --yr-card-on-white:#222222; /* neutral greys (Vadim, 5 Sep 2026: "make all the dark backgrounds #171717"; 7 Sep 2026: "replace all #171717 across all pages and areas with #1b1b1b everywhere"); the whole scale went neutral with the ground, so no card sits blue on a grey */
--yr-ink:#ececef; --yr-text-muted:#a4a8b0; --yr-text-faint:#7f848c; --yr-text-placeholder:#6f757d;
--yr-dark:#131313; --yr-panel:#1b1b1b; /* the panel is the page's grey in the dark — the home page's review-screening section and Help Center panel (Vadim, 5 Sep 2026: "fix these two to #171717") */
--yr-bar-hover-fill:var(--yr-purple-light); --yr-bar-hover-track:#3a3a3a; /* the bar brighter, the track a step lighter, under the pointer (7 Sep 2026) */
--yr-dark-hover:#131313; /* the rating head a step DARKER on hover in the dark theme — from #191919 to the dark block (Vadim, 7 Sep 2026: "this needs to go slightly darker on hover not lighter"); it was a step lighter, #1e1e1e, the light theme’s way round */
--yr-surface-soft:#2b2b2b; --yr-surface-bubble:#282828;
--yr-lilac:#2a2342; --yr-lilac-line:#40356a; --yr-lilac-soft:#262038; --yr-purple-ink:#c9b8ff; --yr-purple-deep:#a98cff; --yr-purple-hover-line:#5a44a8;
--yr-purple-tint:rgba(113,63,255,.14); --yr-purple-wash:rgba(113,63,255,.36);
--yr-star-empty:#3a3a3a; --yr-highlight:#3a3320; --yr-held:#33301f;
--yr-hairline-rgb:255,255,255; --yr-shadow-rgb:0,0,0;
--yr-line:rgba(255,255,255,.06); /* THE line in the dark: every border, divider, rule and gridline is this one weight (Vadim, 7 Sep 2026: "the divider lines … and the borders … a little bit too prominent … make them all the same … dial it down and make it universal"); before it the lines ran .05 to .26. One number to move if he wants it lighter or heavier. tools/linecheck.js proves it. */
--yr-hairline:var(--yr-line); --yr-hairline-strong:var(--yr-line); --yr-hairline-nav:var(--yr-line); --yr-hairline-login:var(--yr-line); --yr-line-clear:var(--yr-line);
--yr-on-dark-line:var(--yr-line); --yr-on-dark-line-16:var(--yr-line); --yr-on-dark-btn-line:var(--yr-line); /* the dark panels' lines too: in the dark a panel is the page's own grey */
--yr-fill-soft:rgba(255,255,255,.18); --yr-on-dark-track:rgba(255,255,255,.14); --yr-star-empty-on-dark:rgba(255,255,255,.16); /* the fills and the mark keep their weight: a thinned line must not fade a switch's track, a bar's track or an empty star */
--yr-shadow-card:0 2px 10px rgba(0,0,0,.35); --yr-shadow-search:0 6px 22px rgba(0,0,0,.4); --yr-shadow-tile:0 8px 28px rgba(0,0,0,.5); --yr-shadow-thumb:0 2px 8px rgba(0,0,0,.5); --yr-scrim:rgba(0,0,0,.55);
--yr-btn-white:#1e1e1e; --yr-btn-white-ink:#ececef; --yr-slab-pill:#fff; --yr-slab-on:#323232; /* the light page inverted (Vadim, 5 Sep 2026): a white button is dark at rest on the dark page and goes WHITE on hover; the selected pill is white */
--yr-hover-bg:#fff; --yr-hover-ink:#323232; --yr-primary-hover-bg:#fff; --yr-primary-hover-ink:#323232;
--yr-gauge-track:#272727;
--yr-veil-rgb:0,0,0; --yr-veil-a:.22; --yr-veil-hover-a:.55;
--yr-hover-on-dark-bg:#fff; --yr-hover-on-dark-ink:#323232;
--yr-other:var(--yr-surface); --yr-card-bg:var(--yr-other); --yr-card2-bg:var(--yr-band); --yr-card-on-white:var(--yr-other); --yr-block-bg:var(--yr-other); --yr-pic-bg:var(--yr-other); --yr-field-bg:var(--yr-other); --yr-btn-white:var(--yr-other); /* the two-greys law in the dark (Vadim, 7 Sep 2026): the body is the band, so the other is the surface; a card, a white button, a field, a plate, a chip, a tag, a FAQ item and a menu list paint whichever grey their ground is not (root fallbacks only: a custom property resolves where it is declared, so the rule right after :root paints the parts with var(--yr-other) directly, per context). The exception is the review's rail (a --yr-band block on the card: the review beside it carries the card). */
--yr-field-on-surface:var(--yr-band); /* kept for the guide's history; --yr-field-bg follows --yr-other now */
--yr-rating-head-bg:#191919; --yr-inset-bg:#191919; /* the rating card's head and its inset block (Vadim, 7 Sep 2026: "make these 2 sections #191919") */
--yr-pic-line:transparent; /* no frame round a picture in the dark (5 Sep 2026) */
--yr-footer-bg:#1b1b1b; /* the footer is the page's grey in the dark (5 Sep 2026) */
--yr-rule:var(--yr-line); /* the dividers were half the hairline (.05, 5 Sep 2026); since 7 Sep 2026 every line is the one line */
--yr-slab-on-soft:rgba(50,50,50,.7); --yr-menu-hover-bg:var(--yr-surface-soft); /* the open/selected pill is white here, so its quiet words are the dark at 70%; a menu button hovers lighter (the button audit, 5 Sep 2026) */
--yr-ghost-on-dark-bg:var(--yr-btn-white); --yr-ghost-on-dark-line:var(--yr-hairline); --yr-ghost-on-dark-ink:var(--yr-btn-white-ink); /* a ghost on a dark panel is the white button in the dark: the Login shade, not the panel showing through (Vadim, 5 Sep 2026) */
--yr-lilac-fill:var(--yr-purple); --yr-lilac-fill-line:var(--yr-purple); --yr-lilac-fill-ink:#fff; --yr-lilac-soft-fill:var(--yr-purple); --yr-lilac-soft-ink:#fff; /* no lavender in the dark: a lilac pill is purple with white words (Vadim, 5 Sep 2026) */
--yr-strip-bg:#fafafb; --yr-strip-title:#323232; --yr-strip-copy:#3d1f9e; --yr-strip-btn-hover-bg:#323232; --yr-strip-btn-hover-ink:#fff; /* the strips are off-white cards with dark words; their purple button hovers to the dark as on any light ground */
--yr-plan-bg:var(--yr-band); --yr-plan-fg:#fff; --yr-plan-muted:rgba(255,255,255,.7); --yr-plan-border:var(--yr-line); --yr-plan-shadow:none; /* a plain tile in the dark is the band grey (#1b1b1b) — the How it works ground — like the reputation card, the FAQ card and the category tiles: a darker card on the lighter section (Vadim, 7 Sep 2026: “the same gray from the background of how it works”) */
--yr-plan-dark-bg:#fff; --yr-plan-dark-fg:#323232; --yr-plan-dark-muted:#5b5f66; --yr-plan-dark-border:rgba(50,50,50,.10); --yr-plan-dark-shadow:0 8px 28px rgba(0,0,0,.5);
--yr-plan-cta-hover-bg:#fff; --yr-plan-cta-hover-ink:#323232; --yr-plan-dark-cta-hover-bg:#323232; --yr-plan-dark-cta-hover-ink:#fff; /* between invisible (#131316) and too light (#3a3a41): his sweet spot (5 Sep 2026) */
}
[data-theme="dark"] body { background:var(--yr-band); }
.yr-only-dark { display:none; }
[data-theme="dark"] .yr-only-dark { display:block; }
[data-theme="dark"] .yr-only-light { display:none; }
[data-theme="dark"] .yr-brand-mark.is-logo { background:var(--yr-white); } /* supplied artwork on a white plate, both modes */
/* the switch: a sun, the kit's toggle, a moon — in the header between the nav and Login; on = dark */
.yr-theme { display:inline-flex; align-items:center; gap:8px; color:var(--yr-text-muted); cursor:pointer; user-select:none; }
.yr-theme svg { width:16px; height:16px; display:block; }
.yr-theme .yr-switch { cursor:pointer; }
.yr-theme .yr-switch, .yr-theme .yr-switch[data-on], .yr-theme:hover .yr-switch { background:var(--yr-ink); } /* monochrome (Vadim, 5 Sep 2026): the ink on the page ground — dark on the light page, light on the dark — never purple, and no hover at all; the knob is the ground */
.yr-theme .yr-switch::after { background:var(--yr-surface); }
.yr-theme:hover, .yr-theme:hover svg { color:var(--yr-text-muted); }
@container (max-width:599px) { .yr-theme svg { display:none; } } /* the phone header: the switch alone, its sun and moon implied */
/* the flip is a motion (the motion law): a cross-fade of the whole page on the compositor (the View Transitions API), .4s; where the API is missing, html.is-theming glides every colour for .35s instead */
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.4s; animation-timing-function:ease; mix-blend-mode:normal; }
html.is-theming, html.is-theming *, html.is-theming *::before, html.is-theming *::after { transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease, box-shadow .35s ease !important; }
@container (max-width:1249px) {
.yr-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container (max-width:1049px) {
.yr-cols { display:none; }
/* the narrow seller row is three level lines (Vadim's marks on the phone sheets, 4 Sep 2026):
line one the logo, the name, and the distance at the right; line two the sub-line at its small size with the last column's value after it
("Broadway NSW · 9am – 9pm", "Alexandria NSW · in stock · $2,199") — dark, never bigger than the name; line three the STANDING BOX beside Visit:
a band-grey plate the button's height, from the row's left edge to the button, holding the five stars, the score, the count and the chip at its
right end ("you've got room for a lot of information there … put it in a box so it lines up evenly with the Visit button"; "put the tags in there").
The id cell dissolves (display:contents) so the logo, the name and the sub-line are cells of the row's own grid: 48px for the logo, the rest for the
words, the distance. A cell cannot flow into another cell, so the value on line two is the .yr-srow-val span and the chip in the box is the
.yr-srow-chip copy — both made once by the behaviours (yr.srows); the value cell and the chip cell are hidden here. The desktop row above 1049px
is untouched: its Rating column keeps one star. */
.yr-srow { grid-template-columns:48px minmax(0,1fr) auto; column-gap:0; row-gap:2px; align-items:center; }
.yr-srow-id, .yr-srow-id > div:not(.yr-srow-logo) { display:contents; }
.yr-srow-logo { grid-column:1; grid-row:1 / 3; align-self:center; }
.yr-srow-name { grid-column:2; grid-row:1; min-width:0; padding-right:12px; }
.yr-srow-sub { grid-column:2 / 4; grid-row:2; margin-top:0; }
.yr-srow-val { display:inline; white-space:nowrap; font-weight:700; color:var(--yr-ink); }
.yr-srow-val.is-plain { font-weight:400; color:var(--yr-text-muted); } /* hours in the sub-line stay plain ("Broadway NSW · 9am – 9pm"); a price is dark and bold */
.yr-srow-val::before { content:'\00a0·\00a0'; font-weight:400; color:var(--yr-text-muted); } /* the sub-line's own dot, then the value */
.yr-srow-price, .yr-srow-hours { grid-column:3; grid-row:2; justify-self:end; text-align:right; font-size:12.5px; letter-spacing:0; white-space:nowrap; } /* without the script the value sits at the right end of line two */
.yr-srow-price { font-weight:700; }
.yr-srow:has(.yr-srow-val) .yr-srow-price, .yr-srow:has(.yr-srow-val) .yr-srow-hours { display:none; }
.yr-srow-tag { display:none; } /* the chip lives in the standing box on line three */
.yr-srow-dist { grid-column:3; grid-row:1; justify-self:end; text-align:right; white-space:nowrap; }
.yr-srow-rating { grid-column:1 / 3; grid-row:3; margin-top:8px; display:flex; align-items:center; gap:4px; min-height:var(--yr-btn-h); box-sizing:border-box; padding:0 14px; background:var(--yr-surface-soft); border-radius:var(--yr-radius-btn); text-align:left; min-width:0; container-type:inline-size; container-name:yrstanding; } /* the button's 14px of air on both sides (8 had the score jammed against the edge, his mark); a tad darker than the band grey, his call: on the white card the band grey "is too close to white, you can't see it"; the empty star still reads on it */ /* measured at 412: the box is 255px wide, its content with a chip and a count 222 with this padding */
.yr-srow-rating .yr-stars { font-size:12px; gap:1px; margin:0; }
.yr-srow-rating .yr-stars > :not(:first-child) { display:inline; } /* the five stars show here … */
.yr-srow-rating .yr-stars > .is-half { display:inline-block; } /* … the half one keeps its clip */
.yr-srow-rating .yr-srow-chip { display:inline-flex; margin-left:auto; padding-left:8px; padding-right:calc(8px - .04em); } /* the chip at the box's right end, its side padding trimmed so the count keeps its place at 412 */
.yr-srow .yr-btn { grid-column:3; grid-row:3; justify-self:end; width:auto; margin-top:8px; margin-left:12px; } /* Visit at its own width (the lilac button is full-width by nature); the standing box takes the rest of the line */
.yr-review { grid-template-columns:minmax(0,1fr); }
.yr-rail { border-right:0; border-bottom:1px solid var(--yr-hairline); }
.yr-rail-in { position:static; } /* one column: the rail is above the words; pinned, it would cover them */
.yr-overview { grid-template-columns:minmax(0,1fr); } /* one column: the rating card under the words and pictures */
.yr-photos { min-height:clamp(240px,30cqw,340px); } /* no card to stretch to: the band's height follows its width */
.yr-footer-grid { grid-template-columns:repeat(2,minmax(0,max-content)); }
}
@container (max-width:1249px) {
.yr-nav { gap:12px; padding-left:16px; padding-right:16px; } /* from 1249 down the header tightens: three options of one width need the room (7 Sep 2026; the tightening had begun under 900 on 6 Sep) */
.yr-nav-right { gap:12px; }
.yr-nav-logo { width:132px; margin-right:4px; }
.yr-nav .yr-slab-opt { padding:0 18px; }
}
@container (max-width:1049px) {
.yr-nav-logo { width:120px; }
.yr-nav .yr-slab-opt { padding:0 14px; font-size:13.5px; }
.yr-nav .yr-theme svg { display:none; } /* the switch alone from 1049 down, as on the phone: the header was 60px over at 900 with the sun and the moon */
}
@container (max-width:899px) {
.yr-secbar-slab { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; box-sizing:border-box; } /* five equal cells with the short words and no counts from 900 down: the flex slab with its 30px pads was 51px over at 600 (the sweep, 5 Sep 2026; the long form was still 14px over at 800, so the cells begin at 900 since 6 Sep) */
.yr-secbar-slab .yr-slab-opt { justify-content:center; padding:0 2px; font-size:13px; min-width:0; }
.yr-secbar-slab .yr-slab-opt small, .yr-secbar-slab .yr-sec-long { display:none; }
.yr-secbar-slab .yr-sec-short { display:inline; }
}
@container (max-width:799px) {
.yr-nav .yr-slab, .yr-nav-rule { display:none; }
.yr-burger-wrap { display:block; } /* the slab is gone: the burger carries the site's options */
.yr-nav .yr-theme { display:none; } /* the phone: the mode lives in the burger's sheet (its Dark mode / Light mode row); one switch, not two (Vadim, 8 Sep 2026: "why do we still have the toggle inside of the header when it's already inside the burger menu") */
.yr-nav-right { margin-left:auto; } /* the switch and the pair at the far right, as on the desktop (Vadim, 7 Sep 2026) */
.yr-brand-mark { width:72px; height:72px; font-size:var(--yr-h3); }
.yr-meta--right { justify-content:flex-start; text-align:left; margin-left:0; }
.yr-photos { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto; min-height:0; } /* the hero on top at 4:3, two squares under it */
.yr-photo:first-child { grid-row:1; grid-column:1 / -1; aspect-ratio:4 / 3; }
.yr-photo:not(:first-child) { aspect-ratio:1; }
.yr-about { grid-template-columns:minmax(0,1fr); }
.yr-grid-4 { grid-template-columns:minmax(0,1fr); }
.yr-aspect { grid-template-columns:110px minmax(0,1fr) 90px; }
.yr-plat { grid-template-columns:minmax(0,1fr); gap:6px; }
.yr-plat-score { text-align:left; }
.yr-footer-grid { grid-template-columns:minmax(0,1fr); }
}
@container (max-width:599px) {
.yr-nav { gap:8px; padding-left:14px; padding-right:14px; } /* the phone header: the burger, the logo, the switch and the pair in one row at 360 */
.yr-nav > a[aria-label] { flex:0 1 auto; min-width:0; }
.yr-nav-logo { width:clamp(72px,26cqw,96px); margin-right:0; }
.yr-nav-right, .yr-nav-auth { gap:8px; }
.yr-nav .yr-btn--nav { min-height:38px; padding:0 13px; font-size:13.5px; } /* the small height on the phone (the two heights: 38 and 46) */
.yr-crumbs > :not(a:last-of-type) { display:none; } /* the trail collapses to one Back button (Vadim, 7 Sep 2026: "I also need a back button"): the parent crumb, dressed as a button */
.yr-crumbs > a:last-of-type { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 15px 0 12px; border:1px solid var(--yr-hairline); border-radius:999px; background:var(--yr-btn-white); color:var(--yr-btn-white-ink); font-size:13.5px; font-weight:600; line-height:1; transition:background-color var(--yr-ramp), border-color var(--yr-ramp), color var(--yr-ramp); }
.yr-crumbs > a:last-of-type::before { content:''; width:8px; height:8px; margin-left:2px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.yr-crumbs > a.yr-back-btn .yr-crumb-word { display:none; } /* the script wraps the parent's name and the button reads Back; without the script it reads the parent's name, still a way back */
.yr-crumbs > a.yr-back-btn::after { content:'Back'; }
.yr-crumbs > a:last-of-type:hover { background:var(--yr-hover-bg); border-color:var(--yr-hover-bg); color:var(--yr-hover-ink); }
.yr-body-top .yr-chip { margin-left:0; } /* the phone: the chip follows the row where it wraps, never alone at the right */
.yr-review-text.yr-clamp { --yr-clamp-lines:6; } /* six lines on the phone */
.yr-compose { flex-direction:column; align-items:stretch; }
.yr-compose-to { flex:none; }
.yr-fold .yr-btn { width:100%; box-sizing:border-box; } /* a lone control runs edge to edge on the phone */
.yr-thread-row--nested { margin-left:22px; } /* half the indent on the phone: the words keep their width */
.yr-qa-answers, .yr-qa-foot { padding-left:0; } /* the phone: answers and actions under the question at the card’s edge */
.yr-qa-item .yr-slot .yr-compose { margin-left:0; }
.yr-qa-foot { flex-wrap:wrap; }
.yr-qa-foot .yr-btn { flex:1 1 0; } /* two buttons share the line */
.yr-qa-foot .yr-note { width:100%; margin:4px 0 0; }
.yr-review-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } /* the four review actions pair up on the phone, Flag with Share, none hanging alone at the right (the button law; 6 Sep 2026) */
.yr-review-actions .yr-flag { margin-left:0; }
.yr-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.yr-actions > .yr-btn { padding:0 6px; }
.yr-actions-right { grid-column:1 / -1; margin-left:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.yr-actions-right .yr-btn { padding:0 6px; }
.yr-actions-right > .yr-btn:last-child:nth-child(odd) { grid-column:1 / -1; } /* the button law: pairs share the row, an odd last one runs edge to edge — one action alone, or the third of three (Claim this listing · Edit gallery · All 3 photos on the business page, 4 Sep 2026) */
.yr-aspect { grid-template-columns:112px minmax(0,1fr) auto; } /* the score and its count stay on one line whatever the count (312 reviews wrapped under 4.6) */
.yr-aspect > span:last-child { white-space:nowrap; }
.yr-glance-bar { flex-direction:column; align-items:stretch; gap:10px; }
.yr-glance-bar .yr-sep { display:none; }
.yr-tech { flex-direction:column; align-items:stretch; gap:14px; padding:18px 20px; }
.yr-tech .yr-eyebrow br { display:none; }
.yr-tech-marks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; justify-items:center; align-items:center; }
.yr-tech-marks img { height:auto; max-height:34px; max-width:100%; }
.yr-stack { flex-direction:column; align-items:stretch; gap:12px; }
.yr-stack > .yr-btn, .yr-stack .yr-row-right > .yr-btn { width:100%; box-sizing:border-box; }
.yr-stack .yr-row-right { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-left:0; }
.yr-stack .yr-row-right > .yr-note, .yr-stack .yr-row-right > .yr-btn { grid-column:1 / -1; } /* a note, then the button, each edge to edge */
.yr-list-foot, .yr-pager { flex-direction:column; align-items:stretch; gap:12px; }
.yr-list-foot .yr-row-right, .yr-pager .yr-row-right { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-left:0; }
.yr-list-foot .yr-row-right > .yr-btn, .yr-pager .yr-row-right > .yr-btn { width:100%; box-sizing:border-box; padding:0 8px; }
.yr-filter-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.yr-filter-row > * { min-width:0; }
.yr-filter-row .yr-field--grow { grid-column:1 / -1; grid-row:1; }
.yr-filter-row > :last-child:nth-child(even):not(.yr-field--grow), .yr-filter-row > :nth-last-child(2):nth-child(odd):has(+ .yr-field--grow) { grid-column:1 / -1; } /* with the search on its own row the others pair up; a lone last control runs edge to edge, the button law — whether the search sits last in the markup or not (the reference page's sample and the business page's reviews row, 4 Sep 2026) */
.yr-filter-row .yr-field, .yr-filter-row .yr-menu, .yr-filter-row .yr-menu-btn { width:100%; box-sizing:border-box; }
.yr-filter-row .yr-field > .yr-chev, .yr-filter-row .yr-field > .yr-count, .yr-filter-row .yr-field > .yr-switch { margin-left:auto; } /* the chevron, or the count with the chevron beside it, at the right end — never adrift in the middle (his mark, 4 Sep 2026) */
.yr-filter-row .yr-field > .yr-count + .yr-chev { margin-left:8px; }
.yr-filter-row .yr-chev { font-size:15px; } /* big enough to see on a phone */
.yr-dial-row .yr-gauge { width:150px; }
.yr-rail { padding:18px 20px; }
.yr-rail-in { display:grid; grid-template-columns:minmax(0,1fr) 116px; align-items:center; gap:10px 14px; } /* the phone: the person and the dial on one row, the metrics two by two under them (4 Sep 2026) */
.yr-rail .yr-gauge { width:116px; margin:0; padding-bottom:16px; } /* beside the person; its reading scales with it */
.yr-metrics { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.yr-metric:nth-last-child(2):nth-child(odd) { border-bottom:0; padding-bottom:0; } /* two by two, the last row carries no line under either cell — the lines sat right above the rail's own border (his mark, 4 Sep 2026: "it throws everything off balance and serves no purpose") */
.yr-ai { flex-direction:column; align-items:flex-start; gap:12px; }
.yr-ai img { width:44px; }
.yr-plat { grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
.yr-plat-name { grid-column:1 / -1; }
.yr-plat-score small { display:inline; margin-left:6px; }
.yr-cta-right, .yr-cta-right .yr-btn { width:100%; box-sizing:border-box; }
.yr-drawer-inner { grid-template-columns:minmax(0,1fr); gap:12px; padding:16px 20px 18px; }
.yr-drawer .yr-switch-row { width:100%; box-sizing:border-box; justify-content:space-between; }
.yr-drawer-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:6px; }
.yr-drawer-actions .yr-btn { width:100%; box-sizing:border-box; padding:0 8px; }
.yr-offer-price { flex-wrap:wrap; }
.yr-head { grid-template-columns:auto minmax(0,1fr); row-gap:12px; }
.yr-brand-mark { width:56px; height:56px; font-size:var(--yr-h3); grid-column:1; grid-row:1; }
.yr-title { display:contents; }
.yr-title > h1 { grid-column:2; grid-row:1; align-self:center; }
.yr-head .yr-chips { grid-column:1 / -1; grid-row:2; }
/* a set of chips takes the button law (his mark, 4 Sep 2026): pairs share a row fifty-fifty with their words centred, an odd one runs edge to edge,
and a chip whose words do not fit half the width takes a row of its own. The sheet lays the set out two across; the behaviours (yr.chips) measure
every chip against half the width and mark the full-width ones .is-full — a grid alone broke a long chip into two lines. */
.yr-chips, .yr-tags { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.yr-chips > .yr-chip, .yr-tags > .yr-tag { justify-content:center; min-width:0; }
.yr-tags > .yr-tag { display:inline-flex; align-items:center; box-sizing:border-box; } /* the Mentioned-most pills take the same law (his mark #4, 4 Sep 2026: "fill it out, make it look even") */
.yr-chips > .is-full, .yr-tags > .is-full { grid-column:1 / -1; }
.yr-chips.is-measuring > .yr-chip, .yr-tags.is-measuring > .yr-tag { grid-column:auto; width:max-content; } /* the measuring frame: every chip at its own width */
.yr-under { grid-row:3; }
}
.yr-rating-line { display:flex; align-items:center; gap:8px; font-size:13px; }
/* logo plates: a white plate with a hairline that holds a supplied logo as it is — contained with a 10% margin, or filled edge to edge with .is-fill on a stage in the mark’s own ground colour (a data-brand element carries the colour; with .is-air the tenth stays, for a mark drawn for white whose file carries no air — 7 Sep 2026), or covering with .is-cover */
.yr-logo-plate, .yr-srow-logo { position:relative; overflow:hidden; background:var(--yr-block-bg); border:1px solid var(--yr-hairline); display:grid; place-items:center; box-sizing:border-box; }
.yr-logo-plate img, .yr-srow-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10%; box-sizing:border-box; display:block; }
.yr-logo-plate.is-fill img, .yr-srow-logo.is-fill img, .yr-logo-plate.is-cover img, .yr-srow-logo.is-cover img { padding:0; }
.yr-logo-plate.is-fill.is-air img, .yr-srow-logo.is-fill.is-air img { padding:10%; }
.yr-logo-plate.is-cover img, .yr-srow-logo.is-cover img { object-fit:cover; }
/* the trust dial beside its four counts (a review's rail, a profile, a business's trust card): one under the other on a phone */
.yr-dial-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; align-items:center; }
@container (max-width:599px) { .yr-dial-row { grid-template-columns:minmax(0,1fr); justify-items:center; } .yr-dial-row .yr-metrics { width:100%; } }
/* the standing box (a seller row's third line on the phone) at its own width (the content box): under 202px the count goes, under 171px the chip too, so nothing ever overflows the plate */
@container yrstanding (max-width:201px) { .yr-srow-rating .yr-note { display:none; } } /* the query measures the content box: a 412 phone gives it 227px, a 390 one 206, a 360 one 176; stars, score, count and the widest chip need 202 (measured) */
@container yrstanding (max-width:170px) { .yr-srow-rating .yr-srow-chip { display:none; } } /* stars, score and the widest chip need 171 */