:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-synthesis: none;
  font-variant-emoji: emoji;
  --ink: #112616;
  --gold: #c6a15b;
  --brand-green: #112616;
  --brand-green-hover: #0c1d10;
  --brand-green-soft: #edf2ed;
  --brand-green-border: #c6d2c8;
  --paper: #f7f5f0;
  --line: #e5e1d8;
  --surface: #fff;
  --muted: #657066;
  --muted-strong: #4d574e;
  --success: #315c4a;
  --success-soft: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #8b6b35;
  --warning-soft: #fbf7ee;
  --warning-border: #e8d9b6;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html {
  scroll-padding-top: calc(4.5rem + var(--sat));
  scroll-padding-bottom: calc(7rem + var(--sab));
}
body { margin: 0; background: var(--paper); color: var(--ink); }
img, video { max-width: 100%; }
#app, #content, .panel, .super-search { min-width: 0; max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: calc(14px + var(--sat)) calc(20px + var(--sar)) 14px calc(20px + var(--sal));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(198, 161, 91, 0.35);
  min-width: 0;
  max-width: 100%;
}
.site-header h1 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header p { margin: 0; font-size: 0.72rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.78); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 180px; }
.brand > div { min-width: 0; max-width: 100%; }
.brand__logo-box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(198, 161, 91, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.brand__logo { display: block; border-radius: 6px; }

.auth-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-width: 0; }
.auth-actions button { min-height: 44px; max-width: 100%; }
html[dir="rtl"] .site-header, html[dir="rtl"] .auth-actions, html[dir="rtl"] .legal-header { direction: rtl; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="password"], html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"], html[dir="rtl"] input[inputmode="decimal"], html[dir="rtl"] input[inputmode="numeric"] { direction: ltr; text-align: start; }
html[dir="rtl"] body { overflow-x: clip; }
html[dir="rtl"] .site-header, html[dir="rtl"] .auth-actions, html[dir="rtl"] .nav, html[dir="rtl"] .manager-nav,
html[dir="rtl"] .worker-nav, html[dir="rtl"] .modal-dialog, html[dir="rtl"] .landing, html[dir="rtl"] table,
html[dir="rtl"] .job-row, html[dir="rtl"] .stage-tabs, html[dir="rtl"] form { direction: rtl; }
html[dir="rtl"] .site-header > *, html[dir="rtl"] .auth-actions > *, html[dir="rtl"] .nav button,
html[dir="rtl"] .modal-dialog, html[dir="rtl"] .landing__hero, html[dir="rtl"] .department-card,
html[dir="rtl"] .job-row, html[dir="rtl"] td, html[dir="rtl"] th { min-width: 0; }
html[dir="rtl"] button, html[dir="rtl"] a, html[dir="rtl"] label, html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] p, html[dir="rtl"] li { overflow-wrap: anywhere; }
html[dir="rtl"] .chat-message.is-own { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .cad-preview, html[dir="rtl"] canvas, html[dir="rtl"] img, html[dir="rtl"] video,
html[dir="rtl"] .demo-card__media { direction: ltr; }
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: start; max-width: 100%; }
button {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
button:hover { transform: translateY(-1px); }
button.primary { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
button.primary:hover { background: var(--brand-green-hover); border-color: var(--brand-green-hover); }
button.danger { background: var(--surface); border-color: var(--danger-border); color: var(--danger); }
button.danger:hover { background: var(--danger-soft); }
button.hidden, .hidden { display: none !important; }
.site-header button, #marketing button, #auth button { transition: none; }
.site-header button:hover, #marketing button:hover, #auth button:hover { transform: none; }

.panel {
  background: var(--surface);
  margin: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 14px;
  min-width: 0;
  max-width: 100%;
}
#app, #content { min-width: 0; max-width: 100%; }
.department-empty {
  margin: 8px 0;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--muted-strong);
}
.dashboard-departments { margin-top: 16px; }
.dashboard-departments h3, .dashboard-followup h3 { margin: 0 0 8px; font-size: 1rem; }
.dashboard-departments__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.dashboard-departments__list button, .nav-department {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  text-align: left;
}
.dashboard-followup { margin-top: 16px; }
.nav-icon { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.nav-menu-group { display: grid; gap: 2px; }
.nav-menu-label {
  margin: 10px 4px 2px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-menu-group:first-child .nav-menu-label { margin-top: 0; }

.stack { display: grid; gap: 10px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface);
  font-size: 16px;
  scroll-margin-top: calc(4.75rem + var(--sat));
  scroll-margin-bottom: calc(7.5rem + var(--sab));
}
input[type="checkbox"], input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  padding: 0;
  flex: 0 0 1.125rem;
  accent-color: var(--brand-green);
  vertical-align: middle;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--gold);
  outline: 2px solid rgba(198, 161, 91, .28);
  outline-offset: 1px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px;
  min-width: 0;
  max-width: 100%;
}
.nav span {
  background: var(--paper);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.9rem;
}

.site-footer {
  margin-top: 32px;
  padding: 22px max(20px, var(--sar), calc((100% - 1200px) / 2)) calc(22px + var(--sab)) max(20px, var(--sal), calc((100% - 1200px) / 2));
  border-top: 1px solid rgba(198, 161, 91, 0.45);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.8);
}
.site-footer p { margin: 0 0 12px; font-size: 0.88rem; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal-nav a { color: #fff; font-size: 0.88rem; text-underline-offset: 3px; }
.legal-nav a:hover { color: #e7c987; }

.legal-page { max-width: 1040px; margin: 0 auto; padding: var(--sat) max(16px, var(--sar)) var(--sab) max(16px, var(--sal)); }
.legal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.legal-header img { width: 44px; height: 44px; border-radius: 8px; background: #fff; }
.legal-header a { color: var(--ink); text-decoration: none; }
.legal-header strong { display: block; letter-spacing: 0.08em; }
.legal-header span { color: #555; font-size: 0.75rem; letter-spacing: 0.08em; }
.legal-content {
  margin: 24px 0;
  padding: clamp(20px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  line-height: 1.7;
}
.legal-content h1 { margin: 0 0 8px; color: var(--ink); font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.2; }
.legal-content h2 { margin: 28px 0 8px; color: var(--ink); font-size: 1.2rem; }
.legal-content h3 { margin: 20px 0 6px; font-size: 1rem; }
.legal-content p, .legal-content ul { margin: 8px 0; }
.legal-content li + li { margin-top: 5px; }
.legal-content a { color: var(--brand-green); text-underline-offset: 3px; }
.legal-kicker { color: #765a20; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.legal-updated { color: #555; font-size: 0.9rem; }
.legal-notice { margin-top: 24px !important; padding: 14px 16px; border-left: 3px solid var(--gold); background: #f7f5f0; }
.legal-page .site-footer { margin: 0 -16px; padding-right: 16px; padding-left: 16px; }

@media (max-width: 600px) {
  .site-header { gap: 8px; padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 8px calc(10px + var(--sal)); }
  .site-header p { display: none; }
  .brand { gap: 8px; }
  .brand__logo { width: 36px; height: 36px; }
  .site-header h1 { font-size: 1rem; letter-spacing: .04em; }
  .auth-actions button { padding: 8px 10px; }
  .site-footer { padding: 20px max(16px, var(--sar)) calc(20px + var(--sab)) max(16px, var(--sal)); }
  .legal-nav { gap: 10px 14px; }
  .legal-content { margin: 16px 0; padding: 20px 16px; }
  .legal-page .site-footer { margin: 0 -16px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}

.cards { display: grid; gap: 10px; }
.cad-panel > .card, .cad-panel > .stats { margin-top: 16px; }
.cad-filters, .cad-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 16px 0; }
.cad-gallery {
  max-height: 60vh;
  max-height: 60dvh;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  align-content: start;
  grid-auto-rows: max-content;
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}
.cad-gallery:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.cad-filters label { display: grid; gap: 6px; }
.cad-file { min-width: 0; overflow-wrap: anywhere; }
.cad-upload { position: relative; margin: 16px 0; }
.cad-picker-control { position: relative; overflow: hidden; min-height: 44px; }
.cad-file-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; border: 0; }
.cad-picker-control:focus-within { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.cad-picker-control:has(input:disabled) { opacity: .6; }
.cad-drop-zone { padding: 24px; border: 2px dashed var(--line); border-radius: 12px; background: var(--paper); text-align: center; }
.cad-drop-zone.is-dragging, .cad-upload:focus-within .cad-drop-zone { border-color: var(--brand-green); }
.cad-drop-zone p { margin: 12px 0 0; }
.cad-folder .actions { margin-top: 12px; }
.cad-section { margin-top: 16px; }
.cad-section > summary { cursor: pointer; font-weight: 700; }
.cad-file-list { display: grid; gap: 10px; margin: 16px 0; }
.cad-file-list .cad-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; }
.cad-file-list .cad-file p { margin: 0; }
@media (max-width: 600px) {
  .cad-file-list .cad-file { grid-template-columns: minmax(0, 1fr); }
}
.cad-preview { width: 100%; height: 180px; object-fit: contain; border-radius: 8px; }
.cad-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.cad-panel, .cad-panel * { min-width: 0; }
.cad-panel { overflow-wrap: anywhere; }
.cad-panel input, .cad-panel textarea, .cad-panel select,
.job-command-center input, .job-command-center textarea, .job-command-center select { font-size: 16px; max-width: 100%; }
.cad-panel textarea { resize: vertical; }
textarea.cad-description-input { min-width: 0; max-width: 100%; font-size: 16px; resize: vertical; }
.cad-panel button, .job-command-center button { min-height: 44px; white-space: normal; }
.cad-panel .accounting-breadcrumbs { flex-wrap: wrap; }
.cad-job-list { display: grid; gap: 12px; }
.cad-assigned-job { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; }
.cad-assigned-job strong { display: block; margin-top: 8px; }
.cad-assigned-job p { margin: 6px 0; }
.cad-panel .job-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.cad-specifications { margin-top: 16px; }
.cad-panel .actions { flex-wrap: wrap; }
dialog.cad-print-dialog {
  width: min(480px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
}
dialog.cad-print-dialog:not([open]) { display: none; }
.cad-print-dialog h2 { margin-top: 0; font-size: 1.35rem; }
.cad-print-dialog::backdrop { background: rgba(17, 38, 22, .7); }
.cad-print-dialog .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cad-print-dialog .actions button { flex: 1 1 140px; }
.job-command-center, .job-command-center__heading > div, .job-command-center .stack > label { min-width: 0; overflow-wrap: anywhere; }
.job-command-center .job-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.job-command-center .job-facts > div { min-width: 0; }
.job-command-center .job-stage-picker, .job-command-center .job-priority-picker { flex-wrap: wrap; max-width: 100%; }
.job-command-center .job-stage-picker select { min-width: 0; max-width: 100%; }
.job-command-center .production-journey { grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr)); overflow: visible; }
.assign-form #employee-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-height: 40vh;
  max-height: 40dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.assign-form .employee-option { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 12px; cursor: pointer; }
.assign-form .employee-option input { width: 20px; height: 20px; flex: 0 0 20px; }
.assign-form .employee-option > span { min-width: 0; overflow-wrap: anywhere; }
.assign-form .employee-option:has(input:checked) { outline: 2px solid var(--brand-green); outline-offset: -2px; }
.assign-form select, .create-job-form select { min-width: 0; max-width: 100%; min-height: 44px; }
.create-job-form, .create-job-form > label { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .cad-assigned-job { grid-template-columns: minmax(0, 1fr) auto; }
  .assign-form #employee-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.actions button { min-height: 46px; min-width: 0; white-space: normal; }
@media (max-width: 360px) {
  .actions { grid-template-columns: minmax(0, 1fr); }
}

.board {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.column {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: var(--paper);
}
.job-row {
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.stats div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.stats strong { font-size: 1.3rem; }

.notice {
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
}
.notice.unread { border-color: var(--brand-green-border); background: var(--brand-green-soft); }
.muted { color: var(--muted); }

.accounting-panel { min-width: 0; }
.worker-home-mode .accounting-panel { margin-bottom: 180px; }
.accounting-panel h2, .accounting-panel h3 { overflow-wrap: anywhere; }
.accounting-panel details, .accounting-panel .stats, .accounting-panel .cards,
.accounting-assignment-panel { margin-top: 16px; }
.accounting-panel summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.accounting-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.accounting-breadcrumbs button { font-size: .85rem; }
.accounting-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.accounting-form-grid, .accounting-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.accounting-panel label { display: grid; gap: 6px; min-width: 0; }
.accounting-panel fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.accounting-line-item { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.accounting-permissions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.accounting-permissions label { display: flex; align-items: center; }
.accounting-permissions input { width: auto; }
.accounting-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.accounting-details dt { color: var(--muted); }
.accounting-details dd { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.accounting-work { white-space: pre-wrap; overflow-wrap: anywhere; }
.accounting-panel button:disabled { cursor: wait; opacity: .6; }
.casting-panel { min-width: 0; }
.worker-home-mode .casting-panel { margin-bottom: 180px; }
.worker-home-mode .casting-panel button,
.worker-home-mode .casting-panel input,
.worker-home-mode .casting-panel select,
.worker-home-mode .casting-panel textarea,
.worker-home-mode .casting-panel a {
  scroll-margin-bottom: 180px;
  scroll-margin-top: 12px;
}
.casting-panel h2, .casting-panel h3 { overflow-wrap: anywhere; }
.casting-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; min-width: 0; }
.casting-measure { margin: 0; }
.casting-measure legend { padding: 0 4px; font-weight: 700; }
.casting-summary {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  margin: 8px 0 0; padding: 0;
}
.casting-summary strong { font-size: 1.15rem; }
.casting-summary--flag { color: var(--danger); }
.casting-sheet .actions { grid-template-columns: minmax(0, 1fr); }
.casting-report { min-width: 0; margin: 12px 0; }
.casting-report .job-facts dd, .casting-report-jobs li { overflow-wrap: anywhere; }
.casting-report-jobs { list-style: none; display: grid; gap: 8px; margin: 12px 0 0; padding: 0; }
.casting-report-jobs li { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.casting-job-weights { margin-top: 12px; }
.casting-job-weights .casting-weights { margin-top: 8px; }
.casting-job-weights .casting-weights p { grid-column: 1 / -1; margin: 0; }
.job-invoice { margin: 10px 0; }
.casting-nav, .casting-filters, .casting-form-grid, .casting-totals { display: grid; gap: 12px; }
.casting-nav { grid-auto-flow: column; justify-content: start; }
.casting-filters, .casting-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0; }
.casting-panel label { display: grid; gap: 6px; min-width: 0; }
.casting-panel fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.casting-panel button, .casting-panel input:not([type="checkbox"]):not([type="radio"]), .casting-panel select, .casting-panel textarea { min-height: 44px; }
.casting-panel textarea { min-height: 96px; }
.casting-check { align-items: center; grid-template-columns: auto 1fr; }
.casting-job { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; width: 100%; min-height: 48px; cursor: pointer; }
.casting-job input { width: 1.35rem; height: 1.35rem; margin: 0; }
.casting-selection { margin: 12px 0; position: static; }
.casting-select-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 12px; }
.casting-selected { list-style: none; display: grid; gap: 8px; margin: 8px 0; padding: 0; }
.casting-selected li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--surface);
}
.casting-selected li span { min-width: 0; overflow-wrap: anywhere; }
.casting-groups { display: grid; gap: 12px; }
.casting-group ul { margin: 8px 0 0; padding-left: 1.1rem; }
.casting-review {
  width: min(640px, calc(100vw - 24px));
  max-height: min(85dvh, 720px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: var(--surface);
  color: inherit;
  font: inherit;
}
.casting-review::backdrop { background: rgba(17, 38, 22, .45); }
.casting-review h3, .casting-review h4 { overflow-wrap: anywhere; }
.visibility-settings { max-width: 420px; }
.visibility-toggle { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.visibility-toggle input { width: 1.25rem; height: 1.25rem; }
.casting-check input { width: auto; min-height: 24px; }
.casting-list { display: grid; gap: 12px; }
.casting-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.casting-panel table { width: 100%; border-collapse: collapse; }
.casting-panel th, .casting-panel td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.casting-flags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.casting-flag { border: 1px solid var(--warning-border); background: var(--warning-soft); border-radius: 999px; padding: 4px 10px; }
.casting-flag--negative_difference, .casting-flag--component_exceeds_input { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.casting-threshold { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; margin-bottom: 12px; }
.casting-panel button:disabled { cursor: wait; opacity: .6; }
@media (max-width: 800px), (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .casting-filters, .casting-form-grid, .casting-threshold, .casting-weights { grid-template-columns: 1fr; }
  .casting-nav { grid-auto-flow: row; }
  .casting-review { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 12px; margin: 8px; }
  .casting-selected li { align-items: stretch; flex-wrap: wrap; }
  .casting-selected li button, .casting-select-tools button { width: 100%; }
}
@media (max-width: 600px) {
  .accounting-form-grid, .accounting-filters, .accounting-details { grid-template-columns: 1fr; }
  .accounting-line-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-line-item label:first-child { grid-column: 1 / -1; }
  .accounting-breadcrumbs button { max-width: 100%; overflow-wrap: anywhere; }
}

.invoice-directory { display: grid; gap: 10px; }
.invoice-row {
  display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(90px, .7fr) minmax(120px, 1.3fr) .8fr .8fr .8fr auto;
  gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface);
}
.invoice-row .muted { display: block; font-size: .75rem; }
.invoice-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: .75rem; font-weight: 700; border: 1px solid var(--line); }
.invoice-status--draft { background: var(--paper); }
.invoice-status--sent { background: var(--brand-green-soft); border-color: var(--brand-green-border); }
.invoice-status--overdue { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.invoice-status--paid { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.invoice-status--cancelled { background: var(--paper); color: var(--muted); }
.invoice-actions, .invoice-pane-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.invoice-actions button, .invoice-pane-toggle button, .invoice-editor button, .invoice-line button { min-height: 44px; }
.invoice-builder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 16px; align-items: start; }
.invoice-editor fieldset { margin: 0; }
.invoice-editor textarea { min-height: 72px; }
.invoice-wide { grid-column: 1 / -1; }
.invoice-check { display: flex; align-items: center; gap: 8px; }
.invoice-check input { width: auto; min-height: 24px; }
.invoice-methods, .invoice-line-grid, .invoice-charge { display: grid; gap: 10px; }
.invoice-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invoice-charge { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) auto; align-items: end; margin-bottom: 8px; }
.invoice-line { margin-bottom: 12px; }
.invoice-preview-column { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.invoice-sheet {
  background: #fff; color: #1c1915; border: 1px solid var(--line); border-radius: 12px; padding: 22px;
  box-shadow: 0 10px 30px rgba(17, 38, 22, .06); font-family: Georgia, "Iowan Old Style", Palatino, serif;
}
.invoice-sheet-header { display: flex; justify-content: space-between; gap: 16px; border-top: 8px solid var(--invoice-primary, #112616); padding-top: 14px; }
.invoice-brand, .invoice-logo-place-center .invoice-brand { display: flex; gap: 12px; align-items: flex-start; }
.invoice-logo-place-center .invoice-brand { flex-direction: column; align-items: center; text-align: center; }
.invoice-logo-place-right .invoice-brand { flex-direction: row-reverse; }
.invoice-logo { width: auto; max-width: min(180px, 100%); height: auto; object-fit: contain; }
.invoice-sheet h3 { margin: 0 0 6px; color: var(--invoice-ink, #112616); font-size: 1.35rem; }
.invoice-sheet p { margin: 0; white-space: pre-wrap; }
.invoice-meta { text-align: right; min-width: min(140px, 100%); }
.invoice-kicker { letter-spacing: .12em; text-transform: uppercase; color: var(--invoice-accent-ink, #c6a15b); font-size: .72rem; font-weight: 700; }
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.invoice-table { width: 100%; border-collapse: collapse; font-family: Inter, "Segoe UI", sans-serif; font-size: .86rem; }
.invoice-table th { text-align: left; background: var(--invoice-primary, #112616); color: var(--invoice-header-ink, #fff); padding: 8px; }
.invoice-table td { padding: 8px; border-bottom: 1px solid #e5e1d8; vertical-align: top; }
.invoice-table th:nth-child(2), .invoice-table td:nth-child(2), .invoice-table .num { white-space: nowrap; }
.invoice-table .num, .invoice-totals { text-align: right; }
.invoice-detail { color: #657066; font-size: .78rem; }
.invoice-totals { margin-left: auto; width: min(100%, 280px); display: grid; gap: 6px; margin-top: 12px; font-family: Inter, "Segoe UI", sans-serif; }
.invoice-totals div, .invoice-grand { display: flex; justify-content: space-between; gap: 12px; }
.invoice-grand { border-top: 2px solid var(--invoice-accent, #c6a15b); padding-top: 6px; font-size: 1.05rem; color: var(--invoice-ink, #112616); }
.invoice-calc-error { color: var(--danger); text-align: left; }
.invoice-notes { margin-top: 16px; font-size: .9rem; }
.invoice-sheet footer { margin-top: 16px; border-top: 1px solid #e5e1d8; padding-top: 10px; text-align: center; }
.invoice-send-dialog { border: 0; border-radius: 16px; padding: 18px; width: min(520px, calc(100vw - 24px - var(--sal) - var(--sar))); max-height: calc(100dvh - 24px - var(--sat) - var(--sab)); overflow: auto; }
.invoice-send-dialog::backdrop { background: rgba(17, 38, 22, .45); }
.invoice-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.invoice-pane-toggle { display: none; }
@media (max-width: 900px) {
  .invoice-builder, .invoice-row, .invoice-parties, .invoice-line-grid, .invoice-charge { grid-template-columns: 1fr; }
  .invoice-preview-column { position: static; max-height: none; }
  .invoice-pane-toggle { display: flex; }
  .invoice-builder:not(.invoice-builder--preview) .invoice-preview-column { display: none; }
  .invoice-builder.invoice-builder--preview .invoice-editor { display: none; }
  .invoice-sheet-header { flex-direction: column; }
  .invoice-meta { text-align: left; }
}
@media print {
  .site-header, .nav, .site-footer, .accounting-breadcrumbs, .invoice-editor, .invoice-actions, .invoice-pane-toggle, [data-accounting-feedback] { display: none !important; }
  .invoice-preview-column, .invoice-sheet, .invoice-sheet * { visibility: visible; }
  .panel, .invoice-builder { display: block; margin: 0; border: 0; box-shadow: none; }
  .invoice-sheet { box-shadow: none; border: 0; }
}

/* ==================== PUBLIC LANDING PAGE ==================== */
#marketing.landing {
  margin: 0;
  padding: clamp(52px, 7vw, 100px) max(20px, calc((100% - 1120px) / 2)) 0;
  background: var(--paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--brand-green);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

.landing__hero {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 72px;
}

.landing__wordmark {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.24em;
}

.landing__hero .eyebrow {
  color: var(--muted-strong);
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  margin: 0 0 36px;
}

.landing__hero h2 {
  font-size: clamp(2rem, 4.1vw, 3.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

.landing__subheadline {
  font-size: clamp(1.35rem, 3vw, 2.35rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 12px 0 32px;
}

.landing__lede {
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.75;
  color: var(--muted-strong);
  max-width: 640px;
  margin: 0 auto;
}

.landing__supporting-copy {
  max-width: 640px;
  margin: 8px auto 0;
  color: var(--muted-strong);
  font-size: 1rem;
  line-height: 1.75;
}

.landing__actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.landing__contact-sales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(198, 161, 91, 0.55);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.landing__contact-sales:hover {
  background: #fdfbf7;
  border-color: var(--gold);
}

.landing__contact-sales:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.role-selection {
  margin: 0 auto 88px;
  text-align: center;
}

.role-selection h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}

.role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}

.role-card {
  background: rgba(255, 255, 255, 0.55);
  border: 0;
  border-radius: 16px;
  padding: clamp(24px, 4vw, 32px);
  box-shadow: 0 4px 24px rgba(17, 38, 22, 0.025);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.role-card__icon {
  display: none;
}

.role-card h3 {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
}

.role-card p {
  color: #4e5b50;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 28px;
}

.role-card__actions {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  flex-wrap: wrap;
}

.role-card__actions button {
  flex: 1 1 130px;
  min-height: 48px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
}

.landing__departments {
  border-top: 1px solid rgba(198, 161, 91, 0.3);
  padding-top: clamp(48px, 6vw, 72px);
}

.landing__section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.landing__section-heading .eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--muted-strong);
  margin: 0 0 14px;
}

.landing__section-heading h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0 0 16px;
}

.landing__section-heading > p:last-child {
  color: var(--muted-strong);
  line-height: 1.7;
  margin: 0;
}

.department-grid, .landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.landing__features { margin: 0 0 clamp(48px, 6vw, 72px); }

.department-card, .landing-feature {
  min-width: 0;
  background: var(--brand-green);
  color: var(--paper);
  border-radius: 16px;
  padding: clamp(24px, 3.5vw, 40px);
  transition: transform .16s ease;
}

.department-card:hover, .landing-feature:hover { transform: translateY(-2px); }

.department-card__number {
  display: block;
  color: #d9c69e;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.landing-feature__icon { display: flex; width: 44px; height: 44px; margin-bottom: 16px; color: #d9c69e; }
.landing-feature__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.landing-feature__link {
  display: inline-flex; align-items: center; min-height: 44px; margin: 4px 20px 16px;
  color: #d9c69e; font-weight: 650; text-underline-offset: 3px;
}
.landing-feature__link:hover { color: var(--paper); }
.landing-feature__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.landing-feature { overflow: hidden; overflow-wrap: anywhere; display: flex; flex-direction: column; padding: 0; }

.demo-card__open {
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
}
.demo-card__open:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.demo-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0c1d10;
  overflow: hidden;
}
.demo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform .45s ease;
}
.landing-feature:hover .demo-card__media img { transform: scale(1.035); }
.demo-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17, 38, 22, .45), rgba(17, 38, 22, .05) 48%, rgba(17, 38, 22, .12));
  pointer-events: none;
}
.demo-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(247, 245, 240, .92);
  color: var(--brand-green);
  box-shadow: 0 10px 28px rgba(12, 29, 16, .28);
  transition: transform .2s ease, background .2s ease;
}
.demo-card__play svg { width: 22px; height: 22px; margin-left: 2px; fill: currentColor; }
.landing-feature:hover .demo-card__play { transform: scale(1.06); background: #fff; }
.demo-card__duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17, 38, 22, .78);
  color: var(--paper);
  font-size: .75rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.demo-card__copy {
  display: grid;
  gap: 8px;
  padding: 18px 20px 6px;
}
.demo-card__kicker {
  color: #d9c69e;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.demo-card__title {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--paper);
}
.demo-card__summary {
  color: #e0e5dd;
  font-size: .95rem;
  line-height: 1.55;
}

.demo-modal[hidden] { display: none; }
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));
}
.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 14, .72);
}
.demo-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: calc(100dvh - 24px - var(--sat) - var(--sab));
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.demo-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-modal__kicker {
  margin: 0;
  color: var(--muted-strong);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.demo-modal__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--brand-green);
  font-size: 1.6rem;
  line-height: 1;
}
.demo-modal__close:focus-visible, .demo-modal__feature:focus-visible, .demo-modal__sales:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 3px;
}
.demo-modal__dialog h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.3;
}
.demo-modal__dialog #demo-player-summary { margin: 0 0 14px; color: var(--muted-strong); line-height: 1.5; }
.demo-modal__stage {
  position: relative;
  background: #0b140d;
  border-radius: 12px;
  overflow: hidden;
  min-height: 120px;
}
.demo-modal__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #f7f5f0;
  cursor: pointer;
}
.demo-modal__poster img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #f7f5f0;
}
.demo-modal__stage video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62dvh, calc(100dvh - 250px));
  background: #0b140d;
  object-fit: contain;
}
.demo-modal__status { min-height: 1.4em; margin: 8px 0 0; color: var(--muted-strong); }
.demo-modal__status:empty { display: none; }
.demo-modal__status.is-error { color: var(--danger); }
.demo-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 12px;
}
.demo-modal__feature, .demo-modal__sales {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--brand-green);
  font-weight: 650;
  text-underline-offset: 3px;
}
html.demo-modal-open, html.demo-modal-open body { overflow: hidden; }
@media (max-height: 520px) {
  .demo-modal__dialog { padding: 10px 12px 12px; }
  .demo-modal__dialog #demo-player-summary { display: none; }
  .demo-modal__stage video { max-height: calc(100dvh - 150px); }
}
@media (min-width: 1100px) {
  .landing-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-feature, .demo-card__media img, .demo-card__play { transition: none; }
  .landing-feature:hover, .landing-feature:hover .demo-card__media img, .landing-feature:hover .demo-card__play { transform: none; }
}

.department-card h3, .landing-feature h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.department-card__tagline {
  margin: 0 0 24px;
  color: var(--paper);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.department-card ul,
.landing-feature ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  color: #e0e5dd;
  font-size: 0.95rem;
  line-height: 1.6;
}

.department-card li,
.landing-feature li {
  position: relative;
  padding-left: 18px;
}

.department-card li + li,
.landing-feature li + li { margin-top: 10px; }
.department-card li::before,
.landing-feature li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

.department-card__note {
  color: #e0e5dd;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 24px 0 0;
}

.department-card--manager {
  grid-column: 1 / -1;
}

.manager-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.manager-features h4 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 18px;
}

.manager-features ul,
.manager-attendance p {
  color: #e0e5dd;
  font-size: 0.95rem;
  line-height: 1.7;
}

.manager-attendance {
  border-left: 1px solid rgba(198, 161, 91, 0.4);
  padding-left: 28px;
}

.manager-attendance p { margin: 0 0 20px; }
.manager-attendance .attendance-statuses { display: flex; flex-wrap: wrap; gap: 8px; }
.manager-attendance .attendance-statuses li {
  margin: 0;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(247, 245, 240, 0.09);
  font-size: 0.8rem;
}
.attendance-statuses li::before { content: none; }

.landing__closing {
  margin: 0;
  padding: clamp(64px, 9vw, 112px) 0;
  font-size: clamp(1.65rem, 3.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
}

.landing__closing::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 28px;
}

.landing__closing span { display: block; }

@media (max-width: 800px) {
  .manager-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manager-attendance {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid rgba(198, 161, 91, 0.4);
    padding: 24px 0 0;
  }
}

@media (max-width: 600px) {
  .landing__hero { margin-bottom: 48px; }
  .role-selection { margin-bottom: 56px; }
  .department-grid, .landing-feature-grid, .manager-features { grid-template-columns: minmax(0, 1fr); }
  .department-grid, .landing-feature-grid { gap: 16px; }
}

/* ==================== ONBOARDING TUTORIAL ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 38, 22, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--sat)) max(16px, var(--sar)) max(16px, var(--sab)) max(16px, var(--sal));
  overflow-y: auto;
}

.modal-dialog {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(198, 161, 91, 0.4);
  box-shadow: 0 24px 64px rgba(17, 38, 22, 0.25);
  max-width: min(620px, 100%);
  width: 100%;
  max-height: min(90dvh, calc(100dvh - var(--sat) - var(--sab) - 32px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
dialog {
  max-width: calc(100vw - 16px - var(--sal) - var(--sar));
  max-height: calc(100dvh - 16px - var(--sat) - var(--sab));
}

.tutorial-card {
  padding: clamp(24px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tutorial-card__header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.tutorial-card__eyebrow {
  color: #8b6b35;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.tutorial-card h2 {
  font-family: Georgia, serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  color: var(--ink);
  margin: 0;
}

/* ==================== MANAGER FEATURES ==================== */
/* Where Is It */
.where-is-it-box {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(17, 38, 22, 0.04);
  margin-bottom: 24px;
}

.where-is-it-search-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.where-is-it-search-row select,
.where-is-it-search-row input {
  flex: 1 1 240px;
}

.where-card {
  background: #faf8f5;
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: 16px;
  padding: 24px;
}

.where-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(198, 161, 91, 0.25);
  padding-bottom: 12px;
}

.where-card__number {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
}

.where-card__stone {
  font-size: 1.05rem;
  color: #334638;
  font-weight: 500;
}

.where-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 16px;
  margin: 18px 0;
  min-width: 0;
}

.where-card__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.where-card__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #59675c;
}

.where-card__val {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.production-path {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0;
  margin: 16px 0;
  border-top: 1px solid rgba(198, 161, 91, 0.2);
  border-bottom: 1px solid rgba(198, 161, 91, 0.2);
}

.production-path__node {
  padding: 8px 14px;
  border-radius: 999px;
  background: #e7ebe7;
  color: #4e5b50;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.production-path__node.is-current {
  background: var(--brand-green);
  color: #ffffff;
  box-shadow: 0 0 0 2px var(--gold);
}

.production-path__node.is-complete {
  background: #dcfce7;
  color: #166534;
}

.production-path__arrow {
  color: #9aa49b;
  font-size: 0.9rem;
}

.where-triad {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 0.92rem;
  color: #4e5b50;
  flex-wrap: wrap;
}

/* Shop Map */
.shop-map-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.shop-map-section {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}

.shop-map-section__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 16px;
  font-family: Georgia, serif;
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.shop-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.shop-map-worker-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: #faf9f6;
  cursor: pointer;
  transition: all 160ms ease;
}

.shop-map-worker-card:hover,
.shop-map-worker-card.is-selected {
  border-color: var(--gold);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(17, 38, 22, 0.08);
  transform: translateY(-2px);
}

.shop-map-worker-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.shop-map-worker-card__jobs-count {
  font-size: 0.9rem;
  color: #59675c;
  font-weight: 500;
}

.shop-map-drilldown {
  margin-top: 20px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: 16px;
}

.shop-map-drilldown__title {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  margin: 0 0 14px;
  color: var(--ink);
}

.shop-map-jobs-list {
  display: grid;
  gap: 10px;
}

.shop-map-job-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f8f9f8;
  border: 1px solid #e7ebe7;
  cursor: pointer;
  transition: all 140ms ease;
}

.shop-map-job-item:hover {
  background: #f1f3f1;
  border-color: #cbd3cc;
}

/* Status dots */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Attention widget */
.attention-widget {
  background: #fffdfa;
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 24px;
}

.attention-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.attention-widget__title {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

.attention-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 140ms ease;
}

.attention-item:hover {
  border-color: #f59e0b;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.1);
}

.attention-item__type {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
}

/* ==================== EMPLOYEE ACTIONS ==================== */
.employee-action-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.employee-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
}

.employee-action-btn--warning {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}
.employee-action-btn--warning:hover {
  background: #fee2e2;
}

.employee-action-btn--voice {
  background: #f0fdf4;
  color: #166534;
  border-color: #86efac;
}
.employee-action-btn--voice:hover {
  background: #dcfce7;
}

.employee-action-btn--scan {
  background: var(--brand-green-soft);
  color: var(--brand-green-hover);
  border-color: var(--brand-green-border);
}
.employee-action-btn--scan:hover {
  background: #d0d8d1;
}

.employee-action-btn--handoff {
  background: #faf5ff;
  color: #6b21a8;
  border-color: #d8b4fe;
}
.employee-action-btn--handoff:hover {
  background: #f3e8ff;
}

/* Job DNA */
.job-dna-box {
  background: #ffffff;
  border: 1px solid rgba(198, 161, 91, 0.35);
  border-radius: 18px;
  padding: 24px;
  margin-top: 24px;
}

.job-dna-title {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-dna-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.job-dna-card {
  background: #faf8f5;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.job-dna-card__label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b6b35;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Rush job */
.rush-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #f87171;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: pulse-rush 2s infinite ease-in-out;
}

@keyframes pulse-rush {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.rush-toggle-btn {
  border: 1px solid #f87171;
  background: #fff;
  color: #b91c1c;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
}
.rush-toggle-btn.is-active {
  background: #b91c1c;
  color: #fff;
}

/* Last Activity */
.last-activity-text {
  font-size: 0.82rem;
  color: #59675c;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.last-activity-text.is-stale {
  color: #d97706;
  font-weight: 600;
}

.plan-panel {
  padding: clamp(20px, 4vw, 64px) 16px 80px;
  background: var(--paper);
  color: var(--brand-green);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}
.plan-panel__inner { max-width: 1200px; margin: auto; }
.plan-panel__back { margin-bottom: 28px; background: transparent; border: 0; color: var(--brand-green); }
.plan-panel__hero { display: grid; gap: 32px; align-items: center; padding-bottom: 64px; }
.plan-panel__intro { position: relative; }
.plan-panel .eyebrow { color: var(--muted-strong); font-size: .9rem; font-weight: 400; letter-spacing: .03em; text-transform: none; }
.plan-panel h2, .plan-panel h3, .plan-panel h4 { font-family: inherit; }
.plan-panel h2 { margin: 16px 0; font-size: clamp(2rem, 4.1vw, 3.25rem); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.plan-panel__lede { max-width: 610px; font-size: clamp(1.2rem, 2.5vw, 1.65rem); font-weight: 400; line-height: 1.45; letter-spacing: -.02em; }
.plan-panel__journey { max-width: 510px; color: var(--muted-strong); line-height: 1.7; }
.plan-panel__offer { padding: clamp(24px, 4vw, 40px); border: 1px solid rgba(198, 161, 91, .35); border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(17, 38, 22, .07); }
.plan-panel__offer > p { margin: 10px 0; }
.plan-panel__price { display: flex; align-items: baseline; gap: 7px; margin: 22px 0 0 !important; }
.plan-panel__price strong { font-size: clamp(3rem, 5.5vw, 4rem); font-weight: 500; letter-spacing: -.05em; }
.plan-panel__price span { color: var(--muted); }
.plan-panel__offer form { margin-top: 28px; }
.plan-panel__offer label { font-size: .82rem; font-weight: 700; }
.plan-panel__offer button.primary { background: var(--brand-green); border-color: var(--brand-green); min-height: 52px; }
.plan-panel__offer button.primary:hover { background: var(--brand-green-hover); border-color: var(--brand-green-hover); box-shadow: 0 8px 22px rgba(17, 38, 22, .18); transform: translateY(-2px); }
.plan-panel__offer button:disabled { opacity: .6; cursor: wait; }
.plan-panel__feedback { color: #9a3412; font-weight: 600; }
.plan-panel__feedback:empty { display: none; }
.plan-panel__secure { color: var(--muted-strong); font-size: .82rem; line-height: 1.5; }
.plan-panel__result { padding: 12px 0; }
.plan-panel__result h3 { margin-bottom: 8px; }
@media (min-width: 800px) { .plan-panel__hero { grid-template-columns: minmax(0, 1.3fr) minmax(min(100%, 320px), .85fr); gap: 7%; padding: 32px 0 96px; } }
@media (prefers-reduced-motion: reduce) {
  .plan-panel__offer button.primary { transition: none; }
  .plan-panel__offer button.primary:hover { transform: none; }
}

.worker-home-mode {
  background: #f7f5f0;
  color: #171817;
}

.worker-home-mode .site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 245, 240, 0.94);
  backdrop-filter: blur(14px);
  color: #171817;
  padding: calc(14px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal));
  border-bottom: 1px solid rgba(23, 24, 23, 0.06);
}

.worker-home-mode .site-header p,
.worker-home-mode #sign-in-toggle,
.worker-home-mode #register-toggle {
  display: none;
}

.worker-home-mode .site-header h1 {
 font-size: 0.72rem;
 letter-spacing: 0.28em;
 color: rgba(23, 24, 23, 0.7);
}

.worker-home-mode .auth-actions {
 margin-left: auto;
}

.worker-home-mode #logout {
 border-color: rgba(23, 24, 23, 0.08);
 background: rgba(255, 255, 255, 0.88);
 color: #171817;
 border-radius: 999px;
 padding: 10px 16px;
 font-size: 0.82rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.worker-home-mode .nav {
 --worker-nav-pad: 10px;
 --worker-nav-row: 60px;
 --worker-nav-bottom: max(16px, env(safe-area-inset-bottom));
 --worker-nav-right: max(16px, env(safe-area-inset-right));
 --worker-nav-left: max(16px, env(safe-area-inset-left));
 position: fixed;
 left: var(--worker-nav-left);
 right: var(--worker-nav-right);
 bottom: var(--worker-nav-bottom);
 z-index: 30;
 margin: 0;
 padding: var(--worker-nav-pad);
 gap: 8px;
 /* Radius stays on ::before. A radius on this fixed grid clips the More menu
    in WebKit and lets the open <details> stretch the dark bar over the page. */
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 overflow: visible;
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 grid-auto-rows: var(--worker-nav-row);
 align-items: center;
}

.worker-home-mode .nav::before {
 content: "";
 position: absolute;
 z-index: -1;
 inset: 0;
 border-radius: 24px;
 background: rgba(23, 24, 23, 0.94);
 box-shadow: 0 24px 48px rgba(23, 24, 23, 0.18);
 pointer-events: none;
}

@media (min-width: 860px) {
 .worker-home-mode .nav::before { border: 1px solid var(--line); }
}

.worker-home-mode .nav.has-worker-more {
 grid-template-columns: repeat(6, minmax(0, 1fr));
}

.worker-home-mode .worker-nav-more {
 display: block;
 position: static;
 min-width: 0;
 max-height: 100%;
 overflow: visible;
}

.worker-home-mode .worker-nav-more summary {
 min-height: 0;
 padding: 6px;
 color: var(--brand-green);
 background: transparent;
 list-style: none;
 appearance: none;
 -webkit-appearance: none;
}

.worker-home-mode .worker-nav-more summary::-webkit-details-marker,
.worker-home-mode .worker-nav-more summary::marker {
 content: none;
 display: none;
}

.worker-home-mode .worker-nav-more summary.is-active {
 color: var(--brand-green-hover);
 background: transparent;
}

.worker-home-mode .worker-nav-more:not([open]) > .manager-nav-more__menu {
 display: none;
}

.worker-home-mode .worker-nav-more .manager-nav-more__menu {
 position: fixed;
 z-index: 40;
 top: auto;
 left: auto;
 right: var(--worker-nav-right);
 bottom: calc(var(--worker-nav-bottom) + var(--worker-nav-pad) + var(--worker-nav-row) + var(--worker-nav-pad) + 8px);
 width: max-content;
 min-width: min(190px, calc(100% - var(--worker-nav-left) - var(--worker-nav-right)));
 max-width: calc(100% - var(--worker-nav-left) - var(--worker-nav-right));
 max-height: min(50dvh, calc(100dvh - var(--worker-nav-bottom) - var(--worker-nav-row) - 36px - env(safe-area-inset-top)));
 overflow-x: hidden;
 overflow-y: auto;
 overscroll-behavior: contain;
 -webkit-overflow-scrolling: touch;
}

.worker-home-mode .nav span {
 min-width: 0;
}

.worker-nav-item {
 display: grid;
 justify-items: center;
 gap: 4px;
 color: var(--brand-green);
 font-weight: 700;
 padding: 8px 4px;
 border-radius: 18px;
 font-size: 0.68rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.worker-home-mode .nav .worker-nav-item {
 background: #e5e7eb;
 color: var(--brand-green);
}

.worker-home-mode .nav .worker-nav-item.is-active {
 color: var(--brand-green-hover);
 background: #d0d8d1;
}

.worker-home-mode .nav .worker-nav-item > span:not(.worker-nav-item__icon) {
 padding: 0;
 background: transparent;
 font-size: inherit;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
}

.worker-home-mode .nav .worker-nav-item__icon {
 padding: 0;
 background: rgba(17, 38, 22, 0.12);
}

.worker-home-mode .nav .worker-nav-item__icon .nav-badge {
 padding: 0 5px;
 background: #dc2626;
}

.worker-nav-item__icon {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 border-radius: 999px;
 background: rgba(17, 38, 22, 0.12);
 color: var(--brand-green);
 font-size: 0.9rem;
}

.worker-home {
 display: grid;
 gap: 16px;
 padding: 4px 16px 118px;
}

.worker-home .panel {
 margin: 0;
 border: 1px solid rgba(23, 24, 23, 0.05);
 border-radius: 24px;
 padding: 20px;
 box-shadow: 0 14px 40px rgba(23, 24, 23, 0.05);
}

.worker-home__hero {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 245, 240, 0.96));
}

.worker-home__section-label,
.worker-home__eyebrow {
 margin: 0;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
}

.worker-home__eyebrow {
 color: #c6a15b;
}

.worker-home__section-label {
 color: #5f635e;
 margin-bottom: 8px;
}

.worker-home__hero h1,
.worker-home__attention h2,
.worker-home__summary h2,
.worker-home__detail h2,
.worker-home__completion-copy h2,
.worker-home__card h3,
.worker-home__support-header h3 {
 margin: 0;
 color: #171817;
}

.worker-home__logo {
 display: block;
 width: 126px;
 max-width: 42vw;
 height: auto;
 margin-bottom: 16px;
}

.worker-home__hero h1 {
 font-size: 2rem;
 line-height: 1.05;
}

.worker-home__support {
 margin: 10px 0 0;
 color: #5f635e;
 line-height: 1.5;
}

.worker-home__group {
 display: grid;
 gap: 10px;
}

.worker-home__card {
 background: #ffffff;
 border-radius: 24px;
 padding: 20px;
 border: 1px solid rgba(23, 24, 23, 0.05);
 box-shadow: 0 14px 34px rgba(23, 24, 23, 0.05);
 display: grid;
 gap: 12px;
}

.worker-home__card--active {
 background:
   linear-gradient(180deg, rgba(49, 92, 74, 0.08), rgba(49, 92, 74, 0) 44%),
   linear-gradient(135deg, rgba(198, 161, 91, 0.1), rgba(198, 161, 91, 0) 52%),
   #ffffff;
 border-color: rgba(49, 92, 74, 0.18);
}

.worker-home__card--empty {
 min-height: 180px;
 align-content: center;
}

.worker-home__card-top,
.worker-home__detail-header,
.worker-home__summary,
.worker-home__completion-indicator,
.worker-home__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.worker-home__badge,
.worker-home__status-pill {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.worker-home__badge {
  color: #315c4a;
  background: rgba(49, 92, 74, 0.1);
}

.worker-home__job-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.18;
  color: #171817;
}

.worker-home__department {
  margin: 0;
  color: #315c4a;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.worker-home__meta {
  color: #5f635e;
  font-size: 0.94rem;
}

.worker-home__link {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 18px;
  background: #171817;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.worker-home__summary h2 {
  margin-top: 4px;
  font-size: 1.95rem;
}

.worker-home__completion-indicator {
  color: var(--success);
  font-weight: 600;
}

.worker-home__completion-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 8px rgba(49, 92, 74, 0.1);
}

.worker-home__detail {
  background: rgba(255, 255, 255, 0.96);
}

.worker-home__status-pill {
  color: #171817;
  background: rgba(198, 161, 91, 0.12);
}

.worker-home__status-pill--in-progress,
.worker-home__status-pill--completed {
  color: var(--success);
  background: var(--success-soft);
}

.worker-home__status-pill--waiting,
.worker-home__status-pill--paused,
.worker-home__status-pill--not-started {
  color: var(--warning);
  background: var(--warning-soft);
}

.worker-home__status-pill--needs-attention {
  color: var(--danger);
  background: var(--danger-soft);
}

.worker-home__attention {
  background: rgba(255, 255, 255, 0.94);
}

.worker-home__attention--urgent {
  border-color: rgba(184, 92, 92, 0.2);
}

.worker-home__attention-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.worker-home__attention-list p,
.worker-home__completion-copy p {
  margin: 0;
  color: #5f635e;
  line-height: 1.5;
}

.worker-home__completion-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(49, 92, 74, 0.05));
}

.worker-home__completion-mark {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(49, 92, 74, 0.12);
  color: #315c4a;
  font-weight: 700;
}

.worker-home__completion-copy {
  display: grid;
  gap: 4px;
}

.worker-home__dismiss {
  min-height: 42px;
  border-radius: 999px;
  padding-inline: 14px;
  font-size: 0.78rem;
}

.worker-home__completion-panel .worker-home__dismiss {
  grid-column: 2;
  justify-self: start;
}

.worker-home__actions {
  margin-top: 18px;
  gap: 10px;
}

.worker-home__actions button,
.worker-home__link,
.worker-home-mode #logout {
  min-height: 52px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.worker-home__actions button.primary {
  background: #171817;
  color: #ffffff;
  border-color: #171817;
}

.worker-home__actions button {
  min-height: 58px;
  border-radius: 18px;
  border-color: rgba(23, 24, 23, 0.08);
  background: #ffffff;
  color: #171817;
  letter-spacing: 0.04em;
}

.worker-home__actions button[data-action="complete"] {
  background: rgba(49, 92, 74, 0.08);
  color: #315c4a;
  border-color: rgba(49, 92, 74, 0.12);
}

.worker-home__actions button[data-action="need"] {
  background: rgba(198, 161, 91, 0.08);
  color: #8c5c1f;
  border-color: rgba(198, 161, 91, 0.2);
}

.worker-home__actions button:hover,
.worker-home__link:hover,
.worker-home-mode #logout:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(23, 24, 23, 0.08);
}

.worker-home-mode .notice {
  margin: 0 16px 10px;
  width: calc(100% - 32px);
  border-radius: 18px;
  border-color: rgba(23, 24, 23, 0.08);
  background: rgba(255, 255, 255, 0.92);
  min-height: 52px;
  padding: 14px 16px;
}

.worker-home-mode .notice.unread {
  border-color: rgba(198, 161, 91, 0.45);
  background: rgba(198, 161, 91, 0.08);
}

.worker-home__support-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(23, 24, 23, 0.08);
  display: grid;
  gap: 14px;
}

.worker-home__support-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.worker-home__request-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.worker-home__request-choice {
  position: relative;
}

.worker-home__request-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  flex: none;
  opacity: 0;
}

.worker-home__request-choice span {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(23, 24, 23, 0.08);
  background: rgba(255, 255, 255, 0.8);
  color: #171817;
  font-size: 0.9rem;
  line-height: 1.3;
}

.worker-home__request-choice input:checked + span {
  border-color: rgba(49, 92, 74, 0.24);
  background: rgba(49, 92, 74, 0.08);
  color: #315c4a;
}

.worker-home__field {
  display: grid;
  gap: 8px;
  color: #5f635e;
  font-size: 0.9rem;
}

.worker-home__field textarea,
.worker-home__field input[type="file"] {
  border-radius: 18px;
  border-color: rgba(23, 24, 23, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

.worker-home__submit-request {
  min-height: 56px;
  border-radius: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Avatars, badges, notifications, and chat */
.avatar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--default { background: linear-gradient(145deg, #19301e, var(--ink)); color: var(--gold); }
.avatar--job { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.avatar-large { width: 72px; height: 72px; font-size: 1.45rem; }
.avatar-sm { width: 32px; height: 32px; font-size: .85rem; }
.avatar-xs { width: 22px; height: 22px; font-size: .68rem; }
.nav .nav-badge, .nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: #dc2626; color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: 0; line-height: 1;
}
.worker-nav-item__icon .nav-badge { position: absolute; top: -6px; right: -10px; margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.button-like { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d1d5db; border-radius: 10px; padding: 10px 14px; background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; font-size: .9rem; }
.button-like.primary { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.photo-picker { display: grid; gap: 6px; padding: 12px; border: 1px dashed #d1d5db; border-radius: 10px; color: #4d574e; font-weight: 600; }
.profile-photo { display: flex; gap: 16px; align-items: center; margin: 16px 0; flex-wrap: wrap; }
.profile-photo__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.profile-photo__actions .eyebrow { width: 100%; margin: 0; }
.profile-summary { display: flex; gap: 14px; align-items: center; }
.field-label { display: grid; gap: 6px; color: var(--muted-strong); font-size: .85rem; font-weight: 600; }
.job-row--person { display: flex; align-items: center; gap: 8px; }

.notification-center__heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.notification-center__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notification-center__actions button { min-height: 44px; max-width: 100%; touch-action: manipulation; }
.notification-item { display: flex; align-items: flex-start; gap: 12px; position: relative; }
.notification-item__text { display: grid; gap: 3px; flex: 1; min-width: 0; font-weight: 500; }
.notification-item__type { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.notification-item__body { color: var(--muted-strong); font-style: italic; }
.notification-item time { color: #9aa49b; font-size: .72rem; }
.notification-item.unread strong { font-weight: 800; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); flex: 0 0 auto; margin-top: 6px; }

.jf-toast { position: fixed; top: calc(var(--jf-header-height, 64px) + 10px); right: 12px; z-index: 60; max-width: min(380px, calc(100vw - 24px)); display: flex; gap: 10px; align-items: flex-start; text-align: left; border-color: var(--brand-green-border); box-shadow: 0 18px 40px rgba(17, 38, 22, .18); }
.jf-toast__text { display: grid; gap: 2px; }
.jf-toast__text small { color: var(--brand-green); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; }
.jf-toast__text span { color: #4d574e; font-weight: 500; font-size: .85rem; }

.assignment-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 12px 0; background: linear-gradient(145deg, #fff, #faf8f3); display: grid; gap: 10px; }
.assignment-card .eyebrow { margin: 0; color: var(--gold); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; }
.assignment-card__people { display: flex; flex-wrap: wrap; gap: 14px; }
.person-chip { display: flex; gap: 8px; align-items: center; }
.person-chip > div { display: grid; }
.person-chip small { color: #657066; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.person-chip span { color: var(--brand-green); font-size: .82rem; }
.assignment-card__meta { margin: 0; color: #4d574e; font-size: .88rem; }
.assignment-card__note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: #fff; border-radius: 8px; color: var(--ink); }

.job-chat { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.job-chat > h3, .job-chat > p { margin: 12px 14px; }
.job-chat .message-thread { max-height: 420px; }
.chat-participants { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-size: .8rem; }

.chat-layout { display: grid; padding: 0; overflow: hidden; min-width: 0; max-width: 100%; }
.conversation-list { padding: 16px; background: #faf9f6; border-bottom: 1px solid var(--line); }
.chat-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chat-heading h2 { margin: 0; }
.chat-heading .eyebrow { margin: 0; }
.chat-group-label { margin: 16px 0 6px; color: #657066; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chat-list-item { width: 100%; margin-bottom: 6px; text-align: left; display: flex; align-items: center; gap: 10px; }
.chat-list-item__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.chat-list-item__text small { color: #657066; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-list .chat-list-item { display: flex; }
.chat-list-item.is-active { background: var(--ink); color: #fff; }
.chat-list-item.is-active small { color: #d2dbd3; }
.chat-list-item.has-unread strong { font-weight: 800; }
.chat-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-green); color: #fff; font-size: .7rem; font-weight: 800; }
.chat-new { margin-top: 12px; }
.message-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.message-pane > .assignment-card { margin: 14px; }
.message-pane > .job-chat { margin: 0 14px 14px; flex: 1; min-height: 0; }
.message-heading { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.message-heading h3 { margin: 0; }
.message-heading__title { display: flex; align-items: center; gap: 10px; }
.message-thread { flex: 1; padding: 16px; overflow: auto; display: grid; align-content: start; gap: 14px; background: #fff; min-height: 240px; }
.chat-message { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; }
.chat-message.is-own { margin-left: auto; flex-direction: row-reverse; }
.chat-message__content { display: grid; gap: 3px; min-width: 0; }
.chat-message.is-own .chat-message__content { justify-items: end; }
.chat-message__meta, .chat-message__status { margin: 0 6px; font-size: .74rem; color: #657066; }
.chat-message__meta small { color: #9aa49b; }
.chat-message__bubble { padding: 9px 14px; border-radius: 20px; background: var(--paper); color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; border-bottom-left-radius: 6px; }
.chat-message__bubble p { margin: 0; white-space: pre-wrap; }
.chat-message.is-own .chat-message__bubble { background: var(--brand-green); color: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; }
.chat-message__receipt { color: var(--brand-green); font-weight: 600; }
.chat-message__new { color: var(--danger); font-weight: 700; }
.mention { font-weight: 700; color: var(--brand-green); background: rgba(17, 38, 22, .1); border-radius: 6px; padding: 0 3px; }
.chat-message.is-own .mention { color: #fff; background: rgba(255, 255, 255, .2); }
.chat-attachments { display: grid; gap: 4px; margin-top: 6px; }
.chat-attachments a { color: inherit; font-size: .82rem; }
.chat-empty { margin: auto; text-align: center; }
.message-composer { padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); background: #fff; min-width: 0; max-width: 100%; }
.message-composer textarea { resize: none; border-radius: 20px; padding: 10px 14px; min-width: 0; flex: 1 1 160px; }
.message-composer button { min-height: 44px; }
.message-composer button { border-radius: 999px; }
.mention-field { position: relative; flex: 1; min-width: 0; }
.mention-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(17, 38, 22, .14); padding: 4px; display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.mention-option { display: flex; align-items: center; gap: 8px; border: 0; text-align: left; padding: 8px; border-radius: 8px; }
.mention-option small { color: #657066; }
.mention-option.is-active, .mention-option:hover { background: var(--brand-green-soft); transform: none; }
.chat-attach { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #d1d5db; border-radius: 50%; cursor: pointer; position: relative; overflow: hidden; }
.chat-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.super-search {
  position: relative;
  z-index: 5;
  margin: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 24px rgba(17, 38, 22, .04);
}
.super-search > label { display: block; margin-bottom: 8px; color: var(--ink); font-weight: 800; }
.super-search input { max-width: 720px; }
.super-search__results { position: absolute; top: calc(100% - 8px); left: 14px; right: 14px; display: grid; gap: 4px; max-height: 360px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 36px rgba(17, 38, 22, .14); }
.super-search__results:empty { display: none; }
.super-search__results button { display: grid; gap: 4px; text-align: left; border: 0; }
.super-search__results button span { color: #657066; font-size: .8rem; }
.job-filters { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 8px 0 14px; }
.job-filters select, .job-filters input[type="date"] { width: auto; min-width: 145px; }
.job-filters button { white-space: nowrap; }
.job-subsection-list { margin-top: 16px; }
.job-subsection-list strong { overflow-wrap: anywhere; }
.job-attention-filter { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.job-attention-filter input { width: auto; }
.manager-dashboard-stats { margin: 12px 0; }
.manager-dashboard-stats button { display: grid; gap: 4px; min-width: 0; border-color: var(--line); text-align: left; }
.manager-dashboard-stats button strong { font-size: 1.3rem; }
.manager-dashboard-stats button.stage-glance {
  border-bottom: 3px solid var(--stage-color, var(--line));
}
.stage-glance__mark { display: flex; align-items: center; color: var(--stage-color); }
.stage-glance__mark .stage-icon { width: 20px; height: 20px; }
.priority-badge, .job-status-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .72rem; font-weight: 800; }
.priority-badge--rush { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.job-command-center__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.job-command-center__badges .person-chip { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; }
.job-priority-picker, .job-stage-picker { display: inline-flex; align-items: center; gap: 7px; color: #657066; font-size: .78rem; font-weight: 700; }
.job-priority-picker select, .job-stage-picker select { width: auto; min-width: 112px; padding: 7px 10px; }
.job-command-center > .job-stage-picker { margin: 0 0 14px; }
.production-journey { display: grid; grid-template-columns: repeat(6, minmax(80px, 1fr)); gap: 6px; overflow-x: auto; padding: 6px 0; min-width: 0; max-width: 100%; }
.production-journey span { position: relative; min-width: 80px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #657066; text-align: center; font-size: .68rem; }
.production-journey span.is-complete { border-color: rgba(49, 92, 74, .2); background: rgba(49, 92, 74, .08); color: #315c4a; }
.production-journey span.is-current { border-color: var(--gold); background: #fbf7ee; color: var(--ink); font-weight: 800; }
.job-waiting { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 16px; color: #657066; font-size: .84rem; }
.job-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.job-quick-actions button { min-height: 44px; }
.job-cad-viewer { min-width: 0; max-width: 100%; margin: 0 0 16px; }
.job-cad-viewer h3, .job-cad-viewer p { overflow-wrap: anywhere; }
.job-cad-viewer .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.job-cad-viewer .actions button, .job-cad-viewer .actions a { min-height: 44px; }
.job-cad-viewer .cad-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.job-information, .job-files { margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.job-information h3, .job-files h3 { margin: 0 0 10px; }
.job-information p { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.job-production-notes { margin: 12px 0; padding: 12px; border-left: 3px solid var(--gold); border-radius: 8px; background: #faf9f6; }
.job-production-notes ul { margin: 6px 0 0; padding-left: 20px; list-style: disc; }
.job-production-notes li { padding-left: 2px; line-height: 1.4; overflow-wrap: anywhere; }
.job-production-notes li + li { margin-top: 4px; }
.job-notes-editor form { margin-top: 10px; }
.history p { padding: 9px 0; border-bottom: 1px solid #f1eee7; }
.history time { color: #657066; font-size: .78rem; }

.worker-home-mode #content { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }

@media (min-width: 860px) {
  .board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .worker-home {
    max-width: 720px;
    margin: 0 auto;
  }

  .panel { padding: clamp(18px, 3vw, 28px); border-color: var(--line); box-shadow: 0 10px 30px rgba(17,38,22,.035); }
  #auth { padding: 14px; border-color: #e5e8e5; box-shadow: none; }
  #app { max-width: 1440px; margin: auto; }
  #content { padding-bottom: 40px; min-width: 0; }
  .nav { padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.9); }
  .nav span { cursor: pointer; background: transparent; }
  .nav span[aria-current="page"] { background: var(--ink); color: #fff; }
  .section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
  .section-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 2rem; }
  .section-heading > .muted { max-width: 520px; }
  .team-grid, .room-grid { display: grid; gap: 16px; }
  .profile-card, .room-card { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
  .employee-option { display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .employee-option:has(input:checked) { border-color: var(--brand-green); }
  .profile-summary { display: flex; gap: 14px; align-items: center; }
  .profile-summary h2, .profile-summary h3, .profile-summary p { margin-top: 0; margin-bottom: 4px; }
  .avatar { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; }
  .avatar-large { width: 72px; height: 72px; font-size: 1.45rem; }
  .room-card { background: linear-gradient(145deg,#fff,#faf8f3); }
  .room-card > div:first-child { display: flex; align-items: center; gap: 7px; color: #657066; font-size: .78rem; text-transform: capitalize; }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa49b; }
  .status-dot.is-active { background: var(--success); box-shadow: 0 0 0 4px rgba(49, 92, 74, .12); }
  .room-code-label { margin: 26px 0 4px; color: #657066; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
  .room-code { display: block; margin-bottom: 22px; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
  .inline-form { display: flex; gap: 10px; margin-top: 22px; }
  .inline-form input { flex: 1; }
  .chat-layout { display: grid; padding: 0; overflow: hidden; min-height: 570px; min-width: 0; max-width: 100%; }
  .conversation-list { padding: 24px; background: #faf9f6; border-right: 1px solid var(--line); }
  .conversation-list button { width: 100%; margin-bottom: 8px; text-align: left; display: grid; gap: 4px; }
  .conversation-list button small { color: #657066; }
  .conversation-list button.is-active { background: var(--ink); color: #fff; }
  .conversation-list button.is-active small { color: #d2dbd3; }
  .message-pane { display: flex; flex-direction: column; min-width: 0; }
  .message-heading { padding: 20px 24px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .message-heading h3 { margin: 0; }
  .message-thread { flex: 1; padding: 24px; overflow: auto; display: grid; align-content: start; gap: 18px; background: #fff; }
  .message-bubble { display: flex; gap: 12px; }
  .message-bubble p { margin: 0 0 5px; line-height: 1.5; }
  .message-bubble time { color: #9aa49b; font-size: .72rem; }
  .message-composer { padding: 16px; display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line); min-width: 0; max-width: 100%; }
  .message-composer textarea { resize: none; min-width: 0; flex: 1 1 180px; }
  .empty-state { margin: auto; max-width: 430px; padding: 30px; text-align: center; color: #657066; }
  .profile-page { max-width: 900px; }
  .form-grid { display: grid; gap: 16px; margin-top: 28px; }
  .form-grid label { display: grid; gap: 7px; color: #4d574e; font-size: .82rem; font-weight: 700; }

  @media (min-width: 760px) {
    .team-grid, .room-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .chat-layout { grid-template-columns: 300px minmax(0,1fr); }
    .conversation-list { border-bottom: 0; }
    .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .full-width { grid-column: 1 / -1; }
  }

}

@media (max-width: 759px) {
  .section-heading { display: block; }
  .super-search { margin: 8px; }
  .job-information, .job-files { padding: 10px; }
  .inline-form, .message-composer { flex-direction: column; align-items: stretch; }
  .inline-form { flex-wrap: wrap; }
  .inline-form input, .message-composer textarea { min-width: 0; max-width: 100%; }
  .chat-layout { min-height: 0; }
  .conversation-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .message-thread { min-height: 280px; }
  .change-request-modal__actions { flex-wrap: wrap; }
  .change-request-modal__actions button { min-height: 44px; flex: 1 1 140px; }
}

/* Simplified worker bottom navigation: icon-only circles */
.worker-home-mode .nav .worker-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 6px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.worker-home-mode .nav .worker-nav-item.is-active { background: transparent; }
.worker-home-mode .nav .worker-nav-item .worker-nav-item__icon {
  width: 48px;
  height: 48px;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--paper);
  color: inherit;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.worker-home-mode .nav .worker-nav-item.is-active .worker-nav-item__icon {
  background: var(--brand-green-soft);
  box-shadow: 0 0 0 3px var(--brand-green);
}
.worker-home-mode .nav .worker-nav-item:active { transform: scale(.94); }
.worker-home-mode .nav .worker-nav-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.worker-home-mode .nav.cad-worker-nav {
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(2px, 1vw, 8px);
}
.worker-home-mode .nav.cad-worker-nav .worker-nav-item {
  min-width: 0;
  padding: 6px 0;
}
.worker-home-mode .nav.cad-worker-nav .worker-nav-item__icon {
  width: clamp(28px, 6vw, 48px);
  height: clamp(28px, 6vw, 48px);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
}
@media (max-width: 420px) {
  .worker-home-mode .nav.cad-worker-nav { gap: 0; }
  .worker-home-mode .nav.cad-worker-nav .worker-nav-item { padding: 4px 0; }
  .worker-home-mode .nav.cad-worker-nav .worker-nav-item__icon {
    width: clamp(36px, 11vw, 44px);
    height: clamp(36px, 11vw, 44px);
  }
}
.worker-home-mode:has(.cad-worker-nav) #content {
  min-width: 0;
  padding-bottom: calc(128px + env(safe-area-inset-bottom));
}
.worker-home-mode:has(.cad-worker-nav) #content input,
.worker-home-mode:has(.cad-worker-nav) #content textarea,
.worker-home-mode:has(.cad-worker-nav) #content select {
  font-size: 16px;
  max-width: 100%;
}
.worker-page { padding: 4px 12px 118px; max-width: 900px; margin: 0 auto; }

/* Job list + job details */
.job-list { display: grid; gap: 8px; }
button.job-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 14px; min-height: 64px; transition: border-color .15s ease, box-shadow .15s ease; }
button.job-row:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(17, 38, 22, .06); }
button.job-row.is-rush { border-left: 4px solid var(--danger); }
.job-row__main { display: grid; gap: 3px; min-width: 0; }
.job-row__main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-row__side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex: 0 1 auto; }
.job-row__chevron { font-size: 1.4rem; color: #9aa49b; }
.new-badge { display: inline-flex; padding: 2px 7px; border-radius: 999px; background: var(--brand-green); color: #fff; font-size: .68rem; font-weight: 800; vertical-align: middle; }
.back-link { margin-bottom: 12px; border: 0; background: transparent; padding: 8px 0; color: var(--brand-green); font-weight: 700; }
.back-link:hover { text-decoration: underline; }
.job-command-center__heading h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.job-command-center__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.job-command-center__title { margin: 4px 0; font-size: 1.05rem; font-weight: 600; }
.job-command-center__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.job-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.job-quick-actions button { min-height: 44px; }
.job-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 0; min-width: 0; }
.job-facts dt { color: #657066; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.job-facts dd { margin: 3px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.job-status-badge--completed, .job-status-badge--shipped { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.job-status-badge--in-progress { border-color: var(--brand-green-border); background: var(--brand-green-soft); color: var(--brand-green-hover); }
.job-status-badge--review { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.job-status-badge--paused, .job-status-badge--waiting, .job-status-badge--needs-attention, .job-status-badge--returned-for-repair { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.assign-form, .create-job-form { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #faf9f6; }
.reference-upload { display: grid; gap: 8px; min-width: 0; }
.reference-picker-control { position: relative; overflow: hidden; width: 100%; min-height: 52px; font-size: 1rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.reference-file-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.reference-picker-control:focus-within { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.reference-picker-control:has(input:disabled) { opacity: .6; }
.reference-file-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.reference-file-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.reference-file-list__name { min-width: 0; overflow-wrap: anywhere; }
.reference-file-list__remove { flex: 0 0 auto; width: auto; min-height: 44px; min-width: 44px; margin: 0; }

/* Chats */
.chat-heading { margin-bottom: 12px; }
.conversation-list .chat-heading button { width: auto; margin: 0; display: inline-flex; }
.chat-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: #eceae4; }
.conversation-list .chat-tabs .chat-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0; min-height: 40px; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: #4d574e; }
.conversation-list .chat-tabs .chat-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(17, 38, 22, .12); }
.conversation-list .chat-list-item { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.chat-list-empty { padding: 12px 4px; }
.chat-new-panel { display: grid; gap: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.chat-new-panel .field-label { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; }
.conversation-list .chat-new-panel button { display: inline-flex; justify-content: center; text-align: center; margin: 0; }
.message-heading { gap: 10px; }
.chat-delete-group { flex: 0 0 auto; white-space: nowrap; }
.message-heading__title { flex: 1; min-width: 0; }
.chat-back { display: none; padding: 8px 12px; font-size: 1.1rem; }
.chat-open-job { flex: 0 0 auto; }
@media (max-width: 759px) {
  .chat-layout:not(.has-open-chat) .message-pane { display: none; }
  .chat-layout.has-open-chat .conversation-list { display: none; }
  .chat-layout.has-open-chat .chat-back { display: inline-flex; }
}
.worker-home-mode .nav .worker-nav-item .worker-nav-item__emoji {
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variant-emoji: emoji;
  line-height: 1;
}
.nav-more-icon { display: block; width: 18px; height: 18px; }
.worker-home-mode .nav .worker-nav-item .worker-nav-item__icon .nav-badge { position: absolute; top: -4px; right: -4px; border: 2px solid rgba(23, 24, 23, 0.94); }
@media (max-width: 520px) {
  .worker-home-mode .site-header { flex-wrap: nowrap; padding: calc(10px + var(--sat)) calc(10px + var(--sar)) 8px calc(10px + var(--sal)); }
  .worker-home-mode .site-header h1 { letter-spacing: .06em; }
  .worker-home-mode .brand { min-width: 0; flex: 1 1 auto; }
  .worker-home-mode .auth-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
  .worker-home-mode .auth-actions button { padding: 8px 12px; font-size: .78rem; min-height: 44px; }
}

/* Employees (manager) */
.employee-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
.employee-tabs .chat-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: #4d574e; font-weight: 700; }
.employee-tabs .chat-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(17, 38, 22, .12); }
.employee-tab__count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(17, 38, 22, .08); font-size: .75rem; }
.employee-summary { margin: 0 0 12px; }
.employee-grid { gap: 12px; }
.employee-card { display: grid; gap: 10px; padding: 14px 16px; }
.employee-card--working { border-color: var(--success-border); }
.employee-card--attention { border-color: var(--warning-border); }
.employee-card__head { display: flex; align-items: center; gap: 12px; }
.employee-card__name { flex: 1; min-width: 0; }
.employee-card__name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.employee-card__name h3 { margin: 0; font-size: 1rem; }
.employee-profile-link { min-height: 32px; padding: 4px 9px; font-size: .78rem; }
.employee-card__name p { margin: 2px 0 0; font-size: .8rem; overflow-wrap: anywhere; }
.employee-status { flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted-strong); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.employee-status--working { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.employee-status--attention, .employee-status--paused { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.employee-status--review { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }
.employee-status--assigned { border-color: var(--brand-green-border); background: var(--brand-green-soft); color: var(--brand-green-hover); }
.employee-card__jobs { display: grid; gap: 6px; }
.employee-job { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #faf9f6; text-align: left; }
.employee-job > span:first-child { min-width: 0; }
.employee-job small { display: block; color: #657066; font-size: .75rem; }
.employee-card__empty { margin: 0; }
.employee-card__edit summary { cursor: pointer; color: #4d574e; font-size: .82rem; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.employee-card__edit .stack { margin-top: 8px; }
.employee-profile { display: grid; gap: 18px; max-width: 980px; }
.employee-profile__header { display: flex; align-items: center; gap: 16px; }
.employee-profile__header h2, .employee-profile__header p { margin: 4px 0; }
.employee-profile__work ul, .employee-profile-history-day ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.employee-profile__work li, .employee-profile-history-day li { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #faf9f6; }
.employee-profile__work li span, .employee-profile-history-day li span { color: var(--muted-strong); font-size: .85rem; }
.employee-profile__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.employee-profile__stats > div { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.employee-profile__stats span { color: var(--muted-strong); font-size: .82rem; }
.employee-profile__stats strong { font-size: 1.5rem; }
.employee-profile__history { display: grid; gap: 14px; }
.employee-profile-history-day h4 { margin: 0 0 8px; }
.employee-profile-history-day li time { color: var(--muted-strong); font-size: .78rem; }
@media (max-width: 640px) {
  .employee-profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-profile__header { align-items: flex-start; }
}

/* Request changes */
.change-request-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.change-request-modal__error { margin: 0; color: var(--danger); font-weight: 600; }
.change-request-flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 16px; border: 1px solid var(--success-border); border-radius: 14px; background: var(--success-soft); color: var(--success); font-weight: 600; }
.change-request-notice { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--warning-border); border-left-width: 4px; border-radius: 12px; background: var(--warning-soft); }
.change-request-notice .eyebrow { margin: 0 0 6px; color: var(--warning); }
.change-request-notice__body { margin: 0 0 6px; font-weight: 600; white-space: pre-wrap; }
.change-request-inline { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--warning-soft); color: var(--warning); font-weight: 600; }
@media (max-width: 520px) {
  .employee-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-department { margin-top: 12px; padding: 12px; }
  .employee-card__head { align-items: flex-start; flex-wrap: wrap; }
  .employee-status { margin-left: 46px; }
}

/* Manager workspace */
.manager-home-mode #content { min-width: 0; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.manager-home-mode .panel, .manager-home-mode .super-search { min-width: 0; border-color: var(--line); }
.manager-home-mode .nav { align-items: center; overflow: visible; }
.manager-nav-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; min-height: 48px; min-width: 44px; }
.manager-home-mode .nav .manager-nav-label { background: transparent; border-radius: 0; padding: 0; font-size: inherit; letter-spacing: 0; }
.manager-nav-item[aria-current="page"], .manager-nav-more summary.is-active { background: var(--ink); color: #fff; }
.manager-home-mode .manager-nav-item--extra { display: none; }
.manager-home-mode .manager-nav-more { display: block; min-width: 0; }
.manager-nav-more { display: none; position: relative; overflow: visible; }
.manager-home-mode .manager-nav-more:not([open]) > .manager-nav-more__menu { display: none; }
.manager-home-mode .manager-nav-more__menu {
  position: fixed;
  z-index: 220;
  top: max(8px, env(safe-area-inset-top));
  right: auto;
  bottom: auto;
  left: max(8px, env(safe-area-inset-left));
  min-width: 0;
  width: min(280px, calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px));
  max-width: calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.manager-nav-more--accounting { display: block; }
.manager-nav-more summary { display: grid; place-items: center; min-height: 44px; padding: 8px; border-radius: 10px; cursor: pointer; font-weight: 700; list-style: none; }
.manager-nav-more summary::-webkit-details-marker,
.manager-nav-more summary::marker { content: none; display: none; }
.manager-nav-more__menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; gap: 4px; min-width: 190px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(17,38,22,.14); }
.manager-nav-more__menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; text-align: left; border: 0; background: transparent; }
.manager-nav-more__menu button span { background: transparent; border-radius: 0; padding: 0; font-size: 1rem; letter-spacing: 0; }
.manager-nav-more__menu button[aria-current="page"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--gold); }
.manager-home-mode .nav :is(button, summary):focus-visible, .job-filters-panel summary:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
.manager-home-mode .super-search input { max-width: none; min-height: 44px; }
.manager-home-mode .super-search__results button { overflow-wrap: anywhere; }
.dashboard-summary .section-heading { margin-bottom: 12px; }
.dashboard-summary .section-heading > div { min-width: 0; }
.dashboard-summary .section-heading h2 { overflow-wrap: anywhere; line-height: 1.15; }
.dashboard-summary--manager > .manager-dashboard-stats { margin-top: 0; }
.dashboard-summary--manager .manager-dashboard-stats button,
.dashboard-summary--manager .manager-dashboard-stats button span,
.dashboard-summary--manager .manager-dashboard-stats button strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.manager-dashboard-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr)); }
.manager-dashboard-stats button { min-height: 76px; background: var(--paper); }
.manager-dashboard-stats button:hover { border-color: var(--gold); }
.manager-dashboard-stats button.stage-glance:hover {
  border-color: var(--gold);
  border-bottom-color: var(--stage-color, var(--gold));
}
.stage-icon { width: 18px; height: 18px; flex: 0 0 auto; display: block; color: var(--stage-color); }
.stage-tabs {
  display: flex;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.stage-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--stage-color, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}
.stage-tab .stage-icon { color: var(--stage-color); }
.stage-tab.is-active {
  border-color: var(--stage-color, var(--line));
  background: var(--surface);
  box-shadow: inset 0 -3px 0 var(--stage-color, var(--line));
}
/* More menu Casting, Accounting, and CAD keep the original white button, border, and ink. */
.nav-department.department-tab,
.manager-nav-more__menu button.nav-department.department-tab,
.nav-department.department-tab:hover,
.manager-nav-more__menu button.nav-department.department-tab:hover,
.manager-nav-more__menu button.nav-department.department-tab[aria-current="page"] {
  background: #fff;
  border: 0;
  color: var(--ink);
}
.nav-department.department-tab .nav-icon,
.nav-department.department-tab > span {
  color: var(--ink);
  background: transparent;
}
.dashboard-departments__list button.department-tab,
.dashboard-departments__list button.department-tab:hover {
  background: #fff;
  color: var(--ink);
}
.dashboard-departments__list button.department-tab .nav-icon,
.dashboard-departments__list button.department-tab > span {
  color: var(--ink);
  background: transparent;
}
.nav-department.department-tab > span {
  border-radius: 0;
  padding: 0;
}
.manager-nav-more__menu button.nav-department.department-tab[aria-current="page"] {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--gold);
}
.worker-home-mode .nav .worker-nav-item[data-production-stage] .nav-stage-icon { color: var(--stage-color); }
@media (max-width: 520px) {
  .dashboard-summary--manager .manager-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 521px) and (max-width: 900px) {
  .dashboard-summary--manager .manager-dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  }
}
.attention-item { min-width: 0; text-align: left; overflow-wrap: anywhere; }
.attention-item__meta { color: #4d574e; font-size: .8rem; }
.attention-item__link { color: var(--brand-green); font-weight: 700; }
.overdue-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--danger-border); background: var(--danger-soft); color: var(--danger); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.job-filters-panel { margin-bottom: 12px; }
.job-filters-panel summary { width: fit-content; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 700; }
.job-filters { flex-wrap: wrap; overflow: visible; }
.job-filters select { flex: 1 1 180px; min-width: 0; min-height: 44px; }
.job-filters button { min-height: 44px; }
.job-row { min-width: 0; overflow-wrap: anywhere; }
.job-row__main, .job-row__side { min-width: 0; }
.job-row__main small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.employee-department { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.employee-department > h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
.employee-department > h3 span { color: #657066; font-size: .8rem; }
.employee-department__description { margin: 4px 0 12px; color: #657066; font-size: .84rem; }
.employee-department__empty { margin: 12px 0 0; color: #657066; font-size: .86rem; }
.employee-workload { display: flex; flex-wrap: wrap; gap: 6px; }
.employee-workload span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: .75rem; }
.recent-activity h2 { margin: 0 0 12px; }
.recent-activity button { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow-wrap: anywhere; }
.recent-activity time { color: #657066; font-size: .78rem; }

[data-attendance-root], [data-attendance-dashboard] { min-width: 0; max-width: 100%; }
.attendance-clock, .attendance-history, .attendance-employee { min-width: 0; overflow-wrap: anywhere; }
.attendance-clock .section-heading { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.attendance-clock h2 { margin: 0; }
.attendance-status-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 8px; margin-top: 12px; }
.attendance-status-buttons button { min-height: 56px; }
.attendance-status-buttons button[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: var(--warning-soft); }
.attendance-clock button:disabled, .attendance-history button:disabled { opacity: .55; cursor: wait; transform: none; }
.attendance-error { color: var(--danger); }
.attendance-error:empty { display: none; }
.attendance-clock summary, .attendance-history summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.attendance-employees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.attendance-employee { margin: 0; }
.attendance-employee p { margin: 8px 0; }
.attendance-dashboard-section { margin: 20px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.attendance-dashboard-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.attendance-dashboard-section > summary h4 { margin: 0; }
.attendance-dashboard-section > summary span { color: #657066; font-size: .84rem; }
.attendance-dashboard-section > .attendance-employees { margin-top: 12px; }
.attendance-employee-heading { display: flex; align-items: center; gap: 10px; }
.attendance-employee-heading > div { min-width: 0; }
.attendance-employee-status { display: flex; align-items: center; gap: 8px; }
.attendance-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; padding: 12px 0; }
.attendance-month { display: flex; gap: 8px; align-items: end; margin: 12px 0; }
.attendance-month label { flex: 1; max-width: 260px; min-width: 0; }
.attendance-month button { min-height: 44px; }
.attendance-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; }
.attendance-indicator { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 3px; }
.attendance-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.attendance-weekday { text-align: center; font-size: .78rem; color: #657066; }
.attendance-day { min-height: 66px; padding: 8px 3px; min-width: 0; }
.attendance-day strong, .attendance-day small { display: block; }
.attendance-day small { margin-top: 4px; font-size: .68rem; font-weight: 400; }
.attendance-day--worked { background: var(--success-soft); }
.attendance-day--sick { background: var(--warning-soft); }
.attendance-day--off { background: var(--danger-soft); }
.attendance-day--none { background: var(--surface); }
.attendance-day[aria-pressed="true"] { outline: 2px solid var(--brand-green); outline-offset: 1px; }
.attendance-mark-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.job-list-heading { align-items: center; }
.job-list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.attendance-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.attendance-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .85rem; }
.attendance-table caption { text-align: left; padding: 8px 0; color: #657066; }
.attendance-table th, .attendance-table td { border-bottom: 1px solid var(--line); padding: 10px; vertical-align: top; min-width: 130px; }
@media (max-width: 480px) {
  .attendance-calendar { gap: 4px; }
  .attendance-day { min-height: 52px; font-size: .78rem; }
  .attendance-day small { display: none; }
  .attendance-clock > .primary { width: 100%; min-height: 48px; }
}

@media (max-width: 759px) {
  .job-list-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .job-list-actions { width: 100%; gap: 12px; }
  .manager-home-mode .site-header { flex-wrap: nowrap; padding: calc(8px + var(--sat)) calc(10px + var(--sar)) 8px calc(10px + var(--sal)); gap: 6px; }
  .manager-home-mode .brand { min-width: 0; flex: 1 1 auto; gap: 6px; }
  .manager-home-mode .brand__logo-box { padding: 4px; }
  .manager-home-mode .brand__logo { width: 32px; height: 32px; }
  .manager-home-mode .brand h1 { font-size: clamp(.76rem, 3.5vw, 1rem); letter-spacing: .03em; white-space: nowrap; }
  .manager-home-mode .brand p { display: none; }
  .manager-home-mode .auth-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; }
  .manager-home-mode .auth-actions button { padding: 8px 10px; min-height: 44px; font-size: .78rem; white-space: nowrap; }
  .manager-home-mode .nav {
    position: fixed;
    z-index: 40;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 24px;
    background: rgba(23, 24, 23, 0.94);
    color: #f7f5f0;
    box-shadow: 0 16px 40px rgba(23, 24, 23, 0.28);
  }
  .manager-home-mode .manager-nav-item,
  .manager-home-mode .manager-nav-more summary {
    min-width: 0;
    min-height: 52px;
    padding: 6px 2px;
    border-radius: 16px;
    color: #f7f5f0;
    background: transparent;
    font-size: 0.75rem;
    line-height: 1.1;
  }
  .manager-home-mode .manager-nav-label { text-align: center; }
  .manager-home-mode .manager-nav-item[aria-current="page"],
  .manager-home-mode .manager-nav-more summary.is-active {
    background: var(--brand-green-soft);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--gold);
  }
  .manager-home-mode .nav :is(button, summary):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .manager-home-mode #content { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
  .manager-home-mode .panel, .manager-home-mode .super-search { margin: 8px; padding: 12px; }
  .manager-home-mode .section-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .manager-home-mode .dashboard-summary .section-heading { display: block; }
  .manager-home-mode .section-heading h2 { margin: 0; }
  .manager-home-mode .section-heading button { min-height: 44px; }
  .manager-home-mode .job-filters { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 4px; }
  .manager-home-mode .job-filters select, .manager-home-mode .job-filters button { width: 100%; min-width: 0; }
  .manager-home-mode .employee-card__head { flex-wrap: wrap; }
  .manager-home-mode .employee-status { white-space: normal; }
  .manager-home-mode .job-row__side { flex-wrap: wrap; }
  .manager-home-mode .job-quick-actions button { max-width: 100%; white-space: normal; }
}

.client-portal-body { background: var(--paper); }
.client-portal { width: min(880px, calc(100% - 24px)); margin: 16px auto 32px; display: grid; gap: 16px; }
.client-review-card { margin: 0; }
.client-review-identity, .client-review-disclaimer { color: var(--muted-strong); }
.client-review-disclaimer { padding: 12px 14px; border-left: 3px solid var(--gold); background: var(--warning-soft); border-radius: 10px; }
.client-review-state { margin: 8px 0; }
.client-review-state--approved { color: var(--success); }
.client-review-preview { margin: 12px 0; }
.client-review-preview img, .client-review-attachment { width: 100%; max-height: 480px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.cad-preview-canvas { width: 100%; height: 420px; display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); touch-action: none; }
.client-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.client-review-actions button { min-height: 44px; }
.client-review-dialog { width: min(480px, calc(100vw - 24px - var(--sal) - var(--sar))); max-height: calc(100dvh - 24px - var(--sat) - var(--sab)); overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); padding: 20px; }
.client-review-panel fieldset label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; min-width: 0; overflow-wrap: anywhere; cursor: pointer; }
.client-review-dialog::backdrop { background: rgba(17, 38, 22, .7); }
.client-review-thread, .client-review-history-item, .client-review-message { padding: 12px 0; border-top: 1px solid var(--line); }
.client-review-link { overflow-wrap: anywhere; }
.client-review-panel fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.client-review-file-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.client-review-file-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; min-width: 0; }
.client-review-file-list span { min-width: 0; overflow-wrap: anywhere; }
.client-review-file-list button, .client-review-add-files { min-height: 44px; }
.client-review-add-files { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; }
.client-review-card > label:not(.client-review-add-files) { display: grid; gap: 6px; width: 100%; margin-top: 14px; }
.client-review-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.client-review-add-files:focus-within { outline: 2px solid var(--brand-green); outline-offset: 2px; }
@media (max-width: 759px) {
  .client-portal { width: min(100% - 16px, 880px); margin: 8px auto 24px; }
  .cad-preview-canvas { height: 240px; }
  .client-review-actions button { flex: 1 1 100%; }
}
@media (min-width: 760px) and (max-width: 1024px) {
  .cad-preview-canvas { height: 360px; }
  .client-review-actions button { flex: 1 1 30%; }
}
#customer-surface { width: min(760px, calc(100% - 32px)); margin: 24px auto 48px; }
#customer-surface .stack { display: grid; gap: 12px; }
#customer-surface input, #customer-surface select, #customer-surface textarea { width: 100%; min-height: 44px; }
#customer-surface textarea { min-height: 96px; }
.subscription-notice { border-color: var(--warning-border); background: var(--warning-soft); }

@media (max-width: 800px) {
  .department-grid, .landing-feature-grid { gap: 16px; }
}

.bos { display: grid; gap: 18px; min-width: 0; max-width: 100%; }
.bos-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; min-width: 0; max-width: 100%; }
.bos-head > * { min-width: 0; max-width: 100%; }
.bos-head label { flex: 1 1 12rem; display: grid; gap: 6px; }
.bos-filters, .bos-form, .bos-ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.bos-head h2, .bos-report h3, .bos h3 { margin: 0; font-weight: 650; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.bos-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0; }
.bos-nav {
  display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%;
  position: sticky; top: calc(var(--jf-header-height, 0px) + 8px); z-index: 4; align-self: start;
  background: var(--paper); padding-bottom: 4px;
}
.bos-nav button { flex: 0 1 auto; max-width: 100%; white-space: nowrap; position: relative; z-index: 1; pointer-events: auto; }
.bos-nav button, .bos-card, .bos-snapshot button { text-align: left; min-height: 44px; }
.bos-nav button.is-active { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
.bos-main { display: grid; gap: 16px; min-width: 0; max-width: 100%; }
.bos-cards, .bos-snapshot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; max-width: 100%; }
.bos-card, .bos-snapshot button, .bos-insights article, .bos-empty, .bos-report { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.bos-card { display: grid; gap: 6px; }
.bos-card strong, .bos-snapshot strong { font-size: 1.35rem; overflow-wrap: anywhere; }
.bos-card small, .bos-note, .bos .muted { color: var(--muted-strong); }
.bos-card.is-empty { background: var(--brand-green-soft); }
.bos-card.is-empty strong { font-size: 1.05rem; font-weight: 650; }
.bos-empty { display: grid; gap: 6px; }
.bos-insights { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.bos-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bos table { width: 100%; border-collapse: collapse; }
.bos th, .bos td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bos input:not([type="checkbox"]):not([type="radio"]), .bos select, .bos textarea { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; color: inherit; }
.bos textarea { min-height: 96px; }
.bos-form button, .bos-filters button, .bos-ask button, .bos-filters a, .bos-ask a { justify-self: start; width: auto; max-width: 100%; min-height: 44px; }
.bos-filters a, .bos-ask a { display: inline-flex; align-items: center; padding: 8px 12px; }
.bos-customer-list { display: grid; gap: 8px; min-width: 0; }
.bos-customer-list button {
  display: grid; gap: 2px; width: 100%; min-height: 44px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.bos-customer-list button strong, .bos-customer-list button small { overflow-wrap: anywhere; }
.bos-customer-list button small { color: var(--muted-strong); font-weight: 500; }
.bos-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bos-pager button { min-height: 44px; }
.bos tr.is-overdue td { background: var(--warning-soft, #f8efe2); }
.bos tr.is-overdue td:last-child { color: var(--danger); font-weight: 650; }
.bos td button, .bos-customer-list button { min-height: 44px; }
.bos-error { color: var(--danger); }
.bos-notice { color: var(--success); }
.bos-totals { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.bos-totals span { min-width: 0; overflow-wrap: anywhere; }
.bos-report h4 { margin: 8px 0 4px; font-size: 0.95rem; text-transform: none; letter-spacing: 0; }
.bos-json { white-space: pre-wrap; overflow: auto; max-width: 100%; }
.bos-checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.bos-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  min-width: 0;
  margin: 0;
  padding: 8px 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}
.bos-check span { min-width: 0; overflow-wrap: anywhere; }
.bos-check input { margin-top: 0.15rem; }
.bos-form label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  min-width: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
@media (min-width: 768px) {
  .bos-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .bos-cards, .bos-snapshot, .bos-insights { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .bos-filters, .bos-ask { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: end; }
}
@media (min-width: 900px) {
  .bos-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .bos-nav { display: grid; overflow: visible; }
  .bos-nav button { flex: initial; }
}
@media (min-width: 1200px) {
  .bos-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .bos-form button, .bos-filters button, .bos-ask button { justify-self: stretch; width: 100%; }
}
@media print {
  body * { visibility: hidden; }
  #bos-print, #bos-print * { visibility: visible; }
  #bos-print { position: absolute; inset: 0; }
}
.finance-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; max-width: 100%; }
.finance-card, .finance-chart, [data-finance-chart] { min-width: 0; max-width: 100%; }
.finance-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.finance-card h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.finance-card > button { min-height: 44px; margin-top: 8px; max-width: 100%; }
.finance-chart__svg { width: 100%; max-width: 100%; height: auto; display: block; }
.finance-chart__point { cursor: pointer; }
.finance-legend, .finance-chart__summary ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.finance-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.finance-legend li, .finance-chart__summary { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.finance-swatch { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 99px; display: inline-block; margin-right: 6px; }
.finance-chart__detail { width: 100%; max-width: 100%; min-height: 44px; height: auto; white-space: normal; text-align: left; background: var(--paper); overflow-wrap: anywhere; }
.finance-empty { color: var(--muted-strong); }
@media (min-width: 760px) {
  .finance-charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}
@media (min-width: 1100px) {
  .casting-sheet, .accounting-upload-form, .create-job-form, .assign-form, #profile-form { max-width: 760px; }
  .department-workspace { max-width: 1100px; }
}
@media (max-width: 1024px) and (min-width: 760px) {
  .manager-home-mode .nav {
    position: fixed;
    z-index: 40;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 8px;
    overflow: visible;
    border: 0;
    border-radius: 24px;
    background: rgba(23, 24, 23, 0.94);
    color: #f7f5f0;
    box-shadow: 0 16px 40px rgba(23, 24, 23, 0.28);
  }
  .manager-home-mode .manager-nav-item,
  .manager-home-mode .manager-nav-more summary {
    min-height: 52px;
    color: #f7f5f0;
    background: transparent;
    font-size: 0.85rem;
    border-radius: 16px;
  }
  .manager-home-mode .manager-nav-item[aria-current="page"],
  .manager-home-mode .manager-nav-more summary.is-active {
    background: var(--brand-green-soft);
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--gold);
  }
  .manager-home-mode #content { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}
@media (max-width: 1024px) {
  body.manager-home-mode { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .manager-home-mode .manager-nav-more__menu {
    top: auto;
    bottom: calc(88px + env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    width: auto;
    max-width: calc(100dvw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
    max-height: calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

.plan-promo { display: grid; gap: 6px; }
.plan-promo__row { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-promo__row input { flex: 1 1 12rem; min-width: 0; }
.plan-promo__row button, #platform-owner-link, .platform-header-link { min-height: 44px; }
#platform-owner-link, .platform-header-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.platform-shell { width: min(1120px, calc(100% - 24px)); margin: 20px auto 48px; }
.platform-intro h2 { margin: 8px 0; }
.platform-tabs, .platform-actions, .platform-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-tabs { margin: 16px 0; }
.platform-tabs button.is-active { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
.platform-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.platform-stat { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--brand-green-soft); }
.platform-stat span { display: block; color: var(--muted-strong); font-size: .85rem; }
.platform-stat strong { display: block; margin-top: 6px; font-size: 1.6rem; }
.platform-filters label { display: grid; gap: 4px; flex: 1 1 160px; }
.platform-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.platform-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.platform-table th, .platform-table td { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; vertical-align: top; }
.platform-code, .platform-table td:first-child { white-space: nowrap; }
.platform-table th { background: var(--brand-green); color: #fff; }
.platform-table tr { cursor: pointer; }
.platform-detail, .platform-code { margin-top: 16px; }
.platform-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.2rem; letter-spacing: .04em; }
.platform-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.platform-facts dt { color: var(--muted); font-size: .8rem; }
.platform-facts dd { margin: 2px 0 0; }
.platform-check { display: flex; gap: 8px; align-items: flex-start; }
.platform-history { display: grid; gap: 10px; padding: 0; list-style: none; }
.platform-message.is-error { color: var(--danger); }
.platform-tabs button, .platform-actions button, .platform-filters button { min-height: 44px; }

.job-complete-overlay,
.job-complete-overlay * {
  pointer-events: none;
}
.job-complete-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding:
    calc(16px + var(--sat))
    calc(16px + var(--sar))
    calc(16px + var(--sab))
    calc(16px + var(--sal));
}
.job-complete-overlay[hidden] { display: none !important; }
.job-complete-card {
  width: min(18rem, calc(100vw - 32px - var(--sal) - var(--sar)));
  max-height: calc(100dvh - 32px - var(--sat) - var(--sab));
  overflow: hidden;
  text-align: center;
  color: var(--ink);
  background: rgba(247, 245, 240, 0.96);
  border: 1px solid rgba(198, 161, 91, 0.62);
  border-radius: 22px;
  padding: 22px 18px 18px;
  box-shadow: 0 18px 48px rgba(17, 38, 22, 0.16);
  animation: job-complete-card 2.6s ease forwards;
}
.job-complete-mark {
  position: relative;
  width: min(120px, 28vh);
  height: min(120px, 28vh);
  margin: 0 auto;
}
.job-complete-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.job-complete-ring,
.job-complete-check {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.job-complete-ring {
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-dasharray: 290;
  stroke-dashoffset: 290;
  animation: job-complete-draw 0.7s ease forwards;
}
.job-complete-check {
  stroke: #8b6b35;
  stroke-width: 3.2;
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
  animation: job-complete-draw 0.45s ease 0.55s forwards;
}
.job-complete-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1px rgba(198, 161, 91, 0.35);
  opacity: 0;
  animation: job-complete-spark 0.8s ease 0.95s forwards;
}
.job-complete-kicker,
.job-complete-number {
  opacity: 0;
  overflow-wrap: anywhere;
}
.job-complete-kicker {
  margin: 12px 0 0;
  color: #8b6b35;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  animation: job-complete-fade 0.4s ease 1.15s forwards;
}
.job-complete-number {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  animation: job-complete-fade 0.4s ease 1.35s forwards;
}
@keyframes job-complete-card {
  0% { opacity: 0; transform: translateY(8px); }
  10% { opacity: 1; transform: none; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes job-complete-draw { to { stroke-dashoffset: 0; } }
@keyframes job-complete-fade { to { opacity: 1; } }
@keyframes job-complete-spark {
  0% { opacity: 0; transform: rotate(var(--angle)) translateY(26px) scale(0.4); }
  28% { opacity: 0.95; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(54px) scale(0.15); }
}
@media (max-height: 420px), (orientation: landscape) and (max-height: 520px) {
  .job-complete-card { padding: 12px 14px; }
  .job-complete-mark { width: 72px; height: 72px; }
  .job-complete-kicker { margin-top: 8px; letter-spacing: 0.12em; }
}
@media (prefers-color-scheme: dark) {
  .job-complete-card {
    color: #f7f5f0;
    background: rgba(17, 24, 18, 0.94);
    border-color: rgba(230, 211, 164, 0.7);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  }
  .job-complete-check { stroke: #e6d3a4; }
  .job-complete-kicker { color: #e6d3a4; }
  .job-complete-number { color: #f7f5f0; }
  .job-complete-spark { background: #e6d3a4; }
}
@media (prefers-reduced-motion: reduce) {
  .job-complete-card,
  .job-complete-ring,
  .job-complete-check,
  .job-complete-kicker,
  .job-complete-number {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
  .job-complete-spark { display: none; }
}

/* Production board. Stage fills use the dashboard --stage-color token. */
.production-board, .production-board__sections, .store-section, .store-section__body, .stage-board, .board-cards {
  min-width: 0;
  max-width: 100%;
}
.production-board__toolbar, .production-board__search { display: grid; gap: 8px; min-width: 0; }
.production-board__views { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.production-board__views button { flex: 0 1 auto; min-height: 44px; }
.production-board__views button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.job-list-actions button { min-height: 44px; }
.board-feedback { min-height: 1.2em; margin: 8px 0; font-weight: 700; }
.board-feedback--saving { color: var(--muted-strong); }
.board-feedback--saved { color: var(--success); }
.board-feedback--error { color: var(--danger); }
.board-stage-scroller, .stage-board {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.board-stage-scroller {
  display: flex;
  gap: 8px;
  position: sticky;
  top: calc(var(--sat) + 4.5rem);
  z-index: 5;
  margin: 0 0 12px;
  padding: 8px 2px;
  background: var(--surface);
  scroll-snap-type: x proximity;
}
.board-stage, .board-stage-chip {
  background-color: var(--stage-color, var(--ink));
  color: var(--stage-on, #fff);
  border: 1px solid transparent;
}
.board-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  scroll-snap-align: start;
}
.board-stage .stage-icon, .board-stage-chip .stage-icon { color: inherit; }
.board-stage__count { min-width: 1.4em; padding: 0 6px; color: inherit; font-size: .75rem; }
.board-stage.is-active { outline: 3px solid var(--ink); outline-offset: 2px; }
.board-stage:hover, .board-stage:focus-visible { transform: none; }
.board-stage:hover { box-shadow: inset 0 0 0 2px rgba(17, 38, 22, 0.45); }
.board-stage:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.board-stage:disabled { opacity: 0.55; cursor: not-allowed; }
.board-stage-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.store-section { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.store-section + .store-section { margin-top: 8px; }
.store-section__bar {
  position: sticky;
  top: calc(var(--sat) + 4.5rem);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background: var(--paper);
}
.store-section__heading { display: flex; flex: 1 1 180px; align-items: center; gap: 8px; min-width: 0; }
.store-section__toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  text-align: center;
  background: transparent;
}
.store-section__name, .board-job__name, .board-job__number, .store-sheet__number, .store-sheet__customer, .store-sheet__item { overflow-wrap: anywhere; }
.store-section__name { margin: 0; min-width: 0; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }
.store-section__count { color: var(--muted-strong); font-size: .85rem; white-space: nowrap; }
.store-section__body { padding: 0 8px 8px; }
.stage-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 280px);
  gap: 10px;
  padding-bottom: 8px;
}
.stage-column { display: flex; flex-direction: column; min-width: 240px; min-height: 120px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.stage-column__head { display: flex; border-radius: 12px 12px 0 0; }
.stage-column__jobs { display: grid; gap: 8px; padding: 8px; }
.board-cards { display: grid; gap: 10px; }
.board-job { display: grid; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.board-job__open { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 8px; text-align: left; background: transparent; }
.board-job__number { font-weight: 800; }
.board-job__meta, .board-job__line, .board-job__updated { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; align-items: center; }
.board-job__updated { color: var(--muted-strong); font-size: .82rem; }
.board-job__field { display: grid; gap: 4px; color: var(--muted-strong); font-size: .78rem; font-weight: 700; }
.board-empty { margin: 8px; }
.store-sheet { min-width: 0; max-width: 100%; }
.store-sheet__head, .store-sheet__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.store-sheet__head {
  display: none;
  color: var(--muted-strong);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.store-sheet__row { padding: 8px 2px; border-top: 1px solid var(--line); }
.store-sheet__open, .store-sheet__head-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.store-sheet__open {
  width: 100%;
  min-height: 44px;
  padding: 4px 2px;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
}
.store-sheet__number { font-weight: 800; font-variant-numeric: tabular-nums; }
.store-sheet__customer { font-weight: 650; min-width: 0; }
.store-sheet__item { grid-column: 1 / -1; min-width: 0; color: var(--muted-strong); }
.store-sheet__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.store-sheet__stage, .store-sheet__priority { display: grid; gap: 4px; min-width: 0; }
.store-sheet__stage { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.store-sheet__swatch { position: relative; justify-self: start; }
.store-sheet__swatch > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.store-sheet__priority .rush-badge, .store-sheet__priority .priority-badge { justify-self: start; }
.store-sheet__select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}
.board-progress { display: grid; gap: 4px; margin: 0; }
.board-progress__text { font-size: .78rem; font-weight: 700; }
.board-progress__track { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.board-progress__fill { display: block; height: 100%; background-color: var(--stage-color, var(--ink)); }
.chat-message__content, .chat-message__bubble, .message-bubble p, .job-files a, .chat-attachments a { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.job-files img, .chat-attachments img, .message-bubble img, .cad-preview img, .cad-preview canvas { max-width: 100%; height: auto; }
@media (max-width: 759px) {
  button.job-row { align-items: flex-start; flex-wrap: wrap; }
  .job-row__main > span { white-space: normal; }
  .job-row__side { justify-content: flex-start; }
  .production-board .section-heading { display: block; }
  .landing__actions, .role-card__actions, .auth-actions { min-width: 0; }
  .store-sheet__head { display: none; }
  .store-sheet__item { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .store-sheet__head { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr); padding: 8px 2px 0; }
  .store-sheet__row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr); }
  .store-sheet__open, .store-sheet__head-identity { grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.25fr); }
  .store-sheet__item { grid-column: auto; }
}
@media (min-width: 760px) and (max-width: 1024px) {
  .stage-board { grid-auto-columns: minmax(220px, 1fr); }
}
@media (min-width: 1440px) {
  .stage-board { grid-auto-columns: minmax(240px, 1fr); }
}

.ai-spark { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.ai-fab {
  position: fixed;
  z-index: 160;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  min-width: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-green);
  color: #f7f5f0;
  box-shadow: 0 10px 24px rgba(17, 38, 22, 0.28);
  font-weight: 700;
}
.ai-fab:focus-visible, .ai-panel button:focus-visible, .ai-composer textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.ai-backdrop { position: fixed; inset: 0; z-index: 190; background: rgba(17, 38, 22, 0.28); }
.ai-panel {
  position: fixed;
  z-index: 200;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  padding: 16px;
  border: 1px solid var(--brand-green-border);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(17, 38, 22, 0.2);
}
.ai-panel h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.2rem; }
.ai-panel__header, .ai-panel__header-actions, .ai-message__tools, .ai-message__links, .ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ai-panel__header { justify-content: space-between; align-items: flex-start; }
.ai-panel__header-actions button, .ai-suggestions button, .ai-message__tools button, .ai-message__links button, .ai-error button {
  min-height: 44px;
}
.ai-notice, .ai-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.92rem;
}
.ai-notice { background: var(--brand-green-soft); border: 1px solid var(--brand-green-border); }
.ai-results { margin-top: 8px; overflow-x: auto; }
.ai-results table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.84rem; }
.ai-results th, .ai-results td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ai-results th { font-size: 0.72rem; letter-spacing: 0.02em; color: var(--muted-strong); }
.ai-results .ai-num { width: 38%; font-weight: 800; font-variant-numeric: tabular-nums; white-space: normal; }
.ai-results .ai-num small { display: block; font-weight: 600; white-space: normal; }
.ai-results .ai-detail { display: flex; flex-direction: column; gap: 2px; }
.ai-results .ai-detail span { white-space: normal; }
.ai-results .ai-detail b { font-weight: 750; white-space: nowrap; }
.ai-results .ai-detail small { color: var(--muted-strong); font-weight: 700; }
.ai-results button { min-height: 44px; width: 100%; padding: 6px 8px; text-align: left; white-space: normal; }
.ai-error { background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger); }
.ai-thread {
  flex: 1 1 auto;
  min-height: 0;
  margin: 12px 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ai-welcome, .ai-message {
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.ai-message--user { background: var(--brand-green); color: #f7f5f0; border-color: var(--brand-green); }
.ai-message--assistant { background: #fff; }
.ai-message p, .ai-welcome p { margin: 0 0 8px; }
.ai-message p:last-child, .ai-welcome p:last-child { margin-bottom: 0; }
.ai-message ul { margin: 0; padding-left: 1.1rem; }
.ai-message li + li { margin-top: 4px; }
.ai-suggestions { max-height: 30%; overflow: auto; }
.ai-suggestions button, .ai-message__links button {
  border: 1px solid var(--brand-green-border);
  background: var(--brand-green-soft);
  color: var(--ink);
  border-radius: 999px;
  text-align: left;
}
.ai-composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.ai-composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  max-height: 140px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}
.ai-pending { margin: 0; color: var(--muted-strong); font-weight: 700; }
@media (max-width: 759px) {
  .manager-home-mode .ai-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ai-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: calc(100dvh - env(safe-area-inset-top));
    border-radius: 18px 18px 0 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .ai-panel { width: min(520px, 100vw); max-height: 100dvh; }
  .ai-suggestions { display: none; }
  .manager-home-mode .ai-fab { bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-color-scheme: dark) {
  .ai-panel, .ai-welcome, .ai-message--assistant, .ai-composer textarea {
    background: #112616;
    color: #f7f5f0;
    border-color: rgba(198, 161, 91, 0.45);
  }
  .ai-message--user { background: #f7f5f0; color: #112616; }
  .ai-suggestions button, .ai-message__links button {
    background: #1c3424;
    color: #f7f5f0;
    border-color: rgba(198, 161, 91, 0.45);
  }
  .ai-notice { background: #1c3424; color: #f7f5f0; }
  .ai-backdrop { background: rgba(0, 0, 0, 0.45); }
}

/* Desktop workspace. Rules below 1024px stay as they are, including the bottom navigation. */
@media (min-width: 1024px) {
  .department-workspace,
  .worker-page,
  .worker-home,
  .profile-page,
  .employee-profile,
  .employee-tabs {
    max-width: none;
  }
  .worker-page,
  .worker-home {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .worker-home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .worker-home > :not(.worker-home__group) { grid-column: 1 / -1; }
  .worker-home__group { width: 100%; max-width: 640px; justify-self: start; }
  .employee-profile__stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
    justify-content: start;
  }
  .client-portal { width: min(1200px, calc(100% - 48px)); }
  .job-list > button.job-row .job-row__main > strong { white-space: nowrap; }
  .job-list > button.job-row .job-row__main > span {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .bos td { white-space: normal; overflow-wrap: anywhere; }
  .bos th { white-space: nowrap; }
  .bos th, .bos td,
  .casting-panel th, .casting-panel td {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 1025px) {
  .cad-preview-canvas { height: 560px; }
}

@media (min-width: 1280px) {
  .team-grid, .room-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .platform-shell { width: calc(100% - 48px); max-width: none; }
  .client-portal { width: min(1480px, calc(100% - 64px)); }
  #auth {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .job-list > button.job-row .job-row__side { flex-wrap: nowrap; }
  .stage-board { grid-auto-columns: minmax(220px, 1fr); }
}

@media (min-width: 1440px) {
  #app { max-width: 100%; margin: 0; }
  .stage-board { grid-auto-columns: minmax(240px, 1fr); }
  .client-portal { width: min(1680px, calc(100% - 72px)); }
  .cad-preview-canvas { height: min(70vh, 820px); }
  #marketing.landing {
    padding-left: max(32px, calc((100% - 1520px) / 2));
    padding-right: max(32px, calc((100% - 1520px) / 2));
  }
  .site-footer {
    padding-right: max(32px, var(--sar));
    padding-left: max(32px, var(--sal));
  }
}

@media (min-width: 1600px) {
  #app {
    padding-left: max(28px, var(--sal));
    padding-right: max(28px, var(--sar));
  }
  #app > .nav,
  .manager-home-mode .panel,
  .manager-home-mode .super-search,
  .worker-page,
  .worker-home {
    margin-left: 0;
    margin-right: 0;
  }
  .worker-page,
  .worker-home {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1920px) {
  #app {
    padding-left: max(36px, var(--sal));
    padding-right: max(36px, var(--sar));
  }
  .platform-shell { width: calc(100% - 64px); }
  .client-portal { width: min(2000px, calc(100% - 80px)); }
  #marketing.landing {
    padding-left: max(48px, calc((100% - 2200px) / 2));
    padding-right: max(48px, calc((100% - 2200px) / 2));
  }
  .site-footer {
    padding-right: max(48px, var(--sar));
    padding-left: max(48px, var(--sal));
  }
}