/* Shared design tokens for consultant onboarding, administration, and reports. */
:root {
  --ink: #392728;
  --muted: #746769;
  --brand: #392728;
  --brand-hover: #704d4f;
  --brand-subtle: #f1e9e9;
  --focus-halo: rgba(112, 77, 79, .18);
  --surface: #fff;
  --surface-page: #faf8f8;
  --surface-muted: #faf7f7;
  --surface-hover: #f4eded;
  --field-border: #c9bfc0;
  --line: #e5dddd;
  --grid: #e2d7d8;
  --grid-strong: #bda3a5;
  --table-header: #704d4f;
  --table-header-ink: #ffffff;
  --table-row: #fbf8f8;
  --table-hover: #f3ebec;
  --badge-background: #e9dcdd;
  --badge-foreground: #704d4f;
  --error: #b42345;
  --error-surface: #fff1f4;
  --error-border: #f0c2cc;
  --warning: #80602e;
  --warning-surface: #fffcf2;
  --warning-border: #e7d9b8;
  --success: #34785c;
  --status-idle: #b6adb7;
  --membership-background: #ded2e8;
  --radius-control: 8px;
  --radius-panel: 14px;
  --shadow-panel: 0 3px 16px rgba(67, 31, 49, .04);
  --page-gutter: clamp(16px, 1.8vw, 40px);
  --code-width: 112px;
  --control-height: 40px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--surface);
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.button, .icon-button, .utility-button, input, select, textarea { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
button:disabled { opacity: .5; cursor: default; }
a { color: var(--brand); }
h1, h2, h3, p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
[hidden] { display: none!important; }
.brand { display: inline-block; position: relative; overflow: hidden; width: 180px; height: 44px; text-decoration: none; }
.brand img { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; }
.button, .icon-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--field-border); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 13px; text-decoration: none; }
.button:hover:not(:disabled), .icon-button:hover { background: var(--surface-hover); }
.button.primary { background: var(--brand); color: var(--surface); border-color: var(--brand); }
.button.primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
.notice { padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--error-border); border-radius: var(--radius-control); background: var(--error-surface); color: var(--error); font-size: 13px; }
.notice.info { border-color: var(--line); color: var(--muted); background: var(--surface-muted); }
.notice.warning { border-color: var(--warning-border); color: var(--warning); background: var(--warning-surface); }
.field-hint, .terms-version { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Admin workspace: original report hierarchy, one aligned page. */
.app { width: 100%; max-width: none; min-width: 0; margin: 0 auto; }
.workspace-tools { padding: 16px var(--page-gutter) 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.workspace-header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: 44px; }
.workspace-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workspace-title { overflow: hidden; margin: 0; color: var(--ink); font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.page-title-icon { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; flex: 0 0 33px; border-radius: 8px; background: var(--brand-subtle); }
.page-title-icon::before { content: ''; width: 17px; height: 17px; border: 1.5px solid var(--brand); border-radius: 3px; background: linear-gradient(var(--brand),var(--brand)) center/1.5px 100% no-repeat, linear-gradient(var(--brand),var(--brand)) center/100% 1.5px no-repeat; }
.workspace-logo { justify-self: center; line-height: 0; }
.workspace-logo .brand { width: 180px; }
.header-tab-ribbon { display: grid; grid-template-columns: 0 minmax(0, 1fr) 0; align-items: end; min-width: 0; margin: 8px 0 -1px; }
.header-tab-ribbon[data-overflow] { grid-template-columns: 28px minmax(0, 1fr) 28px; }
.primary-nav { position: relative; display: flex; gap: 24px; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav button { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 40px; padding: 6px 0; border: 0; border-bottom: 4px solid transparent; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.primary-nav button[aria-current=page] { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }
.primary-nav button:hover { color: var(--brand-hover); }
.tab-scroll-button { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 24px; }
.tab-scroll-button:hover { background: var(--surface-hover); color: var(--brand); }
.tab-scroll-button:disabled { visibility: hidden; }
.header-tab-ribbon:not([data-overflow])>.tab-scroll-button { width: 0; overflow: hidden; }
.utility { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; justify-self: stretch; gap: 8px 14px; min-width: 0; color: var(--muted); font-size: 12px; }
.workspace-sessiongroup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.workspace-context { font-size: 12px; color: var(--muted); }
.utility-button { min-height: 34px; padding: 6px 10px; border: 1px solid var(--field-border); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 12px; }
.utility-button:hover { background: var(--surface-hover); color: var(--brand); }
.utility-button.active { color: var(--brand-hover); background: var(--brand-subtle); }
.compact-select { display: flex; align-items: center; gap: 8px; min-width: 0; }
.compact-select label { color: var(--muted); font-size: 12px; white-space: nowrap; }
.custom-dropdown { min-width: 0; }
.dropdown-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; max-width: 300px; min-width: 0; padding: 8px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-control); color: var(--ink); background: var(--surface); font-size: 13px; text-align: left; }
.dropdown-trigger:hover:not(:disabled) { border-color: var(--brand); background: var(--surface-muted); }
.dropdown-trigger[aria-expanded=true] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-halo); }
.dropdown-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-chevron { width: 7px; height: 7px; margin: -3px 2px 0 0; flex-shrink: 0; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.dropdown-trigger[aria-expanded=true] .dropdown-chevron { margin-top: 3px; transform: rotate(225deg); }
.dropdown-menu { position: fixed; inset: auto; z-index: 100; margin: 0; padding: 5px; overflow: hidden; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 28px rgba(67,31,49,.14); font: 13px/1.5 Arial,Helvetica,sans-serif; }
.dropdown-search-row { padding: 3px 3px 8px; }
.dropdown-search { display: block; width: 100%; min-width: 0; height: 40px; padding: 8px 10px; border: 1px solid var(--field-border); border-radius: 7px; color: var(--ink); background: var(--surface); font: inherit; }
.dropdown-list { overflow-y: auto; overscroll-behavior: contain; }
.dropdown-empty { margin: 0; padding: 12px 10px; color: var(--muted); }
.dropdown-option { position: relative; display: flex; align-items: center; min-height: 36px; padding: 8px 32px 8px 10px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.dropdown-option:hover, .dropdown-option[data-highlighted=true] { background: var(--brand-subtle); }
.dropdown-option[aria-selected=true] { color: var(--brand-hover); font-weight: 600; }
.dropdown-option[aria-selected=true]::after { content: '✓'; position: absolute; right: 10px; color: var(--brand); }

.sync-label { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: 12px; }
.sync-state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sync-date { color: var(--muted); font-size: 11px; white-space: nowrap; }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-idle); flex-shrink: 0; }
.sync-dot.complete { background: var(--success); }
.sync-dot.failed { background: var(--warning); }
.sync-dot.queued, .sync-dot.running { background: var(--warning); animation: pulse 1s infinite; }
.report-page { width: 100%; min-width: 0; padding: 16px var(--page-gutter) 32px; }
/* Let the table consume the viewport space remaining below the report controls. */
.app:has(>.report-page) { display: flex; flex-direction: column; height: 100dvh; }
.app:has(>.report-page)>.workspace-tools { flex-shrink: 0; }
.report-page { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-bottom: 16px; overflow-y: auto; }
.report-page>* { flex-shrink: 0; }
.table-expanded>.workspace-tools, .table-expanded>.report-page>.scope-tabs, .table-expanded>.report-page>.notice { display: none; }
#table-expand-toggle[aria-pressed=true] { border-color: var(--brand); background: var(--brand-subtle); color: var(--brand-hover); }
#report-tables { display: flex; flex: 1; flex-direction: column; min-height: 160px; }
#report-tables>.table-scroll { flex: 1; min-height: 0; max-height: none; }
#report-tables:has(.personal-details)>.table-scroll { flex: 0 0 auto; max-height: 30dvh; }
#report-tables .personal-details { display: flex; flex: 1; flex-direction: column; min-height: 160px; }
#report-tables .personal-details>.table-scroll { flex: 1; min-height: 0; max-height: none; }
#report-tables .table-results { flex-shrink: 0; }
.scope-tabs { display: flex; align-items: stretch; min-height: 46px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.scope-tabs button { min-height: 46px; margin-bottom: -1px; padding: 12px 20px; border: 1px solid transparent; border-radius: 10px 10px 0 0; color: var(--brand); background: var(--brand-subtle); font-size: 15px; }
.scope-tabs button.active { border-color: var(--line); border-bottom-color: var(--surface); background: var(--surface); font-weight: 600; }
.scope-tabs button:hover:not(.active) { background: var(--badge-background); }
.report-controls { min-width: 0; margin-bottom: 16px; }
.report-controls .status-strip { margin-bottom: 0; }
.report-controls .report-period { margin: 12px 0 0; }
.report-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; min-height: 40px; }
.mode-toggle { display: inline-flex; flex-shrink: 0; overflow: hidden; border: 1px solid var(--field-border); border-radius: var(--radius-control); background: var(--surface-muted); }
.mode-toggle button { min-height: 40px; padding: 9px 16px; border: 0; background: none; color: var(--muted); font-size: 13px; }
/* Segmented groups include their border in the shared control height. */
.report-toolbar .mode-toggle, .report-toolbar .status-strip { height: var(--control-height); }
.report-toolbar .mode-toggle button, .report-toolbar .status-strip button { height: calc(var(--control-height) - 2px); min-height: calc(var(--control-height) - 2px); padding-block: 0; white-space: nowrap; }
.report-toolbar .dropdown-trigger, .report-toolbar .report-actions input, .report-toolbar .icon-button { height: var(--control-height); min-height: var(--control-height); }
.mode-toggle button.selected { background: var(--brand); color: var(--surface); }
.mode-toggle button:hover:not(.selected) { background: var(--surface-hover); }
.report-actions { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
.report-actions input { width: clamp(210px, 23vw, 340px); min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 13px; }
.icon-button { padding: 8px 12px; white-space: nowrap; }
.print-button { min-width: 40px; }
.status-strip { display: inline-flex; overflow: hidden; border: 1px solid var(--field-border); margin-bottom: 16px; border-radius: var(--radius-control); background: var(--surface-muted); }
.status-strip button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 16px; border: 0; color: var(--muted); background: none; font-size: 13px; }
.status-strip button.selected { background: var(--brand-subtle); color: var(--brand-hover); font-weight: 600; }
.status-strip button:hover:not(.selected):not(:disabled) { background: var(--surface-hover); }
.count-badge { min-width: 19px; padding: 1px 6px; border-radius: 10px; background: var(--badge-background); color: var(--badge-foreground); font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; }
.status-strip button.selected .count-badge { color: var(--muted); background: var(--surface); }
.report-period { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 20px; font-size: 13px; }
.program-rules { margin-bottom: 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.program-rules>p { margin-bottom: 16px; }
.program-rules>div p { line-height: 1.5; }
.personal-details { margin-top: 32px; }

/* Spreadsheet: bounded scrolling, fixed identifiers, paired month headers. */
.table-scroll { width: 100%; max-width: 100%; min-width: 0; max-height: 65vh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--grid); border-radius: var(--radius-control); }
.source-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.source-table th, .source-table td { padding: 3px 8px; border: 0; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); line-height: 1.4; }
.source-table tr>:last-child { border-right: 0; }
.source-table tbody tr:last-child td { border-bottom: 0; }
.source-table thead { position: sticky; top: 0; z-index: 5; }
.source-table th { min-width: 72px; max-width: 160px; background: var(--table-header); color: var(--table-header-ink); text-align: left; vertical-align: bottom; font-weight: 600; }
.source-table th button { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; max-width: 143px; padding: 0; border: 0; color: inherit; background: none; font-size: 12px; font-weight: inherit; line-height: 1.4; text-align: left; }
.source-table th .sort-arrow { flex-shrink: 0; color: rgba(255,255,255,.7); font-size: 10px; }
.source-table th[aria-sort=ascending] .sort-arrow, .source-table th[aria-sort=descending] .sort-arrow { color: var(--table-header-ink); }
.source-table th.month-group { text-align: center; }
.source-table th.recruiting-month-column { width: 88px; min-width: 88px; max-width: 88px; }
.source-table th.recruiting-month-column button { width: 71px; max-width: 71px; white-space: normal; }
.source-table td { white-space: nowrap; background: var(--surface); }
.source-table tbody tr:nth-child(even) td { background: var(--table-row); }
.source-table tbody tr:hover td { background: var(--table-hover); }
.source-table .numeric { text-align: right; }
.source-table .code-column { position: sticky; left: 0; z-index: 2; width: var(--code-width); min-width: var(--code-width); max-width: var(--code-width); }
.source-table .name-column, .source-table .consultant-name { width: 1%; min-width: 0; max-width: none; color: var(--brand); }
.source-table .name-column { position: sticky; left: var(--code-width); z-index: 2; border-right-color: var(--grid-strong); }
.source-table td.name-column, .source-table td.recruiter-column { white-space: nowrap; overflow-wrap: normal; }
.source-table .recruiter-column { width: 1%; min-width: 0; max-width: none; }
.source-table th.name-column button, .source-table th.recruiter-column button { max-width: none; white-space: nowrap; }
.source-table th.code-column, .source-table th.name-column { z-index: 3; }
.source-table td.outside-unit, .source-table tbody tr:nth-child(even) td.outside-unit { background: var(--membership-background); }
.source-table .empty-table { padding: 28px; text-align: center; color: var(--muted); }
.table-results { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.source-table tfoot th { background: var(--surface-muted); color: var(--ink); text-align: right; font-weight: 500; }
.source-table tfoot td { background: var(--surface-muted); }

/* Public connection: restrained form, readable consent, no default legal copy. */
.onboarding-page, body:has(.login-page) { display: flow-root; min-height: 100vh; background: var(--surface-page); }
.connect-page { display: flex; flex-direction: column; width: min(calc(100% - 40px), clamp(600px, 52vw, 800px)); max-width: 800px; height: min(760px, calc(100dvh - 80px)); margin: 40px auto; padding: 32px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-panel); }
.connect-header, .connect-steps, .connect-feedback { flex-shrink: 0; }
#terms-form, #connect-form { display: flex; flex-direction: column; flex: 1; min-height: 280px; }
#terms-form .connect-terms { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 0; }
#terms-form .connect-terms h2, #terms-form #terms-meta, #terms-form .consent-label, #terms-continue { flex-shrink: 0; }
#terms-form .terms-body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
#connect-form .connect-fields { flex-shrink: 0; }
#connect-form .connect-actions { margin-top: auto; padding-top: 24px; flex-shrink: 0; }
.connect-header { margin-bottom: 28px; }
.connect-brand { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 72px; padding: 12px 20px; margin-bottom: 28px; border-radius: var(--radius-control); background: var(--brand); }
.brand-logo-window { display: block; position: relative; overflow: hidden; width: 200px; height: 48px; }
.connect-logo { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; }
.connect-brand .brand-spinner { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.brand-spinner { display: none; width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--badge-background); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
.connect-brand[aria-busy=true] .brand-spinner { display: block; }
.connect-brand[aria-busy=true] .connect-logo { animation: pulse 1.8s ease-in-out infinite; }
.connect-context { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.connect-page h1 { margin-bottom: 12px; color: var(--brand); font-size: 23px; font-weight: 400; line-height: 1.35; }
.connect-intro { color: var(--muted); font-size: 14px; line-height: 1.6; }
.connect-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; padding: 0; margin: 0 0 24px; }
.connect-steps li { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: 13px; }
.connect-steps li[aria-current=step] { color: var(--brand); border-color: var(--brand); }
.connect-steps li[aria-current=step] span { background: var(--brand-subtle); }
.connect-steps span { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; flex-shrink: 0; }
#terms-form .connect-terms { margin-top: 0; padding-top: 0; border-top: 0; }
#terms-continue { width: 100%; min-height: 44px; }
.connect-actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.connect-actions #connect-submit { width: auto; flex: 1; }
#connect-back { min-height: 44px; }
.connect-fields { display: grid; gap: 24px; padding-top: 8px; }
.connect-page form>label:not(.consent-label) { display: block; margin: 16px 0 8px; font-size: 13px; }
.connect-fields .field { position: relative; }
.connect-fields .field>label { position: absolute; top: 0; left: 10px; z-index: 3; transform: translateY(-50%); margin: 0; padding: 0 5px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.4; cursor: text; }
.connect-fields .field:focus-within>label { color: var(--brand); }
.connect-page form>input, .connect-fields input { display: block; width: 100%; min-width: 0; min-height: 52px; padding: 14px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 14px; }
.connect-fields input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-halo); }
.connect-fields .field-hint { margin-top: 6px; }
.password-feedback { margin: 0 0 16px; color: var(--error); font-size: 13px; line-height: 1.5; }
.password-field { position: relative; width: 100%; border-radius: var(--radius-control); }
.password-field input { padding-right: 52px; border-radius: inherit; }
.password-field:focus-within { box-shadow: 0 0 0 3px var(--focus-halo); }
.password-field:focus-within input { border-color: var(--brand); }
.password-field input:focus-visible { outline: none; box-shadow: none; }
#connect-password-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
#connect-password-toggle:hover:not(:disabled), #connect-password-toggle:focus-visible { color: var(--brand); background: var(--brand-subtle); }
#connect-password-toggle:focus-visible { outline-offset: -2px; }
#connect-password-toggle svg { display: block; flex-shrink: 0; pointer-events: none; }
#connect-password-toggle .eye-hide, #connect-password-toggle[aria-pressed=true] .eye-show { display: none; }
#connect-password-toggle[aria-pressed=true] .eye-hide { display: block; }
.connect-terms { margin: 28px 0 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.connect-terms h2, .connection-status h2 { margin-bottom: 8px; font-size: 15px; font-weight: 600; }
#terms-meta { margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.terms-body { max-height: 320px; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--muted); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.consent-label { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; color: var(--ink); font-size: 13px; line-height: 1.6; }
.consent-label input { width: 16px; height: 16px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--brand); }
.connect-feedback { margin-bottom: 12px; color: var(--error); font-size: 13px; }
.connect-feedback:empty { display: none; }
#connect-submit { width: 100%; min-height: 44px; font-size: 14px; }
.connection-loading { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px; border-radius: var(--radius-control); background: var(--brand-subtle); color: var(--brand-hover); }
.connection-loading p { font-size: 14px; line-height: 1.6; }
.connection-spinner { width: 24px; height: 24px; flex-shrink: 0; border: 3px solid var(--badge-background); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
.connection-status { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--brand); }
.connection-status p { margin-bottom: 24px; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Owner sign-in and terms editor share the form spacing. */
.login-page { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 48px 20px; }
.login-header { display: flex; justify-content: center; width: 100%; max-width: 440px; padding-bottom: 28px; }
.login-main { width: 100%; max-width: 440px; margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-panel); }
.login-main h1 { margin-bottom: 8px; color: var(--brand); font-size: 23px; font-weight: 400; }
.login-intro { color: var(--muted); font-size: 14px; }
.login-card { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.login-card h2 { font-size: 16px; font-weight: 600; }
.login-card>p { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.login-card .privacy-note { margin-top: 20px; font-size: 12px; }
.login-form { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.login-form label { font-size: 13px; }
.login-form input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-control); }
.login-form .button { width: 100%; min-height: 42px; margin-top: 8px; }
.login-form .notice { margin: 8px 0 0; }
.terms-editor { width: 100%; min-width: 0; margin: 24px auto; padding: 8px var(--page-gutter) 32px; }
.terms-editor h1 { margin-bottom: 12px; color: var(--brand); font-size: 22px; font-weight: 400; }
.terms-editor>p { margin-bottom: 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.terms-editor .terms-version { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.terms-editor label { display: block; margin: 20px 0 8px; font-size: 13px; }
.terms-editor input, .terms-editor textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-control); background: var(--surface); font-size: 14px; }
.terms-editor textarea { min-height: 360px; resize: vertical; line-height: 1.7; }
.terms-editor .field-hint { margin-top: 6px; }
.terms-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.fatal-error { max-width: 560px; margin: 64px auto; padding: 24px; }
.fatal-error h1 { margin: 32px 0 20px; font-size: 24px; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }

@media(max-width:1100px) {
  .workspace-title { font-size: 23px; }
}
@media(max-width:700px) {
  :root { --control-height: 44px; }
  .dropdown-search { font-size: 16px; }
  .report-toolbar .status-strip { height: auto; }
  .workspace-tools { padding: 16px 16px 0; }
  .workspace-header-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .workspace-logo { grid-row: 1; }
  .workspace-logo .brand { width: 150px; }
  .workspace-title { font-size: 22px; }
  .workspace-header-row .utility { justify-content: flex-start; }
  .header-tab-ribbon { margin-top: 10px; }
  .primary-nav { gap: 20px; }
  .primary-nav button { font-size: 14px; }
  .utility { width: 100%; gap: 8px 12px; }
  .report-toolbar .compact-select { width: 100%; }
  .report-toolbar .compact-select label { flex-shrink: 0; }
  .report-toolbar .compact-select .dropdown-trigger { flex: 1; max-width: none; width: 100%; }
  .sync-label { flex: 1; white-space: normal; font-size: 12px; }
  .workspace-sessiongroup { margin-left: 0; gap: 4px; }
  .utility-button { padding: 8px; }
  .report-page { padding: 12px 16px 16px; }
  .scope-tabs { margin-bottom: 20px; }
  .scope-tabs button { flex: 1; padding: 12px 10px; font-size: 14px; }

  .report-toolbar { flex-wrap: wrap; gap: 12px; }
  .report-actions { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; justify-content: flex-end; }
  .report-actions input { flex: 1 1 100%; width: 100%; max-width: none; }
  .status-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .status-strip button { justify-content: space-between; padding: 10px 14px; }
  .program-rules { font-size: 12px; }
  .report-period { gap: 12px; }
  /* One frozen identifier leaves room to inspect monthly values on narrow screens. */
  .source-table .name-column { position: static; left: auto; }
  .source-table th.name-column { z-index: auto; }
  .connect-page { width: calc(100% - 24px); height: min(760px, calc(100dvh - 40px)); margin: 20px auto; padding: 24px 20px; }
  .connect-brand { margin-bottom: 24px; }
  .connect-page h1 { font-size: 21px; }
  .connect-header { margin-bottom: 24px; }
  .connect-fields input, .login-form input, .terms-editor input, .terms-editor textarea, .report-actions input, .compact-select .dropdown-trigger { font-size: 16px; }
  .login-page { padding: 32px 16px; }
  .login-main { padding: 24px; }
  .terms-editor { margin: 20px auto; padding: 0 16px 28px; }
  .terms-editor textarea { min-height: 320px; }
}
@media(max-width:420px) { .connect-actions { flex-direction: column; align-items: stretch; }.connect-actions #connect-submit { width: 100%; } }
@media print {
  body { background: var(--surface)!important; }
  .app, .app:has(>.report-page) { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
  .workspace-tools, .scope-tabs, .report-controls, .report-toolbar, .status-strip, .notice { display: none!important; }
  .report-page, #report-tables, #report-tables .personal-details { display: block; width: 100%; min-height: 0; padding: 0; overflow: visible; }
  .table-scroll { max-height: none!important; height: auto!important; overflow: visible!important; width: 100%; border: 0; border-radius: 0; }
  .source-table { table-layout: fixed; width: 100%; min-width: 0; max-width: 100%; border-collapse: collapse; font-size: 8px; }
  .source-table thead { display: table-header-group; position: static!important; }
  .source-table th, .source-table td, .source-table th button {
    position: static!important; left: auto!important; top: auto!important; z-index: auto!important;
    width: auto!important; min-width: 0!important; max-width: none!important;
    white-space: normal!important; overflow-wrap: anywhere; word-break: normal;
  }
  .source-table th, .source-table td { padding: 2px 3px; border: 1px solid var(--grid); }
  .source-table th button { display: block; font-size: 8px; }
  .source-table tr>:last-child { border-right: 1px solid var(--grid); }
  .source-table tbody tr:last-child td { border-bottom: 1px solid var(--grid); }
  .source-table tfoot { display: table-row-group; }
  .source-table tr { break-inside: avoid; page-break-inside: avoid; }
  .sort-arrow { display: none; }
  .program-rules { font-size: 9px; }
  @page { size: landscape; margin: 10mm; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none!important; transition: none!important; }
}

/* Contact capture and connection operations share the existing compact controls. */
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-fields .field { min-width: 0; }
.contact-fields .iti { display: block; width: 100%; --iti-border-color: var(--field-border); --iti-border-radius: var(--radius-control); --iti-spacer-horizontal: 10px; }
.contact-fields .iti input { width: 100%; }
.iti__dropdown-content, .iti__search-input { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.iti__dropdown-content { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(67,31,49,.14); }
.iti__country.iti__highlight { background: var(--brand-subtle); }
.connection-loading h2 { margin: 0 0 6px; font-size: 15px; }
.connection-loading .field-hint { margin-top: 8px; color: var(--muted); }
.connections-page { width: 100%; min-width: 0; padding: 28px var(--page-gutter); }
.connections-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.connections-heading h1 { font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.connections-heading p { color: var(--muted); }
.connections-page section + section { margin-top: 32px; }
.connections-page h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.connections-page section > .field-hint { margin: -4px 0 12px; }
.connection-table-scroll { max-height: 55vh; }
.connection-table { width: 100%; min-width: 800px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.connection-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.connection-table th, .connection-table td { padding: 11px 12px; text-align: left; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); vertical-align: top; }
.connection-table th { background: var(--table-header); color: var(--table-header-ink); font-size: 12px; }
.connection-table tr:nth-child(even) td { background: var(--table-row); }
.connection-table tbody tr:hover td { background: var(--table-hover); }
.connection-table small { display: block; margin-top: 6px; max-width: 260px; color: var(--muted); font-size: 11px; }
.connection-table .button { min-height: 32px; padding: 5px 10px; white-space: nowrap; }
.connection-table a { white-space: nowrap; }
.connection-badge { display: inline-block; padding: 3px 8px; border-radius: 20px; white-space: nowrap; background: var(--surface-muted); color: var(--muted); font-size: 12px; }
.connection-badge.verified { background: #edf7f1; color: var(--success); }
.connection-badge.failed { background: var(--error-surface); color: var(--error); }
.connection-badge.running, .connection-badge.queued { background: var(--brand-subtle); color: var(--brand-hover); }
@media(max-width: 600px) {
  .contact-fields { grid-template-columns: 1fr; gap: 20px; }
  .connections-page { padding: 20px 16px; }
  .connections-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .connections-heading h1 { font-size: 20px; }
}

@media(pointer:coarse) {
  :root { --control-height: 44px; }
  .primary-nav button, .workspace-tools .utility-button, .tab-scroll-button { min-height: 44px; }
}

/* Shared loading surfaces: no fake delays and no skeletons on background polling. */
.skeleton { display: block; border-radius: 5px; background: linear-gradient(90deg, var(--surface-muted) 20%, var(--line) 45%, var(--surface-muted) 70%); background-size: 240% 100%; animation: skeleton-sweep 1.5s ease-in-out infinite; }
.skeleton-line { width: 100%; min-width: 28px; height: 12px; }
.skeleton-short { width: 65%; }
.skeleton-title { width: 190px; max-width: 75%; height: 24px; }
.skeleton-control { width: 160px; max-width: 100%; height: var(--control-height); }
.skeleton-editor { width: 100%; min-height: 280px; }
.dashboard-skeleton { display: flex; flex-direction: column; gap: 20px; height: 100dvh; padding: 16px var(--page-gutter); overflow: hidden; }
.skeleton-header { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 20px; min-height: 72px; }
.skeleton-header .brand img, .skeleton-header>img { display: block; width: 160px; height: auto; }
.skeleton-header>.skeleton:last-child { justify-self: end; }
.skeleton-toolbar { display: flex; align-items: center; gap: 12px; min-height: var(--control-height); }
.skeleton-toolbar>.skeleton:last-child { margin-left: auto; }
.skeleton-initial-table { flex: 1; min-height: 0; padding: 12px; overflow: hidden; border: 1px solid var(--grid); border-radius: var(--radius-control); }
.skeleton-initial-table .skeleton-line { height: 24px; margin-bottom: 12px; }
.dashboard-skeleton>.loading-table { flex: 1; max-height: none; min-height: 0; }
.loading-table .skeleton-line { margin-block: 2px; }
.loading-table .name-column .skeleton-line, .loading-table .recruiter-column .skeleton-line { width: 270px; }
.terms-skeleton { display: flex; flex-direction: column; gap: 18px; }
.terms-loading { display: flex; flex: 1; flex-direction: column; gap: 18px; min-height: 280px; }
.skeleton-terms-body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-control); }
.terms-loading>.skeleton-control { width: 100%; height: 44px; }
.verification-skeleton { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; max-width: 320px; }
.verification-skeleton .skeleton { background-image: linear-gradient(90deg, var(--badge-background) 20%, var(--surface) 45%, var(--badge-background) 70%); }
.view-enter>main, #terms-form:not([hidden]), #connect-form:not([hidden]), .connection-status:not([hidden]), .connection-loading:not([hidden]) { animation: view-appear .18s ease-out; }
.login-form[aria-busy=true] button[type=submit], .terms-editor[aria-busy=true] .button.primary, .button[aria-busy=true] { position: relative; overflow: hidden; }
.login-form[aria-busy=true] button[type=submit]::after, .terms-editor[aria-busy=true] .button.primary::after, .button[aria-busy=true]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); background-size: 240% 100%; animation: skeleton-sweep 1.5s ease-in-out infinite; }
[aria-disabled=true] { pointer-events: none; opacity: .5; }
@keyframes skeleton-sweep { from { background-position: 140% 0; } to { background-position: -140% 0; } }
@keyframes view-appear { from { opacity: .45; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:700px) {
  .skeleton-header { grid-template-columns: 1fr auto; gap: 12px; }
  .skeleton-header>.skeleton:last-child { display: none; }
  .skeleton-toolbar>.skeleton-control { flex: 1; min-width: 0; }
}
@media print { .skeleton, .loading-table { display: none!important; } }

.summary-account { margin: 0 0 2rem; }
.summary-account h2 { margin: 1rem 0 .35rem; font-size: 1.1rem; }
.summary-account .table-scroll { margin: .75rem 0; }
.summary-table { width: 100%; }
.summary-table td { white-space: normal; min-width: 6rem; }
.summary-table th { white-space: normal; }
@media print { .summary-account { break-inside: avoid; } }
.summary-header-scroll { overflow-x: auto; margin: .75rem 0 1.5rem; }
.summary-details-table { width: 100%; min-width: 1050px; border-collapse: collapse; table-layout: fixed; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.summary-details-table th { background: var(--brand); color: var(--table-header-ink); text-align: center; font-weight: 700; padding: 2px 5px; }
.summary-details-table td { padding: 2px 5px; vertical-align: top; border: 0; overflow-wrap: break-word; }
.summary-details-table .summary-value { text-align: right; white-space: nowrap; }
.summary-details-table .summary-header-gap td { height: 18px; padding: 0; }
.summary-details-table .summary-header-rule td { height: 12px; border-bottom: 1px solid var(--grid); }
@media print { .summary-header-scroll { overflow: visible; } .summary-details-table { min-width: 0; font-size: 8px; } }
@media print {
  .source-table thead th, .connection-table th, .summary-details-table th { background: #f1e9e9!important; color: var(--ink)!important; }
}

/* Fabrica DateRangePicker, adapted to the existing MAGNA controls. */
.filter-date-range { min-width: 0; }
.date-range-trigger { gap: 9px; max-width: 310px; }
.date-range-trigger[aria-expanded=true] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-halo); }
.date-range-icon { font-size: 18px; color: var(--brand-hover); line-height: 1; }
.date-range-popover { position: fixed; inset: auto; width: 570px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px rgba(57,39,40,.18); font: 13px/1.45 Arial,Helvetica,sans-serif; }
.date-range-picker { display: grid; grid-template-columns: 164px minmax(0, 1fr); }
.date-range-presets { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--line); }
.date-range-presets button { width: 100%; min-height: 32px; padding: 6px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 13px; text-align: left; }
.date-range-presets button:hover { background: var(--surface-hover); }
.date-range-presets button[aria-pressed=true] { background: var(--brand-subtle); color: var(--brand); font-weight: 600; }
.date-range-presets .date-custom-preset { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 10px; }
.date-range-custom { min-width: 0; padding: 16px; }
.date-range-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.date-range-inputs label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; }
.date-range-inputs input { width: 100%; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid var(--field-border); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 13px; }
.date-range-inputs input[aria-invalid=true] { border-color: var(--error); }
.date-range-month { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 10px; }
.date-range-month strong { text-transform: capitalize; font-size: 14px; }
.date-month-arrow { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; color: var(--ink); background: transparent; font-size: 24px; }
.date-month-arrow:hover:not(:disabled) { background: var(--surface-hover); }
.date-range-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; text-align: center; }
.date-range-calendar>span { padding: 6px 0; color: var(--muted); font-size: 12px; }
.date-range-calendar>button { min-height: 36px; padding: 3px; border: 0; border-radius: 6px; color: var(--ink); background: transparent; font-size: 13px; }
.date-range-calendar>button[data-outside] { color: var(--muted); }
.date-range-calendar>button[aria-pressed=true] { background: var(--brand-subtle); color: var(--brand); }
.date-range-calendar>button[data-endpoint] { background: var(--brand); color: var(--surface); }
.date-range-calendar>button:disabled { opacity: .3; }
.date-range-calendar>button:hover:not(:disabled) { outline: 1px solid var(--brand-hover); }
.date-range-calendar>button:focus-visible { outline-offset: -2px; }
.date-range-footer { position: sticky; bottom: -16px; display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 0 0; background: var(--surface); }
.date-range-status { flex: 1; color: var(--muted); font-size: 12px; }
.date-range-footer .button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.date-range-mobile-heading { display: none; }
.date-filter-note { margin: 0 0 14px; }
@media (max-width:640px) {
  .filter-date-range { width: 100%; }
  .date-range-trigger { width: 100%; max-width: none; }
  .date-range-trigger>span:nth-child(2) { flex: 1; }
  .date-range-popover { inset: auto 12px 12px!important; width: calc(100vw - 24px)!important; max-height: calc(100dvh - 24px); border-radius: 14px; }
  .date-range-popover::backdrop { background: rgba(57,39,40,.24); }
  .date-range-picker { grid-template-columns: minmax(0,1fr); }
  .date-range-mobile-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; }
  .date-range-mobile-heading>button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: var(--surface-muted); color: var(--ink); font-size: 22px; }
  .date-range-presets { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .date-range-presets button { padding: 5px; text-align: center; font-size: 12px; }
  .date-range-presets .date-custom-preset { border: 0; margin: 0; padding: 5px; }
  .date-range-custom { padding: 12px; }
  .date-range-inputs input { font-size: 16px; }
  .date-range-month { margin: 10px 0 5px; }
  .date-range-calendar>button { min-height: 32px; }
  .date-range-footer { bottom: -12px; margin-top: 8px; padding-top: 8px; }
}
@media print { .date-range-popover { display: none!important; } .date-filter-note { color: var(--ink); font-size: 9px; } }

.source-table thead th.name-column { color: var(--table-header-ink); }

/* Claude connector setup follows the owner dashboard's content spacing. */
.claude-page { width: 100%; max-width: 880px; margin: 24px 0; padding: 8px var(--page-gutter) 32px; line-height: 1.65; }
.claude-page h2 { margin: 0 0 12px; color: var(--brand); font-size: 22px; font-weight: 500; }
.claude-page h3 { margin: 0 0 10px; font-size: 16px; }
.claude-page p { margin: 0 0 16px; }
.claude-page a { color: var(--brand); text-underline-offset: 3px; }
.claude-connection { margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); }
.claude-connection label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.claude-url-row { display: flex; gap: 12px; align-items: center; }
.claude-url-row input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--brand); font: inherit; font-size: 13px; }
.claude-url-row button { flex-shrink: 0; min-height: 44px; }
.claude-connection .field-hint { margin: 8px 0 0; }
.claude-steps { margin: 24px 0; padding-left: 24px; }
.claude-steps li { padding-left: 4px; margin-bottom: 18px; }
.claude-page code { padding: 2px 5px; border-radius: 4px; background: var(--surface-muted); }
.claude-access { border-top: 1px solid var(--line); padding-top: 24px; }
@media (max-width: 600px) { .claude-page { margin-top: 20px; padding: 0 16px 28px; } .claude-url-row { align-items: stretch; flex-direction: column; } .claude-url-row input { font-size: 16px; } }