:root {
  --navy: #061a3a;
  --navy-soft: #0a254f;
  --navy-raised: #0c2d63;
  --blue: #145fdc;
  --blue-bright: #1a75ff;
  --ink: #f7fbff;
  --muted: #a8b0b8;
  --line: rgba(168, 176, 184, .28);
  --line-strong: rgba(26, 117, 255, .62);
  --success: #55d6a1;
  --warning: #ffc76a;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--navy); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 18% 0%, rgba(20, 95, 220, .48), transparent 34rem), var(--navy);
  font-size: 16px;
  line-height: 1.45;
}

a { color: #8cbbff; text-underline-offset: 3px; }
a:hover { color: #fff; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled, .button:disabled { cursor: not-allowed; opacity: .42; transform: none !important; }

.site-header {
  width: min(1416px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .95rem; font-weight: 800; letter-spacing: .035em; text-decoration: none; }
.brand-gear { width: 28px; height: 28px; flex: none; }
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a { padding: 8px 10px; color: var(--muted); font-size: .88rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.mobile-nav-toggle { display: none; }

.page { width: min(1416px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 72px; }
.page-narrow { width: min(780px, calc(100% - 32px)); }
.eyebrow { margin: 0 0 8px; color: var(--blue-bright); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.052em; }
h2 { margin-bottom: 12px; font-size: 1.2rem; letter-spacing: -.02em; }
h3 { margin-bottom: 6px; font-size: 1rem; }
p { color: var(--muted); }
.lede { max-width: 680px; margin-bottom: 28px; font-size: 1.1rem; }
.page-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }
.page-head p { margin-bottom: 0; }
.environment { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 12px; color: var(--ink); background: rgba(20, 95, 220, .18); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.environment::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(85, 214, 161, .16); }

.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(6, 26, 58, .88); box-shadow: 0 24px 70px rgba(0, 0, 0, .25); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.panel-body { padding: 24px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-card { display: grid; align-content: center; min-height: 116px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--navy-soft); text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.stat-card:hover { transform: translateY(-2px); border-color: var(--blue-bright); background: rgba(20, 95, 220, .15); }
.stat-card .value { display: block; color: var(--ink); font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; }
.stat-card .label { color: var(--ink); font-size: 1.08rem; font-weight: 800; line-height: 1.2; }

.shop-page { padding-top: 34px; }
.shop-hero { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 28px; min-height: 206px; margin-bottom: 20px; padding: 34px; overflow: hidden; border: 1px solid rgba(75, 139, 255, .42); border-radius: 22px; background: linear-gradient(118deg, rgba(15, 66, 148, .8), rgba(8, 35, 77, .9) 55%, rgba(4, 22, 51, .96)); box-shadow: 0 26px 80px rgba(0, 0, 0, .25); }
.shop-hero::after { content: ""; position: absolute; width: 310px; height: 310px; right: -110px; top: -175px; border-radius: 50%; background: radial-gradient(circle, rgba(29, 121, 255, .42), transparent 67%); pointer-events: none; }
.shop-hero > * { position: relative; z-index: 1; }
.shop-hero h1 { max-width: 800px; margin-bottom: 8px; font-size: clamp(2.8rem, 6vw, 4.8rem); }
.shop-hero .lede { margin: 0; color: #c1d0e0; }
.workspace-active { display: inline-flex; align-items: center; gap: 11px; min-width: 184px; padding: 12px 15px; border: 1px solid rgba(85, 214, 161, .36); border-radius: 13px; background: rgba(4, 22, 51, .44); }
.workspace-active strong, .workspace-active small { display: block; }
.workspace-active small { color: var(--muted); font-size: .74rem; }
.live-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(85, 214, 161, .14); }
.metrics-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.metric-card { position: relative; min-height: 150px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(12, 45, 99, .9), rgba(6, 26, 58, .9)); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.metric-card:hover { transform: translateY(-3px); border-color: rgba(54, 132, 255, .75); box-shadow: 0 16px 36px rgba(0, 0, 0, .2); }
.metric-card::after { content: ""; position: absolute; right: -25px; bottom: -40px; width: 106px; height: 106px; border-radius: 50%; background: rgba(26, 117, 255, .11); }
.metric-glyph { display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 16px; border: 1px solid rgba(79, 143, 255, .45); border-radius: 9px; color: #c8ddff; background: rgba(26, 117, 255, .16); font-weight: 900; }
.metric-warning .metric-glyph { color: #ffdc94; border-color: rgba(255, 199, 106, .45); background: rgba(255, 199, 106, .12); }
.metric-success .metric-glyph { color: #aaf2d1; border-color: rgba(85, 214, 161, .45); background: rgba(85, 214, 161, .12); }
.metric-label, .metric-card small { position: relative; z-index: 1; display: block; color: var(--muted); font-size: .73rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.metric-value { position: relative; z-index: 1; display: block; margin: 5px 0; color: var(--ink); font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -.05em; }
.metric-card small { letter-spacing: 0; text-transform: none; font-weight: 600; }
.shop-section { margin-bottom: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 13px; }
.section-heading .eyebrow { margin-bottom: 3px; }
.section-heading h2 { margin: 0; font-size: 1.4rem; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quick-actions.has-foreman { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-action-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; min-height: 108px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: rgba(10, 37, 79, .82); text-decoration: none; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.quick-action-card:hover { transform: translateY(-3px); border-color: var(--blue-bright); background: rgba(15, 66, 148, .52); color: var(--ink); }
.quick-action-card.is-priority { border-color: var(--blue-bright); background: linear-gradient(135deg, rgba(23, 108, 238, .64), rgba(10, 37, 79, .9)); box-shadow: 0 0 0 1px rgba(140, 187, 255, .22), 0 12px 28px rgba(0, 0, 0, .18); }
.action-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--line-strong); border-radius: 11px; color: #c9deff; background: rgba(26, 117, 255, .15); font-weight: 900; }
.quick-action-card h3 { margin: 0 0 3px; font-size: .98rem; }
.quick-action-card p { margin: 0; font-size: .79rem; }
.action-arrow { color: #8cbbff; font-size: 1.3rem; transition: transform .16s ease; }
.quick-action-card:hover .action-arrow { transform: translateX(3px); }
.shop-content-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-bottom: 14px; }
.shop-panel { background: rgba(6, 26, 58, .82); box-shadow: 0 16px 48px rgba(0, 0, 0, .16); }
.shop-panel .panel-head a { color: #8cbbff; font-size: .72rem; letter-spacing: 0; text-decoration: none; text-transform: none; }
.activity-list, .schedule-list { padding: 4px 20px; }
.activity-item, .schedule-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 70px; border-bottom: 1px solid var(--line); }
.activity-item:last-child, .schedule-summary:last-child { border-bottom: 0; }
.activity-glyph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #c9deff; background: rgba(26, 117, 255, .15); font-weight: 900; }
.activity-item strong, .schedule-summary strong { display: block; color: var(--ink); font-size: .88rem; }
.activity-item p, .schedule-summary p { margin: 2px 0 0; font-size: .77rem; }
.schedule-quote-link { color: #8cbbff; font-weight: 800; text-decoration: none; }
.schedule-quote-link:hover { color: #fff; text-decoration: underline; }
.activity-item time { color: var(--muted); font-size: .74rem; font-weight: 700; }
.schedule-summary { grid-template-columns: auto 1fr; }
.schedule-date { min-width: 83px; color: #c9deff; font-size: .76rem; font-weight: 800; }
.compact-empty { padding: 28px 20px; text-align: left; }
.compact-empty h2 { margin-bottom: 4px; font-size: 1rem; }
.services-panel { margin-bottom: 16px; }
.service-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.service-status { display: grid; grid-template-columns: auto 1fr; gap: 9px; min-height: 96px; padding: 17px; border-right: 1px solid var(--line); }
.service-status:last-child { border-right: 0; }
.service-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #697889; }
.service-dot.is-connected { background: var(--success); box-shadow: 0 0 0 3px rgba(85, 214, 161, .12); }
.service-status strong, .service-status small { display: block; }
.service-status strong { font-size: .83rem; }
.service-status small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.service-state { grid-column: 2; color: #c1d0e0; font-size: .7rem; font-weight: 800; }

.form-panel { padding: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .span-2 { grid-column: span 2; }
label { display: grid; gap: 7px; color: #dce6ef; font-size: .84rem; font-weight: 750; }
input, textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px;
  color: var(--ink); background: rgba(38, 49, 60, .76); outline: none;
}
input[type="radio"] { width: auto; padding: 0; accent-color: var(--blue-bright); }
textarea { min-height: 114px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(26, 117, 255, .2); }
input::placeholder, textarea::placeholder { color: #83909c; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; }
.choice-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { display: flex; align-items: center; gap: 9px; min-height: 50px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--ink); background: rgba(38, 49, 60, .42); cursor: pointer; }
.choice:hover { border-color: var(--blue-bright); }
.choice strong { display: block; font-size: .88rem; }
.choice small { display: block; color: var(--muted); font-size: .75rem; font-weight: 500; }
.conditional-field[hidden] { display: none; }
.form-note { margin: 0; font-size: .84rem; }

.button, button:not(.unstyled) { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid transparent; border-radius: 10px; padding: 0 16px; color: #fff; background: var(--blue); font-weight: 800; text-decoration: none; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.button:hover, button:not(.unstyled):hover { background: var(--blue-bright); color: #fff; transform: translateY(-1px); }
.button-secondary, .button-quiet { border-color: var(--line) !important; background: transparent !important; }
.button-secondary:hover, .button-quiet:hover { border-color: var(--blue-bright) !important; color: #fff !important; }
.button-small { min-height: 34px; padding: 0 11px; font-size: .8rem; }
.quote-menu { display: inline-block; min-width: 36px; }
.quote-menu summary { display: grid; place-items: center; width: 36px; min-height: 34px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: transparent; font-size: 1.15rem; font-weight: 800; letter-spacing: .08em; line-height: 1; list-style: none; cursor: pointer; }
.quote-menu summary::-webkit-details-marker { display: none; }
.quote-menu summary:hover, .quote-menu[open] summary { border-color: var(--blue-bright); background: rgba(20, 95, 220, .15); }
.quote-menu-list { display: grid; gap: 2px; width: 170px; margin-top: 8px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--navy-soft); }
.quote-menu-list a, .quote-menu-list button:not(.unstyled) { display: flex; align-items: center; width: 100%; min-height: 38px; border: 0; border-radius: 7px; padding: 8px 10px; color: var(--ink); background: transparent; font-size: .82rem; font-weight: 750; justify-content: flex-start; text-align: left; text-decoration: none; }
.quote-menu-list a:hover, .quote-menu-list button:not(.unstyled):hover { background: rgba(20, 95, 220, .22); color: #fff; transform: none; }
.quote-menu-list form { margin: 0; }
.quote-menu-list .quote-menu-quiet { color: #c5d1de; }

.flash { margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(85, 214, 161, .45); border-radius: 10px; color: #dbfff0; background: rgba(32, 129, 90, .2); }
.empty { padding: 34px 24px; text-align: center; }
.empty p { margin: 0; }
.table-wrap { overflow-x: auto; padding: 0 12px 12px; }
.quote-table { min-width: 720px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 12px 16px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
td { padding: 15px 16px; border-bottom: 1px solid var(--line); color: #dce6ef; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(20, 95, 220, .08); }
.table-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.table-actions form { margin: 0; }
.list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
td small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; font-weight: 500; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.status { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; color: var(--muted); background: rgba(168, 176, 184, .08); font-size: .75rem; font-weight: 800; text-transform: capitalize; }
.status-approved, .status-paid { color: #aaf2d1; border-color: rgba(85, 214, 161, .45); background: rgba(85, 214, 161, .12); }
.status-sent, .status-needs_review { color: #b8d4ff; border-color: rgba(26, 117, 255, .48); background: rgba(26, 117, 255, .12); }
.needs-review-list li { display: grid; gap: 10px; }
.needs-review-list li > div { display: flex; align-items: center; gap: 10px; }
.needs-review-list li > div span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.needs-review-response { display: grid; gap: 6px; max-width: 420px; font-weight: 600; }
.needs-review-response small, .needs-review-action { font-weight: 400; margin: 0; }
.money { color: var(--ink); font-weight: 800; }

.quote-summary { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin-bottom: 20px; }
.quote-total { min-width: 180px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(20, 95, 220, .13); }
.quote-total span { display: block; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.quote-total strong { font-size: 1.65rem; letter-spacing: -.04em; }
.line-editor { min-width: 1100px; table-layout: fixed; }
.line-editor .line-description-column { width: 33%; }
.line-editor .line-material-column { width: 17%; }
.line-editor .line-quantity-column,
.line-editor .line-rate-column,
.line-editor .line-labor-column { width: 10%; }
.line-editor .line-total-column { width: 13%; }
.line-editor .line-actions-column { width: 7%; }
.line-editor input { width: 100%; min-width: 0; }
.line-editor .line-description { min-width: 0; }
.line-editor .remove-line { white-space: nowrap; }
.review-link { margin-top: 20px; padding: 15px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(20, 95, 220, .13); }
.review-link p { margin: 0 0 7px; }
.review-link a { overflow-wrap: anywhere; }
.invoice-payment { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(100px, 1fr) auto; gap: 7px; min-width: 270px; }
.invoice-payment input { padding: 8px 9px; }
.invoice-payment button { min-height: 36px; }
.review-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.review-totals.no-tax { grid-template-columns: minmax(230px, 32%); }
.customer-summary { margin-bottom: 18px; }
.customer-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.customer-summary-grid > div { min-height: 88px; padding: 16px 20px; background: var(--navy-soft); }
.customer-summary-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.customer-summary-grid strong { color: var(--ink); overflow-wrap: anywhere; }

.approved-workbench { margin-top: 18px; }
.approved-workbench-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.approved-action-card { min-height: 210px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(12, 45, 99, .88), rgba(6, 26, 58, .7)); }
.approved-action-label { display: block; margin-bottom: 8px; color: var(--blue-bright); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.approved-action-card h2 { margin-bottom: 7px; }
.approved-action-card p { min-height: 47px; margin-bottom: 18px; font-size: .86rem; }
.approved-action-stack { display: grid; gap: 10px; }
.payment-action-card { min-height: 210px; }
.balance-due { display: block; margin: 3px 0 10px; color: var(--ink); font-size: 2.1rem; letter-spacing: -.06em; }
.payment-action-card p { min-height: 0; margin-bottom: 12px; }
.payment-action-form { margin-top: 0; }
.payment-action-form input { padding: 10px 12px; }
.payment-action-form button { min-height: 43px; }
.approved-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.approved-schedule input { padding: 10px 12px; }
.approved-schedule button { grid-column: 1 / -1; min-height: 43px; }
.scheduled-job-workflow { display: grid; gap: 14px; }
.scheduled-job-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(85, 214, 161, .32); border-radius: 10px; background: rgba(85, 214, 161, .07); }
.scheduled-job-summary > div { padding: 11px 12px; }
.scheduled-job-summary span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.scheduled-job-summary strong { display: block; color: #aaf2d1; font-size: .82rem; overflow-wrap: anywhere; }
.scheduled-job-edit { padding-top: 2px; border-top: 1px solid var(--line); }
.scheduled-job-edit h3, .scheduled-invoice-action h3 { margin: 14px 0 3px; font-size: .95rem; }
.scheduled-job-edit p, .scheduled-invoice-action p { margin: 0 0 10px; color: var(--muted); font-size: .79rem; }
.schedule-site-lead-field { grid-column: 1 / -1; }
.scheduled-invoice-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(20, 95, 220, .13); }
.scheduled-invoice-action h3 { margin-top: 0; }
.scheduled-invoice-action p { margin-bottom: 0; }
.scheduled-invoice-action form { flex: none; }
.scheduled-cancel-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.scheduled-cancel-action strong, .scheduled-cancel-action span { display: block; }
.scheduled-cancel-action strong { color: var(--ink); font-size: .84rem; }
.scheduled-cancel-action span { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.button-danger { border-color: rgba(255, 121, 121, .55); color: #ffb8b8; background: rgba(171, 46, 46, .13); }
.button-danger:hover { border-color: #ff8f8f; color: #ffe0e0; background: rgba(171, 46, 46, .25); }
.scheduled-note { min-height: 0 !important; margin: 0 !important; padding: 11px 12px; border: 1px solid rgba(85, 214, 161, .32); border-radius: 10px; color: var(--muted); background: rgba(85, 214, 161, .07); font-size: .82rem; }
.scheduled-note strong { color: #aaf2d1; }
.schedule-calendar { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.schedule-calendar p { margin: 3px 0 10px; font-size: .8rem; }
.schedule-calendar-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.schedule-calendar-controls input { padding: 9px 10px; }
.schedule-events { max-height: 180px; margin-top: 10px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(6, 26, 58, .55); color: var(--muted); font-size: .8rem; }
.schedule-events > p { margin: 0; padding: 11px; }
.schedule-event { display: grid; grid-template-columns: 122px 1fr; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.schedule-event:last-child { border-bottom: 0; }
.schedule-event strong { color: #c8dbf4; font-size: .75rem; }
.unlock-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 16px 18px; border-top: 1px solid var(--line); }
.unlock-row strong { color: var(--ink); }
.unlock-row p { margin: 3px 0 0; font-size: .82rem; }
.unlock-row form { flex: none; margin: 0; }

.document { max-width: 840px; }
.document .panel-body { padding: 32px; }
.document-meta { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.document-meta p { margin-bottom: 4px; }
.document-total { margin: 24px 0; padding: 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(20, 95, 220, .13); }
.document-total span { color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.document-total strong { display: block; margin-top: 2px; font-size: 2rem; letter-spacing: -.05em; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 480px); }
.auth-card .panel-body { padding: 30px; }
.auth-card h1 { font-size: clamp(2.4rem, 9vw, 3.75rem); }
.team-list { margin-top: 16px; }
.team-add .form-actions { align-self: end; margin: 0; justify-content: flex-end; }
.team-members { padding-top: 4px; padding-bottom: 4px; }
.team-member { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(220px, 1.45fr) minmax(150px, .9fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.team-member:last-child { border-bottom: 0; }
.team-member strong { color: var(--ink); }
.team-email { min-width: 0; color: #dce6ef; overflow-wrap: anywhere; }
.team-member select { min-width: 0; padding: 9px 11px; }
.foreman-jobs { padding: 5px 20px; }
.foreman-job { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 14px; min-height: 88px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.foreman-job:last-child { border-bottom: 0; }
.foreman-job:hover { color: var(--ink); }
.foreman-job small { display: block; margin-top: 3px; color: var(--muted); font-size: .79rem; }
.field-details { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.field-details h2 { margin: 18px 0 5px; }
.field-details p { max-width: 720px; white-space: pre-wrap; }
.field-material-list { display: grid; gap: 6px; max-width: 720px; margin: 0; padding-left: 20px; color: var(--muted); }
.field-material-list li::marker { color: var(--blue-bright); }
.divider { height: 1px; margin: 24px 0; background: var(--line); }
.operation-progress { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2, 13, 34, .72); backdrop-filter: blur(4px); }
.operation-progress[hidden] { display: none; }
.operation-progress-card { display: grid; justify-items: center; gap: 10px; width: min(100%, 350px); padding: 28px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--navy-soft); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); text-align: center; }
.operation-progress-card strong { color: var(--ink); font-size: 1.1rem; }
.operation-progress-card span:last-child { color: var(--muted); font-size: .84rem; }
.operation-spinner { width: 28px; height: 28px; border: 3px solid rgba(39, 116, 255, .28); border-top-color: var(--blue-bright); border-radius: 50%; animation: operation-spin .75s linear infinite; }
.operation-in-progress { cursor: progress; }
@keyframes operation-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .site-header { position: relative; flex-wrap: wrap; padding-top: 16px; gap: 0; }
  .brand { min-width: 0; white-space: nowrap; font-size: .8rem; }
  .brand-gear { width: 24px; height: 24px; }
  button.mobile-nav-toggle { display: inline-flex !important; align-items: center; gap: 8px; margin-left: auto; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink); background: rgba(10, 37, 79, .7); font-size: .82rem; font-weight: 800; }
  .mobile-nav-toggle span { color: var(--blue-bright); font-size: 1rem; line-height: 1; }
  .site-nav { display: none; order: 3; width: 100%; margin-top: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5, 25, 58, .96); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); }
  .site-nav.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .site-nav a { padding: 12px 10px; border-radius: 8px; font-size: .84rem; }
  .site-nav a:hover { background: rgba(20, 95, 220, .16); }
  .page { padding-top: 28px; }
  .page-head, .document-meta, .form-actions { align-items: flex-start; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .review-totals { grid-template-columns: 1fr; }
  .customer-summary-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .card-grid { grid-template-columns: 1fr; }
  .quote-summary { grid-template-columns: 1fr; }
  .quote-total { min-width: 0; }
  .form-panel, .panel-body { padding: 18px; }
  th, td { padding: 11px 12px; }
  .invoice-payment { min-width: 240px; }
  .quote-table { min-width: 640px; }
  .list-toolbar { grid-template-columns: 1fr; }
  .approved-workbench-grid { grid-template-columns: 1fr; }
  .approved-schedule { grid-template-columns: 1fr; }
  .scheduled-job-summary { grid-template-columns: 1fr; }
  .scheduled-invoice-action, .scheduled-cancel-action { align-items: flex-start; flex-direction: column; }
  .schedule-calendar-controls { grid-template-columns: 1fr; }
  .schedule-event { grid-template-columns: 1fr; gap: 2px; }
  .unlock-row { align-items: flex-start; flex-direction: column; }
  .shop-hero { align-items: flex-start; flex-direction: column; min-height: 0; padding: 26px 22px; }
  .metrics-grid, .quick-actions, .shop-content-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .service-status { min-height: 72px; border-right: 0; border-bottom: 1px solid var(--line); }
  .service-status:last-child { border-bottom: 0; }
  .team-add .form-actions { align-items: stretch; width: 100%; }
  .team-add .form-actions button { width: 100%; }
  .team-member { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .team-member select, .team-member button { width: 100%; }
}

@media (min-width: 761px) and (max-width: 1040px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-actions, .quick-actions.has-foreman { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-status:nth-child(3) { border-right: 0; }
  .service-status:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}

.workspace-update { position: sticky; z-index: 2; top: 12px; width: fit-content; max-width: 100%; margin: 0 0 14px auto; padding: 8px 12px; border: 1px solid rgba(26, 117, 255, .5); border-radius: 999px; color: #dbeaff; background: rgba(6, 26, 58, .94); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); font-size: .78rem; font-weight: 700; }

.checkbox-setting { align-content: start; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10, 37, 79, .5); }
.checkbox-control { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: .92rem; font-weight: 800; }
.checkbox-control input[type="checkbox"] { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--blue-bright); }
.checkbox-setting .form-note { margin: 0; }


/* The shared button rule must never expose the mobile-only control on desktop. */
button.mobile-nav-toggle { display: none !important; }
@media (max-width: 760px) {
  button.mobile-nav-toggle { display: inline-flex !important; }
}

/* Owner help center */
.help-page { max-width: 1060px; }
.help-hero { padding: 42px 0 22px; }
.help-hero h1 { max-width: 760px; }
.help-search { display: flex; align-items: center; gap: 10px; max-width: 720px; margin-top: 28px; padding: 6px 8px 6px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(6, 26, 58, .82); box-shadow: 0 14px 42px rgba(0, 0, 0, .18); }
.help-search > span { color: #8cbbff; font-size: 1.35rem; font-weight: 800; }
.help-search input { flex: 1; border: 0; padding: 10px 0; background: transparent; box-shadow: none; }
.help-search kbd { border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; color: var(--muted); font-size: .75rem; }
.help-search-result { min-height: 24px; margin: 10px 0 0; font-size: .82rem; }
.help-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.help-jump-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: #c8ddff; background: rgba(10, 37, 79, .58); font-size: .8rem; font-weight: 750; text-decoration: none; }
.help-jump-nav a:hover { border-color: var(--blue-bright); }
.help-section { margin-bottom: 48px; scroll-margin-top: 24px; }
.help-flow-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.help-flow-overview a { position: relative; min-height: 142px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: rgba(10, 37, 79, .68); text-decoration: none; }
.help-flow-overview a:hover { border-color: var(--blue-bright); background: rgba(20, 95, 220, .18); }
.help-flow-overview strong { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 16px; border-radius: 50%; color: #c8ddff; background: var(--blue); font-size: .78rem; }
.help-flow-overview span, .help-flow-overview small { display: block; }
.help-flow-overview span { font-weight: 800; }
.help-flow-overview small { margin-top: 4px; color: var(--muted); font-size: .78rem; }
.help-callout { margin-top: 14px; padding: 15px 18px; border-left: 3px solid var(--blue-bright); border-radius: 0 10px 10px 0; color: #c8ddff; background: rgba(20, 95, 220, .12); }
.help-guide-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; }
.help-guide-grid.two-up { grid-template-columns: 1fr 1fr; }
.help-card { position: relative; min-height: 290px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(6, 26, 58, .8); }
.help-card-wide { grid-column: 1 / -1; min-height: auto; }
.help-card h3 { margin-right: 30px; font-size: 1.1rem; }
.help-card ol, .help-card ul { margin: 0; padding-left: 21px; color: var(--muted); }
.help-card li { margin: 0 0 9px; }
.help-card li strong { color: #dce6ef; }
.help-step { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; color: #8cbbff; font-size: .78rem; font-weight: 800; }
.help-tip { margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: #c3cfdd; font-size: .84rem; }
.help-tip strong { color: #aaf2d1; }
.help-screen { overflow: hidden; min-height: 290px; border: 1px solid rgba(75, 139, 255, .44); border-radius: 16px; background: #061a3a; box-shadow: 0 18px 45px rgba(0, 0, 0, .24); }
.help-screen-bar { display: flex; align-items: center; gap: 6px; min-height: 37px; padding: 0 13px; border-bottom: 1px solid var(--line); background: rgba(12, 45, 99, .75); }
.help-screen-bar span { width: 7px; height: 7px; border-radius: 50%; background: #547096; }.help-screen-bar span:nth-child(1) { background: #ff8f8f; }.help-screen-bar span:nth-child(2) { background: #ffc76a; }.help-screen-bar span:nth-child(3) { background: #55d6a1; }
.help-screen-bar b { margin-left: 8px; color: #dce6ef; font-size: .74rem; }
.help-screen-body { padding: 17px; }.help-screen-body > p { display: flex; justify-content: space-between; margin-bottom: 13px; color: #c8ddff; font-size: .65rem; font-weight: 800; letter-spacing: .08em; }.help-screen-body em { color: var(--muted); font-style: normal; font-weight: 600; letter-spacing: 0; }
.help-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.help-fields label, .help-payment { gap: 4px; color: #dce6ef; font-size: .67rem; }.help-fields label.wide { grid-column: 1 / -1; }.help-fields i, .help-payment i { display: block; min-height: 31px; padding: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; color: #9eafc1; background: rgba(38, 49, 60, .76); font-size: .65rem; font-style: normal; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.help-choice, .help-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: .7rem; }.help-choice b { color: #c8ddff; }.help-choice button, .help-actions button { min-height: 30px; margin-left: auto; border-radius: 6px; padding: 0 10px; font-size: .66rem; }.help-actions .quiet { margin-left: 0; border-color: var(--line); background: transparent; }
.help-table { display: grid; grid-template-columns: 1.5fr .55fr .65fr; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }.help-table > * { min-width: 0; padding: 8px; border-bottom: 1px solid var(--line); color: #b6c5d3; font-size: .64rem; }.help-table > b { color: var(--muted); background: rgba(10, 37, 79, .8); font-size: .58rem; text-transform: uppercase; }.help-table > strong { color: #dce6ef; }.help-table > :nth-last-child(-n+3) { border-bottom: 0; }
.help-total { display: flex; justify-content: end; gap: 14px; margin-top: 14px; color: var(--muted); font-size: .72rem; }.help-total b { color: var(--ink); }.help-balance { margin: 28px 0 18px; color: var(--muted); font-size: .78rem; font-weight: 700; }.help-balance b { color: var(--ink); font-size: 2rem; letter-spacing: -.05em; }.help-payment { max-width: 220px; }
.prompt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.prompt-card { padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10, 37, 79, .65); }.prompt-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.prompt-card strong { color: #dce6ef; }.copy-prompt { min-height: 29px; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: #c8ddff; background: transparent; font-size: .72rem; font-weight: 800; }.copy-prompt:hover { border-color: var(--blue-bright); }.prompt-card pre { margin: 12px 0 0; color: var(--muted); font-family: inherit; font-size: .8rem; line-height: 1.5; white-space: pre-wrap; }
.help-faq { display: grid; gap: 8px; }.help-faq details { border: 1px solid var(--line); border-radius: 11px; padding: 0 16px; background: rgba(10, 37, 79, .55); }.help-faq summary { padding: 15px 0; color: #dce6ef; font-weight: 800; cursor: pointer; }.help-faq p { margin-bottom: 15px; }
@media (max-width: 760px) { .help-hero { padding-top: 28px; }.help-flow-overview, .help-guide-grid, .help-guide-grid.two-up, .prompt-grid { grid-template-columns: 1fr; }.help-card-wide { grid-column: auto; }.help-screen { min-height: 260px; }.help-fields { grid-template-columns: 1fr; }.help-fields label.wide { grid-column: auto; }.help-jump-nav { margin-bottom: 28px; } }


/* Owner services and pricing: capture the list first, then price a compact review table. */
.pricing-review-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin: 8px 0 18px; }
.pricing-review-heading h2 { margin-bottom: 4px; }
.page-services-pricing { width: min(1060px, calc(100% - 32px)); }
.service-pricing-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.service-price-row { display: grid; grid-template-columns: minmax(180px, 1.25fr) minmax(280px, .95fr) minmax(250px, 1fr); gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(10, 37, 79, .34); }
.service-price-row:last-child { border-bottom: 0; }
.service-price-row strong { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.service-rate-controls { display: grid; grid-template-columns: minmax(92px, .75fr) minmax(150px, 1.25fr); gap: 10px; min-width: 0; }
.service-price-row input, .service-price-row select { min-height: 42px; margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 820px) {
  .service-price-row { grid-template-columns: minmax(160px, 1fr) minmax(240px, 1.1fr); }
  .service-price-row .service-coverage { grid-column: 2; }
}
@media (max-width: 640px) {
  .pricing-review-heading { align-items: stretch; flex-direction: column; }
  .service-price-row { grid-template-columns: 1fr; gap: 8px; }
  .service-price-row .service-coverage { grid-column: auto; }
  .service-rate-controls { grid-template-columns: 1fr; }
}

.settings-management-links { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.settings-management-links > a { font-weight: 800; }
.settings-management-links span { color: var(--muted); font-size: .88rem; }
.settings-management-links strong { color: var(--ink); }
@media (max-width: 640px) { .settings-management-links { align-items: flex-start; flex-direction: column; } }