/* cr4nes — Phase 1 design system tokens + shared mockup components.
   Source of truth: Design-System.md. Do not add colors here that aren't
   validated there — see that doc's §4 validation trail. */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/plex-sans-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --primary:#0D5C8C;
  --primary-tint:#E4EEF3;
  --rust:#B8491F;
  --page-bg:#F7F5F0;
  --surface:#FFFFFF;
  --border:#E4E0D5;
  --text:#211F1B;
  --text-secondary:#6B6659;
  --text-muted:#9B9686;
  --radius-lg:12px;
  --radius:8px;
  --radius-sm:5px;
  --font-sans:'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--page-bg);
  font-family:var(--font-sans);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--primary); }
h1,h2{ text-wrap:balance; margin:0; }

/* ---------- reviewer meta bar (not part of the product UI) ---------- */
.meta-bar{
  text-align:center;
  padding:20px 16px 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.meta-bar a{ color:var(--text-muted); text-decoration-color:var(--border); }

.stage{
  display:flex;
  justify-content:center;
  padding:20px 20px 48px;
}

.screen{
  width:100%;
  max-width:1320px;
  display:grid;
  grid-template-columns:minmax(320px,38%) 1fr;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(33,31,27,0.05), 0 20px 40px -24px rgba(33,31,27,0.22);
}

/* ---------- brand panel ---------- */
.brand-panel{
  position:relative;
  padding:40px 36px 32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:32px;
  color:#fff;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.055) 0px, rgba(255,255,255,0.055) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0px, rgba(255,255,255,0.055) 1px, transparent 1px, transparent 34px),
    linear-gradient(160deg, color-mix(in srgb, var(--primary) 90%, white) 0%, var(--primary) 45%, color-mix(in srgb, var(--primary) 78%, black) 100%);
  overflow:hidden;
}

.crane-art{
  position:absolute;
  right:-18px;
  bottom:-10px;
  width:280px;
  height:auto;
  pointer-events:none;
}

.brand-top, .brand-content, .stat-strip{ position:relative; z-index:1; }

.wordmark{
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.01em;
}
.wordmark .four{ color:var(--rust); }
.by{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.62);
  margin-top:4px;
}

.tagline{
  font-size:26px;
  line-height:1.28;
  font-weight:600;
  max-width:26ch;
  margin-top:28px;
}
.tagline-sub{
  font-size:14.5px;
  line-height:1.55;
  color:rgba(255,255,255,0.78);
  max-width:32ch;
  margin-top:12px;
}

.points{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.points li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:rgba(255,255,255,0.88);
}
.check{ width:16px; height:16px; flex:none; position:relative; }
.check::after{
  content:"";
  position:absolute; left:3px; top:5px;
  width:8px; height:4px;
  border-left:2px solid rgba(255,255,255,0.85);
  border-bottom:2px solid rgba(255,255,255,0.85);
  transform:rotate(-45deg);
}

.stat-strip{
  display:flex;
  gap:24px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.18);
}
.stat-value{
  display:block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:19px;
  font-variant-numeric:tabular-nums;
}
.stat-label{
  display:block;
  font-size:11.5px;
  color:rgba(255,255,255,0.65);
  margin-top:2px;
}

/* ---------- form panel ---------- */
.form-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 32px;
}
.form-wrap{ width:100%; max-width:380px; }

.form-wrap h1{
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.01em;
}
.subhead{
  font-size:14.5px;
  line-height:1.5;
  color:var(--text-secondary);
  margin:10px 0 28px;
}

form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-head{ display:flex; align-items:baseline; justify-content:space-between; }
.field label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.field-link{ font-size:12.5px; font-weight:600; }
.field input{
  font-family:var(--font-sans);
  font-size:14.5px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
  outline:none;
  width:100%;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder{ color:var(--text-muted); }
.field input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-tint);
}
.field input.mono-input{ font-family:var(--font-mono); letter-spacing:0.04em; }

.password-wrap{ position:relative; display:flex; }
.password-wrap input{ flex:1; padding-right:64px; }
.toggle-pass{
  position:absolute;
  right:6px; top:50%;
  transform:translateY(-50%);
  background:none; border:none;
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:600;
  color:var(--primary);
  padding:6px 8px;
  cursor:pointer;
  border-radius:4px;
}
.toggle-pass:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.hint{ font-size:12px; color:var(--text-muted); }

.checkbox{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-secondary);
  cursor:pointer;
  margin-top:2px;
}
.checkbox input{
  appearance:none;
  width:16px; height:16px; flex:none;
  margin-top:2px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--surface);
  cursor:pointer;
  position:relative;
  transition:background .12s ease, border-color .12s ease;
}
.checkbox input:checked{ background:var(--primary); border-color:var(--primary); }
.checkbox input:checked::after{
  content:"";
  position:absolute; left:4px; top:2px;
  width:5px; height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(40deg);
}
.checkbox input:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.checkbox a{ font-weight:600; }

.btn-primary{
  margin-top:6px;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:600;
  color:#fff;
  background:var(--primary);
  border:none;
  border-radius:var(--radius);
  padding:12px 20px;
  cursor:pointer;
  transition:background .12s ease;
}
.btn-primary:hover{ background:color-mix(in srgb, var(--primary) 88%, black); }
.btn-primary:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

.switch{
  text-align:center;
  font-size:13.5px;
  color:var(--text-secondary);
  margin:20px 0 0;
}
.switch a{ font-weight:600; }

.trust{
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:16px 0 0;
}

/* ---------- tabs (login: password vs invite code) ---------- */
.tabs{
  display:flex;
  gap:4px;
  background:var(--page-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:3px;
  margin-bottom:24px;
}
.tab{
  flex:1;
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:600;
  color:var(--text-secondary);
  background:none;
  border:none;
  border-radius:6px;
  padding:8px 10px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.tab[aria-selected="true"]{
  background:var(--surface);
  color:var(--text);
  box-shadow:0 1px 2px rgba(33,31,27,0.08);
}
.tab:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.tab-panel[hidden]{ display:none; }

/* ---------- index / landing list ---------- */
.index-wrap{ max-width:760px; margin:0 auto; padding:56px 24px 80px; }
.index-wrap .wordmark{ color:var(--text); font-size:20px; }
.index-wrap .wordmark .four{ color:var(--rust); }
.index-wrap .by{ color:var(--text-muted); }
.index-head{ margin:40px 0 28px; }
.index-head h1{ font-size:26px; font-weight:700; }
.index-head p{ color:var(--text-secondary); font-size:14.5px; margin-top:8px; }
.screen-list{ display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0; }
.screen-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--text);
}
.screen-list a:hover{ border-color:var(--primary); }
.screen-list .name{ font-weight:600; font-size:15px; }
.screen-list .desc{ font-size:13px; color:var(--text-secondary); margin-top:2px; }
.screen-list .status{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-muted);
  flex:none;
}
.screen-list .status.done{ color:#0ca30c; }

@media (max-width:860px){
  .screen{ grid-template-columns:1fr; border-radius:var(--radius); }
  .brand-panel{ padding:28px 24px; gap:20px; }
  .crane-art{ width:170px; opacity:.7; }
  .tagline{ font-size:20px; margin-top:16px; }
  .points{ display:none; }
  .stat-strip{ gap:18px; padding-top:16px; }
  .form-panel{ padding:36px 22px 44px; }
}

/* ==========================================================
   In-app screens (onboarding, etc.) — same tokens, app chrome
   instead of the auth split-panel. Rust stays in the wordmark
   only (brand mark, not a functional color); everything
   functional here is steel blue / semantic status colors.
   ========================================================== */

.app-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.app-topbar .wordmark{ font-size:18px; }
.app-topbar .by{ margin-top:1px; }
.exit-link{
  font-size:13.5px;
  font-weight:600;
  color:var(--text-secondary);
  text-decoration:none;
}
.exit-link:hover{ color:var(--primary); }

.onboard-shell{ max-width:760px; margin:0 auto; padding:48px 24px 80px; }
.onboard-head h1{ font-size:26px; font-weight:700; }
.onboard-head p{ color:var(--text-secondary); font-size:14.5px; margin-top:8px; }

.progress-row{ display:flex; align-items:center; gap:12px; margin:24px 0 32px; }
.progress-track{ flex:1; height:8px; background:var(--border); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--primary); border-radius:99px; }
.progress-label{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--text-secondary);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.checklist{ display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0; }
.checklist-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.checklist-icon{
  width:36px; height:36px; flex:none;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-tint);
  color:var(--primary);
}
.checklist-icon svg{ width:18px; height:18px; }
.checklist-item.done .checklist-icon{ background:rgba(12,163,12,0.12); color:#0ca30c; }
.checklist-body{ flex:1; min-width:0; }
.checklist-title{ font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.checklist-desc{ font-size:13px; color:var(--text-secondary); margin-top:2px; }
.tag-optional{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 6px;
}
.checklist-status{
  flex:none;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  min-width:88px;
  text-align:right;
}
.checklist-status.done{ color:#0ca30c; }
.checklist-status.progress{ color:var(--primary); }
.checklist-status.todo{ color:var(--text-muted); }
.checklist-cta{
  flex:none;
  font-size:13px; font-weight:600;
  color:#fff; background:var(--primary);
  border:none; border-radius:6px;
  padding:8px 14px;
  cursor:pointer; text-decoration:none;
  display:inline-block;
}
.checklist-cta.secondary{ background:none; color:var(--text); border:1px solid var(--border); }
.checklist-cta:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- wizard step indicator ---------- */
.wizard-steps{ display:flex; align-items:center; gap:8px; margin-bottom:28px; }
.wizard-step{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-muted); }
.wizard-step.active{ color:var(--primary); }
.wizard-step.complete{ color:#0ca30c; }
.wizard-step .num{
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid currentColor;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; flex:none;
}
.wizard-step.active .num{ background:var(--primary); color:#fff; border-color:var(--primary); }
.wizard-step.complete .num{ background:#0ca30c; color:#fff; border-color:#0ca30c; }
.wizard-sep{ width:28px; height:1px; background:var(--border); flex:none; }

.back-link{
  font-size:13px; font-weight:600; color:var(--text-secondary);
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  margin-bottom:16px;
}
.back-link:hover{ color:var(--primary); }

.step-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--primary); background:var(--primary-tint);
  border-radius:99px; padding:4px 10px;
}

.manual-link{ font-size:13.5px; }

/* ---------- CSV template cards ---------- */
.template-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:20px 0 28px; }
.template-card{ border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.template-card .name{ font-weight:600; font-size:13.5px; }
.template-card .cols{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); margin-top:6px; line-height:1.6; word-break:break-word; }
.template-card a{ display:inline-block; margin-top:12px; font-size:12.5px; font-weight:600; text-decoration:none; }
.template-card a:hover{ text-decoration:underline; }

/* ---------- dropzone ---------- */
.dropzone{
  border:1.5px dashed var(--border);
  border-radius:var(--radius);
  padding:36px 20px;
  text-align:center;
  background:var(--page-bg);
}
.dropzone .dz-title{ font-weight:600; font-size:14.5px; }
.dropzone .dz-sub{ font-size:12.5px; color:var(--text-muted); margin-top:6px; }
.dropzone .browse-btn{ margin-top:14px; }
.btn-secondary{
  font-family:var(--font-sans);
  font-size:13.5px; font-weight:600;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:9px 16px;
  cursor:pointer;
}
.btn-secondary:hover{ border-color:var(--primary); color:var(--primary); }
.btn-secondary:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- review table ---------- */
.review-summary{ display:flex; gap:28px; margin:4px 0 20px; flex-wrap:wrap; }
.review-summary .n{ font-family:var(--font-mono); font-weight:600; font-size:19px; display:block; font-variant-numeric:tabular-nums; }
.review-summary .l{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.review-summary .n.error-n{ color:#d03b3b; }
.review-summary .n.new-n{ color:#0ca30c; }

.table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table.review-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
.review-table th{
  text-align:left; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted); font-weight:600;
  padding:10px 12px; border-bottom:1px solid var(--border);
  background:var(--page-bg);
  white-space:nowrap;
}
.review-table td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.review-table tr:last-child td{ border-bottom:none; }
.review-table tr.error-row td{ background:rgba(208,59,59,0.045); }
.review-table .mono{ font-family:var(--font-mono); font-size:12px; }
.review-table .name-cell{ font-weight:600; }
.error-msg{ font-size:11.5px; color:#d03b3b; margin-top:3px; }

.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600;
  padding:3px 9px; border-radius:99px;
  white-space:nowrap;
}
.pill-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.pill-matched{ background:var(--primary-tint); color:var(--primary); }
.pill-new{ background:rgba(12,163,12,0.12); color:#0ca30c; }
.pill-error{ background:rgba(208,59,59,0.12); color:#d03b3b; }

.footer-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--border);
}
.footer-actions .hint{ font-size:12px; color:var(--text-muted); }

.step-panel[hidden]{ display:none; }

/* ---------- registry / settings-style forms (equipment, rate card) ---------- */
.wide-shell{ max-width:900px; margin:0 auto; padding:40px 24px 80px; }
.wide-shell .onboard-head{ margin-bottom:8px; }

.kind-badge{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.kind-badge svg{ width:15px; height:15px; color:var(--text-muted); flex:none; }

.link-action{ font-size:12.5px; font-weight:600; text-decoration:none; }
.link-action.danger{ color:var(--text-muted); }
.link-action.danger:hover{ color:#d03b3b; }
.actions-cell{ display:flex; gap:14px; white-space:nowrap; }

.panel-card{ border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-top:16px; }
.panel-card h3{ font-size:14px; font-weight:700; margin:0 0 14px; }

.inline-form-grid{ display:grid; grid-template-columns:2fr 1fr 2fr auto; gap:12px; align-items:end; }
.inline-form-grid .field{ gap:5px; }
.inline-form-grid .field label{ font-size:12px; }
.inline-form-grid select{
  font-family:var(--font-sans); font-size:14px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 10px; width:100%;
}
.inline-form-grid select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }

.section-heading{ display:flex; align-items:baseline; justify-content:space-between; margin:36px 0 4px; }
.section-heading:first-of-type{ margin-top:0; }
.section-heading h2{ font-size:16px; font-weight:700; }
.section-desc{ font-size:13px; color:var(--text-secondary); margin:2px 0 16px; }

.rate-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 2px; border-bottom:1px solid var(--border); }
.rate-row:last-child{ border-bottom:none; }
.rate-role{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.rate-role .role-sub{ font-size:12px; font-weight:400; color:var(--text-muted); }
.rate-input-wrap{ display:flex; align-items:center; gap:6px; }
.rate-input-wrap .affix{ font-size:13px; color:var(--text-muted); font-family:var(--font-mono); }
.rate-input{
  width:84px; font-family:var(--font-mono); font-size:14px; text-align:right;
  border:1px solid var(--border); border-radius:6px; padding:7px 8px;
  color:var(--text);
}
.rate-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }

.mult-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.mult-card{ border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.mult-card label{ font-size:12.5px; font-weight:600; color:var(--text-secondary); display:block; margin-bottom:8px; }
.mult-card .rate-input-wrap{ justify-content:flex-start; }
.mult-card .rate-input{ width:64px; text-align:left; }
.mult-card .range-hint{ font-size:11px; color:var(--text-muted); margin-top:6px; }

.tabs.inline{ display:inline-flex; width:auto; gap:2px; }
.tabs.inline .tab{ flex:none; padding:8px 20px; }

.builtin-row td{ color:var(--text-muted); }
.builtin-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:4px; padding:1px 6px; margin-left:8px;
}

/* ---------- connection status banner (QuickBooks, etc.) ---------- */
.status-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; border-radius:var(--radius);
  background:rgba(12,163,12,0.08); border:1px solid rgba(12,163,12,0.25);
  margin:22px 0 8px;
}
.status-banner .msg{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#0ca30c; }
.status-banner .msg svg{ width:18px; height:18px; flex:none; }
.status-banner .msg .sub{ font-size:12.5px; color:var(--text-secondary); font-weight:400; margin-left:2px; }

.table-select{
  font-family:var(--font-sans); font-size:13px; color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  padding:7px 8px; background:var(--surface);
  width:100%; max-width:200px;
}
.table-select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }

.info-note{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.5px; color:var(--text-secondary); line-height:1.55;
  background:var(--page-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; margin-top:20px;
}
.info-note svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--text-muted); }

/* ---------- roster ---------- */
.roster-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 4px; }

/* ---------- modal (invite code reveal) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(33,31,27,0.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:50;
}
.modal-overlay[hidden]{ display:none; }
.modal-card{
  background:var(--surface); border-radius:var(--radius-lg);
  max-width:420px; width:100%; padding:28px;
  box-shadow:0 24px 48px -12px rgba(33,31,27,0.35);
}
.modal-card h3{ font-size:17px; font-weight:700; margin:0 0 6px; }
.modal-card p{ font-size:13.5px; color:var(--text-secondary); line-height:1.55; margin:0 0 18px; }
.code-display{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--page-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:18px;
}
.code-display .code{ font-family:var(--font-mono); font-size:19px; font-weight:600; letter-spacing:0.04em; color:var(--text); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ==========================================================
   Office core app shell — persistent sidebar. Used by screens
   a dispatcher/owner lives in day to day (Customers, Leads,
   Jobs, Dispatch, Approvals, Compliance) — unlike onboarding's
   linear wizard chrome, these need real navigation.
   ========================================================== */
.app-frame{ display:flex; min-height:100vh; }

.sidebar{
  width:232px; flex:none;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:18px 14px;
}
.sidebar-brand{ padding:6px 8px 18px; }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-group-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); padding:16px 10px 6px;
}
.nav-group-label:first-child{ padding-top:2px; }
.sidebar-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px;
  font-size:13.5px; font-weight:600;
  color:var(--text-secondary); text-decoration:none;
}
.sidebar-link svg{ width:17px; height:17px; flex:none; color:var(--text-muted); }
.sidebar-link:hover{ background:var(--page-bg); color:var(--text); }
.sidebar-link.active{ background:var(--primary-tint); color:var(--primary); }
.sidebar-link.active svg{ color:var(--primary); }
.sidebar-footer{ border-top:1px solid var(--border); padding:14px 10px 4px; margin-top:10px; }
.sidebar-footer .company{ font-size:12.5px; font-weight:600; color:var(--text); }
.sidebar-footer .role{ font-size:11.5px; color:var(--text-muted); margin-top:1px; }

.main{ flex:1; min-width:0; }
.main-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; border-bottom:1px solid var(--border); background:var(--surface);
  gap:16px; flex-wrap:wrap;
}
.main-header h1{ font-size:19px; font-weight:700; }
.main-header .sub{ font-size:13px; color:var(--text-secondary); margin-top:2px; font-weight:400; }
.main-body{ padding:28px 32px 60px; }

/* ---------- customers: list + detail ---------- */
.customers-layout{
  display:grid; grid-template-columns:300px 1fr;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--surface);
}
.cust-list-pane{ border-right:1px solid var(--border); padding:12px; max-height:760px; overflow-y:auto; }
.cust-search{ margin-bottom:10px; }
.cust-list{ display:flex; flex-direction:column; gap:2px; }
.cust-item{
  display:block; padding:11px 12px; border-radius:8px;
  text-decoration:none; color:inherit; border:1px solid transparent;
}
.cust-item:hover{ background:var(--page-bg); }
.cust-item.active{ background:var(--primary-tint); border-color:rgba(13,92,140,0.3); }
.cust-item .name{ font-size:13.5px; font-weight:600; color:var(--text); }
.cust-item .meta{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.cust-item .contact-name{ font-size:11.5px; color:var(--text-muted); }

.cust-detail-pane{ padding:28px 32px; }
.detail-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.detail-header h2{ font-size:21px; font-weight:700; }
.detail-header-meta{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.detail-section{ margin-top:30px; }
.detail-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.detail-section h3{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-secondary); margin:0;
}

.override-note{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--primary-tint); border:1px solid rgba(13,92,140,0.22);
  border-radius:var(--radius); padding:12px 14px; font-size:13px; color:var(--text);
  line-height:1.5;
}
.override-note svg{ color:var(--primary); width:16px; height:16px; flex:none; margin-top:2px; }

.person-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px;
}
.person-row:last-child{ border-bottom:none; }
.person-row .who{ font-weight:600; }
.person-row .tag{ font-size:11px; color:var(--text-muted); font-weight:600; margin-left:8px; }
.person-row .info{ color:var(--text-secondary); font-size:12.5px; text-align:right; line-height:1.5; }

.pill-neutral{ background:var(--page-bg); color:var(--text-secondary); border:1px solid var(--border); }

/* ---------- leads pipeline: kanban ---------- */
.kanban-board{
  display:grid; grid-template-columns:repeat(4, minmax(230px,1fr));
  gap:16px; align-items:start;
  overflow-x:auto; padding-bottom:8px;
}
.kanban-col{ background:var(--page-bg); border:1px solid var(--border); border-radius:var(--radius); padding:12px; min-width:230px; }
.kanban-col-head{ display:flex; align-items:center; gap:8px; padding:4px 4px 12px; }
.kanban-col-head h3{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); flex:1; }
.kanban-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.kanban-dot.neutral{ background:var(--text-muted); }
.kanban-dot.quoted{ background:var(--primary); }
.kanban-dot.won{ background:#0ca30c; }
.kanban-count{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:1px 7px; }
.kanban-cards{ display:flex; flex-direction:column; gap:10px; }
.kanban-card{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px 14px; }
.kanban-card .co{ font-size:13.5px; font-weight:700; color:var(--text); }
.kanban-card .job{ font-size:12.5px; color:var(--text-secondary); margin-top:5px; line-height:1.45; }
.kanban-card .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:11px; color:var(--text-muted); }

@media (max-width:860px){
  .customers-layout{ grid-template-columns:1fr; }
  .cust-list-pane{ border-right:none; border-bottom:1px solid var(--border); max-height:320px; }
  .kanban-board{ grid-template-columns:repeat(4, 240px); }
}

@media (max-width:780px){
  .app-frame{ flex-direction:column; }
  .sidebar{
    width:100%; flex-direction:row; align-items:center;
    padding:10px 14px; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border);
    gap:4px;
  }
  .sidebar-brand{ padding:0 12px 0 0; flex:none; }
  .sidebar-nav{ flex-direction:row; flex:none; }
  .nav-group-label{ display:none; }
  .sidebar-footer{ display:none; }
  .main-header{ padding:16px 18px; }
  .main-body{ padding:20px 18px 48px; }
}

/* ---------- jobs: list + detail ---------- */
.jobs-layout{
  display:grid; grid-template-columns:320px 1fr;
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--surface);
}
.job-list-pane{ border-right:1px solid var(--border); padding:12px; max-height:820px; overflow-y:auto; }
.job-item{
  display:block; padding:12px; border-radius:8px;
  text-decoration:none; color:inherit; border:1px solid transparent;
  margin-bottom:2px;
}
.job-item:hover{ background:var(--page-bg); }
.job-item.active{ background:var(--primary-tint); border-color:rgba(13,92,140,0.3); }
.job-item .job-name{ font-size:13.5px; font-weight:600; color:var(--text); }
.job-item .job-site{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.job-item .job-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.job-item .job-total{ font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }

.pill-status-scheduled{ background:var(--page-bg); color:var(--text-secondary); border:1px solid var(--border); }
.pill-status-progress{ background:var(--primary-tint); color:var(--primary); }
.pill-status-submitted{ background:rgba(250,178,25,0.16); color:#8a6207; }
.pill-status-approved{ background:rgba(12,163,12,0.12); color:#0ca30c; }
.pill-status-invoiced{ background:var(--text); color:var(--surface); }

.job-detail-pane{ padding:28px 32px; }
.job-total-hero{ display:flex; align-items:baseline; gap:8px; margin-top:4px; }
.job-total-hero .amt{ font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.job-total-hero .lbl{ font-size:12.5px; color:var(--text-muted); }

.ticket-total{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; }
.crew-chip{ display:inline-block; font-size:11.5px; color:var(--text-secondary); }

.export-note{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text-muted);
  margin-top:10px;
}
.export-note svg{ width:14px; height:14px; flex:none; }
.btn-primary[disabled]{ background:var(--border); color:var(--text-muted); cursor:not-allowed; }

/* ---------- dispatch calendar ---------- */
.dispatch-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.week-nav{ display:flex; align-items:center; gap:12px; }
.week-nav button{ background:var(--surface); border:1px solid var(--border); border-radius:6px; width:30px; height:30px; cursor:pointer; color:var(--text-secondary); }
.week-nav button:hover{ border-color:var(--primary); color:var(--primary); }
.week-label{ font-size:14px; font-weight:600; }

.legend{ display:flex; align-items:center; gap:16px; font-size:11.5px; color:var(--text-secondary); margin-bottom:14px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:6px; }
.legend-swatch{ width:12px; height:12px; border-radius:3px; flex:none; }
.legend-swatch.assigned{ background:var(--primary-tint); border:1px solid var(--primary); }
.legend-swatch.unavailable{ background:repeating-linear-gradient(45deg, var(--border), var(--border) 3px, transparent 3px, transparent 6px); border:1px solid var(--border); }
.legend-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.legend-dot.warn{ background:#fab219; }
.legend-dot.critical{ background:#d03b3b; }

.dispatch-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table.dispatch-table{ width:100%; border-collapse:collapse; min-width:920px; background:var(--surface); }
.dispatch-table th{
  text-align:left; padding:10px 12px;
  font-size:11px; font-weight:700; color:var(--text-secondary);
  border-bottom:1px solid var(--border); background:var(--page-bg);
  white-space:nowrap;
}
.dispatch-table th.resource-col{ width:190px; }
.dispatch-table td{ border-bottom:1px solid var(--border); border-right:1px solid var(--border); vertical-align:top; padding:0; }
.dispatch-table td:last-child{ border-right:none; }
.dispatch-table tr:last-child td{ border-bottom:none; }

.resource-cell{ display:flex; align-items:center; gap:9px; padding:10px 12px; }
.resource-cell .r-icon{
  width:28px; height:28px; border-radius:6px; flex:none;
  background:var(--page-bg); display:flex; align-items:center; justify-content:center;
}
.resource-cell .r-icon svg{ width:15px; height:15px; color:var(--text-muted); }
.resource-cell .r-name{ font-size:12.5px; font-weight:600; color:var(--text); }
.resource-cell .r-sub{ font-size:10.5px; color:var(--text-muted); }

.day-cell{ min-width:118px; height:66px; padding:5px; position:relative; }
.day-cell.unavailable{
  background:repeating-linear-gradient(45deg, var(--page-bg), var(--page-bg) 4px, transparent 4px, transparent 8px);
}
.day-cell .unavail-label{ font-size:10px; color:var(--text-muted); font-weight:600; padding:4px; }
.assign-chip{
  display:block; background:var(--primary-tint); color:var(--primary);
  border-radius:5px; padding:4px 6px; font-size:10.5px; font-weight:700;
  line-height:1.3; margin-bottom:3px;
}
.cell-flag{ display:flex; align-items:center; gap:4px; font-size:9.5px; font-weight:600; color:var(--text); padding:0 2px; }
.cell-flag .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.cell-flag .dot.warn{ background:#fab219; }
.cell-flag .dot.critical{ background:#d03b3b; }

@media (max-width:860px){
  .jobs-layout{ grid-template-columns:1fr; }
  .job-list-pane{ border-right:none; border-bottom:1px solid var(--border); max-height:320px; }
}

/* ---------- approval queue ---------- */
.calc-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.calc-row:last-child{ border-bottom:none; }
.calc-row .k{ color:var(--text-secondary); }
.calc-row .v{ font-family:var(--font-mono); font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.calc-row .v .raw{ color:var(--text-muted); font-weight:400; margin-right:6px; }

.line-item-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.line-item-row:last-child{ border-bottom:none; }
.line-item-who{ font-size:13.5px; }
.line-item-who .who{ font-weight:600; }
.line-item-who .role{ font-size:11.5px; color:var(--text-muted); }
.line-item-calc{ display:flex; align-items:center; gap:8px; }
.line-item-calc .rate-input{ width:64px; }
.line-item-calc .x{ color:var(--text-muted); font-size:12px; }
.line-item-calc .eq{ font-family:var(--font-mono); font-weight:700; font-size:13.5px; min-width:76px; text-align:right; font-variant-numeric:tabular-nums; }

.total-hero{ display:flex; align-items:baseline; justify-content:space-between; padding-top:14px; margin-top:6px; border-top:1.5px solid var(--text); }
.total-hero .lbl{ font-size:14px; font-weight:700; }
.total-hero .amt{ font-family:var(--font-mono); font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }

.adjust-hint{ font-size:12px; color:var(--text-muted); margin:4px 0 18px; }

/* ---------- compliance roster ---------- */
.compliance-summary{ display:flex; gap:26px; margin:20px 0 26px; flex-wrap:wrap; }
.summary-stat{ display:flex; align-items:center; gap:8px; }
.summary-stat .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.summary-stat .n{ font-family:var(--font-mono); font-weight:700; font-size:17px; font-variant-numeric:tabular-nums; }
.summary-stat .l{ font-size:12px; color:var(--text-secondary); }

.cert-list{ display:flex; flex-direction:column; gap:6px; }
.cert-chip{ display:flex; align-items:baseline; gap:7px; font-size:12.5px; }
.cert-chip .dot{ width:8px; height:8px; border-radius:50%; flex:none; position:relative; top:1px; }
.cert-chip .dot.good{ background:#0ca30c; }
.cert-chip .dot.warning{ background:#fab219; }
.cert-chip .dot.serious{ background:#ec835a; }
.cert-chip .dot.critical{ background:#d03b3b; }
.cert-chip .c-label{ font-weight:600; color:var(--text); }
.cert-chip .c-status{ color:var(--text-secondary); }
.cert-chip .c-note{ color:var(--text-muted); font-style:normal; }

/* ---------- settings sub-nav ---------- */
.settings-subnav{
  display:flex; gap:4px; padding:12px 32px;
  border-bottom:1px solid var(--border); background:var(--surface);
  overflow-x:auto;
}
.settings-subnav a{
  font-size:13px; font-weight:600; color:var(--text-secondary);
  text-decoration:none; padding:7px 12px; border-radius:6px; white-space:nowrap;
}
.settings-subnav a:hover{ background:var(--page-bg); color:var(--text); }
.settings-subnav a.active{ background:var(--primary-tint); color:var(--primary); }

/* ---------- custom ticket fields ---------- */
.drag-handle{ color:var(--text-muted); flex:none; cursor:grab; }
.field-order-cell{ display:flex; align-items:center; gap:10px; }
.type-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; color:var(--text-secondary);
  background:var(--page-bg); border:1px solid var(--border);
  border-radius:99px; padding:3px 10px;
}
.required-yes{ color:var(--primary); font-weight:600; font-size:12.5px; }
.required-no{ color:var(--text-muted); font-size:12.5px; }
.options-inline{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }

.conditional-field{ transition:opacity .12s ease; }
.conditional-field[hidden]{ display:none; }

/* ---------- cert type management ---------- */
.subject-group{ margin-bottom:30px; }
.subject-group:last-child{ margin-bottom:0; }
.subject-group h3{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-secondary); margin:0 0 10px;
}

/* ---------- employee management ---------- */
.pill-disabled{ background:var(--page-bg); color:var(--text-muted); border:1px solid var(--border); }
.owner-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted); border:1px solid var(--border); border-radius:4px; padding:1px 6px;
}
tr.row-disabled{ opacity:.55; }
.role-select-cell select{
  font-family:var(--font-sans); font-size:13px; color:var(--text);
  border:1px solid var(--border); border-radius:6px; padding:6px 8px; background:var(--surface);
}
.role-select-cell select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint); }

/* ---------- company profile ---------- */
.logo-upload{
  display:flex; align-items:center; gap:16px;
}
.logo-placeholder{
  width:64px; height:64px; border-radius:var(--radius);
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:20px; flex:none;
}
.field-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-grid-3{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; }

@media (max-width:640px){
  .template-grid{ grid-template-columns:1fr; }
  .app-topbar{ padding:14px 18px; }
  .onboard-shell{ padding:32px 16px 60px; }
  .wide-shell{ padding:32px 16px 60px; }
  .inline-form-grid{ grid-template-columns:1fr; }
  .mult-grid{ grid-template-columns:1fr; }
  .rate-row{ flex-wrap:wrap; gap:8px; }
  .status-banner{ flex-direction:column; align-items:flex-start; }
  .roster-toolbar{ flex-direction:column; align-items:flex-start; }
  .line-item-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .settings-subnav{ padding:12px 18px; }
  .field-grid-2, .field-grid-3{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:0.001ms !important; }
}