/* Rampart — winter operations. Built for a cold morning and a bright screen. */
:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1c2129;
  --line: #262d38;
  --line-soft: #1f2630;
  --ink: #e6edf3;
  --ink-2: #9aa7b4;
  --ink-3: #6b7785;
  --accent: #4d9dff;
  --accent-dim: #1f3b5c;
  --good: #3fb950;
  --warn: #d29922;
  --bad: #f85149;
  --purple: #a371f7;

  /* Surfaces and states that are not simply background/ink. */
  --input-bg: #0b0f15;
  --btn-hover-bg: #222833;
  --btn-hover-line: #39424f;
  --accent-hover: #6cb0ff;
  --on-accent: #04101f;        /* text ON an accent-filled button */
  --danger-line: #4a2222;
  --tab-on-ink: #cfe4ff;
  --scrim: rgba(1, 4, 9, .7);
  --shadow-drawer: -20px 0 60px rgba(0, 0, 0, .5);
  --shadow-toast: 0 10px 30px rgba(0, 0, 0, .45);

  /* Status pills. Seven tones, each a background / ink / border trio, so a
     new status picks a tone instead of inventing another three hex codes. */
  --tone-neutral-bg: #21262d;  --tone-neutral-ink: var(--ink-2); --tone-neutral-line: var(--line);
  --tone-blue-bg:    #1c2f45;  --tone-blue-ink:    #79c0ff;      --tone-blue-line:    #1f4a75;
  --tone-amber-bg:   #3a2d12;  --tone-amber-ink:   #e3b341;      --tone-amber-line:   #5c4611;
  --tone-green-bg:   #12351d;  --tone-green-ink:   #56d364;      --tone-green-line:   #1d5c2c;
  --tone-red-bg:     #3d1d1d;  --tone-red-ink:     #ff7b72;      --tone-red-line:     #6b2020;
  --tone-purple-bg:  #2c2447;  --tone-purple-ink:  #c4a2ff;      --tone-purple-line:  #45356e;
  --tone-cyan-bg:    #133041;  --tone-cyan-ink:    #56c8e0;      --tone-cyan-line:    #1c5670;

  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

/**
 * Daylight. Billing works at a desk by a window; dispatch works at 5am with the
 * lights off. Only the palette changes — every rule below is written against
 * these tokens, so nothing else in this file knows which theme is showing.
 *
 * app.js resolves the system preference and always sets data-theme explicitly,
 * so this needs no prefers-color-scheme duplicate.
 */
:root[data-theme="light"] {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #eef1f6;
  --line: #d7dee8;
  --line-soft: #e6ebf2;
  --ink: #16202b;
  --ink-2: #4d5b6b;
  --ink-3: #6f7d8c;
  --accent: #1b6fd4;
  --accent-dim: #cfe0f7;
  --good: #1a8a3f;
  --warn: #9a6b06;
  --bad: #c0392b;
  --purple: #6b46c1;

  --input-bg: #ffffff;
  --btn-hover-bg: #e5eaf2;
  --btn-hover-line: #b9c4d2;
  --accent-hover: #1559ab;
  --on-accent: #ffffff;
  --danger-line: #e5b6b0;
  --tab-on-ink: #10437e;
  --scrim: rgba(22, 32, 43, .38);
  --shadow-drawer: -20px 0 60px rgba(22, 32, 43, .18);
  --shadow-toast: 0 10px 30px rgba(22, 32, 43, .16);

  --tone-neutral-bg: #e9edf3;  --tone-neutral-ink: var(--ink-2); --tone-neutral-line: var(--line);
  --tone-blue-bg:    #dceafc;  --tone-blue-ink:    #10529e;      --tone-blue-line:    #b6d3f5;
  --tone-amber-bg:   #fbeecd;  --tone-amber-ink:   #7a5405;      --tone-amber-line:   #efd9a3;
  --tone-green-bg:   #d8f0de;  --tone-green-ink:   #10662f;      --tone-green-line:   #aeddba;
  --tone-red-bg:     #fbdedb;  --tone-red-ink:     #a32b1e;      --tone-red-line:     #f2bcb5;
  --tone-purple-bg:  #e9e0fb;  --tone-purple-ink:  #5b34a8;      --tone-purple-line:  #d3c2f2;
  --tone-cyan-bg:    #d5eef5;  --tone-cyan-ink:    #0d5b70;      --tone-cyan-line:    #a9d8e5;
}

/* The toggle itself: one quiet button in the top bar. */
button.btn.theme { padding: 6px 10px; line-height: 1; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* --- shell ------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px; height: 64px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; }

/**
 * Top-bar lockup: the shield and FORTRESS are cropped from the supplied
 * artwork; the service line is live text set where the FACILITIES SOLUTIONS
 * subline runs on the full logo. Baking it in was not an option — there is no
 * font rendering here — and text is the better answer anyway: crisp at any
 * zoom, and it recolours with the theme.
 *
 * The art is navy for a white page, so the dark theme uses reversed files with
 * lightness inverted and hue kept. Only one of each pair is ever displayed.
 */
.brand .shield { height: 42px; width: auto; display: block; flex: none; }
.brand .fortress { height: 19px; width: auto; display: block; }
.brand .stack { display: flex; flex-direction: column; gap: 3px; }

/* The subline is justified across the width of FORTRESS, as on the real logo:
   each letter is its own cell, so the row stretches instead of centring. */
.brand .subline {
  display: flex; justify-content: space-between;
  font-size: 9px; font-weight: 700; color: #004881;
  text-transform: uppercase; padding: 0 1px;
}
:root[data-theme="dark"] .brand .subline { color: #b8e0ff; }
/* The space cells sit either side of the dash, on top of the flex gap the
   justification already provides — keep them narrow or the dash floats. */
.brand .subline .sp { width: .12em; }

:root[data-theme="dark"] .brand .on-light { display: none; }
.brand .on-dark { display: none; }
:root[data-theme="dark"] .brand .on-dark { display: block; }

/* The same lockup, sized for the sign-in screen. At its desktop size the whole
   lockup is 359px wide, which fills a 375px phone edge to edge — so it scales
   with the viewport and only reaches full size on a wide one. */
.brand.hero { justify-content: center; gap: clamp(9px, 2.4vw, 14px); }
.brand.hero .shield { height: clamp(53px, 15.5vw, 84px); }
.brand.hero .fortress { height: clamp(24px, 7vw, 38px); }
.brand.hero .subline { font-size: clamp(12px, 3.5vw, 17px); padding: 0 2px; }
.brand.hero .stack { gap: clamp(4px, 1.1vw, 6px); }
.brand small { color: var(--ink-3); font-weight: 500; font-size: 11px; letter-spacing: .04em;
               text-transform: uppercase; }
nav.tabs { display: flex; gap: 2px; margin-left: 8px; flex: 1; overflow-x: auto; }
nav.tabs button {
  background: none; border: 0; color: var(--ink-2); padding: 8px 13px;
  border-radius: 7px; cursor: pointer; font-weight: 500; white-space: nowrap;
}
nav.tabs button:hover { background: var(--panel-2); color: var(--ink); }
nav.tabs button.on { background: var(--accent-dim); color: var(--tab-on-ink); }
.whoami { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; }
.whoami .role {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  background: var(--panel-2); border: 1px solid var(--line); padding: 2px 7px; border-radius: 20px;
}
main { padding: 20px; max-width: 1500px; margin: 0 auto; }

/* --- primitives -------------------------------------------------------- */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.panel > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.panel > header h2 { font-size: 14px; }
.panel > header .sub { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.panel .body { padding: 16px; }
.grid { display: grid; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

button.btn {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  padding: 7px 13px; border-radius: 7px; cursor: pointer; font-weight: 500;
}
button.btn:hover:not(:disabled) { border-color: var(--btn-hover-line); background: var(--btn-hover-bg); }
button.btn:disabled { opacity: .45; cursor: not-allowed; }
button.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.btn.danger { color: var(--bad); border-color: var(--danger-line); }
button.btn.sm { padding: 4px 9px; font-size: 12px; }

/* Everything that takes typing, by exclusion rather than by listing the types.
   The list form missed a bare <input> with no type attribute — valid, common,
   and text — so fifteen fields across the app rendered at the browser's own
   default width beside full-width ones that happened to say type="text". */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]),
select, textarea {
  background: var(--input-bg); border: 1px solid var(--line); color: var(--ink);
  padding: 8px 10px; border-radius: 7px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-dim); border-color: var(--accent); }
/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   class that sets display beats it — label.field and .grid both do. Anything
   toggled with el.hidden then stayed on screen while reporting itself hidden. */
[hidden] { display: none !important; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
label.field > span em { color: var(--ink-3); font-style: normal; }

/* --- stats ------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px;
}
.stat .k { color: var(--ink-3); font-size: 11px; text-transform: uppercase;
           letter-spacing: .05em; margin-bottom: 6px; }
.stat .v { font-size: 25px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .n { color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.stat.good .v { color: var(--good); }
.stat.warn .v { color: var(--warn); }
.stat.bad  .v { color: var(--bad); }
.stat.accent .v { color: var(--accent); }

/* --- tables ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); font-weight: 600; padding: 9px 12px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel-2);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--panel-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; }

/* --- pills ------------------------------------------------------------- */
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px;
  font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap;
}
.pill.Draft,      .pill.pending   { background: var(--tone-neutral-bg); color: var(--tone-neutral-ink); border-color: var(--tone-neutral-line); }
.pill.Sent,       .pill.started   { background: var(--tone-blue-bg); color: var(--tone-blue-ink); border-color: var(--tone-blue-line); }
.pill.Negotiating { background: var(--tone-amber-bg); color: var(--tone-amber-ink); border-color: var(--tone-amber-line); }
.pill.Signed,     .pill.completed,
.pill.active,     .pill.paid      { background: var(--tone-green-bg); color: var(--tone-green-ink); border-color: var(--tone-green-line); }
.pill.Declined,   .pill.Cancelled,
.pill.skipped,    .pill.failed    { background: var(--tone-red-bg); color: var(--tone-red-ink); border-color: var(--tone-red-line); }
.pill.prospect,   .pill.queued    { background: var(--tone-purple-bg); color: var(--tone-purple-ink); border-color: var(--tone-purple-line); }
.pill.ready       { background: var(--tone-cyan-bg); color: var(--tone-cyan-ink); border-color: var(--tone-cyan-line); }
.pill.invoiced    { background: var(--tone-purple-bg); color: var(--tone-purple-ink); border-color: var(--tone-purple-line); }
.pill.seasonal    { background: var(--tone-green-bg); color: var(--tone-green-ink); border-color: var(--tone-green-line); }
.pill.per_plow    { background: var(--tone-blue-bg); color: var(--tone-blue-ink); border-color: var(--tone-blue-line); }
.pill.per_time    { background: var(--tone-amber-bg); color: var(--tone-amber-ink); border-color: var(--tone-amber-line); }
.pill.plow        { background: var(--tone-blue-bg); color: var(--tone-blue-ink); }
.pill.shovel      { background: var(--tone-amber-bg); color: var(--tone-amber-ink); }
.pill.both        { background: var(--tone-purple-bg); color: var(--tone-purple-ink); }
.pill.p1 { background: var(--tone-red-bg); color: var(--tone-red-ink); }
.pill.p2 { background: var(--tone-amber-bg); color: var(--tone-amber-ink); }

/* --- drawer / modal ---------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; background: var(--scrim); z-index: 100;
  display: flex; justify-content: flex-end;
}
.drawer {
  width: min(760px, 100%); background: var(--bg); border-left: 1px solid var(--line);
  overflow-y: auto; box-shadow: var(--shadow-drawer);
}
/* The draft agreement is a page, not a form: at 760px the document's own
   layout wraps in ways it never will for the customer, which defeats the point
   of looking at it. */
.drawer.wide { width: min(1040px, 100%); }
/* Both panels, because a modal is a drawer that landed in the middle. These
   used to be .drawer-only, so everything in a centred modal — heading, form,
   buttons — sat hard against the border with no padding at all. */
.drawer > header, .modal > header {
  position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 15px 20px; display: flex; align-items: flex-start; gap: 14px; z-index: 2;
}
.drawer > header h2, .modal > header h2 { font-size: 17px; }
.drawer .content, .modal .content { padding: 20px; }
.modal-center { align-items: center; justify-content: center; }
.modal {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  width: min(620px, 94vw); max-height: 88vh; overflow-y: auto;
}

.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; }
.kv dt { color: var(--ink-3); font-size: 12px; }
.kv dd { margin: 0; }

.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin: 22px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.section-title:first-child { margin-top: 0; }

.note {
  border-left: 3px solid var(--accent); background: var(--panel-2);
  padding: 10px 14px; border-radius: 0 7px 7px 0; color: var(--ink-2); font-size: 13px;
}
.note.warn { border-color: var(--warn); }
.note.bad  { border-color: var(--bad); }
.note.good { border-color: var(--good); }

.toast-host { position: fixed; bottom: 20px; right: 20px; z-index: 200;
              display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 11px 16px; border-radius: 8px; max-width: 420px;
  box-shadow: var(--shadow-toast); animation: rise .18s ease-out;
}
.toast.bad  { border-left-color: var(--bad); }
.toast.good { border-left-color: var(--good); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.empty .big { font-size: 30px; margin-bottom: 10px; opacity: .5; }

.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--good); }

/* --- login ------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login { width: 100%; max-width: 380px; }
.login .brand { font-size: 26px; justify-content: center; margin-bottom: 6px; }
.login .brand.hero { margin-bottom: 26px; }
.hint { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 16px; line-height: 1.7; }

@media (max-width: 720px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  main { padding: 14px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
}

/* --- timesheets --------------------------------------------------------- */
input[type=datetime-local] {
  background: var(--input-bg); border: 1px solid var(--line); color: var(--ink);
  padding: 8px 10px; border-radius: 7px; width: 100%;
}
/* A day past twelve hours is the one cell in the week that must not be
   scanned past: Colorado starts owing overtime at that line. */
table.week td.hot { color: var(--warn); font-weight: 650; }
table.week tbody tr.clickable { cursor: pointer; }
table.week tbody tr.clickable:hover { background: var(--panel-2); }
.tiny { font-size: 11px; line-height: 1.35; }
.card {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px;
}
.content h3 { font-size: 14px; margin: 0 0 8px; font-weight: 650; }

/* --- enrollment QR ------------------------------------------------------ */
/* Always on white, whatever the app theme: a scanner needs the contrast the
   spec assumes, and an inverted code is a code that does not read. */
.qr-frame {
  background: #fff; padding: 14px; border-radius: 12px;
  width: 232px; margin: 22px auto 0;
}
.qr-frame svg { display: block; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; color: var(--ink-3); font-size: 12px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* --- sortable table headings ------------------------------------------
   A heading that can be clicked should look like it can be clicked, and the
   one currently in use should be obvious without hunting for a small arrow. */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.03);
}

th.sortable:focus-visible {
  outline: 2px solid var(--accent, #1b2a4a);
  outline-offset: -2px;
}

.sort-arrow {
  display: inline-block;
  margin-left: 5px;
  font-size: 9px;
  vertical-align: 1px;
}

/* The column being sorted on, so the table says what it is doing. */
th.sortable[aria-sort="ascending"],
th.sortable[aria-sort="descending"] {
  color: var(--ink);
}

/* --- the customer table on a narrow screen -----------------------------
   Nine columns do not fit a laptop. Rather than leave people scrolling
   sideways to find out whether somebody has an email address, the columns
   that can be carried elsewhere are folded into the customer cell, and the
   ones that cannot are truncated with the full value on hover. */

/* Long values stop stretching the table and get an ellipsis instead. Every
   one of these carries a title, so nothing is lost — production route zones
   read "EAGLE VAIL, BEAVER CK, BACH GULCH" and would otherwise set the width
   of the whole column. */
.trunc {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.col-zone, th.col-zone { max-width: 150px; }
td.col-customer { max-width: 260px; }

/* Shown only when the Account column itself is hidden. */
.account-inline {
  display: none;
  font-size: 11px;
  color: var(--ink-3);
  margin-right: 6px;
}

@media (max-width: 1200px) {
  th, td { padding-left: 9px; padding-right: 9px; }
}

/* Shown only when the Service column itself is hidden. */
.service-inline { display: none; margin-top: 4px; }

@media (max-width: 1100px) {
  /* The account number is six characters and needs a whole column; it reads
     just as well in front of the customer's name. */
  .col-account { display: none; }
  .account-inline { display: inline; }
}

@media (max-width: 1000px) {
  /* Service is one badge in a column of its own. Under the address it says the
     same thing and costs no width — and what a property buys is the sort of
     thing you read with the property, not in a column three across. */
  .col-service { display: none; }
  .service-inline { display: block; }
  th, td { padding-left: 7px; padding-right: 7px; }
  .trunc { max-width: 160px; }
  td.col-customer { max-width: 220px; }
}

/* ---------------------------------------------------------------------------
   The agreement document, inside the office app.
   ---------------------------------------------------------------------------
   These rules live inline in sign.html, which is the page the customer reads —
   so the document has always looked right to them and bare to us. The office
   renders the same fragment in the contracts view and in the draft preview,
   where it arrived with no styles at all: the head ran "ContractFV-C-0001"
   with no gap, and the terms tables had no rules or spacing.

   A preview whose job is to show what the customer will see has to be styled
   the way the customer's copy is, so this is the same set, scoped to .contract
   so nothing here can reach the app around it. Colours come from the app's
   tokens rather than the signing page's, so it follows the office theme.
--------------------------------------------------------------------------- */
.contract { font-size: 15px; line-height: 1.6; }
.contract h1 { font-size: 24px; margin: 0; letter-spacing: -.02em; }
.contract h2 { font-size: 15px; margin: 26px 0 8px; letter-spacing: -.01em; }
.contract .contract-head {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding-bottom: 18px; margin-bottom: 8px;
}
.contract .contract-head .logo { width: 54px; height: 54px; margin-bottom: 6px; }
.contract .contract-head .meta { text-align: right; font-size: 13px; }
.contract .contract-head .meta div { margin-bottom: 3px; }
/* The gap that was missing: a label and its value are two things. */
.contract .contract-head .meta span { color: var(--ink-2); margin-right: 8px; }
.contract .addr { font-weight: 600; }
.contract table.terms {
  width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px;
}
.contract table.terms th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); border-bottom: 1px solid var(--line); padding: 8px 10px;
}
.contract table.terms td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.contract table.terms .r { text-align: right; }
.contract table.terms tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; }
.contract table.terms.summary th { width: 34%; vertical-align: top; padding-top: 11px; }
.contract table.terms.summary td { font-weight: 600; }
.contract table.terms.summary .muted {
  font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-2);
}
.contract ul { margin: 8px 0 0; padding-left: 20px; }
.contract ul li { margin-bottom: 7px; }
.contract .contract-foot {
  margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2); text-align: center;
}

/* The line that replaced the document's dead checkboxes. In the office app
   there is no control to jump to — this is a preview, not the signing page —
   so it stays plain text and never pretends to be clickable. */
.contract .choose { font-size: 13px; color: var(--ink-3); font-style: italic; }

/* ---------------------------------------------------------------------------
   Firewood delivery calendar -- the office's day picker for moving an order.
   Each day says what matters: cords free, how many orders are on it, or that
   it is not a run day. Colour is backed by words on every cell, so the state
   reads without it.
--------------------------------------------------------------------------- */
.fwcal { margin-bottom: 10px; }
.fwcal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fwcal__head strong { font-size: 15px; }
.fwcal__week, .fwcal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.fwcal__week span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: center; padding: 4px 0; }
.fwcal__day {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 62px; padding: 6px 7px; border-radius: 8px; text-align: left;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: inherit; cursor: pointer;
}
.fwcal__day:hover { border-color: var(--ink-3); }
.fwcal__day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fwcal__num { font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; }
.fwcal__note, .fwcal__count { font-size: 11px; line-height: 1.25; color: var(--ink-2); }
.fwcal__day--open { border-color: color-mix(in srgb, var(--good, #2e8b57) 45%, var(--line)); }
.fwcal__day--open .fwcal__note { color: var(--good, #2e8b57); }
.fwcal__day--full { background: color-mix(in srgb, var(--bad, #c0392b) 10%, var(--panel)); }
.fwcal__day--full .fwcal__note { color: var(--bad, #c0392b); font-weight: 600; }
.fwcal__day--closed, .fwcal__day--outside { background: transparent; color: var(--ink-3); border-style: dashed; }
.fwcal__day.is-current { box-shadow: inset 0 0 0 2px var(--warn, #c98a1b); }
.fwcal__day.is-picked { background: var(--accent); border-color: var(--accent); color: #fff; }
.fwcal__day.is-picked .fwcal__note, .fwcal__day.is-picked .fwcal__count { color: #fff; }
.fwcal__blank { min-height: 62px; }
.fwcal__legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); margin: 6px 0 4px; }
.fwcal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.fwcal__key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); }
.fwcal__key.is-current { box-shadow: inset 0 0 0 2px var(--warn, #c98a1b); }
.fwcal__picked { font-size: 14px; margin: 8px 0 12px; }
@media (max-width: 560px) { .fwcal__day, .fwcal__blank { min-height: 48px; } .fwcal__count { display: none; } }

/* Crew map ---------------------------------------------------------------- */
.crewmap header { flex-wrap: wrap; gap: 10px; }
.crewmap label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.crewmap label.inline input, .crewmap label.inline select { width: auto; }
.crewmap-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  border-top: 1px solid var(--line);
  min-height: 560px;
}
.crewmap-list { border-right: 1px solid var(--line); overflow-y: auto; max-height: 70vh; }
.crewmap-map { min-height: 560px; height: 70vh; background: var(--panel-2); }
.crewmap-person {
  display: flex; gap: 10px; align-items: flex-start; width: 100%;
  padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.crewmap-person:hover { background: var(--panel-2); }
.crewmap-person:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.crewmap-person .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.crewmap-person .who { display: grid; gap: 2px; font-size: 13px; }
.crewmap .leaflet-popup-content { font-size: 13px; line-height: 1.45; }
@media (max-width: 760px) {
  .crewmap-body { grid-template-columns: 1fr; }
  .crewmap-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 220px; }
  .crewmap-map { height: 60vh; min-height: 380px; }
}
/* No dark tiles without a paid key, so dim the standard ones instead. */
:root:not([data-theme="light"]) .crewmap-map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}

/* --- firewood: the day the customer asked for --------------------------- */
/* The column the deliveries are planned around, so it is read at a glance and
   not at the same weight as the wood type. */
.wants { white-space: nowrap; vertical-align: top; }
.wants__day { font-weight: 650; }
.wants__near { color: var(--ink-3); font-size: 12px; }
.wants__flag { color: var(--warn); font-size: 11px; white-space: normal; max-width: 210px; }
/* Soon and late earn the date itself a colour. Nothing else in the row moves:
   a list that restyles whole rows is harder to scan, not easier. */
.wants.is-soon .wants__day { color: var(--accent); }
.wants.is-late .wants__day { color: var(--warn); }
.wants.is-late .wants__near { color: var(--warn); }
/* Where the office moved an order off the day the customer picked. Quiet, but
   not muted into the background: it is the reason the date looks unexpected. */
.wants__moved { color: var(--ink-2); font-size: 11px; white-space: normal; max-width: 210px; }

/* The reschedule sheet's send warning. A checkbox alone did not say that
   saving reaches the customer; this does, and still lets it be turned off. */
.note.sendmail { margin-bottom: 12px; }
.note.sendmail .check { margin: 8px 0 0; }

/* Who and where, in the sheet that moves a delivery. An order number is not
   something anybody recognises, and picking the wrong row here puts a cord on
   a stranger's drive — so the address sits above the scheduling detail. */
.modal > header .deliv, .drawer > header .deliv { font-size: 13px; margin-top: 2px; }

/* --- who can see what --------------------------------------------------- */
.who-chip {
  display: inline-block; margin: 0 6px 5px 0; padding: 3px 9px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: 13px; white-space: nowrap;
}
/* The people who can see rates, prices and pay are the reason this page
   exists, so they are marked on the name and not only in the column. */
.who-chip.money { border-color: var(--tone-amber-line); }
.who-chip em { color: var(--ink-3); font-style: normal; font-size: 11px; }