:root {
  --surface: #fff;
  --surface-alt: #f4f7f6;
  --surface-accent: #e5f4ec;
  --edge: #dae4e0;
  --ink: #172e28;
  --ink-secondary: #506660;
  --brand-accent: #11634f;
  --muted: var(--ink-secondary);
  --text: var(--ink);
  --bg: #f2f6f5;
  --line: var(--edge);
}
body { color: var(--ink); }
.content { max-width: 1440px; }
.topbar { background: var(--surface); }
.card { border-radius: 16px; box-shadow: 0 6px 24px #17382b08; }
.page-heading h1 { font-weight: 750; letter-spacing: -.035em; }
.page-heading p,.form-note,.hr-note,.handoff-meta,.handoff-search-note,
.page-footer,.member-meta,.member-email,.sync,.breadcrumb,.breadcrumb strong { color: var(--ink-secondary); }
.page-heading p,.form-note,.handoff-meta { font-size: 13px; line-height: 1.55; }
.heading-actions,.theme-options { flex-wrap: wrap; }
.theme-options { display: flex; gap: 8px; }
.theme-toggle { color: var(--brand-accent); min-width: 36px; min-height: 36px; }
:where(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid #438a78; outline-offset: 3px; }
.chat-directory-results { max-height: min(54dvh, 490px); overflow: auto; margin-top: 12px; }
.chat-directory-person {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center;
  width: 100%; padding: 12px; text-align: left; border-bottom: 1px solid var(--edge); border-radius: 8px;
}
.chat-directory-person:hover,.chat-directory-person:focus-visible { background: var(--surface-accent); }
.chat-directory-person strong,.chat-directory-person small { display: block; overflow-wrap: anywhere; }
.chat-directory-person small { color: var(--ink-secondary); margin-top: 3px; }
.chat-directory-person > .icon { grid-column: 4; width: 14px; color: var(--ink-secondary); }
.inventory-stock-card { scroll-margin-top: 16px; }
.inventory-stock-card .search-input { margin-bottom: 12px; }
.inventory-stock-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.inventory-stock-heading h2 { font-size: 16px; }
.inventory-stock-heading .pill { font-size: 11px; white-space: nowrap; }
.inventory-stock-card .card-heading > small { color: var(--ink-secondary); text-align: right; }
.inventory-stock-card .inventory-table td strong { font-size: 16px; font-weight: 650; line-height: 1.45; }
.inventory-stock-card .inventory-table td :is(strong,small) { white-space: normal; overflow-wrap: anywhere; }
.inventory-stock-card .inventory-table :is(th,small) { font-size: 13px; color: var(--ink-secondary); }
.inventory-stock-card .inventory-table b { font-size: 21px; font-variant-numeric: tabular-nums; }
.inventory-stock-card #inventory-search { font-size: 15px; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #18262f;
  --surface-alt: #132029;
  --surface-accent: #21443e;
  --edge: #324550;
  --ink: #f5fafb;
  --ink-secondary: #c1d3d7;
  --brand-accent: #93e5c5;
  --bg: #101a22;
  --white: var(--surface);
  --green: #197761;
  --green-dark: #12483d;
  --mint: var(--surface-accent);
  --shadow: 0 6px 24px #0002;
}
[data-theme="dark"] :is(.card,.metric,.sidebar,.topbar,.bottom-nav,dialog,.auth,.auth-form-wrap,
 .receipt-row,.work-card,.work-metrics article,.receipt-candidate,.notification-row) {
  background: var(--surface); color: var(--ink); border-color: var(--edge);
}
[data-theme="dark"] :is(.chat-channels,.messages,.chat-composer,.calendar-weekdays,.card-bottom-note,.activity-strip,
 .finished-note,.receipt-steps li,.receipt-source,.receipt-autofill,.receipt-original,.work-column,.work-detail-facts,
 .work-photo-picker,.install-tabs,.mobile-install-banner,.connection-flow>span,.handoff-metrics a,th,.token-output,.api-example pre) {
  background: var(--surface-alt); color: var(--ink); border-color: var(--edge);
}
[data-theme="dark"] :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.receipt-review-body input:not([type=checkbox])) {
  background: var(--surface-alt); color: var(--ink); border-color: var(--edge);
}
[data-theme="dark"] :is(.secondary,.subtle,.icon-btn:hover,.channel:hover,.nav-link:hover,.calendar-day:hover,.tire-source-row:hover) {
  background: var(--surface-alt); color: var(--ink); border-color: var(--edge);
}
[data-theme="dark"] :is(.secondary:hover,.channel.selected,.nav-link.active,.receipt-candidate.is-selected,.notification-row.is-unread,
 .notification-row:hover,.calendar-day.selected,.roster-day.today,.tab.active,.install-tabs button.active,.candidate-memory) {
  background: var(--surface-accent); color: var(--brand-accent); border-color: var(--edge);
}
[data-theme="dark"] :is(.focus-card,.auth-story) { background: #183932; border-color: var(--edge); color: var(--ink); }
[data-theme="dark"] :is(.focus-content h2,.work-timer,.workspace strong,.sidebar-user strong,.nav-link,.channel strong,.calendar-day,
 .message-bubble,.handoff-metrics strong,.chat-heading strong,.auth-copy h1,.brand) { color: var(--ink); }
[data-theme="dark"] :is(.eyebrow,.focus-kicker,.focus-detail,.focus-content>p,.workspace small,.sidebar-user small,.nav-label,
 .task-text span,.task-row.completed .task-text strong,.due,.timeline-text span,.timeline-text small,.timeline-time,.timeline-time small,
 .channel small,.channel-label,.chat-heading small,.message-meta,.message-time,.metric p,.metric-note,.timer-caption,.punch-times span,
 .auth-copy p,.auth-note,.inventory-table small,.receipt-row small,.empty-state p,.account-details dt) { color: var(--ink-secondary); }
[data-theme="dark"] :is(.task-row,.task-hint,.handoff-row,.receipt-row,.inventory-table td,.chat-heading,.chat-composer,.week-strip,.modal-footer) {
  border-color: var(--edge);
}
[data-theme="dark"] :is(.text-link,.theme-toggle,.card-heading h2>.icon,.active-dot) { color: var(--brand-accent); }
[data-theme="dark"] :is(.message-bubble,.avatar,.channel-avatar,.workspace-icon,.sub-count,.shift-block,.mint,.neutral,.me-label,.sender-me) {
  background: #27443f; color: #d3f1e6; border-color: var(--edge);
}
[data-theme="dark"] .own .message-bubble { background: #235a4e; color: #f1fffa; }
[data-theme="dark"] :is(.peach,.sand,.priority.high,.priority.medium,.shift-block.draft,.calendar-event.work,.calendar-event.personal) {
  background: #423629; color: #f5d6ad; border-color: var(--edge);
}
[data-theme="dark"] :is(.lavender,.calendar-event.focus,.tone-2) { background: #38374e; color: #e1dbff; }
[data-theme="dark"] :is(.calendar-event,.priority.low,.receipt-row-icon,.focus-circle,.floating-chip) {
  background: #2d4940; color: #d3f1e6; border-color: var(--edge);
}
[data-theme="dark"] .calendar-event.focus { background: #38374e; color: #e1dbff; }
[data-theme="dark"] :is(.calendar-event.work,.calendar-event.personal) { background: #423629; color: #f5d6ad; }
[data-theme="dark"] :is(.danger,.rose,.danger-link,.form-error) { color: #ffc1b6; }
[data-theme="dark"] :is(.danger,.rose) { background: #492c30; border-color: #68434a; }
[data-theme="dark"] .page-footer {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
[data-theme="dark"] .page-footer > span:last-child { font-size: inherit; }
[data-theme="dark"] .page-footer a,
[data-theme="dark"] .bottom-nav > :is(a,button) { color: #fff; font-weight: 700; }
[data-theme="dark"] .bottom-nav > .active,
[data-theme="dark"] .bottom-nav > :is(a,button):is(:focus-visible,:active) {
  color: var(--brand-accent);
  background: var(--surface-accent);
}
[data-theme="dark"] .bottom-nav > .active::before { display: none; }
[data-theme="dark"] .page-footer a:is(:hover,:focus-visible,:active) { color: var(--brand-accent); }
@media (hover: hover) {
  [data-theme="dark"] .bottom-nav > :is(a,button):hover {
    color: var(--brand-accent);
    background: var(--surface-accent);
  }
}

html:has(#modal[open]) { overflow: hidden; overscroll-behavior: none; }
.modal-content { display: contents; }
.calendar-picker-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(760px, calc(100% - 24px));
  max-height: calc(var(--app-height, 100dvh) - 24px);
  padding: 20px;
  overflow: hidden;
}
.calendar-picker-dialog[open] { display: flex; flex-direction: column; }
.calendar-picker-dialog .modal-heading { flex-shrink: 0; margin-bottom: 12px; }
.calendar-picker-content { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.calendar-picker-content .calendar-toolbar { padding: 0 0 12px; }
.calendar-picker-content .calendar-grid { grid-auto-rows: 88px; }
.calendar-picker-content .calendar-day { min-height: 0; gap: 2px; padding: 5px; border-color: var(--edge); }
.calendar-picker-content .calendar-day:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
.calendar-picker-content .calendar-event { line-height: 1.25; }
.calendar-picker-content .legend { color: var(--ink-secondary); }
.calendar-day-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 18px; }
.calendar-day-tools .calendar-day-intro { margin: 0; color: var(--ink-secondary); }
@media (max-width: 600px) {
  .calendar-picker-dialog { padding: 12px; }
  .calendar-picker-content .calendar-grid { grid-auto-rows: 70px; }
  .calendar-picker-content .calendar-day { padding: 3px 2px; gap: 1px; }
  .calendar-picker-content .calendar-event { padding: 1px 2px; }
}
@media (max-width: 700px), (max-width: 1024px) and (pointer: coarse) {
  html.modal-scroll-locked { overflow: hidden; overscroll-behavior: none; }
  html.modal-scroll-locked body {
    position: fixed;
    inset: var(--modal-scroll-offset, 0px) 0 auto;
    width: 100%;
    overflow: clip;
  }
  #modal[open] {
    --modal-top-gap: max(12px, env(safe-area-inset-top));
    --modal-bottom-gap: max(12px, env(safe-area-inset-bottom));
    position: fixed;
    inset: var(--modal-top-gap) 0 auto;
    margin: 0 auto;
    width: min(560px, calc(100% - 24px));
    max-height: calc(var(--app-height, 100dvh) - var(--modal-top-gap) - var(--modal-bottom-gap));
    box-sizing: border-box;
    min-width: 0;
    overflow: clip;
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
    display: flex;
    flex-direction: column;
  }
  #modal .modal-heading { flex-shrink: 0; margin-bottom: 12px; }
  #modal .modal-content {
    display: block;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    touch-action: pan-y pinch-zoom;
    overflow-wrap: anywhere;
    scroll-padding-block: 12px;
  }
  #modal .modal-content :is(input, select, textarea, img, video) {
    min-width: 0;
    max-width: 100%;
  }
  #modal .calendar-picker-content { overflow: visible; }
  #modal .calendar-day-existing {
    order: 0;
    border: 0;
    border-top: 1px solid var(--line);
    padding: 15px 0 0;
  }
}
[data-theme="dark"] .topbar-tools>.avatar { border-color: var(--surface); }
[data-theme="dark"] :is(.nav-link,.channel strong,.inventory-stock-card .inventory-table th) { font-weight: 600; }
[data-theme="dark"] :is(.form-note,.page-heading p,.handoff-meta,.inventory-stock-card .inventory-table small) { font-weight: 500; }
[data-theme="dark"] .inventory-stock-card .inventory-table td :is(strong,b) { color: var(--ink); font-weight: 700; }
[data-theme="dark"] .inventory-stock-card input::placeholder { color: var(--ink-secondary); opacity: 1; }

@media (max-width: 700px) {
  .keyboard-open .auth-form-wrap { padding-bottom: calc(32px + var(--keyboard-inset, 0px)); }
  .ios-device:has(#auth-form[data-kind="login"]) {
    scroll-padding-block: 12px;
    overscroll-behavior-y: none;
  }
  .ios-device .auth:has(#auth-form[data-kind="login"]) {
    grid-template-rows: auto 1fr;
  }
  .ios-device .auth:has(#auth-form[data-kind="login"]) .auth-story {
    padding-block: max(14px, env(safe-area-inset-top)) 14px;
  }
  .ios-device .auth:has(#auth-form[data-kind="login"]) :is(.auth-copy,.auth-art) {
    display: none;
  }
  .ios-device .auth:has(#auth-form[data-kind="login"]) .auth-form-wrap {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
  .keyboard-open .main[data-view="chat"] {
    position: fixed;
    inset: var(--app-viewport-top, 0px) 0 auto;
    width: 100%;
  }
  .ios-device:has(.main[data-view="chat"]),
  .ios-device:has(.main[data-view="chat"]) body {
    overflow: hidden;
    overscroll-behavior-y: none;
  }
  .ios-device:has(.main[data-view="chat"]) body {
    position: fixed;
    inset: 0;
  }
  .ios-device.keyboard-open .main[data-view="chat"] {
    top: var(--chat-keyboard-top, 0px);
  }
  .ios-device:not(.keyboard-open) .main[data-view="chat"] {
    position: fixed;
    inset: 0 0 auto;
  }
  .main[data-view="chat"] .messages:has(> .empty) {
    overflow: clip;
    overscroll-behavior: none;
  }
  .main[data-view="chat"] .messages > .empty {
    min-height: 0;
    padding-block: 0;
  }
  .topbar-tools { gap: 8px; }
  .page-heading h1 { font-size: 23px; }
  .chat-push-action { display: none; }
  .chat-directory-person { min-height: 52px; }
  .heading-actions .btn { min-height: 39px; }
  [data-view="inventory"] .page-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  [data-view="inventory"] .heading-actions { max-width: none; justify-content: flex-start; }
  [data-view="inventory"] .heading-actions > .inventory-stock-shortcut { font-size: 12px; gap: 6px; padding-inline: 10px; }
}