.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: 84px; padding: var(--space-4); border-block-end: var(--line-thin) solid var(--neutral-350); }
.panel-header h2 { margin: 0; font-size: var(--type-20); line-height: var(--leading-tight); word-break: keep-all; }
.icon-button { display: grid; place-items: center; inline-size: var(--target-min); block-size: var(--target-min); padding: 0; border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--surface-000); cursor: pointer; }
.icon-button svg { inline-size: 20px; block-size: 20px; }
.panel-toggle { display: none; min-block-size: var(--target-min); flex: none; padding-inline: var(--space-3); color: var(--company-accent-600); border: var(--line-thin) solid var(--company-accent-600); border-radius: var(--radius-sm); background: var(--surface-000); font-weight: 700; white-space: nowrap; }
.panel-body { min-block-size: 0; overflow-y: auto; padding: var(--space-4); }
.welcome-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); padding-block: var(--space-4) var(--space-6); }
.welcome-panel strong { display: block; margin-block-end: var(--space-1); }
.welcome-panel p, .activity-note p { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.keep-together { white-space: nowrap; }
.soi-portrait { display: grid; place-items: center; inline-size: 64px; block-size: 64px; color: var(--surface-000); background: var(--company-accent-600); border: 4px solid var(--company-accent-100); border-radius: 50%; font-size: var(--type-14); font-weight: 800; }
.panel-body > .secondary-action { inline-size: 100%; }
.activity-note { margin-block-start: var(--space-6); padding: var(--space-4) 0; border-block: var(--line-thin) solid var(--neutral-350); }
.activity-note strong { display: block; margin-block-end: var(--space-2); }
.tool-panel, .employee-form, .floor-form { display: grid; gap: var(--space-4); }
.tool-panel > p, .form-help { margin: 0; max-inline-size: 60ch; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 700; }
.field input, .field select { inline-size: 100%; min-block-size: var(--control-tall); padding: var(--space-3); color: var(--ink-900); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--surface-000); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.form-result { min-block-size: 1.5em; margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.form-result[data-kind="success"] { color: var(--presence-available); }
.form-result[data-kind="error"] { color: var(--status-error-700); }
.panel-section { padding-block: var(--space-4); border-block-start: var(--line-thin) solid var(--neutral-350); }
.panel-section h3 { margin: 0 0 var(--space-3); font-size: var(--type-16); }
.zone-list, .people-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.zone-list li, .people-list li { padding: var(--space-3); background: var(--neutral-050); border-inline-start: 3px solid var(--company-accent-600); line-height: var(--leading-body); word-break: keep-all; }
.recovery-state { display: grid; place-items: center; align-content: center; gap: var(--space-3); min-block-size: 100%; padding: var(--space-8); text-align: center; }
.recovery-state strong { color: var(--status-error-700); font-size: var(--type-20); }
.recovery-state p { max-inline-size: 38ch; margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.upload-drop { display: grid; place-items: center; gap: var(--space-2); min-block-size: 180px; padding: var(--space-6); color: var(--company-accent-600); border: 2px dashed var(--glass-500); border-radius: var(--radius-md); background: var(--company-accent-100); text-align: center; cursor: pointer; }
.upload-drop[data-dragging="true"] { border-style: solid; filter: brightness(.96); }
.upload-drop svg { inline-size: 32px; block-size: 32px; }
.upload-drop span { color: var(--ink-600); font-size: var(--type-14); }
.conversation-chat { display: grid; grid-template-rows: minmax(12rem, 1fr) auto; gap: var(--space-4); min-block-size: 100%; }
.chat-log { display: flex; flex-direction: column; gap: var(--space-2); min-block-size: 12rem; padding: var(--space-3); overflow-y: auto; background: var(--neutral-050); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); }
.chat-bubble { align-self: flex-start; max-inline-size: 86%; margin: 0; padding: var(--space-3); color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-md); line-height: var(--leading-body); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.chat-bubble[data-actor="me"] { align-self: flex-end; color: var(--surface-000); background: var(--company-accent-600); border-color: var(--company-accent-600); }
.chat-composer { display: grid; gap: var(--space-2); }
.chat-composer label { font-weight: 700; }
.chat-composer textarea { inline-size: 100%; padding: var(--space-3); resize: vertical; color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); font: inherit; line-height: var(--leading-body); }
.drive-view { display: grid; gap: var(--space-4); min-inline-size: 0; }
.drive-introduction, .drive-count, .drive-status, .drive-empty { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.drive-search { display: grid; gap: var(--space-2); font-weight: 700; }
.drive-search input { inline-size: 100%; min-block-size: var(--control-tall); padding: var(--space-3); color: var(--ink-900); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--surface-000); }
.drive-count { font-weight: 700; }
.drive-status { min-block-size: 1.5em; padding: var(--space-2) var(--space-3); background: var(--company-accent-100); border-radius: var(--radius-sm); }
.drive-status[data-kind="error"] { color: var(--status-error-700); background: var(--status-error-100); }
.drive-empty { padding: var(--space-4); background: var(--neutral-050); border-inline-start: var(--line-focus) solid var(--neutral-350); }
.drive-tree, .drive-document-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.drive-tree .drive-tree { margin-block: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: var(--line-thin) solid var(--neutral-350); }
.drive-group > details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); cursor: pointer; }
.drive-group-label { min-inline-size: 0; overflow-wrap: anywhere; font-weight: 800; }
.drive-group-count { flex: none; color: var(--ink-600); font-size: var(--type-12); }
.drive-document-list { margin-block-start: var(--space-2); }
.drive-document { display: grid; gap: var(--space-2); min-inline-size: 0; padding: var(--space-3); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-inline-start: var(--line-focus) solid var(--company-accent-600); border-radius: var(--radius-sm); }
.drive-document-name { overflow-wrap: anywhere; line-height: var(--leading-body); }
.drive-document-meta, .drive-document-original { margin: 0; color: var(--ink-600); font-size: var(--type-14); line-height: var(--leading-body); overflow-wrap: anywhere; }
.drive-location { min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); color: var(--company-accent-600); background: var(--company-accent-100); border: var(--line-thin) dashed var(--glass-500); border-radius: var(--radius-sm); text-align: start; line-height: var(--leading-body); overflow-wrap: anywhere; cursor: pointer; }
.drive-location:hover { border-style: solid; }
.drive-document-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.drive-document-actions > * { min-inline-size: 0; text-align: center; }

.board-view { display: grid; gap: var(--space-4); min-inline-size: 0; }
.board-introduction, .board-counts { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.board-status-line { margin: 0; min-block-size: 1.5em; padding: var(--space-2) var(--space-3); color: var(--ink-900); background: var(--company-accent-100); border-radius: var(--radius-sm); line-height: var(--leading-body); }
.board-status-line[data-kind="error"] { color: var(--status-error-700); background: var(--status-error-100); }
.board-groups { display: grid; gap: var(--space-5); }
.board-person h3 { margin: 0 0 var(--space-1); font-size: var(--type-16); }
.board-counts { font-size: var(--type-14); font-weight: 700; }
.board-run-list { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.board-run { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-inline-start: var(--line-focus) solid var(--neutral-350); border-radius: var(--radius-sm); }
.board-run[data-status="running"] { border-inline-start-color: var(--presence-focused); }
.board-run[data-status="completed"] { border-inline-start-color: var(--presence-available); }
.board-run[data-status="failed"] { border-inline-start-color: var(--status-error-700); }
.board-run-title { line-height: var(--leading-tight); overflow-wrap: anywhere; }
.board-run-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; color: var(--ink-600); font-size: var(--type-14); font-variant-numeric: tabular-nums; }
.board-status { padding: 2px var(--space-2); border-radius: var(--radius-round); border: var(--line-thin) solid currentColor; background: var(--neutral-050); color: var(--ink-600); font-size: var(--type-12); font-weight: 800; }
.board-status[data-status="running"] { color: var(--presence-focused); }
.board-status[data-status="completed"] { color: var(--presence-available); }
.board-status[data-status="failed"] { color: var(--status-error-700); }
.board-run-result { margin: 0; color: var(--ink-600); font-size: var(--type-14); line-height: var(--leading-body); word-break: keep-all; }
.board-run-error { margin: 0; color: var(--status-error-700); font-size: var(--type-14); line-height: var(--leading-body); word-break: keep-all; }
.board-timeline-toggle { justify-self: start; min-block-size: var(--target-min); min-inline-size: var(--target-min); padding: var(--space-2) var(--space-3); color: var(--company-accent-600); background: var(--company-accent-100); border: var(--line-thin) solid var(--glass-500); border-radius: var(--radius-sm); font-size: var(--type-14); font-weight: 700; word-break: keep-all; cursor: pointer; }
.board-timeline-toggle:hover { border-style: solid; border-color: var(--company-accent-600); }
.board-timeline { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-1) 0 0 var(--space-2); list-style: none; }
.board-timeline-step { position: relative; display: flex; flex-wrap: wrap; column-gap: var(--space-3); row-gap: var(--space-1); align-items: baseline; padding-inline-start: var(--space-4); }
.board-timeline-step::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.45em; inline-size: 8px; block-size: 8px; background: var(--company-accent-600); border-radius: var(--radius-round); }
.board-timeline-step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 3px; inset-block-start: calc(0.45em + 8px); inset-block-end: calc(-1 * var(--space-2)); inline-size: var(--line-thin); background: var(--neutral-350); }
.board-timeline-note::before { background: var(--neutral-350); }
.board-timeline-label { color: var(--ink-900); font-size: var(--type-14); line-height: var(--leading-body); word-break: keep-all; }
.board-timeline-note .board-timeline-label { color: var(--ink-600); }
.board-timeline-time { color: var(--ink-600); font-size: var(--type-12); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }

.seat-editor { display: grid; gap: var(--space-4); }
.seat-editor-intro, .seat-editor-hint { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.seat-editor-status { padding: var(--space-2) var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); }
.seat-editor-status:empty { min-block-size: 0; padding: 0; background: transparent; }
.seat-editor-done { inline-size: 100%; }
.seat-editor-section h3 { margin: 0 0 var(--space-3); font-size: var(--type-16); }
.seat-editor-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.seat-editor-empty { padding: var(--space-3); color: var(--ink-600); background: var(--neutral-050); border-radius: var(--radius-sm); line-height: var(--leading-body); word-break: keep-all; }
.seat-choice { inline-size: 100%; min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); text-align: start; color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); line-height: var(--leading-body); word-break: keep-all; cursor: pointer; }
.seat-choice:hover { border-color: var(--company-accent-600); }
.seat-choice[aria-pressed="true"] { border-color: var(--company-accent-600); background: var(--company-accent-100); font-weight: 700; }
.seat-editor-detail { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--neutral-050); border-inline-start: var(--line-focus) solid var(--company-accent-600); border-radius: var(--radius-sm); }
.seat-editor-selected { margin: 0; font-weight: 700; line-height: var(--leading-body); word-break: keep-all; }
.seat-editor-occupant span { font-weight: 700; }
.seat-editor-subheading { margin: 0; font-weight: 700; }
.seat-editor-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.seat-move-button, .seat-facing-button { min-inline-size: 0; word-break: keep-all; }

.storage-contents { display: grid; gap: var(--space-2); }
.storage-count { margin: 0; color: var(--ink-600); font-size: var(--type-14); font-weight: 700; }
.storage-child-list, .storage-document-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.storage-child-list li { padding: var(--space-2) var(--space-3); background: var(--company-accent-100); border-radius: var(--radius-sm); font-weight: 700; }
.storage-document-list li { min-inline-size: 0; }
.storage-document-link { display: block; padding: var(--space-2) var(--space-3); color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); text-decoration: none; overflow-wrap: anywhere; line-height: var(--leading-tight); }
.storage-document-link:hover { border-color: var(--company-accent-600); color: var(--company-accent-600); }

.payroll-day, .payroll-content { display: grid; gap: var(--space-4); min-inline-size: 0; }
.payroll-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; }
.payroll-status, .payroll-empty, .payroll-warning, .payroll-result-line { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.payroll-status { padding: var(--space-2) var(--space-3); background: var(--company-accent-100); border-radius: var(--radius-sm); }
.payroll-status[data-kind="error"], .payroll-result-line[data-kind="error"], .payroll-error { color: var(--status-error-700); }
.payroll-card { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-inline-start: var(--line-focus) solid var(--company-accent-600); border-radius: var(--radius-sm); }
.payroll-person h3, .payroll-person p { margin: 0; }
.payroll-person p, .payroll-person small { display: block; margin-block-start: var(--space-1); color: var(--ink-600); overflow-wrap: anywhere; }
.payroll-form { display: grid; gap: var(--space-4); }
.payroll-group { display: grid; gap: var(--space-3); min-inline-size: 0; margin: 0; padding: var(--space-3); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); }
.payroll-group legend { padding-inline: var(--space-1); color: var(--ink-900); font-weight: 800; }
.payroll-group-help { margin: 0; color: var(--ink-600); font-size: var(--type-14); line-height: var(--leading-body); }
.payroll-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.payroll-field { display: grid; gap: var(--space-1); min-inline-size: 0; font-weight: 700; }
.payroll-field input, .payroll-field textarea { inline-size: 100%; min-block-size: var(--control-tall); padding: var(--space-2) var(--space-3); color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); font: inherit; }
.payroll-field textarea { min-block-size: 6rem; resize: vertical; line-height: var(--leading-body); }
.payroll-checks { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); }
.payroll-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2); line-height: var(--leading-body); word-break: keep-all; }
.payroll-check input { inline-size: 20px; block-size: 20px; margin: 2px 0 0; }
.payroll-result { display: grid; gap: var(--space-3); }
.payroll-summary { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); }
.payroll-amounts dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; font-size: var(--type-14); }
.payroll-amounts dt, .payroll-amounts dd { margin: 0; }
.payroll-amounts dd { text-align: end; font-variant-numeric: tabular-nums; }
.payroll-net { margin: 0; padding-block-start: var(--space-2); border-block-start: var(--line-thin) solid var(--neutral-350); line-height: var(--leading-body); }
.payroll-saved { margin: 0; color: var(--presence-available); font-weight: 700; }
.payroll-send { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--company-accent-100); border: var(--line-thin) solid var(--glass-500); border-radius: var(--radius-sm); }
.payroll-send h3, .payroll-send p { margin: 0; }
.payroll-send > p { color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.payroll-sender-form { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; }
.payroll-aliases, .mailbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.payroll-aliases li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.mailbox-item { width: 100%; text-align: left; display: grid; gap: var(--space-1); }
.mailbox-item span, .mailbox-from { color: var(--ink-600); font-size: .85rem; }
.mailbox-list .is-unread .mailbox-item { border-color: var(--company-accent-600); background: var(--company-accent-100); }
.mailbox-detail { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.mailbox-payroll-summary { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--space-2) var(--space-3); margin: 0; }
.mailbox-payroll-summary dt { color: var(--ink-600); }
.mailbox-payroll-summary dd { margin: 0; font-weight: 600; }
.payroll-warning { padding: var(--space-3); background: var(--status-error-100); border-radius: var(--radius-sm); }