/* Live account, authentication and report controls. */
.source-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap }
.source-mark { background: var(--surface); color: #dc4045; border: 1px solid var(--line); font-weight: 700; font-size: 17px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px }
.context-count { margin-left: auto; font-size: 11px; color: var(--muted) }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 34px; padding: 7px 12px; font-weight: 600; font-size: 11px; border: 1px solid transparent; white-space: nowrap }
.button.primary { background: var(--accent); color: var(--on-accent) }
.button.primary:hover:not(:disabled) { background: var(--accent-hover) }
.button.secondary { background: var(--accent-soft); border-color: var(--line); color: var(--link) }
.button.quiet { background: transparent; color: var(--link); border-color: var(--line) }
.button.quiet:hover:not(:disabled) { background: var(--accent-soft) }
.notice,.job-status { padding: 11px 14px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); margin-bottom: 16px; font-size: 12px; overflow-wrap: anywhere }
.notice.error { color: var(--bad); background: var(--bad-soft) }
.notice .button { margin-left: auto }
.readiness { display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px; margin: 0 0 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent-soft) }
.readiness.warning { background: var(--warn-soft); color: var(--warn) }
.readiness svg { margin-top: 2px }
.readiness strong { display: block; font-size: 12px; margin-bottom: 3px }
.readiness p { font-size: 11px; max-width: 86ch }
.readiness ul { margin: 8px 0 0; padding-left: 17px; font-size: 11px }
.readiness code { font: inherit; overflow-wrap: anywhere }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden }
.account-row { display: grid; grid-template-columns: 36px minmax(190px,1fr) minmax(145px,.6fr) auto; gap: 13px; align-items: center; padding: 17px 16px; border-bottom: 1px solid var(--line) }
.account-row:last-child { border-bottom: 0 }
.account-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--accent-soft); color: var(--link); font-size: 11px; font-weight: 650 }
.account-info { min-width: 0 }
.account-info strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere }
.account-info a { display: block; width: fit-content; margin-top: 3px; font-size: 11px }
.account-meta { display: grid; justify-items: start; gap: 5px; font-size: 10px; color: var(--muted) }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 4px; background: var(--surface-alt); border: 1px solid var(--line); font-size: 10px; white-space: nowrap; color: var(--muted) }
.badge.connected { background: var(--accent-soft); color: var(--link) }
.badge.needs_reauth { background: var(--warn-soft); color: var(--warn) }
.scope-note { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 15px; padding: 18px 4px; color: var(--muted); font-size: 11px }
.scope-note strong { font-weight: 600; color: var(--ink) }
.scope-note p { max-width: 80ch }
.report-tools { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px }
.field { display: grid; gap: 5px }
.field label { color: var(--muted); font-size: 10px }
.field input { width: 145px }
.account-filter { flex: 1; min-width: 190px }
.account-filter select { max-width: 100%; width: 100% }
.report-tools .button { min-height: 36px }
.filter-help { width: 100%; font-size: 10px; color: var(--muted); margin-top: 1px }
.filter-help.invalid { color: var(--bad) }
.report-state:not(:empty) { padding: 23px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; color: var(--muted); display: flex; align-items: center; gap: 10px; font-size: 12px }
.report-state.error { color: var(--bad) }
.money-totals { display: flex; align-items: stretch; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 0; flex-wrap: wrap }
.money-group { padding: 16px 20px; min-width: 190px; flex: 1; border-right: 1px solid var(--line) }
.money-group:last-child { border-right: 0 }
.money-group:first-child { background: var(--cobalt-feature); color: #fff }
.money-group-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px }
.money-group strong { display: block; font-size: 27px; letter-spacing: -.025em; line-height: 1.25; margin: 6px 0 5px; font-weight: 650; overflow-wrap: anywhere }
.money-group small { font-size: 10px }
.money-group:first-child small { color: var(--cobalt-feature-muted) }
.crm-strip { display: flex; align-items: center; gap: 25px; padding: 12px 4px 19px; color: var(--muted); font-size: 11px }
.crm-strip span { display: flex; gap: 12px; align-items: center }
.crm-strip strong { font-size: 15px; font-weight: 600; color: var(--ink) }
.crm-strip p { margin-left: auto; font-size: 10px }
.report-panel { margin-bottom: 17px }
.number { text-align: right }
.cost-cell { font-weight: 650 }
.report-footnote { font-size: 10px; color: var(--muted); max-width: 100ch }
.empty-state { padding: 27px 18px; text-align: center; color: var(--muted); font-size: 12px }
.empty-state strong { display: block; color: var(--ink); margin-bottom: 4px }
.boot-state { min-height: 220px; display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--muted) }
.spinner { display: inline-block; flex-shrink: 0; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite }
.login-layout { display: grid; grid-template-columns: minmax(200px,1fr) minmax(280px,350px); gap: clamp(30px,6vw,90px); max-width: 1000px; align-items: center; margin: clamp(35px,7vh,95px) auto }
.login-intro h1 { font-size: clamp(30px,3.5vw,49px); line-height: 1.15; letter-spacing: -.035em; margin: 22px 0 19px }
.intro-line { width: 51px; height: 5px; background: var(--accent); border-radius: 2px }
.login-intro>p { font-size: 14px; color: var(--muted); max-width: 35ch }
.login-proof { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; margin-top: 33px }
.login-proof svg { width: 24px; height: 24px; color: var(--link) }
.login-form { display: grid; gap: 8px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px }
.login-form h2 { font-size: 20px }
.login-form>.muted { margin-bottom: 15px }
.login-form label { font-size: 11px; font-weight: 600; margin-top: 7px }
.login-form input { min-height: 40px; width: 100% }
.login-form .button { min-height: 40px; margin-top: 16px }
.form-error { color: var(--bad); font-size: 11px; margin-top: 7px }
.login-footnote { font-size: 10px; color: var(--muted); margin-top: 10px; max-width: 35ch }

@media (max-width: 1100px) {
  .account-row { grid-template-columns:32px minmax(170px,1fr) auto; gap:10px }
  .account-meta { grid-column:2; grid-row:2 }
  .account-row>.button { grid-column:3; grid-row:1/3 }
  .account-icon { align-self:start }
  .account-info a { overflow-wrap:anywhere }
  .scope-note { grid-template-columns:180px 1fr }
  .money-group { min-width:165px }
  .login-layout { gap:30px }
  .login-form { padding:22px }
  .login-intro h1 { font-size:34px }
}

@media (max-width: 760px) {
  .source-label { font-size:0; gap:0 }
  .source-mark { font-size:17px }
  .context-count { width:100%; margin-left:48px; font-size:10px }
  .readiness { padding:13px 12px; gap:9px }
  .readiness p { font-size:11px }
  .account-row { grid-template-columns:29px minmax(0,1fr); gap:8px 10px; padding:14px 12px }
  .account-icon { width:29px; height:29px; font-size:10px }
  .account-row>.button { grid-column:2; grid-row:3; justify-self:start; min-height:34px }
  .account-meta { grid-column:2; grid-row:2 }
  .account-info strong { font-size:11px }
  .scope-note { display:block; padding:16px 2px }
  .scope-note p { margin-top:5px }
  .report-tools { gap:10px; padding:12px }
  .field { flex:1; min-width:110px }
  .field input { width:100% }
  .account-filter { flex-basis:100%; min-width:0 }
  .report-tools>.button { flex:1 }
  .filter-help { font-size:10px }
  .money-group { min-width:140px; padding:14px }
  .money-group strong { font-size:25px }
  .crm-strip { gap:14px; flex-wrap:wrap; padding-bottom:15px }
  .crm-strip p { width:100%; margin:0 }
  .crm-strip span { gap:7px }
  .login-layout { grid-template-columns:1fr; margin:15px auto 25px; max-width:420px; gap:25px }
  .login-intro h1 { font-size:31px; margin:14px 0 10px }
  .login-intro>p { font-size:12px; max-width:39ch }
  .login-proof { display:none }
  .login-form { padding:22px }
  .login-form h2 { font-size:19px }
  .boot-state { min-height:180px }
  .notice .button { display:block; margin:8px 0 0 }
  .job-status { font-size:11px }
}
.connections-context { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.connections-context .context-count { margin-left: 0; width: auto; }
.connections-context .source-label { gap: 7px; font-size: 11px; }
.readiness svg, .login-proof svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.report-panel .table-scroll { overflow: auto; }
.report-panel table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; font-size: 11px; }
.report-panel th { font-size: 10px; color: var(--muted); background: var(--surface-alt); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.report-panel td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.report-panel tbody tr:last-child td { border-bottom: 0; }
.report-panel tbody tr:hover { background: var(--surface-alt); }
.report-panel td:first-child { font-weight: 600; max-width: 470px; white-space: normal; min-width: 180px; overflow-wrap: anywhere; }
.report-panel td small { display: block; font-size: 10px; margin-top: 3px; font-weight: 400; }
.period-editor { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); }
.period-editor p, .report-tools p, .crm-strip p, .readiness p, .scope-note p, .empty-state p { margin-bottom: 0; }
.period-editor .filter-help { flex-basis: 100%; }
.report-state button { margin-left: auto; }
.portfolio-context { min-width: 0; max-width: 100%; }
#header-client { overflow: hidden; text-overflow: ellipsis; }
#client-select, #report-period { max-width: 100%; }
.cobalt-location + .shell-controls { margin-inline-start: auto; }
.shell-controls [data-icon], .shell-footer [data-icon], .drawer-toggle [data-icon], .cobalt-location [data-icon], .portfolio-context [data-icon], .drawer-close [data-icon] { display: inline-flex; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .period-editor .field { min-width: 120px; }
  .period-editor .button { flex: 1; }
  .report-state { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-style: dotted; }
}