/* The client portal's Results page (#page-rezultati, portal/results.js).
   One data colour (the Home chart's blue) on the numbers that are the point: the line, the ticked videos and their bars.
   Everything else is the portal's greys. Cards are flat (a 1 px edge, no shadow); only what floats (the period menu,
   the chart tooltip, the bar at a phone's foot) casts one. Sizes: 12 / 14 / 16 / 24 / 32, weights 400 / 600.
   Columns that hold words are sized by their content (subgrid, auto tables), so a longer language never collides.
   Motion is feedback only: a tick's number and mark pop in, the panel's new content fades in and a single video's
   bars grow, the KPI digits roll (portal/number-roll.js), the white thumb slides between the platform tabs. */
#page-rezultati{
  --rs-card:var(--panel);
  --rs-border:var(--line);
  --rs-rule:color-mix(in srgb,var(--line) 55%,var(--panel));
  --rs-data:#078cf2;
  --rs-track:color-mix(in srgb,var(--text) 9%,var(--panel));
  --rs-mark:color-mix(in srgb,var(--text) 34%,var(--panel));
  --rs-hover:color-mix(in srgb,var(--text) 4%,var(--panel));
  --rs-active:color-mix(in srgb,var(--text) 7%,var(--panel));
  --rs-segment:var(--panel);
  --rs-segment-on:#3a4250;
  --rs-out:cubic-bezier(.22,1,.36,1);
  max-width:1280px;margin:0 auto;container:results / inline-size;
}
:root[data-theme="light"] #page-rezultati{--rs-border:#e5e5e3;--rs-segment:#ededeb;--rs-segment-on:#fff}
@media(max-width:900px){#page-rezultati{padding-top:52px}}
#page-rezultati .rs-num{font-variant-numeric:tabular-nums;text-align:right}
#page-rezultati h1,#page-rezultati h2,#page-rezultati h3,#page-rezultati h4{margin:0}
@keyframes rs-fade{from{opacity:0}}
@keyframes rs-pop{from{opacity:0;transform:scale(.4)}}
@keyframes rs-grow{from{transform:scaleX(0)}}

/* ── title row ── */
/* The title and the filters share one row. The tabs take what the title and the period leave and scroll sideways
   inside their own track before they would ever cover the title. Below 900 px the period stays beside the title and
   the platforms get a row of their own. */
.results-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"title tabs range";align-items:center;gap:8px 12px;margin:0 0 24px}
.results-heading-copy,.results-controls{display:contents}
.results-heading h1{grid-area:title;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
#page-rezultati #platTabs{grid-area:tabs;justify-self:end;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none}
#page-rezultati #platTabs::-webkit-scrollbar{display:none}
#page-rezultati .results-range{grid-area:range}
#page-rezultati .results-heading .tabs{position:relative;isolation:isolate;display:inline-flex;gap:2px;padding:4px;border:0;border-radius:12px;background:var(--rs-segment);flex-wrap:nowrap}
#page-rezultati .results-heading .tabs[hidden]{display:none}
#page-rezultati .results-heading .tabs button{position:relative;display:inline-flex;align-items:center;flex:none;gap:6px;min-height:32px;padding:0 12px;border-radius:8px;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;transition:background-color .18s ease,color .18s ease}
#page-rezultati .results-heading .tabs button.rs-plat-icon{justify-content:center;width:36px;padding:0}
#page-rezultati .results-heading .tabs button::after{content:"";position:absolute;inset:-6px 0}
#page-rezultati .results-heading .tabs button:hover{color:var(--text)}
#page-rezultati .results-heading .tabs button.on{background:var(--rs-segment-on);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 1px 6px rgba(0,0,0,.05)}
/* The white thumb slides to the chosen platform (placed by placeTabThumb), as on Home's period switch. Without it the
   chosen button paints itself. */
#page-rezultati .results-heading .tabs.has-thumb::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:0;width:var(--thumb-w);transform:translateX(var(--thumb-x));border-radius:8px;background:var(--rs-segment-on);box-shadow:0 1px 2px rgba(0,0,0,.08),0 1px 6px rgba(0,0,0,.05);transition:transform .26s var(--rs-out),width .26s var(--rs-out)}
#page-rezultati .results-heading .tabs.has-thumb button.on{background:transparent;box-shadow:none}
@media(prefers-reduced-motion:reduce){#page-rezultati .results-heading .tabs.has-thumb::before{transition:none}}
@media(forced-colors:active){#page-rezultati .results-heading .tabs button.on{outline:2px solid Highlight;outline-offset:-2px}}
.results-range:empty{display:none}
.results-range-trigger{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 12px 0 14px;border:1px solid var(--rs-border);border-radius:12px;background:var(--rs-card);color:var(--text);font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .15s}
.results-range-trigger:hover,.results-range-trigger[aria-expanded="true"]{background:var(--rs-hover)}
.results-range-trigger svg{width:12px;height:12px;flex:none;color:var(--muted);transition:transform .18s var(--rs-out)}
.results-range-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.results-range-trigger::after{content:"";position:absolute;inset:-3px -1px}
.results-range-options{position:fixed;inset:auto;margin:0;min-width:172px;max-width:calc(100vw - 24px);padding:4px;border:1px solid #dedede;border-radius:10px;background:#fff;color:#181818;color-scheme:light;box-shadow:0 12px 30px rgba(0,0,0,.14);overflow-y:auto;overscroll-behavior:contain;z-index:20}
.results-range-options::backdrop{background:transparent}
.results-range-options button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:36px;padding:8px 12px;border:0;border-radius:6px;background:transparent;color:inherit;font-size:12px;text-align:left;cursor:pointer}
.results-range-options button:hover,.results-range-options button:focus-visible{background:#f1f1f1}
.results-range-options button[aria-selected="true"]{background:#ededed;font-weight:600}
.results-range-options button[aria-selected="true"]::after{content:"";display:inline-block;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.12 11.62c.48-.49 1.28-.49 1.76 0l4.36 4.35 9.87-10.09c.48-.5 1.27-.51 1.76-.02.5.48.51 1.27.02 1.76l-10.75 11c-.48.5-1.27.51-1.76.02l-.02-.02-5.24-5.24c-.49-.48-.49-1.28 0-1.76'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.12 11.62c.48-.49 1.28-.49 1.76 0l4.36 4.35 9.87-10.09c.48-.5 1.27-.51 1.76-.02.5.48.51 1.27.02 1.76l-10.75 11c-.48.5-1.27.51-1.76.02l-.02-.02-5.24-5.24c-.49-.48-.49-1.28 0-1.76'/%3E%3C/svg%3E") center/contain no-repeat}
.results-range-options button:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
@media(max-width:560px){.results-range-options button{min-height:44px}}
:root[data-theme="dark"] .results-range-options{background:var(--panel);color:var(--text);border-color:var(--line);color-scheme:dark}
:root[data-theme="dark"] .results-range-options button:hover,:root[data-theme="dark"] .results-range-options button:focus-visible{background:var(--panel-2)}
:root[data-theme="dark"] .results-range-options button[aria-selected="true"]{background:#3a4250}

/* ── shared pieces ── */
.rs-card{min-width:0;padding:20px 24px;border:1px solid var(--rs-border);border-radius:16px;background:var(--rs-card)}
.rs-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 16px}
.rs-card-head h2,.rs-videos-head h2{font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.rs-card-note{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45;max-width:72ch}
.rs-card-aside{color:var(--muted);font-size:12px;line-height:1.45;text-align:right}
/* login.html greys every image; a network's logo and a video's picture keep their colours here, as on Home. */
.rs-brand{display:block;flex:none;width:16px;height:16px;filter:none}
.rs-logo{display:block;flex:none;background:currentColor;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
#page-rezultati :is(.rs-thumb,.rs-detail-thumb) img{filter:none}
.rs-brands{display:flex;flex:none;gap:4px}
.rs-bar{display:block;height:3px;border-radius:2px;background:var(--rs-track);overflow:hidden}
.rs-bar>span{display:block;height:100%;border-radius:inherit;background:var(--rs-mark)}
.rs-text-button{position:relative;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:12px;font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px;cursor:pointer;transition:text-decoration-color .15s}
.rs-text-button::after{content:"";position:absolute;inset:-12px -8px}
.rs-text-button:hover{text-decoration-color:currentColor}
.rs-quiet{color:var(--muted)}
.rs-delta{font-weight:600;white-space:nowrap}
.rs-delta.up{color:var(--success-text)}
.rs-delta.down{color:var(--error-text)}
.rs-delta.flat{color:var(--dim)}

/* An account's problems explain the gaps below them, so they come before the numbers. */
.rs-problems{display:grid;gap:4px;margin:0 0 16px;padding:12px 16px;list-style:none;border:1px solid var(--warning-border);border-radius:12px;background:var(--warning-bg);color:var(--warning-text);font-size:12px;line-height:1.5}
.rs-problems strong{font-weight:600}

/* ── KPI strip: one card split by hairlines (the 1 px gap shows the edge colour through) ──
   Every cell lends its three rows (label, value, change) to the strip's grid, so the labels, the values' baselines and
   the changes each sit on one line across the strip, whatever a cell's value size or label length. */
.rs-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0;border:1px solid var(--rs-border);border-radius:16px;background:var(--rs-card);overflow:hidden}
.rs-kpis .results-metric{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;min-width:0;padding:16px 20px;background:var(--rs-card)}
.rs-kpis dt{color:var(--muted);font-size:14px;line-height:1.3;text-wrap:balance}
.rs-kpis dd{margin:0;min-width:0}
.rs-kpis .rs-kpi-value{align-self:end;margin-top:8px;font-size:24px;line-height:1.1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.rs-kpis .rs-kpi-lead .rs-kpi-value{font-size:32px;letter-spacing:-.03em;line-height:1}
.rs-kpis .rs-kpi-change{margin-top:8px;font-size:12px;line-height:1.35;color:var(--muted)}
.rs-kpis .rs-kpi-change:empty{display:none}
.rs-kpi-base{white-space:nowrap}

/* ── chart + networks ── */
.rs-overview{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:16px;margin-top:16px;align-items:stretch}
.rs-chart-card{position:relative;display:flex;flex-direction:column}
/* What the chart draws: views per day, or the followers over time. A small track like the platform tabs, one step
   darker than the card it sits on. */
.rs-switch{display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:10px;background:var(--rs-active)}
.rs-switch button{position:relative;min-height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.rs-switch button::after{content:"";position:absolute;inset:-8px 0}
.rs-switch button:hover{color:var(--text)}
.rs-switch button[aria-pressed="true"]{background:var(--rs-segment-on);color:var(--text)}
@media(forced-colors:active){.rs-switch button[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-2px}}
/* The plot fills what the card has (portal/results.js measures it before drawing). */
#page-rezultati .results-line-chart{flex:1 1 auto;margin-top:16px;min-height:260px}
#page-rezultati .results-line-chart .plot-area{fill:url(#results-chart-fill)}
.results-line-chart .rs-lane{stroke:var(--rs-rule);stroke-width:1;vector-effect:non-scaling-stroke}
/* The lane names itself in the tick column, so it needs no legend. */
.results-line-chart .rs-lane-label{font-weight:600}
.results-line-chart .rs-guide{stroke:var(--rs-data);stroke-width:1;stroke-dasharray:2 3;stroke-opacity:.75;vector-effect:non-scaling-stroke;pointer-events:none}
/* A video's mark. The outer group is its place and its hit area; the inner one grows under the pointer (or when its row
   in the table is under it) and pops in when the video is ticked. */
.results-line-chart .rs-marker{cursor:pointer}
.results-line-chart .rs-marker-hit{fill:transparent}
.results-line-chart .rs-marker-dot{transform-box:fill-box;transform-origin:center;transition:transform .16s var(--rs-out)}
.results-line-chart .rs-marker-dot path{fill:var(--rs-mark);transition:fill .15s}
.results-line-chart .rs-marker:is(:hover,.rs-hot) .rs-marker-dot{transform:scale(1.3)}
.results-line-chart .rs-marker:is(:hover,.rs-hot) .rs-marker-dot path{fill:var(--text)}
.results-line-chart .rs-marker.on .rs-marker-dot path{fill:var(--rs-data);stroke:var(--rs-card);stroke-width:2;paint-order:stroke;vector-effect:non-scaling-stroke}
.results-line-chart .rs-marker.on:is(:hover,.rs-hot) .rs-marker-dot{transform:scale(1.15)}
.results-line-chart .rs-marker.on:is(:hover,.rs-hot) .rs-marker-dot path{fill:#0670c2}
.results-line-chart .rs-marker text{fill:#fff;font-family:var(--font-body);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}
.results-line-chart .rs-marker.rs-fresh .rs-marker-dot{animation:rs-pop .28s cubic-bezier(.2,.9,.3,1.2) both}
.results-line-chart .rs-guide.rs-fresh{animation:rs-fade .3s ease-out both}
.results-line-chart .home-chart-tooltip.rs-tip-video{max-width:260px;white-space:normal}
.results-line-chart .rs-tip-video .home-chart-tooltip-date{color:#181818;font-size:12px;font-weight:600;line-height:1.35}
.results-line-chart .rs-tip-video .home-chart-tooltip-value{color:#5a6573;font-size:12px}
:root[data-theme="dark"] .results-line-chart .rs-tip-video .home-chart-tooltip-date{color:var(--text)}
:root[data-theme="dark"] .results-line-chart .rs-tip-video .home-chart-tooltip-value{color:var(--muted)}

/* Where the views came from. The header, every row and the total are rows of one grid (subgrid), so a column is as
   wide as its longest word or number in any language: network | views | share | followers. */
.rs-networks{display:flex;flex-direction:column}
.rs-networks-grid{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-rows:auto 1fr auto;column-gap:12px;margin-top:16px}
.rs-networks-head,.rs-networks-list,.rs-networks-list>li,.rs-network,.rs-networks-total{display:grid;grid-template-columns:subgrid;grid-column:1 / -1}
.rs-networks-head{padding-bottom:4px;color:var(--muted);font-size:12px;line-height:1.3}
.rs-networks-grid .rs-network-views{grid-column:2;text-align:right}
.rs-networks-grid .rs-network-followers{grid-column:4;text-align:right}
/* The rows reach 8 px past the text on both sides, so the hover fill is inset and rounded while the words stay on the
   card's own edge. */
.rs-networks-list{margin:0 -8px;padding:0;list-style:none;align-content:start}
.rs-network{grid-template-rows:auto auto;align-items:center;row-gap:6px;min-height:56px;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.rs-network:hover{background:var(--rs-hover)}
.rs-network:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.rs-network-name{grid-column:1;grid-row:1 / 3;display:flex;align-items:center;gap:12px;min-width:0}
.rs-network-name>span{display:flex;flex-direction:column;min-width:0}
.rs-network-label{font-size:14px;font-weight:600;line-height:1.3}
.rs-network-sub{overflow:hidden;color:var(--muted);font-size:12px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
.rs-network .rs-network-views{grid-row:1;align-self:end;font-size:14px;font-weight:600;line-height:1.3}
.rs-network-share{grid-column:3;grid-row:1;align-self:end;color:var(--muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;text-align:right}
.rs-network .rs-bar{grid-column:2 / 4;grid-row:2;align-self:start}
.rs-network .rs-bar>span{background:var(--rs-data)}
.rs-network .rs-network-followers{grid-row:1 / 3;color:var(--muted);font-size:14px}
.rs-networks-total{margin-top:4px;padding-top:12px;color:var(--muted);font-size:12px;align-items:baseline}
.rs-networks-total .rs-num{color:var(--text);font-size:14px;font-weight:600}
/* One network: its account's facts. The rows share the card's height, so nothing is left empty above the link. */
.rs-account-title{display:flex;align-items:center;gap:8px;min-width:0}
.rs-account-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-facts{flex:1 1 auto;display:grid;grid-auto-rows:minmax(44px,1fr);margin:12px 0 16px}
.rs-facts>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--rs-rule)}
.rs-facts>div:first-child{border-top:0}
.rs-facts dt{color:var(--muted);font-size:14px}
.rs-facts dd{margin:0;font-size:16px;font-weight:600}
.rs-account .rs-text-button{align-self:flex-start}

/* ── the videos: a table and the panel beside it ── */
.rs-videos{margin-top:40px}
.rs-videos-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:16px}
.rs-videos-tools{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;gap:20px;min-width:0}
.rs-export[hidden]{display:none}
.rs-export{flex:none;white-space:nowrap}
.rs-search{position:relative;display:flex;align-items:center;flex:0 1 280px;min-width:180px}
.rs-search[hidden]{display:none}
.rs-search svg{position:absolute;left:12px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.rs-search input{width:100%;height:36px;padding:0 12px 0 34px;border:1px solid var(--rs-border);border-radius:10px;background:var(--rs-card);color:var(--text);font:inherit;font-size:14px;transition:border-color .15s}
.rs-search input::placeholder{color:var(--dim)}
.rs-search input:hover{border-color:color-mix(in srgb,var(--text) 30%,var(--rs-border))}
.rs-videos-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
/* `clip`, not `hidden`: the corners are still cut, but the card is no scroll container, so the header row can stay at
   the top of the window while a long list scrolls under it. */
.rs-table-card{container:rstable / inline-size;min-width:0;border:1px solid var(--rs-border);border-radius:16px;background:var(--rs-card);overflow:clip}
/* The number columns are as wide as their header or widest number (any language); the video column takes the rest. */
.rs-table{width:100%;border-collapse:collapse;table-layout:auto;font-size:14px}
.rs-table th{position:sticky;top:var(--announce-h,0px);z-index:1;height:44px;padding:0 12px;background:var(--rs-card);box-shadow:inset 0 -1px 0 var(--rs-border);color:var(--muted);font-size:12px;font-weight:400;text-align:left;white-space:nowrap}
@media(max-width:900px){.rs-table th{position:static}}
.rs-table th.rs-num{text-align:right}
.rs-table th button{position:relative;display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;transition:color .15s}
.rs-table th button::after{content:"";position:absolute;inset:-12px -6px}
.rs-table th.rs-num button{flex-direction:row-reverse}
.rs-table th button:hover,.rs-table th[aria-sort="ascending"] button,.rs-table th[aria-sort="descending"] button{color:var(--text)}
.rs-table th[aria-sort="ascending"],.rs-table th[aria-sort="descending"]{font-weight:600}
.rs-sort{width:12px;height:12px;flex:none;opacity:0;transition:opacity .15s,transform .18s var(--rs-out)}
.rs-table th button:hover .rs-sort{opacity:.5}
.rs-table th[aria-sort="descending"] .rs-sort{opacity:1}
.rs-table th[aria-sort="ascending"] .rs-sort{opacity:1;transform:rotate(180deg)}
.rs-table .rs-col-check{width:48px;padding:0 0 0 16px}
.rs-table .rs-col-video{width:100%}
/* A cell's content does not widen an auto table's column past what the other columns leave. */
.rs-table td.rs-col-video{max-width:0}
.rs-table td{height:72px;padding:10px 12px;vertical-align:middle}
.rs-table td:last-child,.rs-table th:last-child{padding-right:20px}
.rs-row{cursor:pointer;transition:background-color .15s}
.rs-row:hover,.rs-row.rs-hot{background:var(--rs-hover)}
.rs-row.on{background:var(--rs-active)}
.rs-row td.rs-num{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.rs-row td.rs-col-views{color:var(--text)}
/* The bar hangs under the number, out of the flow: the number then sits on the same line as the row's other numbers. */
.rs-views{position:relative;display:inline-block;min-width:72px;font-weight:600}
.rs-views .rs-bar{position:absolute;top:calc(100% + 5px);right:0;width:72px}
.rs-row.on .rs-views .rs-bar>span{background:var(--rs-data)}
.rs-video{display:flex;align-items:center;gap:12px;min-width:0}
.rs-thumb{position:relative;display:block;flex:none;width:40px;height:52px;border-radius:6px;background:var(--rs-track)}
.rs-thumb img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
:root[data-theme="dark"] .rs-thumb img{outline-color:oklch(1 0 0 / .1)}
.rs-no{position:absolute;top:-6px;left:-6px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--rs-data);box-shadow:0 0 0 2px var(--rs-card);color:#fff;font-size:11px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.rs-row.on .rs-no{box-shadow:0 0 0 2px var(--rs-active)}
.rs-no.rs-fresh{animation:rs-pop .24s cubic-bezier(.2,.9,.3,1.2) both}
.rs-video-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.rs-video-title{display:-webkit-box;overflow:hidden;font-weight:600;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.rs-video-meta{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;color:var(--muted);font-size:12px;line-height:1.3;white-space:nowrap}
.rs-video-meta time{overflow:hidden;text-overflow:ellipsis}
.rs-warn{color:var(--warning-text);text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.rs-no-match{color:var(--muted);text-align:center}
.rs-more{display:block;width:100%;min-height:48px;border:0;border-top:1px solid var(--rs-border);background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .15s}
.rs-more:hover{background:var(--rs-hover)}
.rs-more:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.rs-empty{display:grid;justify-items:center;gap:12px;padding:40px 24px;color:var(--muted);font-size:14px;text-align:center}

/* The checkbox: the portal's square, filled with the data colour when ticked. */
.rs-check{appearance:none;display:grid;place-items:center;width:18px;height:18px;margin:0;border:1.5px solid color-mix(in srgb,var(--text) 40%,var(--panel));border-radius:5px;background:var(--rs-card);cursor:pointer;transition:background-color .15s,border-color .15s}
.rs-check::before{content:"";width:12px;height:12px;background:#fff;opacity:0;transform:scale(.6);transition:transform .15s cubic-bezier(.2,.8,.2,1),opacity .15s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.12 11.62c.48-.49 1.28-.49 1.76 0l4.36 4.35 9.87-10.09c.48-.5 1.27-.51 1.76-.02.5.48.51 1.27.02 1.76l-10.75 11c-.48.5-1.27.51-1.76.02l-.02-.02-5.24-5.24c-.49-.48-.49-1.28 0-1.76'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.12 11.62c.48-.49 1.28-.49 1.76 0l4.36 4.35 9.87-10.09c.48-.5 1.27-.51 1.76-.02.5.48.51 1.27.02 1.76l-10.75 11c-.48.5-1.27.51-1.76.02l-.02-.02-5.24-5.24c-.49-.48-.49-1.28 0-1.76'/%3E%3C/svg%3E") center/contain no-repeat}
.rs-check:hover{border-color:var(--text)}
.rs-check:checked{border-color:var(--rs-data);background:var(--rs-data)}
.rs-check:checked::before{opacity:1;transform:scale(1)}
.rs-check:disabled{opacity:.4;cursor:not-allowed}
.rs-check:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px var(--rs-card),0 0 0 4px var(--focus)}

/* The panel stays beside the table while it scrolls. It is a size container: beside the table its two halves stack,
   under it (a tablet, a narrow window) they sit side by side. */
.rs-panel{container:rspanel / inline-size;position:sticky;top:calc(24px + var(--announce-h,0px));min-width:0;scroll-margin-top:72px;padding:20px;border:1px solid var(--rs-border);border-radius:16px;background:var(--rs-card)}
/* Pinned beside a list longer than itself (fitPanel), a panel taller than the window scrolls inside itself, and then
   the page, so its last rows are never out of reach. */
.rs-panel.rs-pinned{max-height:calc(100dvh - 48px - var(--announce-h,0px));overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rs-mark) transparent}
.rs-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.rs-panel-head h3{font-size:16px;line-height:1.3;font-weight:600}
.rs-panel-empty{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:12px}
.rs-panel-error{margin-top:12px;color:var(--warning-text);font-size:12px;line-height:1.45}
/* What the person ticked arrives: the content fades in and a single video's bars grow to their lengths. */
.rs-panel.rs-arrive>*{animation:rs-fade .18s ease-out both}
.rs-panel.rs-arrive .rs-meter-fill{transform-origin:left center;animation:rs-grow .44s var(--rs-out) both}
.rs-panel.rs-arrive .rs-meter-tick{animation:rs-fade .2s ease-out .24s both}
.rs-detail-top{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center}
.rs-detail-thumb{display:block;width:72px;height:96px;border-radius:8px;background:var(--rs-track)}
.rs-detail-thumb img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
:root[data-theme="dark"] .rs-detail-thumb img{outline-color:oklch(1 0 0 / .1)}
.rs-detail-title{display:-webkit-box;overflow:hidden;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-wrap:pretty}
.rs-detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:8px;color:var(--muted);font-size:12px;line-height:1.3}
.rs-detail-meta .rs-brands{gap:6px}
/* What the video achieved: one finding a line, in ink, under the picture and the title. */
.rs-detail-standing{display:grid;gap:2px;margin:16px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.45;text-wrap:pretty}
/* Its tags and the way to its calendar entry share a line when they fit. */
.rs-detail-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:12px}
.rs-detail-entry{flex:none}
/* Each measure: its name and figure on one line, the bar under both at the panel's full width (a narrow panel no
   longer squeezes the bar between a long name and the figure). */
.rs-metrics{display:grid;gap:14px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rs-rule)}
.rs-metric{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 12px}
.rs-metric dt{grid-column:1;grid-row:1;color:var(--muted);font-size:14px;line-height:1.3}
.rs-metric dd{display:contents}
.rs-metric-value{grid-column:2;grid-row:1;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.rs-meter{position:relative;grid-column:1 / -1;grid-row:2;display:block;height:6px;border-radius:3px;background:var(--rs-track)}
.rs-meter-fill{display:block;height:100%;border-radius:inherit;background:var(--rs-data)}
.rs-meter-tick{position:absolute;top:-3px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--text)}
.rs-legend{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--muted);font-size:12px;line-height:1.4}
.rs-legend-tick{flex:none;width:2px;height:12px;border-radius:1px;background:var(--text)}
/* Asked for a fifth video: the note that four is the most answers, once. */
.rs-full-note.rs-nudge{animation:rs-nudge 1.2s ease-out}
@keyframes rs-nudge{0%,55%{color:var(--text)}}
.rs-panel-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--rs-rule)}
/* The panel's small tables (the interactions, the same video on each network): the section's name heads the first
   column, on one line with the figures' headers; the name takes the room, the numbers are as wide as their words. */
.rs-split{width:100%;border-collapse:collapse;table-layout:auto;font-size:14px}
.rs-split th,.rs-split td{height:32px;padding:0 0 0 16px;font-weight:400;white-space:nowrap}
.rs-split th:first-child{width:100%;padding-left:0;text-align:left}
.rs-split thead th{height:auto;padding-bottom:6px;color:var(--muted);font-size:12px;line-height:1.3;vertical-align:bottom}
.rs-split-heading{color:var(--text);font-weight:600}
.rs-reactions .rs-reaction-value{font-weight:600}
.rs-split-name{display:inline-flex;align-items:center;gap:8px}
.rs-split td.rs-split-link{padding-left:8px;text-align:right}
.rs-split-link a{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--muted);vertical-align:middle;transition:background-color .15s,color .15s}
.rs-split-link a::after{content:"";position:absolute;inset:-6px}
.rs-split-link a:hover{background:var(--rs-hover);color:var(--text)}
.rs-split-link svg{width:12px;height:12px}
.rs-panel-actions{display:grid;gap:4px;margin-top:20px}
.rs-link{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--rs-border);border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .15s}
.rs-link:hover{background:var(--rs-hover)}
.rs-link svg{width:12px;height:12px;margin-left:auto;color:var(--muted)}
@container rspanel (min-width:620px){
  .rs-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .rs-detail-solo{grid-template-columns:minmax(0,560px)}
  .rs-detail-side>:first-child{margin-top:0;padding-top:0;border-top:0}
}

/* Two to four videos side by side: the best figure of each row in ink and the data colour, the others grey. */
.rs-compare{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}
.rs-compare thead td{width:26%}
.rs-compare thead th{position:relative;padding:0 4px 12px;vertical-align:top;text-align:left;font-weight:400}
.rs-compare .rs-thumb-small{width:32px;height:42px;margin-bottom:8px}
.rs-compare-date{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:400;line-height:1.3;white-space:nowrap}
.rs-compare-title{display:-webkit-box;overflow:hidden;font-size:12px;font-weight:600;line-height:1.35;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.rs-remove{position:absolute;top:0;right:2px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.rs-remove::after{content:"";position:absolute;inset:-6px}
.rs-remove:hover{background:var(--rs-hover);color:var(--text)}
.rs-remove svg{width:14px;height:14px}
.rs-compare tbody th{padding:10px 8px 10px 0;color:var(--muted);font-weight:400;text-align:left;line-height:1.3}
.rs-compare tbody td{padding:10px 4px;color:var(--muted);vertical-align:top;white-space:nowrap}
/* Two or three videos have the room for the figures at reading size; four keep the small one. */
.rs-compare:not([data-columns="4"]) tbody td{font-size:14px}
.rs-compare td .rs-bar{margin-top:6px}
.rs-compare td.rs-best{color:var(--text);font-weight:600}
.rs-compare td.rs-best .rs-bar>span{background:var(--rs-data)}
@container rspanel (min-width:620px){
  .rs-compare,.rs-compare[data-columns] tbody td,.rs-compare-title{font-size:14px}
  .rs-compare thead td{width:22%}
  .rs-compare thead th,.rs-compare tbody td{padding-left:12px;padding-right:12px}
  .rs-remove{right:10px}
}

/* On a phone, a tick in the table leads down to the panel. */
.rs-select-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:999px;background:var(--text);color:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:14px;white-space:nowrap;transform:translateX(-50%);animation:rs-bar-in .22s cubic-bezier(.2,.8,.2,1)}
.rs-select-bar[hidden]{display:none}
.rs-select-bar button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--bg);color:var(--text);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
@keyframes rs-bar-in{from{opacity:0;transform:translate(-50%,8px)}}

/* ── by tag ── */
.results-tags{margin-top:16px}
.results-tags-empty{margin-top:16px;padding:16px;border:1px dashed var(--rs-border);border-radius:10px;color:var(--muted);font-size:14px}
.results-tags-head,.results-tags-list summary{display:grid;grid-template-columns:minmax(0,1fr) 88px 112px 96px;align-items:center;column-gap:12px}
/* The rows reach 8 px past the text (their hover fill is inset and rounded); the header keeps to the text's own edges. */
.results-tags-head{margin-top:16px;padding:0 0 8px 28px;color:var(--muted);font-size:12px}
.results-tags-head span:not(:first-child){text-align:right}
.results-tags-list{margin:0 -8px;padding:0;list-style:none}
.results-tags-list summary{position:relative;min-height:56px;padding:8px 8px 8px 36px;border-radius:8px;cursor:pointer;list-style:none;font-variant-numeric:tabular-nums;transition:background-color .15s}
.results-tags-list summary::-webkit-details-marker{display:none}
.results-tags-list summary::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--muted);-webkit-mask:url("/icons/ui/chevron-right.svg") center/contain no-repeat;mask:url("/icons/ui/chevron-right.svg") center/contain no-repeat;transition:transform .18s var(--rs-out)}
.results-tags-list details[open]>summary::before{transform:rotate(90deg)}
.results-tags-list summary:hover{background:var(--rs-hover)}
.results-tags-list summary:focus-visible{outline:2px solid transparent;box-shadow:inset 0 0 0 2px var(--focus)}
.results-tags-name{display:grid;gap:8px;min-width:0}
.results-tags-name .rs-bar{max-width:240px}
.results-tags-count,.results-tags-avg,.results-tags-vs{text-align:right;font-size:14px;white-space:nowrap}
.results-tags-count{color:var(--muted);font-size:12px}
.results-tags-avg{font-weight:600}
.results-tags .delta{font-weight:600}
.results-tags .delta.up{color:var(--success-text)}
.results-tags .delta.down{color:var(--error-text)}
.results-tags .delta.flat{color:var(--dim)}
/* One column that may shrink: a long title is cut with an ellipsis and its number stays inside the card. */
.results-tags-videos{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0;padding:4px 8px 12px 36px;list-style:none}
.results-tags-videos button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:36px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:background-color .15s}
.results-tags-videos button:hover{background:var(--rs-hover)}
.results-tags-videos button[aria-pressed="true"]{background:var(--rs-active);color:var(--text);font-weight:600}
.results-tags-videos span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.results-tags-videos span:last-child{flex:none;font-variant-numeric:tabular-nums}

/* ── messages and loading (the page's own shape in grey, so nothing jumps when the numbers land) ── */
.rs-notice{display:grid;justify-items:start;gap:16px;padding:32px;font-size:14px;line-height:1.5;color:var(--muted)}
.rs-notice p{max-width:60ch;color:var(--text)}
.rs-notice .btn{width:auto;padding:8px 14px;font-size:14px}
.rs-skeleton .rs-kpis .results-metric{row-gap:12px;min-height:112px;align-content:start}
.rs-sk{display:block;border-radius:6px;background:var(--rs-track)}
.rs-sk-label{width:56%;height:12px}
.rs-sk-value{width:72%;height:28px}
.rs-sk-card{min-height:360px}
.rs-sk-videos{margin-top:40px}
.rs-sk-list{display:grid;align-content:start;gap:20px}
.rs-sk-row{height:52px}

@media(prefers-reduced-motion:reduce){
  .rs-check::before,.results-line-chart .rs-marker-dot,.rs-sort,.results-range-trigger svg{transition:none}
  .rs-no.rs-fresh,.results-line-chart .rs-fresh,.results-line-chart .rs-marker.rs-fresh .rs-marker-dot,.rs-select-bar,.rs-full-note.rs-nudge{animation:none}
}

/* ── narrower ── */
@container results (max-width:1080px){
  .rs-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rs-videos-body{grid-template-columns:minmax(0,1fr) 340px}
}
@container results (max-width:920px){
  .rs-overview{grid-template-columns:minmax(0,1fr)}
  .rs-videos-body{grid-template-columns:minmax(0,1fr)}
  /* One region at a time: the table, then the ticked videos' numbers under it (a bar after a tick leads there). */
  .rs-panel,.rs-panel.rs-pinned{position:static;max-height:none;overflow:visible}
  .results-heading{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title range" "tabs tabs"}
  #page-rezultati #platTabs{justify-self:start}
}
@container results (max-width:760px){
  .results-tags-head{display:none}
  .results-tags-list summary{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .results-tags-name{grid-column:1 / -1}
  .results-tags-count{text-align:left}
  .results-tags-avg{display:none}
}
@container results (max-width:560px){
  .rs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-kpis .results-metric{padding:14px 16px}
  .rs-kpis .rs-kpi-value{font-size:20px}
  .rs-kpis .rs-kpi-lead .rs-kpi-value{font-size:24px}
  .rs-card{padding:16px}
  .rs-panel{padding:16px}
  /* A card's side note goes under its title instead of squeezing beside it. */
  .results-tags .rs-card-head{flex-direction:column;gap:4px}
  .results-tags .rs-card-aside{text-align:left}
  .results-tags-videos{padding-left:28px}
  .rs-videos-head{flex-wrap:wrap}
  .rs-videos-tools{flex:1 1 100%;justify-content:space-between}
  .rs-search{flex:1 1 auto}
  .rs-chart-card .rs-card-head{flex-wrap:wrap}
}
/* The table drops columns as it narrows; what it drops is in the panel. */
@container rstable (max-width:700px){.rs-col-reach{display:none}}
@container rstable (max-width:580px){.rs-col-watch{display:none}}
@container rstable (max-width:440px){
  .rs-col-rate{display:none}
  .rs-table td{padding:10px 8px}
  .rs-table .rs-col-check{width:40px;padding-left:12px}
  .rs-table td:last-child,.rs-table th:last-child{padding-right:16px}
  .rs-views{min-width:56px}
  .rs-views .rs-bar{width:56px}
}