/* Shared geometry inherits both existing OS palettes. No service owns a theme. */
:root {
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 20px;
    --space-7: 24px;
    --radius-control: 8px;
    --radius-input: 9px;
    --radius-card: 12px;
    --radius-dialog: 16px;
    --radius-pill: 999px;
}
#mod-analytics .analytics-wrap { max-width: 1600px; width: 100%; margin-inline: auto; }
#analytics-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.analytics-overview { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-7); padding: var(--space-7); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); }
.analytics-eyebrow { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.analytics-overview h3 { font-size: 22px; margin-block: var(--space-3); }
.analytics-overview p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.5; max-width: 640px; }
.analytics-overview-count { display: grid; gap: var(--space-2); flex-shrink: 0; }
.analytics-overview-count strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.analytics-overview-count span { color: var(--text-dim); font-size: 12px; }
#analytics-content > .analytics-section {
    min-width: 0; margin: 0; padding: var(--space-6);
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--bg-surface);
}
#analytics-content .analytics-source-head {
    cursor: pointer; user-select: none; flex-wrap: wrap;
    justify-content: space-between; gap: var(--space-3);
    min-height: 40px; margin-bottom: var(--space-4);
    border-radius: var(--radius-control);
}
#analytics-content .analytics-source-head h3 { font-size: 16px; line-height: 1.4; }
#analytics-content .analytics-source-head:hover h3 { color: var(--accent); }
#analytics-content .analytics-badge { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
#analytics-content .analytics-badge.error { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
#analytics-content .analytics-badge.warning { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
#analytics-content .stat-value, .subscription-date strong { font-variant-numeric: tabular-nums; }
#analytics-content .stat-sub { color: var(--text-dim); }
#analytics-content .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
#analytics-content .stat-value { font-size: 24px; overflow-wrap: anywhere; }
#analytics-content .analytics-panels { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
#analytics-content .analytics-loading { min-height: 0; height: auto; padding: var(--space-7); }
#analytics-content .subscription-card { padding: 0; border: 0; background: transparent; }
.subscription-head p { overflow-wrap: anywhere; }
.subscription-meta { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin-block: var(--space-4); }
.subscription-editor { margin-block: var(--space-4); color: var(--text-dim); font-size: 12px; }
.subscription-editor summary { cursor: pointer; padding-block: var(--space-3); color: var(--accent); }
.subscription-editor form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--bg-card); border-radius: var(--radius-control); }
.subscription-editor label, .subscription-editor [role="status"] { width: 100%; }
.subscription-editor input { background: var(--input-bg); color: var(--text); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-input); font: inherit; color-scheme: dark; }
.light .subscription-editor input { color-scheme: light; }
/* The director workspace can expose more tabs than fit between header controls.
   Keep scrolling inside the nav at every width, without shrinking its labels. */
.topbar .nav-tabs { min-width: 0; overflow-x: auto; overflow-y: hidden; }
.topbar > .brand, .topbar > .topbar-right { flex-shrink: 0; }
.topbar .nav-tab { flex-shrink: 0; transition: background .15s, color .15s, border-color .15s; }
/* Library actions wrap before they can collapse the title/metadata column. */
.transcriber-video > .transcriber-row { flex-wrap: wrap; gap: var(--space-4); }
.transcriber-video .transcriber-row-main { flex-basis: 50%; }
@media (max-width: 600px), (max-height: 500px) {
    .topbar .nav-tabs {
        justify-content: flex-start;
        gap: var(--space-2);
        padding-inline: var(--space-2);
        scroll-padding-inline: var(--space-2);
    }
    .topbar .nav-tab {
        flex: 0 0 auto;
        min-width: calc(var(--control-height) + 2 * var(--space-4));
        padding-inline: var(--space-3);
        font-size: var(--font-caption);
    }
    .topbar .nav-tab.active { background: transparent; color: var(--accent); }
}
@media (min-width: 1100px) {
    #analytics-content { display: block; columns: 2; column-gap: var(--space-7); }
    .analytics-overview { column-span: all; margin-bottom: var(--space-7); }
    #analytics-content > .analytics-section { display: inline-block; width: 100%; break-inside: avoid; margin-bottom: var(--space-7); vertical-align: top; }
}
@media (max-width: 640px) {
    .transcriber-toolbar { flex-wrap: wrap; gap: var(--space-3); }
    .transcriber-tabs { flex-basis: 100%; gap: var(--space-2); }
    .transcriber-video > .transcriber-row { flex-direction: column; align-items: stretch; }
    .transcriber-video .transcriber-row-main { flex-basis: auto; }
    .analytics-overview { display: none; }
    #analytics-content > .analytics-section { padding: var(--space-4); }
    .subscription-head { flex-wrap: wrap; }
    .subscription-quota-groups { grid-template-columns: minmax(0, 1fr); }
    .subscription-editor input, .subscription-editor button { min-height: 40px; }
}