:root {
  color-scheme: light;
  --background: #f3f5f3;
  --paper: #ffffff;
  --ink: #182629;
  --muted: #536366;
  --line: #dce4e1;
  --sidebar: #17272b;
  --green: #1e6153;
  --green-dark: #164a40;
  --green-light: #e7f1ed;
  --orange: #86501b;
  --orange-light: #fff3db;
  --red: #9d2f33;
  --radius: 12px;
  --font: "Instrument Sans", "Avenir Next", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); font: 16px/1.5 var(--font); }
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid #a36d20; outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -.055em; }
h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.025em; line-height: 1.2; }
h3 { margin: 12px 0 8px; font-size: 1rem; }
p { margin-bottom: 12px; }
[hidden] { display: none !important; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus { position: absolute; z-index: 2; top: 12px; left: 12px; background: var(--paper); padding: 12px; }

.shell { min-height: 100dvh; display: grid; grid-template-columns: 212px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: var(--sidebar);
  color: #edf4f1;
  padding: 28px 16px 18px;
}
.brand, .person, .signin-brand { display: flex; align-items: center; gap: 12px; }
.brand { color: inherit; font-weight: 750; letter-spacing: -.02em; padding-inline: 4px; }
.brand small, .account small { display: block; font-size: .76rem; color: #b7ccc7; font-weight: 500; letter-spacing: 0; }
.monogram {
  width: 36px;
  height: 36px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: var(--sidebar);
  background: #c8e5d9;
  font-size: 1.19rem;
  font-weight: 800;
}
.sidebar nav { display: grid; gap: 6px; }
.sidebar nav a {
  color: #d4e2df;
  padding: 10px 12px;
  border-inline-start: 3px solid transparent;
  border-radius: 6px;
  font-weight: 650;
}
.sidebar nav a:hover { background: #24393d; text-decoration: none; }
.sidebar nav a[aria-current="page"] { background: #2b4443; color: #fff; border-color: #92c7b4; }
.account { margin-top: auto; border-top: 1px solid #405055; padding: 12px 4px 0; display: grid; gap: 8px; }
.account strong { display: block; font-size: .86rem; overflow-wrap: anywhere; }
.quiet { padding: 7px 0; color: #d6e5df; background: none; border: 0; font-size: .85rem; }
.quiet:hover { text-decoration: underline; }

.main { width: min(100%, 1420px); padding: clamp(18px, 3.4vw, 52px); min-width: 0; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.page-header > div, .section-header > h2 { min-width: 0; }
.overline { margin: 0 0 6px; color: var(--green); font-weight: 750; font-size: .75rem; letter-spacing: .075em; text-transform: uppercase; }
.subtitle, .muted { color: var(--muted); }
.subtitle { margin-bottom: 0; }
.breadcrumb { display: inline-block; margin-bottom: 16px; font-size: .92rem; font-weight: 650; }
.button {
  min-height: 42px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid #bdccc7;
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  font-size: .88rem;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
}
.button:hover { background: #f0f5f2; text-decoration: none; }
.button.primary { background: var(--green); border-color: var(--green); color: #fff; }
.button.primary:hover { background: var(--green-dark); }
.button.plain { border-color: transparent; background: transparent; color: var(--green-dark); }
.button.small { min-height: 36px; padding: 5px 9px; font-size: .82rem; }
.button.large { min-height: 48px; }
.page-header > .button { flex-shrink: 0; }

.panel { min-width: 0; margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-header > a { font-size: .86rem; font-weight: 650; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.stats a { display: grid; gap: 5px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stats a:hover { text-decoration: none; border-color: #a2b7ae; }
.stats span { color: var(--muted); font-size: .83rem; font-weight: 600; }
.stats strong { font-size: 2rem; letter-spacing: -.055em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stage-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.stage-box {
  display: grid;
  padding: 10px 12px;
  border-top: 3px solid var(--accent, #78aaa2);
  border-radius: 6px;
  background: var(--tint, #edf5f3);
  color: var(--ink);
}
.stage-box:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--accent, #78aaa2); }
.stage-box strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stage-box span { font-size: .82rem; font-weight: 650; }
.lead { --accent: #558ca3; --tint: #e8f1f6; --stage: #245167; }
.engaged { --accent: #3e968a; --tint: #e7f3ef; --stage: #1c6258; }
.visit { --accent: #aa8444; --tint: #faf0db; --stage: #765018; }
.proposal { --accent: #836fa5; --tint: #f0ecf9; --stage: #514073; }
.sold { --accent: #669964; --tint: #e9f2e6; --stage: #345f34; }
.delivered { --accent: #43856a; --tint: #dff0e9; --stage: #275e49; }
.lost { --accent: #b87a77; --tint: #faebea; --stage: #7a3235; }
.pill {
  display: inline-flex;
  width: fit-content;
  align-self: center;
  align-items: center;
  border-radius: 100px;
  background: var(--tint, #eef2ef);
  color: var(--stage, var(--ink));
  padding: 4px 9px;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.pill.warning { color: var(--orange); background: var(--orange-light); }
.dashboard-grid, .workplan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); }
.list-row > span, .list-row > a { min-width: 0; overflow-wrap: anywhere; }
.list-row small, .person small, .record-source small, .contact-strip small { display: block; font-size: .82rem; color: var(--muted); }
.list-row time { color: var(--muted); font-size: .82rem; flex-shrink: 0; }
.list-row.selected-row { color: var(--green-dark); }
.empty { color: var(--muted); margin: 0; padding: 14px 0; }
.empty.compact { padding: 0 0 9px; }
.avatar {
  display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: #e7f0ed; color: var(--green-dark); font-size: .83rem; font-weight: 750;
}
.large-avatar { width: 54px; height: 54px; font-size: 1.05rem; }
.attention { color: var(--orange) !important; }

label, .field label { display: block; color: var(--ink); font-size: .87rem; font-weight: 650; margin-bottom: 5px; }
input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #b8c6c2;
  background: #fbfcfb;
  color: var(--ink);
  border-radius: 7px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); width: 17px; height: 17px; flex: 0 0 auto; }
textarea { resize: vertical; display: block; }
.filter-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar > div { flex: 1; min-width: 130px; max-width: 320px; }
.filter-bar > div:first-of-type { flex: 2; min-width: 210px; }
.record-heading, .record-row { display: grid; grid-template-columns: minmax(125px, 2fr) minmax(82px, .9fr) minmax(78px, 1fr) minmax(65px, .8fr) minmax(42px, .6fr); align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.record-heading { color: var(--muted); font-size: .78rem; font-weight: 700; }
.record-row { color: var(--ink); font-size: .9rem; }
.record-row > * { min-width: 0; overflow-wrap: anywhere; }
.record-row:hover { background: #f7faf8; text-decoration: none; }
.record-row:hover strong { text-decoration: underline; }
.record-date { color: var(--muted); }
.form-panel { max-width: 760px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.form-actions, .inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stack { display: grid; align-items: start; gap: 13px; }
.stack > .button { justify-self: start; }
.compact-form { margin: 10px 0 13px; }
.inline-form { display: inline-block; margin: 4px 4px 5px 0; }
.check-row { display: flex; align-items: center; gap: 7px; }
.matches { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; }
.matches label { display: flex; align-items: center; gap: 8px; }
.errorlist { padding: 0; margin: 4px 0; list-style: none; color: var(--red); font-size: .85rem; }
.notices { margin-bottom: 16px; }
.notice { padding: 11px 13px; background: var(--green-light); border: 1px solid #c9dfd5; border-radius: 8px; }
.notice.error { color: var(--red); background: #fff1f0; border-color: #e9c4c4; }

.contact-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.contact-strip div { min-width: 0; overflow-wrap: anywhere; }
.contact-strip div > span { display: block; color: var(--muted); font-size: .77rem; font-weight: 650; }
.customer-header { align-items: center; }
.customer-header h1 { overflow-wrap: anywhere; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.case-actions { grid-column: 2; grid-row: 1; }
.case-timeline { grid-column: 1; grid-row: 1; }
details { border-top: 1px solid var(--line); margin-top: 8px; }
summary { cursor: pointer; padding: 10px 0; font-size: .88rem; font-weight: 700; }
.panel > details:first-child { border-top: 0; margin-top: 0; }
.panel > details:first-child summary { padding-block: 1px; }
.proposal-summary { display: grid; gap: 3px; margin-bottom: 8px; }
.proposal-summary strong { font-size: 1.48rem; letter-spacing: -.03em; }
.proposal-summary span, .appointment small { color: var(--muted); font-size: .84rem; }
.appointment { border-top: 1px solid var(--line); padding: 10px 0; }
.appointment small { display: block; }
.appointment-actions { margin-top: 7px; }
.timeline, .conversation { list-style: none; margin: 0; padding: 0; }
.timeline > li { border-top: 1px solid var(--line); padding: 11px 0; }
.timeline-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.timeline small, .timeline time, .conversation small { color: var(--muted); font-size: .8rem; }
.timeline p, .conversation p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 16px; align-items: start; }
.conversation { display: grid; gap: 9px; margin-bottom: 16px; }
.conversation li { background: var(--green-light); border-radius: 9px; padding: 9px 12px; width: min(88%, 580px); }
.conversation .inbound { justify-self: end; background: #edf0f5; }

.signin-layout { min-height: 100dvh; display: grid; align-items: center; justify-items: center; padding: 24px; background: #e8efeb; }
.signin-card { width: min(100%, 470px); padding: clamp(22px, 6vw, 42px); border: 1px solid #d2dfd8; border-radius: 15px; background: var(--paper); }
.signin-brand { margin: 0 0 24px; }
.signin-brand .overline { margin: 0; }
.signin-card .stack { margin-top: 17px; }
.signin-card .stack > .button { justify-self: stretch; }
.signin-card .alternate { display: block; margin-top: 12px; font-size: .87rem; }
.signin-footer { padding-top: 17px; margin: 22px 0 0; color: var(--muted); border-top: 1px solid var(--line); font-size: .8rem; }
.scan-entry { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }
.scanner {
  width: min(calc(100% - 24px), 680px);
  max-height: 92dvh;
  overflow: auto;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.scanner::backdrop { background: rgb(16 31 34 / .68); }
.scanner .form-actions .button { margin: 0; position: relative; }
.crop-controls { margin-top: 14px; }
.crop-controls .muted { margin: 6px 0 8px; font-size: .84rem; }
.crop-controls button[aria-pressed="true"] { border-color: var(--green); background: var(--green-light); }
.scanner canvas { display: block; width: 100%; max-height: 45dvh; touch-action: none; cursor: crosshair; background: #e9eeeb; margin: 8px 0; }
.scan-status { margin: 9px 0; color: var(--muted); }
.review-fields { display: grid; gap: 8px; margin-bottom: 13px; }
.review-fields label { display: flex; align-items: start; gap: 8px; margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.review-fields small { display: block; color: var(--muted); }
.scanner label:focus-within { outline: 3px solid #a36d20; outline-offset: 3px; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 165px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding-inline: 22px; }
  .detail-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px 9px; }
  .sidebar nav { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 3px; }
  .sidebar nav a { padding: 8px 9px; border-inline-start: 0; border-bottom: 2px solid transparent; font-size: .8rem; }
  .sidebar nav a[aria-current="page"] { border-color: #92c7b4; }
  .account { grid-column: 2; grid-row: 1; display: block; padding: 0; margin: 0; border: 0; text-align: right; }
  .account small { display: none; }
  .quiet { padding-block: 4px; }
  .main { padding: 20px 16px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stats a { padding: 10px; }
  .stats span { font-size: .76rem; }
  .stats strong { font-size: 1.6rem; }
  .stage-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel { padding: 15px; }
  .dashboard-grid, .workplan-grid, .inbox-grid, .detail-grid { grid-template-columns: minmax(0,1fr); }
  .case-actions, .case-timeline { grid-column: auto; grid-row: auto; }
  .detail-grid { gap: 0; }
  .record-heading { display: none; }
  .record-row { grid-template-columns: minmax(0,1fr) auto; row-gap: 4px; padding: 11px 0; }
  .record-owner { grid-column: 1; padding-inline-start: 50px; color: var(--muted); font-size: .8rem; }
  .record-source { grid-column: 2; text-align: right; font-size: .78rem; }
  .record-date { display: none; }
  .appointment-actions > * { min-height: 42px; }
}
@media (max-width: 420px) {
  .page-header { align-items: flex-start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .page-header > .button { align-self: center; }
  .customer-header .large-avatar { display: none; }
  .filter-bar > div, .filter-bar > div:first-of-type { min-width: 100%; }
}