/* The report by meaning (owner, 25 Oct 2026; KB 60; js/report-rows.js). The four parts after the Brief reuse the five section
   families, so no colour is new: Competitors wears Orchid (competitors' colour, was Ads), You the sand from Ember (was
   Social), Your market the News grey, What guests say Jade (the reviews' ramp, was Offers). */
:root {
  --s-competitors: var(--s-ads); --s-you: var(--s-social); --s-market: var(--s-news); --s-guests: var(--s-offers);
  --g-competitors: var(--g-ads); --g-you: var(--g-social); --g-market: var(--g-news); --g-guests: var(--g-offers);
  --rt-competitors: var(--rt-ads, var(--orchid)); --rt-you: var(--rt-social, #C65A64); --rt-market: var(--rt-news, var(--charcoal)); --rt-guests: var(--rt-offers, var(--jade));
}
/* The parts' head tiles, labels and New rings are the old sections' rules, renamed in report.css and theme.css. Rows by
   meaning colour their sub-head icon by the part. */
.reader.one .b-competitors .sub-h h3 .tic { color: var(--orchid); }
.reader.one .b-market .sub-h h3 .tic { color: var(--charcoal); }
.reader.one .b-guests .sub-h h3 .tic { color: var(--jade); }

/* You is the reader's own face, as on the cover's row of faces: initials or their picture in an Ember ring. */
.tic.tic-you { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.tic.tic-you .pfp { width: 24px; height: 24px; border-radius: 50%; font-size: 10px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--ember); object-fit: cover; }
.reader.one .bh .sti .tic-you .pfp { box-shadow: none; }
.tic.tic-glyph { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.tic.tic-glyph .ic { width: 24px; height: 24px; }
.secbar .pil .tic-glyph { color: var(--text2); }
.secbar a.on .pil .tic-glyph { color: #fff; }

/* The filter by channel and by competitor, always in view (owner: "filter already can be visible by channel and by
   competiton"): a strip of soft chips under the Brief that stays at the top while the rows below scroll. A channel chip
   is its network's tile and name; a competitor chip its face and short name; selected chips are ink (KB 33 1.1). */
.reader.one .rr-sticky { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 25; margin: 40px 0 0; padding: 10px 0; background: color-mix(in srgb, var(--rwash, var(--panel)) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.reader.one .rr-sticky + .band { padding-top: 16px; }
.reader.one .rr-sticky ~ .band { scroll-margin-top: 72px; }
.reader.one .rr-track { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.reader.one .rr-track::-webkit-scrollbar { display: none; }
.reader.one .rr-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 6px; border: 0; border-radius: 999px; background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font: 500 13.5px/1 var(--font-ui); white-space: nowrap; cursor: pointer; transition: transform 160ms var(--ease-out); }
.reader.one .rr-chip:active { transform: scale(.97); }
.reader.one .rr-chip.rr-all, .reader.one .rr-chip.rr-filters { padding: 0 14px; }
/* Filters stays at the start edge while only its neighbours scroll. Desktop already supplies the report's gutter. */
.reader.one .rr-filters { margin-inline-start: 18px; }
@media (min-width: 1024px) { .reader.one .rr-filters { margin-inline-start: 0; } }
.reader.one .rr-chip .stile { width: 24px; height: 24px; border-radius: 7px; font-size: 18px; vertical-align: 0; }
.reader.one .rr-chip .stile .ic { width: 14px; height: 14px; }
.reader.one .rr-chip .pfp { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; font-size: 10px; box-shadow: 0 0 0 1.5px var(--orchid-soft, #F3EDF8); }
.reader.one .rr-chip .ic { width: 16px; height: 16px; }
.reader.one .rr-chip.on { background: var(--ink); color: var(--panel); box-shadow: none; }
.reader.one .rr-chip.on .stile { border-color: transparent; }
.reader.one .rr-sep { flex: none; width: 1px; height: 22px; background: var(--rule); }
.reader.one .rr-label { flex: none; font: 600 12px/16px var(--font-ui); color: var(--text2); }
/* The row the strip stands over names itself at the track's start (owner, 2 Nov 2026), and each chip carries how many
   items it has there on the faces' ink count (KB 33 2.3); a chosen chip turns it to the panel. */
.reader.one .rr-track > .rr-label { padding-inline-start: 2px; white-space: nowrap; }
.reader.one .rr-chip:has(> .rr-n) { padding-inline-end: 7px; }
.reader.one .rr-chip .rr-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-inline-start: -1px; padding: 0 6px; border-radius: 999px;
  background: var(--ink); color: var(--panel); font: 600 11.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.reader.one .rr-chip.on .rr-n { background: var(--panel); color: var(--ink); }
/* One line at every width: a strip that looks like one (Design bible 6), its far end fading while there is more. */
.reader.one .rr-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-inline-end: 36px; }
.reader.one .rr-track:dir(rtl) { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 36px), transparent); }
/* Staff posts about their own work stay in Mentioned you's row, hidden until asked for. */
.reader.one [data-aside][hidden] { display: none !important; }
/* An article about the reader's own business shows their face in their own Ember ring (the row of faces' You). */
.nv-mast.nv-own .nv-portrait { box-shadow: 0 0 0 var(--news-portrait-ring, 3px) var(--panel), 0 0 0 calc(var(--news-portrait-ring, 3px) * 2) var(--ember); }
/* A quiet line under a row: who could not be read yet, with the way on (rivals without a Facebook page, KB 60). */
.reader.one .rr-note { margin: 8px 2px 0; font: 400 14px/20px var(--font-ui); color: var(--text2); }
/* The end closes the last part (KB 60): after a first part's inner body it keeps the steady 48 px gap between parts. */
.reader.one .band > .rinner + .full { margin-top: 48px; }
/* One height in a row (owner, 26 Oct 2026: a card without a picture beside one with a picture "look really strange"; KB 33).
   A part's row stands its cards as tall as its usual tallest card (js/screens-reader.js evenRows sets --row-height), the
   actions at the foot so they line up, and its day markers as tall as its cards. Picture-only cards use the compact
   exception below (owner, 28 Oct). A card that carries more than its row
   (a Best practice line, a long ad) stands taller rather than leaving every card beside it with a band of empty space. */
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .track > .card { align-self: flex-start; }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .track.one-height > .card { min-height: var(--row-height); }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .track.one-height > :is(.dd, .dl, .de) { align-self: flex-start; height: var(--row-height); min-height: 0; }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .track > .card > .acts2 { margin-top: auto; }
/* Picture-only cards keep a consistent short body, never the empty space of a captioned neighbour.
   Counts and source labels remain visible; longer names and enlarged text can grow instead of being clipped. */
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .card.copy-empty > .cb { min-height: var(--report-card-compact-body, 88px); }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .track.one-height > .card.copy-empty { min-height: var(--row-compact-height); }
/* A words-only card's panel is its picture: the 4:5 frame at least, and any height the row gives the card (no dot field).
   Its words sit in the middle and grow with the panel, from the kit's 24 px to 40 px, up to seven lines (decided under
   KB 49, 26 Oct 2026). */
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .card.typed > .card-panel { flex: 1 0 auto; display: flex; flex-direction: column; aspect-ratio: var(--report-card-media-ratio, 4 / 5); container-type: size; }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .card.typed > .card-panel > .tc { flex: 1 0 auto; }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .nv-card.mk-typed > .nv-open { flex: 1 0 auto; display: flex; flex-direction: column; }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .nv-card.mk-typed .nv-mast { flex: 1 0 auto; container-type: size; }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .nv-card.mk-typed > .nv-body { flex: none; }
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row :is(.card.typed > .card-panel .tc-head, .nv-card.mk-typed .mk-type-head) { margin-block: auto;
  font-size: clamp(var(--typed-head-min, 24px), var(--typed-head-scale, 6.4cqh), var(--typed-head-max, 40px)); line-height: var(--typed-head-leading, 1.25); -webkit-line-clamp: 7; }
/* Best practice keeps two lines on a row's card; the line and its chip open the pattern whole (KB 57). */
.reader.one :is(.b-competitors, .b-you, .b-market) .one-row .practice-note > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }