/* /Components/Admin/ModerationQueue.razor.rz.scp.css */
/* Moderation queue (issue #36) — flush-left rows on tokens from tokens.css,
   separated by rules (design-guidelines: rules, radius 0, nothing
   centered). The diff is two quiet columns; gold stays on small purposeful
   surfaces (the approve button, the notes rule), rejection inverts to ink
   like the rejected status badge on /conta/contribuicoes. */

.moderation-queue[b-4gf42vwc1p] {
    padding-block: var(--space-4) var(--space-8);
    display: grid;
    gap: var(--space-4);
    justify-items: start;
}

.queue-error[b-4gf42vwc1p] {
    padding: var(--space-2) var(--space-3);
    border-left: var(--rule) solid var(--color-text);
    background: var(--color-surface);
    font-size: 14px;
    max-width: 65ch;
}

/* --- Empty state: the queue being clear is content ------------------- */

.queue-empty[b-4gf42vwc1p] {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
}

.empty-title[b-4gf42vwc1p] {
    font-weight: var(--weight-black);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.empty-body[b-4gf42vwc1p] {
    color: rgba(13, 13, 13, 0.62);
}

/* --- The queue ------------------------------------------------------- */

.queue-count[b-4gf42vwc1p] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.62);
}

.queue-list[b-4gf42vwc1p] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    width: 100%;
}

.queue-item[b-4gf42vwc1p] {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    padding-block: var(--space-4);
}

.queue-item + .queue-item[b-4gf42vwc1p] {
    border-top: var(--rule) solid var(--color-divider);
}

.item-head[b-4gf42vwc1p] {
    display: grid;
    gap: var(--space-1);
}

.item-type[b-4gf42vwc1p] {
    font-weight: var(--weight-black);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.item-meta[b-4gf42vwc1p] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.62);
}

.item-meta a[b-4gf42vwc1p] {
    color: var(--color-accent-700);
    text-decoration: none;
    border-bottom: var(--rule) solid var(--color-accent);
}

.item-meta a:hover[b-4gf42vwc1p],
.item-meta a:focus-visible[b-4gf42vwc1p] {
    background: var(--color-accent);
    color: var(--color-text);
}

/* --- The diff: proposal vs current data ------------------------------ */

.item-diff[b-4gf42vwc1p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    width: 100%;
    max-width: 900px;
}

@media (max-width: 720px) {
    .item-diff[b-4gf42vwc1p] {
        grid-template-columns: 1fr;
    }
}

.diff-col[b-4gf42vwc1p] {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding: var(--space-3);
    background: var(--color-surface);
}

.diff-title[b-4gf42vwc1p] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-700);
    margin: 0;
}

.diff-message[b-4gf42vwc1p] {
    max-width: 55ch;
    margin: 0;
}

.diff-none[b-4gf42vwc1p] {
    color: rgba(13, 13, 13, 0.62);
    margin: 0;
}

.diff-credit[b-4gf42vwc1p] {
    font-size: 14px;
    color: rgba(13, 13, 13, 0.62);
    margin: 0;
}

.diff-photo-count[b-4gf42vwc1p] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.62);
    margin: 0;
}

.diff-thumbs[b-4gf42vwc1p] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.diff-thumbs img[b-4gf42vwc1p] {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.current-rows[b-4gf42vwc1p] {
    display: grid;
    gap: var(--space-1);
    margin: 0;
}

.current-row[b-4gf42vwc1p] {
    display: flex;
    gap: var(--space-2);
    font-size: 14px;
}

.current-row dt[b-4gf42vwc1p] {
    min-width: 11ch;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.62);
}

.current-row dd[b-4gf42vwc1p] {
    margin: 0;
}

.current-row dd.unconfirmed[b-4gf42vwc1p] {
    color: rgba(13, 13, 13, 0.62);
}

/* --- Actions --------------------------------------------------------- */

.item-actions[b-4gf42vwc1p] {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    width: 100%;
    max-width: 900px;
}

.reject-flow[b-4gf42vwc1p] {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    width: 100%;
    max-width: 55ch;
}

.reject-field[b-4gf42vwc1p] {
    display: grid;
    gap: var(--space-1);
    width: 100%;
}

.reject-field span[b-4gf42vwc1p] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.62);
}

.reject-field textarea[b-4gf42vwc1p] {
    width: 100%;
    padding: var(--space-2);
    border: var(--rule) solid var(--color-divider);
    border-radius: 0;
    font: inherit;
    background: var(--color-bg);
}

.reject-field textarea:focus-visible[b-4gf42vwc1p] {
    outline: none;
    border-color: var(--color-text);
}

/* Rejection inverts to ink — purposeful, never gold (that is approval's
   color); disabled stays visibly inert until the required note exists. */
.btn-reject[b-4gf42vwc1p] {
    padding: 10px 22px;
    border: var(--rule) solid var(--color-text);
    border-radius: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-reject:hover:not(:disabled)[b-4gf42vwc1p],
.btn-reject:focus-visible:not(:disabled)[b-4gf42vwc1p] {
    background: var(--color-text);
    color: #ffffff;
}

.btn-reject:disabled[b-4gf42vwc1p] {
    opacity: 0.45;
    cursor: not-allowed;
}

.reject-hint[b-4gf42vwc1p] {
    font-size: 12px;
    color: rgba(13, 13, 13, 0.62);
    margin: 0;
}
/* /Components/Archive/ArchiveExplorer.razor.rz.scp.css */
/* Archive explorer — docs/design-guidelines.md: 2px rules, radius 0, copy
   flush left, photos grayscale in fixed-ratio frames. Rail geometry per the
   legacy IA spec: bar height encodes state (active 116 > has-photo 92 >
   in-filter 68 > excluded 48), stronger tick at each decade opening. */

.archive-head[b-4ojzvrsb0j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding-block: var(--space-6) var(--space-5);
}

.head-title[b-4ojzvrsb0j] {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

/* --- Filters ----------------------------------------------------------- */

.archive-filters[b-4ojzvrsb0j] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.filter-field[b-4ojzvrsb0j] {
    display: grid;
    gap: var(--space-1);
}

.filter-field span[b-4ojzvrsb0j] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.64);
}

.filter-field input[b-4ojzvrsb0j],
.filter-field select[b-4ojzvrsb0j] {
    border: var(--rule) solid var(--color-text);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    padding: 8px 10px;
    min-width: 170px;
}

.filter-field input:focus-visible[b-4ojzvrsb0j],
.filter-field select:focus-visible[b-4ojzvrsb0j] {
    outline: var(--rule) solid var(--color-accent);
    outline-offset: 0;
}

/* --- Mode switch -------------------------------------------------------- */

.archive-modes[b-4ojzvrsb0j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-block: var(--space-3);
    border-top: var(--rule) solid var(--color-text);
}

.mode-switch[b-4ojzvrsb0j] {
    display: flex;
}

.mode-option[b-4ojzvrsb0j] {
    border: var(--rule) solid var(--color-text);
    border-right-width: 0;
    background: none;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 16px;
    cursor: pointer;
}

.mode-option:last-child[b-4ojzvrsb0j] {
    border-right-width: var(--rule);
}

.mode-option:hover[b-4ojzvrsb0j],
.mode-option:focus-visible[b-4ojzvrsb0j] {
    background: var(--color-surface);
}

/* Gold marks the active mode — text on gold is black. */
.mode-option.is-current[b-4ojzvrsb0j],
.mode-option.is-current:hover[b-4ojzvrsb0j],
.mode-option.is-current:focus-visible[b-4ojzvrsb0j] {
    background: var(--color-accent);
    color: var(--color-text);
}

.result-count[b-4ojzvrsb0j] {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    color: rgba(13, 13, 13, 0.64);
}

/* --- Rail -------------------------------------------------------------- */

.archive-rail-band[b-4ojzvrsb0j] {
    background: var(--color-surface);
    border-top: var(--rule) solid var(--color-text);
    border-bottom: var(--rule) solid var(--color-text);
}

.archive-rail[b-4ojzvrsb0j] {
    overflow-x: auto;
    scrollbar-width: thin;
    padding-inline: var(--container-pad);
}

.rail-track[b-4ojzvrsb0j] {
    display: flex;
    align-items: flex-end;
    min-width: max-content;
    padding-block: var(--space-4) var(--space-3);
}

.rail-season[b-4ojzvrsb0j] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 44px;
    height: 68px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--color-divider);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

.rail-season span[b-4ojzvrsb0j] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 0 0 6px 5px;
}

.rail-season.decade-start[b-4ojzvrsb0j] {
    border-left: var(--rule) solid var(--color-text);
}

.rail-season.has-photo[b-4ojzvrsb0j] {
    height: 92px;
    background: rgba(13, 13, 13, 0.08);
}

/* Filtered out (#22): present but receded. */
.rail-season.is-out[b-4ojzvrsb0j] {
    height: 48px;
    color: var(--color-unknown);
    background: transparent;
}

.rail-season:hover[b-4ojzvrsb0j],
.rail-season:focus-visible[b-4ojzvrsb0j] {
    background: rgba(13, 13, 13, 0.16);
}

/* Gold marks the one active season — text on gold is black. */
.rail-season.is-active[b-4ojzvrsb0j],
.rail-season.is-active:hover[b-4ojzvrsb0j],
.rail-season.is-active:focus-visible[b-4ojzvrsb0j] {
    height: 116px;
    background: var(--color-accent);
    color: var(--color-text);
}

/* --- Decades grid ------------------------------------------------------- */

.archive-decades[b-4ojzvrsb0j] {
    border-top: var(--rule) solid var(--color-text);
    padding-block: var(--space-2) var(--space-3);
}

.decade-row[b-4ojzvrsb0j] {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: var(--space-3);
    border-bottom: var(--rule) solid var(--color-divider);
}

.decade-label[b-4ojzvrsb0j] {
    font-size: 24px;
    letter-spacing: -0.02em;
    text-transform: none;
}

.decade-seasons[b-4ojzvrsb0j] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.decade-season[b-4ojzvrsb0j] {
    width: 128px;
    text-align: left;
    padding: 10px;
    border: var(--rule) solid var(--color-divider);
    background: none;
    color: var(--color-text);
    cursor: pointer;
    display: grid;
    gap: 6px;
}

.decade-season:hover[b-4ojzvrsb0j],
.decade-season:focus-visible[b-4ojzvrsb0j] {
    border-color: var(--color-text);
    background: var(--color-surface);
}

.decade-season.is-active[b-4ojzvrsb0j],
.decade-season.is-active:hover[b-4ojzvrsb0j],
.decade-season.is-active:focus-visible[b-4ojzvrsb0j] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-text);
}

.decade-season-slug[b-4ojzvrsb0j] {
    font-size: 14px;
    font-weight: 700;
}

.decade-season-sub[b-4ojzvrsb0j] {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.decade-season.is-active .decade-season-sub.unconfirmed[b-4ojzvrsb0j],
.decade-season .decade-season-sub.unconfirmed[b-4ojzvrsb0j] {
    font-weight: var(--weight-regular);
}

/* --- Table mode ---------------------------------------------------------- */

.archive-table[b-4ojzvrsb0j] {
    border-top: var(--rule) solid var(--color-text);
    padding-block: var(--space-2) var(--space-3);
    overflow-x: auto;
}

.archive-table table[b-4ojzvrsb0j] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.visually-hidden[b-4ojzvrsb0j] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.archive-table th[b-4ojzvrsb0j],
.archive-table td[b-4ojzvrsb0j] {
    text-align: left;
    padding: 10px 16px 10px 0;
    border-bottom: var(--rule) solid var(--color-divider);
}

.archive-table thead th[b-4ojzvrsb0j] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.64);
    border-bottom-color: var(--color-text);
}

.table-open[b-4ojzvrsb0j] {
    border: 0;
    background: none;
    color: inherit;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
}

.table-open:hover[b-4ojzvrsb0j],
.table-open:focus-visible[b-4ojzvrsb0j] {
    color: var(--color-accent-700);
    text-decoration: underline;
}

.archive-table tr.is-active th[b-4ojzvrsb0j],
.archive-table tr.is-active td[b-4ojzvrsb0j] {
    background: var(--color-surface);
}

.archive-table tr.is-active .table-open[b-4ojzvrsb0j] {
    color: var(--color-accent-700);
}

/* --- Season sheet ------------------------------------------------------ */

.archive-sheet[b-4ojzvrsb0j] {
    padding-block: var(--space-5) var(--space-8);
}

.sheet-head[b-4ojzvrsb0j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-3);
    border-bottom: var(--rule) solid var(--color-text);
}

.sheet-kicker[b-4ojzvrsb0j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Badge: one of the sanctioned gold uses; text on gold is black. */
.sheet-tag[b-4ojzvrsb0j] {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-accent);
    color: var(--color-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The year is the sheet's biggest element — Archivo 800. */
.sheet-year[b-4ojzvrsb0j] {
    font-size: clamp(40px, 5vw, 70px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin-top: var(--space-2);
}

.sheet-nav[b-4ojzvrsb0j] {
    display: flex;
    gap: var(--space-2);
}

.sheet-step[b-4ojzvrsb0j] {
    border: var(--rule) solid var(--color-text);
    background: none;
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    padding: 8px 14px;
    cursor: pointer;
}

.sheet-step:hover:enabled[b-4ojzvrsb0j],
.sheet-step:focus-visible:enabled[b-4ojzvrsb0j] {
    background: var(--color-accent);
}

.sheet-step:disabled[b-4ojzvrsb0j] {
    border-color: var(--color-divider);
    color: rgba(13, 13, 13, 0.45);
    cursor: default;
}

/* Compare (issue #42): same stepper metrics, filled once this season is in
   the drawer so the button states what it did. */
.sheet-compare[b-4ojzvrsb0j] {
    border: var(--rule) solid var(--color-text);
    background: none;
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
}

.sheet-compare:hover[b-4ojzvrsb0j],
.sheet-compare:focus-visible[b-4ojzvrsb0j] {
    background: var(--color-accent);
}

.sheet-compare[aria-pressed="true"][b-4ojzvrsb0j] {
    background: var(--color-accent);
}

.sheet-body[b-4ojzvrsb0j] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-6);
    margin-top: var(--space-5);
}

/* --- Photos ------------------------------------------------------------ */

.sheet-photo[b-4ojzvrsb0j] {
    display: grid;
    gap: var(--space-2);
}

/* 16/10 main season photo: 2px ink border, surface while loading. A button
   — clicking opens the lightbox (issue #23). */
.photo-frame[b-4ojzvrsb0j] {
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 16 / 10;
    border: var(--rule) solid var(--color-text);
    background: var(--color-surface);
    overflow: hidden;
    cursor: zoom-in;
}

.photo-frame img[b-4ojzvrsb0j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-caption[b-4ojzvrsb0j] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: var(--rule) solid var(--color-text);
    font-size: 13px;
    color: rgba(13, 13, 13, 0.64);
}

.caption-actions[b-4ojzvrsb0j] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.zoom-button[b-4ojzvrsb0j] {
    border: 0;
    background: none;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0;
    cursor: zoom-in;
}

.zoom-button:hover[b-4ojzvrsb0j],
.zoom-button:focus-visible[b-4ojzvrsb0j] {
    color: var(--color-accent-700);
    text-decoration: underline;
}

.photo-thumbs[b-4ojzvrsb0j] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.photo-thumb[b-4ojzvrsb0j] {
    width: 120px;
    padding: 0;
    border: var(--rule) solid var(--color-divider);
    background: none;
    cursor: pointer;
}

.photo-thumb.is-current[b-4ojzvrsb0j] {
    border-color: var(--color-accent);
}

.photo-thumb span[b-4ojzvrsb0j] {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.photo-thumb img[b-4ojzvrsb0j] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ADR 0011: the gap is content — dashed frame, plain words, contribute CTA. */
.missing-photo[b-4ojzvrsb0j] {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    border: var(--rule) dashed var(--color-divider);
    background: var(--color-surface);
    padding: var(--space-6) var(--space-5);
}

.missing-title[b-4ojzvrsb0j] {
    font-weight: var(--weight-black);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.missing-body[b-4ojzvrsb0j] {
    font-size: 16px;
    line-height: 1.5;
    max-width: 52ch;
}

/* --- Kit frames ---------------------------------------------------------- */

.sheet-kits[b-4ojzvrsb0j] {
    margin-top: var(--space-6);
}

.kits-title[b-4ojzvrsb0j] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.64);
    margin-bottom: var(--space-3);
}

.kit-frames[b-4ojzvrsb0j] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.kit-frame[b-4ojzvrsb0j] {
    display: grid;
    gap: var(--space-2);
}

/* 4/5 kit frame: divider border, surface — honestly empty until a shirt is
   photographed (ADR 0011); never an <img> without a source. */
.kit-photo[b-4ojzvrsb0j],
.kit-empty[b-4ojzvrsb0j] {
    aspect-ratio: 4 / 5;
    border: var(--rule) solid var(--color-divider);
    background: var(--color-surface);
    overflow: hidden;
}

.kit-photo img[b-4ojzvrsb0j] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kit-empty[b-4ojzvrsb0j] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

.kit-empty span[b-4ojzvrsb0j] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-unknown);
}

.kit-frame figcaption[b-4ojzvrsb0j] {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kit-notes[b-4ojzvrsb0j] {
    font-size: 12px;
    font-weight: var(--weight-regular);
    letter-spacing: normal;
    text-transform: none;
    color: rgba(13, 13, 13, 0.64);
}

/* --- Data column -------------------------------------------------------- */

.data-title[b-4ojzvrsb0j] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.64);
    padding-bottom: var(--space-2);
    border-bottom: var(--rule) solid var(--color-text);
}

.data-rows[b-4ojzvrsb0j] {
    display: grid;
}

.data-row[b-4ojzvrsb0j] {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-3);
    padding-block: 13px;
    border-bottom: var(--rule) solid var(--color-divider);
}

.data-row dt[b-4ojzvrsb0j] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.64);
}

.data-row dd[b-4ojzvrsb0j] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

/* ADR 0010: unknown reads "Por confirmar" — grey, visually distinct. */
.unconfirmed[b-4ojzvrsb0j] {
    color: var(--color-unknown);
    font-weight: var(--weight-regular);
}

.sheet-notes[b-4ojzvrsb0j] {
    font-size: 16px;
    line-height: 1.55;
    margin-top: var(--space-4);
    text-wrap: pretty;
}

.sheet-contribute[b-4ojzvrsb0j] {
    margin-top: var(--space-4);
}

@media (max-width: 900px) {
    .sheet-body[b-4ojzvrsb0j] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Archive/CompareDrawer.razor.rz.scp.css */
/* Compare drawer (issue #42) — a dark fixed surface at the foot of the page,
   the same near-black the header and the closing poster use
   (docs/design-guidelines.md: dark surfaces, purposeful and few). Gold on
   dark is --color-accent-400; body text is white. */

.compare-drawer[b-vc2zhokelr] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    background: var(--color-text);
    color: #ffffff;
    border-top: var(--rule) solid var(--color-accent);
    max-height: 46vh;
    overflow-y: auto;
}

/* Keeps the foot of the page reachable while the fixed bar is up. */
.compare-spacer[b-vc2zhokelr] {
    height: 46vh;
}

.compare-inner[b-vc2zhokelr] {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.compare-head[b-vc2zhokelr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.compare-kicker[b-vc2zhokelr] {
    color: var(--color-accent-400);
}

.compare-clear[b-vc2zhokelr] {
    background: none;
    border: none;
    padding: var(--space-1) var(--space-2);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.compare-clear:hover[b-vc2zhokelr],
.compare-clear:focus-visible[b-vc2zhokelr] {
    color: var(--color-accent-400);
}

.compare-columns[b-vc2zhokelr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.compare-season[b-vc2zhokelr] {
    display: grid;
    gap: var(--space-2);
}

.compare-season-head[b-vc2zhokelr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    padding-bottom: var(--space-1);
}

.compare-year[b-vc2zhokelr] {
    font-size: 22px;
    font-weight: var(--weight-black);
    text-transform: uppercase;
}

.compare-remove[b-vc2zhokelr] {
    background: none;
    border: none;
    padding: 0 var(--space-1);
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.compare-remove:hover[b-vc2zhokelr],
.compare-remove:focus-visible[b-vc2zhokelr] {
    color: var(--color-accent-400);
}

.compare-photo img[b-vc2zhokelr] {
    display: block;
    width: 100%;
    max-height: 132px;
    object-fit: cover;
}

/* ADR 0011: no photo is said out loud, never a silent grey frame. */
.compare-nophoto[b-vc2zhokelr] {
    padding: var(--space-3);
    border: 1px dashed rgba(255, 255, 255, 0.42);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.compare-facts[b-vc2zhokelr] {
    display: grid;
    gap: var(--space-1);
}

.compare-fact[b-vc2zhokelr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--space-2);
    font-size: 13px;
}

.compare-fact dt[b-vc2zhokelr] {
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
    align-self: center;
}

.compare-fact dd[b-vc2zhokelr] {
    font-weight: var(--weight-semibold);
}

/* The on-dark twin of the sheet's "Por confirmar" grey: receded, still
   comfortably readable (ADR 0036). */
.compare-fact dd.unconfirmed[b-vc2zhokelr] {
    color: rgba(255, 255, 255, 0.72);
    font-weight: var(--weight-regular);
}

.compare-kits[b-vc2zhokelr] {
    display: flex;
    gap: var(--space-2);
}

.compare-kit img[b-vc2zhokelr] {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: cover;
}

.compare-hint[b-vc2zhokelr] {
    align-self: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 700px) {
    .compare-drawer[b-vc2zhokelr] {
        max-height: 60vh;
    }

    .compare-spacer[b-vc2zhokelr] {
        height: 60vh;
    }

    .compare-photo img[b-vc2zhokelr] {
        max-height: 88px;
    }
}
/* /Components/Archive/Lightbox.razor.rz.scp.css */
/* Lightbox — docs/design-guidelines.md + legacy prototype: near-black
   overlay, gold rule under the title, photo contained and grayscale. */

.lightbox[b-2toymf5fms] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(13, 13, 13, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-5);
    cursor: zoom-out;
}

.lightbox:focus[b-2toymf5fms] {
    outline: none;
}

.lightbox-inner[b-2toymf5fms] {
    width: min(1100px, 100%);
}

.lightbox-head[b-2toymf5fms] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    color: #ffffff;
    padding-bottom: var(--space-2);
    border-bottom: var(--rule) solid var(--color-accent);
}

.lightbox-title[b-2toymf5fms] {
    font-weight: var(--weight-black);
    font-size: 22px;
    text-transform: uppercase;
}

.lightbox-close[b-2toymf5fms] {
    background: none;
    border: var(--rule) solid #ffffff;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
}

.lightbox-close:hover[b-2toymf5fms],
.lightbox-close:focus-visible[b-2toymf5fms] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.lightbox-frame[b-2toymf5fms] {
    height: 70vh;
    border: var(--rule) solid #ffffff;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d0d0d;
}

.lightbox-frame img[b-2toymf5fms] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
}
/* /Components/Contribute/ContributionForm.razor.rz.scp.css */
.form-grid[b-c7samolmej] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    max-width: 42rem;
}

.form-field[b-c7samolmej] {
    display: grid;
    gap: var(--space-1);
}

.form-field > span[b-c7samolmej] {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
}

.form-field-wide[b-c7samolmej] {
    grid-column: 1 / -1;
}

.form-field input[type="text"][b-c7samolmej],
.form-field select[b-c7samolmej],
.form-field textarea[b-c7samolmej] {
    border: 1px solid var(--color-text);
    background: #ffffff;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    padding: var(--space-2);
}

.field-hint[b-c7samolmej] {
    font-size: 13px;
    color: var(--color-text-muted, #555);
    margin: 0;
}

.file-previews[b-c7samolmej] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.file-preview[b-c7samolmej] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.file-preview img[b-c7samolmej] {
    object-fit: cover;
    border: 1px solid var(--color-text);
}

.file-preview button[b-c7samolmej] {
    background: none;
    border: 0;
    color: var(--color-accent);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    text-decoration: underline;
}

.form-error[b-c7samolmej] {
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
    margin: 0;
}

.form-success[b-c7samolmej] {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

@media (max-width: 600px) {
    .form-grid[b-c7samolmej] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-l7lfrdbys8] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-l7lfrdbys8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5vjgetigyx],
.components-reconnect-repeated-attempt-visible[b-5vjgetigyx],
.components-reconnect-failed-visible[b-5vjgetigyx],
.components-pause-visible[b-5vjgetigyx],
.components-resume-failed-visible[b-5vjgetigyx],
.components-rejoining-animation[b-5vjgetigyx] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5vjgetigyx],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5vjgetigyx],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5vjgetigyx],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5vjgetigyx],
#components-reconnect-modal.components-reconnect-retrying[b-5vjgetigyx],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5vjgetigyx],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5vjgetigyx],
#components-reconnect-modal.components-reconnect-failed[b-5vjgetigyx],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5vjgetigyx] {
    display: block;
}


#components-reconnect-modal[b-5vjgetigyx] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5vjgetigyx 0.5s both;
    &[open] {
        animation: components-reconnect-modal-slideUp-b-5vjgetigyx 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5vjgetigyx 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-5vjgetigyx]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-5vjgetigyx 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-5vjgetigyx {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-5vjgetigyx {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-5vjgetigyx {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-5vjgetigyx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-5vjgetigyx] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-5vjgetigyx] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-5vjgetigyx] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-5vjgetigyx] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-5vjgetigyx] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-5vjgetigyx] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5vjgetigyx 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-5vjgetigyx] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-5vjgetigyx {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Colecao.razor.rz.scp.css */
/* Collection page (issue #25, ADR 0011) — a grid of 1/1 frames on tokens
   from tokens.css. Empty categories ARE the design: labeled surface-bg
   frames with a 2px ink border that say what we seek. A category with items
   expands to a full row of 1/1 photo cards. */

.collection-count[b-et77v8xsgi] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-700);
}

.category-grid[b-et77v8xsgi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    border-top: var(--rule) solid var(--color-text);
    padding-block: var(--space-6) var(--space-8);
}

/* --- Empty frame: the honest labeled moldura ------------------------- */

.empty-frame[b-et77v8xsgi] {
    aspect-ratio: 1 / 1;
    border: var(--rule) solid var(--color-text);
    background: var(--color-surface);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.frame-label[b-et77v8xsgi] {
    font-size: clamp(20px, 2vw, 26px);
    text-transform: uppercase;
}

.frame-seek[b-et77v8xsgi] {
    font-size: 15px;
    max-width: 34ch;
}

.frame-status[b-et77v8xsgi] {
    margin-top: auto;
    font-size: 13px;
    color: rgba(13, 13, 13, 0.62);
}

.frame-cta[b-et77v8xsgi] {
    align-self: start;
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-700);
    text-decoration: none;
    border-bottom: var(--rule) solid var(--color-accent);
    padding-block: 2px;
}

.frame-cta:hover[b-et77v8xsgi],
.frame-cta:focus-visible[b-et77v8xsgi] {
    background: var(--color-accent);
    color: var(--color-text);
}

/* --- Category with items: a full row of 1/1 cards -------------------- */

.category.has-items[b-et77v8xsgi] {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.category-title[b-et77v8xsgi] {
    font-size: clamp(20px, 2vw, 26px);
    text-transform: uppercase;
}

.cards[b-et77v8xsgi] {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.card[b-et77v8xsgi] {
    display: grid;
    gap: var(--space-2);
    align-content: start;
}

.card-photo[b-et77v8xsgi] {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    border: var(--rule) solid var(--color-text);
    background: var(--color-surface);
}

/* An item without a photo shows the gap explicitly — never a bare img. */
.card-no-photo[b-et77v8xsgi] {
    aspect-ratio: 1 / 1;
    border: var(--rule) dashed var(--color-divider);
    background: var(--color-surface);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: var(--space-2);
    font-size: 14px;
}

.card-no-photo a[b-et77v8xsgi] {
    align-self: start;
    font-weight: var(--weight-semibold);
    color: var(--color-accent-700);
}

.card-title[b-et77v8xsgi] {
    font-weight: var(--weight-semibold);
    font-size: 16px;
}

.card-era[b-et77v8xsgi] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Unknown stays visibly unknown: grey "Por confirmar", never a guess. */
.card-era.is-unknown[b-et77v8xsgi] {
    color: rgba(13, 13, 13, 0.62);
    font-weight: var(--weight-regular);
}
/* /Components/Pages/ContaContribuicoes.razor.rz.scp.css */
/* My contributions (issue #37) — flush-left rows on tokens from tokens.css,
   separated by 2px divider rules (design-guidelines: rules, radius 0,
   nothing centered). Status is a short uppercase label: gold only for the
   approved state (short labels are gold's job), pending stays grey, and
   rejected inverts to ink — purposeful, small, never a large surface. */

.account-link[b-4nef131cth] {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-700);
    text-decoration: none;
    border-bottom: var(--rule) solid var(--color-accent);
    padding-block: 2px;
}

.account-link:hover[b-4nef131cth],
.account-link:focus-visible[b-4nef131cth] {
    background: var(--color-accent);
    color: var(--color-text);
}

.contributions-section[b-4nef131cth] {
    padding-block: var(--space-6) var(--space-8);
}

/* --- Empty state: the gap is content, with a way to fill it ----------- */

.contributions-empty[b-4nef131cth] {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

.empty-note[b-4nef131cth] {
    color: rgba(13, 13, 13, 0.62);
}

/* --- The list --------------------------------------------------------- */

.contribution-list[b-4nef131cth] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
}

.contribution[b-4nef131cth] {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding-block: var(--space-4);
}

.contribution + .contribution[b-4nef131cth] {
    border-top: var(--rule) solid var(--color-divider);
}

.contribution-head[b-4nef131cth] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.contribution-type[b-4nef131cth] {
    font-weight: var(--weight-black);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.contribution-status[b-4nef131cth] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 10px;
    border: var(--rule) solid var(--color-divider);
    color: rgba(13, 13, 13, 0.62);
}

.contribution-status.is-approved[b-4nef131cth] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text); /* text on gold is black, never white */
}

.contribution-status.is-rejected[b-4nef131cth] {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #ffffff;
}

.contribution-meta[b-4nef131cth] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.62);
}

.contribution-meta a[b-4nef131cth] {
    color: var(--color-accent-700);
    text-decoration: none;
    border-bottom: var(--rule) solid var(--color-accent);
}

.contribution-meta a:hover[b-4nef131cth],
.contribution-meta a:focus-visible[b-4nef131cth] {
    background: var(--color-accent);
    color: var(--color-text);
}

.contribution-message[b-4nef131cth] {
    max-width: 65ch;
}

.contribution-credit[b-4nef131cth] {
    font-size: 14px;
    color: rgba(13, 13, 13, 0.62);
}

/* Rejection notes: the moderator's words, framed as an aside off a gold
   rule — visible, honest, not an alarm. */
.contribution-notes[b-4nef131cth] {
    display: grid;
    gap: var(--space-1);
    max-width: 65ch;
    padding: var(--space-3);
    border-left: var(--rule) solid var(--color-accent);
    background: var(--color-surface);
}

.notes-label[b-4nef131cth] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-700);
}
/* /Components/Pages/Contribuir.razor.rz.scp.css */
/* Contribute page (issue #27) — tokens from wwwroot/css/tokens.css,
   layout rules from docs/design-guidelines.md: flush left, 2px rules,
   radius 0, sibling spacing via gap. */

/* --- The numbers ------------------------------------------------------- */

.numbers[b-a8qhjjhdpk] {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    padding-block: var(--space-6);
}

.stat-row[b-a8qhjjhdpk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-7);
}

.stat[b-a8qhjjhdpk] {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
}

.stat-figure[b-a8qhjjhdpk] {
    font-size: clamp(40px, 5vw, 70px);
    font-weight: var(--weight-black);
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-label[b-a8qhjjhdpk] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-700);
}

.numbers-line[b-a8qhjjhdpk] {
    max-width: 52ch;
}

/* --- Three steps ------------------------------------------------------- */

.steps-section[b-a8qhjjhdpk] {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    padding-block: var(--space-6);
}

.steps[b-a8qhjjhdpk] {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 880px;
}

.steps li[b-a8qhjjhdpk] {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: var(--rule) solid var(--color-divider);
}

.step-num[b-a8qhjjhdpk] {
    font-size: 15px;
    font-weight: var(--weight-black);
    color: var(--color-accent-700);
}

.step-text[b-a8qhjjhdpk] {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.step-text h2[b-a8qhjjhdpk] {
    font-size: 17px;
    text-transform: uppercase;
}

.step-text p[b-a8qhjjhdpk] {
    font-size: 15px;
    line-height: 1.5;
    max-width: 52ch;
}

/* --- Login-coming poster ----------------------------------------------- */

.poster[b-a8qhjjhdpk] {
    border-top: var(--rule) solid var(--color-accent);
}

.poster-inner[b-a8qhjjhdpk] {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    padding-block: var(--space-7);
}

.poster-line[b-a8qhjjhdpk] {
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: var(--weight-black);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    max-width: 24ch;
}

.poster-note[b-a8qhjjhdpk] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.72);
    max-width: 52ch;
}

.poster-alt[b-a8qhjjhdpk] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
}

.poster-alt a[b-a8qhjjhdpk] {
    color: var(--color-accent-400);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.poster-alt a:hover[b-a8qhjjhdpk],
.poster-alt a:focus-visible[b-a8qhjjhdpk] {
    text-decoration: underline;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home page (issue #20) — scoped styles on top of tokens.css/site.css.
   Palette, type scale and layout rules: docs/design-guidelines.md.
   Radius 0 everywhere, copy flush left, photos grayscale. */

/* --- Hero: full-bleed 1991-92 photo under a dark scrim ----------------- */

.hero[b-jl3s5d2weo] {
    position: relative;
    overflow: hidden;
}

.hero-photo[b-jl3s5d2weo] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.55;
}

.hero-scrim[b-jl3s5d2weo] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(13, 13, 13, 0.62) 0%,
        rgba(13, 13, 13, 0.34) 45%,
        rgba(13, 13, 13, 0.86) 100%
    );
}

.hero-inner[b-jl3s5d2weo] {
    position: relative;
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    padding-block: clamp(96px, 16vh, 180px) var(--space-7);
}

/* Hero title per the type scale: 800, clamp(42px,5.6vw,82px), lh 0.94 */
.hero-title[b-jl3s5d2weo] {
    font-size: clamp(42px, 5.6vw, 82px);
    line-height: 0.94;
    max-width: 18ch;
}

.hero-sub[b-jl3s5d2weo] {
    max-width: 58ch;
    font-size: 19px;
    color: rgba(255, 255, 255, 0.88);
}

.hero-actions[b-jl3s5d2weo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Secondary CTA on dark: outlined, same geometry as .btn */
.btn-ghost[b-jl3s5d2weo] {
    display: inline-block;
    border: var(--rule) solid #ffffff;
    background: transparent;
    color: #ffffff;
    font-weight: var(--weight-semibold);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 22px;
}

.btn-ghost:hover[b-jl3s5d2weo],
.btn-ghost:focus-visible[b-jl3s5d2weo] {
    border-color: var(--color-accent-400);
    color: var(--color-accent-400);
}

/* Archival caption: season + resolved bilingual note, clamped */
.hero-note[b-jl3s5d2weo] {
    max-width: 78ch;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-note-season[b-jl3s5d2weo] {
    font-weight: var(--weight-black);
    color: #ffffff;
}

/* --- Numbers: four computed figures, data-label treatment -------------- */

.numbers-grid[b-jl3s5d2weo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    padding-block: var(--space-6);
}

.stat[b-jl3s5d2weo] {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
    border-left: var(--rule) solid var(--color-divider);
    padding-left: var(--space-3);
}

/* Season-number scale: the figure is the block's biggest element */
.stat-value[b-jl3s5d2weo] {
    font-size: clamp(40px, 5vw, 70px);
    font-weight: var(--weight-black);
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Data label: 12px, 600, 0.08em, uppercase, grey */
.stat-label[b-jl3s5d2weo] {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.6);
}

/* --- Momentos: four highlight seasons with photos ---------------------- */

.moments-inner[b-jl3s5d2weo] {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-6) var(--space-7);
}

.moments-head[b-jl3s5d2weo] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.moments-heading[b-jl3s5d2weo] {
    display: grid;
    gap: var(--space-2);
}

.moments-heading h2[b-jl3s5d2weo] {
    font-size: clamp(24px, 2.6vw, 36px);
    text-transform: uppercase;
}

.moments-all[b-jl3s5d2weo] {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-accent-700);
    border-bottom: var(--rule) solid var(--color-accent);
    padding-bottom: 2px;
}

.moments-all:hover[b-jl3s5d2weo],
.moments-all:focus-visible[b-jl3s5d2weo] {
    color: var(--color-text);
}

.moments-grid[b-jl3s5d2weo] {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.moment-card[b-jl3s5d2weo] {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    text-decoration: none;
}

/* 4/3 card frame: 2px ink frame, surface bg while the photo loads */
.moment-frame[b-jl3s5d2weo] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: var(--rule) solid var(--color-text);
    background: var(--color-surface);
}

.moment-photo[b-jl3s5d2weo] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.moment-season[b-jl3s5d2weo] {
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: var(--weight-black);
    letter-spacing: -0.03em;
    line-height: 1;
}

.moment-line[b-jl3s5d2weo] {
    font-size: 14px;
    color: rgba(13, 13, 13, 0.6);
}

.moment-card:hover .moment-season[b-jl3s5d2weo],
.moment-card:focus-visible .moment-season[b-jl3s5d2weo] {
    color: var(--color-accent-700);
}

.moment-card:hover .moment-frame[b-jl3s5d2weo],
.moment-card:focus-visible .moment-frame[b-jl3s5d2weo] {
    border-color: var(--color-accent);
}

/* Empty strip: the gap says so and recruits (ADR 0007) */
.moments-empty[b-jl3s5d2weo] {
    border: var(--rule) dashed var(--color-divider);
    padding: var(--space-5);
    max-width: 65ch;
}

.moments-empty a[b-jl3s5d2weo] {
    color: var(--color-accent-700);
    font-weight: var(--weight-semibold);
}

/* --- Closing poster: black, gold accent line, contribute pitch --------- */

.poster-inner[b-jl3s5d2weo] {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    padding-block: var(--space-8);
}

.poster-inner[b-jl3s5d2weo]::before {
    content: "";
    width: 96px;
    height: 4px;
    background: var(--color-accent);
}

.poster-title[b-jl3s5d2weo] {
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.05;
    max-width: 28ch;
}

.poster-gap[b-jl3s5d2weo] {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.72);
}

/* --- Utilities --------------------------------------------------------- */

/* Keeps "Cores do Espinho" in the page's h1 accessible name while the
   visible hero shows the display title. */
.sr-only[b-jl3s5d2weo] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 960px) {
    .numbers-grid[b-jl3s5d2weo],
    .moments-grid[b-jl3s5d2weo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .moments-grid[b-jl3s5d2weo] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Momentos.razor.rz.scp.css */
/* Momentos rows — docs/design-guidelines.md: 2px rules, radius 0, copy
   flush left, photos grayscale in 16/10 frames. Layout per the legacy IA:
   year + tag | photograph | competition + notes. */

.moments-list[b-llrphnxza1] {
    display: grid;
    padding-block: 0 var(--space-8);
}

.moment-row[b-llrphnxza1] {
    display: grid;
    grid-template-columns: 200px 300px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    padding-block: var(--space-4);
    border-top: var(--rule) solid var(--color-divider);
    color: inherit;
    text-decoration: none;
}

/* The list opens with a section rule in ink; rows between use the divider. */
.moment-row:first-child[b-llrphnxza1] {
    border-top-color: var(--color-text);
}

.moment-season[b-llrphnxza1] {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

/* The year is the row's biggest element — Archivo 800. */
.moment-slug[b-llrphnxza1] {
    font-weight: var(--weight-black);
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1;
    letter-spacing: -0.02em;
}

.moment-row:hover .moment-slug[b-llrphnxza1],
.moment-row:focus-visible .moment-slug[b-llrphnxza1] {
    color: var(--color-accent-700);
}

/* Badge: one of the sanctioned gold uses; text on gold is black. */
.moment-tag[b-llrphnxza1] {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-accent);
    color: var(--color-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* 16/10 season-photo frame: 2px ink border, surface while loading. */
.moment-photo[b-llrphnxza1] {
    display: block;
    aspect-ratio: 16 / 10;
    border: var(--rule) solid var(--color-text);
    background: var(--color-surface);
    overflow: hidden;
}

.moment-photo img[b-llrphnxza1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moment-facts[b-llrphnxza1] {
    display: grid;
    gap: var(--space-2);
    align-content: start;
}

/* Data-label style: small, semibold, uppercase, grey. */
.moment-competition[b-llrphnxza1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.64);
}

/* ADR 0010: unknown reads "Por confirmar" — grey, visually distinct. */
.unconfirmed[b-llrphnxza1] {
    color: var(--color-unknown);
    font-weight: var(--weight-regular);
}

.moment-notes[b-llrphnxza1] {
    font-size: 16px;
    line-height: 1.55;
    max-width: 70ch;
    text-wrap: pretty;
}

@media (max-width: 820px) {
    .moment-row[b-llrphnxza1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .moment-photo[b-llrphnxza1] {
        max-width: 420px;
        width: 100%;
    }
}
/* /Components/Pages/Sobre.razor.rz.scp.css */
/* Sobre page (issue #26) — scoped styles on top of the shared shell.
   Tokens only (tokens.css); rules per docs/design-guidelines.md:
   2px rules, radius 0, copy flush left, 1/1 crest frames on surface. */

.sobre-block[b-1jz6u95rvx] {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    padding-block: var(--space-6) var(--space-7);
}

.sobre-block h2[b-1jz6u95rvx] {
    font-size: clamp(24px, 2.4vw, 34px);
    text-transform: uppercase;
}

.sobre-block > p:not(.kicker)[b-1jz6u95rvx] {
    max-width: 65ch;
}

/* --- Project links ------------------------------------------------------ */

.sobre-links[b-1jz6u95rvx] {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}

.sobre-links a[b-1jz6u95rvx] {
    color: var(--color-accent-700);
    font-weight: var(--weight-semibold);
    font-size: 15px;
    text-decoration: none;
}

.sobre-links a:hover[b-1jz6u95rvx],
.sobre-links a:focus-visible[b-1jz6u95rvx] {
    text-decoration: underline;
}

/* --- Crest explainer ---------------------------------------------------- */

.crest-explainer[b-1jz6u95rvx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    width: 100%;
}

@media (min-width: 720px) {
    .crest-explainer[b-1jz6u95rvx] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }
}

.crest-figure[b-1jz6u95rvx] {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    max-width: 270px;
}

.crest-figure img[b-1jz6u95rvx] {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border: var(--rule) solid var(--color-text);
    background: var(--color-surface);
    padding: var(--space-4);
}

.crest-figure figcaption[b-1jz6u95rvx] {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--color-accent-700);
}

.crest-explainer > p[b-1jz6u95rvx] {
    max-width: 65ch;
}

/* --- Crest evolution: labeled empty frames (ADR 0011) ------------------- */

.crest-frames[b-1jz6u95rvx] {
    list-style: none;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (min-width: 560px) {
    .crest-frames[b-1jz6u95rvx] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .crest-frames[b-1jz6u95rvx] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.crest-frame[b-1jz6u95rvx] {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    text-decoration: none;
}

.crest-frame-box[b-1jz6u95rvx] {
    width: 100%;
    aspect-ratio: 1;
    border: var(--rule) solid var(--color-divider);
    background: var(--color-surface);
}

.crest-frame:hover .crest-frame-box[b-1jz6u95rvx],
.crest-frame:focus-visible .crest-frame-box[b-1jz6u95rvx] {
    border-color: var(--color-accent);
}

.crest-frame-period[b-1jz6u95rvx] {
    font-weight: var(--weight-black);
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.crest-frame-hint[b-1jz6u95rvx] {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--color-accent-700);
}