/* FinUI blocks: the layout inside each block, and nothing else. Every colour, corner and gap of a component is FinUI's,
   through its tokens; this file reads tokens only, like the rest. */
.blk-stack { display: grid; gap: 14px; min-width: 0; }
.blk-stack--tight { gap: 6px; }
.blk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.blk-row--end { justify-content: flex-end; }
.blk-chart { display: block; width: 100%; height: auto; }
.blk-tick { fill: var(--text-faint); font-size: 11px; }
.blk-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-muted); }
.blk-legend li { display: inline-flex; align-items: center; gap: 6px; }
.blk-key { width: 10px; height: 10px; border-radius: var(--radius-sm); }
.blk-heat { display: grid; grid-template-columns: auto repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.blk-heat__day { font-size: 11px; color: var(--text-faint); padding-right: 6px; }
.blk-heat__cell { aspect-ratio: 1; border-radius: var(--radius-sm); }
.blk-who { display: inline-flex; align-items: center; gap: 8px; }
.blk-watched { display: inline-flex; align-items: center; gap: 8px; }
.blk-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.blk-donut-wrap .blk-legend { flex-direction: column; flex: 1 1 120px; }
.blk-donut { width: 128px; height: 128px; flex: none; }
.blk-donut__value { fill: var(--text-strong); font-size: 20px; font-weight: 700; }
.blk-specimen__title { font-family: var(--font-heading); font-size: 19px; line-height: 1.25; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); color: var(--text-strong); }
.blk-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px 8px; }
.blk-swatch { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.blk-swatch__chip { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border); }
.blk-swatch__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--text-faint); }
.blk-list { display: grid; gap: 12px; }
.blk-list__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.blk-list__text { display: grid; gap: 4px; flex: 1; min-width: 0; font-size: 13px; }
.blk-rank { width: 1.5em; flex: none; text-align: right; font-size: 13px; color: var(--text-faint); }
.blk-value { display: grid; justify-items: end; gap: 2px; flex: none; font-size: 12.5px; }
.blk-value strong { color: var(--text-strong); }
.blk-dl { display: grid; gap: 6px; }
.blk-dl__top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; min-width: 0; }
.blk-key-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--bg-sunken); border: 1px solid var(--border-soft); border-radius: var(--radius-control); min-width: 0; }
.blk-shortcuts { display: grid; }
.blk-shortcuts li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; }
.blk-shortcuts li + li { border-top: 1px solid var(--border-soft); }
.blk-keys { display: inline-flex; gap: 4px; }
.blk-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 11.5px; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); }
/* Focus held still, so a preset's ring shows without a keyboard. */
.blk-focused { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.blk-icons { gap: 14px; color: var(--text-muted); }
.blk-modal { width: 100%; }
.blk-row--between { justify-content: space-between; }
.blk-center { justify-items: center; text-align: center; }
.blk-big { font-family: var(--font-heading); font-size: 18px; font-weight: var(--heading-weight); color: var(--text-strong); }
.blk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* The radar: a web of six and one shape over it. */
.blk-radar { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; overflow: visible; }
.blk-radar__label { fill: var(--text-faint); font-size: 7.5px; }
/* A bar list: each row's bar behind its name, the number at the end. */
.blk-bars { display: grid; gap: 6px; }
.blk-bars__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 13px; }
.blk-bars__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-sm); background: var(--accent-wash); }
.blk-bars__name, .blk-bars__value { position: relative; }
.blk-spark { width: 72px; height: 22px; }
.blk-stats { grid-template-columns: minmax(0, 1fr); }
/* Dates: times to choose from, a week of plans. */
.blk-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.blk-agenda { display: grid; }
.blk-agenda__day { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 9px 0; }
.blk-agenda__day + .blk-agenda__day { border-top: 1px solid var(--border-soft); }
.blk-agenda__date { font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.blk-agenda__items { display: grid; gap: 6px; font-size: 13px; }
.blk-agenda__item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Forms: six boxes for a code, a field with a button beside it, an address and a role, a place to drop a file. */
.blk-otp { display: flex; align-items: center; justify-content: center; gap: 6px; }
.blk-otp__box { width: 40px; text-align: center; font-size: 18px; padding-left: 0; padding-right: 0; }
.blk-otp__dash { color: var(--text-faint); }
.blk-inline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.blk-inline .fui-field__input { flex: 1; min-width: 0; }
.blk-key-row--boxed { padding: 6px 10px; }
.blk-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.blk-drop { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-sunken); }
.blk-drop strong { color: var(--text); }
.blk-drop.is-over { border-color: var(--accent); background: var(--accent-wash); }
/* Lists: rows on a line, unread marks, one bar of parts. */
.blk-feed { gap: 14px; }
.blk-feed > .blk-list__row { position: relative; align-items: flex-start; }
.blk-feed > .blk-list__row:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 26px; bottom: -14px; width: 1px; background: var(--border); }
.blk-feed__mark { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border-radius: var(--radius-pill); background: var(--bg-sunken); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.blk-select-sm { width: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; font-size: 12.5px; }
.blk-inbox__dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-pill); }
.blk-list__row.is-unread .blk-inbox__dot { background: var(--accent); }
.blk-list__row:not(.is-unread):has(.blk-inbox__dot) strong { font-weight: 500; color: var(--text-muted); }
.blk-stackbar { display: flex; height: 12px; gap: 2px; overflow: hidden; border-radius: var(--radius-pill); }
/* States: a banner in each tone, a finished thing. */
.blk-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-control); background: var(--bg-sunken); font-size: 13px; }
.blk-callout > .icon { flex: none; margin-top: 1px; }
.blk-callout > .fui-button { flex: none; margin: -4px -6px 0 0; }
.blk-callout--info { border-left-color: var(--accent); }
.blk-callout--info > .icon { color: var(--accent-hi); }
.blk-callout--good { border-left-color: var(--good); }
.blk-callout--good > .icon { color: var(--good); }
.blk-callout--warning { border-left-color: var(--warning); }
.blk-callout--warning > .icon { color: var(--warning); }
.blk-callout--critical { border-left-color: var(--critical); }
.blk-callout--critical > .icon { color: var(--critical); }
.blk-done { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--accent-wash); color: var(--accent-hi); }
/* Pages: the app's menu beside the page when it has one, a missing page. */
.blk-page { display: grid; gap: 16px; min-width: 0; }
.blk-page--side { display: flex; flex-wrap: wrap; align-items: flex-start; }
.blk-page--side > :first-child { flex: 1 1 200px; }
.blk-page__main { display: grid; gap: 16px; min-width: 0; }
/* Beside the menu while the page keeps 60% of the width, under it once it would not: the frame decides, not the screen. */
.blk-page--side > .blk-page__main { flex: 999 1 0; min-width: 60%; }
.blk-page__main > .blk-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.blk-404 { font-size: 54px; font-weight: 700; line-height: 1; color: var(--text-faint); letter-spacing: -.04em; }
.blk-center .fui-field__search { width: 100%; max-width: none; }
.blk-side { display: grid; gap: 2px; }
.blk-side__brand { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 2px 4px 12px; }
.blk-side__brand .muted { grid-column: 2; font-size: 12px; }
.blk-side__logo { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.blk-side__group { margin: 10px 0 4px; padding-left: 10px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.blk-side__item { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: var(--radius-control); color: var(--text-muted); font-size: 13.5px; }
.blk-side__item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.blk-side__item.is-active { background: var(--selected-bg); color: var(--selected-text); box-shadow: var(--selected-edge); }
.blk-side__item.is-active .icon { color: var(--selected-icon); }
.blk-side__user { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 4px 0; border-top: 1px solid var(--border-soft); font-size: 13px; }

/* ---- the larger families: watching, a dashboard, an account, a library */
.blk-stack--loose { gap: 22px; }
/* A title's top: its poster beside what it is and what can be done with it. */
.blk-title { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.blk-title__name { font-size: 18px; font-weight: 650; color: var(--text-strong); }
/* A season's episodes: the number, the name and what is seen, a tick when it all is. */
.blk-episodes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.blk-episodes__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.blk-episodes__row.is-seen .icon { color: var(--good); }
.blk-upnext { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: var(--bg-sunken); }
/* A dashboard: its parts in as many columns as there is room for, numbers and charts across the whole. */
.blk-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px 26px; align-items: start; }
.blk-dash__part:has(> .fui-stat-tile__grid) { grid-column: 1 / -1; }
.blk-profile { display: flex; align-items: center; gap: 14px; }
.blk-profile > .blk-stack { flex: 1; min-width: 0; }
@media (max-width: 480px) { .blk-title { grid-template-columns: 72px minmax(0, 1fr); } }
.blk-slider { width: 200px; }