/* Navstead — Phase 1 stylesheet.
   Brand values mirror the BrandConfig row seeded in prisma/seed.js. */

:root {
  --green: #4a6741;
  --cream: #f2f0ec;
  --offwhite: #faf9f5;
  --ink: #2a2a2a;

  --green-dark: #3b5334;
  --rule: #ddd8cf;
  --serif: Cambria, Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--offwhite);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}

/* ---- Banner ---- */

.banner {
  background: var(--green);
  color: var(--offwhite);
}

.banner-inner,
.footer-inner,
.page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.banner-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

.wordmark {
  color: var(--offwhite);
  text-decoration: none;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

.wordmark-sub {
  font-size: 1rem;
  opacity: 0.88;
}

.signout {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
}

.who {
  font-size: 0.9rem;
  opacity: 0.88;
}

/* F-1: the base link button is ink on a light card (it was off-white, made for the banner, so
   Retire / Stop / Take back / Not out yet were invisible on cards). The banner's sign-out has its own rule. */
.linkbutton {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(59, 83, 52, 0.5);
  color: var(--green-dark);
  font: inherit;
  font-size: 0.9rem;
  padding: 0 0 1px;
  cursor: pointer;
}

.linkbutton:hover {
  border-bottom-color: var(--green-dark);
}

/* ---- Page ---- */

.page {
  flex: 1 0 auto;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

.card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2rem 2.25rem;
}

.card-narrow {
  max-width: 26rem;
  margin: 0 auto;
}

h1 {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--green-dark);
}

.lede {
  margin-top: 0;
}

.muted {
  color: #5d5d5d;
  font-size: 0.92rem;
}

a {
  color: var(--green-dark);
}

/* ---- Form ---- */

.form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.25rem;
}

label {
  font-size: 0.9rem;
  color: #4a4a4a;
}

label + input {
  margin-bottom: 0.9rem;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid #b9b3a8;
  border-radius: 2px;
  background: var(--offwhite);
  color: var(--ink);
}

input:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.button {
  font: inherit;
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.55rem 1.4rem;
  background: var(--green);
  color: var(--offwhite);
  border: 1px solid var(--green-dark);
  border-radius: 2px;
  cursor: pointer;
}

.button:hover {
  background: var(--green-dark);
}

.alert {
  margin: 1rem 0 0;
  padding: 0.65rem 0.85rem;
  border-left: 4px solid #8c3b32;
  background: #f6e9e7;
  color: #6f2f27;
  font-size: 0.95rem;
}

/* ---- Footer ---- */

.footer {
  flex-shrink: 0;
  background: var(--green);
  color: var(--offwhite);
}

.footer-inner {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.88rem;
}

/* ---- Navigation and notices (C-2) ---- */

.nav {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
  margin-right: 1.5rem;
}

.nav a {
  color: var(--offwhite);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 249, 245, 0.45);
  font-size: 1rem;
}

.nav a:hover {
  border-bottom-color: var(--offwhite);
}

.notice {
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.85rem;
  border-left: 4px solid var(--green);
  background: #e7ede4;
  color: var(--green-dark);
}

.notice-error {
  border-left-color: #8c3b32;
  background: #f6e9e7;
  color: #6f2f27;
}

.crumbs {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #5d5d5d;
}

.crumbs a {
  color: #5d5d5d;
}

/* ---- Cards, toolbars, tables ---- */

.card + .card {
  margin-top: 1.5rem;
}

.card-quiet {
  background: transparent;
  border-style: dashed;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green-dark);
}

h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-dark);
}

.count {
  font-weight: 400;
  color: #5d5d5d;
}

.toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.toolbar h1,
.toolbar h2 {
  margin-bottom: 0;
}

.menu {
  padding-left: 1.2rem;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.table th,
.table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.table th {
  font-weight: 600;
  color: #4a4a4a;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.table .num {
  text-align: right;
}

.table .clip {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--offwhite);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #4a4a4a;
  vertical-align: middle;
}

.tag-final,
.tag-p1 {
  border-color: var(--green);
  background: var(--green);
  color: var(--offwhite);
}

.tag-p2 {
  border-color: var(--green-dark);
  color: var(--green-dark);
}

.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1.5rem;
  margin: 1rem 0 0;
}

.facts > div {
  margin: 0;
}

.facts dt {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5d5d5d;
}

.facts dd {
  margin: 0.1rem 0 0;
}

.prewrap {
  white-space: pre-wrap;
}

@media (min-width: 40rem) {
  .facts {
    grid-template-columns: 1fr 1fr;
  }

  .facts .facts-wide {
    grid-column: 1 / -1;
  }
}

/* ---- Forms (C-2) ---- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 1.25rem;
}

.form-grid fieldset {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(250, 249, 245, 0.6);
}

legend {
  padding: 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--green-dark);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.7rem;
}

.field input,
.field select,
.field textarea,
.searchbar input,
.searchbar select {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid #b9b3a8;
  border-radius: 2px;
  background: var(--offwhite);
  color: var(--ink);
  width: 100%;
}

.field textarea {
  resize: vertical;
}

.field-error input,
.field-error select,
.field-error textarea {
  border-color: #8c3b32;
}

.field-msg {
  margin: 0;
  font-size: 0.85rem;
  color: #6f2f27;
}

.hint {
  margin: 0;
  font-size: 0.82rem;
  color: #5d5d5d;
}

.req {
  color: #8c3b32;
}

.field-check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.field-check input {
  width: auto;
}

.reveal {
  padding-left: 0.25rem;
}

.actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
}

.cancel {
  font-size: 0.95rem;
}

.button-quiet {
  background: var(--offwhite);
  color: var(--green-dark);
}

.button-quiet:hover {
  background: var(--cream);
}

.button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

a.button {
  text-decoration: none;
  display: inline-block;
}

.inline {
  display: inline;
  margin: 0;
}

.linkbutton-ink {
  color: var(--green-dark);
  border-bottom-color: rgba(59, 83, 52, 0.5);
}

.linkbutton-ink:hover {
  border-bottom-color: var(--green-dark);
}

.searchbar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}

.searchbar input {
  flex: 1 1 14rem;
}

.searchbar select {
  width: auto;
}

.searchbar .button {
  margin-top: 0;
  align-self: stretch;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .form-grid fieldset {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid .field-wide,
  .form-grid .actions,
  .form-grid .reveal {
    grid-column: 1 / -1;
  }

  .form-grid .field-short {
    max-width: 10rem;
  }
}

/* ---- Findings (assessment items) ---- */

.findings {
  margin: 0.5rem 0 0;
  padding-left: 1.4rem;
}

.finding {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}

.finding p {
  margin: 0.25rem 0 0;
}

.finding-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.finding-head .tag {
  margin-left: 0;
}

.finding-editing {
  background: var(--offwhite);
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

.row-actions {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.label {
  color: #5d5d5d;
}

.field label + input {
  margin-bottom: 0;
}

/* ---- Work order builder (C-3) ---- */

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.section-title {
  margin-top: 1.5rem;
}

.group-title {
  margin: 1.25rem 0 0.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--green-dark);
}

.problems {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
}

.problems li {
  margin: 0.15rem 0;
}

.warnings {
  margin-top: 0.75rem;
  color: #6f4a1e;
}

.readiness {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.85rem;
  border-left: 4px solid #b8923c;
  background: #f7f1e3;
}

.readiness summary {
  cursor: pointer;
}

.row-editing td,
li.row-editing {
  background: var(--offwhite);
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.row-credit td {
  font-style: italic;
}

.row-actions-cell {
  white-space: nowrap;
  font-size: 0.9rem;
}

.row-actions-cell form {
  margin-left: 0.5rem;
}

.small {
  font-size: 0.88rem;
}

.confirm {
  color: #8c3b32;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.plain {
  padding-left: 1.2rem;
}

.totals {
  margin: 1.25rem 0 0.5rem;
  margin-left: auto;
  max-width: 30rem;
  border-top: 2px solid var(--green);
}

.totals-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--rule);
}

.totals-total {
  font-weight: 600;
  color: var(--green-dark);
  border-bottom: 2px solid var(--green);
}

.totals-muted {
  color: #5d5d5d;
  font-size: 0.92rem;
  border-bottom: none;
}

.chain {
  padding-left: 1.3rem;
}

.chain li {
  margin: 0.35rem 0;
}

.sign {
  margin: 0.25rem 0 0.5rem;
}

.sign summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--green-dark);
}

.button-small {
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
  margin-top: 0;
}

.tag-issued,
.tag-approved {
  border-color: var(--green);
  background: var(--green);
  color: var(--offwhite);
}

.tag-void,
.tag-superseded {
  opacity: 0.7;
}

h4 {
  margin: 0;
}

/* ---- Completion report (C-5) ---- */

.table-actuals .cell-input,
.table-recon input[type="text"],
.table-actuals input[type="text"],
.table-recon select {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid #b9b3a8;
  border-radius: 2px;
  background: var(--offwhite);
  color: var(--ink);
  width: 100%;
  min-width: 5rem;
}

.table-actuals .cell-input {
  max-width: 6.5rem;
  text-align: right;
}

.row-error td {
  background: #f6e9e7;
}

.tag-paid {
  border-color: var(--green);
  background: var(--green);
  color: var(--offwhite);
}

/* ---- Dashboard (E-5) ---- */

.board,
.pipeline {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.board-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
}

.board-row .tag {
  margin-left: 0;
}

.board-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.board-next {
  flex-basis: 100%;
}

.board-inv-overdue .tag {
  border-color: #8a3b2e;
  color: #8a3b2e;
}

.pipeline li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.pipeline li.is-shown {
  font-weight: 600;
}

.pipeline .count {
  display: inline-block;
  min-width: 1.8rem;
}

.pipeline-sum {
  font-variant-numeric: tabular-nums;
}

.figure {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* ---- E-4: view-only logins see no forms or form links (the server refuses them too) ---- */
.readonly form[method="post"]:not([data-viewer-ok]),
.readonly a[href$="/new"],
.readonly a[href$="/edit"],
.readonly a[href*="/edit#"],
.readonly a[href$="/import"],
.readonly details.editor {
  display: none !important;
}

.tag-viewonly {
  background: var(--cream);
  color: var(--green-dark);
}

a.who {
  color: inherit;
}

/* ---- E-6: the fridge-QR tap form (big targets, phone first) ---- */
.taps {
  border: 0;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.5rem;
}

.taps legend {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--green-dark);
}

.tap {
  display: block;
  cursor: pointer;
}

.tap input {
  position: absolute;
  opacity: 0;
}

.tap span {
  display: block;
  min-height: 3.25rem;
  padding: 0.85rem 0.75rem;
  border: 2px solid var(--green);
  border-radius: 8px;
  background: #fff;
  font-size: 1.05rem;
  text-align: center;
}

.tap input:checked + span {
  background: var(--green);
  color: #fff;
}

.tap input:focus-visible + span {
  outline: 3px solid var(--green-dark);
  outline-offset: 2px;
}

.tap-send {
  margin-top: 1.25rem;
  width: 100%;
  font-size: 1.2rem;
  padding: 0.9rem;
}

.report-new {
  border-left: 4px solid #b8923c;
  padding-left: 0.5rem;
  margin: 0.35rem 0;
}

/* ════════════════════════════════════════════════════════════════════
   E-11a — the field package's design system, carried over.
   Source (read only): navstead_dashboard_v1_00.html, navstead_shell_v1_00.html,
   Tool 1 assessment_v3_80.html. Same tokens, same Georgia app type scale,
   same cards, pills, tiles and buttons — so the back office feels like the
   same product as the tablet. This layer sits last and wins the cascade.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --cream: #F2F0EC;
  --cream-dark: #E8E5DF;
  --cream-mid: #EDE9E3;
  --green: #4A6741;
  --green-dark: #3A5233;
  --green-light: #EAF0E8;
  --green-mid: #5a7a50;
  --amber: #9A6100;
  --amber-light: #FFF8E1;
  --charcoal: #33322E;
  --gray: #6B6B68;
  --gray-light: #C9C6BF;
  --white: #fff;
  --red: #8a3a2f;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --ink: var(--charcoal);
  --offwhite: var(--white);
  --rule: var(--cream-dark);
  --serif: Georgia, "Times New Roman", serif;
}

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
}

/* ---- header: the field app's green bar, two-line brand, pill nav ---- */
.banner { background: var(--green); color: var(--white); }
.banner-inner, .footer-inner, .page { max-width: 64rem; padding-left: 16px; padding-right: 16px; }
.banner-inner { align-items: center; padding-top: 14px; padding-bottom: 14px; gap: 10px 16px; }
.wordmark { color: var(--white); font-size: 19px; font-weight: bold; line-height: 1.2; letter-spacing: 0; }
.wordmark-sub { display: block; font-size: 11px; font-weight: normal; opacity: 0.85; letter-spacing: 0.02em; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.nav a,
.signout .linkbutton {
  color: var(--white);
  text-decoration: none;
  font-size: 12.5px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 5px 13px;
  border-radius: 9px;
  white-space: nowrap;
  line-height: 1.5;
}
.nav a:hover,
.signout .linkbutton:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.7); }
.signout { align-items: center; gap: 8px; }
.who, a.who { font-size: 12px; opacity: 0.9; color: var(--white); text-decoration: none; }
a.who:hover { text-decoration: underline; }
/* G-4: the bell */
a.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; color: var(--white); opacity: 0.85; text-decoration: none; border-radius: var(--radius-xs); }
a.bell:hover, a.bell:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.14); }
a.bell-on { opacity: 1; }
.bell-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber-light); color: var(--amber); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.notes-list { list-style: none; margin: 0; padding: 0; }
.notes-list li { border-top: 1px solid var(--cream-dark); }
.notes-list li:first-child { border-top: 0; }
.notes-list form { margin: 0; }
.notes-list button.note-open { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 12px 4px; font: inherit; color: var(--ink); cursor: pointer; }
.notes-list button.note-open:hover, .notes-list button.note-open:focus-visible { background: var(--cream-mid); }
.notes-list .note-unread .note-text { font-weight: 700; }
.notes-list .note-when { display: block; font-size: 12px; color: var(--gray); margin-top: 2px; }

/* ---- page + cards: white panels on cream, thin borders, 8px corners ---- */
.page { padding-top: 20px; padding-bottom: 40px; }
.page > * + * { margin-top: 16px; }
.card {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
h1 { font-size: 21px; font-weight: bold; color: var(--green-dark); margin: 0 0 8px; line-height: 1.25; }
h2, .section-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--green-dark);
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--cream-dark);
}
h3, .group-title { font-size: 14px; color: var(--green-dark); }
.lede { font-size: 14px; }
.muted { color: var(--gray); font-size: 13px; }
.small { font-size: 12px; }
a { color: var(--green-dark); text-underline-offset: 2px; }

/* the field app's intro banner */
.sec-intro {
  background: var(--green-light);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 14px;
}

/* ---- buttons: .btn family, 40px targets ---- */
.button {
  font-family: Georgia, serif;
  font-size: 13px;
  padding: 9px 14px;
  min-height: 40px;
  line-height: 1.6;
  border-radius: var(--radius-sm);
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button:hover { background: var(--green-dark); }
.button-quiet { background: var(--cream-dark); color: var(--charcoal); border-color: transparent; }
.button-quiet:hover { background: var(--cream-mid); color: var(--charcoal); }
.button-small { min-height: 32px; padding: 5px 11px; font-size: 12px; }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }
.linkbutton-ink { color: var(--green-dark); border-bottom-color: rgba(58, 82, 51, 0.5); font-size: 13px; }

/* ---- status pills ---- */
.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--cream-dark);
  color: var(--charcoal);
  border: 0;
  line-height: 1.6;
  vertical-align: middle;
}
.tag-issued, .tag-p2 { background: var(--amber-light); color: var(--amber); }
.tag-approved, .tag-final { background: var(--green-light); color: var(--green-dark); }
.tag-paid { background: var(--green); color: var(--white); }
.tag-p1, .tag-void, .tag-superseded { background: #f6e9e7; color: var(--red); }

/* ---- tables: the field app's .tbl ---- */
.table { font-size: 13px; border-collapse: collapse; width: 100%; }
.table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
  font-weight: bold;
  border-bottom: 1px solid var(--cream-dark);
  padding: 6px 8px;
  background: none;
}
.table td { padding: 7px 8px; border-bottom: 1px dotted var(--cream-dark); }
.table tr:last-child td { border-bottom: none; }
.table .num { font-variant-numeric: tabular-nums; }

/* ---- facts: small uppercase labels ---- */
.facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); }
.facts dd { font-size: 14px; }

/* ---- forms ---- */
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); font-weight: bold; }
.field input,
.field select,
.field textarea {
  font-family: Georgia, serif;
  font-size: 14px;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-xs);
  padding: 9px 10px;
  min-height: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }

/* ---- notices ---- */
.notice { border-radius: var(--radius-xs); font-size: 13px; }
.alert { border-radius: var(--radius-xs); font-size: 13px; }

/* ---- footer: quiet, like the field app's .foot ---- */
.footer { background: transparent; color: var(--gray); border-top: 0; }
.footer-inner { font-size: 10px; text-align: center; padding-top: 6px; padding-bottom: 22px; }

/* ════════ the dashboard (mirrors the field dashboard) ════════ */
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-toolbar h1 { margin: 0; }
.dash-toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 4px; }
.kpi {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  display: block;
}
a.kpi:hover { border-color: var(--green-mid); }
.kpi .val { font-size: 24px; font-weight: bold; color: var(--green-dark); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .lbl { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.kpi.revenue { background: var(--green); border-color: var(--green-dark); }
.kpi.revenue .val { color: var(--white); }
.kpi.revenue .lbl { color: rgba(255, 255, 255, 0.85); }
.kpi.warn .val { color: var(--amber); }

/* open jobs as the field app's client cards + job rows */
.page .board { list-style: none; margin: 0; padding: 0; }
.page .board-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name next" "tag at";
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--cream-dark);
  border-top: 0;
  margin: 0;
}
.page .board-row:last-child { border-bottom: none; }
.page .board-name { grid-area: name; font-size: 15px; font-weight: bold; color: var(--green-dark); text-decoration: none; }
.page .board-name:hover { text-decoration: underline; }
.page .board-row .tag { grid-area: tag; justify-self: start; margin: 0; }
.page .board-next {
  grid-area: next;
  justify-self: end;
  font-size: 12px;
  text-decoration: none;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green-dark);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.page .board-next:hover { background: var(--green-dark); }
.page .board-row > .small { grid-area: at; justify-self: end; font-size: 11px; color: var(--gray); }
.page .board-row .pipeline-sum { justify-self: end; }
.board-inv-overdue .tag { background: #f6e9e7; color: var(--red); }
.board-inv-issued .tag, .board-wo-issued .tag { background: var(--amber-light); color: var(--amber); }
.board-wo-approved .tag, .board-cr-final .tag { background: var(--green-light); color: var(--green-dark); }
.board-inv-paid .tag { background: var(--green); color: var(--white); }

/* pipeline as the field app's segmented bar */
.page .pipeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.page .pipeline li {
  flex: 1 1 0;
  min-width: 96px;
  text-align: center;
  border-radius: var(--radius-xs);
  padding: 9px 6px 8px;
  background: var(--cream-mid);
  border: 1px solid transparent;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page .pipeline li.is-shown { background: var(--green-light); border-color: var(--green); }
.page .pipeline a {
  text-decoration: none;
  color: var(--gray);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page .pipeline .count { display: block; font-size: 20px; font-weight: bold; color: var(--green-dark); letter-spacing: 0; margin: 0 0 2px; background: none; padding: 0; }
.page .pipeline .pipeline-sum { font-size: 11px; color: var(--green-dark); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* revenue: tiles + the field app's bar */
.rev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }
.rev-grid > div { background: var(--cream-mid); border-radius: var(--radius-xs); padding: 10px 12px; margin: 0; }
.rev-grid > div:first-child { background: var(--green); }
.rev-grid > div:first-child dt, .rev-grid > div:first-child dd { color: var(--white); }
.rev-grid dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); }
.rev-grid dd.figure { margin: 2px 0 0; font-size: 18px; font-weight: bold; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.rev-bar { background: var(--green-light); border-radius: 4px; height: 8px; margin: 12px 0 4px; overflow: hidden; }
.rev-bar-fill { background: var(--green); border-radius: 4px; height: 8px; }

.report-list { list-style: none; margin: 0; padding: 0; }
.report-list li { padding: 8px 0 8px 10px; border-left: 4px solid var(--amber); background: var(--amber-light); border-radius: var(--radius-xs); margin: 0 0 6px; font-size: 13px; }

@media (max-width: 600px) {
  .banner-inner { flex-direction: column; align-items: flex-start; }
  .nav { margin-left: 0; }
  .kpi-grid, .rev-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi .val { font-size: 20px; }
  .card { padding: 14px; }
  .page .board-row { grid-template-columns: 1fr; grid-template-areas: "name" "tag" "next" "at"; }
  .page .board-next { justify-self: stretch; justify-content: center; }
  .page .board-row > .small { justify-self: start; }
}

/* headings that share a row with buttons carry no rule of their own */
.toolbar h1, .toolbar h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.toolbar { border-bottom: 1px solid var(--cream-dark); padding-bottom: 8px; margin-bottom: 10px; }
.card > .toolbar:first-child + * { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════
   E-11b — the quality bar (Martin, 2026-10-05): one spacing scale, one
   type scale, money that looks like money, designed states, touch-first
   targets, visible focus and pressed states. Shared by every screen; the
   screens refine on top. Sits after E-11a and wins the cascade.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --radius-md: 12px;
  /* spacing scale — nothing else */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* type scale — app text, not document text */
  --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-base: 15px; --t-lg: 17px; --t-xl: 21px;
  --red-light: #f6e9e7;
  --focus: 0 0 0 3px rgba(74, 103, 65, 0.35);
  --ease: 120ms ease-out;
}

/* ---- rhythm: cards and their parts sit on the scale ---- */
.card + .card { margin-top: var(--s4); }
.page > * + * { margin-top: var(--s4); }
.card > p, .card > dl, .card > ul, .card > form { margin-top: 0; margin-bottom: var(--s3); }
.card > :last-child { margin-bottom: 0; }
.toolbar { align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); padding-bottom: var(--s2); }
.toolbar-actions, .toolbar .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; }
.crumbs { font-size: var(--t-sm); margin: 0 0 var(--s2); color: var(--gray); }
.crumbs a { color: var(--gray); }
.crumbs a:hover { color: var(--green-dark); }
.count { font-size: var(--t-sm); color: var(--gray); font-weight: normal; }
h2 .count { margin-left: var(--s1); }
.lede { font-size: var(--t-md); color: var(--charcoal); }

/* ---- facts: a tidy grid of label / value ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3) var(--s5); margin: 0; }
.facts > div { margin: 0; min-width: 0; }
.facts dt { margin: 0 0 2px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts .facts-wide { grid-column: 1 / -1; }

/* ---- interaction: focus you can see, hover on desktop, a pressed state ---- */
a, .button, .linkbutton, button, .nav a, .tap span, .rec, .kpi { transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease); }
a:focus-visible, button:focus-visible, .button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-xs); }
.banner a:focus-visible, .banner button:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
.button:active, .board-next:active, .chip:active { transform: translateY(1px); }
.button-quiet:active { background: var(--gray-light); }
.field input:focus, .field select:focus, .field textarea:focus,
.searchbar input:focus, .searchbar select:focus { outline: none; border-color: var(--green); box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- buttons: one primary per screen; quiet; destructive set apart ---- */
.linkbutton { font-family: Georgia, serif; }
.button-danger { background: var(--white); color: var(--red); border: 1px solid #d9b8b2; }
.button-danger:hover { background: var(--red-light); color: var(--red); border-color: var(--red); }
.linkbutton-danger { color: var(--red); border-bottom-color: rgba(138, 58, 47, 0.45); font-size: var(--t-md); }
.linkbutton-danger:hover { color: var(--red); border-bottom-color: var(--red); }
.danger-zone { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--cream-dark); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.danger-zone .muted { flex: 1 1 200px; margin: 0; font-size: var(--t-sm); }
.cancel { font-size: var(--t-md); color: var(--gray); }
.cancel:hover { color: var(--charcoal); }

/* small file chips (.docx / .pdf / record) */
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--cream-dark); border-radius: 14px; background: var(--cream); color: var(--green-dark); font-size: var(--t-sm); text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--green-mid); background: var(--green-light); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }

/* ---- status pills: every status has a colour ---- */
.tag-draft, .tag-closed, .tag-rental, .tag-type { background: var(--cream-dark); color: var(--charcoal); }
.tag-active, .tag-accepted { background: var(--green-light); color: var(--green-dark); }
.tag-deactivated, .tag-overdue { background: var(--red-light); color: var(--red); }
.tag-viewonly { background: rgba(255, 255, 255, 0.18); color: var(--white); }
h1 .tag, h2 .tag { margin-left: var(--s2); font-size: 10px; position: relative; top: -2px; }

/* ---- money: tabular, right-aligned, totals heavier ---- */
.num, .money { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table th.num { text-align: right; }
.money-total { font-weight: bold; color: var(--green-dark); }

/* ---- tables: quiet rows, hover on desktop, scroll only inside the wrap ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (hover: hover) { .table tbody tr:hover td { background: var(--cream); } }
.table td a { font-weight: bold; text-decoration: none; }
.table td a:hover { text-decoration: underline; }

/* ---- record rows: the field app's job rows, for lists that must read on a phone ---- */
.rec-list { list-style: none; margin: 0; padding: 0; }
.rec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title amt" "meta tag" "acts acts";
  gap: var(--s1) var(--s3);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px dotted var(--cream-dark);
}
.rec:first-child { padding-top: 0; }
.rec:last-child { border-bottom: 0; padding-bottom: 0; }
.rec-title { grid-area: title; font-size: var(--t-base); font-weight: bold; color: var(--green-dark); text-decoration: none; overflow-wrap: anywhere; }
a.rec-title:hover { text-decoration: underline; }
.rec-amt { grid-area: amt; font-size: var(--t-base); font-weight: bold; color: var(--charcoal); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rec-meta { grid-area: meta; font-size: var(--t-sm); color: var(--gray); min-width: 0; }
.rec > .tag { grid-area: tag; justify-self: end; }
.rec-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.rec-acts form { margin: 0; }

/* ---- designed empty states: say what to do next, with the button ---- */
.empty {
  border: 1px dashed var(--gray-light);
  border-radius: var(--radius-sm);
  background: var(--cream);
  padding: var(--s4);
  text-align: center;
  color: var(--gray);
  font-size: var(--t-md);
}
.empty p { margin: 0; }
.empty .button { margin-top: var(--s3); }

/* ---- notices: the "Saved ✓" pill feel ---- */
.notice { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-left-width: 4px; }
.notice-ok::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--green); color: var(--white); font-size: var(--t-sm); font-weight: bold; }
.notice-error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--red); color: var(--white); font-size: var(--t-sm); font-weight: bold; }
.readiness { font-size: var(--t-md); line-height: 1.5; border-left: 4px solid var(--amber); background: var(--amber-light); color: var(--charcoal); border-radius: var(--radius-xs); padding: var(--s2) var(--s3); margin: 0 0 var(--s3); }
.readiness code { font-size: var(--t-sm); }

/* ---- search bar: one height, one row ---- */
.searchbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; margin: 0 0 var(--s4); }
.searchbar input, .searchbar select { min-height: 40px; height: 40px; padding: 0 10px; font-size: 14px; border: 1px solid var(--gray-light); border-radius: var(--radius-xs); background: var(--white); font-family: Georgia, serif; margin: 0; }
.searchbar input { flex: 1 1 220px; min-width: 0; }
.searchbar select { flex: 0 0 auto; }
.searchbar .button { min-height: 40px; height: 40px; padding-top: 0; padding-bottom: 0; margin: 0; }

/* ---- forms: one column on a phone; the save bar stays in reach ---- */
.form-grid fieldset legend { font-size: var(--t-md); font-weight: bold; color: var(--green-dark); text-transform: none; letter-spacing: 0; }
.hint { font-size: var(--t-sm); color: var(--gray); margin: var(--s1) 0 0; }
.field-msg { font-size: var(--t-sm); color: var(--red); margin: var(--s1) 0 0; }
.field-error input, .field-error select, .field-error textarea { border-color: var(--red); background: #fffafa; }
.alert { background: var(--red-light); color: var(--red); border-left: 4px solid var(--red); padding: var(--s2) var(--s3); }
.actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ---- home reports on the client page ---- */
#home-reports .report-list .report-seen { border-left-color: var(--cream-dark); background: var(--cream); }
#home-reports .report-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); padding: var(--s2) var(--s3); }
#home-reports .report-list form { margin: 0 0 0 auto; }
.link-line { font-size: var(--t-sm); color: var(--gray); overflow-wrap: anywhere; }

/* ---- the fridge-QR tap form: Tool 1's chips, big and calm ---- */
.tapform h1 { font-size: var(--t-xl); }
.taps { gap: var(--s2); margin-top: var(--s5); }
.taps legend { font-size: var(--t-lg); margin-bottom: var(--s2); }
.tap span { min-height: 56px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-light); border-radius: var(--radius-sm); font-size: var(--t-base); padding: var(--s3); line-height: 1.3; }
.tap:hover span { border-color: var(--green-mid); }
.tap input:checked + span { background: var(--green-light); color: var(--green-dark); border: 2px solid var(--green); font-weight: bold; padding: 11px; }
.tap input:focus-visible + span { outline: none; box-shadow: var(--focus); }
.tap-send { min-height: 52px; font-size: var(--t-lg); margin-top: var(--s5); }

/* ---- phone: 44 px targets, one column, the save bar sticks ---- */
@media (max-width: 600px) {
  .button, .searchbar .button, .searchbar input, .searchbar select, .field input, .field select { min-height: 44px; height: auto; }
  .searchbar input, .searchbar select { height: 44px; }
  .button-small { min-height: 40px; }
  .nav a, .signout .linkbutton { min-height: 40px; display: inline-flex; align-items: center; }
  .linkbutton { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 36px; padding: 4px 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .hide-sm { display: none; }
  .toolbar .button, .toolbar-actions .button { flex: 0 0 auto; }
  .actionbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--white);
    border-top: 1px solid var(--cream-dark);
    margin: var(--s4) -14px -14px;
    padding: var(--s3) 14px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }
  .actionbar .button { flex: 1 1 auto; }
  .rec-acts .button { flex: 1 1 auto; }
}
.nowrap { white-space: nowrap; }
.table td a.tel { font-weight: normal; }
.rec-meta .clip { display: inline; }
.doc-id { overflow-wrap: anywhere; }
/* documents: the type pill sits top right, the file chips under the meta */
.rec > .tag-type { grid-area: amt; }
.rec-files { grid-area: tag; justify-self: end; }
.rec-meta a { color: var(--gray); }
.rec-meta a:hover { color: var(--green-dark); }
@media (max-width: 600px) {
  .rec-doc { grid-template-areas: "title amt" "meta meta" "tag tag"; }
  .rec-files { justify-self: start; }
}

/* ---- assessment findings: the field app's item cards ---- */
#items .findings { list-style: none; margin: 0; padding: 0; counter-reset: finding; }
#items .findings .finding {
  counter-increment: finding;
  position: relative;
  margin: 0 0 var(--s3);
  padding: var(--s3) var(--s4) var(--s3) 44px;
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  background: var(--white);
}
#items .findings .finding:last-child { margin-bottom: 0; }
#items .findings .finding::before {
  content: counter(finding);
  position: absolute;
  left: 12px;
  top: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: var(--t-xs);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
#items .findings .finding-editing { border-color: var(--green); box-shadow: var(--focus); outline: none; }
#items .finding-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.finding-room { font-size: var(--t-base); color: var(--green-dark); }
#items .finding-head .tag { flex: none; margin-top: 2px; }
.finding-meta { font-size: var(--t-sm); color: var(--gray); margin: 2px 0 0; }
.finding-text { font-size: 14px; margin: var(--s2) 0 0; }
.finding-rec { font-size: 14px; margin: var(--s2) 0 0; padding: var(--s2) var(--s3); background: var(--green-light); border-radius: var(--radius-xs); }
.finding-rec .label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-dark); font-weight: bold; display: block; }
.finding-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.finding-acts form { margin: 0; }
.why-off { flex-basis: 100%; text-align: right; font-size: var(--t-sm); color: var(--gray); margin: 0; }
.danger-zone-solo { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 600px) { .why-off { text-align: left; } }

/* ---- totals: money that reads like money; the total is the heaviest line ---- */
.totals-row > span:last-child { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.totals-row { font-size: 14px; padding: var(--s2) var(--s1); }
.totals-total { font-size: var(--t-lg); font-weight: bold; }
.row-credit td { color: var(--gray); }
.group-title { margin: var(--s5) 0 var(--s2); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-dark); }
.card > h2 + .group-title, .card > .muted + .group-title { margin-top: var(--s3); }

/* view-only logins see no actions, so no explanations for missing ones */
.readonly .danger-zone, .readonly .why-off { display: none; }

/* ════════════════════════════════════════════════════════════════════
   E-11b part 2 — the builder screens (work order / quote, completion
   report, invoice) on the same quality bar: tables that turn into
   labelled rows on a phone, numbered item cards, editors that stay
   folded until they are needed, the signature chain as steps, and the
   in-app confirm sheet that replaces the browser's dialog.
   ════════════════════════════════════════════════════════════════════ */

/* ---- the headline figure on a builder's first card ---- */
.doc-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  margin: 0 0 var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-sm);
}
.doc-figure .lbl { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); flex-basis: 100%; }
.doc-figure .val { font-size: 26px; font-weight: bold; color: var(--green-dark); font-variant-numeric: tabular-nums; line-height: 1.15; }
.doc-figure .sub { font-size: var(--t-sm); color: var(--gray); }
.doc-meta { font-size: var(--t-md); color: var(--gray); margin: 0 0 var(--s3); }
.doc-meta a { color: var(--gray); }
.doc-meta a:hover { color: var(--green-dark); }
.doc-meta .sep { color: var(--gray-light); margin: 0 var(--s1); }
.date-pending { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--amber-light); color: var(--amber); font-size: var(--t-sm); }

/* ---- folded editors: the list first, the form one tap away ---- */
.editor { margin: var(--s4) 0 0; border: 1px solid var(--cream-dark); border-radius: var(--radius-sm); background: var(--white); }
.editor > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s4);
  font-size: 14px;
  font-weight: bold;
  color: var(--green-dark);
  border-radius: var(--radius-sm);
}
.editor > summary::-webkit-details-marker { display: none; }
.editor > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 15px;
  line-height: 1;
  transition: transform var(--ease);
}
.editor[open] > summary::before { content: "–"; }
.editor > summary .hint { font-weight: normal; margin: 0 0 0 auto; }
@media (hover: hover) { .editor > summary:hover { background: var(--cream); } }
.editor[open] > summary { border-bottom: 1px solid var(--cream-dark); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.editor > .form, .editor > .editor-body { padding: var(--s3) var(--s4) var(--s4); margin: 0; }
.editor .form fieldset { border: 0; padding: 0; margin: 0; }
.editor .form fieldset > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.editor .form + .form { border-top: 1px dotted var(--cream-dark); }
.editor-editing { border-color: var(--green); box-shadow: var(--focus); }

/* ---- numbered item cards: scope rows, vendor notes ---- */
.icards { list-style: none; margin: 0; padding: 0; }
.icard {
  position: relative;
  margin: 0 0 var(--s3);
  padding: var(--s3) var(--s4) var(--s3) 48px;
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.icard:last-child { margin-bottom: 0; }
.icard-n {
  position: absolute;
  left: 12px;
  top: 13px;
  min-width: 24px;
  height: 22px;
  padding: 0 4px;
  border-radius: 11px;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: var(--t-xs);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icard-out .icard-n { background: var(--cream-dark); color: var(--gray); }
.icard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.icard-title { font-size: var(--t-base); color: var(--green-dark); overflow-wrap: anywhere; }
.icard-qty { flex: none; font-size: var(--t-sm); color: var(--charcoal); background: var(--cream); border: 1px solid var(--cream-dark); border-radius: 10px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.icard-text { font-size: 14px; margin: var(--s1) 0 0; }
.icard-spec { font-size: var(--t-md); color: var(--gray); margin: var(--s2) 0 0; padding-left: var(--s3); border-left: 2px solid var(--cream-dark); }
.icard-why { font-size: var(--t-md); margin: var(--s2) 0 0; padding: var(--s2) var(--s3); background: var(--cream); border-radius: var(--radius-xs); }
.icard-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.icard-acts form { margin: 0; }
.icard-acts a { font-size: var(--t-md); }
.icard-editing { border-color: var(--green); box-shadow: var(--focus); }
.subhead { margin: var(--s5) 0 var(--s2); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); }

/* ---- lines tables: one look on a laptop; labelled rows on a phone ---- */
.table-lines td:first-child, .table-actuals td:first-child { min-width: 180px; }
.line-sub { font-size: var(--t-sm); color: var(--gray); margin-top: 2px; }
.line-auto { font-size: var(--t-sm); color: var(--gray); font-style: italic; }
.cell-acts { white-space: nowrap; text-align: right; }
.cell-acts a, .cell-acts .linkbutton { font-size: var(--t-md); font-weight: normal; }
/* every group's table on one grid, so the money columns line up down the page */
@media (min-width: 601px) {
  .table-lines { table-layout: fixed; }
  .table-lines th:nth-child(1) { width: 36%; }
  .table-lines th:nth-child(2) { width: 23%; }
  .table-lines th:nth-child(3) { width: 8%; }
  .table-lines th:nth-child(4) { width: 11%; }
  .table-lines th:nth-child(5) { width: 10%; }
  .table-lines td { overflow-wrap: anywhere; }
  .table-lines td.num { overflow-wrap: normal; }
  .table-actuals { table-layout: fixed; }
  .table-actuals th:nth-child(1) { width: 29%; }
  .table-actuals th:nth-child(2), .table-actuals th:nth-child(4), .table-actuals th:nth-child(5), .table-actuals th:nth-child(6), .table-actuals th:nth-child(7) { width: 9.5%; }
  .table-actuals th:nth-child(3) { width: 7%; }
}
.cell-acts form { display: inline; margin: 0 0 0 var(--s3); }

@media (max-width: 600px) {
  /* Each row becomes a small card: the item across the top, then the figures
     three to a row with their labels above them, then the row's actions. */
  .stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stack-sm, .stack-sm tbody, .stack-sm tfoot { display: block; width: 100%; }
  .stack-sm tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); padding: var(--s3) 0; border-bottom: 1px dotted var(--cream-dark); }
  .stack-sm tr:last-child { border-bottom: 0; }
  .stack-sm td { display: block; border: 0; padding: 0; text-align: left; min-width: 0; }
  .stack-sm td.num { text-align: left; }
  .stack-sm td.cell-total { text-align: right; }
  .table-actuals.stack-sm td.cell-total { text-align: left; }
  .stack-sm td.cell-sm-hide { display: none; }
  .stack-sm td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); font-weight: normal; font-style: normal; }
  .stack-sm td.cell-main, .stack-sm td.cell-wide, .stack-sm td.cell-acts, .stack-sm td.cell-full { grid-column: 1 / -1; }
  .stack-sm td.cell-main { font-size: 14px; font-weight: bold; color: var(--charcoal); min-width: 0; }
  .stack-sm td.cell-main .line-sub, .stack-sm td.cell-main .muted, .stack-sm td.cell-main .confirm { font-weight: normal; }
  .stack-sm td.cell-total { font-weight: bold; color: var(--charcoal); }
  .stack-sm td:empty, .stack-sm td.cell-blank { display: none; }
  .stack-sm .row-n { display: inline-flex; }
  .stack-sm td.cell-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); white-space: normal; }
  .stack-sm td.cell-acts form { margin: 0; }
  .stack-sm input[type="text"], .stack-sm select { width: 100%; max-width: none; min-width: 0; min-height: 44px; }
  .stack-sm tr.row-editing { background: var(--offwhite); box-shadow: inset 3px 0 0 var(--green); padding-left: var(--s3); }
  .stack-sm .row-editing td { outline: none; background: transparent; }
  .stack-sm tr.row-error { background: var(--red-light); padding-left: var(--s3); padding-right: var(--s3); }
  .stack-sm tr.row-error td { background: transparent; }
  .table-wrap:has(> .stack-sm) { overflow: visible; }

  /* links and link buttons in a row of actions: the same height, the same underline */
  .icard-acts .linkbutton, .cell-acts .linkbutton, .danger-zone .linkbutton { border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .icard-acts a, .cell-acts a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
  .editor .actionbar, .approve-box .actionbar, .card form:not(:last-child) > .actionbar { margin: var(--s4) 0 0; padding-left: 0; padding-right: 0; border-radius: 0; }
  .editor .actionbar { margin: var(--s4) calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding-left: var(--s4); padding-right: var(--s4); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
}

.row-n { display: none; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; margin-right: var(--s2); border-radius: 11px; background: var(--green-light); color: var(--green-dark); font-size: var(--t-xs); font-weight: bold; vertical-align: 2px; }

/* ---- totals block: sits right on a laptop, full width on a phone ---- */
.totals { margin-top: var(--s4); }
.totals-row { gap: var(--s3); }
.totals-muted { font-size: var(--t-md); }
@media (max-width: 600px) { .totals { max-width: none; } }

/* ---- signature chain as steps ---- */
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding: 0 0 var(--s4) 32px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--gray-light);
  background: var(--white);
  box-sizing: border-box;
}
.step::after { content: ""; position: absolute; left: 13px; top: 22px; bottom: 2px; width: 2px; background: var(--cream-dark); }
.step:last-child::after { display: none; }
.step-done::before { background: var(--green); border-color: var(--green); }
.step-next::before { border-color: var(--amber); background: var(--amber-light); }
.step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.step-name { font-size: 14px; }
.step-detail { font-size: var(--t-md); color: var(--gray); margin: 2px 0 0; }
.step .editor { margin-top: var(--s2); }
.approve-box { margin-top: var(--s4); padding: var(--s4); border: 1px solid var(--green); border-radius: var(--radius-sm); background: var(--green-light); }
.approve-box h3 { margin: 0 0 var(--s1); font-size: var(--t-lg); color: var(--green-dark); }
.approve-box .form fieldset { border: 0; padding: 0; margin: 0; background: transparent; }
.approve-box .form fieldset > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- document card: activity as quiet chips ---- */
.doc-log { list-style: none; margin: var(--s2) 0 0; padding: 0; font-size: var(--t-sm); color: var(--gray); }
.doc-log li { padding: 2px 0; }
.doc-log .what { color: var(--charcoal); }

/* ---- invoice: the pay-online link as a tidy box ---- */
.paylink { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3); background: var(--cream); border: 1px solid var(--cream-dark); border-radius: var(--radius-sm); margin: 0 0 var(--s3); }
.paylink .link-line { flex: 1 1 220px; }

/* ---- the in-app confirm sheet (replaces the browser's confirm box) ---- */
.confirm-sheet {
  border: 0;
  padding: 0;
  max-width: 420px;
  width: calc(100% - 32px);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--charcoal);
  box-shadow: 0 18px 48px rgba(51, 50, 46, 0.28);
  font-family: Georgia, serif;
}
.confirm-sheet::backdrop { background: rgba(51, 50, 46, 0.45); }
.confirm-sheet[open] { animation: sheet-in 140ms ease-out; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.confirm-body { padding: var(--s5) var(--s5) var(--s4); }
.confirm-title { margin: 0 0 var(--s2); font-size: var(--t-lg); color: var(--green-dark); }
.confirm-text { margin: 0; font-size: 14px; line-height: 1.5; }
.confirm-acts { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--cream-dark); background: var(--cream); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.confirm-acts .button { margin: 0; }
.confirm-danger .confirm-title { color: var(--red); }
.confirm-danger .confirm-ok { background: var(--red); border-color: var(--red); color: var(--white); }
.confirm-danger .confirm-ok:hover { background: #6f2e25; border-color: #6f2e25; }
@media (max-width: 600px) {
  .confirm-sheet { margin: auto auto 0; width: 100%; max-width: none; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .confirm-acts { border-radius: 0; padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
  .confirm-acts .button { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .confirm-sheet[open] { animation: none; } }

/* E-10a: what a private quote really pays */
.insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.insight { padding: var(--s3); border: 1px solid var(--cream-dark); border-radius: var(--radius-sm); background: var(--cream); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.insight .lbl { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); }
.insight .val { font-size: var(--t-lg); font-weight: bold; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.insight .sub { font-size: var(--t-sm); color: var(--gray); }
.insight-up { border-color: var(--green-mid); background: var(--green-light); }
@media (max-width: 600px) { .insights { grid-template-columns: 1fr 1fr; } }

/* ---- E-10a: Your rates ---- */
.editor-body { padding: var(--s3) var(--s4); }
.ranges { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: 4px; }
.ranges li { display: flex; gap: var(--s3); font-size: var(--t-sm); }
.range-val { min-width: 8.5em; font-weight: bold; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.table-items input[type="text"], .table-items select { width: 100%; min-height: 40px; }
.table-items td.num input { text-align: right; max-width: 8em; }
.row-pasted td { background: var(--green-light); }
.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.sample { padding: var(--s3); border: 1px solid var(--cream-dark); border-radius: var(--radius-sm); background: var(--cream); min-width: 0; }
.sample h3 { margin: 0 0 var(--s2); font-size: var(--t-sm); }
.sample-total { margin: 0 0 var(--s2); display: flex; justify-content: space-between; align-items: baseline; }
.sample-total strong { font-size: var(--t-lg); color: var(--green-dark); font-variant-numeric: tabular-nums; }
.sample-facts { margin: 0; display: grid; gap: 2px; font-size: var(--t-sm); }
.sample-facts > div { display: flex; justify-content: space-between; gap: var(--s2); }
.sample-facts dt { color: var(--gray); }
.sample-facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.insight-note { color: var(--green-dark); font-weight: bold; }
.notice-warn { background: var(--cream); border-left: 4px solid var(--gray); }
@media (max-width: 760px) { .samples { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .table-items thead { display: none; }
  .table-items tr { display: grid; grid-template-columns: 32px 1fr 1fr; gap: 6px var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--cream-dark); }
  .table-items td { display: block; padding: 0; border: 0; }
  .table-items td::before { content: none; }
  .table-items td:nth-child(1) { grid-row: 1 / 3; padding-top: 10px; }
  .table-items td:nth-child(2) { grid-column: 2 / 4; }
  .table-items td.num input { max-width: none; }
}
/* E-9a: change order status pills */
.tag-co-draft { background: var(--cream-dark); color: var(--charcoal); }
.tag-co-sent { background: var(--amber-light); color: var(--amber); }
.tag-co-approved { background: var(--green-light); color: var(--green-dark); }
.tag-co-declined, .tag-co-void { background: var(--red-light); color: var(--red); }

/* ---- E-10b: setup steps, invite link ---- */
.setup-steps { list-style: none; display: flex; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; counter-reset: step; font-size: var(--t-sm); }
.setup-steps li { counter-increment: step; display: flex; align-items: center; gap: 6px; color: var(--gray); }
.setup-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cream-dark); color: var(--charcoal); font-weight: bold; }
.setup-steps li + li::after { content: none; }
.setup-steps li.current { color: var(--green-dark); font-weight: bold; }
.setup-steps li.current::before { background: var(--green); color: var(--white); }
.setup-steps li.done::before { content: "✓"; background: var(--green-light); color: var(--green-dark); }
.invite-link { display: block; }
.copy-field { width: 100%; font-family: monospace; font-size: 13px; min-height: 40px; }

/* ---- E-12a: OT report review rows ---- */
.review-rows { gap: var(--s3); }
.review-row { transition: opacity 120ms ease, border-color 120ms ease; }
.review-row .finding-head { align-items: center; }
.review-keep { margin: 0; min-height: 44px; align-items: center; }
.review-keep label { font-weight: bold; color: var(--green-dark); }
.review-source { pointer-events: none; }
.review-fields { margin-top: var(--s2); }
.review-row-off { opacity: 0.55; }
.review-row-off .review-fields { display: none; }
.review-row-flag { border-left: 4px solid var(--red); }
.review-warn { margin: var(--s2) 0 0; padding: var(--s1) var(--s2); background: var(--red-light); color: var(--red); border-radius: var(--radius-xs); font-size: var(--t-sm); }
.review-warn-soft { background: var(--amber-light); color: var(--amber); }
@media (min-width: 760px) {
  .review-fields, .review-header { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 var(--s3); align-items: start; }
  .review-fields > .field, .review-header > .field { grid-column: auto; }
  .review-fields > .field:has(textarea) { grid-column: 1 / -1; }
  .review-header > legend { grid-column: 1 / -1; }
  .review-header { grid-template-columns: 1fr 1.5fr 2fr; }
}
.review-source-rule { background: var(--green-light); border-color: var(--green-mid); color: var(--green-dark); }
.review-source-ai { background: var(--amber-light); border-color: var(--amber); color: var(--amber); }
.ai-offer { border: 1px dashed var(--green-mid); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; background: var(--cream); }
.ai-offer p { margin: 0 0 8px; }

/* ---- E-12b: reading rules ---- */
.rule-list .rule { padding: var(--s3) 0; border-bottom: 1px solid var(--cream-dark); }
.rule-list .rule:last-child { border-bottom: 0; }
.rule-phrase { margin: 0; font-style: italic; color: var(--charcoal); }
.rule-does { margin: var(--s1) 0 0; font-weight: bold; color: var(--green-dark); font-size: var(--t-sm); }
.rule-off { opacity: 0.7; }
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list .finding-acts { margin-top: var(--s2); }
.rule-list .finding-rec { margin-top: var(--s2); }
.tag-suggested { background: var(--amber-light); color: var(--amber); font-size: var(--t-xs); white-space: normal; }
.usual-lines { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--cream); border-radius: var(--radius-xs); font-size: var(--t-sm); }
.usual-lines .label { margin: 0 0 var(--s1); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-dark); font-weight: bold; }
.usual-lines ul { margin: 0 0 var(--s1); padding-left: 1.1rem; }
/* E-12e: the job files link */
.job-files { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3); }
@media (min-width: 760px) { .review-header > .review-link { grid-column: 1 / -1; } }
.back-to-draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
/* E-12h: documents on an assessment */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { padding: var(--s2) 0; border-bottom: 1px solid var(--cream-dark); }
.doc-list li:last-child { border-bottom: 0; }
.finding-source { color: var(--green-dark); }
/* E-12f: site-visit photos */
.photo-strip { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; padding: 0; }
.photo-strip li { display: flex; flex-direction: column; gap: 2px; width: 120px; }
.photo-strip img { display: block; width: 120px; height: auto; border-radius: var(--radius-xs); border: 1px solid var(--cream-dark); background: var(--cream); }
.photo-caption { font-size: var(--t-xs); color: var(--gray); }
.photo-remove .linkbutton { font-size: var(--t-xs); min-height: 32px; }
.photo-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.photo-pick { cursor: pointer; position: relative; }

/* E-12c2 — the Home for Life form's page picker. */
.hfl-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.hfl-page { display: grid; gap: var(--s1); justify-items: center; padding: var(--s2); border: 2px solid var(--rule); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; min-height: 44px; transition: border-color 120ms ease; }
.hfl-page:hover { border-color: var(--gray-light); }
.hfl-page canvas { width: 100%; height: auto; display: block; }
.hfl-page input { width: 24px; height: 24px; margin: 0; }
.hfl-page span { font-size: var(--t-md); }
.hfl-page-on, .hfl-page-on:hover { border-color: var(--green); background: var(--green-light); }

/* G-1 — the Project page and the client page's Projects card. */
.project-move { margin: 0 0 var(--s3); }
.project-move select { min-width: 200px; }
.project-move .hint { flex-basis: 100%; margin: 0; }
.project-close { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.project-edit { margin-top: var(--s3); }
.project-edit > summary { cursor: pointer; font-size: var(--t-md); color: var(--green-dark); }
.project-edit > form { margin-top: var(--s3); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text when" "who when";
  gap: 2px var(--s3);
  align-items: start;
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 3px solid var(--cream-dark);
}
.timeline-row + .timeline-row { border-top: 1px dotted var(--cream-dark); }
.timeline-stage { border-left-color: var(--green); }
.timeline-opened { border-left-color: var(--green-dark); }
.timeline-earlier { border-left-style: dashed; }
.timeline-text { grid-area: text; font-size: var(--t-base); color: var(--charcoal); }
.timeline-stage .timeline-text { font-weight: bold; color: var(--green-dark); }
.timeline-when { grid-area: when; font-size: var(--t-sm); color: var(--gray); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline-who { grid-area: who; font-size: var(--t-xs); color: var(--gray); }
.timeline-earlier .timeline-who { font-style: italic; }
.project-line { font-size: var(--t-sm); color: var(--gray); margin: calc(-1 * var(--s2)) 0 var(--s3); }
.project-line a { color: var(--green-dark); font-weight: bold; text-decoration: none; }
.project-line a:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .timeline-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "text" "who"; }
  .timeline-when { white-space: normal; }
}

/* G-2 — the home screen's tabs and the Pipeline board. */
.tabs { display: flex; gap: var(--s1); margin: 0 0 var(--s3); border-bottom: 1px solid var(--cream-dark); }
.tab { padding: var(--s2) var(--s3); font-size: var(--t-md); color: var(--gray); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; min-height: 44px; display: inline-flex; align-items: center; }
.tab:hover { color: var(--green-dark); }
.tab.is-active { color: var(--green-dark); font-weight: bold; border-bottom-color: var(--green); }
.board-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.board-filter { display: flex; gap: var(--s2); }
.board-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 18px; border: 1px solid var(--cream-dark); background: var(--white); color: var(--charcoal); text-decoration: none; font-size: var(--t-sm); }
.board-chip:hover { border-color: var(--green-mid); }
.board-chip.is-active { background: var(--green); border-color: var(--green-dark); color: var(--white); }
.board-chip.is-active .count { color: rgba(255, 255, 255, 0.85); }
.board-picker { display: none; align-items: center; gap: var(--s2); margin: 0; }
.board-wrap { margin-top: var(--s4); }
.board-columns { display: flex; align-items: stretch; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); scroll-snap-type: x proximity; }
.board-col { flex: 1 0 240px; max-width: 360px; background: var(--cream); border: 1px solid var(--cream-dark); border-radius: var(--radius-sm); padding: var(--s2) var(--s2) var(--s3); min-height: 160px; scroll-snap-align: start; }
/* An empty stage folds to a labelled strip, so the columns with work get the width. */
.board-col.is-empty { flex: 0 0 44px; max-width: 44px; padding: var(--s2) 0; display: flex; justify-content: center; opacity: 0.8; }
.board-col.is-empty .board-col-title { writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; padding: 0; white-space: nowrap; font-size: var(--t-xs); color: var(--gray); }
.board-col.is-empty .board-none { display: none; }
.board-col.is-closed { background: var(--white); }
.board-col-title { margin: 0 0 var(--s2); padding: 0 var(--s1); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-dark); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.board-none { margin: 0; padding: 0 var(--s1); color: var(--gray-light); }
.board-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pcard { display: grid; gap: 2px; padding: var(--s2) var(--s3); background: var(--white); border: 1px solid var(--cream-dark); border-left: 4px solid var(--green); border-radius: var(--radius-xs); }
.pcard.is-stale { border-left-color: var(--amber); }
.pcard.is-overdue { border-left-color: var(--red); }
.pcard-name { font-weight: bold; color: var(--green-dark); text-decoration: none; font-size: var(--t-base); overflow-wrap: anywhere; }
.pcard-name:hover { text-decoration: underline; }
.pcard-title { font-size: var(--t-sm); color: var(--charcoal); }
.pcard-meta { font-size: var(--t-xs); color: var(--gray); }
.pcard.is-overdue .pcard-meta { color: var(--red); }
.pcard-handoff { font-size: var(--t-xs); color: var(--green-dark); }
.pcard-handoff.is-overdue { color: var(--red); font-weight: bold; }
.pcard-next { margin-top: var(--s1); font-size: var(--t-sm); color: var(--green-dark); text-decoration: none; font-weight: bold; justify-self: start; min-height: 32px; display: inline-flex; align-items: center; }
.pcard-next:hover { text-decoration: underline; }
.pcard-next-plain { color: var(--gray); font-weight: normal; }
@media (max-width: 760px) {
  .board-picker { display: flex; }
  .board-columns { display: block; overflow: visible; }
  .board-col, .board-col.is-empty { display: none; }
  .board-col.is-picked, .board-col.is-empty.is-picked { display: block; flex: none; max-width: none; padding: var(--s2) var(--s2) var(--s3); opacity: 1; }
  .board-col.is-empty.is-picked .board-col-title { writing-mode: horizontal-tb; transform: none; font-size: var(--t-sm); color: var(--green-dark); margin: 0 0 var(--s2); padding: 0 var(--s1); }
  .board-col.is-empty.is-picked .board-none { display: block; }
}

/* G-3 — handoffs and clocks on the Project page. */
.handoff-open { padding: var(--s3); border-left: 4px solid var(--green); background: var(--green-light); border-radius: var(--radius-xs); margin-bottom: var(--s3); }
.handoff-open.is-overdue { border-left-color: var(--red); background: #f6e9e7; }
.handoff-line { margin: 0 0 var(--s1); }
.handoff-note { margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--charcoal); }
.handoff-new > summary { cursor: pointer; color: var(--green-dark); font-size: var(--t-md); }
.handoff-new > form { margin-top: var(--s3); }
.table.clocks { margin-top: var(--s3); }
.table.clocks tr.is-current td { font-weight: bold; color: var(--green-dark); }

/* G-5 — checkbox rows on the company forms. */
.check { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s1) 0; font-size: var(--t-md); line-height: 1.4; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; }
.request-facts { margin: 0 0 var(--s3); }
.contact-new > summary { cursor: pointer; color: var(--green-dark); font-size: var(--t-md); }
.contact-new > form { margin-top: var(--s3); }

/* G-6a — forms. */
.form-actions { margin-top: var(--s3); }
.table.form-fields input[type="text"], .table.form-fields select { width: 100%; min-width: 0; }
.form-fill .fill-page { border: 1px solid var(--cream-dark); border-radius: var(--radius-sm); padding: var(--s3); margin: 0 0 var(--s4); }
.form-fill .fill-page legend { font-size: var(--t-sm); color: var(--gray); padding: 0 var(--s1); }
.form-fill .label { display: block; font-weight: bold; margin-bottom: var(--s1); }
.sig { display: grid; gap: var(--s1); justify-items: start; }
.sig canvas { width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 180; border: 1px dashed var(--gray-light); border-radius: var(--radius-xs); background: var(--white); touch-action: none; }

/* G-6b — the form mapper: boxes over a blank form's pages (fractions of the page, so any width). */
.map-ai { display: grid; gap: var(--s1); justify-items: start; margin: var(--s2) 0; }
.map-help { margin-top: var(--s2); }
.map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s2) 0; position: sticky; top: 0; z-index: 3; background: var(--white); padding: var(--s1) 0; }
.map-bar [aria-pressed="true"] { background: var(--green); color: var(--white); border-color: var(--green); }
.map-editor { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(100%, 900px); max-height: 46vh; overflow: auto; z-index: 20; background: var(--cream); border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); padding: var(--s3); display: grid; gap: var(--s2); }
.map-editor[hidden] { display: none; }
.map-editing .map-pages { padding-bottom: 46vh; }
.map-editor-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s2); align-items: end; }
.map-editor label { display: grid; gap: 4px; font-size: 0.9rem; min-width: 0; }
.map-editor label.check { display: flex; align-items: center; gap: 6px; }
.map-editor input[type="text"], .map-editor select, .map-editor textarea { width: 100%; min-width: 0; }
.map-editor-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.map-pages { display: grid; gap: var(--s3); }
.map-page-wrap { margin: 0; display: grid; gap: 4px; }
.map-page { position: relative; width: 100%; max-width: 900px; border: 1px solid var(--rule); background: var(--white); user-select: none; -webkit-user-select: none; }
.map-page img { display: block; width: 100%; height: 100%; pointer-events: none; }
.map-adding .map-page { cursor: crosshair; touch-action: none; outline: 2px dashed var(--green); outline-offset: 2px; }
.map-box { position: absolute; border: 2px solid var(--green); background: rgba(74, 103, 65, 0.12); border-radius: 2px; cursor: move; touch-action: none; min-width: 6px; min-height: 6px; }
.map-box:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 1px; }
.map-box-on { border-color: #b5651d; background: rgba(181, 101, 29, 0.16); z-index: 2; }
.map-box-tag { position: absolute; left: -2px; bottom: 100%; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.3; padding: 0 4px; background: var(--green); color: var(--white); border-radius: 2px 2px 0 0; pointer-events: none; }
.map-box-on .map-box-tag { background: #b5651d; }
.map-handle { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: #b5651d; border: 2px solid var(--white); cursor: nwse-resize; touch-action: none; }
.map-checkbox .map-box-tag, .map-radio .map-box-tag { max-width: 180px; }
@media (max-width: 600px) {
  .map-box-tag { font-size: 10px; max-width: 140px; }
  .map-editor-row { grid-template-columns: 1fr 1fr; }
  .map-editor-row label:first-child { grid-column: 1 / -1; }
}
.map-del { color: #9b2c2c; border-color: #d9b3b3; }
.map-editor [hidden] { display: none !important; }

/* G-7 — fill screen: a peek at the agency's page, a photo box; the gate notice on the Project's Forms card. */
.fill-page-picture { margin: 0 0 var(--s3); }
.fill-page-picture summary { cursor: pointer; font-size: 0.9rem; color: var(--green); }
.fill-page-picture img { display: block; width: 100%; max-width: 640px; margin-top: var(--s2); border: 1px solid var(--rule); background: var(--white); }
.fill-photo { display: grid; gap: var(--s1); justify-items: start; }
.fill-photo img { max-width: 240px; max-height: 240px; border: 1px solid var(--rule); border-radius: var(--radius-xs); }
.form-gate { margin: var(--s2) 0; }
/* G-7: the fill screen's choices read as choices (a circle beside its word), and the signature's Clear is visible on a light card. */
.form-fill .field label.check { display: flex; flex-direction: row; align-items: center; gap: var(--s2); font-size: var(--t-md); text-transform: none; letter-spacing: 0; font-weight: normal; color: var(--ink); }
.form-fill .field label.check input { width: auto; margin: 0; flex: none; }
.form-fill .sig .linkbutton { color: var(--green); border-bottom-color: var(--green); }

/* G-12a — the contact log: big tap targets, two taps to log. */
.log-form { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.log-step { margin: var(--s2) 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: bold; color: var(--gray); }
.log-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.log-chip { position: relative; cursor: pointer; }
.log-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.log-chip span { display: grid; min-height: 44px; align-content: center; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 22px; background: var(--white); font-size: 0.95rem; line-height: 1.2; }
.log-chip small { font-size: 0.75rem; color: var(--gray); }
.log-chip input:checked + span { background: var(--green); border-color: var(--green); color: var(--white); }
.log-chip input:checked + span small { color: var(--cream); }
.log-chip input:focus-visible + span { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.log-chips-small .log-chip span { min-height: 38px; padding: 4px 12px; font-size: 0.9rem; }
.log-other { display: grid; gap: 4px; max-width: 360px; }
.log-other[hidden] { display: none; }
.log-more summary { cursor: pointer; color: var(--green); font-size: 0.9rem; }
.log-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.log-more-grid label { display: grid; gap: 4px; font-size: 0.9rem; min-width: 0; }
.log-more-grid .log-note { grid-column: 1 / -1; }
.log-more-grid input, .log-more-grid select, .log-more-grid textarea { width: 100%; min-width: 0; }
.log-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); }
.log-outcome { min-height: 48px; }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.log-entry { padding: var(--s2) 0 var(--s2) var(--s3); border-left: 3px solid var(--rule); border-bottom: 1px solid var(--rule); }
.log-entry.log-reached { border-left-color: var(--green); }
.log-entry.log-voicemail, .log-entry.log-no_answer, .log-entry.log-no_response { border-left-color: #c9a227; }
.log-meta { font-size: 0.82rem; color: var(--gray); margin-top: 2px; }
.log-late { color: #9b5a00; }
.log-name { color: var(--gray); }
.log-note-text { margin: 4px 0 0; white-space: pre-wrap; font-size: 0.92rem; }

/* G-12b — the Follow-up tab: red / amber / green rows, flag chips, filters. */
.fu-flags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.fu-flag-chip.has-count .count { background: #9b2c2c; color: var(--white); }
.fu-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.fu-filter label { display: grid; gap: 4px; font-size: 0.85rem; min-width: 0; }
.fu-filter select, .fu-filter input { min-width: 0; max-width: 100%; }
.fu-row td:first-child { border-left: 5px solid transparent; }
.fu-red td:first-child { border-left-color: #b03a2e; }
.fu-amber td:first-child { border-left-color: #c9a227; }
.fu-green td:first-child { border-left-color: var(--green); }
.fu-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--green); }
.fu-red .fu-dot { background: #b03a2e; }
.fu-amber .fu-dot { background: #c9a227; }
.fu-name { font-weight: bold; }
.fu-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fu-chip { font-size: 0.75rem; padding: 1px 8px; border-radius: 10px; background: #f6e3e1; color: #8a2a20; border: 1px solid #e6b8b2; }
.fu-red-text { color: #a12f24; }
.fu-amber-text { color: #8a6500; }
.fu-count { font-weight: bold; }
@media (max-width: 600px) {
  .fu-row td:first-child { border-left: 0; }
  .fu-row { border-left: 5px solid var(--green); }
  .fu-red { border-left-color: #b03a2e; }
  .fu-amber { border-left-color: #c9a227; }
}
/* G-12b — on a phone each job is one card: the name first, then one line per clock. */
@media (max-width: 600px) {
  .fu-table, .fu-table tbody { display: block; width: 100%; }
  .fu-table thead { display: none; }
  .fu-table tr.fu-row { display: block; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
  .fu-table tr.fu-row td { display: flex !important; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0 !important; border: 0 !important; background: none !important; width: auto !important; min-width: 0; text-align: right; overflow-wrap: anywhere; }
  .fu-table tr.fu-row td::before { content: attr(data-label); flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray); text-align: left; }
  .fu-table tr.fu-row td:first-child { display: block !important; text-align: left; padding-bottom: 6px !important; }
  .fu-table tr.fu-row td:first-child::before { content: none; }
  .fu-table .line-sub { display: block; }
}

/* G-8 — visits: the Today tab and the Project page's Visits card */
.day-nav { margin-left: auto; }
.today-group { margin-top: var(--s4); }
.today-who { font-size: var(--t-md); margin: 0; display: flex; align-items: center; gap: var(--s2); }
.today-list, .visit-list { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.today-visit { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--cream-dark); }
.today-visit p, .visit p { margin: 0; }
.today-when { font-weight: 600; }
.today-scope { margin-top: var(--s1) !important; }
.today-list > li:first-child { border-top: 0; }
.visit-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.today-done .today-what, .today-cancelled .today-what, .visit-done, .visit-cancelled { opacity: 0.7; }
.visit { padding: var(--s2) 0; border-top: 1px solid var(--cream-dark); }
.visit-new, .crew-new { margin-top: var(--s3); }
.crew { padding: var(--s2) 0; border-top: 1px solid var(--cream-dark); }
.libnote { padding: var(--s2) 0; border-top: 1px solid var(--cream-dark); }
.libnote-body { margin: var(--s1) 0 0; }
.libnote-new { margin-top: var(--s3); }
@media (max-width: 640px) {
  .today-visit { grid-template-columns: 1fr; gap: var(--s1); }
  .day-nav { margin-left: 0; }
}

/* F-7 — Settings → Features: one switch per add-on. */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.feature { border-bottom: 1px solid var(--rule); }
.feature-switch { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; padding: var(--s3) 0; cursor: pointer; }
.feature-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.feature-track { position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--cream-dark, #e8e5df); border: 1px solid var(--rule); transition: background 0.15s; margin-top: 2px; }
.feature-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: left 0.15s; }
.feature-switch input:checked + .feature-track { background: var(--green); border-color: var(--green); }
.feature-switch input:checked + .feature-track::after { left: 23px; }
.feature-switch input:focus-visible + .feature-track { outline: 3px solid var(--green-dark); outline-offset: 2px; }
.feature-switch input:disabled + .feature-track { opacity: 0.6; }
.feature-text { display: grid; gap: 2px; min-width: 0; }
.feature-state { font-size: 0.8rem; color: var(--gray); }
.feature.is-on .feature-state { color: var(--green); font-weight: bold; }
.feature-hint { font-size: 0.9rem; color: var(--ink); }
.feature-sub { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.5rem 0 0 3.6rem; font-size: 0.9rem; }
.feature-sub input { margin-top: 0.2rem; }
.feature-blocked { font-size: 0.85rem; color: #8a6500; }

/* G-9 — the client link: the job's card, and the client's own page. */
.share-url { display: flex; gap: var(--s2); align-items: center; margin: var(--s2) 0; }
.share-url input { flex: 1; min-width: 0; font-size: 0.85rem; }
.share-acts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.share-add { display: grid; gap: var(--s2); margin-top: var(--s2); justify-items: start; }
.share-add-row { display: flex; flex-wrap: wrap; gap: var(--s2); width: 100%; }
.share-add-row input { flex: 1 1 160px; min-width: 0; }
.client-link { max-width: 720px; margin-left: auto; margin-right: auto; }
.client-link-from { margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray); }
.client-standing { background: var(--cream); border-left: 4px solid var(--green); padding: var(--s3) var(--s4); margin: var(--s3) 0; border-radius: var(--radius-xs); }
.client-now { font-size: 1.25rem; margin: 0; color: var(--green-dark); }
.client-next { margin: var(--s2) 0 0; }
.client-list { padding-left: 1.2em; display: grid; gap: var(--s2); }
.client-timeline { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.client-timeline li { border-left: 3px solid var(--rule); padding-left: var(--s3); }
.client-when { display: block; font-size: 0.82rem; color: var(--gray); }
.client-price { font-size: 1.05rem; }
.client-foot { margin-top: var(--s4); }

/* G-10 — other companies on a job */
.partner-link { display: grid; gap: 6px; padding: var(--s3); border: 2px solid var(--green); border-radius: 8px; margin: var(--s3) 0; background: var(--cream); }
.partner-link input { width: 100%; min-width: 0; font-family: monospace; font-size: 13px; padding: 8px; }
.partner-new summary, .handoff-new summary { cursor: pointer; font-weight: bold; color: var(--green); }
.partner-new .check { display: block; margin: 6px 0; }
.eyebrow { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin: 0 0 4px; }
.plain-list { margin: var(--s2) 0; padding-left: 1.2em; }
.plain-list li { margin: 4px 0; }
.nudge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rec.is-mine { border-left: 3px solid var(--green); padding-left: 8px; }
.timeline { list-style: none; padding: 0; margin: var(--s2) 0; }
.timeline li { padding: 4px 0; border-bottom: 1px solid #e6e3dd; }
.join-job .button { margin-top: var(--s2); }

/* G-11 — close-out */
.checkins { border: 2px solid var(--green); border-radius: 8px; padding: var(--s3); margin: 0 0 var(--s4); background: #fff; }
.checkins h2 { margin-top: 0; font-size: 1.1rem; }
.checkins .is-overdue .rec-meta { color: #a33; }
#close-out h3 { margin-top: var(--s4); font-size: 1rem; }
.packet-new summary, .followup-new summary { cursor: pointer; font-weight: bold; color: var(--green); }
.project-close select + select { margin-left: 4px; }

/* F-4 — hours per finding */
.icard-hr { margin: 4px 0 0; font-size: 0.9rem; color: var(--green-dark); }
.icard-hr.is-suggested { color: #8a6500; }
.scope-hours { margin: var(--s3) 0 0; font-size: 0.95rem; }

/* F-5: program checkboxes on a company row; one card per program on Rates */
.program-pick { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.check-inline { display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }
.program-card + .program-card { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: 1rem; }

/* H-1: accepting the quote on the client link */
.client-accept { border: 1px solid var(--rule); border-left: 4px solid var(--green); padding: var(--s3) var(--s4); margin: var(--s4) 0; border-radius: var(--radius-xs); }
.client-accept h2 { margin-top: 0; }
.client-accepted { background: var(--cream); border-left: 4px solid var(--green); padding: var(--s3) var(--s4); border-radius: var(--radius-xs); }
.client-question { margin-top: var(--s3); }
.client-question summary { cursor: pointer; color: var(--green-dark); }
.client-option { border-top: 1px solid var(--rule); padding: var(--s2) 0; }
.client-option-pick { display: flex; gap: .5rem; align-items: baseline; cursor: pointer; }
/* The accept sentence is the agreement: plain case, full size. */
.client-accept .field-check label { text-transform: none; letter-spacing: normal; font-size: 1rem; font-weight: normal; color: var(--ink); }