/* Gradual shell refinement; module-specific layouts remain owned by modules. */
body { font-size: var(--font-body); }
.bp-cache-status { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-control); color: var(--text-dim); background: var(--bg-surface); font-size: var(--font-caption); line-height: var(--line-body); overflow-wrap: anywhere; }
.bp-cache-status[data-state="error"] { color: var(--status-warning-text); background: var(--status-warning-bg); }
.subscription-quota-track { height: var(--space-2); background: var(--bg-hover); border-radius: var(--radius-pill); overflow: hidden; }
.subscription-quota-track > span { display: block; height: 100%; }
.subscription-head, .subscription-quota-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.subscription-head { flex-wrap: wrap; margin-bottom: var(--space-5); }
.subscription-head p, .subscription-meta { color: var(--text-dim); font-size: var(--font-caption); overflow-wrap: anywhere; }
.subscription-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-block: var(--space-5); }
.subscription-date { display: grid; align-content: start; gap: var(--space-2); }
.subscription-date span { color: var(--text-dim); }
.subscription-editor { margin-block: var(--space-4); }
.subscription-quota-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-5); }
.subscription-quota-group { min-width: 0; display: grid; align-content: start; gap: var(--space-4); }
.subscription-quota-group h5 { font-size: var(--font-body); margin: 0; }
.subscription-quota { display: grid; gap: var(--space-2); }
.subscription-quota-head strong { white-space: nowrap; }
.subscription-quota small { color: var(--text-dim); overflow-wrap: anywhere; }
.subscription-cards { display: grid; gap: var(--space-5); }
#analytics-content .subscription-service-card { border-top: 1px solid var(--border); padding-top: var(--space-5); }
.subscription-service-balance { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.subscription-service-balance span { color: var(--text-dim); font-size: var(--font-caption); }
.subscription-service-balance strong { font-size: var(--font-section); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
    .subscription-dates, .subscription-quota-groups { grid-template-columns: minmax(0, 1fr); }
}
button, input, select, textarea { font-family: inherit; }
.topbar { background: var(--bg-surface); }
.analytics-period button.active { background: var(--accent-solid); }
.nav-tab.active, .autopublisher-mode-tab.active, .transcriber-tab.active, .transcriber-button.primary, .leads-tab.active, .outreach-button { background: var(--accent-solid); }
#analytics-content { display: block; columns: auto; }
#analytics-content > .analytics-section { display: block; width: 100%; margin-bottom: var(--space-5); }
#analytics-content > .analytics-section { background: var(--bg-card); }
.subscription-quota small, .subscription-date span { font-size: var(--font-caption); line-height: 1.5; }
#analytics-content [hidden] { display: none !important; }
.analytics-tabs { display: flex; gap: var(--space-6); overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: var(--space-7); }
.analytics-tabs button { flex-shrink: 0; min-height: 44px; padding: var(--space-4) var(--space-1); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-dim); font-size: var(--font-body); cursor: pointer; }
.analytics-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.analytics-tabs button:hover { color: var(--text); }
.analytics-summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--space-5); }
.analytics-summary-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-4); padding: var(--space-6); background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-card); cursor: pointer; }
.analytics-summary-card:hover { border-color: var(--accent); background: var(--bg-hover); }
.analytics-summary-card strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.analytics-summary-card small { font-size: var(--font-caption); color: var(--text-dim); line-height: 1.5; }
.analytics-summary-link { color: var(--accent); font-size: var(--font-caption); margin-top: auto; }
.analytics-toolbar h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.analytics-refresh { min-height: var(--control-height); padding-inline: var(--space-4); font-size: var(--font-caption); }
#analytics-content .analytics-panel { background: transparent; border: 0; padding: var(--space-4) 0; }
#analytics-content .analytics-error { color: var(--status-error-text); background: color-mix(in srgb,var(--red) 8%,var(--bg-card)); border-color: color-mix(in srgb,var(--red) 30%,var(--border)); }
#analytics-content .analytics-badge { font-size: var(--font-caption); }
#analytics-content .analytics-source-head h3 { font-weight: 600; }
@media (max-width: 640px) {
    :root { --control-height: 40px; }
    .analytics-toolbar h2 { font-size: 20px; }
}

/* Navigation is not an action button: quiet selection, no competing blue pills. */
@media (min-width: 901px) {
    .topbar .nav-tab { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); font-size: 13px; font-weight: 500; line-height: 20px; transition: background .15s, color .15s; }
    .topbar .nav-tab.active, .light .topbar .nav-tab.active { background: var(--accent-solid); color: white; }
}

/* Native scrolling, with a shared neutral thumb rather than custom JS scrolling. */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid transparent; background-clip: padding-box; border-radius: var(--radius-pill); }
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-dim); }
.chat-scroll::-webkit-scrollbar, .tasks-wrap::-webkit-scrollbar { width: 8px; }
.chat-scroll::-webkit-scrollbar-thumb, .tasks-wrap::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); }
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); }
#theme-toggle:hover { color: var(--text); background: var(--bg-hover); }
#theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#theme-toggle .theme-moon, .light #theme-toggle .theme-sun { display: none; }
.light #theme-toggle .theme-moon { display: block; }
@media (forced-colors: active) { * { scrollbar-color: auto; } }
.leads-tabs { padding: 0; gap: var(--space-6); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.leads-tabs .leads-tab { min-height: 40px; padding: var(--space-3) var(--space-1); border-radius: 0; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; line-height: 20px; transition: color .15s, border-color .15s; }
.leads-tabs .leads-tab.active { color: var(--accent); background: transparent; border-bottom-color: var(--accent); }
.leads-tabs .leads-tab:hover:not(:disabled) { color: var(--text); background: transparent; }
.outreach-button, .transcriber-button, .analytics-refresh {
    min-height: var(--control-height); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    font-size: 13px; font-weight: 500; line-height: 18px;
    transition: background .15s, border-color .15s, color .15s;
}
.outreach-button, .transcriber-button.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: white; }
.outreach-button:hover:not(:disabled), .transcriber-button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: white; }
.outreach-button:active:not(:disabled), .transcriber-button.primary:active:not(:disabled) { background: var(--accent-solid); border-color: var(--accent); }
.transcriber-button:not(.primary):not(.danger):hover:not(:disabled), .analytics-refresh:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--text-muted); }
.transcriber-button:disabled, .analytics-refresh:disabled { opacity: .45; cursor: not-allowed; }
.transcriber-button.danger { color: var(--status-error-text); }
.transcriber-button.danger:hover:not(:disabled) { color: var(--status-error-text); border-color: var(--red); background: color-mix(in srgb,var(--red) 10%,var(--bg-card)); }
@media (max-width: 640px) {
    .leads-tabs { gap: var(--space-5); }
    .outreach-button, .transcriber-button, .analytics-refresh { min-height: 40px; }
}

/* Private chat attachments use the same controls and state text as the shell. */
.chat-text-link { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.msg-text a.file-link { white-space: normal; overflow-wrap: anywhere; }
.msg-text a.file-link svg { flex-shrink: 0; }
.chat-file-status { display: block; color: var(--text-dim); font-size: var(--font-caption); }
.chat-file-status:empty { display: none; }
.chat-voice-load {
    min-height: var(--control-height); padding: var(--space-3) var(--space-4);
    background: var(--bg-surface); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-control); font: inherit; cursor: pointer;
}
.chat-voice-load:hover:not(:disabled) { background: var(--bg-hover); }
.chat-voice-load:disabled { opacity: .6; cursor: wait; }
.chat-voice-message audio { width: 100%; max-width: 100%; }

/* Filled actions use their own ink/fill pair, never the lighter link color. */
.bp-button {
    min-height: var(--control-height); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-control);
    background: var(--bg-card); color: var(--text); font: inherit;
    font-size: var(--font-control); font-weight: var(--weight-medium); cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.bp-button.primary, .toggle-btn.active, .light .toggle-btn.active,
.task-toggle-btn.active, .coding-action-btn.primary, .coding-delivery-btn.primary,
.login-card button, .send-btn, .tc-input-box button, .emp-msg-btn:hover,
.task-checkbox.checked, .outreach-task-pane-tabs button.active, .emp-open-button {
    background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid);
    box-shadow: none;
}
.bp-button.primary:hover:not(:disabled), .coding-action-btn.primary:hover:not(:disabled),
.coding-delivery-btn.primary:hover:not(:disabled), .login-card button:hover:not(:disabled),
.send-btn:hover:not(:disabled), .emp-open-button:hover:not(:disabled) {
    background: var(--accent-hover); border-color: var(--accent-hover);
}
.bp-button.primary:active:not(:disabled), .outreach-button:active:not(:disabled),
.transcriber-button.primary:active:not(:disabled), .send-btn:active:not(:disabled) {
    background: var(--accent-pressed); border-color: var(--accent-pressed);
}
.bp-button:not(.primary):hover:not(:disabled) { background: var(--bg-hover); }
.send-btn svg { fill: currentColor; }
.brand-icon, .boot-logo, .login-card .logo {
    display: grid;
    place-items: center;
    background: var(--accent-solid);
    color: var(--on-accent);
}
.coding-agent-select { background: var(--input-bg); color-scheme: inherit; font-size: var(--font-caption); }
.coding-agent-select option { background: var(--bg-card); color: var(--text); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { accent-color: var(--accent-solid); }

/* Quiet identities; color indicates selection and status, not decoration. */
.avatar-user, .tc-msg-avatar, .emp-avatar, #emp-modal-avatar {
    background: var(--avatar-bg); color: var(--avatar-text); font-weight: var(--weight-heading);
}
.tc-msg-row.out .tc-msg-bubble, .light .tc-msg-row.out .tc-msg-bubble {
    background: var(--selection-bg); border-color: var(--border); color: var(--text);
}
.stat-card { background: var(--bg-card); border-color: var(--border); }
.stat-card h4, .stat-card .stat-sub { color: var(--text-dim); }
.stat-card .stat-value { color: var(--text); font-weight: var(--weight-heading); }
.autopublisher-card.featured { background: var(--bg-card); border-color: var(--border); }
.analytics-bar { background: var(--accent-solid); }
.analytics-bar:hover::after { background: var(--text); color: var(--bg-card); font-size: var(--font-caption); }
.ai-director-status[data-state="ready"], .autopublisher-schedule small { color: var(--status-success-text); }
.ai-director-status[data-state="error"], .autopublisher-log.error, .transcriber-error,
.workspace-logout { color: var(--status-error-text); }
.autopublisher-state.error { color: var(--status-error-text); background: var(--status-error-bg); border-color: var(--border); }
.autopublisher-state.warning { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--border); }
.autopublisher-account-notice { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-5); text-align: left; overflow-wrap: anywhere; }
.autopublisher-account-notice > strong { font-size: var(--font-body); font-weight: 600; }
.autopublisher-account-notice p, .autopublisher-account-notice dl { margin: 0; }
.autopublisher-account-meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-size: var(--font-caption); }
.autopublisher-oauth-button { width: fit-content; min-height: var(--control-height); padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-control); background: var(--accent-solid); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.autopublisher-oauth-button:hover { filter: brightness(1.08); }
.autopublisher-oauth-button:disabled { opacity: .65; cursor: wait; }
.autopublisher-oauth-unavailable { font-size: var(--font-caption); color: var(--text-dim); }
.autopublisher-oauth-error { min-height: 0; font-size: var(--font-caption); color: var(--status-error-text); }
.autopublisher-account-notice summary { width: fit-content; min-height: var(--control-height); padding-block: var(--space-3); font-size: var(--font-control); cursor: pointer; }
.autopublisher-account-notice dl { display: grid; gap: var(--space-3); font-size: var(--font-caption); }
.autopublisher-account-notice dl > div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.autopublisher-account-notice dd { margin: 0; font-family: var(--font-family-mono); }
.autopublisher-run-notice { margin: var(--space-4); text-align: left; }
.autopublisher-schedule { background: var(--status-success-bg); border-color: var(--border); }
.autopublisher-schedule.awaiting-account { background: var(--status-warning-bg); }
.autopublisher-schedule.awaiting-account small { color: var(--status-warning-text); }
.autopublisher-live-dot { background: var(--green); box-shadow: none; }
.autopublisher-stage.done { border-color: var(--border); }
@media (max-width: 640px) {
    .autopublisher-toolbar { flex-wrap: wrap; justify-content: flex-end; }
    .autopublisher-mode-tabs { flex: 1 1 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .autopublisher-mode-tab { min-width: 0; padding-inline: var(--space-3); overflow-wrap: anywhere; }
    .autopublisher-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .autopublisher-card { min-width: 0; padding: var(--space-4); overflow-wrap: anywhere; }
    .autopublisher-schedule.awaiting-account small { margin-left: 0; }
}
.limit-fill.green { background: var(--green); }
.limit-fill.yellow { background: var(--orange); }
.limit-fill.red { background: var(--red); }
.agent-graph { background: var(--bg-card); }
.agent-connector, .agent-card-progress span { background: var(--accent); }
.agent-connector.running::after { background: var(--green); box-shadow: none; }
.agent-branch-line { border-color: var(--border-control); }
.agent-card, .agent-card.running { box-shadow: none; }
.agent-card.running { border-color: var(--green); }
.agent-card.failed { border-color: var(--red); }
.agent-card.running .agent-state-dot { background: var(--green); }

/* Directory dialogs keep their controls reachable on small/short screens. */
#emp-modal > .bp-dialog, #add-emp-modal > .bp-dialog {
    max-height: calc(100dvh - var(--space-7) * 2); overflow-y: auto;
}
.emp-open-button {
    display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height);
    padding: 0; border: 0; border-radius: var(--radius-control); font-size: var(--font-heading);
}
.emp-card-name, .emp-card-role, #emp-modal-name, #emp-modal-role { overflow-wrap: anywhere; }
.emp-directory-state { padding: var(--space-6); text-align: center; color: var(--text); }
.emp-directory-description { margin-block: var(--space-3); color: var(--text-dim); }
.emp-directory-retry {
    min-height: var(--control-height); padding: var(--space-3) var(--space-4);
    background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-control); font: inherit; cursor: pointer;
}
.emp-directory-retry:hover { background: var(--bg-hover); }
.emp-detail-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.workspace-item { width: 100%; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
.workspace-menu { overflow-y: auto; }
.coding-task-dialog { max-height: calc(100dvh - var(--space-7) * 2); overflow-y: auto; }
.coding-action-btn, .coding-add-btn, .coding-delivery-btn, .task-toggle-btn {
    min-height: var(--control-height); font-size: var(--font-control);
    font-weight: var(--weight-medium); border-radius: var(--radius-control);
}
.tc-list .chat-avatar-person,
.tc-list .chat-avatar-test { background: var(--accent-solid); color: var(--on-accent); }
.chat-avatar-self { background: var(--accent-dim); color: var(--accent); }
.login-card .logo { background: transparent; }
.login-card #login-status[data-state="error"] { color: var(--status-error-text); }
.login-card input[aria-invalid="true"] { border-color: var(--status-error-text); }
.login-card button:disabled { opacity: .6; cursor: wait; }