/* /Components/Account/Pages/Manage/Index.razor.rz.scp.css */
.account-sections[b-wq4bhxmlki] {
    max-width: 44rem;
}

.account-section[b-wq4bhxmlki] {
    padding: var(--o-s-5) 0;
    border-bottom: 1px solid var(--o-line);
}

    .account-section:last-child[b-wq4bhxmlki] {
        border-bottom: 0;
    }

.delete-account summary[b-wq4bhxmlki] {
    color: var(--o-danger-ink);
    cursor: pointer;
    font-weight: 600;
}
/* /Components/Layout/SpotifyUsageNav.razor.rz.scp.css */
/* The usage gauge where it lives in the rail. It used to be white-on-navy against the template's
   sidebar gradient; now it takes the rail's own ink so it is right in both themes. */

.usage-nav[b-vo1f5nq6w8] {
    display: flex;
    align-items: center;
    gap: var(--o-s-3);
    padding: var(--o-s-3);
    border: 1px solid var(--o-line);
    border-radius: var(--o-r-sm);
    background: var(--o-surface);
    color: var(--o-ink-2);
    transition: border-color var(--o-t-base) var(--o-ease);
}

    .usage-nav:hover[b-vo1f5nq6w8] {
        border-color: var(--o-line-strong);
    }

.usage-nav-text[b-vo1f5nq6w8] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.usage-nav-title[b-vo1f5nq6w8] {
    font-size: var(--o-text-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--o-ink-3);
}

.usage-nav-caption[b-vo1f5nq6w8] {
    font-size: var(--o-text-xs);
    color: var(--o-ink-2);
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
/* The feedback page: your own reports, and — for an operator — the whole queue. */

.o-fb-card[b-c992th3dhx] {
    position: relative;
    max-width: 62rem;
    margin-bottom: var(--o-s-4);
    padding: var(--o-s-4) var(--o-s-5);
    border: 1px solid var(--o-line);
    border-radius: var(--o-r);
    background: var(--o-surface);
    backdrop-filter: blur(var(--o-glass-blur));
    box-shadow: var(--o-shadow);
}

.o-fb-head[b-c992th3dhx] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--o-s-2);
}

    .o-fb-head h3[b-c992th3dhx] {
        margin: 0;
        font-size: var(--o-text-lg);
        color: var(--o-ink);
    }

.o-fb-meta[b-c992th3dhx] {
    margin: var(--o-s-1) 0 var(--o-s-3);
    font-size: var(--o-text-xs);
    color: var(--o-ink-3);
}

.o-fb-body[b-c992th3dhx] {
    margin: 0 0 var(--o-s-3);
    color: var(--o-ink-2);
    white-space: pre-wrap;      /* the person's own line breaks are part of what they wrote */
    overflow-wrap: anywhere;
}

/* ── Triage ─────────────────────────────────────────────────────────────────────────────────── */

.o-fb-filters[b-c992th3dhx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o-s-2);
    margin-bottom: var(--o-s-4);
}

.o-fb-filter input[b-c992th3dhx] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.o-fb-filter span[b-c992th3dhx] {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3rem .7rem;
    border: 1px solid var(--o-line);
    border-radius: var(--o-r-pill);
    background: var(--o-surface);
    color: var(--o-ink-3);
    font-size: var(--o-text-xs);
    cursor: pointer;
    transition: border-color var(--o-t-fast) var(--o-ease),
                background-color var(--o-t-fast) var(--o-ease),
                color var(--o-t-fast) var(--o-ease);
}

/* A filter that is ON is lit. The default is everything on, so what this mostly shows is what has
   been switched OFF — which is the thing that otherwise makes a queue look mysteriously empty. */
.o-fb-filter input:checked + span[b-c992th3dhx] {
    border-color: var(--o-line-strong);
    background: var(--o-gold-wash);
    color: var(--o-gold-ink);
}

.o-fb-filter input:focus-visible + span[b-c992th3dhx] {
    outline: 2px solid var(--o-gold);
    outline-offset: 2px;
}

.o-fb-filter em[b-c992th3dhx] {
    font-style: normal;
    opacity: .65;
}

.o-fb-triage[b-c992th3dhx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o-s-2);
    margin-bottom: var(--o-s-3);
}

    .o-fb-triage .form-label[b-c992th3dhx] {
        margin: 0;
        font-size: var(--o-text-xs);
    }

    .o-fb-triage .form-select[b-c992th3dhx] {
        width: auto;
        min-width: 9rem;
    }

.o-fb-context[b-c992th3dhx] {
    margin-bottom: var(--o-s-3);
    font-size: var(--o-text-xs);
}

    .o-fb-context > summary[b-c992th3dhx] {
        cursor: pointer;
        color: var(--o-ink-3);
    }

    .o-fb-context > summary:hover[b-c992th3dhx] {
        color: var(--o-gold-ink);
    }

    .o-fb-context dl[b-c992th3dhx] {
        display: grid;
        grid-template-columns: minmax(6rem, auto) 1fr;
        gap: .25rem var(--o-s-3);
        margin: var(--o-s-2) 0 0;
        padding: var(--o-s-3);
        border-radius: var(--o-r-sm);
        background: var(--o-inset);
    }

    .o-fb-context dt[b-c992th3dhx] {
        color: var(--o-ink-3);
    }

    .o-fb-context dd[b-c992th3dhx] {
        margin: 0;
        color: var(--o-ink-2);
        font-family: var(--o-font-data);
        overflow-wrap: anywhere;
    }

.o-fb-withdraw[b-c992th3dhx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o-s-2);
    margin: var(--o-s-3) 0 0;
    color: var(--o-danger-ink);
}
/* /Components/Pages/GenreChips.razor.rz.scp.css */
.chips[b-otiyjoiw6z] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--o-s-1);
    min-height: 1.9rem;
}

.chips-empty[b-otiyjoiw6z] {
    color: var(--o-ink-3);
    font-size: var(--o-text-sm);
    min-height: 1.9rem;
    display: flex;
    align-items: center;
}

.chip[b-otiyjoiw6z] {
    display: inline-flex;
    align-items: center;
    gap: var(--o-s-1);
    padding: .15rem .25rem .15rem .6rem;
    border-radius: var(--o-r-pill);
    background: var(--o-gold-wash);
    border: 1px solid var(--o-line-strong);
    color: var(--o-ink);
    font-size: var(--o-text-sm);
    transition: background-color var(--o-t-fast) var(--o-ease),
                border-color var(--o-t-fast) var(--o-ease);
}

    .chip:hover[b-otiyjoiw6z] {
        background: var(--o-gold-wash-2);
    }

/* A genre the catalogue could not place. Orange, which is the warning colour everywhere else —
   it was a second shade of the primary before, and read as just another chip. */
.chip-unknown[b-otiyjoiw6z] {
    background: rgba(var(--o-warning-rgb), .10);
    border-color: rgba(var(--o-warning-rgb), .38);
}

.chip-count[b-otiyjoiw6z] {
    color: var(--o-ink-3);
    font-family: var(--o-font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--o-text-xs);
}

.chip-remove[b-otiyjoiw6z] {
    border: 0;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .3rem;
    border-radius: var(--o-r-pill);
    color: var(--o-ink-3);
    cursor: pointer;
    transition: color var(--o-t-fast) var(--o-ease);
}

    .chip-remove:hover[b-otiyjoiw6z] {
        color: var(--o-danger-ink);
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* The landing page. The shell, the hero grid and the Lyra panel are in css/orpheus.css because
   other pages reuse them; what is here is only ever on this page. */

/* ── How it works ──────────────────────────────────────────────────────────────────────────────
   A counter rather than a real <ol> marker, so the number can be the ceremonial face in gold and
   sit in its own column. list-style is off, but the element stays an <ol>: the order is meaning,
   not styling, and a screen reader should still say "3 items". */

.o-steps[b-iaul14w91d] {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--o-s-5);
    max-width: 46ch;
}

    .o-steps li[b-iaul14w91d] {
        counter-increment: step;
        position: relative;
        padding-left: 2.6rem;
        margin-bottom: var(--o-s-4);
        color: var(--o-ink-2);
    }

    .o-steps li[b-iaul14w91d]::before {
        content: counter(step);
        position: absolute;
        left: 0;
        top: -.12em;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        border: 1px solid var(--o-line-strong);
        background: var(--o-gold-wash);
        color: var(--o-gold-ink);
        font-family: var(--o-font-display);
        font-size: .95rem;
        font-weight: 700;
        line-height: 1;
    }

.o-cta[b-iaul14w91d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o-s-3);
    margin: var(--o-s-5) 0 var(--o-s-2);
}

/* ── What Orpheus does not do ──────────────────────────────────────────────────────────────────
   Two columns where there is room. These are the reassurances someone reads before signing up, so
   they get their own section below the fold rather than being squeezed into a sidebar where the
   last two were previously invisible on anything narrower than a laptop. */

.o-limits[b-iaul14w91d] {
    margin-bottom: var(--o-s-6);
}

.o-limits-list[b-iaul14w91d] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--o-s-3) var(--o-s-6);
    max-width: 68rem;
    color: var(--o-ink-2);
    font-size: var(--o-text-sm);
}

@media (min-width: 720px) {
    .o-limits-list[b-iaul14w91d] {
        grid-template-columns: 1fr 1fr;
    }
}

.o-limits-list li[b-iaul14w91d] {
    position: relative;
    padding-left: var(--o-s-5);
}

/* A gold tick. Drawn rather than a character, so it is the same weight as the icon set and does
   not depend on a font having the glyph. */
.o-limits-list li[b-iaul14w91d]::before {
    content: '';
    position: absolute;
    left: 0;
    top: .42em;
    width: .72rem;
    height: .42rem;
    border-left: 1.6px solid var(--o-gold);
    border-bottom: 1.6px solid var(--o-gold);
    transform: rotate(-45deg);
}
/* /Components/Pages/RotationEditor.razor.rz.scp.css */
.lead-muted[b-4lyc1b62xb] {
    color: var(--o-ink-2);
    max-width: 62rem;
    margin-bottom: var(--o-s-5);
}

/* Bootstrap sizes a bare <legend> like a heading; this one is a field label. */
.mode-legend[b-4lyc1b62xb] {
    font-size: 1rem;
    float: none;
    color: var(--o-ink-2);
}

.mode-options[b-4lyc1b62xb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--o-s-3);
}

.mode-option[b-4lyc1b62xb] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: var(--o-s-3) var(--o-s-4);
    border: 1px solid var(--o-line);
    border-radius: var(--o-r-sm);
    background: var(--o-surface);
    cursor: pointer;
    position: relative;
    transition: border-color var(--o-t-fast) var(--o-ease),
                background-color var(--o-t-fast) var(--o-ease);
}

    .mode-option:hover[b-4lyc1b62xb] {
        border-color: var(--o-line-strong);
    }

    .mode-option.selected[b-4lyc1b62xb] {
        border-color: var(--o-gold);
        box-shadow: 0 0 0 1px var(--o-gold) inset;
        background: var(--o-gold-wash);
    }

    .mode-option input[b-4lyc1b62xb] {
        position: absolute;
        top: .85rem;
        right: .85rem;
    }

.mode-title[b-4lyc1b62xb] {
    font-weight: 600;
    color: var(--o-ink);
    padding-right: 1.5rem;
}

.mode-option.selected .mode-title[b-4lyc1b62xb] {
    color: var(--o-gold-ink);
}

.mode-summary[b-4lyc1b62xb] {
    color: var(--o-ink-2);
    font-size: var(--o-text-sm);
}

/* The filter section headings. Same inscriptional voice as .o-label, kept here because the
   markup uses this class and the two should not drift apart by being renamed. */
.filter-group[b-4lyc1b62xb] {
    font-size: var(--o-text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--o-tracking-label);
    color: var(--o-gold-ink);
    border-top: 1px solid var(--o-line);
    padding-top: var(--o-s-4);
    margin: var(--o-s-5) 0 var(--o-s-3);
}

.eligible[b-4lyc1b62xb] {
    font-size: .95rem;
    color: var(--o-ink);
}

.spread[b-4lyc1b62xb] {
    display: block;
    color: var(--o-ink-3);
    font-family: var(--o-font-data);
    font-variant-numeric: tabular-nums;
}

/* The save bar follows you down a long form, so it has to be legible over whatever it is
   covering. 88% plus a blur was not enough — the filter checkboxes underneath showed through it
   clearly enough to read, which makes the bar look like a rendering fault rather than a surface.
   Opaque, with the blur kept for the few pixels either side of the border, and a soft shadow
   upwards so the edge reads as "content continues under here" rather than as a division. */
.action-bar[b-4lyc1b62xb] {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o-s-2);
    padding: var(--o-s-3) 0;
    margin-top: var(--o-s-4);
    background: var(--o-bg);
    backdrop-filter: blur(var(--o-glass-blur));
    border-top: 1px solid var(--o-line-strong);
    box-shadow: 0 -12px 24px -12px rgba(0, 0, 0, .55);
    z-index: 5;
}

.field[b-4lyc1b62xb] {
    margin-bottom: var(--o-s-4);
}

.sound-range[b-4lyc1b62xb] {
    max-width: 24rem;
}

/* The "rebuild now?" prompt after saving: a dialog over a dimmed page, sized for a phone as well. */
.rebuild-backdrop[b-4lyc1b62xb] {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(4, 3, 8, .62);
    backdrop-filter: blur(3px);
}

.rebuild-dialog[b-4lyc1b62xb] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1071;
    width: min(30rem, calc(100vw - 2rem));
    transform: translate(-50%, -50%);
    padding: var(--o-s-5) var(--o-s-5) var(--o-s-4);
    border-radius: var(--o-r);
    border: 1px solid var(--o-line-strong);
    background: var(--o-surface-solid);
    box-shadow: var(--o-shadow-lg);
}
/* /Components/Pages/Rotations.razor.rz.scp.css */
/* A rotation is the most important object in the app, so its card is the one that gets the
   treatment: glass over the backdrop, a gold hairline, and a gold spine down the leading edge
   that lights up on hover. Every colour is a token — this file had eight hard-coded light-theme
   hex values and would have been unreadable in Obsidian. */

.rotation-list[b-kvyk3o92e7] {
    display: grid;
    gap: var(--o-s-3);
    max-width: 62rem;
}

.rotation-card[b-kvyk3o92e7] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--o-s-3);
    padding: var(--o-s-4) var(--o-s-5);
    border: 1px solid var(--o-line);
    border-radius: var(--o-r);
    background: var(--o-surface);
    backdrop-filter: blur(var(--o-glass-blur));
    box-shadow: var(--o-shadow);
    overflow: hidden;
}

/* The spine. Present on every card at low opacity, full on hover — so the hover is the same
   object brightening rather than a new element appearing. */
.rotation-card[b-kvyk3o92e7]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--o-gold), transparent);
    opacity: .35;
    transition: opacity var(--o-t-base) var(--o-ease);
}

.rotation-card:hover[b-kvyk3o92e7]::before {
    opacity: 1;
}

/* Paused: the card recedes rather than changing colour. A paused rotation is not a warning. */
.rotation-card.is-paused[b-kvyk3o92e7] {
    background: transparent;
    border-style: dashed;
}

    .rotation-card.is-paused[b-kvyk3o92e7]::before {
        opacity: .12;
    }

.rotation-card h2 a[b-kvyk3o92e7] {
    text-decoration: none;
    color: var(--o-ink);
}

    .rotation-card h2 a:hover[b-kvyk3o92e7] {
        color: var(--o-gold-ink);
    }

.rotation-facts[b-kvyk3o92e7] {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem var(--o-s-4);
    color: var(--o-ink-2);
    font-size: var(--o-text-sm);
}

/* Tabular figures, but NOT the telemetry face. This row is half readout and half sentence — "100
   tracks" and "daily at 07:00" beside "one playlist, refreshed" and "no filters" — and setting the
   whole thing in Chakra Petch put the prose in a squared-off equipment font, which is exactly what
   tokens.css says that face is not for. The numerals still line up between cards, which is the
   part that was actually worth having. */
.rotation-facts > span[b-kvyk3o92e7] {
    font-variant-numeric: tabular-nums;
}

.rotation-last[b-kvyk3o92e7] {
    margin-top: var(--o-s-2);
}

.rotation-actions[b-kvyk3o92e7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o-s-2);
}

/* Destructive confirmation and the removed-playlist notice: the same shape as an alert, so they
   are recognisable as the same kind of thing, but scoped to the card they belong to. */
.rotation-confirm[b-kvyk3o92e7] {
    flex-basis: 100%;
    padding: var(--o-s-2) var(--o-s-3);
    border-left: 3px solid var(--o-danger);
    border-radius: var(--o-r-xs);
    background: rgba(var(--o-danger-rgb), .10);
    color: var(--o-danger-ink);
}

.rotation-removed[b-kvyk3o92e7] {
    flex-basis: 100%;
    padding: var(--o-s-2) var(--o-s-3);
    border-left: 3px solid var(--o-warning);
    border-radius: var(--o-r-xs);
    background: rgba(var(--o-warning-rgb), .10);
    color: var(--o-warning-ink);
}

.empty-state[b-kvyk3o92e7] {
    max-width: 62rem;
}
/* /Components/Pages/Runs.razor.rz.scp.css */
/* Column widths for the run table.

   Without these the browser's automatic layout hands the space to whichever column shouts loudest,
   and on this table that is Outcome: "skipped — playlist removed from your library" is a
   forty-five character badge, and it took 324px of a 1037px table. What it took, Detail lost —
   that column collapsed to 80px, so one run whose message ran to a couple of sentences wrapped
   into a cell 558 PIXELS TALL, leaving a blank chasm between two ordinary 59px rows. Measured on
   the real history, not guessed.

   The table already scrolls sideways inside .table-responsive, so giving columns honest widths
   costs nothing: it moves the overflow from the row heights, where it is a rendering fault, to the
   horizontal scroll, where it is the design. */

/* When — a timestamp must never wrap; a date on two lines is unreadable. */
.table th:nth-child(1)[b-trl9cua9i7],
.table td:nth-child(1)[b-trl9cua9i7] {
    white-space: nowrap;
}

.table th:nth-child(2)[b-trl9cua9i7],
.table td:nth-child(2)[b-trl9cua9i7] {
    min-width: 9rem;
}

/* Outcome — most are one word ("ok", "failed"). The half-dozen skipped-* labels are sentences, so
   the badge is allowed to wrap onto a second line rather than push every other column aside. */
.table td:nth-child(3) .badge[b-trl9cua9i7] {
    max-width: 13rem;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

/* The three figures. Narrow, fixed, and never wrapped — they are what the eye runs down. */
.table th:nth-child(4)[b-trl9cua9i7],
.table td:nth-child(4)[b-trl9cua9i7],
.table th:nth-child(5)[b-trl9cua9i7],
.table td:nth-child(5)[b-trl9cua9i7],
.table th:nth-child(6)[b-trl9cua9i7],
.table td:nth-child(6)[b-trl9cua9i7] {
    white-space: nowrap;
    width: 1%;
}

/* Detail — the column that was being starved. A real measure, so a long message reads as a
   paragraph instead of a column of single words. */
.table th:nth-child(7)[b-trl9cua9i7],
.table td:nth-child(7)[b-trl9cua9i7] {
    min-width: 22rem;
}
/* /Components/Pages/Sources.razor.rz.scp.css */
/* The delete confirmation, directly under the row it is about — the same treatment as a rotation's. */
.source-confirm[b-f86nctoqfx] {
    border-left: 3px solid var(--o-danger);
    border-radius: var(--o-r-xs);
    background: rgba(var(--o-danger-rgb), .10);
    color: var(--o-danger-ink);
}
/* /Components/Pages/SpotifySetup.razor.rz.scp.css */
.field-table td[b-jvdi31fhi2] {
    vertical-align: top;
    font-size: .9rem;
}

    .field-table td:first-child[b-jvdi31fhi2] {
        white-space: nowrap;
        width: 1%;
    }

@media (max-width: 767.98px) {
    .field-table td:first-child[b-jvdi31fhi2] {
        white-space: normal;
    }
}

.req[b-jvdi31fhi2] {
    display: inline-block;
    font-size: var(--o-text-2xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--o-danger-ink);
    margin-left: .25rem;
}

.copy-row[b-jvdi31fhi2] {
    max-width: 30rem;
}

/* ── The setup checklist ──────────────────────────────────────────────────────────────────────────
   A large tick box beside each step, sized to the section headings (1.25rem type), per the owner's request.
   Ticking collapses the step and opens the next — see wwwroot/orpheus.js. */
.setup-steps[b-jvdi31fhi2] {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 68rem;
}

.setup-step[b-jvdi31fhi2] {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    align-items: start;
    padding: var(--o-s-4) 0;
    border-bottom: 1px solid var(--o-line);
    transition: opacity var(--o-t-base) var(--o-ease);
}

.step-done[b-jvdi31fhi2] {
    width: 1.6rem;
    height: 1.6rem;
    margin-top: .05rem;
    cursor: pointer;
    accent-color: var(--o-gold);
}

.step-title[b-jvdi31fhi2] {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: var(--o-ink);
    cursor: pointer;
}

/* A finished step recedes rather than disappearing: it is still there to go back to. */
.setup-step.is-done[b-jvdi31fhi2] {
    opacity: .62;
}

.setup-step.is-done .step-title[b-jvdi31fhi2] {
    color: var(--o-ink-2);
}

    .setup-step.is-done .step-title[b-jvdi31fhi2]::after {
        content: "  ✓ done";
        font-size: var(--o-text-sm);
        color: var(--o-success-ink);
        font-weight: 600;
    }

.step-body[b-jvdi31fhi2] {
    padding-top: var(--o-s-3);
}

.guide-reference[b-jvdi31fhi2] {
    max-width: 68rem;
    border: 1px solid var(--o-line);
    border-radius: var(--o-r-sm);
    background: var(--o-surface);
    padding: var(--o-s-4) var(--o-s-5);
}

    .guide-reference > summary[b-jvdi31fhi2] {
        cursor: pointer;
        color: var(--o-ink-2);
    }

    .guide-reference > summary:hover[b-jvdi31fhi2] {
        color: var(--o-gold-ink);
    }

/* The larger usage gauge beside its explanation; stacked on a phone. */
.usage-detail[b-jvdi31fhi2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--o-s-2) var(--o-s-5);
    max-width: 40rem;
}

    .usage-detail > div[b-jvdi31fhi2] {
        flex: 1 1 14rem;
    }
/* /Components/Shared/FilterRow.razor.rz.scp.css */
.filter-row[b-by433jw1sl] {
    border-bottom: 1px solid var(--o-line-soft);
    padding: var(--o-s-2) 0;
}

    .filter-row:last-child[b-by433jw1sl] {
        border-bottom: 0;
    }

.filter-head[b-by433jw1sl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .15rem var(--o-s-2);
}

.filter-check[b-by433jw1sl] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex: none;
}

.filter-label[b-by433jw1sl] {
    font-weight: 500;
    color: var(--o-ink);
    cursor: pointer;
    margin: 0;
}

/* A ticked filter is doing something to the draw, so its label goes gold — the row reads as
   active at a glance instead of having to be scanned for a tick. :has() rather than a class,
   because the checkbox is the state and nothing else should have to be kept in step with it. */
.filter-row:has(.filter-check:checked) .filter-label[b-by433jw1sl] {
    color: var(--o-gold-ink);
    font-weight: 600;
}

.filter-note[b-by433jw1sl] {
    color: var(--o-ink-3);
    font-size: var(--o-text-sm);
}

.filter-body[b-by433jw1sl] {
    margin: var(--o-s-3) 0 var(--o-s-1) 1.7rem;
    max-width: 40rem;
}
/* /Components/Shared/HelpTip.razor.rz.scp.css */
.help-tip[b-nzd62oy4ja] {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: .35rem;
    cursor: help;
    outline: none;
}

.help-mark[b-nzd62oy4ja] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 1px solid var(--o-line-strong);
    color: var(--o-ink-3);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    background: var(--o-surface-2);
    transition: border-color var(--o-t-fast) var(--o-ease),
                color var(--o-t-fast) var(--o-ease),
                background-color var(--o-t-fast) var(--o-ease);
}

.help-tip:hover .help-mark[b-nzd62oy4ja],
.help-tip:focus .help-mark[b-nzd62oy4ja] {
    border-color: var(--o-gold);
    color: var(--o-gold-ink);
    background: var(--o-gold-wash);
}

.help-tip:focus-visible .help-mark[b-nzd62oy4ja] {
    box-shadow: 0 0 0 3px rgba(var(--o-gold-rgb), .3);
}

/* The bubble is always the DARK treatment, in both themes. A tooltip is a surface that floats
   over the page and has to be read instantly; inverting it is how it stays distinct from the
   form it is explaining, and it is the one place where Marble deliberately does not go light. */
.help-bubble[b-nzd62oy4ja] {
    position: absolute;
    top: calc(100% + .45rem);
    left: -.5rem;
    z-index: 1060;
    width: max-content;
    max-width: min(22rem, 80vw);
    padding: .6rem .75rem;
    border-radius: var(--o-r-sm);
    border: 1px solid rgba(232, 180, 74, .28);
    background: #15121C;
    color: #E8E4EE;
    font-size: var(--o-text-sm);
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
    /* display:none, not visibility:hidden. A hidden-but-laid-out bubble still takes up space, and near the right edge
       that widened the page: on a phone the rotation editor was 591px wide in a 375px screen and scrolled sideways
       (QA, 2026-09-13). aria-describedby still reads hidden content, so screen readers lose nothing. */
    display: none;
    pointer-events: none;
}

    .help-bubble[b-nzd62oy4ja]::before {
        content: "";
        position: absolute;
        top: -.35rem;
        left: .8rem;
        border: .35rem solid transparent;
        border-top: 0;
        border-bottom-color: #15121C;
    }

.help-tip:hover .help-bubble[b-nzd62oy4ja],
.help-tip:focus .help-bubble[b-nzd62oy4ja],
.help-tip:focus-within .help-bubble[b-nzd62oy4ja] {
    display: block;
}

/* On a phone a bubble beside a "?" near the edge runs off the screen, so an open one becomes a panel along the
   bottom of the screen instead: always fully visible, never wider than the screen. */
@media (max-width: 640px) {
    .help-bubble[b-nzd62oy4ja] {
        position: fixed;
        top: auto;
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        width: auto;
        max-width: none;
    }

        .help-bubble[b-nzd62oy4ja]::before {
            display: none;
        }
}
/* /Components/Shared/SpotifyUsageRing.razor.rz.scp.css */
.usage-ring[b-b3rp00yzwj] {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
}

    .usage-ring:hover[b-b3rp00yzwj] {
        color: inherit;
    }

    .usage-ring:focus-visible[b-b3rp00yzwj] {
        outline: 2px solid var(--o-gold);
        outline-offset: 3px;
    }

    .usage-ring svg[b-b3rp00yzwj] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

.usage-track[b-b3rp00yzwj] {
    fill: none;
    stroke: currentColor;
    stroke-opacity: .2;
    stroke-width: 4;
}

.usage-fill[b-b3rp00yzwj] {
    fill: none;
    stroke-width: 4;
    transition: stroke-dasharray .6s ease, stroke .3s ease;
}

/* Green below half used, yellow to three quarters, orange to the limit, red at it (UsageGauges). */
.usage-green .usage-fill[b-b3rp00yzwj] { stroke: var(--o-band-ok); }
.usage-yellow .usage-fill[b-b3rp00yzwj] { stroke: var(--o-band-half); }
.usage-orange .usage-fill[b-b3rp00yzwj] { stroke: var(--o-band-most); }
.usage-red .usage-fill[b-b3rp00yzwj] { stroke: var(--o-band-full); }

/* At the limit nothing is left, so there is no arc to colour: the empty track itself turns red. */
.usage-red .usage-track[b-b3rp00yzwj] {
    stroke: var(--o-band-full);
    stroke-opacity: .45;
}

.usage-center[b-b3rp00yzwj] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
}

/* A countdown is the clearest case there is for the telemetry face: it is a readout, and it
   changes every second, so digits that do not shift the ones beside them matter here more than
   anywhere else in the app. */
.usage-time[b-b3rp00yzwj] {
    font-family: var(--o-font-data);
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--o-ink);
    white-space: nowrap;
}

.usage-label[b-b3rp00yzwj] {
    font-size: .58rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--o-ink-3);
    white-space: nowrap;
}

.usage-lg[b-b3rp00yzwj] {
    width: 7.5rem;
    height: 7.5rem;
}

    .usage-lg .usage-time[b-b3rp00yzwj] {
        font-size: 1.25rem;
    }

    .usage-lg .usage-label[b-b3rp00yzwj] {
        font-size: .8rem;
    }

@media (prefers-reduced-motion: reduce) {
    .usage-fill[b-b3rp00yzwj] {
        transition: none;
    }
}
/* /Components/Shared/Thread.razor.rz.scp.css */
/* One ticket's conversation.

   These live here rather than in Feedback.razor.css because Blazor's scoped CSS stamps its
   attribute only on the elements a component itself renders — a parent's stylesheet does not reach
   into a child component without ::deep, and reaching in that way couples the two files together
   for no gain. The thread's styles belong to the thread. */


.o-fb-thread[b-ihd51b1n0p] {
    border-top: 1px solid var(--o-line);
    padding-top: var(--o-s-3);
}

.o-fb-reply[b-ihd51b1n0p] {
    max-width: 44rem;
    margin-bottom: var(--o-s-3);
    padding: var(--o-s-2) var(--o-s-3);
    border-radius: var(--o-r-sm);
    border: 1px solid var(--o-line-soft);
}

/* Side, colour AND a badge. Any one of the three alone fails somebody: colour for a colourblind
   reader, side when two consecutive messages come from the same author. */
.o-fb-reply.is-author[b-ihd51b1n0p] {
    background: var(--o-surface-2);
}

.o-fb-reply.is-team[b-ihd51b1n0p] {
    margin-left: auto;
    border-color: var(--o-line-strong);
    background: var(--o-gold-wash);
}

.o-fb-reply-who[b-ihd51b1n0p] {
    display: flex;
    align-items: center;
    gap: var(--o-s-2);
    margin: 0 0 .25rem;
    font-size: var(--o-text-2xs);
    color: var(--o-ink-3);
}

.o-fb-reply-text[b-ihd51b1n0p] {
    margin: 0;
    color: var(--o-ink);
    font-size: var(--o-text-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.o-fb-closed[b-ihd51b1n0p] {
    margin: 0;
    padding: var(--o-s-2) var(--o-s-3);
    border-left: 3px solid var(--o-line-strong);
    border-radius: var(--o-r-xs);
    background: var(--o-surface);
    color: var(--o-ink-3);
}

.o-fb-compose[b-ihd51b1n0p] {
    display: flex;
    align-items: flex-start;
    gap: var(--o-s-2);
}

    .o-fb-compose textarea[b-ihd51b1n0p] {
        flex: 1;
    }