:root {
  --ink: #172321;
  --muted: #66736f;
  --paper: #f5f4ef;
  --surface: #ffffff;
  --line: #dfe3de;
  --brand: #0b6655;
  --brand-dark: #07483d;
  --brand-soft: #dcece6;
  --accent: #db6b32;
  --warning: #8b5a12;
  --warning-soft: #fff2cf;
  --danger: #a23c35;
  --shadow: 0 14px 40px rgba(28, 45, 40, 0.08);
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); }
body { margin: 0; min-height: 100vh; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  /* Grows rather than overflows. The owner navigation has gained an item with
     every feature that shipped — 4, then 5, then 7 — and a fixed height with a
     nowrap nav turned each addition into horizontal page overflow at some
     viewport. Height driven by content, plus a nav that wraps, absorbs the
     next one too. */
  height: auto;
  min-height: 68px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(23, 35, 33, 0.1);
  background: rgba(245, 244, 239, 0.92);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; letter-spacing: -0.02em; }
.brand-logo { display: block; height: 42px; width: auto; }
.primary-nav { display: flex; flex-wrap: wrap; min-width: 0; align-self: stretch; align-items: center; gap: 0 2px; margin-left: auto; margin-right: 28px; }
.primary-nav a { position: relative; display: grid; place-items: center; align-self: stretch; padding: 0 10px; color: var(--muted); font-size: .84rem; font-weight: 750; text-decoration: none; }
.primary-nav a:hover, .primary-nav a.active { color: var(--ink); }
.primary-nav a.active::after { content: ""; position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: var(--brand); }
.primary-nav a.has-count { grid-auto-flow: column; gap: 6px; }
.nav-count { min-width: 18px; padding: 1px 6px; border-radius: 999px; color: #fff; background: var(--brand); font-size: .7rem; font-weight: 800; line-height: 1.4; text-align: center; }
.actor-switch { display: flex; align-items: center; gap: 9px; }
.actor-name { font-size: .84rem; font-weight: 750; white-space: nowrap; }
.login-card { width: min(100%, 460px); margin: 5vh auto 0; }
.login-form { margin-top: 24px; }
.actor-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: .75rem; font-weight: 850; }
/* A real <select>, so the open list is drawn by the platform and cannot be
   styled here — only the closed control is ours. appearance:none drops the
   native chrome; the caret is a background image because a pseudo-element
   cannot be placed on a replaced element. */
.actor-select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 190px;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235c6b66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 8px;
  font: inherit;
  /* Deliberately the same as .primary-nav a, so the switcher reads as part of
     the topbar rather than a form control dropped into it. `font: inherit`
     first, because a select does not inherit the family on its own. */
  font-size: .84rem;
  font-weight: 750;
  text-overflow: ellipsis;
  cursor: pointer;
}
.actor-select:hover { border-color: #8fb3a7; }
.actor-select:focus-visible { outline: 3px solid rgba(11,102,85,.18); outline-offset: 1px; }

@media (max-width: 640px) {
  .topbar {
    height: auto;
    min-height: 68px;
    padding: 8px 20px 0;
    flex-wrap: wrap;
    column-gap: 12px;
  }
  .brand { order: 1; }
  /* The topbar's flex child is the <details>, not the chip inside it. */
  .actor-switch { order: 2; margin-left: auto; }
  .primary-nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-self: auto;
    justify-content: center;
    gap: 0 5px;
    min-width: 0;
    margin: 0;
  }
  .primary-nav a { min-height: 42px; padding: 0 10px; }
  .primary-nav a.active::after { right: 10px; left: 10px; }
}

.shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 112px; }
.narrow-shell { width: min(720px, calc(100% - 32px)); }
.review-header h1, .context-card h1, .success-card h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.eyebrow { margin: 0 0 12px; color: var(--brand); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.lede { color: var(--muted); font-size: clamp(1.06rem, 2vw, 1.25rem); line-height: 1.6; }
.lede.compact { margin: 10px 0 0; font-size: 1rem; }
.muted { color: var(--muted); }
.section-heading, .page-heading, .review-header, .panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-heading h2, .panel-heading h2 { margin: 0; font-size: 1.5rem; }
.dev-badge, .count-pill { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.5); font-size: .76rem; font-weight: 700; }
.arrow { color: var(--brand); font-size: 1.5rem; }

/* Product entry point */
.home-shell { width: min(1080px, calc(100% - 40px)); padding-top: clamp(46px, 7vw, 82px); }
.home-logo { display: block; height: clamp(66px, 9vw, 104px); width: auto; margin-bottom: 30px; }
.home-heading { max-width: 680px; margin-bottom: 38px; }
.home-heading h1 { margin: 0; font-size: clamp(2.35rem, 5vw, 4.15rem); letter-spacing: -.045em; line-height: 1.02; }
.home-heading > p:last-child { max-width: 620px; margin: 17px 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
/* One sign-in column, so the seats, the explainer and the footnote line up. */
.persona-list, .home-workflow, .home-help { max-width: 620px; }
.persona-list { display: grid; gap: 10px; }
.persona-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 74px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fbfcfa; text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
.persona-row:hover { border-color: #8fb3a7; box-shadow: 0 8px 24px rgba(28,45,40,.08); transform: translateY(-1px); }
.persona-row:focus-visible { outline: 3px solid rgba(11,102,85,.18); outline-offset: 2px; }
.persona-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-weight: 850; }
.persona-copy { min-width: 0; }
.persona-copy strong, .persona-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-copy small { margin-top: 4px; color: var(--muted); }
.persona-action { display: flex; align-items: center; gap: 9px; color: var(--brand); font-size: .84rem; font-weight: 800; }
.persona-action span { font-size: 1.15rem; transition: transform .18s; }
.persona-row:hover .persona-action span { transform: translateX(3px); }
/* Subordinate to the sign-in list above it: no card, no accent, muted heading.
   It explains the product to someone being walked through it, which is not what
   the page is for. */
.home-workflow { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.home-workflow h2 { margin: 0; color: var(--muted); font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.workflow-steps { display: grid; gap: 18px; margin: 20px 0 0; padding: 0; list-style: none; }
.workflow-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 15px; }
.workflow-steps li:not(:last-child)::after { content: ""; position: absolute; top: 34px; bottom: -14px; left: 15px; width: 1px; background: var(--line); }
.workflow-number { z-index: 1; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); font-size: .74rem; font-weight: 850; }
.workflow-steps strong { display: block; padding-top: 5px; font-size: .92rem; }
.workflow-steps p { margin: 6px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.inline-empty { padding: 16px; border-radius: 10px; color: var(--muted); background: #f4f5f2; font-size: .9rem; }
.home-help { margin: 24px 0 0; color: var(--muted); font-size: .78rem; text-align: center; }
.home-empty-state { max-width: 580px; margin: 12vh auto 0; color: var(--muted); background: var(--surface); }
.home-empty-state h1 { color: var(--ink); font-size: 1.7rem; }
.empty-state-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%; color: var(--warning); background: var(--warning-soft); font-weight: 900; }
.page-heading { margin-bottom: 32px; }
.review-header h1, .context-card h1, .success-card h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); }
.stack { display: grid; gap: 18px; }
.job-card, .context-card, .form-card, .success-card, .panel, .source-panel { padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.job-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.job-topline time { color: var(--muted); font-size: .82rem; }
.job-card h2 { margin: 20px 0 3px; font-size: 1.4rem; }
.job-card p { line-height: 1.55; }
.job-type { margin: 0; color: var(--brand); font-weight: 700; }
.status { display: inline-block; padding: 6px 9px; border-radius: 999px; background: #e7ebe8; color: #52605c; font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.status-pending_owner_review { background: var(--warning-soft); color: var(--warning); }
.status-owner_approved, .status-invoice_approved { background: var(--brand-soft); color: var(--brand); }
.status-returned, .status-follow_up_required { background: #f8dfdd; color: var(--danger); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 18px; border: 1px solid var(--brand); border-radius: 10px; color: var(--brand); background: transparent; font-weight: 800; text-decoration: none; }
.button.primary, .job-card .button { color: white; background: var(--brand); }
.button.primary:hover, .job-card .button:hover { background: var(--brand-dark); }
.button.secondary { color: var(--ink); border-color: #bac2be; background: white; }
.button.full { width: 100%; margin-top: 18px; }
.button.disabled { color: var(--muted); border-color: var(--line); background: #eff1ee; cursor: default; }
.back-link { display: inline-block; margin-bottom: 22px; color: var(--muted); font-size: .88rem; font-weight: 700; text-decoration: none; }
.context-card { margin-bottom: 18px; }
.context-card p:last-child { margin-bottom: 0; line-height: 1.6; }
.job-equipment-context { display: grid; gap: 9px; margin-top: 20px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbf9; }
.context-label { color: var(--brand); font-size: .68rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.job-equipment-context div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.job-equipment-context small { color: var(--muted); text-align: right; }
.form-card label, .panel label { display: grid; gap: 8px; color: var(--ink); font-size: .88rem; font-weight: 750; }
label small { color: var(--muted); font-weight: 400; line-height: 1.4; }
input, textarea, select { width: 100%; border: 1px solid #cdd3cf; border-radius: 9px; padding: 12px 13px; color: var(--ink); background: #fcfcfa; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,102,85,.12); }
textarea { resize: vertical; line-height: 1.55; }
.upload-zone { padding: 26px; place-items: center; border: 1px dashed #9aacA6; border-radius: 14px; text-align: center; background: #f8fbf9; cursor: pointer; }
.upload-zone input { max-width: 320px; border: 0; padding: 8px 0 0; background: transparent; font-size: .8rem; }
.upload-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--accent); background: #f9e3d7; box-shadow: inset 0 0 0 12px white; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.input-suffix { display: flex; align-items: stretch; }
.input-suffix input { border-radius: 9px 0 0 9px; }
.input-suffix > span { display: grid; place-items: center; min-width: 50px; border: 1px solid #cdd3cf; border-left: 0; border-radius: 0 9px 9px 0; color: var(--muted); background: #f0f2ef; font-weight: 600; }
.checkbox-row { grid-template-columns: auto 1fr !important; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.checkbox-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }
.checkbox-row strong, .checkbox-row small { display: block; }
.checkbox-row small { margin-top: 3px; }
.checkbox-label { grid-template-columns: auto 1fr !important; align-items: center; }
.checkbox-label input { width: 18px; height: 18px; accent-color: var(--brand); }
.review-row.failed { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding: 19px 22px; border: 1px solid #e6b8b0; border-radius: 13px; background: var(--surface); }
.review-row.failed form { margin: 0; }
.form-footnote, .privacy-note, .deterministic-note { margin: -6px 0 0; text-align: center; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.success-card { max-width: 600px; margin: 5vh auto; text-align: center; }
.success-card p:not(.eyebrow) { color: var(--muted); line-height: 1.65; }
.success-card code { display: block; margin: 22px 0; color: var(--brand); }
.success-check { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 28px; border-radius: 50%; color: white; background: var(--brand); font-size: 2rem; }
.empty-state { padding: 50px 30px; border: 1px dashed #bfc7c3; border-radius: 16px; text-align: center; color: var(--muted); }
.empty-state h2 { color: var(--ink); }
.actionable-empty-state { max-width: 720px; margin: 0 auto; padding: clamp(34px, 6vw, 54px); border-style: solid; background: var(--surface); box-shadow: var(--shadow); }
.actionable-empty-state .eyebrow { margin-bottom: 10px; }
.actionable-empty-state h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 1.85rem); letter-spacing: -.025em; }
.review-empty-icon { width: 48px; height: 48px; margin-bottom: 20px; color: var(--brand); background: var(--brand-soft); }
.empty-state-lede { max-width: 530px; margin: 12px auto 26px; line-height: 1.6; }
.empty-state-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0 0 26px; padding: 0; list-style: none; text-align: left; }
.empty-state-steps li { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fbfcfa; font-size: .78rem; line-height: 1.35; }
.empty-state-steps li > span { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: .7rem; font-weight: 850; }
.empty-state-action { gap: 18px; }
.empty-state-action > span { font-size: 1.1rem; }
.empty-state-footnote { margin: 17px 0 0; font-size: .75rem; line-height: 1.5; }
.review-list { display: grid; gap: 9px; }
.review-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding: 19px 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); text-decoration: none; transition: border-color .2s, transform .2s; }
.review-row:hover { border-color: #9fb8b0; transform: translateX(2px); }
.confidence-ring { display: grid; place-items: center; width: 48px; height: 48px; border: 4px solid #9dc8b9; border-radius: 50%; color: var(--brand); font-size: .72rem; font-weight: 800; }
.confidence-ring.low { color: var(--warning); border-color: #e9c778; }
.review-main strong, .review-main small, .review-state strong { display: block; }
.review-main small { margin-top: 5px; color: var(--muted); }
.review-state { text-align: right; }
.review-state strong { margin-top: 7px; }
.review-payment { display: block; margin-top: 4px; font-size: .62rem; font-weight: 800; }
.review-payment.payment-unpaid { color: var(--danger); }
.review-payment.payment-partial { color: var(--warning); }
.review-payment.payment-paid { color: var(--brand); }
.review-header { margin-bottom: 24px; }
.header-state { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.confidence-label { color: var(--muted); font-size: .8rem; }
.confidence-label strong { color: var(--brand); }
.customer-context-link { display: inline-block; margin-top: 9px; color: var(--brand); font-size: .78rem; font-weight: 800; text-decoration: none; }
.warning-panel { margin: 0 0 20px; padding: 18px 22px; border: 1px solid #ecd28d; border-radius: 12px; color: var(--warning); background: var(--warning-soft); }
.warning-panel ul { margin: 8px 0 0; padding-left: 19px; }
.invoice-compliance-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 0 0 20px; padding: 22px 24px; border: 1px solid; border-radius: 14px; background: var(--surface); box-shadow: 0 8px 28px rgba(28,45,40,.05); }
.invoice-compliance-panel.source-ready { border-color: #acd0c3; }
.invoice-compliance-panel.source-blocked { border-color: #e5c474; background: #fffaf0; }
.compliance-copy { max-width: 760px; }
.compliance-copy .eyebrow { margin-bottom: 7px; }
.compliance-copy h2 { margin: 0; font-size: 1.12rem; }
.compliance-copy > p:last-of-type { margin: 8px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.compliance-copy ul { margin: 11px 0 0; padding-left: 18px; color: var(--warning); font-size: .78rem; line-height: 1.5; }
.compliance-badge { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; color: var(--warning); background: var(--warning-soft); font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.source-ready .compliance-badge { color: var(--brand); background: var(--brand-soft); }
.pdf-download-button { flex: 0 0 auto; gap: 9px; }
.pdf-download-button > span { font-size: 1.2rem; }
.payment-toast { margin-bottom: 20px; }
.payment-panel { margin: 0 0 20px; padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 28px rgba(28,45,40,.05); }
.payment-panel.payment-paid { border-color: #a8cdbf; background: linear-gradient(145deg, #f6fbf8, #fff 45%); }
.payment-panel.payment-partial { border-color: #e5c474; }
.payment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.payment-heading .eyebrow { margin-bottom: 7px; }
.payment-heading h2 { margin: 0; font-size: 1.2rem; }
.payment-heading p:last-child { max-width: 720px; margin: 8px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.payment-status { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; font-size: .65rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.payment-status.status-unpaid { color: var(--danger); background: #f8dfdd; }
.payment-status.status-partial { color: var(--warning); background: var(--warning-soft); }
.payment-status.status-paid { color: var(--brand); background: var(--brand-soft); }
.payment-overview { display: grid; grid-template-columns: repeat(3, minmax(100px, .55fr)) minmax(180px, 1.35fr); align-items: center; gap: 16px; margin-top: 23px; padding: 18px; border-radius: 12px; background: #f6f8f5; }
.payment-overview > div:not(.payment-fraction) { padding-right: 15px; border-right: 1px solid var(--line); }
.payment-overview span, .payment-overview strong { display: block; }
.payment-overview span { color: var(--muted); font-size: .65rem; }
.payment-overview strong { margin-top: 5px; font-size: 1rem; }
.payment-fraction { display: grid; gap: 8px; }
.payment-fraction > span { color: var(--ink); font-weight: 800; }
.payment-fraction > div { overflow: hidden; height: 9px; border-radius: 999px; background: #dfe5e1; }
.payment-fraction i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.payment-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.payment-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.payment-fields label { display: grid; gap: 7px; font-size: .72rem; font-weight: 750; }
.payment-fields label small { font-size: .6rem; }
.payment-fields .wide { grid-column: 1 / -1; }
.payment-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 15px; }
.payment-history { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }
.payment-history h3 { margin: 0 0 8px; font-size: .85rem; }
.payment-history article { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.payment-history article:first-of-type { border-top: 0; }
.payment-history-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: .62rem; font-weight: 900; }
.payment-history article strong, .payment-history article small { display: block; }
.payment-history article small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.payment-history article > small { margin: 3px 0 0; text-align: right; }
.payment-history article p { margin: 6px 0 0; color: var(--muted); font-size: .67rem; }
.review-layout { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(520px, 1.5fr); align-items: start; gap: 18px; }
.source-panel { position: sticky; top: 90px; }
.source-panel h2 { margin-top: 0; }
.source-panel blockquote { margin: 26px 0; padding: 0 0 0 18px; border-left: 3px solid var(--accent); font-family: Georgia, serif; font-size: 1.12rem; line-height: 1.7; }
.source-panel .privacy-note { text-align: left; }
.review-workspace { display: grid; gap: 14px; }
.panel-heading { margin-bottom: 18px; }
.text-button, .remove-line { padding: 0; border: 0; color: var(--brand); background: transparent; font-size: .8rem; font-weight: 800; }
.invoice-line { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.invoice-line:first-child { border-top: 0; padding-top: 0; }
.invoice-line .wide { grid-column: 1 / -1; }
.line-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .72rem; }
.remove-line { margin-left: auto; color: var(--danger); }
.mini-confidence { padding: 4px 7px; border-radius: 999px; color: var(--brand); background: var(--brand-soft); font-weight: 800; }
.mini-confidence.low { color: var(--warning); background: var(--warning-soft); }
.totals { display: grid; justify-content: end; gap: 8px; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); min-width: 240px; }
.totals span { display: flex; justify-content: space-between; gap: 60px; color: var(--muted); }
.totals strong { color: var(--ink); }
.totals .grand-total { padding-top: 9px; color: var(--ink); font-size: 1.12rem; font-weight: 800; }
.deterministic-note { margin-top: 14px; text-align: right; }
.approval-bar { position: fixed; z-index: 10; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(1080px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; border: 1px solid #cad1cd; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 20px 50px rgba(23,35,33,.18); backdrop-filter: blur(14px); }
.approval-bar strong, .approval-bar small { display: block; }
.approval-bar small { margin-top: 3px; color: var(--muted); }
.approval-actions { display: flex; gap: 9px; }

/* Customer workspace */
.workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
/* List pages share one title style, whichever heading wrapper they use. */
.page-heading h1, .workspace-heading h1, .form-page-heading h1, .customer-profile-header h1 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.1rem); letter-spacing: -.045em; line-height: 1.02; }
.workspace-heading > div > p:last-child, .form-page-heading > p:last-child { max-width: 620px; margin: 13px 0 0; color: var(--muted); line-height: 1.55; }
.customer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 7px 24px rgba(28,45,40,.05); }
.customer-search { display: flex; flex: 1; gap: 8px; }
.search-field { position: relative; flex: 1; max-width: 520px; }
.search-field input { height: 46px; padding-left: 41px; }
.search-icon { position: absolute; z-index: 1; top: 50%; left: 14px; transform: translateY(-50%); color: var(--muted); font-size: 1.25rem; }
.customer-search .button { min-height: 46px; }
.filter-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: #f0f2ef; }
.filter-tabs a { padding: 9px 12px; border-radius: 7px; color: var(--muted); font-size: .76rem; font-weight: 800; text-decoration: none; }
.filter-tabs a.active { color: var(--brand); background: var(--surface); box-shadow: 0 2px 8px rgba(28,45,40,.08); }
.list-summary { display: flex; gap: 6px; margin: 0 2px 12px; color: var(--muted); font-size: .8rem; }
.list-summary strong { color: var(--ink); }
.customer-table { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.customer-table-header, .customer-row { display: grid; grid-template-columns: minmax(240px, 1.25fr) minmax(190px, 1fr) minmax(200px, 1fr) minmax(155px, .75fr) 26px; align-items: center; gap: 18px; }
.customer-table-header { min-height: 45px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--muted); background: #f8f9f6; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.customer-row { min-height: 88px; padding: 14px 20px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .15s; }
.customer-row:last-child { border-bottom: 0; }
.customer-row:hover { background: #f8fbf9; }
.customer-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; min-width: 0; }
.customer-avatar, .profile-avatar { display: grid; place-items: center; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-weight: 850; }
.customer-avatar { width: 44px; height: 44px; }
.customer-row strong, .customer-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-row strong { font-size: .88rem; }
.customer-row small { margin-top: 5px; color: var(--muted); font-size: .74rem; }
.customer-maintenance .status { display: inline-block; }
.customer-maintenance > .muted { font-size: .78rem; }
.customer-row .arrow { text-align: right; }
.customer-empty-state { border-style: solid; background: var(--surface); box-shadow: var(--shadow); }
.customer-empty-state .button { margin-top: 12px; }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; margin-top: 18px; color: var(--muted); font-size: .78rem; }
.pagination .button { min-height: 40px; padding: 8px 13px; }
.pagination .button:last-child { justify-self: end; }

.form-shell { width: min(900px, calc(100% - 40px)); }
.compact-form-shell { width: min(760px, calc(100% - 40px)); }
.form-page-heading { margin-bottom: 30px; }
.form-page-heading h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.workspace-form { display: grid; gap: 16px; }
.form-section { padding: clamp(24px, 4vw, 34px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 28px rgba(28,45,40,.05); }
/* The composer: one bar, not a titled section. No card, no dashed box — it
   should not out-weigh the form it feeds. A wrapper rather than the form
   itself, so it can be a whole form (new customer) or one field among many
   (job completion); `.is-recording`/`.is-working` land here. */
.composer-block { display: grid; gap: 8px; margin-bottom: 22px; }
.composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: 0 2px 10px rgba(28,45,40,.05); transition: border-color .18s, box-shadow .18s; }
/* One column per control: without the attach button there are two children,
   and the three-column template above would put the textarea in the `auto`
   column (shrinking it to its placeholder) and the mic in the `1fr` one
   (floating it mid-bar instead of at the right edge). */
.composer-no-attach { grid-template-columns: minmax(0, 1fr) auto; }
.composer:focus-within { border-color: #8fb3a7; box-shadow: 0 4px 18px rgba(28,45,40,.09); }
.is-recording .composer { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.composer-attach, .composer-mic { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.composer-attach:hover, .composer-mic:not(:disabled):hover { color: var(--brand); background: var(--brand-soft); }
.composer-attach:focus-within, .composer-mic:focus-visible { outline: 3px solid rgba(11,102,85,.18); outline-offset: 1px; }
.composer-mic { font-size: .95rem; }
.composer-mic[aria-pressed="true"] { color: #fff; background: var(--brand); }
.composer-mic:disabled { opacity: .4; cursor: not-allowed; }
/* Hidden from sight, not from the accessibility tree or the form payload. */
.composer-attach input[type="file"], .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.composer textarea { width: 100%; min-height: 34px; padding: 7px 2px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .93rem; line-height: 1.45; resize: none; overflow-y: hidden; }
/* The global textarea:focus adds a border colour and a 3px ring, which draws a
   second box inside the bar. The bar's own :focus-within is the focus
   indicator here, so the inner one has to go — outline alone is not enough. */
.composer textarea:focus { outline: none; border-color: transparent; box-shadow: none; }
.composer-hint { margin: 0; padding: 0 14px; color: var(--muted); font-size: .76rem; }
.is-working .composer { opacity: .65; }
.optional-section { background: #fbfcfa; }
.form-section-heading { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-bottom: 25px; }
.form-section-heading > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: .76rem; font-weight: 850; }
.form-section-heading h2 { margin: 2px 0 0; font-size: 1.15rem; }
.form-section-heading h2 small { color: var(--muted); font-size: .72rem; font-weight: 650; }
.form-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.workspace-form label { display: grid; gap: 8px; color: var(--ink); font-size: .82rem; font-weight: 750; }
.workspace-form label > span small { margin-left: 3px; }
.wide-field { grid-column: 1 / -1; }
/* A help line under one field must not stretch its neighbour's input. */
.field-grid.align-start { align-items: start; }
.field-help { margin: -8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.form-alert ul { margin: 0; padding-left: 18px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 8px; }
.form-alert { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 15px 18px; border: 1px solid; border-radius: 11px; font-size: .84rem; }
.form-alert strong, .form-alert span { display: block; }
.form-alert span { margin-top: 3px; }
.form-alert a { flex: 0 0 auto; font-weight: 800; text-decoration: none; }
.error-alert { border-color: #e5b4af; color: var(--danger); background: #fbedeb; }
.warning-alert { border-color: #ecd28d; color: var(--warning); background: var(--warning-soft); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.technician-picker { margin: 5px 0 0; padding: 0; border: 0; }
.technician-picker legend { margin-bottom: 9px; font-size: .82rem; font-weight: 750; }
.technician-option { display: grid !important; grid-template-columns: auto auto 1fr; align-items: center; gap: 11px !important; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfa; cursor: pointer; }
.technician-option + .technician-option { margin-top: 8px; }
.technician-option input { width: 18px; height: 18px; accent-color: var(--brand); }
.technician-option .persona-avatar { width: 34px; height: 34px; border-radius: 9px; }

.toast-message { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 12px 15px; border: 1px solid #b9d5cb; border-radius: 10px; color: var(--brand); background: var(--brand-soft); font-size: .84rem; font-weight: 750; }
.toast-message span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: white; background: var(--brand); font-size: .7rem; }
.customer-profile-header { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-bottom: 26px; }
.profile-identity { display: flex; align-items: center; gap: 20px; min-width: 0; }
.profile-avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 18px; font-size: 1.55rem; }
.customer-profile-header h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.customer-profile-header p { margin: 7px 0 0; color: var(--muted); }
.profile-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.status-active { color: var(--brand); background: var(--brand-soft); }
.status-archived, .status-inactive { color: var(--muted); background: #e7ebe8; }
.profile-actions { display: flex; flex: 0 0 auto; gap: 9px; }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 7px 24px rgba(28,45,40,.04); }
.profile-stats div { padding: 18px 22px; border-right: 1px solid var(--line); }
.profile-stats div:last-child { border-right: 0; }
.profile-stats span, .profile-stats strong { display: block; }
.profile-stats span { color: var(--muted); font-size: .72rem; }
.profile-stats strong { margin-top: 5px; font-size: 1.4rem; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); align-items: start; gap: 18px; }
.profile-main { display: grid; gap: 18px; }
.profile-section, .sidebar-card { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 8px 28px rgba(28,45,40,.05); }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.profile-section-heading .eyebrow { margin-bottom: 6px; }
.profile-section-heading h2, .sidebar-card h2 { margin: 0; font-size: 1.15rem; }
.profile-section-heading a, .card-action { text-decoration: none; }
.profile-card-list { display: grid; gap: 10px; }
.location-card { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfa; }
.card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--brand); background: var(--brand-soft); font-weight: 850; }
.card-content > p { margin: 5px 0 0; color: var(--muted); font-size: .83rem; }
.card-action { color: var(--brand); font-size: .76rem; font-weight: 800; }
.operational-notes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.operational-notes span { padding: 6px 8px; border-radius: 6px; color: var(--muted); background: #eef2ef; font-size: .7rem; }
.operational-notes b { margin-right: 3px; color: var(--ink); }
.equipment-card { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfa; }
.equipment-card.is-inactive { opacity: .72; }
.equipment-topline, .equipment-topline > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.equipment-model { margin: 6px 0 16px; color: var(--muted); font-size: .82rem; }
.equipment-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0; }
.equipment-details div, .contact-details div { min-width: 0; }
.equipment-details dt, .contact-details dt { margin-bottom: 4px; color: var(--muted); font-size: .68rem; }
.equipment-details dd, .contact-details dd { overflow-wrap: anywhere; margin: 0; font-size: .79rem; font-weight: 700; }
.maintenance-alert { margin-top: 14px; padding: 8px 10px; border-radius: 7px; font-size: .73rem; font-weight: 800; }
.maintenance-alert.overdue { color: var(--danger); background: #f8dfdd; }
.maintenance-alert.due-soon { color: var(--warning); background: var(--warning-soft); }
.inline-status-form { margin-top: 13px; text-align: right; }
.danger-text { color: var(--danger); }
.text-button:disabled { color: #9aa39f; cursor: not-allowed; }
.profile-inline-empty { text-align: center; }
.profile-inline-empty p { margin: 0 0 7px; }
.profile-inline-empty a { color: var(--brand); font-weight: 800; text-decoration: none; }
.job-history { display: grid; }
.job-history article { display: grid; grid-template-columns: 70px 1fr auto; align-items: start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.job-history article:first-child { padding-top: 0; border-top: 0; }
.job-history article:last-child { padding-bottom: 0; }
.job-date { color: var(--ink); font-size: .76rem; font-weight: 800; }
.job-date small { display: block; margin-top: 4px; color: var(--muted); font-weight: 500; }
.job-history article p { margin: 5px 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.job-history article div > small { color: var(--muted); font-size: .7rem; }
.job-history article div > small.cancellation-reason { display: block; margin-top: 4px; }
.job-status-stack { display: grid; justify-items: end; gap: 7px; }
.job-payment-link { font-size: .65rem; font-weight: 800; text-decoration: none; }
.job-payment-link.payment-unpaid { color: var(--danger); }
.job-payment-link.payment-partial { color: var(--warning); }
.job-payment-link.payment-paid { color: var(--brand); }

.quote-history { display: grid; }
.quote-history-row { display: grid; grid-template-columns: 1fr auto auto 26px; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.quote-history-row:first-child { padding-top: 0; border-top: 0; }
.quote-history-row:hover { color: var(--brand); }
.quote-history-row small { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; font-size: .78rem; }

.profile-sidebar { position: sticky; top: 86px; display: grid; gap: 14px; }
.sidebar-card { padding: 23px; }
.sidebar-card .profile-section-heading { margin-bottom: 18px; }
.contact-details { display: grid; gap: 15px; margin: 0; }
.contact-details a { color: var(--brand); text-decoration: none; }
.customer-notes, .account-card p { margin: 12px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; white-space: pre-line; }
.note-count { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: .65rem; font-weight: 850; }
.client-note-form label { display: grid; gap: 7px; font-size: .72rem; font-weight: 750; }
.client-note-form textarea { font-size: .76rem; }
.client-note-form .button { width: 100%; min-height: 40px; margin-top: 9px; padding: 8px 12px; font-size: .72rem; }
.legacy-customer-note { margin-top: 17px; padding: 13px; border-radius: 9px; background: #f5f7f4; }
.legacy-customer-note > small { color: var(--brand); font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.legacy-customer-note .customer-notes { margin-top: 7px; }
.customer-note-list { display: grid; margin: 18px 0 0; padding: 0; list-style: none; }
.customer-note-list li { padding: 13px 0; border-top: 1px solid var(--line); }
.customer-note-list p { margin: 0; color: var(--ink); font-size: .75rem; line-height: 1.5; white-space: pre-line; }
.customer-note-list small { display: block; margin-top: 7px; color: var(--muted); font-size: .59rem; }
.notes-empty { margin: 15px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.account-card .text-button, .account-card form { margin-top: 14px; }
.activity-list { display: grid; gap: 0; margin: 17px 0 0; padding: 0; list-style: none; }
.activity-list li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; min-height: 48px; }
.activity-list li:not(:last-child)::after { content: ""; position: absolute; top: 13px; bottom: 0; left: 4px; width: 1px; background: var(--line); }
.activity-dot { z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); }
.activity-list strong, .activity-list small { display: block; }
.activity-list strong { font-size: .76rem; }
.activity-list small { margin-top: 4px; color: var(--muted); font-size: .67rem; }

/* Owner insights */
.insights-shell { width: min(1240px, calc(100% - 40px)); padding-top: 44px; }
.insights-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.insights-heading h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 5vw, 3.8rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.insights-heading > div:first-child > p:last-child { margin: 12px 0 0; color: var(--muted); line-height: 1.5; }
.period-control { display: grid; justify-items: end; gap: 9px; }
.period-control > span { color: var(--muted); font-size: .7rem; }
.period-control nav { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.72); }
.period-control a { padding: 8px 11px; border-radius: 7px; color: var(--muted); font-size: .72rem; font-weight: 800; text-decoration: none; }
.period-control a:hover { color: var(--ink); }
.period-control a.active { color: white; background: var(--brand); box-shadow: 0 3px 10px rgba(11,102,85,.18); }
.insights-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 28px rgba(28,45,40,.05); }
.insight-kpi { position: relative; display: flex; min-width: 0; min-height: 154px; flex-direction: column; padding: 21px 18px; border-right: 1px solid var(--line); }
.insight-kpi:last-child { border-right: 0; }
.insight-kpi.featured { background: linear-gradient(145deg, #f2f8f5, #fff); }
.insight-kpi.needs-attention::before { content: ""; position: absolute; top: 0; right: 18px; left: 18px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); }
.kpi-label { min-height: 29px; color: var(--muted); font-size: .7rem; font-weight: 750; line-height: 1.35; }
.insight-kpi > strong { overflow: hidden; margin: 7px 0 4px; font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.insight-kpi > a { margin-top: auto; color: var(--brand); font-size: .68rem; font-weight: 800; text-decoration: none; }
.kpi-footnote { margin-top: auto; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.kpi-change { display: block; margin-top: 7px; color: var(--muted); font-size: .62rem; font-weight: 700; line-height: 1.35; }
.kpi-change.up { color: var(--brand); }
.kpi-change.down { color: var(--danger); }
.danger-copy { color: var(--danger) !important; }
.insights-card { min-width: 0; padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 28px rgba(28,45,40,.05); }
.insights-main-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr); gap: 18px; margin-bottom: 18px; }
.insights-secondary-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(270px, .75fr); gap: 18px; margin-bottom: 18px; }
.insights-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.insights-card-heading .eyebrow { margin-bottom: 7px; font-size: .65rem; }
.insights-card-heading h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; }
.insights-card-heading > a { color: var(--brand); font-size: .7rem; font-weight: 800; text-decoration: none; }
.chart-total { display: grid; justify-items: end; }
.chart-total strong { font-size: 1.35rem; }
.chart-total span { color: var(--muted); font-size: .62rem; }
.activity-chart { position: relative; display: grid; height: 245px; grid-template-columns: repeat(6, minmax(26px, 1fr)); gap: clamp(10px, 2vw, 25px); align-items: end; margin-top: 25px; padding: 8px 4px 0; }
.chart-grid { position: absolute; inset: 7px 0 27px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.chart-grid i { display: block; border-top: 1px dashed #e8ebe7; }
.activity-column { z-index: 1; display: grid; height: 100%; grid-template-rows: 1fr 19px; gap: 7px; color: var(--muted); font-size: .6rem; text-align: center; }
.activity-bar-wrap { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.activity-bar { display: block; width: min(42px, 74%); min-height: 2px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #16816d, var(--brand)); box-shadow: 0 4px 10px rgba(11,102,85,.12); transition: filter .15s, transform .15s; }
.activity-column:hover .activity-bar { filter: brightness(.92); transform: scaleX(1.06); }
.activity-tooltip { position: absolute; z-index: 5; bottom: calc(var(--bar-height, 0%) + 8px); left: 50%; display: none; width: 145px; padding: 9px 10px; border-radius: 8px; color: white; background: var(--ink); box-shadow: 0 8px 20px rgba(23,35,33,.2); font-size: .62rem; line-height: 1.45; text-align: left; transform: translateX(-50%); }
.activity-tooltip b { display: block; }
.activity-column:hover .activity-tooltip { display: block; }
.chart-empty { display: flex; min-height: 205px; align-items: center; justify-content: center; gap: 14px; color: var(--muted); text-align: left; }
.chart-empty > span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; color: var(--brand); background: var(--brand-soft); font-size: 1.15rem; font-weight: 850; }
.chart-empty strong { color: var(--ink); font-size: .84rem; }
.chart-empty p { margin: 5px 0 0; font-size: .72rem; }
.chart-empty a { display: inline-block; margin-top: 8px; color: var(--brand); font-size: .72rem; font-weight: 800; text-decoration: none; }
.attention-count { display: grid; place-items: center; min-width: 25px; height: 25px; border-radius: 50%; color: var(--danger); background: #f8dfdd; font-size: .67rem; font-weight: 850; }
.attention-list { display: grid; margin-top: 15px; }
.attention-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }
.attention-item:first-child { border-top: 0; }
.attention-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px #eef1ef; }
.attention-item.danger .attention-dot { background: var(--danger); box-shadow: 0 0 0 4px #fae9e7; }
.attention-item.warning .attention-dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.attention-item small, .attention-item strong, .attention-item p { display: block; }
.attention-item small { margin-bottom: 3px; color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.attention-item strong { font-size: .76rem; }
.attention-item p { margin: 4px 0 0; color: var(--muted); font-size: .64rem; line-height: 1.4; }
.attention-item > a { align-self: center; color: var(--brand); font-size: .65rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.all-clear { display: flex; min-height: 215px; align-items: center; justify-content: center; gap: 13px; color: var(--muted); }
.all-clear > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-weight: 900; }
.all-clear strong { display: block; color: var(--ink); font-size: .86rem; }
.all-clear p { max-width: 240px; margin: 5px 0 0; font-size: .7rem; line-height: 1.45; }
.pipeline-chart { display: grid; gap: 16px; margin-top: 25px; }
.pipeline-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 28px; align-items: center; gap: 12px; }
.pipeline-row > span { color: var(--muted); font-size: .68rem; }
.pipeline-row > div { overflow: hidden; height: 9px; border-radius: 999px; background: #eef1ef; }
.pipeline-row i { display: block; height: 100%; border-radius: inherit; background: #83918c; }
.pipeline-row i.blue { background: #4d7893; }
.pipeline-row i.amber { background: #c28a32; }
.pipeline-row i.green { background: var(--brand); }
.pipeline-row > strong { font-size: .76rem; text-align: right; }
.customer-mix-total { display: flex; align-items: baseline; gap: 7px; margin-top: 19px; }
.customer-mix-total strong { font-size: 2rem; letter-spacing: -.04em; }
.customer-mix-total span { color: var(--muted); font-size: .7rem; }
.mix-bar { display: flex; overflow: hidden; height: 10px; margin: 17px 0 14px; border-radius: 999px; background: #eef1ef; }
.mix-bar i, .mix-legend i { background: var(--brand); }
.mix-bar i.business, .mix-legend i.business { background: #d8a352; }
.mix-legend { display: grid; gap: 9px; }
.mix-legend span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; color: var(--muted); font-size: .67rem; }
.mix-legend i { width: 8px; height: 8px; border-radius: 2px; }
.mix-legend b { color: var(--ink); }
.customer-performance { padding-bottom: 8px; }
.performance-table { margin: 18px -25px 0; }
.performance-table-header, .performance-row { display: grid; grid-template-columns: minmax(220px, 1.5fr) .45fr .75fr .65fr .85fr 24px; align-items: center; gap: 15px; }
.performance-table-header { min-height: 36px; padding: 0 25px; color: var(--muted); background: #f7f8f5; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.performance-row { min-height: 66px; padding: 9px 25px; border-top: 1px solid var(--line); font-size: .7rem; text-decoration: none; transition: background .15s; }
.performance-row:hover { background: #f8fbf9; }
.performance-row .customer-avatar { width: 35px; height: 35px; border-radius: 9px; }
.performance-row .customer-identity { gap: 10px; }
.performance-row .customer-identity strong { font-size: .73rem; }
.performance-row .customer-identity small, .performance-row > span > small { display: block; margin-top: 3px; color: var(--muted); font-size: .59rem; }
.performance-row > strong { font-size: .72rem; }
.performance-row .arrow { font-size: 1rem; text-align: right; }
.insight-view-tabs { display: flex; gap: 8px; margin: -8px 0 20px; }
.insight-view-tabs a { display: grid; min-width: 200px; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.55); text-decoration: none; }
.insight-view-tabs a > span:first-child { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: #e9eeeb; font-size: .9rem; font-weight: 850; }
.insight-view-tabs strong, .insight-view-tabs small { display: block; }
.insight-view-tabs strong { color: var(--ink); font-size: .75rem; }
.insight-view-tabs small { margin-top: 2px; font-size: .6rem; }
.insight-view-tabs a.active { border-color: #98b9ae; color: var(--brand); background: #f6fbf8; box-shadow: 0 4px 14px rgba(28,45,40,.05); }
.insight-view-tabs a.active > span:first-child { color: white; background: var(--brand); }
.team-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 28px rgba(28,45,40,.05); }
.team-kpi { display: flex; min-width: 0; min-height: 137px; flex-direction: column; padding: 20px 18px; border-right: 1px solid var(--line); }
.team-kpi:last-child { border-right: 0; }
.team-kpi.featured { background: linear-gradient(145deg, #f2f8f5, #fff); }
.team-kpi > span { min-height: 26px; color: var(--muted); font-size: .68rem; font-weight: 750; line-height: 1.35; }
.team-kpi > strong { overflow: hidden; margin: 7px 0; font-size: clamp(1.3rem, 2.2vw, 1.85rem); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.team-kpi > small { margin-top: auto; color: var(--muted); font-size: .59rem; line-height: 1.4; }
.team-main-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); gap: 18px; margin-bottom: 18px; }
.metric-context { color: var(--muted); font-size: .62rem; text-align: right; }
.employee-impact-chart { display: grid; gap: 17px; margin-top: 27px; }
.employee-impact-row { display: grid; grid-template-columns: minmax(135px, 180px) minmax(100px, 1fr) 28px 92px; align-items: center; gap: 13px; }
.employee-mini-identity, .employee-identity { display: flex; min-width: 0; align-items: center; gap: 9px; }
.employee-mini-identity i, .employee-identity > i { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: .66rem; font-style: normal; font-weight: 850; }
.employee-mini-identity strong { overflow: hidden; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.employee-impact-track, .workload-track { overflow: hidden; height: 9px; border-radius: 999px; background: #edf1ee; }
.employee-impact-track i, .workload-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #278b76); }
.employee-impact-row > strong { font-size: .72rem; text-align: right; }
.employee-impact-row > span:last-child { color: var(--muted); font-size: .66rem; font-weight: 700; text-align: right; }
.impact-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .59rem; }
.impact-legend span:first-child { display: flex; align-items: center; gap: 6px; }
.impact-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--brand); }
.metric-guidance { position: relative; overflow: hidden; color: #dbe8e4; border-color: var(--brand-dark); background: var(--brand-dark); }
.metric-guidance::after { content: ""; position: absolute; right: -60px; bottom: -75px; width: 170px; height: 170px; border: 35px solid rgba(255,255,255,.04); border-radius: 50%; }
.metric-guidance .eyebrow { color: #91c3b5; }
.metric-guidance h2 { color: white; }
.metric-guidance > p { position: relative; z-index: 1; margin: 18px 0 0; font-size: .72rem; line-height: 1.55; }
.guidance-icon { display: grid; width: 30px; height: 30px; place-items: center; margin-bottom: 22px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; font-family: Georgia, serif; font-weight: 700; }
.team-performance { margin-bottom: 18px; padding-bottom: 7px; }
.team-table { margin: 18px -25px 0; }
.team-table-header, .team-table-row { display: grid; grid-template-columns: minmax(180px, 1.35fr) .55fr .48fr .72fr .75fr .6fr .65fr .85fr; align-items: center; gap: 10px; }
.team-table-header { min-height: 38px; padding: 0 25px; color: var(--muted); background: #f7f8f5; font-size: .56rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.team-table-row { min-height: 70px; padding: 10px 25px; border-top: 1px solid var(--line); font-size: .67rem; }
.team-table-row:hover { background: #fafcfa; }
.employee-identity strong, .employee-identity small { display: block; }
.employee-identity strong { overflow: hidden; font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.employee-identity small, .team-table-row > span > small { margin-top: 3px; color: var(--muted); font-size: .55rem; line-height: 1.35; }
.team-table-row > strong { font-size: .7rem; }
.team-table-row > span:not(.employee-identity) { color: var(--muted); }
.team-table-row > span > small { display: block; }
.warning-copy { color: var(--warning) !important; font-weight: 800; }
.workload-card { margin-bottom: 0; }
.workload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.workload-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfa; }
.workload-grid article > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workload-grid article strong { font-size: .72rem; }
.workload-grid article span { color: var(--muted); font-size: .62rem; }
.workload-track { height: 7px; margin: 13px 0 9px; }
.workload-track i { background: #4d7893; }
.workload-grid article > small { color: var(--muted); font-size: .58rem; }
.team-empty-state { border: 1px solid var(--line); background: var(--surface); }

@media (max-width: 820px) {
  .shell { padding-top: 38px; padding-bottom: 140px; }
  .review-layout { grid-template-columns: 1fr; }
  .source-panel { position: static; }
  .approval-bar > div:first-child { display: none; }
  .approval-actions { width: 100%; }
  .approval-actions .button { flex: 1; }
  .invoice-compliance-panel { align-items: flex-start; flex-direction: column; }
  .payment-overview { grid-template-columns: repeat(3, 1fr); }
  .payment-fraction { grid-column: 1 / -1; }
  .payment-fields { grid-template-columns: repeat(2, 1fr); }
  .customer-toolbar { align-items: stretch; flex-direction: column; }
  .customer-search, .search-field { max-width: none; }
  .filter-tabs { align-self: flex-start; }
  .customer-table-header { display: none; }
  .customer-row { grid-template-columns: minmax(0, 1fr) auto; gap: 13px; padding: 18px; }
  .customer-contact, .customer-operation, .customer-maintenance { grid-column: 1; padding-left: 57px; }
  .customer-row .arrow { grid-column: 2; grid-row: 1 / 5; align-self: center; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights-heading { align-items: flex-start; flex-direction: column; }
  .period-control { justify-items: start; }
  .insights-kpis { grid-template-columns: repeat(3, 1fr); }
  .insight-kpi:nth-child(3) { border-right: 0; }
  .insight-kpi:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .insights-main-grid, .insights-secondary-grid { grid-template-columns: 1fr; }
  .performance-table-header { display: none; }
  .performance-row { grid-template-columns: minmax(180px, 1.3fr) .4fr .65fr 20px; }
  .performance-row > span:nth-child(4), .performance-row > span:nth-child(5) { display: none; }
  .performance-row .arrow { grid-column: 4; }
  .team-kpis { grid-template-columns: repeat(3, 1fr); }
  .team-kpi:nth-child(3) { border-right: 0; }
  .team-kpi:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .team-main-grid { grid-template-columns: 1fr; }
  .team-table-header { display: none; }
  .team-table-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 17px; padding-bottom: 17px; }
  .team-table-row .employee-identity { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .team-table-row > [data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; color: var(--muted); font-size: .52rem; font-weight: 700; text-transform: uppercase; }
}

@media (max-width: 580px) {
  .topbar { height: auto; min-height: 68px; padding: 8px 16px 0; }
  .brand-logo { height: 34px; }
  /* Was `.actor-name { display: none }` when the chip was static text. A select
     cannot drop its own label, so it narrows and ellipsises instead. The size
     tracks .primary-nav a below — they have to agree at every width, not just
     at full width. */
  .actor-select { max-width: 138px; font-size: .78rem; }
  .primary-nav { order: 3; margin: 0; }
  .primary-nav a { padding: 0 10px; font-size: .78rem; }
  .primary-nav a.active::after { right: 10px; left: 10px; }
  .actor-switch { order: 2; margin-left: auto; }
  .shell { width: min(100% - 24px, 1160px); }
  .home-shell { width: min(100% - 24px, 1080px); padding-top: 34px; }
  .home-heading { margin-bottom: 27px; }
  .home-heading > p:last-child { font-size: .98rem; }
  .home-workflow { margin-top: 26px; padding-top: 22px; }
  .persona-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 11px; }
  .persona-action { font-size: 0; }
  .persona-action span { font-size: 1.25rem; }
  .empty-state-steps { grid-template-columns: 1fr; }
  .actionable-empty-state { padding: 30px 20px; }
  .section-heading, .page-heading, .review-header { align-items: flex-start; flex-direction: column; }
  .field-grid { grid-template-columns: 1fr; }
  .review-row { grid-template-columns: auto 1fr auto; }
  .review-row .review-state { grid-column: 2; text-align: left; }
  .review-row > .arrow { grid-column: 3; grid-row: 1 / 3; }
  .invoice-line { grid-template-columns: 1fr 1fr; }
  .approval-actions { flex-direction: column-reverse; }
  .approval-bar { bottom: 8px; }
  .payment-heading { flex-direction: column; }
  .payment-overview { grid-template-columns: 1fr 1fr; }
  .payment-overview > div:not(.payment-fraction) { padding-right: 0; border-right: 0; }
  .payment-overview > div:nth-child(3) { grid-column: 1 / -1; }
  .payment-fields { grid-template-columns: 1fr; }
  .payment-fields .wide { grid-column: auto; }
  .payment-actions { flex-direction: column-reverse; }
  .payment-actions .button { width: 100%; }
  .payment-history article { grid-template-columns: auto 1fr; }
  .payment-history article > small { grid-column: 2; text-align: left; }
  .form-card, .context-card, .job-card, .panel, .source-panel { border-radius: 14px; }
  .workspace-heading, .customer-profile-header { align-items: stretch; flex-direction: column; }
  .workspace-heading .button { width: 100%; }
  .customer-search { display: grid; grid-template-columns: 1fr; }
  .filter-tabs { align-self: stretch; }
  .filter-tabs a { flex: 1; text-align: center; }
  .form-shell, .compact-form-shell { width: min(100% - 24px, 900px); }
  .form-section { padding: 22px 18px; }
  .wide-field { grid-column: auto; }
  .form-actions { display: grid; grid-template-columns: 1fr; }
  .form-actions .button { width: 100%; }
  .form-alert { align-items: flex-start; flex-direction: column; }
  .profile-identity { align-items: flex-start; }
  .profile-avatar { width: 55px; height: 55px; border-radius: 14px; }
  .profile-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-stats div:nth-child(2) { border-right: 0; }
  .profile-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .profile-sidebar { grid-template-columns: 1fr; }
  .equipment-details { grid-template-columns: 1fr; }
  .job-history article { grid-template-columns: 58px 1fr; }
  .job-history article .status { grid-column: 2; justify-self: start; }
  .insights-shell { width: min(100% - 24px, 1240px); padding-top: 30px; }
  .period-control { width: 100%; }
  .period-control nav { width: 100%; }
  .period-control a { flex: 1; text-align: center; }
  .insights-kpis { grid-template-columns: repeat(2, 1fr); }
  .insight-kpi { min-height: 142px; border-bottom: 1px solid var(--line); }
  .insight-kpi:nth-child(2n) { border-right: 0; }
  .insight-kpi:nth-child(3) { border-right: 1px solid var(--line); }
  .insight-kpi:nth-child(n+5) { border-bottom: 0; }
  .insights-card { padding: 21px 17px; }
  .activity-chart { gap: 7px; height: 220px; }
  .activity-tooltip { display: none !important; }
  .attention-item { grid-template-columns: auto minmax(0, 1fr); }
  .attention-item > a { grid-column: 2; justify-self: start; }
  .performance-table { margin-right: -17px; margin-left: -17px; }
  .performance-row { grid-template-columns: minmax(145px, 1fr) .35fr .65fr 18px; gap: 8px; padding-right: 17px; padding-left: 17px; }
  .performance-row .customer-avatar { display: none; }
  .performance-row > strong:nth-child(3) { font-size: .64rem; }
  .insight-view-tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
  .insight-view-tabs a { min-width: 0; }
  .team-kpis { grid-template-columns: repeat(2, 1fr); }
  .team-kpi { min-height: 130px; border-bottom: 1px solid var(--line); }
  .team-kpi:nth-child(2n) { border-right: 0; }
  .team-kpi:nth-child(3) { border-right: 1px solid var(--line); }
  .team-kpi:nth-child(n+5) { border-bottom: 0; }
  .employee-impact-row { grid-template-columns: minmax(100px, 1fr) 35px 80px; }
  .employee-impact-row .employee-impact-track { grid-column: 1 / -1; grid-row: 2; }
  .employee-impact-row > strong { grid-column: 2; grid-row: 1; }
  .employee-impact-row > span:last-child { grid-column: 3; grid-row: 1; }
  .impact-legend { align-items: flex-start; flex-direction: column; }
  .metric-context { display: none; }
  .team-table { margin-right: -17px; margin-left: -17px; }
  .team-table-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 17px; padding-left: 17px; }
  .workload-grid { grid-template-columns: 1fr; }
}

.calendar-chip.status-scheduled { background: #e3ecf7; color: #2a4f7c; }
.calendar-chip.status-in_progress { background: var(--warning-soft); color: var(--warning); }
.calendar-chip.status-completed, .calendar-chip.status-invoice_draft, .calendar-chip.status-invoice_approved { background: var(--brand-soft); color: var(--brand); }
.calendar-chip.status-follow_up_required { background: #f8dfdd; color: var(--danger); }

.calendar { margin-bottom: 34px; padding: 22px clamp(16px, 3vw, 26px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.calendar-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.calendar-head h2 { margin: 4px 0 0; font-size: 1.3rem; letter-spacing: -0.02em; }
.calendar-nav { display: flex; gap: 8px; }
.calendar-nav a { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .8rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.calendar-nav a:hover { border-color: var(--brand); color: var(--brand); }

.calendar-grid { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.calendar-weekdays, .calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { background: var(--paper); border-bottom: 1px solid var(--line); }
.calendar-weekdays span { padding: 9px 6px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; text-align: center; }
.calendar-week + .calendar-week { border-top: 1px solid var(--line); }
.calendar-cell { min-height: 92px; padding: 7px 6px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.calendar-cell + .calendar-cell { border-left: 1px solid var(--line); }
.calendar-cell.is-outside { background: var(--paper); }
.calendar-cell.is-outside .calendar-daynum { color: #b3bdb9; }
.calendar-cell.is-past:not(.is-outside) .calendar-daynum { color: var(--muted); }
.calendar-cell.is-past .calendar-chip { opacity: .62; }
.calendar-daynum { font-size: .78rem; font-weight: 800; color: var(--ink); }
.calendar-cell.is-today .calendar-daynum { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 999px; background: var(--brand); color: white; }

.calendar-chip { display: block; padding: 3px 6px; border-radius: 6px; background: #e7ebe8; color: #52605c; font-size: .68rem; font-weight: 650; line-height: 1.35; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-chip strong { font-weight: 850; }
a.calendar-chip:hover { outline: 1px solid currentColor; }

.calendar-undated { margin-top: 16px; }
.calendar-undated h3 { margin: 0 0 8px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.calendar-undated ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.calendar-undated .calendar-chip { padding: 6px 10px; font-size: .74rem; }

@media (max-width: 720px) {
  .calendar-cell { min-height: 68px; padding: 5px 3px; }
  .calendar-chip { font-size: .6rem; padding: 2px 4px; }
}

.dashboard-heading { margin-bottom: 28px; }
.dashboard-heading h1 { margin: 2px 0 0; font-size: clamp(1.6rem, 3.5vw, 2.1rem); letter-spacing: -0.03em; }
.dashboard-role { margin: 4px 0 0; color: var(--muted); font-size: .86rem; font-weight: 650; }

/* Deliberately not .insight-kpi: that carries the insights grid's sizing and
   its featured / needs-attention / kpi-change variants. Shared tokens only. */
.dashboard-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dashboard-kpi { display: flex; min-width: 0; min-height: 118px; flex-direction: column; padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.dashboard-kpi > strong { overflow: hidden; margin: 6px 0 4px; font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 30px; }
.quick-card { display: flex; flex-direction: column; gap: 5px; min-height: 84px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; }
a.quick-card:hover { border-color: var(--brand); }
.quick-card.is-primary { border-color: var(--brand); background: var(--brand-soft); }
.quick-card.is-empty { color: var(--muted); background: var(--paper); box-shadow: none; }
.quick-label { font-size: .95rem; font-weight: 800; letter-spacing: -0.01em; }
.quick-sub { color: var(--muted); font-size: .78rem; font-weight: 650; }
.quick-count { margin-top: auto; font-size: 1.5rem; font-weight: 850; color: var(--brand); letter-spacing: -0.03em; }

.feed { margin-bottom: 30px; padding: 20px clamp(16px, 3vw, 24px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.feed-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.feed-all { color: var(--brand); font-size: .82rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.feed-all:hover { text-decoration: underline; }
.feed-list { margin: 0; padding: 0; list-style: none; }
.feed-list li + li { border-top: 1px solid var(--line); }
.feed-item { display: flex; align-items: center; gap: 11px; padding: 11px 2px; color: inherit; text-decoration: none; }
a.feed-item:hover { color: var(--brand); }
.feed-dot { flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--brand); }
.feed-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feed-body strong { font-size: .88rem; font-weight: 800; }
.feed-body small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-time { margin-left: auto; flex: none; color: var(--muted); font-size: .74rem; font-weight: 650; white-space: nowrap; }

.activity-nav { display: flex; gap: 8px; }
.activity-nav a { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .8rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.activity-nav a:hover { border-color: var(--brand); color: var(--brand); }

.status-cancelled { color: var(--muted); background: #e7ebe8; text-decoration: line-through; }
.status-pending { color: #8a5a00; background: #fff1c2; }
.status-approved { color: var(--brand); background: var(--brand-soft); }
.status-rejected { color: var(--danger); background: #f8dfdd; }
.status-withdrawn { color: var(--muted); background: #e7ebe8; }
.change-order-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.compact-context { padding-bottom: 16px; }
.change-order-voice { min-height: 128px; }
.proceeding-choice { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.proceeding-choice legend { margin-bottom: 7px; font-weight: 800; }
.proceeding-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.proceeding-choice label span { display: flex; flex-direction: column; gap: 2px; }
.proceeding-choice small { color: var(--muted); }
.change-order-job-panel { margin: 14px 0; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.change-order-job-panel > div { display: flex; justify-content: space-between; gap: 12px; }
.change-order-job-panel ul { display: grid; gap: 7px; margin: 12px 0; padding: 0; list-style: none; }
.change-order-job-panel li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.change-order-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.change-order-card h2 { margin-bottom: 2px; }
.change-order-total { display: block; margin: 12px 0; font-size: 1.45rem; }
.change-order-group-items { display: grid; gap: 12px; }
.change-order-group-items > article { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.proceeding-badge { padding: 4px 8px; border-radius: 999px; background: #fff1c2; color: #8a5a00; font-size: .72rem; font-weight: 800; }
.proceeding-badge.is-proceeding { background: #e7ebe8; color: var(--muted); }
.drift-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 1px; margin: 18px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.drift-strip > div { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; background: var(--paper); }
.drift-strip span { color: var(--muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.drift-strip strong { font-size: .92rem; }
.change-order-review { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.change-order-lines article { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.change-order-lines article div { display: flex; flex-direction: column; gap: 3px; }
.change-order-lines small { color: var(--muted); }
.change-order-decision { margin-top: 20px; }
.change-order-marker { padding: 3px 7px; border-radius: 999px; background: #fff1c2; color: #8a5a00; font-size: .68rem; font-weight: 800; }
.change-order-blocker a { color: inherit; font-weight: 750; }
button[disabled] { cursor: not-allowed; opacity: .5; }
.calendar-chip.status-cancelled { color: var(--muted); background: #e7ebe8; text-decoration: line-through; }
.job-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.inline-cancel-form { display: flex; align-items: center; gap: 6px; }
.inline-cancel-form input[type="text"] { min-height: 34px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: .8rem; }

/* Quotes ------------------------------------------------------------------ */
.status-draft { color: var(--muted); background: #e7ebe8; }
.status-sent { background: #e3ecf7; color: #2a4f7c; }
.status-accepted { background: var(--brand-soft); color: var(--brand); }
.status-rejected { background: #f8dfdd; color: var(--danger); }
.status-superseded { color: var(--muted); background: #e7ebe8; }
.status-expired { background: var(--warning-soft); color: var(--warning); }

.quote-table { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.quote-table-header, .quote-row { display: grid; grid-template-columns: minmax(140px, .9fr) minmax(170px, 1.1fr) minmax(200px, 1.4fr) minmax(100px, .55fr) minmax(110px, .6fr) 26px; align-items: center; gap: 16px; }
.quote-table-header { min-height: 45px; padding: 0 20px; border-bottom: 1px solid var(--line); color: var(--muted); background: #f8f9f6; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.quote-row { padding: 16px 20px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.quote-row:first-child { border-top: 0; }
.quote-row:hover { background: #fbfcfa; }

.quote-meta { color: var(--muted); font-size: .8rem; }
.quote-section { margin-bottom: 22px; }
.quote-line, .quote-line-readonly { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.quote-line { grid-template-columns: 1fr 1fr 1fr 1fr; }
.quote-line:first-child, .quote-line-readonly:first-child { border-top: 0; padding-top: 0; }
.quote-line .wide { grid-column: 1 / -1; }
/* Five children (description, quantity+unit, price, tax rate, line total) —
   its own five-column track list, not the four-column one the editable
   .quote-line uses, so the .wide description shares a row with the rest
   instead of pushing the line total onto a second row. */
.quote-line-readonly { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; align-items: center; }
.quote-line-readonly .wide { grid-column: 1 / span 1; }
.quote-add-line-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.quote-add-line-wrap h3 { margin: 0 0 14px; font-size: 1rem; }
.quote-add-line { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
.quote-add-line .wide { grid-column: 1 / -1; }
.quote-add-line .form-actions { grid-column: 1 / -1; }
.quote-action-bar { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.quote-action-bar > form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.quote-accept-form { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
.quote-versions { margin: 0; padding: 0; list-style: none; }
.quote-versions li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.quote-versions li:first-child { border-top: 0; padding-top: 0; }
.quote-versions li.current { color: var(--brand); }
.quote-versions li > a { margin-left: auto; color: var(--brand); font-size: .8rem; font-weight: 800; text-decoration: none; }

@media (max-width: 720px) {
  .quote-table-header { display: none; }
  .quote-row, .quote-line, .quote-line-readonly, .quote-add-line { grid-template-columns: 1fr; }
}

/* Receivables */
.receivables-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.receivables-summary article { display: grid; gap: 5px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.receivables-summary span, .receivables-summary small { color: var(--muted); }
.receivables-summary strong { font-size: 1.65rem; }
.receivables-summary .overdue strong, .receivable-row.overdue b { color: var(--danger); }
.receivables-table { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.receivables-header, .receivable-row { display: grid; grid-template-columns: minmax(190px, 1.3fr) .7fr .7fr .7fr 1fr 24px; align-items: center; gap: 14px; padding: 12px 18px; }
.receivables-header { color: var(--muted); background: #f8f9f6; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.receivable-row { min-height: 66px; border-top: 1px solid var(--line); font-size: .76rem; }
.receivable-row > span:first-child { display: grid; gap: 3px; }
.receivable-row small { color: var(--muted); }
.invoice-terms-summary { display: flex; flex-wrap: wrap; gap: 22px; margin: 18px 0; padding: 14px; border-radius: 10px; background: #f8f9f6; }
.invoice-terms-summary div { display: grid; gap: 3px; }
.invoice-terms-summary span { color: var(--muted); font-size: .7rem; }
.invoice-terms-summary p { flex-basis: 100%; margin: 0; }
.invoice-terms-form { display: flex; align-items: end; gap: 12px; margin-bottom: 18px; }
.invoice-period-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.invoice-downloads { display: flex; gap: 14px; margin-left: auto; font-size: .76rem; font-weight: 800; }
.tax-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 10px; }
.tax-summary article { display: grid; align-content: start; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.tax-summary h2 { margin: 0; font-size: .9rem; }
.tax-summary table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.tax-summary th { color: var(--muted); font-size: .64rem; text-align: left; text-transform: uppercase; }
.tax-summary td, .tax-summary th { padding: 6px 0; border-bottom: 1px solid var(--line); }
.tax-summary td + td, .tax-summary th + th { text-align: right; }
.tax-summary dl { display: grid; gap: 6px; margin: 0; }
.tax-summary dl div { display: flex; justify-content: space-between; }
.tax-summary dt, .tax-summary small { color: var(--muted); }
.tax-summary dd { margin: 0; }
.invoice-class-tabs { width: fit-content; max-width: 100%; flex-wrap: wrap; margin: 18px 0 14px; }
.invoice-class-tabs span { margin-left: 4px; color: var(--muted); }
.invoices-row { grid-template-columns: minmax(170px, 1.3fr) .8fr .6fr .6fr .6fr .5fr .6fr .6fr 24px; }
.tax-class-badge { padding: 3px 8px; border-radius: 999px; font-size: .66rem; background: var(--brand-soft); }
.tax-class-badge.without_vat { background: #f3ecd9; }
.tax-class-badge.mixed { background: #e8e6f4; }
@media (max-width: 760px) {
  .receivables-summary { grid-template-columns: 1fr; }
  .receivables-header { display: none; }
  .receivable-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tax-summary { grid-template-columns: 1fr; }
  .invoice-downloads { margin-left: 0; }
  .invoices-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receivable-row > span:first-child { grid-column: 1 / -1; }
  .receivable-row [data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: .58rem; text-transform: uppercase; }
}

@media (max-width: 720px) {
  .change-order-review { grid-template-columns: 1fr; }
  .drift-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.photo-gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 18px; }
.photo-card { display: grid; gap: 8px; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.photo-card img { display: block; width: 100%; height: 130px; border-radius: 10px; object-fit: cover; background: var(--brand-soft); }
.photo-card figcaption { display: grid; gap: 2px; font-size: .78rem; line-height: 1.4; }
.photo-card figcaption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-card figcaption small { color: var(--muted); }
.photo-card form { margin: 0; justify-self: start; }

/* Ask-me-anything box. Sits above the role-specific dashboard sections; the
   trace and the answer are hidden until assistant.js has something to show. */
.assistant-box { margin-bottom: 22px; }
.assistant-trace { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); font-size: .84rem; }
.assistant-trace .eyebrow { margin: 0 0 6px; }
.assistant-trace ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--muted); }
/* No `white-space: pre-wrap` here any more: it was right when the answer was
   a single text node, but assistant.js now builds real <p>/<ul>/<ol> nodes,
   and preserving the newlines between them would double every gap. */
.assistant-answer { padding: 14px 18px; border: 1px solid #b8d8c4; border-radius: 11px; background: #f2faf5; font-size: .9rem; line-height: 1.5; }
.assistant-answer > :first-child { margin-top: 0; }
.assistant-answer > :last-child { margin-bottom: 0; }
.assistant-answer p { margin: 0 0 10px; }
.assistant-answer ul, .assistant-answer ol { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 5px; }
/* The question, echoed above its answer so a follow-up reads as a
   continuation rather than as a replacement. */
.assistant-question { margin: 0 0 10px; padding: 0 2px; color: var(--muted); font-size: .86rem; }

/* Dictation feedback. The round trip takes several seconds and the filled
   fields sit below the fold, so the button reports progress and the banner
   reports the result where the owner is already looking. */
.dictation-summary { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid #b8d8c4; border-radius: 11px; background: #f2faf5; font-size: .84rem; }
.dictation-summary strong, .dictation-summary span { display: block; }
.dictation-summary > div > span { margin-top: 3px; color: var(--muted); }
.dictation-tick { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; color: white; background: #2e9e63; font-size: .72rem; font-weight: 800; }
.workspace-form [data-prefilled] { border-left: 3px solid #2e9e63; background: #fbfefc; }
.button.is-working { position: relative; padding-left: 34px; opacity: .85; }
.button.is-working::before { content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dictation-spin .7s linear infinite; }
@keyframes dictation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button.is-working::before { animation: none; } }

.dev-filters { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.dev-filters label { display: grid; gap: 6px; font-size: .78rem; font-weight: 700; }
.dev-interaction { margin-bottom: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.dev-interaction.failed { border-color: #e6b8b0; }
.dev-interaction header { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-bottom: 8px; color: var(--muted); font-size: .78rem; }
.dev-interaction header strong { color: var(--ink); font-size: .9rem; }
.dev-interaction pre { overflow-x: auto; margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: #f5f7f5; font-size: .74rem; }
.dev-interaction summary { cursor: pointer; font-size: .78rem; font-weight: 700; }
.dev-error { margin: 6px 0 0; color: #a5453a; font-size: .8rem; }
[data-exemption-field][hidden], [data-exemption-other][hidden] { display: none; }

/* Vendus history: suggestions page, customer page list, Visão geral card. */
.success-alert { border-color: #a9d8bd; color: #1f6b43; background: #eaf6ef; }
.history-accept-all { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.history-accept-all p { margin: 0; color: var(--muted); }
.history-groups { display: grid; gap: 16px; }
.history-group { padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.history-group-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.history-group-heading h2 { margin: 0; font-size: 1.1rem; }
.history-group-heading h2 a { color: var(--ink); text-decoration: none; }
.history-group-heading p { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.history-suggestion { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.history-unit strong, .history-unit small { display: block; }
.history-unit small { margin-top: 4px; color: var(--muted); }
.history-dates { display: flex; gap: 20px; margin: 0; }
.history-dates dt { color: var(--muted); font-size: .72rem; }
.history-dates dd { margin: 2px 0 0; font-weight: 700; }
.history-actions { display: flex; align-items: center; gap: 8px; }
.history-actions form { margin: 0; }
.vendus-history { display: grid; }
.vendus-history article { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.vendus-history article p { margin: 2px 0; color: var(--muted); font-size: .85rem; }
.vendus-history article small { color: var(--muted); }
.vendus-history .muted-row { opacity: .6; }
.vendus-amount { display: grid; justify-items: end; align-content: start; gap: 2px; }
.vendus-history-card { margin-top: 18px; }
.history-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.history-kpis > div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.history-kpis span { color: var(--muted); font-size: .76rem; }
.history-kpis strong { font-size: 1.3rem; }
.history-kpis small { color: var(--muted); font-size: .74rem; }
.history-breakdown { margin-top: 18px; }
.history-breakdown h3, .vendus-history-card > h3 { margin: 0 0 10px; font-size: .9rem; }
.pipeline-row i.danger { background: var(--danger); }
.history-chart { grid-template-columns: repeat(12, minmax(14px, 1fr)); gap: clamp(4px, 1vw, 14px); }
.history-breakdown .pipeline-row { grid-template-columns: 110px minmax(0, 1fr) auto; }
.history-breakdown .pipeline-row strong { font-size: .8rem; white-space: nowrap; }
.history-top { margin: 0; padding: 0; list-style: none; }
.history-top li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.history-top span { color: var(--muted); font-size: .8rem; }
.history-footnote { margin: 14px 0 0; color: var(--muted); font-size: .76rem; }
@media (max-width: 720px) {
  .history-suggestion { grid-template-columns: 1fr; }
  .history-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vendus-history article { grid-template-columns: 1fr auto; }
  .vendus-history .job-date { grid-column: 1 / -1; }
}

/* The public privacy notice (/privacidade), rendered from Markdown. */
.privacy-notice { line-height: 1.6; }
.privacy-notice h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.privacy-notice h2 { margin-top: 32px; font-size: 1.2rem; }
.privacy-notice table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: .9rem; }
.privacy-notice th, .privacy-notice td { padding: 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.privacy-notice hr { margin: 24px 0; border: 0; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .privacy-notice table { display: block; overflow-x: auto; } }