:root {
  /* Build 138: light theme. Dark and "paper" (documents, print) are at the
     end of this file. Every --k-<hex> stands for one colour that used to be
     written straight in; paper gives back exactly that colour. */
  --ink: #17211D;
  --muted: #5F6B65;
  --muted-2: #8A968F;
  --paper: #F3F4F0;
  --card: #FCFCFA;
  --line: #DCE0DA;
  --line-2: #E8EBE6;
  --primary: #2A3D36;
  --primary-bg: #2A3D36;
  --brand-deep: #1F2E29;
  --primary-light: #E3EBE6;
  --pulse: #FDF6C8;
  --danger: #dc2626;
  --k-0369a1: #0369A1;
  --k-047857: #047857;
  --k-065f46: #065F46;
  --k-0e7490: #0E7490;
  --k-0f172a: #17211D;
  --k-0f766e: #0F766E;
  --k-115e59: #115E59;
  --k-14532d: #14532D;
  --k-15803d: #15803D;
  --k-166534: #166534;
  --k-16a34a: #16A34A;
  --k-1c1917: #17211D;
  --k-1e293b: #17211D;
  --k-1e3a8a: #1E3A8A;
  --k-1e40af: #1E40AF;
  --k-1f3a2e: #1F3A2E;
  --k-292524: #17211D;
  --k-2a241e: #2A241E;
  --k-2a3d36: #2A3D36;
  --k-312e81: #312E81;
  --k-334155: #3A4640;
  --k-3730a3: #3730A3;
  --k-3f5b50: #3F5B50;
  --k-44403c: #17211D;
  --k-475569: #3A4640;
  --k-57534e: #3A4640;
  --k-64748b: #5F6B65;
  --k-6b7280: #5F6B65;
  --k-78350f: #78350F;
  --k-78716c: #5F6B65;
  --k-7c2d12: #7C2D12;
  --k-92400e: #92400E;
  --k-94a3b8: #8A968F;
  --k-991b1b: #991B1B;
  --k-9ca3af: #8A968F;
  --k-a16207: #A16207;
  --k-a54b24: #A54B24;
  --k-a5b4fc: #A5B4FC;
  --k-a7f3d0: #A7F3D0;
  --k-a8a29e: #8A968F;
  --k-b45309: #B45309;
  --k-b91c1c: #B91C1C;
  --k-bae6fd: #BAE6FD;
  --k-bbf7d0: #BBF7D0;
  --k-bfdbfe: #BFDBFE;
  --k-c2410c: #C2410C;
  --k-c7d2fe: #C7D2FE;
  --k-c7d7ea: #C7D7EA;
  --k-cbc7c4: #8A968F;
  --k-cbd5e1: #C5CCC4;
  --k-ccfbf1: #CCFBF1;
  --k-d5d2ce: #C5CCC4;
  --k-d6d3d1: #C5CCC4;
  --k-d8d6d0: #C5CCC4;
  --k-d97706: #D97706;
  --k-dbe5e0: #C5CCC4;
  --k-dbeafe: #DBEAFE;
  --k-dcfce7: #DCFCE7;
  --k-dfe5e1: #C5CCC4;
  --k-e0e7ff: #E0E7FF;
  --k-e0f2fe: #E0F2FE;
  --k-e2e0dd: #C5CCC4;
  --k-e2e8f0: #DCE0DA;
  --k-e3ebe6: #DCE0DA;
  --k-e4ebe6: #DCE0DA;
  --k-e6f0fb: #E6F0FB;
  --k-e7e5e2: #DCE0DA;
  --k-e7e5e4: #DCE0DA;
  --k-e8ede9: #DCE0DA;
  --k-eaf0f6: #EAF0F6;
  --k-ebe9e6: #DCE0DA;
  --k-ece9e6: #DCE0DA;
  --k-ececea: #DCE0DA;
  --k-ecfdf5: #ECFDF5;
  --k-ecfeff: #ECFEFF;
  --k-ede9fe: #EDE9FE;
  --k-eeece9: #DCE0DA;
  --k-eeeeee: #DCE0DA;
  --k-eef2ef: #ECEEE9;
  --k-eef2f7: #ECEEE9;
  --k-eef2ff: #EEF2FF;
  --k-eef3f0: #ECEEE9;
  --k-efeeec: #DCE0DA;
  --k-eff6ff: #EFF6FF;
  --k-f0efed: #ECEEE9;
  --k-f0f9ff: #F0F9FF;
  --k-f0fdf4: #F0FDF4;
  --k-f1f5f9: #ECEEE9;
  --k-f2f0ee: #ECEEE9;
  --k-f3f1ef: #ECEEE9;
  --k-f3f6f4: #ECEEE9;
  --k-f4f7f5: #F6F7F3;
  --k-f4f9ff: #F4F9FF;
  --k-f5f3f1: #ECEEE9;
  --k-f5f5f4: #ECEEE9;
  --k-f6f5f4: #ECEEE9;
  --k-f6f8f7: #F6F7F3;
  --k-f6fdf8: #F6F7F3;
  --k-f7fbff: #F6F7F3;
  --k-f8f7f6: #F6F7F3;
  --k-f8fafc: #F6F7F3;
  --k-f8fbff: #FCFCFA;
  --k-f9fdfa: #F6F7F3;
  --k-faf7ff: #F6F7F3;
  --k-faf9f7: #F6F7F3;
  --k-faf9f8: #F6F7F3;
  --k-fafaf9: #F6F7F3;
  --k-fafafa: #F6F7F3;
  --k-fbfaf9: #F6F7F3;
  --k-fbfdff: #FCFCFA;
  --k-fca5a5: #FCA5A5;
  --k-fcfbfa: #F6F7F3;
  --k-fcfcfb: #FCFCFA;
  --k-fcfcfc: #FCFCFA;
  --k-fcfdff: #FCFCFA;
  --k-fdf9e3: #FDF9E3;
  --k-fecaca: #FECACA;
  --k-fed7aa: #FED7AA;
  --k-fee2e2: #FEE2E2;
  --k-fef2f2: #FEF2F2;
  --k-fef3c7: #FEF3C7;
  --k-fff4ed: #FFF4ED;
  --k-fff7ed: #FFF7ED;
  --k-fffaf2: #FFFAF2;
  --k-fffaf9: #FCFCFA;
  --k-fffafa: #FCFCFA;
  --k-fffbeb: #FFFBEB;
  --k-ffffff: #FCFCFA;
  --r-ctl: 8px;
  --r-panel: 12px;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

button, input, select {
  font-family: inherit;
}

/* ---- Header ---- */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1440px;               /* the same width as the page under it */
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.auth-brand .brand-mark { width: 46px; height: 46px; }
.auth-brand .brand-name { font-size: 21px; }
/* Two words take more of the header than one did, and the tab strip is
   already tight on a laptop. Below this the mark carries the brand on its
   own, which is what it is for. The sign-in screens keep the full name. */
@media (max-width: 1000px) {
  .header .brand-name { display: none; }
}

.tabbar {
  display: flex; gap: 4px; background: var(--k-f5f5f4); border-radius: 10px; padding: 4px;
  /* Ten tabs don't all fit a small laptop. They drop onto a second row
     rather than scrolling, or pushing the page wider than the screen. */
  min-width: 0; flex-wrap: wrap;
}
/* Tighter tabs on a laptop, so all ten fit before the strip has to scroll. */
@media (max-width: 1380px) { .tab-btn { padding: 7px 10px; } }
@media (max-width: 1180px) { .tab-btn { padding: 6px 7px; font-size: 12.5px; } }
.tab-btn {
  border: none; background: transparent; border-radius: 8px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 500; color: var(--muted);
  cursor: pointer;
}
.tab-btn.active { background: var(--k-ffffff); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

.total-badge {
  text-align: right; border-radius: 10px; padding: 6px 12px;
  transition: background-color 0.3s ease;
}
.total-badge.pulse { background: var(--pulse); }
.total-badge .label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); line-height: 1;
  margin-bottom: 2px;
}
.total-badge .value { font-size: 20px; font-weight: 700; color: var(--primary); line-height: 1; }

/* ---- Layout ---- */
.container { max-width: 1440px; margin: 0 auto; padding: 24px 20px 60px; }
/* the timeline earns the whole page */
.container-wide { max-width: none; padding: 14px 18px 20px; }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.quote-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .quote-grid { grid-template-columns: 1fr; }
}

/* ---- Phase cards ---- */
.phase { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.phase-header {
  width: 100%; border: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--k-f5f5f4);
}
.phase-header:hover { background: var(--k-ececea); }
.phase-header-left { display: flex; align-items: center; gap: 8px; }
.chevron { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.phase-title { font-weight: 600; font-size: 15px; color: var(--k-292524); }
.phase-total { font-weight: 600; font-size: 13.5px; color: var(--k-44403c); }

.subtask-list { }
.subtask-row {
  width: 100%; border: none; background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--line-2);
}
.subtask-row:hover { background: var(--k-fafaf9); }
.subtask-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.subtask-num { font-size: 12px; color: var(--muted-2); width: 42px; flex-shrink: 0; }
.subtask-name { font-size: 14.5px; color: var(--k-292524); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtask-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.subtask-line-total { font-size: 13.5px; color: var(--k-44403c); }

.badges { display: flex; gap: 4px; }
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--k-f1f5f9); color: var(--k-64748b); border-radius: 5px; padding: 2px 5px;
  font-size: 10px; font-weight: 500;
}

/* ---- Assign panel ---- */
/* Two to a row rather than three or four across: materials and labour are the
   long lists and get the width, with plant and the fixed prices underneath.
   Notes runs the whole way across at the bottom. */
.assign-wrap {
  padding: 4px 16px 16px; background: rgba(250,250,249,0.6);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 700px) { .assign-wrap { grid-template-columns: 1fr; } }

/* Completed & paid before this quote */
.done-box { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.done-box input { width: 15px; height: 15px; cursor: pointer; accent-color: #16a34a; }
.done-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--k-166534); background: var(--k-dcfce7); border: 1px solid #86efac;
  border-radius: 20px; padding: 1px 7px; flex-shrink: 0;
}
.phase-header.is-done { background: var(--k-f0fdf4); }
.phase-header.is-done .phase-title { color: var(--k-166534); }
.subtask-row.is-done { background: var(--k-f0fdf4); }
.subtask-row.is-done .subtask-name { color: var(--k-166534); }
.summary-row.summary-done .label, .summary-row.summary-done .value { color: var(--k-16a34a); }
/* Completed work. The tint and the badge must survive Print → Save as PDF,
   which means opting out of the browser's "drop backgrounds when printing"
   default — otherwise the only trace left on paper is a few green words. */
.ex-done > td { background: var(--k-f0fdf4); }
.ex-done > td:first-child { box-shadow: inset 3px 0 0 var(--k-16a34a); }
.ex-done-tag {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--k-14532d); background: var(--k-bbf7d0);
  border: 1px solid #86efac; border-radius: 20px; padding: 1px 7px;
  margin-left: 8px; white-space: nowrap; vertical-align: 1px;
}
.ex-late-tag {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--k-7c2d12); background: var(--k-fed7aa); border: 1px solid #fdba74;
  border-radius: 20px; padding: 1px 7px; margin-left: 8px; white-space: nowrap; vertical-align: 1px;
}
.ex-sum-done { color: var(--k-16a34a); }
.ex-legend { font-size: 11px; color: var(--muted); margin: 10px 0 0; }
.assign-select-bulk { margin-top: 6px; border-color: var(--primary); color: var(--primary); font-weight: 600; }
/* "Come back to this" — a working marker for you, not for the client. It is
   deliberately absent from the exported quote. */
.flag-btn { color: #d6d3d1; }
.flag-btn:hover { color: #ea580c; background: var(--k-fff7ed); }
.flag-btn.is-on { color: #ea580c; }
.flag-btn.is-on svg { fill: #fed7aa; }
.flag-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--k-7c2d12); background: var(--k-fed7aa); border: 1px solid #fdba74;
  border-radius: 20px; padding: 1px 7px; margin-left: 8px; white-space: nowrap;
}
/* "This task needs a prompt" — the bell on the row, and the tag it puts there.
   Hollow while it is only marked, filled once the notice is set, so a prompt
   still waiting to be finished is obvious at a glance down the list. */
.prompt-btn { color: #d6d3d1; }
.prompt-btn:hover { color: var(--k-0369a1); background: var(--k-f0f9ff); }
.prompt-btn.is-on { color: var(--k-0369a1); }
.prompt-btn.is-on svg { fill: #bae6fd; }
.prompt-btn.is-part.is-on svg { fill: none; }
.prompt-tag {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  margin-left: 6px; padding: 1px 8px 1px 5px;
  border-radius: 999px; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  line-height: 1.5; white-space: nowrap;
  background: var(--k-ffffff); color: var(--k-0369a1); border: 1px dashed #7dd3fc; cursor: pointer;
}
.prompt-tag.is-set { background: var(--k-e0f2fe); border-style: solid; border-color: #7dd3fc; }
.prompt-tag:hover { background: var(--k-bae6fd); border-color: #38bdf8; }
.prompt-tag svg { width: 11px; height: 11px; }
.view-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Which days the job works. On reads as a normal button, off is struck out —
   the same language the phase chips use. */
.tl-workdays { display: inline-flex; align-items: center; gap: 4px; }
.tl-workdays-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px;
}
.wd-btn { padding: 3px 8px; }
.wd-btn:not(.is-on) { color: var(--muted); opacity: 0.72; text-decoration: line-through; }
.wd-btn.is-on { background: var(--k-ecfdf5); border-color: #6ee7b7; color: var(--k-065f46); }

/* Picking which phases go on the printed work plan. A chip carries its own
   phase colour when it's in, and goes plain when it's left out. */
.ex-opts-phases { align-items: flex-start; }
.wp-chip {
  font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--k-ffffff); color: var(--muted);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wp-chip:hover { border-color: var(--k-94a3b8); }
.wp-chip.is-on { color: var(--k-0f172a); border-color: var(--k-cbd5e1); }
.wp-chip:not(.is-on) { text-decoration: line-through; opacity: 0.6; }
/* ---------- Trade pack (export) --------------------------------------- */
.ex-tp-title {
  font: inherit; font-size: 12.5px; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--k-ffffff);
  min-width: 220px; flex: 0 1 260px;
}
.ex-tp-title:focus { outline: 2px solid var(--accent, var(--k-c2410c)); outline-offset: -1px; }
.wp-chip-n {
  font-style: normal; font-size: 9.5px; font-weight: 700; margin-left: 6px;
  opacity: .65; font-variant-numeric: tabular-nums;
}
.tp-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tp-table th, .tp-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--line-2, var(--k-e7e5e4));
  font-size: 12.5px; text-align: left; vertical-align: top;
}
.tp-table thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); border-bottom: 1.5px solid var(--line);
}
.tp-qty { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-from { text-align: right; width: 44px; color: var(--muted); }
.tp-count {
  font-style: normal; font-size: 10.5px; color: var(--muted); margin-left: 8px;
  background: var(--k-f5f5f4); border-radius: 20px; padding: 1px 7px;
}
.tp-sub { padding-left: 22px !important; color: var(--k-44403c); }
.tp-item td { font-weight: 700; }
.tp-h4 {
  margin: 22px 0 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
/* A folder with only some of its measurements in reads as neither on nor off. */
.wp-chip.is-part {
  color: var(--k-0f172a); border-color: var(--k-cbd5e1); border-style: dashed;
  text-decoration: none; opacity: 1;
}
.ex-tb-items .ex-chips { align-items: center; }
.tp-item-head {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: 0 4px 0 8px; align-self: center;
}
.tp-item-head:first-child { padding-left: 0; }
.tp-item-chip { max-width: 230px; }
/* The bottom line: one row a material, however many units it came in. */
.tp-mats { margin-top: 8px; border-top: 1.5px solid var(--line); }
.tp-mats td { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.tp-mat-name { font-weight: 700; }
.tp-mats .tp-qty b { font-size: 14px; font-weight: 800; }
.tp-sep { font-style: normal; color: var(--muted); margin: 0 8px; }
.tp-plan-note { margin: 2px 0 0; }
.tp-plans { margin-top: 10px; }
.exp-fig { margin: 0 0 14px; page-break-inside: avoid; break-inside: avoid; }
.exp-cap {
  margin-top: 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.tp-detail .ex-phase td {
  background: var(--k-f5f3f1); font-weight: 700; font-size: 11.5px;
  text-transform: none; letter-spacing: 0;
}

.ex-opts-none {
  font-size: 11px; font-weight: 600; background: none; border: 0;
  color: var(--accent, var(--k-c2410c)); cursor: pointer; padding: 2px 4px;
}
/* Crew badges printed on the work plan sit on the line with the tag, and the
   wash behind them is drawn with a pseudo-element — which browsers drop from
   a print unless colour printing is asked for explicitly. */
.wp-needs .tl-crews { display: inline-flex; gap: 3px; vertical-align: middle; }
.wp-needs .tl-crew { min-width: 16px; height: 16px; }
.wp-needs .tl-crew > b { font-size: 9px; }

/* The colour stripe down a phase and its tasks has to survive printing. */
@media print {
  .ex-table-wp td[style] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wp-needs .tl-crew, .wp-needs .tl-crew::before, .wp-needs .tl-crew > b {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
/* A prompt's times: order it, confirm it, ring them the day before. */
.pt-list { margin: 4px 0 2px; }
.pt-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px 10px; align-items: end;
  padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pt-row:first-child { padding-top: 2px; }
.pt-row > label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pt-row > label > span { font-size: 11px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); }
.pt-x { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex: none; }
.pt-when { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.pt-add { margin-top: 10px; }
.pt-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
@media (max-width: 620px) {
  .pt-row { grid-template-columns: 1fr auto; }
  .pt-row > label:first-child { grid-column: 1 / -1; }
}
.prompt-fld { display: block; margin-top: 12px; }
.prompt-fld > span {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.prompt-when { margin: 12px 0 0; font-size: 12px; }
.ask-spacer { flex: 1; }
.btn-danger-quiet { color: var(--k-b91c1c); }
.btn-danger-quiet:hover { background: var(--k-fef2f2); border-color: var(--k-fca5a5); }
.ps-kind-own { background: var(--k-e0f2fe); color: var(--k-0369a1); }

.phase-header.is-flagged, .subtask-row.is-flagged { background: var(--k-fff7ed); }
.phase-header.is-flagged { box-shadow: inset 3px 0 0 #ea580c; }
.subtask-row.is-flagged { box-shadow: inset 3px 0 0 #ea580c; }

.prices-io { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.prices-io-note { font-size: 11.5px; color: var(--muted); flex: 1 1 220px; min-width: 0; }

/* Consumables */
.cons-body { padding: 14px 16px; }
.cons-body .muted { margin: 0 0 12px; line-height: 1.55; }
.cons-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--k-334155); cursor: pointer; }
.cons-modes { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cons-mode {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--k-475569);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer;
}
.cons-mode.is-on { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.cons-mode > span:first-of-type { flex: 1; }
.cons-input { width: 68px; text-align: right; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12.5px; }
.cons-input:disabled { opacity: 0.45; }
.cons-unit { font-size: 11px; color: var(--muted-2); }
.cons-eg { margin: 12px 0 0 !important; font-style: italic; }
.consumable-line { color: var(--muted); }
.auto-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary); background: var(--primary-light); border-radius: 20px; padding: 1px 5px; margin-left: 5px; }

/* Quantities pulled off the plans */
.ms-line { padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.ms-line:last-child { border-bottom: none; }
.ms-line-top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ms-line-name { flex: 1; min-width: 0; color: var(--k-334155); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-line-qty { font-weight: 700; color: var(--primary); white-space: nowrap; }
.ms-line-bot { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.ms-line-mat { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; font-size: 10.5px; color: var(--muted); font-family: inherit; }
.ms-line-rateinput { width: 56px; text-align: right; border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; font-size: 11px; }
.ms-line-rate { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ms-line-cost { font-size: 11.5px; font-weight: 700; color: var(--k-047857); white-space: nowrap; }

/* Quoted trades */
.sub-line { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-bottom: 6px; }
.sub-name { flex: 1; min-width: 0; color: var(--k-334155); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-amount { width: 68px; text-align: right; border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; font-size: 12px; }
.sub-days { width: 44px; text-align: right; border: 1px solid var(--line); border-radius: 5px; padding: 3px 4px; font-size: 12px; }
.sub-amount:focus, .sub-days:focus { outline: none; border-color: var(--primary); }
.sub-unit { font-size: 10px; color: var(--muted-2); }
.sub-hint { font-size: 10.5px; color: var(--muted-2); font-style: italic; }
.phase-subs { border-top: 1px dashed var(--line); background: var(--k-fcfcfb); padding: 8px 16px 4px; }
.phase-subs-hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-2); margin-bottom: 6px; }
.phase-subs-total { margin-left: auto; color: var(--primary); font-size: 12px; text-transform: none; }
.phase-subs-body { max-width: 420px; }

/* "Other costs" — a straight price on the task */
.other-label { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; font-size: 12px; color: var(--k-334155); }
/* Who a fixed-price line is from, when it's named for a quoted trade with a supplier. */
.assign-line.has-sup { flex-wrap: wrap; }
.other-sup { flex-basis: 100%; order: 1; margin: -2px 0 0 18px; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-line.has-sup .other-repeat { order: 2; }
/* Under the fixed-price line: who it's from, and which material it's filed under. */
.other-meta { flex-basis: 100%; order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -2px 0 0 18px; min-width: 0; }
.other-meta .other-sup { flex-basis: auto; margin: 0; order: 0; }
.other-under { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.other-under select { font: inherit; font-size: 11px; max-width: 220px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--k-ffffff); color: var(--k-334155); }
/* A fixed price in a material heading's group. */
.res-group-fixed { padding: 0 0 2px; }
.res-group-fixed .assign-line { margin-bottom: 4px; }
.res-group-fixed .assign-line .other-label { flex: 1 1 100%; }
.other-meta .oneoff-tag { margin-left: 0; }
.fixed-in-res { flex-wrap: wrap; row-gap: 2px; }
.fixed-in-res .assign-line-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixed-in-res-meta { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 11px; }
.fixed-in-res-meta .oneoff-tag { margin-left: 0; }
.fixed-in-res-sup { font-size: 11px; color: var(--muted); }
.fixed-add .fixed-add-label { flex: 1 1 180px; }
.other-label:focus { outline: none; border-color: var(--primary); }
.other-dollar { font-size: 11px; color: var(--k-a8a29e); flex-shrink: 0; }
.other-amount { width: 66px; text-align: right; border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; font-size: 12px; flex-shrink: 0; }
.other-amount:focus { outline: none; border-color: var(--primary); }
.other-add { display: flex; gap: 5px; align-items: center; margin-top: 6px; }
.other-new-label { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; }
.other-new-amount { width: 74px; flex-shrink: 0; font-size: 12px; padding: 6px 8px; text-align: right; }
.other-add .btn-sm { padding: 6px 8px; font-size: 12px; flex-shrink: 0; }

.assign-panel { background: var(--k-ffffff); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
.assign-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.assign-panel-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--k-475569); }
.assign-panel-subtotal { font-size: 12px; color: var(--k-64748b); }

.assign-line { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 6px; }
.assign-line-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--k-334155); }
.assign-line-qty {
  width: 46px; text-align: right; border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; font-size: 12px;
}
/* Half-day stepper: arrows tucked either side of the days box so the row keeps
   its width. The native spinners are hidden here since these replace them. */
.qty-step { display: flex; align-items: center; gap: 1px; }
.qty-step .assign-line-qty { width: 38px; text-align: center; border-radius: 0; }
.qty-step .assign-line-qty::-webkit-outer-spin-button,
.qty-step .assign-line-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-step .assign-line-qty { -moz-appearance: textfield; appearance: textfield; }
.qty-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 22px; padding: 0; flex: none;
  border: 1px solid var(--line); background: var(--k-ffffff); color: var(--muted-2);
  cursor: pointer; border-radius: 5px 0 0 5px;
}
.qty-arrow + .assign-line-qty { border-left: none; }
.assign-line-qty + .qty-arrow { border-left: none; border-radius: 0 5px 5px 0; }
.qty-arrow:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); z-index: 1; }
.qty-arrow:active { background: var(--primary-bg); color: #fff; }
.icon-xs { width: 12px; height: 12px; display: block; }
/* Bigger targets on a phone or tablet, where these get thumbed. */
@media (pointer: coarse) {
  .qty-arrow { width: 28px; height: 28px; }
  .qty-step .assign-line-qty { width: 42px; }
}

.assign-line-cost { min-width: 58px; flex-shrink: 0; white-space: nowrap; text-align: right; color: var(--k-64748b); }
.assign-line-remove { background: none; border: none; cursor: pointer; color: var(--k-a8a29e); padding: 2px; display: flex; flex-shrink: 0; border-radius: 4px; }
.assign-line-remove:hover { color: var(--danger); }
.assign-empty { font-size: 11px; color: var(--k-a8a29e); font-style: italic; padding: 4px 0; }

.assign-select {
  width: 100%; font-size: 12px; border: 1px dashed var(--k-d6d3d1); border-radius: 6px;
  padding: 6px 8px; color: var(--k-78716c); background: var(--k-ffffff); cursor: pointer;
}

/* ---- Summary sidebar ---- */
.summary { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; position: sticky; top: 76px; min-width: 0; }
.summary-heading { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); margin-bottom: 8px; }
.summary-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; padding: 3px 0; }
.summary-row .label { color: var(--k-64748b); }
.summary-row .label.bold { color: var(--k-1e293b); font-weight: 600; }
.summary-row .value { color: var(--k-334155); }
.summary-row .value.bold { color: var(--k-0f172a); font-weight: 700; }
.summary-divider { border-top: 1px solid var(--line); margin: 6px 0; }

.percent-input {
  width: 56px; text-align: right; border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; font-size: 13px;
}

.grand-total-box { background: var(--primary-bg); color: #fff; border-radius: 10px; padding: 10px 12px; margin-top: 12px; }
.grand-total-box .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #bfdbfe; }
.grand-total-box .value { font-size: 18px; font-weight: 700; }

/* ---- Price lists ---- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.price-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .price-grid-2 { grid-template-columns: 1fr; } }

.price-cat-header {
  padding: 7px 16px; background: var(--k-efeeec); border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--k-78716c);
}
.price-table { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.price-table-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--k-f5f5f4); border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 13.5px; color: var(--k-292524);
}
.price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--line-2);
  flex-wrap: wrap;                 /* the section / stock-size line drops below */
}
/* Drag handle. Kept faint until you're over the row so the lists stay calm. */
.row-grip {
  display: flex; align-items: center; flex: none; margin: -4px 0 -4px -6px; padding: 4px 2px;
  color: #d6d3d1; cursor: grab; touch-action: none; opacity: 0; transition: opacity 0.12s ease;
}
.price-row:hover .row-grip { opacity: 1; }
.row-grip:active { cursor: grabbing; }
.row-grip .icon-sm { width: 14px; height: 14px; }
.price-row.is-rowdrag { background: var(--primary-light); border-radius: 8px; opacity: 0.95; }
.price-row.is-rowdrag .row-grip { opacity: 1; color: var(--primary); }
.is-reordering .price-row { transition: transform 0.12s ease; }
@media (pointer: coarse) { .row-grip { opacity: 1; } }

.price-row-name { font-size: 13px; color: var(--k-334155); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-row-info { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.price-row-unit { font-size: 10px; color: var(--k-a8a29e); }
.price-rate { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.price-rate input { width: 72px; text-align: right; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; font-size: 13px; }
.price-dollar { color: var(--k-a8a29e); font-size: 13px; }
/* labour priced as a total over hours */
.lab-mode { color: #cbd5e1; font-size: 13px; }
.lab-mode:hover { color: var(--primary); background: var(--primary-light); }
.price-rate .lab-total { width: 78px; }
.price-rate .lab-hrs { width: 54px; }
.lab-div { font-size: 11px; color: var(--muted-2); }
.price-derived { font-size: 10.5px; color: var(--primary); font-weight: 600; margin-top: 2px; }
.add-or { font-size: 11px; color: var(--muted-2); }
.add-item-form .add-hrs { width: 60px; }
.price-rate .suffix { font-size: 11px; color: var(--k-a8a29e); width: 30px; }

/* ---- Utility ---- */
.icon { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.icon-sm { width: 12px; height: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: 12.5px; }
.view-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 2px; letter-spacing: -0.01em; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  border: 1px solid var(--line); background: var(--k-ffffff); color: var(--k-334155);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--k-f8fafc); border-color: var(--k-d6d3d1); }
.btn .icon-sm { width: 13px; height: 13px; }
.btn-primary { background: var(--primary-bg); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-add { border-style: dashed; color: var(--k-475569); }
.btn-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn-sm { padding: 6px 9px; font-size: 12px; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--k-fef2f2); border-color: var(--k-fecaca); }
.btn-block { width: 100%; margin-top: 12px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #cbd5e1; cursor: pointer;
  padding: 4px; border-radius: 6px; flex-shrink: 0;
}
.icon-btn:hover { background: var(--k-f1f5f9); color: var(--primary); }
.icon-btn-danger:hover { background: var(--k-fef2f2); color: var(--danger); }

/* ---- Editable fields ---- */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); font-weight: 600; }
.field input, .field textarea {
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 13.5px;
  color: var(--ink); background: var(--k-ffffff); width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ---- Quote meta bar ---- */
.quote-meta {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.quote-meta-fields { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: 12px; flex: 1; min-width: 0; }
.field-sm { max-width: 160px; }
.quote-meta-actions { flex-shrink: 0; display: flex; gap: 8px; align-items: center; }
@media (max-width: 760px) {
  .quote-meta { flex-direction: column; align-items: stretch; }
  .quote-meta-fields { grid-template-columns: 1fr 1fr; }
  .field-sm { max-width: none; }
  .quote-meta-actions .btn { width: 100%; }
}

/* ---- Phase header (now a container div) ---- */
.phase-header-left { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; }
.phase-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.phase-header { cursor: default; }

/* ---- Subtask row (the whole row toggles) ---- */
.subtask-row { cursor: pointer; }
.subtask-row.is-open { background: var(--k-f8fafc); }
.subtask-left { min-width: 0; }
.subtask-chevron { display: inline-flex; color: var(--muted); }
.subtask-chevron .icon { width: 14px; height: 14px; }

/* ---- Add rows (tasks / phases) ---- */
.add-row { display: flex; gap: 8px; align-items: center; }
.add-task-row { padding: 10px 16px; border-top: 1px dashed var(--line); background: var(--k-fcfcfb); }
.add-phase-row { margin-top: 4px; margin-bottom: 12px; }
.restore-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--k-fffbeb); border: 1px solid #fde68a; color: var(--k-92400e);
  border-radius: 10px; padding: 10px 14px; margin-top: 10px; font-size: 12.5px; line-height: 1.5;
}
.restore-row .btn { flex-shrink: 0; }
.add-input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 13px; background: var(--k-ffffff);
}
.add-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ---- Price lists: editable names + add forms ---- */
.prices-intro { font-size: 12.5px; color: var(--muted); background: var(--primary-light); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
.price-name-input {
  border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; font-size: 13px; color: var(--k-334155); width: 100%; background: transparent;
}
.price-name-input:hover { border-color: var(--line); }
.price-name-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); background: var(--k-ffffff); }
.price-unit-input {
  border: 1px solid transparent; border-radius: 5px; padding: 2px 5px; font-size: 10px; color: var(--k-a8a29e); width: 90px; background: transparent; margin-top: 2px;
}
.price-unit-input:hover { border-color: var(--line); }
.price-unit-input:focus { outline: none; border-color: var(--primary); background: var(--k-ffffff); }

.add-item-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px dashed var(--line); background: var(--k-fcfcfb);
}
.add-item-form input { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; background: var(--k-ffffff); }
.add-item-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.add-item-form > input[data-newitem$="-name"] { flex: 1; min-width: 140px; }
.add-item-form .add-rate { width: 84px; }
.add-item-form .add-unit { width: 84px; }
.add-item-form-mat > input[data-newitem$="-category"] { width: 150px; }

/* ---- Saved Quotes ---- */
.quotes-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.quotes-list { display: flex; flex-direction: column; gap: 10px; }
.quote-card {
  display: flex; align-items: center; gap: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
}
.quote-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.quote-card-main { flex: 1; min-width: 0; cursor: pointer; }
.quote-card-name { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.quote-card-sub { font-size: 12px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quote-card-total { font-size: 17px; font-weight: 700; color: var(--primary); flex-shrink: 0; }
.quote-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pill { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--primary); background: var(--primary-light); padding: 2px 6px; border-radius: 20px; }
@media (max-width: 720px) {
  .quote-card { flex-wrap: wrap; }
  .quote-card-actions { width: 100%; }
  .quote-card-actions .btn { flex: 1; }
}

/* ---- Company form ---- */
.company-form { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; max-width: 720px; }
.logo-block { display: flex; align-items: center; gap: 20px; margin: 18px 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.logo-preview {
  width: 120px; height: 120px; border: 1px dashed var(--line); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--k-fcfcfb); flex-shrink: 0;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty { font-size: 12px; color: var(--muted-2); }
.logo-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.file-btn { position: relative; overflow: hidden; }
.logo-hint { margin-top: 2px; }
/* invite link */
.invite-block { background: var(--k-f8fafc); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 22px; }
.invite-hd { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); margin-bottom: 4px; }
.invite-row { display: flex; gap: 8px; margin-top: 10px; }
.invite-url { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; background: var(--k-ffffff); color: var(--k-334155); font-family: inherit; }
.invite-note { margin: 8px 0 0; }

.company-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-wide { grid-column: 1 / -1; }
.company-fields textarea { resize: vertical; font-family: inherit; }
@media (max-width: 620px) { .company-fields { grid-template-columns: 1fr; } }

/* ---- Export / print document ---- */
/* The export toolbar stacks: one row for the sections, then a row for each
   set of sub-options. Everything wraps rather than running off the side —
   a job with sixteen phases has sixteen chips, and they have to go somewhere. */
.export-toolbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line);
  max-height: 60vh; overflow-y: auto;
}
.ex-tb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.ex-tb-sub {
  padding-top: 8px; border-top: 1px dashed var(--line);
  align-items: flex-start;
}
.ex-tb-end { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 340px; min-width: 0; }
/* A pair of buttons that read as one control. */
.ex-seg { display: inline-flex; background: var(--k-f5f5f4); border-radius: 7px; padding: 2px; gap: 2px; }
.ex-seg .ex-preset { font-size: 11px; padding: 2px 8px; }
@media (max-width: 700px) {
  .ex-tb-end { margin-left: 0; }
}
.export-doc {
  max-width: 800px; margin: 24px auto 60px; background: var(--k-ffffff); color: var(--k-0f172a);
  border: 1px solid var(--line); border-radius: 8px; padding: 44px 48px;
  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
}
.ex-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 22px; border-bottom: 2px solid var(--primary); }
.ex-company { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.ex-logo { max-width: 120px; max-height: 80px; object-fit: contain; }
.ex-company-name { font-size: 20px; font-weight: 700; color: var(--primary); }
.ex-company-lines { font-size: 12px; color: var(--k-475569); line-height: 1.6; margin-top: 4px; }
.ex-title-block { text-align: right; flex-shrink: 0; }
.ex-title { font-size: 24px; font-weight: 800; letter-spacing: 0.06em; color: var(--k-0f172a); }
.ex-date { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ex-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 18px 0; font-size: 13.5px; }
.ex-meta .ex-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); font-weight: 700; margin-bottom: 2px; }
.ex-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 13px; }
.ex-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 8px 8px; }
.ex-table td { padding: 8px 8px; border-bottom: 1px solid var(--line-2); }
.ex-table .ex-num { width: 44px; color: var(--muted-2); }
.ex-table .ex-amt { text-align: right; width: 110px; white-space: nowrap; }
.ex-table tr.ex-phase td { font-weight: 700; color: var(--k-292524); background: var(--k-f8fafc); border-top: 1px solid var(--line); }
.ex-summary { margin-left: auto; width: 300px; max-width: 100%; }
.ex-sum-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--k-475569); }
.ex-sum-strong { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-weight: 600; color: var(--k-1e293b); }
.ex-sum-total { border-top: 2px solid var(--primary); margin-top: 6px; padding-top: 10px; font-size: 17px; font-weight: 800; color: var(--primary); }
.ex-notes { margin-top: 24px; font-size: 12.5px; color: var(--k-475569); line-height: 1.6; }
.ex-notes .ex-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); font-weight: 700; margin-bottom: 4px; }
.ex-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--muted-2); text-align: center; }

/* export toolbar options */
.ex-opts { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.ex-opt { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--k-475569); cursor: pointer; white-space: nowrap; }

/* extra export sections */
.ex-section { margin-top: 34px; page-break-inside: auto; }
.ex-h3 { font-size: 15px; font-weight: 700; color: var(--primary); margin: 0 0 2px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); }
.ex-sub { font-size: 11.5px; color: var(--muted); margin: 6px 0 10px; }
.exg-table td, .exg-table th { vertical-align: middle; }
.exg-d { white-space: nowrap; font-size: 11.5px; color: var(--k-475569); }
.exg-chart-h { width: 34%; }
.exg-track { position: relative; height: 13px; background: var(--k-f1f5f9); border-radius: 3px; }
.exg-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; min-width: 2px; }
.exg-bar-phase { top: 0; bottom: 0; opacity: 0.55; }
.exg-dep { display: block; font-size: 10px; color: var(--muted-2); }
.exm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }
.exm-indent { display: inline-block; width: 16px; }
.exm-plan td { background: var(--primary-bg); color: #fff; font-weight: 700; font-size: 11.5px; }
.exm-mat { font-size: 11px; color: var(--muted); }
.exm-total td { font-weight: 700; background: var(--k-f0fdf4); }
.exm-rollup td { background: var(--k-ecfdf5); color: var(--k-065f46); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.exm-total .exm-mat { color: var(--k-166534); }

/* marked-up plan images */
.exp-plan { margin-bottom: 20px; page-break-inside: avoid; }
.exp-plan-name { font-size: 12px; font-weight: 600; color: var(--k-334155); margin-bottom: 6px; }
.exp-img { width: 100%; border: 1px solid var(--line); border-radius: 6px; display: block; margin-bottom: 10px; }
.exp-pending { font-size: 12px; color: var(--muted-2); font-style: italic; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; }
@media (max-width: 620px) { .export-doc { padding: 24px 20px; } .ex-header { flex-direction: column; } .ex-title-block { text-align: left; } }

/* ---- Print ---- */
@media print {
  .no-print, .header { display: none !important; }
  body { background: var(--k-ffffff); }
  .export-doc {
    box-shadow: none; border: none; margin: 0; max-width: none; padding: 0; border-radius: 0;
    /* Keep the completed tint and badges — without this the browser prints
       every background white and the ticks all but vanish. */
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .ex-table tr.ex-phase > td { background: transparent; }
  /* …but a completed phase keeps its tint, which the rule above would strip. */
  .ex-table tr.ex-phase.ex-done > td { background: var(--k-f0fdf4); }
  .ex-done > td:first-child { box-shadow: inset 3px 0 0 var(--k-16a34a); }
  tr { break-inside: avoid; }
}

/* ---- Header account + sync status ---- */
.header-right { display: flex; align-items: center; gap: 14px; }
.account { display: flex; align-items: center; gap: 10px; }
.account-email { font-size: 12px; color: var(--muted); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap;
  background: var(--k-ecfdf5); color: var(--k-047857); border: 1px solid var(--k-a7f3d0);
}
.sync-badge[data-sync-status="saving"] { background: var(--k-fffbeb); color: var(--k-b45309); border-color: #fde68a; }
.sync-badge[data-sync-status="error"] { background: var(--k-fef2f2); color: var(--k-b91c1c); border-color: var(--k-fecaca); }
@media (max-width: 760px) {
  .account-email { display: none; }
  .header-inner { flex-wrap: wrap; }
}

/* ---- Auth / login screen ---- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 32px 28px; box-shadow: 0 8px 40px rgba(15,23,42,0.08);
  display: flex; flex-direction: column; gap: 6px;
}
.auth-brand { justify-content: center; margin-bottom: 8px; }
.boot-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 4px; }
.boot-details { margin-top: 14px; font-size: 12px; color: var(--muted); }
.boot-details summary { cursor: pointer; }
.boot-err {
  margin: 8px 0 0; padding: 10px; max-height: 220px; overflow: auto;
  background: var(--k-f8f7f6); border: 1px solid var(--line); border-radius: 8px;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--k-57534e);
}
.auth-title { font-size: 22px; font-weight: 700; color: var(--ink); text-align: center; margin: 0; letter-spacing: -0.01em; }
.auth-sub { font-size: 13px; color: var(--muted); text-align: center; margin: 0 0 12px; }
.auth-card .field { margin-bottom: 10px; }
.auth-card .btn-block { margin-top: 6px; }
.auth-msg { font-size: 12.5px; border-radius: 8px; padding: 9px 11px; margin-bottom: 6px; }
.auth-msg-error { background: var(--k-fef2f2); color: var(--k-b91c1c); border: 1px solid var(--k-fecaca); }
.auth-msg-ok { background: var(--k-ecfdf5); color: var(--k-047857); border: 1px solid var(--k-a7f3d0); }
.auth-switch { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.linkbtn { background: none; border: none; padding: 0; color: var(--primary); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.auth-splash { align-items: center; text-align: center; gap: 14px; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted-2); font-size: 11.5px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-fineprint { font-size: 11.5px; color: var(--muted-2); line-height: 1.6; margin: 0 0 14px; text-align: center; }
.auth-card .btn-block .icon-sm { width: 14px; height: 14px; }

/* ---- Plans / attachments card ---- */
.plans-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.plans-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plans-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--k-292524); }
.plans-title .icon-sm { width: 15px; height: 15px; color: var(--muted); }
.plan-upload { position: relative; overflow: hidden; }
.plan-upload.is-busy { opacity: 0.6; pointer-events: none; }
.plans-empty { font-size: 12.5px; color: var(--muted-2); font-style: italic; padding: 10px 0 4px; }
.plan-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-2); margin-top: 4px; }
.plan-file-icon { display: inline-flex; color: var(--danger); flex-shrink: 0; }
.plan-name { flex: 1; min-width: 0; font-size: 13px; color: var(--k-334155); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-size { font-size: 11px; color: var(--muted-2); flex-shrink: 0; }
/* Folders on Plans & Documents. */
.file-folder-in { flex: 0 0 116px; width: 116px; min-width: 0; box-sizing: border-box; font: inherit; font-size: 12px;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--k-ffffff); color: var(--k-334155); }
.file-folder-in:placeholder-shown { background: transparent; border-style: dashed; }
.file-fold + .file-fold { margin-top: 6px; }
.file-fold-head { display: flex; align-items: center; gap: 7px; padding: 8px 4px 6px; cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 700; color: var(--k-1c1917); border-radius: 6px; }
.file-fold-head:hover { background: var(--k-f5f5f4); }
.file-fold-head.is-loose { cursor: default; font-weight: 600; color: var(--muted); gap: 8px; }
.file-fold-head.is-loose:hover { background: none; }
.file-fold-ic { display: inline-flex; color: var(--k-a16207); }
.file-fold-name { cursor: text; }
.file-fold-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.file-fold-body { padding-left: 14px; }
.plan-bulk-move { display: inline-flex; align-items: center; gap: 6px; }
/* Links. */
.links-card .doc-row { flex-wrap: wrap; row-gap: 6px; }
.link-name { flex: 1 1 190px; min-width: 150px; padding: 3px 7px; }
.link-host { flex: 0 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.link-open { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.link-open .icon-sm { width: 13px; height: 13px; }
.link-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 4px; border-top: 1px solid var(--line-2); margin-top: 6px; }
.link-add input { font: inherit; font-size: 13px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--k-ffffff); min-width: 0; }
.link-add-name { flex: 1 1 170px; }
.link-add-url { flex: 2 1 260px; }
a.ph-doc { text-decoration: none; color: inherit; }
.plan-bulk-move .file-folder-in { flex-basis: 130px; width: 130px; }
/* With a folder box on each row, a name keeps room to be read and the buttons
   go onto a second line when the window's narrow. */
.plans-card .plan-row, .docs-card .doc-row { flex-wrap: wrap; row-gap: 6px; }
.plan-row .plan-name { flex: 1 1 170px; min-width: 140px; }
.doc-row .doc-name { flex: 1 1 190px; min-width: 150px; }

/* ---- No spinner arrows on number inputs (type the value instead) ---- */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Collapsible price-list sections ---- */
.price-table-header { cursor: pointer; user-select: none; }
.price-table-header:hover { background: var(--k-ececea); }
.price-cat-header { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.price-cat-header:hover { background: var(--k-e7e5e2); }
.collapse-chevron { display: inline-flex; align-items: center; color: var(--muted); flex-shrink: 0; }
.collapse-chevron .icon { width: 13px; height: 13px; }
.price-count { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--muted-2); background: var(--k-ffffff); border: 1px solid var(--line); border-radius: 20px; padding: 1px 7px; }
.price-cat-header .price-count { background: rgba(255,255,255,0.7); }

/* ---- "New version ready" bar ---- */
.update-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1200;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 12px 10px 16px;
  box-shadow: 0 8px 32px rgba(15,23,42,0.35); font-size: 13.5px; max-width: calc(100vw - 32px);
}
.update-bar .btn { background: var(--k-ffffff); color: var(--ink); border-color: var(--k-ffffff); }
.update-bar .btn:hover { background: var(--k-e2e8f0); }
.update-bar .icon-btn { color: var(--k-94a3b8); }
.update-bar .icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
@media print { .update-bar { display: none !important; } }

/* ---- Floating measurements bubble ---- */
.meas-fab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 800;
  display: flex; align-items: center; gap: 8px;
  background: var(--primary-bg); color: #fff; border: none;
  border-radius: 12px 0 0 12px; padding: 14px 12px 14px 14px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(15,23,42,0.25); font-family: inherit;
  max-width: 52px; overflow: hidden; white-space: nowrap;
  transition: max-width 0.22s ease, padding-right 0.22s ease, background-color 0.15s ease;
}
.meas-fab:hover, .meas-fab:focus-visible { max-width: 220px; padding-right: 18px; background: var(--brand-deep); outline: none; }
.meas-fab .icon-sm { width: 20px; height: 20px; flex-shrink: 0; }
.meas-fab-label { font-size: 13.5px; font-weight: 600; }
.meas-fab-badge {
  background: var(--k-ffffff); color: var(--primary); border-radius: 20px;
  font-size: 11px; font-weight: 700; padding: 2px 7px; flex-shrink: 0;
}
/* Keep the count visible while collapsed by tucking it under the icon */
.meas-fab:not(:hover) .meas-fab-badge {
  position: absolute; top: 6px; right: 4px; padding: 1px 5px; font-size: 9.5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
@media (max-width: 700px) {
  .meas-fab { top: auto; bottom: 20px; transform: none; border-radius: 12px; right: 16px; }
}
@media print { .meas-fab { display: none !important; } }

/* ---- Measurements popup (quote screen) ---- */
.ms-dim { position: fixed; inset: 0; z-index: 900; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ms-modal { background: var(--card); border-radius: 16px; padding: 22px 24px; width: 620px; max-width: 100%; max-height: 82vh; overflow-y: auto; box-shadow: 0 16px 56px rgba(15,23,42,0.3); }
.ms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ms-body { margin-top: 16px; }
.ms-plan { margin-bottom: 20px; }
.ms-plan-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--k-292524); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ms-plan-hd .icon-sm { color: var(--danger); }
.ms-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ms-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); font-weight: 700; padding: 8px 6px 4px; }
.ms-table td { padding: 8px 6px; border-bottom: 1px solid var(--line-2); color: var(--k-334155); }
.ms-table .ms-num { text-align: right; }
.ms-table th.ms-num { text-align: right; }
.ms-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.ms-mat { display: block; font-size: 10.5px; color: var(--muted-2); }
.ms-total { font-weight: 700; color: var(--primary); white-space: nowrap; }
@media (max-width: 620px) { .ms-modal { padding: 18px 16px; } }

/* ---- New project picker ---- */
.np-modal { width: 560px; }
.np-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.np-choice {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--line); background: var(--k-ffffff); border-radius: 12px;
  padding: 16px; cursor: pointer; font-family: inherit;
}
.np-choice:hover { border-color: var(--primary); background: var(--primary-light); }
.np-choice-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.np-choice-sub { font-size: 11px; color: var(--primary); font-weight: 600; }
.np-choice-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
@media (max-width: 560px) { .np-choices { grid-template-columns: 1fr; } }
.np-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; }
.np-warn { color: var(--k-b45309); }

/* ---- Timeline / Gantt ---- */
.tl-empty { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 28px; text-align: center; }
.tl-empty p { margin: 0 0 8px; }

/* compact single-row header so the chart gets the height */
.tl-bar-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.tl-facts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tl-fact { display: inline-flex; align-items: baseline; gap: 6px; }
.tl-fact b { font-size: 16px; font-weight: 700; color: var(--primary); }
.tl-fact i { font-size: 10.5px; font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); font-weight: 600; }
.tl-startdate { display: inline-flex; align-items: center; gap: 6px; }
.tl-startdate > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); font-weight: 600; }
.tl-startdate input { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12.5px; font-family: inherit; }
.tl-footbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.tl-helpnote { margin-top: 8px; font-size: 12px; line-height: 1.6; background: var(--primary-light); border-radius: 9px; padding: 9px 12px; }

.tl-head-controls { display: flex; align-items: flex-end; gap: 10px; }
.tl-zoom { display: flex; gap: 4px; }
.tl-zoom .btn { min-width: 32px; justify-content: center; font-size: 15px; line-height: 1; }

.tl-chart { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* fill the window rather than a fixed slice of it.
   pan-x/pan-y lets one finger scroll while we handle two-finger pinch. */
/* Column flex so the body can stretch past the last row — that keeps the day /
   week rules running the full height of the pane instead of stopping short. */
.tl-scroll { overflow: auto; height: calc(100vh - 205px); min-height: 300px; touch-action: pan-x pan-y;
  display: flex; flex-direction: column; align-items: flex-start; }
.tl-axis { display: flex; position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--line); background: var(--k-fafaf9); padding: 6px 0; }
.tl-ticks { height: 18px; }
.tl-tick { position: absolute; top: -6px; bottom: -6px; border-left: 1px dashed var(--k-e2e0dd); }
.tl-tick-label { position: absolute; left: 5px; top: 0; font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* week gridlines continue down the chart, softly */
/* Day / week / month rules. The gradient layers themselves are set inline per
   render, since their spacing follows the current zoom. */
.tl-body { background-repeat: repeat; background-position: 0 0; flex: 1 0 auto; }
.tl-body::before { content: none; }
/* no row rules — the bars carry the structure */
.tl-row, .tl-phase-row { display: flex; align-items: center; }
/* Row depth is adjustable — drag the bottom edge of a phase bubble. */
.tl-track { position: relative; height: var(--tl-row, 40px); flex-shrink: 0; }
.tl-phase-row .tl-track { height: calc(var(--tl-row, 40px) * 1.5); }

/* phase "bubble" — pastel fill with a drawn outline */
.tl-bubble {
  position: absolute; top: 5px; bottom: 5px; min-width: 26px;
  border: 2px solid; border-radius: 13px; cursor: grab;
  display: flex; align-items: center; gap: 7px; padding: 0 11px 0 7px;
  box-shadow: 0 1px 4px rgba(15,23,42,0.10);
  overflow: hidden; user-select: none;
}
.tl-bubble:hover { filter: brightness(0.97); box-shadow: 0 2px 8px rgba(15,23,42,0.16); }
.tl-bubble-chev { display: inline-flex; align-items: center; opacity: 0.75; flex-shrink: 0; }
.tl-bubble-chev .icon { width: 13px; height: 13px; }
.tl-bubble-text { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-bubble-count {
  font-size: 9.5px; font-weight: 700; flex-shrink: 0;
  background: rgba(255,255,255,0.75); border-radius: 20px; padding: 1px 6px;
}
.tl-bubble-days { font-size: 10px; font-weight: 600; opacity: 0.75; white-space: nowrap; margin-left: auto; flex-shrink: 0; }
/* Zoomed out there's no room for the words. Drop them rather than smear them —
   the rail down the side still names every phase. */
.tl-bubble.is-small { padding: 0 6px 0 5px; gap: 5px; }
.tl-bubble.is-small .tl-bubble-days,
.tl-bubble.is-small .tl-bubble-text { display: none; }
.tl-bubble.is-tiny { padding: 0 3px; gap: 0; justify-content: center; }
.tl-bubble.is-tiny .tl-bubble-days,
.tl-bubble.is-tiny .tl-bubble-text,
.tl-bubble.is-tiny .tl-bubble-count,
.tl-bubble.is-tiny .tl-bubble-chev { display: none; }
/* collapsed phases show a pip per task inside the bubble */
.tl-pip { position: absolute; bottom: 7px; height: 3px; border-radius: 2px; opacity: 0.85; pointer-events: none; }

/* task bars */
.tl-bar { position: absolute; top: 2px; bottom: 2px; min-width: 8px; border-radius: 8px; display: flex; align-items: center; overflow: hidden; }
.tl-task-bar { cursor: grab; user-select: none; box-shadow: 0 1px 2px rgba(15,23,42,0.15); }
.tl-task-bar:hover { filter: brightness(1.06); }
.tl-bar-text { font-size: 11px; color: #fff; font-weight: 700; padding: 0 9px; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 1px rgba(0,0,0,0.15); }
.tl-handle { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; }
.tl-handle-l { left: -2px; border-radius: 6px 0 0 6px; }
.tl-handle-r { right: -2px; border-radius: 0 6px 6px 0; }
.tl-task-bar:hover .tl-handle { background: rgba(255,255,255,0.45); }
body.tl-dragging { cursor: grabbing; user-select: none; }
body.tl-dragging .tl-bubble, body.tl-dragging .tl-task-bar { cursor: grabbing; }

/* A touch that lands on a bar drags it rather than scrolling the chart. */
.tl-bubble, .tl-task-bar { touch-action: none; }

/* Finger-sized grab targets on touch devices, where there's no hover. */
@media (pointer: coarse) {
  .tl-handle { width: 24px; }
  .tl-handle-l { left: -8px; }
  .tl-handle-r { right: -8px; }
  .tl-task-bar .tl-handle { background: rgba(255,255,255,0.28); }
  .tl-linkdot { opacity: 1; width: 20px; height: 20px; right: -11px; border-width: 3px; }
  .tl-track { height: 40px; }
  .tl-phase-row .tl-track { height: 54px; }
}

/* hover card */
.tl-tip {
  position: fixed; z-index: 1500; display: none; pointer-events: none;
  background: #0f172a; color: #fff; border-radius: 11px; padding: 10px 13px;
  box-shadow: 0 10px 34px rgba(15,23,42,0.35); max-width: 300px;
}
.tl-tip-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.tl-tip-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.tl-tip-row { font-size: 11.5px; color: #cbd5e1; line-height: 1.55; }
.tl-tip-link { color: #93c5fd; }
.tl-tip-hint { font-size: 10.5px; color: var(--k-64748b); margin-top: 6px; padding-top: 6px; border-top: 1px solid #1e293b; }

/* dependency arrows */
.tl-body { position: relative; }
.tl-links { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
/* the fat transparent path makes arrows easy to grab; click one to unlink */
.tl-link-hit { pointer-events: stroke; cursor: pointer; }
.tl-link-hit:hover + .tl-link-line { stroke: #e11d48; stroke-width: 2.5; }
.tl-link-hit:hover + .tl-link-line + .tl-link-head { fill: #e11d48; }
.tl-bubble, .tl-task-bar { z-index: 2; }

/* trade legend */
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.tl-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.tl-key-dot { width: 11px; height: 11px; border-radius: 3px; }

/* link dot: drag from here onto another task to link them */
.tl-linkdot {
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--k-ffffff); border: 2px solid var(--primary);
  cursor: crosshair; opacity: 0; transition: opacity 0.12s ease; z-index: 4;
}
.tl-task-bar:hover .tl-linkdot { opacity: 1; }
.tl-linkdot:hover { transform: translateY(-50%) scale(1.25); }
.tl-task-bar.is-link-target { outline: 3px solid var(--primary); outline-offset: 2px; }
body.tl-linking { cursor: crosshair; user-select: none; }
body.tl-linking .tl-linkdot { opacity: 1; }

/* badge on a bar that has predecessors — click to edit its links */
.tl-dep-badge {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  font-size: 9.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.28);
  border: none; border-radius: 20px; padding: 1px 5px; margin-left: 6px; cursor: pointer;
  font-family: inherit;
}
.tl-dep-badge:hover { background: rgba(0,0,0,0.45); }
.tl-dep-badge .icon-sm { width: 9px; height: 9px; }

/* ---- Delays ---- */
.tl-delay-badge {
  display: inline-flex; align-items: center; flex-shrink: 0; font-family: inherit;
  font-size: 9.5px; font-weight: 700; color: var(--k-7c2d12); background: var(--k-fed7aa);
  border: none; border-radius: 20px; padding: 1px 5px; margin-left: 6px; cursor: pointer;
}
.tl-delay-badge:hover { background: #fdba74; }
/* Only offered on hover — every bar has one, and they'd be noise otherwise. */
.tl-delay-add {
  display: inline-flex; align-items: center; flex-shrink: 0; opacity: 0;
  border: none; background: rgba(0,0,0,0.28); color: #fff;
  border-radius: 20px; padding: 1px 4px; margin-left: 6px; cursor: pointer;
  transition: opacity 0.12s ease;
}
.tl-task-bar:hover .tl-delay-add, .tl-delay-add:focus-visible { opacity: 1; }
.tl-delay-add .icon-sm { width: 10px; height: 10px; }
.tl-delay-add:hover { background: rgba(0,0,0,0.5); }
/* The slipped run-up: where the task would have sat before it was delayed. */
.tl-slip {
  position: absolute; top: 50%; transform: translateY(-50%); height: 18px;
  border-radius: 4px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--k-fed7aa) 0 4px, transparent 4px 8px);
  border: 1px dashed #fb923c;
}
.tl-bar.is-delayed { box-shadow: 0 0 0 1.5px #f97316; }

/* Completed work on the timeline: hatched over, with a tick on the phase. */
.tl-bar.is-done::after {
  content: "✓"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.tl-bar.is-done {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.32) 0 5px, transparent 5px 10px) !important;
  opacity: 0.72;
}
.tl-bubble.is-done { box-shadow: inset 0 0 0 2px var(--k-16a34a); }
.tl-done-tick { flex: none; font-size: 11px; font-weight: 800; color: var(--k-16a34a); margin-right: 2px; }
.tl-fact-late b { color: var(--k-c2410c); }
.dly-modal { max-width: 420px; }
.dly-note { font-size: 12px; margin: 4px 0 0; }
.dly-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ---- Export presets ---- */
.ex-presets { display: flex; gap: 4px; background: var(--k-f5f5f4); border-radius: 8px; padding: 3px; }
.ex-preset {
  border: none; background: transparent; border-radius: 6px; cursor: pointer;
  padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--muted); font-family: inherit;
}
.ex-preset.is-on { background: var(--k-ffffff); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* link picker */
.lk-modal { width: 520px; }
.lk-list { margin-top: 14px; max-height: 50vh; overflow-y: auto; }
.lk-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.lk-row:hover { background: var(--k-f8fafc); }
.lk-row.is-on { background: var(--primary-light); }
.lk-row.is-off { opacity: 0.45; cursor: not-allowed; }
.lk-num { font-size: 11px; color: var(--muted-2); width: 44px; flex-shrink: 0; }
.lk-name { flex: 1; min-width: 0; color: var(--k-334155); }
.lk-phase { display: block; font-size: 10.5px; color: var(--muted-2); }
.lk-warn { font-size: 10px; color: var(--danger); flex-shrink: 0; }

.tl-foot { margin-top: 12px; }
@media (max-width: 700px) {
  .tl-label { width: 150px; }
  .tl-head { flex-direction: column; align-items: stretch; }
  .tl-head-controls { flex-wrap: wrap; }
}

/* ---- Takeoff viewer ---- */
.tk-modal { position: fixed; inset: 0; z-index: 1000; background: #1f2937; display: flex; flex-direction: column; }
.tk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #111827; color: #e5e7eb; border-bottom: 1px solid #374151; flex-shrink: 0; }
.tk-bar-l, .tk-bar-r { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.tk-bar-r { justify-content: flex-end; }
.tk-bar-c { display: flex; align-items: center; gap: 6px; }
.tk-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.tk-page { font-size: 12px; color: var(--k-9ca3af); min-width: 44px; text-align: center; }
.tk-sep { width: 1px; height: 20px; background: #374151; margin: 0 4px; }
.tk-btn { border: 1px solid #374151; background: #1f2937; color: #e5e7eb; border-radius: 7px; padding: 6px 11px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.tk-btn:hover { background: #374151; }
.tk-btn-primary { background: var(--primary-bg); border-color: var(--primary); color: #fff; }
.tk-btn-primary:hover { background: var(--brand-deep); }
.tk-ico { padding: 6px 10px; font-size: 15px; line-height: 1; min-width: 32px; }
.tk-btn-add { width: 100%; border-style: dashed; margin-top: 8px; }

.tk-body { flex: 1; display: flex; min-height: 0; }

/* page rail — drag its edge to read the pages properly */
.tk-thumbs { display: none; width: 132px; flex-shrink: 0; background: #111827; overflow-y: auto; padding: 8px; gap: 8px; flex-direction: column; }
.tk-modal.show-thumbs .tk-thumbs { display: flex; }
.tk-grip-l { display: none; }
.tk-modal.show-thumbs .tk-grip-l { display: flex; }
.tk-thumb { position: relative; border: 2px solid transparent; border-radius: 7px; cursor: pointer; background: #1f2937; padding: 4px; }
.tk-thumb:hover { border-color: #4b5563; }
.tk-thumb.is-current { border-color: #60a5fa; }
.tk-thumb-img { min-height: 60px; display: flex; align-items: center; justify-content: center; background: var(--k-ffffff); border-radius: 4px; overflow: hidden; }
.tk-thumb-img img { width: 100%; display: block; }
.tk-thumb-n { display: block; text-align: center; font-size: 10.5px; color: var(--k-9ca3af); margin-top: 3px; font-weight: 600; }
.tk-thumb.is-current .tk-thumb-n { color: #93c5fd; }
.tk-thumb-dot { display: none; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px #1f2937; }
.tk-thumb.has-work .tk-thumb-dot { display: block; }

/* page jump box */
.tk-pagebox { display: inline-flex; align-items: center; gap: 3px; }
.tk-pageinput {
  width: 40px; text-align: center; font-size: 12px; padding: 5px 2px;
  background: #1f2937; color: #e5e7eb; border: 1px solid #374151; border-radius: 6px; font-family: inherit;
}
.tk-pageinput:focus { outline: none; border-color: #60a5fa; }
.tk-pageof { font-size: 12px; color: var(--k-9ca3af); }

/* snap toggle */
.tk-snap { font-size: 12px; padding: 6px 10px; opacity: 0.55; }
.tk-snap.is-on { opacity: 1; background: var(--primary-bg); border-color: var(--k-a54b24); color: #fff; }

/* detected scale prompt */
.tk-found {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--k-ecfdf5); border: 1px solid var(--k-a7f3d0); color: var(--k-065f46);
  border-radius: 9px; padding: 9px 10px; font-size: 12px; margin-bottom: 8px; line-height: 1.45;
}
.tk-found-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-found .tk-btn { padding: 5px 10px; font-size: 11.5px; flex-shrink: 0; }
.tk-found-quiet { background: var(--k-f8fafc); border-color: var(--line); color: var(--muted); }
.linkish { background: none; border: none; padding: 0; color: var(--primary); font-weight: 600; cursor: pointer; font-size: 12px; font-family: inherit; text-decoration: underline; }
.tk-snapinfo { font-size: 11px; color: var(--muted-2); margin-top: 8px; line-height: 1.5; }

/* pulse after jumping to a measurement */
@keyframes tk-flash-pulse {
  0%   { r: 12; opacity: 0.9; stroke-width: 4; }
  70%  { r: 46; opacity: 0;   stroke-width: 1; }
  100% { r: 46; opacity: 0;   stroke-width: 1; }
}
.tk-flash { animation: tk-flash-pulse 1.1s ease-out 2; transform-box: fill-box; }
.tk-run[data-run-row] { cursor: default; }
.tk-run[data-run-row]:hover { background: var(--k-f1f5f9); border-radius: 6px; }

/* Plans tab */
.plans-head-row { margin-bottom: 16px; }
.plans-measured { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.plans-measured .ex-table { margin-bottom: 0; }
/* Measured so far, in the plan viewer's folders. */
.pm-table { table-layout: auto; }
.pm-ind { display: inline-block; width: calc(var(--pmd, 0) * 18px); }
.pm-plan td { padding-top: 12px !important; font-weight: 700; font-size: 13px; color: var(--k-1c1917); border-bottom: 1px solid var(--line); }
.pm-plan-ic { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--danger); }
.pm-folder { cursor: pointer; user-select: none; }
.pm-folder td { font-weight: 650; color: var(--k-1c1917); }
.pm-folder:hover td { background: var(--k-f5f5f4); }
.pm-folder .collapse-chevron { display: inline-flex; vertical-align: -2px; margin-right: 2px; }
.pm-folder-ic { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--k-a16207); }
.pm-folder .price-count { margin-left: 8px; }
/* Fold all / Unfold all on Build. */
.fold-both { display: inline-flex; gap: 6px; }
.fold-both .btn .icon-sm, .ph-foldall .icon-sm { width: 13px; height: 13px; }
.ph-foldall { display: flex; gap: 8px; margin: 0 0 10px; }
.ph-foldall button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--k-ffffff); font: inherit; font-size: 13px; color: var(--k-1c1917); }

/* collapse / hide measurements */
.tk-sec-hd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-sec-tools { display: inline-flex; gap: 10px; text-transform: none; letter-spacing: 0; }
.tk-sec-tools .linkish { font-size: 10.5px; font-weight: 600; text-decoration: none; }
.tk-sec-tools .linkish:hover { text-decoration: underline; }
.tk-item-chev {
  border: none; background: none; padding: 0 2px; cursor: pointer;
  color: var(--k-94a3b8); font-size: 10px; line-height: 1; flex-shrink: 0;
}
.tk-item-chev:hover { color: var(--primary); }
.tk-item-eye { color: #cbd5e1; display: inline-flex; align-items: center; }
.tk-item-eye:hover { color: var(--primary); }
.tk-item-eye.is-off { color: var(--danger); }
.tk-eye { width: 13px; height: 13px; }

/* rename / recolour a measurement */
.tk-item-edit { color: var(--k-94a3b8); font-size: 11px; }
.tk-item-edit:hover { color: var(--primary); }
.tk-swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.tk-swatch-pick { width: 100%; aspect-ratio: 1; border: 2px solid transparent; border-radius: 7px; cursor: pointer; padding: 0; }
.tk-swatch-pick:hover { transform: scale(1.12); }
.tk-swatch-pick.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--k-ffffff) inset; }

/* naming an individual run */
.tk-run-name { cursor: pointer; border-radius: 4px; padding: 1px 3px; margin-left: -3px; }
.tk-run-name:hover { background: var(--primary-light); color: var(--primary); }

/* per-run (per-wall) settings */
.tk-run-edit { color: var(--k-94a3b8); font-size: 11px; }
.tk-run-edit:hover { color: var(--primary); }
.tk-run-own { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary); background: var(--primary-light); border-radius: 20px; padding: 0 5px; }
.tk-runparams { background: var(--k-ffffff); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; margin: 2px 0 7px 0; }
.tk-runparams-hd { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-2); font-weight: 700; margin-bottom: 6px; }
.tk-runparams-hd .linkish { font-size: 9.5px; text-transform: none; letter-spacing: 0; }
.tk-cf.is-own input { border-color: var(--primary); background: var(--primary-light); }
.tk-out-n { font-size: 10px; font-weight: 700; color: var(--primary); }

/* assembly calculator */
.tk-calc { background: var(--k-f8fafc); border: 1px solid var(--line); border-radius: 10px; margin: 6px 0 10px 26px; padding: 8px 10px; }
.tk-calc.is-shut { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 11.5px; color: var(--k-475569); }
.tk-calc.is-shut:hover { border-color: var(--primary); }
.tk-calc-sum { font-weight: 700; color: var(--primary); font-size: 11.5px; }
.tk-calc-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--k-334155); margin-bottom: 8px; }
.tk-calc-title { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.tk-calc-ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--primary); }
.tk-calc.is-shut .tk-calc-ico { color: var(--muted); }
.tk-calc.is-shut:hover .tk-calc-ico { color: var(--primary); }
.tk-calc-qty { font-size: 11.5px; color: var(--primary); }
.tk-calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 9px; }
.tk-cf { display: flex; flex-direction: column; gap: 2px; }
.tk-cf > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted-2); font-weight: 600; }
.tk-cf input, .tk-cf select { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 11.5px; font-family: inherit; width: 100%; }
.tk-cf-bool { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 6px; font-size: 11.5px; color: var(--k-334155); }
.tk-cf-bool input { width: auto; }
.tk-calc-outs { border-top: 1px solid var(--line); padding-top: 7px; }
.tk-out { margin-bottom: 7px; }
.tk-out-top { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.tk-out-label { color: var(--k-334155); }
.tk-out-qty { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Floating tool palette over the plan */
.tk-tools {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: rgba(255,255,255,0.96); border: 1px solid var(--k-e7e5e4); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.tk-tool {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 7px; color: var(--k-57534e); cursor: pointer; padding: 0;
}
.tk-tool svg { width: 17px; height: 17px; display: block; }
.tk-tool:hover { background: var(--k-f5f5f4); color: var(--k-1c1917); }
.tk-tool.is-on { background: var(--primary-bg); color: #fff; }
.tk-tool.is-armed { color: var(--danger); }
.tk-tool.is-armed:hover { background: var(--k-fef2f2); }
.tk-tools-sep { height: 1px; background: var(--k-e7e5e4); margin: 3px 2px; }
.tk-stage { position: relative; }
.tk-stage.tool-pan { cursor: grab; }
.tk-stage.tool-pan.is-panning { cursor: grabbing; }
@media (max-width: 760px) { .tk-tools { top: 8px; left: 8px; } }

/* What the drawn shape measures, shown above the calculator's fields */
.tk-dimhint {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--k-57534e); background: var(--k-f5f5f4);
  border-radius: 7px; padding: 6px 9px; margin: 0 0 8px;
}
.tk-dimhint.is-live { background: var(--k-e3ebe6); color: var(--k-7c2d12); }
.tk-dimhint b { font-variant-numeric: tabular-nums; }
.tk-dimhint i { font-style: normal; color: var(--k-a8a29e); }

/* Typing over a calculated quantity */
.tk-out-edit { display: flex; align-items: center; gap: 4px; flex: none; }
.tk-out-in {
  width: 78px; text-align: right; padding: 2px 5px; font-size: 12px;
  border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--k-1c1917);
  -moz-appearance: textfield; appearance: textfield;
}
.tk-out-in::-webkit-outer-spin-button, .tk-out-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tk-out-in:hover { border-color: var(--k-e7e5e4); background: var(--k-ffffff); }
.tk-out-in:focus { outline: none; border-color: var(--k-2a3d36); background: var(--k-ffffff); box-shadow: 0 0 0 3px var(--k-e3ebe6); }
.tk-out-unit { font-size: 11px; color: var(--k-a8a29e); min-width: 22px; }
.tk-out.is-overridden { background: var(--k-fffbeb); border-radius: 6px; }
.tk-out.is-overridden .tk-out-in { border-color: #fbbf24; background: var(--k-ffffff); font-weight: 700; color: var(--k-92400e); }
.tk-out-was { font-size: 10.5px; color: var(--k-a16207); margin: 2px 0 0 0; }
.tk-out-map { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.tk-out-map select { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; font-size: 10.5px; color: var(--muted); font-family: inherit; }
.tk-out-cost { font-size: 11px; color: var(--k-047857); font-weight: 700; white-space: nowrap; }
.tk-calc-total { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 7px; font-size: 12px; color: var(--k-334155); }
.tk-calc-total b { color: var(--primary); font-size: 13px; }
.tk-dialog.locked-type .tk-typepick { opacity: 0.55; pointer-events: none; }

/* measurement type picker */
.tk-typepick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tk-type {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 1px solid var(--line); background: var(--k-ffffff); border-radius: 9px;
  padding: 9px 4px; cursor: pointer; font-family: inherit;
}
.tk-type b { font-size: 11.5px; font-weight: 700; color: var(--k-334155); }
.tk-type i { font-size: 10px; font-style: normal; color: var(--muted-2); }
.tk-type:hover { border-color: var(--primary); }
.tk-type.is-on { border-color: var(--primary); background: var(--primary-light); }
.tk-type.is-on b { color: var(--primary); }
/* Centring a flex child that overflows makes the left/top edge unreachable by
   scrolling, so only centre on an axis when the page actually fits. */
.tk-stage {
  flex: 1; overflow: auto; background: #374151; padding: 16px;
  display: flex; justify-content: flex-start; align-items: flex-start;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;   /* one finger scrolls, two fingers pinch */
}
.tk-stage.center-x { justify-content: center; }
.tk-stage.center-y { align-items: center; }
.tk-canvas-wrap { position: relative; box-shadow: 0 4px 24px rgba(0,0,0,0.4); flex-shrink: 0; }
.tk-canvas { display: block; }
.tk-svg { position: absolute; top: 0; left: 0; cursor: crosshair; }
.tk-stage.can-pan .tk-svg { cursor: grab; }
.tk-stage.is-panning .tk-svg { cursor: grabbing; }

/* existing measurement points can be grabbed and nudged */
.tk-svg [data-vertex] { cursor: move; }
.tk-svg [data-vertex]:hover circle, .tk-svg circle[data-vertex]:hover { r: 6; stroke-width: 3; }
body.tk-nudging, body.tk-nudging .tk-svg { cursor: move !important; }
@media (pointer: coarse) { .tk-svg circle[data-vertex] { r: 7; stroke-width: 3; } }
.tk-zoomlbl { min-width: 54px; text-align: center; font-size: 12px; padding: 6px 8px; }

.tk-panel { width: 300px; flex-shrink: 0; background: var(--k-ffffff); overflow-y: auto; padding: 14px; }
.tk-sec { margin-bottom: 18px; }
.tk-sec-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); margin-bottom: 8px; }
.tk-scale-ok { font-size: 12.5px; color: var(--k-047857); margin-bottom: 8px; }
.tk-scale-no { font-size: 12.5px; color: var(--k-b45309); margin-bottom: 8px; }
.tk-empty { font-size: 12px; color: var(--muted-2); font-style: italic; padding: 4px 0 8px; }
.tk-panel .tk-btn { background: var(--k-ffffff); color: var(--k-334155); border-color: var(--line); }
.tk-panel .tk-btn:hover { background: var(--k-f8fafc); }
.tk-panel .tk-btn-primary { background: var(--primary-bg); color: #fff; border-color: var(--primary); }

.tk-item { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.tk-item:hover { background: var(--k-f8fafc); }
.tk-item.is-active { background: var(--primary-light); border-color: var(--primary); }
.tk-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.tk-item-name { flex: 1; min-width: 0; font-size: 13px; color: var(--k-1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-item-type { font-size: 10px; color: var(--muted-2); flex-shrink: 0; }
.tk-item-total { font-size: 12.5px; font-weight: 600; color: var(--primary); flex-shrink: 0; }
.tk-x { border: none; background: none; color: #cbd5e1; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.tk-x:hover { color: var(--danger); }

/* The live readout while you're drawing. Pinned to the top of the panel so the
   running total and the Finish button stay in sight however far down the list
   you've scrolled. */
.tk-measuring {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 0 12px;
  padding: 10px;
  background: var(--k-f8fafc);
  border: 1px solid var(--tk-accent, var(--k-c2410c));
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .13);
}
.tk-measuring-hd { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--k-334155); margin-bottom: 6px; }
.tk-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-bottom: 6px; }
.tk-running { font-size: 12.5px; color: var(--k-334155); margin-bottom: 8px; }
.tk-dims { display: block; font-size: 11px; color: var(--k-78716c); margin-top: 2px; min-height: 13px; }

/* Type a size instead of dragging it out */
.tk-typed { border-top: 1px solid var(--k-e7e5e4); margin: 8px 0; padding-top: 8px; }
.tk-typed-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--k-a8a29e); margin-bottom: 6px;
}
.tk-typed-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tk-tin {
  width: 74px; min-width: 0; flex: 1 1 60px; padding: 5px 7px; font-size: 12.5px;
  border: 1px solid var(--k-d6d3d1); border-radius: 6px; background: var(--k-ffffff); color: var(--k-1c1917);
}
.tk-tin:focus { outline: none; border-color: var(--k-2a3d36); box-shadow: 0 0 0 3px var(--k-e3ebe6); }
.tk-tunit { font-size: 12px; color: var(--k-78716c); flex: none; }
.tk-typed-row .tk-btn { flex: none; }
.tk-measuring-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-measuring-btns .tk-btn { padding: 6px 9px; font-size: 12px; }
.tk-scale-btns, .tk-free-btns { display: flex; gap: 6px; margin-top: 8px; }
.tk-scale-btns .tk-btn, .tk-free-btns .tk-btn { flex: 1; padding: 6px 8px; font-size: 12px; }
.tk-modes { display: flex; gap: 6px; margin-bottom: 8px; }
.tk-modes .tk-btn { flex: 1; padding: 5px 8px; font-size: 12px; }
.tk-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tk-presets .tk-btn { padding: 5px 9px; font-size: 12px; }
.tk-item-wrap { margin-bottom: 2px; }
.tk-sub-select { width: 100%; border: 1px dashed var(--line); border-radius: 7px; padding: 6px 8px; font-size: 12px; color: var(--k-475569); background: var(--k-ffffff); cursor: pointer; margin-bottom: 8px; font-family: inherit; }
.tk-run-n b { color: inherit; font-weight: 600; }
.tk-runs { padding: 2px 0 6px 26px; }
.tk-run { display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 0; font-size: 11.5px; color: var(--muted); }
.tk-run:hover { background: var(--k-f8fafc); border-radius: 6px; }
.tk-run-n { flex: 1; min-width: 0; }
.tk-run-v { color: var(--k-334155); font-weight: 600; }
.tk-run.is-neg .tk-run-n { color: var(--danger); }
.tk-run.is-neg .tk-run-v { color: var(--danger); }
.tk-item-depth { font-size: 10.5px; color: var(--primary); background: var(--primary-light); border-radius: 4px; padding: 1px 5px; cursor: pointer; flex-shrink: 0; }
.tk-item-depth:hover { text-decoration: underline; }
.tk-deduct { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--k-475569); margin-bottom: 8px; cursor: pointer; }
.tk-deduct.is-on { color: var(--danger); font-weight: 600; }
.tk-note-dot { width: 12px; height: 12px; border-radius: 3px; background: #fde68a; border: 1.5px solid var(--k-d97706); flex-shrink: 0; }
.tk-btn-dangerish { color: var(--danger); margin-right: auto; }
.tk-fld textarea { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; resize: vertical; }

.tk-dim { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 5; }
.tk-dialog { background: var(--k-ffffff); border-radius: 14px; padding: 20px; width: 340px; max-width: 92vw; box-shadow: 0 12px 48px rgba(0,0,0,0.4); }
.tk-dialog h3 { margin: 0 0 14px; font-size: 16px; color: var(--ink); }
.tk-fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.tk-fld > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); font-weight: 600; }
.tk-fld select, .tk-fld input { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; }
.tk-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
@media (max-width: 720px) { .tk-panel { width: 240px; } .tk-title { max-width: 30vw; } }

/* Roof sides: what each edge of the shape carries */
.tk-edgehint { border-top: 1px solid var(--k-e7e5e4); margin-top: 8px; padding-top: 8px; }
.tk-edgehint-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--k-a8a29e); margin-bottom: 6px;
}
.tk-edgekeys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; }
.tk-ekey {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--k-44403c);
  background: var(--k-f5f5f4); border-radius: 20px; padding: 2px 8px;
}
.tk-ekey i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tk-edgenote { font-size: 11px; color: var(--k-78716c); margin: 0 0 4px; line-height: 1.45; }

/* Single-use invites */
.inv-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--line-2);
}
.inv-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.inv-code { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.inv-label { font-size: 11.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inv-row.is-used .inv-code { color: var(--muted-2); font-weight: 600; text-decoration: line-through; }
.inv-used-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-2); margin-top: 14px;
}
.inv-add { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.inv-add .add-input { flex: 1 1 180px; min-width: 0; }
.invite-block code {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace; font-size: 11.5px;
  background: var(--k-f5f5f4); border-radius: 4px; padding: 1px 5px;
}

/* ---- Guided tour ---------------------------------------------------------
   The dim is a huge shadow cast outward from the cutout, so one element does
   both the hole and the darkening with nothing to keep in sync. */
.tour-root { position: fixed; inset: 0; z-index: 9000; }
.tour-hole {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(28, 25, 23, 0.58), 0 0 0 2px var(--primary);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}
.tour-card {
  position: fixed; z-index: 9001; width: min(370px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 50px rgba(28,25,23,.28); padding: 18px 20px 16px;
}
.tour-card.is-wide { width: min(440px, calc(100vw - 24px)); }
.tour-step {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 7px;
}
.tour-title { font-size: 18px; font-weight: 700; margin: 0 0 7px; letter-spacing: -.01em; color: var(--ink); }
.tour-body { font-size: 14px; line-height: 1.55; color: var(--muted); }
.tour-body b { color: var(--ink); font-weight: 650; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.tour-nav { display: flex; gap: 7px; }
.tour-skip {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--muted-2); text-decoration: underline;
}
.tour-skip:hover { color: var(--danger); }
.tour-btn { font-weight: 700; font-size: 13px; width: 24px; height: 24px; }
body.tour-on { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } }

/* ---- Resizable takeoff panel ---- */
.tk-grip {
  flex: none; width: 8px; cursor: col-resize; background: var(--k-e7e5e4);
  display: flex; align-items: center; justify-content: center; touch-action: none;
}
.tk-grip:hover, body.tk-resizing .tk-grip { background: var(--primary-bg); }
.tk-grip span { width: 2px; height: 30px; border-radius: 2px; background: rgba(0,0,0,.22); }
.tk-grip:hover span, body.tk-resizing .tk-grip span { background: rgba(255,255,255,.85); }
body.tk-resizing { cursor: col-resize; user-select: none; }
body.tk-resizing .tk-svg, body.tk-resizing .tk-elev-svg { pointer-events: none; }
.tk-btn-calc { display: inline-flex; align-items: center; gap: 5px; }
.tk-btn-calc svg { width: 13px; height: 13px; }

/* ---- Stud wall elevation ---- */
.tk-elev {
  --elev-face: #fdfcfb; --elev-line: #a8a29e; --elev-plate: #c8a06a;
  --elev-stud: #d9c3a0; --elev-nog: #cbb896; --elev-dim: #a8a29e;
  --elev-open: #ffffff; --elev-open-line: #2A3D36;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  margin: 0 0 10px; background: var(--k-fafaf9);
}
.tk-elev-hd {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--k-a8a29e);
}
.tk-elev-hd span { flex: 1; }
.tk-btn-sm { padding: 2px 8px; font-size: 11px; }
.tk-elev-svg { display: block; width: 100%; height: auto; max-height: 220px; overflow: visible; }
.tk-elev-empty, .tk-elev-note { font-size: 11px; color: var(--k-78716c); margin: 4px 0 0; line-height: 1.45; }
.tk-op { cursor: grab; touch-action: none; }
.tk-op:hover rect { fill: #E3EBE6; }
body.tk-nudging .tk-op { cursor: grabbing; }

/* ---- Elevation, full size ---- */
.tk-elevbig {
  position: fixed; inset: 0; z-index: 10000; background: rgba(28,25,23,.62);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.tk-elevbig-inner {
  background: var(--k-ffffff); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.35);
  width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
.tk-elevbig-hd {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); font-size: 14px; color: var(--k-1c1917);
}
.tk-elevbig-hd span { flex: 1; color: var(--k-78716c); font-size: 12.5px; }
.tk-elevbig-body { padding: 20px; overflow: auto; }
.tk-elev.is-big { border: none; background: none; padding: 0; margin: 0; }
.tk-elev.is-big .tk-elev-svg { max-height: min(62vh, 560px); }

/* ---- Opening editor rows under the elevation ---- */
.tk-oplist { display: flex; flex-direction: column-reverse; gap: 4px; margin-top: 8px; }
.tk-ophd, .tk-oprow {
  display: grid; grid-template-columns: 1fr 58px 10px 58px 58px 20px;
  gap: 4px; align-items: center;
}
.tk-ophd span {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--k-a8a29e); text-align: center;
}
.tk-ophd span:first-child { text-align: left; }
.tk-oprow select, .tk-oprow input {
  min-width: 0; width: 100%; font-size: 11.5px; padding: 3px 5px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--k-ffffff); color: var(--k-1c1917);
}
.tk-oprow input { text-align: right; font-family: "SFMono-Regular", Menlo, monospace; }
.tk-oprow input:focus, .tk-oprow select:focus { outline: none; border-color: var(--k-2a3d36); box-shadow: 0 0 0 2px var(--k-e3ebe6); }
.tk-opx, .tk-opsill { font-size: 11px; color: var(--k-a8a29e); text-align: center; }

/* ---- Calculator drawings in the export ---- */
.exm-figs { margin-top: 18px; }
.exm-figs-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-2); margin-bottom: 8px;
}
.exm-figgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.exm-fig { margin: 0; break-inside: avoid; }
.exm-fig-art {
  --elev-face: #fdfcfb; --elev-line: #a8a29e; --elev-plate: #c8a06a;
  --elev-stud: #d9c3a0; --elev-nog: #cbb896; --elev-dim: #a8a29e;
  --elev-open: #ffffff; --elev-open-line: #2A3D36;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--k-ffffff);
}
.exm-fig-art svg { display: block; width: 100%; height: auto; max-height: 190px; }
.exm-fig figcaption { font-size: 11px; color: var(--muted); margin-top: 5px; }
@media print { .exm-fig { break-inside: avoid; } }

/* ---- Legend under each exported drawing ---- */
.exm-key { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.exm-key li { display: grid; grid-template-columns: 16px auto 1fr; gap: 6px; align-items: baseline; font-size: 10.5px; color: var(--muted); }
.exm-key b { color: var(--ink); font-weight: 650; white-space: nowrap; }
.exm-key-mark { height: 0; border-top: 2px solid var(--k); align-self: center; }
.exm-key-mark.is-dashed { border-top-style: dashed; }
.exm-key-mark.is-solid { border-top-width: 4px; border-radius: 2px; }
.tk-elev-art { background: var(--k-ffffff); border-radius: 6px; padding: 4px; }
.tk-elev-art svg { display: block; width: 100%; height: auto; max-height: 190px; }
/* Full size means readable, not letter-boxed. A 71 m wall is eight times as
   wide as it is tall, so fitting it to the width squeezed it into a sliver
   about ninety pixels high with the doors too small to make out. It now takes
   the height it's given and runs off to the side, where the dialog scrolls
   along it. */
.tk-elev.is-big .tk-elev-art { overflow-x: auto; overflow-y: hidden; }
.tk-elev.is-big .tk-elev-art svg,
.tk-elev.is-big .tk-elev-svg {
  height: min(58vh, 520px);
  max-height: min(58vh, 520px);
  width: auto;
  max-width: none;
  min-width: 100%;
}

/* ---- Labour crews ---- */
.crew-body { padding: 4px 16px 14px; }
.crew-intro { font-size: 12px; margin: 0 0 12px; }
.crew-card {
  border: 1px solid var(--line); border-left: 3px solid var(--crew);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--k-ffffff);
}
.crew-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.crew-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--crew); flex: none; }
.crew-name {
  flex: 1 1 auto; min-width: 0; border: 1px solid transparent; border-radius: 5px;
  padding: 2px 5px; font-size: 13.5px; font-weight: 650; color: var(--ink); background: transparent;
}
.crew-name:hover { border-color: var(--line); background: var(--k-ffffff); }
.crew-name:focus { outline: none; border-color: var(--primary); background: var(--k-ffffff); box-shadow: 0 0 0 3px var(--primary-light); }
.crew-sum { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.crew-mem { display: grid; grid-template-columns: 46px 10px 1fr 62px 22px; gap: 6px; align-items: center; margin-bottom: 5px; }
.crew-n, .crew-pick {
  min-width: 0; width: 100%; font-size: 12.5px; padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--k-ffffff); color: var(--ink);
}
.crew-n { text-align: right; }
.crew-n:focus, .crew-pick:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.crew-x { font-size: 11px; color: var(--muted-2); text-align: center; }
.crew-rate { font-size: 12px; color: var(--muted); text-align: right; }
.btn-sm { padding: 3px 9px; font-size: 12px; }

/* A crew booked on a task */
.crew-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  color: var(--k-2a241e); background: var(--wash, var(--k-e7e5e4));
  border: 1px solid var(--crew); border-radius: 20px; padding: 0 8px; max-width: 100%;
}
.crew-chip i {
  font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--k-2a241e);
  border: 1.2px solid var(--k-2a241e); border-radius: 20px; padding: 0 5px; background: transparent;
}

/* Crew dots on the programme */
/* Team badges, drawn the way the ones on the wall are: a loose watercolour
   blob with a hand-inked ring over it and the team's mark inside. */
.tl-crews { display: inline-flex; align-items: center; gap: 3px; flex: none; margin-left: 6px; }
.tl-crew {
  position: relative; min-width: 17px; height: 17px; padding: 0 3px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; isolation: isolate;
}
/* the wash — deliberately bigger and off-centre, like paint under the pen */
.tl-crew::before {
  content: ""; position: absolute; z-index: -1;
  left: -3px; right: -4px; top: -3px; bottom: -4px;
  background: var(--wash, var(--k-d8d6d0));
  border-radius: 47% 53% 44% 56% / 55% 46% 54% 45%;
  transform: rotate(-7deg);
  opacity: .92;
}
/* the inked ring */
.tl-crew > b {
  display: flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 3px;
  border: 1.4px solid var(--k-2a241e); border-radius: 50%;
  background: transparent; color: var(--k-2a241e);
  font-size: 9px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
}
.tl-crew-more > b { font-size: 8px; }

/* The stage scrolls; the wrapper doesn't — so the tool palette stays put
   instead of sliding away with the plan when you zoom in. */
.tk-stagewrap { position: relative; flex: 1; display: flex; min-width: 0; min-height: 0; }
.tk-stagewrap .tk-stage { flex: 1; min-width: 0; }
.tk-stagewrap .tk-tools { position: absolute; top: 12px; left: 12px; z-index: 6; }

/* Crew badges sit half off the corner of a phase bubble, so they read as
   attached to it rather than crowding the label inside. */
.tl-crews-corner {
  position: absolute; top: 0; left: 0;
  transform: translate(-38%, -42%);
  margin: 0; z-index: 3; pointer-events: auto;
}
.tl-crews-corner .tl-crew { min-width: 19px; height: 19px; }
.tl-crews-corner .tl-crew > b { min-width: 19px; height: 19px; font-size: 9.5px; }
.tl-crews-corner .tl-crew::before { filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.tl-bubble { overflow: visible; }

/* Phase colour picker */
.tl-swatch {
  width: 13px; height: 13px; border-radius: 4px; flex: none; margin-left: 6px;
  border: 1.5px solid rgba(255,255,255,.85); cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.16); opacity: 0; transition: opacity .12s ease;
}
.tl-bubble:hover .tl-swatch, .tl-swatch:focus-visible { opacity: 1; }
.col-modal { max-width: 320px; }
.col-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 6px 0 4px; }
.col-modal .col-grid:not(.col-grid-crew) { grid-template-columns: repeat(6, 1fr); }
.col-chip {
  aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
.col-chip:hover { transform: scale(1.08); }
.col-chip.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--k-ffffff) inset; }
.col-note { font-size: 12px; margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .col-chip:hover { transform: none; } }

/* Editing a task or phase from the programme */
.tle-modal { max-width: 900px; width: min(900px, calc(100vw - 32px)); max-height: 88vh; display: flex; flex-direction: column; }
.tle-total { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--primary); }
.tle-sub { font-size: 12.5px; margin: -4px 0 10px; }
.tle-marks { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tle-marks .done-box { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tle-body { overflow: auto; min-height: 0; }
.tle-body .assign-wrap { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tle-tasks { margin-top: 14px; }
.tle-tasks-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-2); margin-bottom: 6px;
}
.tle-task {
  display: grid; grid-template-columns: 46px 1fr auto auto; gap: 10px; align-items: center; width: 100%;
  background: none; border: none; border-top: 1px solid var(--line-2); padding: 8px 4px;
  font: inherit; text-align: left; cursor: pointer;
}
.tle-task:hover { background: var(--primary-light); border-radius: 6px; }
.tle-num { font-size: 11.5px; color: var(--muted-2); }
.tle-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink); }
.tle-days { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tle-amt { font-size: 13px; color: var(--ink); white-space: nowrap; }

/* Grab the bottom edge of a phase bubble to make every row deeper or shallower. */
.tl-grow {
  position: absolute; left: 0; right: 0; bottom: -4px; height: 9px;
  cursor: ns-resize; touch-action: none; z-index: 4;
}
.tl-grow::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 3px; width: 26px; height: 3px; border-radius: 2px;
  background: currentColor; opacity: 0; transition: opacity .12s ease;
}
.tl-bubble:hover .tl-grow::after, body.tl-growing .tl-grow::after { opacity: .5; }
body.tl-growing { cursor: ns-resize; user-select: none; }

/* Phase bubbles take after the cards on the wall: a watercolour face with a
   pen line round it and softly uneven corners. */
.tl-bubble {
  border-width: 1.5px;
  border-radius: 10px 11px 9px 12px;
}
.col-chip { border-width: 2px; border-style: solid; }

/* Drag the empty chart to move around the programme */
.tl-scroll { cursor: grab; }
.tl-scroll.is-panning { cursor: grabbing; }
.tl-scroll .tl-bar, .tl-scroll .tl-bubble { cursor: grab; }
.tl-wheelmode { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.tl-panning, body.tl-panning * { user-select: none !important; -webkit-user-select: none !important; }

/* Phase cards on the Build page take the same colour as the programme. */
.phase-header.has-colour {
  background: var(--card);
  box-shadow: inset 3px 0 0 var(--card-edge);
}
.phase-swatch {
  width: 15px; height: 15px; border-radius: 5px; flex: none; padding: 0;
  border: 1.5px solid var(--k-d6d3d1); background: transparent; cursor: pointer;
}
.phase-swatch:hover { transform: scale(1.12); }
.phase-header .tl-crews, .subtask-left .tl-crews { margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .phase-swatch:hover { transform: none; } }
.crew-swatch {
  width: 16px; height: 16px; border-radius: 50%; flex: none; padding: 0;
  border: 1.5px solid var(--crew); cursor: pointer;
}
.crew-swatch:hover { transform: scale(1.12); }
.col-grid-crew { grid-template-columns: repeat(4, 1fr); }
.col-grid-crew .col-chip { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .crew-swatch:hover { transform: none; } }
.tl-key { display: inline-flex; align-items: center; gap: 6px; }
.tl-key em { font-style: normal; color: var(--muted-2); font-size: 11px; }
.tl-key .tl-crew { margin-left: 0; }
.invite-setup { background: var(--k-fdf9e3); border-left: 3px solid var(--k-2a3d36); border-radius: 0 8px 8px 0; padding: 12px 14px; }
.invite-setup p { font-size: 12.5px; color: var(--ink); margin: 0 0 8px; line-height: 1.5; }
.invite-setup p:last-child { margin-bottom: 0; }
.invite-setup .invite-row { margin-top: 10px; }

/* "Quoted for the whole phase" folds down to a single line */
.phase-subs-hd { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.phase-subs-hd:hover { color: var(--primary); }
.phase-subs.is-shut { padding-top: 6px; padding-bottom: 6px; }
.phase-subs.is-shut .phase-subs-hd { opacity: .65; }
.phase-subs.is-shut .phase-subs-hd:hover { opacity: 1; }

/* Read-only share links */
.share-modal { max-width: 620px; }
.share-opts { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 14px; }
.share-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.share-row { display: flex; align-items: center; gap: 8px; }
.share-main { flex: 1 1 auto; min-width: 0; }
.share-main .invite-url { width: 100%; }
.share-meta { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 3px; }
.share-note { font-size: 11.5px; margin-top: 10px; }

/* The visitor's page */
body.is-shared { background: var(--paper); }
.share-bar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--line);
}
.share-mark { width: 26px; height: 26px; display: flex; }
.share-mark svg { width: 100%; height: 100%; }
.share-bar-txt { flex: 1; font-size: 12.5px; color: var(--muted); }
.share-doc { margin: 22px auto 60px; }
.tl-task-bar .tl-grow { bottom: -3px; height: 7px; }
.tl-task-bar:hover .tl-grow::after { opacity: .5; }

/* A quieter second row under the login switch — the way in for a new user,
   present but not competing with the log-in button. */
.auth-switch-alt {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* Cut list column — how many pieces and how long each one is. Sits quieter
   than the quantity it supports. */
.exm-cut {
  text-align: right;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

/* Cost breakdown tables — same bones as the quote table, a size down so a
   breakdown reads as supporting detail rather than a second quote. */
.exb-table { font-size: 13px; }
.exb-table th { white-space: nowrap; }
.exb-crew {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}
.ex-h4 {
  margin: 20px 0 8px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The make-up of one task, tucked under its line. Indented and lighter so the
   quote still reads as a list of prices, with the detail sitting behind it. */
.exb-row > td { padding: 0 0 6px 0 !important; border-top: 0 !important; }
.exb-inner {
  width: 100%;
  border-collapse: collapse;
  margin: 2px 0 4px 14px;
  font-size: 12px;
  color: var(--muted);
}
.exb-inner td { padding: 2px 0; border: 0; vertical-align: top; }
.exb-what { white-space: nowrap; padding-right: 12px !important; }
.exb-detail { width: 100%; padding-right: 12px !important; }
.exb-amt { text-align: right; white-space: nowrap; }
@media print { .exb-inner { font-size: 10.5px; } }

/* "Comes in" — the sizes a material is actually sold in, under its price. */
.price-supply {
  flex: 1 0 100%;                  /* its own line under the name and rate */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0 26px;
  font-size: 12px;
  color: var(--muted);
}
.price-row-info { flex: 1 1 220px; }   /* names get room before anything wraps */
.price-supply-lbl { white-space: nowrap; }
.price-supply-sizes {
  width: 132px;
  padding: 3px 6px;
  font: inherit;
  font-family: var(--mono, ui-monospace, monospace);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: inherit;
}
.price-supply-word {
  width: 76px;
  padding: 3px 6px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: inherit;
}
.price-supply-unit { min-width: 18px; }
/* Who a priced material comes from. */
.mat-sup-input {
  width: 150px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: inherit;
}
.price-supply input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* "To order" — whole lengths/rolls to buy, the actionable end of a takeoff. */
.exm-order {
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink);
}

/* Five columns is a lot for one table. Fix the widths so the item name gets
   the room it needs and the numbers stay on one line. */
.exm-table { table-layout: fixed; width: 100%; }
.exm-table th:nth-child(1), .exm-table td:nth-child(1) { width: 29%; }
.exm-table th:nth-child(2), .exm-table td:nth-child(2) { width: 15%; }
.exm-table th:nth-child(3), .exm-table td:nth-child(3) { width: 18%; }
.exm-table th:nth-child(4), .exm-table td:nth-child(4) { width: 24%; }
.exm-table th:nth-child(5), .exm-table td:nth-child(5) { width: 14%; }
.exm-table td { overflow-wrap: anywhere; }
/* These two carry sentences, not single figures — let them wrap rather than
   spill over the column beside them. */
.exm-table .exm-cut, .exm-table .exm-order { white-space: normal; }
@media (max-width: 780px) {
  .exm-table { table-layout: auto; }
  .exm-table th:nth-child(3), .exm-table td:nth-child(3) { display: none; }
}

/* Which members of a calculator are drawn on the plan. A view switch only —
   the quantities underneath don't move. */
.tk-members { margin: 10px 0 2px; }
.tk-members-hd {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.tk-members-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tk-member {
  padding: 4px 9px;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.2;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: .55;
}
.tk-member.is-on {
  opacity: 1;
  color: var(--ink);
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.tk-member:hover { border-color: var(--accent); }

/* The show/hide chevron on a measurement — was a hard target on a tablet. */
.tk-item-chev {
  width: 26px;
  height: 26px;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex: 0 0 auto;
}
.tk-item-chev:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.tk-item-eye { width: 28px; height: 28px; }
.tk-item-eye svg { width: 17px; height: 17px; }

/* Folders of measurements — for a job too big to read as one list. */
.tk-folder { margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tk-folder-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 620;
}
.tk-folder-hd:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
.tk-folder-chev { width: 16px; text-align: center; opacity: .7; }
.tk-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-folder-n {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: 11px;
  text-align: center;
  opacity: .8;
}
.tk-folder-eye { width: 26px; height: 26px; }
.tk-folder-eye.is-off { opacity: .45; }
.tk-folder-body { padding: 2px 4px 4px; }

/* A measurement can be grabbed and moved with the select tool — say so with
   the cursor, or nobody finds it. */
.tk-stage:not(.tool-pan) .tk-svg [data-shape] { cursor: move; }
.tk-stage:not(.tool-pan) .tk-svg [data-vertex] { cursor: grab; }

/* Rename a folder from its header — one edit, not one per measurement. */
.tk-folder-name { cursor: text; }
.tk-folder-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.tk-folder-rename {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  font: inherit;
  font-weight: 620;
  border: 1px solid var(--accent, var(--k-c2410c));
  border-radius: 5px;
  background: var(--k-ffffff);
  color: inherit;
}
.tk-dialog-gap { flex: 1; }

/* Figures entered by hand — for work that can't be taken off the sheet. */
.tk-addmanual {
  display: block;
  width: 100%;
  margin: 4px 0 2px;
  padding: 5px 8px;
  font: inherit;
  font-size: 11.5px;
  text-align: left;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 7px;
  cursor: pointer;
}
.tk-addmanual:hover { color: var(--ink); border-color: var(--accent); }
.tk-run.is-manual .tk-run-v { font-style: italic; }
.tk-run-manual {
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  background: color-mix(in srgb, currentColor 14%, transparent);
  opacity: .85;
}
.tk-mnsize { display: flex; align-items: center; gap: 6px; }
.tk-mnsize input { width: 88px; }
.tk-hint-tight { margin-top: -4px; }

/* Which section of the price list a material sits under. */
.price-cat-input {
  width: 150px;
  padding: 3px 6px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: inherit;
}
.price-cat-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.price-supply-sep {
  width: 1px;
  height: 14px;
  margin: 0 4px;
  background: var(--line);
}
.price-cat-name { cursor: text; }
.price-cat-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.tk-calc-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* Materials chosen against each task — the order, not the takeoff. */
.exq-table { table-layout: fixed; width: 100%; }
.exq-table th:nth-child(1), .exq-table td:nth-child(1) { width: 40%; }
.exq-table td { overflow-wrap: anywhere; }
/* What each line costs, when the order shows it. */
.exq-table th.exq-cost, .exq-table td.exq-cost { width: 96px; white-space: nowrap; }
.exq-table.has-cost th:nth-child(1), .exq-table.has-cost td:nth-child(1) { width: 34%; }
.exq-table tr.ex-phase td.exq-cost { font-weight: 700; }
.exq-sum { margin-top: 10px; }
/* "6 × 6 m lengths + 1 × 4.8 m length" wraps rather than running into the quantity. */
.exq-table .exm-order { white-space: normal; }
.exq-task > td {
  padding-top: 10px !important;
  font-size: 12px;
  font-weight: 620;
  color: var(--muted);
}
.exq-from {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.exq-nomat td:first-child { color: var(--muted); font-style: italic; }

/* ---- Calendar view of the programme -------------------------------------- */
.cal-wrap { padding: 4px 0 12px; }
.cal-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; padding: 6px 2px 12px;
}
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-month { font-size: 15px; font-weight: 650; min-width: 160px; text-align: center; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }
.cal-legend-empty { font-style: italic; }
.cal-key { display: inline-flex; align-items: center; gap: 5px; }
.cal-key i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid; flex: none; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.cal-head {
  background: var(--paper, var(--k-faf9f7));
  padding: 7px 8px;
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.cal-day {
  background: var(--k-ffffff);
  min-height: 108px;
  padding: 5px 5px 7px;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-day.is-weekend { background: var(--k-fbfaf9); }
.cal-day.is-outside { background: var(--k-f6f5f4); }
.cal-day.is-outside .cal-date { opacity: .4; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--accent, var(--k-c2410c)); }
.cal-date { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.cal-day.is-today .cal-date { color: var(--accent, var(--k-c2410c)); }

.cal-chip {
  display: block; width: 100%;
  padding: 3px 6px;
  font: inherit; font-size: 11px; line-height: 1.25;
  text-align: left;
  border: 1px solid var(--bd); border-left-width: 3px;
  border-radius: 5px;
  background: var(--bg); color: var(--tx);
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip:not(.is-start) { border-left-style: dotted; opacity: .82; }
.cal-chip.is-done { text-decoration: line-through; opacity: .55; }
.cal-chip:hover { filter: brightness(0.97); }
.cal-cont { opacity: .6; margin-right: 2px; }
.cal-more { font-size: 10.5px; color: var(--muted); padding-left: 4px; }

.tl-viewsw { display: inline-flex; gap: 4px; }
.tl-viewsw .btn.is-on { background: var(--accent, #c2410c); color: #fff; border-color: var(--accent, var(--k-c2410c)); }

@media (max-width: 760px) {
  .cal-day { min-height: 76px; }
  .cal-chip { font-size: 10px; }
}
.cal-chip { touch-action: none; }
.cal-chip.is-dragging { opacity: .45; transform: scale(.98); }
.cal-day.is-drop { box-shadow: inset 0 0 0 2px var(--accent, var(--k-c2410c)); background: var(--k-fff7ed); }

/* ---- Full-screen programme ----------------------------------------------
   The timeline fills the window: header and page chrome out of the way, the
   chart given every pixel. Escape or the Close button brings it back. */
body.is-tlfull { overflow: hidden; }
body.is-tlfull .header { display: none; }
body.is-tlfull .container-full {
  position: fixed;
  inset: 0;
  z-index: 900;
  max-width: none;
  margin: 0;
  padding: 10px 14px 14px;
  background: var(--paper, var(--k-faf9f7));
  overflow: auto;
  display: flex;
  flex-direction: column;
}
body.is-tlfull .container-full > .tl-bar-top { flex: none; }
body.is-tlfull .container-full > .tl-wrap,
body.is-tlfull .container-full > .tl-chart { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.is-tlfull .tl-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
body.is-tlfull .cal-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* Let the weeks share whatever height is going, but never squeeze a day
   smaller than its chips — zeroing the minimum made the month shrink, not
   grow, which was the opposite of the point. */
body.is-tlfull .cal-grid {
  flex: 1 1 auto;
  grid-auto-rows: minmax(108px, 1fr);
  overflow: auto;
}

/* Work set aside — kept out of the price, the quote and the programme, but
   still on the Build page so you can see what it would add. */
.aside-btn { font-size: 15px; line-height: 1; color: #cbd5e1; }
.aside-btn:hover { color: var(--muted); }
.aside-btn.is-on { color: #7c3aed; }
/* Set aside is a state, not a deletion: the row keeps its figure at full
   strength so you can see what it would add, and says so with a tag rather
   than by fading out. */
.subtask-row.is-aside, .phase-card.is-aside > .phase-header { background: var(--k-faf7ff); }
.subtask-row.is-aside .subtask-name, .phase-card.is-aside .phase-title { color: var(--muted); }
.aside-tag {
  display: inline-block;
  margin-left: 6px; padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--k-ede9fe); color: #6d28d9;
}
.summary-set-aside .label, .summary-set-aside .value { color: #7c3aed; }

/* Highlighting — pick out lines to talk through. A marker only: it never
   touches the price, it just makes them findable and totals them up. */
.lit-btn { font-size: 12px; line-height: 1; color: #cbd5e1; }
.lit-btn:hover { color: var(--muted); }
.lit-btn.is-on { color: var(--k-d97706); }
.subtask-row.is-lit, .phase-header.is-lit { box-shadow: inset 3px 0 0 #f59e0b; }
.lit-tag {
  display: inline-block;
  margin-left: 6px; padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--k-fef3c7); color: var(--k-92400e);
}
.summary-lit .label, .summary-lit .value { color: var(--k-b45309); }

/* On the programme, set-aside work is still there — it still has to be built.
   The hatching says it isn't in this price. */
.tl-bar.is-aside, .tl-bubble.is-aside, .cal-chip.is-aside {
  background-image: repeating-linear-gradient(135deg,
    rgba(124,58,237,.20) 0 5px, transparent 5px 10px);
  border-style: dashed;
}
.tl-bar.is-aside::after, .tl-bubble.is-aside::after {
  content: "not in this price";
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  color: #6d28d9; background: rgba(255,255,255,.82);
  padding: 0 4px; border-radius: 3px; pointer-events: none;
}
.tl-bar.is-lit, .tl-bubble.is-lit, .cal-chip.is-lit {
  outline: 2px solid #f59e0b;
  outline-offset: 1px;
}

/* Highlighting on the Build page — pick out lines to talk through. Never
   touches the price; it just makes them findable and totals them. */
.lit-btn { font-size: 12px; line-height: 1; color: #cbd5e1; }
.lit-btn:hover { color: var(--muted); }
.lit-btn.is-on { color: var(--k-d97706); }
.subtask-row.is-lit, .phase-header.is-lit { box-shadow: inset 3px 0 0 #f59e0b; }
.lit-tag {
  display: inline-block;
  margin-left: 6px; padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--k-fef3c7); color: var(--k-92400e);
}
.summary-lit .label, .summary-lit .value { color: var(--k-b45309); }

/* A brief word in the corner — undo happens off-screen as often as not. */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 8px);
  z-index: 2000;
  padding: 8px 16px;
  border-radius: 999px;
  background: #1c1917;
  color: #fafaf9;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.app-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Moving a task — up, down, or into another phase. */
.task-grip {
  display: inline-flex; align-items: center;
  margin: -4px 2px -4px -4px; padding: 4px 2px;
  color: #d6d3d1; cursor: grab; touch-action: none;
  opacity: 0; transition: opacity .12s ease;
}
.subtask-row:hover .task-grip { opacity: 1; }
.task-grip:active { cursor: grabbing; }
.task-grip .icon-sm { width: 14px; height: 14px; }
.subtask.is-taskdrag { opacity: .6; }
.subtask.is-taskdrag .subtask-row { box-shadow: 0 6px 18px rgba(0,0,0,.16); border-radius: 8px; }
body.is-taskdragging { cursor: grabbing; user-select: none; }
[data-taskbox].is-dropbox { background: var(--k-fff7ed); border-radius: 8px; }

/* Moving a phase up or down the job. */
.phase-grip {
  display: inline-flex; align-items: center;
  margin: -4px 2px -4px -6px; padding: 4px 2px;
  color: var(--k-cbc7c4); cursor: grab; touch-action: none;
  opacity: 0; transition: opacity .12s ease;
}
.phase-header:hover .phase-grip { opacity: 1; }
.phase-grip:active { cursor: grabbing; }
.phase-grip .icon-sm { width: 14px; height: 14px; }
.phase.is-phasedrag { opacity: .65; }
.phase.is-phasedrag .phase-header { box-shadow: 0 8px 22px rgba(0,0,0,.18); }

/* Plans held on this device, for working without a connection. */
.plans-offline {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper, var(--k-faf9f7));
}
.plans-offline-hd {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit;
  font-size: 12px; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.plans-offline-hd:hover { color: var(--k-1c1917); }
.plans-offline-hd .collapse-chevron { display: inline-flex; }
.plans-offline-hd .plans-offline-size { margin-left: auto; }
.plans-offline-size { font-size: 11px; letter-spacing: 0; text-transform: none; opacity: .85; }
.plans-offline-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.plans-offline-list { list-style: none; margin: 8px 0 0; padding: 0; }
.plans-offline-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; font-size: 13px;
  border-top: 1px solid var(--line-2);
}
.plans-offline-list li > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Picking out several tasks at once. */
.task-pick {
  border: 0; background: none; padding: 0 2px; margin-right: 2px;
  font-size: 13px; line-height: 1; color: #cbd5e1; cursor: pointer;
  opacity: 0; transition: opacity .12s ease;
}
.subtask-row:hover .task-pick, .task-pick.is-on { opacity: 1; }
.task-pick.is-on { color: var(--accent, var(--k-c2410c)); }
.subtask-row.is-picked { background: var(--k-fff4ed); box-shadow: inset 3px 0 0 var(--accent, var(--k-c2410c)); }
.tsel-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 1500;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: calc(100vw - 32px);
  padding: 9px 14px;
  border-radius: 999px;
  background: #1c1917; color: #fafaf9;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
  font-size: 13px;
}
.tsel-count { font-weight: 650; }
.tsel-clip { opacity: .75; font-size: 12px; }
.tsel-bar .btn { background: #44403c; color: #fafaf9; border-color: #57534e; }
.tsel-bar .btn:hover { background: #57534e; }
.tsel-bar .btn-danger { background: #7f1d1d; border-color: var(--k-991b1b); }
.btn-paste { border-style: dashed; }

/* Notes on a task — what the work covers. */
.task-notes { padding: 10px 14px 4px; }
.task-notes-hd {
  display: block; margin-bottom: 4px;
  font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.task-notes-in {
  width: 100%; padding: 7px 9px;
  font: inherit; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--k-ffffff); color: inherit; resize: vertical;
}
.task-notes-in:focus { outline: 2px solid var(--accent, var(--k-c2410c)); outline-offset: -1px; }
.note-dot { display: inline-flex; margin-left: 5px; color: var(--muted); opacity: .7; }
.note-dot .icon-sm { width: 12px; height: 12px; }
.ex-task-note {
  margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--k-57534e);
}

/* Critical work — what the job hangs on. */
.crit-btn { font-size: 14px; font-weight: 800; line-height: 1; color: #cbd5e1; }
.crit-btn:hover { color: var(--muted); }
.crit-btn.is-on { color: #dc2626; }
.crit-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--k-fee2e2); color: var(--k-991b1b);
}
.tl-bar.is-crit, .tl-bubble.is-crit, .cal-chip.is-crit { border-color: #dc2626; border-width: 2px; }
.tl-bar.is-crit::before, .tl-bubble.is-crit::before {
  content: "!"; position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 14px; text-align: center;
  pointer-events: none;
}
.phase-header:hover .phase-pick, .phase-pick.is-on { opacity: 1; }
.phase-pick { margin-right: 4px; }
.phase-header.is-picked { background: var(--k-fff4ed); box-shadow: inset 3px 0 0 var(--accent, var(--k-c2410c)); }
.assign-line .row-grip { margin: -2px 2px -2px -4px; }
.assign-line:hover .row-grip { opacity: 1; }
.crew-hd .row-grip { margin: -2px 2px -2px -4px; }
.crew-card:hover .row-grip { opacity: 1; }
/* Bars picked out to be moved together. */
.tl-bar.is-picked, .tl-bubble.is-picked {
  outline: 2px dashed var(--accent, var(--k-c2410c));
  outline-offset: 2px;
}

/* Groups of tasks inside a phase. */
.task-group { border-left: 2px solid var(--line); margin: 4px 0 4px 8px; }
.task-group-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer;
  font-size: 12px; font-weight: 650; color: var(--muted);
}
.task-group-hd:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.task-group-name { flex: 1; cursor: text; }
.task-group-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.task-group-total { font-size: 12px; opacity: .85; }
.task-group.is-dropbox { background: var(--k-fff7ed); }
.task-group-set { padding: 10px 14px 0; }
.task-group-in {
  width: 100%; padding: 6px 9px;
  font: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--k-ffffff); color: inherit;
}
.task-group-in:focus { outline: 2px solid var(--accent, var(--k-c2410c)); outline-offset: -1px; }
.ex-group td { padding-top: 10px !important; font-size: 12px; font-weight: 650; color: var(--muted); }

/* The Build page reads better wide: the names get the room, the numbers and
   buttons keep their place on the right. */
.subtask-left { min-width: 0; flex: 1 1 auto; }
.phase-header-left { min-width: 0; flex: 1 1 auto; }
.phase-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Asking for a bit of text, in the app rather than the browser's own box —
   so it gets spell check, a proper keyboard and room to read. */
.ask-modal { max-width: 460px; }
.ask-hint { margin: 0 0 10px; font-size: 13px; }
.ask-input {
  width: 100%; padding: 9px 11px;
  font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--k-ffffff); color: inherit;
}
.ask-input:focus { outline: 2px solid var(--accent, var(--k-c2410c)); outline-offset: -1px; }
.ask-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---- Resources and Labour ------------------------------------------------ */
.view-head { margin-bottom: 18px; }
.view-head .muted { margin: 4px 0 0; font-size: 13px; line-height: 1.55; max-width: 70ch; }

.res-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.res-card {
  flex: 1 1 200px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--k-ffffff);
}
.res-card-l { display: block; font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.res-card b { display: block; font-size: 21px; margin-top: 3px; }
.res-card i { display: block; font-size: 11.5px; font-style: normal; color: var(--muted); margin-top: 1px; }
.res-card-sum { background: var(--paper, var(--k-faf9f7)); }

.res-table { table-layout: fixed; width: 100%; margin-bottom: 8px; }
.res-table th:nth-child(1), .res-table td:nth-child(1) { width: 26%; }
.res-table td { overflow-wrap: anywhere; }
.res-where { font-size: 12px; color: var(--muted); }
.res-cat td {
  padding-top: 12px !important;
  font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

.lab-trade { margin: 0 0 20px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lab-trade-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
}
.lab-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); flex: none; }
.lab-trade-name { flex: 1; font-weight: 650; font-size: 14px; }
.lab-trade-sum { font-size: 12.5px; color: var(--k-44403c); }
.lab-trade .res-table { margin: 0; }
.lab-trade .res-table th { background: transparent; }

/* A material typed straight onto a task, not from the price list. */
/* The one-off row sits in a narrow column, so it goes over two lines rather
   than squeezing four fields onto one and truncating every label. */
.oneoff-add {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 6px;
  padding: 8px 0 2px;
}
.oneoff-name { grid-column: 1 / -1; min-width: 0; }
.oneoff-unit, .oneoff-qty, .oneoff-rate { min-width: 0; text-align: right; }
.oneoff-unit { text-align: center; }
.oneoff-tag {
  margin-left: 6px; padding: 0 6px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  background: var(--k-e7e5e4); color: var(--k-57534e);
}
.lab-swatch { margin-right: 2px; flex: none; }

/* Making and moving groups. */
.group-add-row { padding: 4px 10px 8px; }
.task-group-hd .row-grip { margin: -2px 0 -2px -2px; }
.task-group:hover .row-grip { opacity: 1; }
.task-group.is-groupdrag { opacity: .6; }
.task-group.is-groupdrag .task-group-hd { box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.task-group-empty { margin: 4px 10px 8px; font-style: italic; }

/* Quantities off the plans, inside the Materials box — they buy the same
   timber, so they belong in the same place. */
.ms-inline { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ms-inline-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 4px;
}
.ms-inline-hd .assign-panel-subtotal { margin-left: auto; letter-spacing: 0; text-transform: none; }
.ms-inline .icon-sm { width: 13px; height: 13px; }

/* Notes: a wide, shallow strip along the bottom of the task. */
.assign-wrap .task-notes { grid-column: 1 / -1; padding: 12px 14px 4px; }
.assign-wrap .task-notes-in { min-height: 44px; }
.assign-type { width: 100%; }
.assign-type::placeholder { color: var(--muted); }

/* Quoted trades and allowances share a box — both are a fixed price somebody
   has put on a piece of work. A hairline keeps the two kinds apart. */
.fx-split:not(:empty) {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* Choosing a material: a list you can actually read. */
.matpick-wrap { position: relative; }
.matpick {
  /* It floats, so it needn't be squeezed into the column it sits under —
     a material name deserves one line, not three. */
  position: absolute; left: 0; top: calc(100% + 4px);
  min-width: 100%;
  width: max-content;
  max-width: min(340px, 78vw);
  z-index: 60;
  max-height: 280px; overflow: auto;
  padding: 4px;
  background: var(--k-ffffff);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}
.matpick-cat {
  padding: 7px 8px 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.matpick-row {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; padding: 7px 8px;
  border: 0; border-radius: 7px;
  background: none; text-align: left; cursor: pointer;
  font: inherit;
}
.matpick-row:hover { background: var(--primary-light, var(--k-fff4ed)); }
.matpick-name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink, var(--k-292524)); }
.matpick-meta { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.matpick-meta i { font-style: normal; opacity: .75; }
.matpick-none { padding: 10px 9px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* A folder of measurements: shut until you open it, so a job with hundreds of
   them opens as a short list of drawings rather than a mile of lines. */
.matpick-fold {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 6px 8px; margin-top: 2px;
  border: 0; border-radius: 7px;
  background: var(--k-f5f5f4); text-align: left; cursor: pointer; font: inherit;
}
.matpick-fold:hover { background: var(--k-ebe9e6); }
.matpick-fold.is-open { background: var(--primary-light, var(--k-fff4ed)); }
.matpick-fold-chev { font-size: 10px; color: var(--muted); width: 9px; flex: none; }
.matpick-fold-name {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 700;
  color: var(--ink, var(--k-292524)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.matpick-fold-n {
  flex: none; font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--k-ffffff); border-radius: 20px; padding: 1px 7px;
}
/* Rows inside a folder are stepped in so the grouping reads at a glance. */
.matpick-meas .matpick-name,
.matpick-in-fold .matpick-name { padding-left: 16px; }
/* The measurement list is wider than the price list — the names carry the
   plan's own wording and a calculator's line on top of it. */
.matpick-wrap-meas .matpick { max-width: min(560px, 90vw); }
/* A quoted line names itself — a trade, a service connection, a crane hire. */
.sub-line .sub-name {
  flex: 1; min-width: 0;
  padding: 3px 6px;
  font: inherit; font-size: 13px;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: inherit;
}
.sub-line .sub-name:hover { border-color: var(--line); }
.sub-line .sub-name:focus { border-color: var(--accent, var(--k-c2410c)); background: var(--k-ffffff); outline: none; }

/* What a task needs, in plain words. */
.needs-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 6px; }
.need-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--k-ffffff); font-size: 12.5px;
}
.need-x {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  color: var(--muted); font-size: 14px; line-height: 1;
}
.need-x:hover { color: var(--k-b91c1c); }
.quote-grid-solo { grid-template-columns: minmax(0, 1fr); }
.view-head-sub { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }

.need-new { display:flex; gap:6px; margin-top:8px; }
.need-new-in {
  flex:1; min-width:0; padding:8px 10px; font-size:13px;
  border:1px solid var(--border); border-radius:8px; background:var(--bg);
  color:var(--text); font-family:inherit;
}
.need-new-in:focus { outline:none; border-color:var(--accent); }
.need-new .btn { flex:0 0 auto; }

/* The planning page runs the same boxes as the costing page with the prices
   taken out, so the two read as one app rather than two. */
.assign-panel.no-money .sub-amount,
.assign-panel.no-money .other-dollar,
.assign-panel.no-money .other-amount,
.assign-panel.no-money .other-new-amount { display: none; }

/* A heading carried over from Build Project, with the real products under it. */
.res-group { border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px 8px; margin-bottom: 7px; background: var(--k-fcfdff); }
.res-group-loose { background: var(--k-fafafa); border-style: dashed; }
.res-group-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.res-group-name {
  flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-group-total { font-size: 12px; font-weight: 600; color: var(--k-334155); }
.res-group-body { margin-bottom: 6px; }
.res-group .assign-select { margin-top: 4px; }
.res-group .assign-empty { padding: 3px 0 5px; }
.res-oneoff-toggle {
  display: flex; align-items: center; gap: 4px; width: 100%; margin-top: 4px; padding: 5px 6px;
  background: none; border: 1px dashed var(--line); border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--muted); text-align: left;
}
.res-oneoff-toggle:hover { border-color: var(--primary); color: var(--primary); }
.res-group .oneoff-add { margin-top: 5px; flex-wrap: wrap; }

/* The plans route, shown even before anything has been measured. */
.assign-select-off {
  display: block; width: 100%; text-align: left; cursor: pointer;
  color: var(--muted-2); font: inherit; font-size: 12px;
}
.assign-select-off:hover { border-color: var(--primary); color: var(--primary); }

/* Backups — a plain strip at the top of Projects, louder when it's overdue. */
.backup-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; background: var(--k-ffffff);
  padding: 12px 14px; margin-bottom: 14px;
}
.backup-bar.is-stale { border-color: #f5c98a; background: var(--k-fffaf2); }
.backup-word { flex: 1; min-width: 240px; }
.backup-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.backup-age { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.backup-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.backup-plans { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; }

.restore-panel { border: 1px solid var(--primary); border-radius: 10px; background: var(--k-f7fbff); padding: 13px 15px; margin-bottom: 14px; }
.restore-hd { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.restore-what { font-size: 12.5px; color: var(--k-334155); margin: 5px 0 10px; }
.restore-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.restore-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* Build Project header, with its own way out to paper. */
.view-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.view-head-row > div { flex: 1; min-width: 260px; }

/* The work plan document: a task, then what it needs, in plain rows. */
.ex-table-wp td { vertical-align: top; }
.wp-name { font-weight: 500; }
.wp-needs { margin-top: 4px; font-size: 11.5px; color: var(--k-475569); line-height: 1.75; }
.wp-tag {
  display: inline-block; min-width: 62px; margin-right: 7px; padding: 0 5px;
  border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-align: center; vertical-align: 1px;
}
.wp-mat { background: var(--k-eef2ff); color: #4338ca; }
.wp-lab { background: var(--k-ecfdf5); color: var(--k-047857); }
.wp-eq  { background: var(--k-fff7ed); color: var(--k-c2410c); }
.wp-oth { background: var(--k-f1f5f9); color: var(--k-475569); }
.wp-crit {
  display: inline-block; margin-left: 7px; padding: 0 5px; border-radius: 3px;
  background: var(--k-fee2e2); color: var(--k-b91c1c); font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.wp-days { width: 74px; text-align: right; white-space: nowrap; color: var(--k-475569); font-size: 11.5px; }

/* Timeline: Select vs Pan, and the lasso that Select draws. */
.tl-modesw .btn { display: inline-flex; align-items: center; gap: 4px; }
/* Locked: nothing offers itself as something to pick up. The chart still
   drags about, so the hand cursor stays on the background. */
.tl-chart.is-locked .tl-bar, .tl-chart.is-locked .tl-bubble,
.tl-chart.is-locked .tl-scroll .tl-bar, .tl-chart.is-locked .tl-scroll .tl-bubble { cursor: default; }
.tl-chart.is-locked [data-tl-handle], .tl-chart.is-locked [data-tl-linkdot],
.tl-chart.is-locked [data-tl-grow], .tl-chart.is-locked .tl-link-hit { display: none; }
.tl-lock { display: inline-flex; align-items: center; gap: 5px; }
.tl-lock.is-on { background: #2A3D36; border-color: var(--k-2a3d36); color: #fff; }
.tl-lock.is-on svg { stroke: #fff; }
.tl-scroll.is-panning, body.tl-panning .tl-scroll { cursor: grab; }
body.tl-panning .tl-scroll { cursor: grabbing; }
.tl-scroll.is-panning .tl-bar, .tl-scroll.is-panning .tl-bubble { cursor: grab; }

.tl-lasso {
  position: absolute; z-index: 30; pointer-events: none;
  border: 1px solid var(--primary); border-radius: 3px;
  background: rgba(37, 99, 235, .10);
}
[data-tl-bar].is-lassoed {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

/* Two tasks sharing a line sit side by side; the one being moved rides above. */
.tl-row[data-tl-lane] .tl-track { position: relative; }
.tl-bar.tl-task-bar { transition: transform .06s linear; }
body.tl-dragging .tl-bar.tl-task-bar { transition: none; }

/* One tradesperson wears the same pill as a team, minus the head count — a
   touch lighter in weight so a team still reads as the bigger thing. */
.crew-chip.is-solo { font-weight: 500; padding: 0 9px; }

/* Set-up rather than day-to-day work: present, but not shouting. */
.price-table-quiet { margin-top: 18px; opacity: .92; }
.price-table-quiet .price-table-header { color: var(--muted); }

/* Copy / paste for one box on a task. Quiet until you hover the box. */
.panel-acts { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 8px; }
.panel-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px;
  background: none; color: var(--muted-2); cursor: pointer; opacity: 0;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.assign-panel:hover .panel-act, .panel-act:focus-visible { opacity: 1; }
.panel-act:hover { background: var(--k-eef2f7); color: var(--primary); }
.panel-act.is-paste { opacity: 1; color: var(--primary); }
.panel-act.is-paste:hover { background: var(--k-e6f0fb); }
.panel-act .icon-sm { width: 13px; height: 13px; }
/* On a touch screen there is no hover, so they simply stay put. */
@media (hover: none) { .panel-act { opacity: 1; } }

/* An allowance can carry a time as well as a price. The days box sits where
   it does on a quoted price, so the two halves of the box line up. */
.assign-line .sub-days { flex-shrink: 0; }
.assign-line .sub-unit { flex-shrink: 0; }

/* A link that keeps itself current, and the word the viewer gets when it does. */
.share-row.is-live { border-left: 3px solid var(--primary); padding-left: 8px; }
.share-live { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.share-live-tag { color: var(--primary); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }

.share-updated {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
  padding: 7px 14px; border-radius: 20px; background: #1e293b; color: #fff;
  font-size: 12.5px; font-weight: 500; box-shadow: 0 6px 20px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 9000;
}
.share-updated.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Choosing how much a shared link shows. */
.share-detail { margin: 4px 0 12px; }
.share-detail-label { display: block; font-size: 12px; font-weight: 600; color: var(--k-475569); margin-bottom: 6px; }
.share-detail-note { font-size: 11.5px; margin: 6px 0 0; }

/* The detail under a task on a shared page. */
.sd-row > td { padding: 2px 0 12px 6px !important; border-top: 0 !important; }
.sd-head { display: flex; gap: 6px; margin-bottom: 6px; }
.sd-crit { padding: 0 6px; border-radius: 3px; background: var(--k-fee2e2); color: var(--k-b91c1c);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sd-dur { font-size: 11px; color: var(--muted); }
.sd-block { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.sd-label { flex: 0 0 62px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--k-94a3b8); }
.sd-item { display: inline-flex; align-items: baseline; gap: 5px; }
.sd-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 20px;
  background: var(--wash, var(--k-e7e5e4)); border: 1px solid var(--ink, var(--k-d6d3d1));
  font-size: 11.5px; font-weight: 500; color: var(--k-2a241e);
}
.sd-chip i { font-style: normal; font-size: 9px; font-weight: 800;
  border: 1.1px solid var(--k-2a241e); border-radius: 20px; padding: 0 4px; }
.sd-chip-plain { background: var(--k-f1f5f9); border-color: var(--k-e2e8f0); color: var(--k-475569); }
.sd-days { font-size: 11px; color: var(--muted); }
.sd-amt { font-size: 11.5px; color: var(--k-334155); margin-left: 4px; }
.sd-notes { font-size: 11.5px; color: var(--k-64748b); font-style: italic; margin-top: 5px; line-height: 1.5; }

.sd-group { margin: 0 0 7px; padding-left: 62px; }
.sd-group-hd { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--k-94a3b8); border-bottom: 1px solid var(--k-f1f5f9); padding-bottom: 2px; margin-bottom: 3px; }
.sd-line { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--k-475569); padding: 1px 0; }
.sd-name { flex: 1; min-width: 0; }
.sd-qty { flex: 0 0 auto; color: var(--muted); }
.sd-tag { font-style: normal; margin-left: 5px; padding: 0 4px; border-radius: 3px;
  background: var(--k-f1f5f9); color: var(--k-94a3b8); font-size: 8.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 640px) { .sd-group { padding-left: 0; } .sd-label { flex-basis: 100%; } }

/* The reason behind a share link failing — small, selectable, quotable. */
.auth-detail {
  margin-top: 14px; padding: 8px 10px; border-radius: 6px;
  background: var(--k-f8fafc); border: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.5; color: var(--k-64748b);
  word-break: break-word; user-select: text;
}

/* Copy the whole task, paste it onto another. Quiet until the row is hovered,
   except the paste, which stays lit so you can see something is waiting. */
.task-copy { opacity: 0; transition: opacity .12s ease; }
.subtask-row:hover .task-copy, .task-copy:focus-visible { opacity: 1; }
.task-paste { color: var(--primary); }
@media (hover: none) { .task-copy { opacity: 1; } }

/* The teams, listed in their own right above the trade-by-trade breakdown. */
.lab-teams { border: 1px solid var(--line); border-radius: 10px; background: var(--k-ffffff); padding: 12px 14px; margin-bottom: 16px; }
.lab-teams-hd { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--k-334155); margin-bottom: 8px; }
.lab-teams-note { font-size: 11px; margin: 8px 0 0; font-style: italic; }
.lab-teams .crew-chip { font-size: 11.5px; }

/* Printing the Resources Takeoff. The app already hides .no-print and the
   header on print, so this only has to stop blocks splitting across pages. */
.takeoff-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 12px; }
@media print {
  .container { max-width: none; padding: 0; }
  .lab-trade, .lab-teams, .res-block, .res-card { break-inside: avoid; page-break-inside: avoid; }
  .res-cards { break-after: avoid; }
  .lab-teams, .lab-trade { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* A booking whose price-list item has been deleted — say so, don't just dash. */
.line-gone { color: var(--k-b45309); font-style: italic; font-size: 11.5px; cursor: help; }

/* Build Project materials: the same heading boxes as the costing page, but
   holding nothing — the detailed products live over there, not here. */
.need-group { padding: 6px 8px; margin-bottom: 5px; }
.need-group .res-group-hd { margin-bottom: 0; gap: 6px; }
.need-count { font-size: 10.5px; color: var(--muted-2); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.need-group .need-x {
  border: 0; background: none; color: var(--muted-2); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity .12s ease;
}
.need-group:hover .need-x, .need-x:focus-visible { opacity: 1; }
.need-group .need-x:hover { color: var(--k-b91c1c); }
@media (hover: none) { .need-group .need-x { opacity: 1; } }

/* A group name against a Build Project heading, so the picker can sort them. */
.price-cat-input {
  width: 132px; flex: 0 0 auto; padding: 3px 6px; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--k-fcfcfc);
}
.price-cat-input:focus { outline: none; border-color: var(--primary); color: var(--text); background: var(--k-ffffff); }

/* How long a task takes, on the row beside its name. Quiet until it's been
   set by hand, so a row of defaults doesn't shout. */
.task-dur-row {
  display: inline-flex; align-items: center; gap: 1px; flex: none; margin-left: 8px;
  padding: 1px 2px; border: 1px solid transparent; border-radius: 6px;
}
.task-dur-row .qty-arrow { opacity: 0; transition: opacity .12s ease; }
.subtask-row:hover .task-dur-row .qty-arrow,
.task-dur-row:focus-within .qty-arrow { opacity: 1; }
@media (hover: none) { .task-dur-row .qty-arrow { opacity: 1; } }
.subtask-row:hover .task-dur-row { border-color: var(--line); background: var(--k-ffffff); }
.task-dur-row.is-set { border-color: var(--k-c7d7ea); background: var(--k-f4f9ff); }
.task-dur-in {
  width: 34px; text-align: right; border: 0; background: none; padding: 0;
  font-size: 12px; color: var(--k-475569); -moz-appearance: textfield;
}
.task-dur-in::-webkit-outer-spin-button, .task-dur-in::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.task-dur-in::placeholder { color: var(--muted-2); }
.task-dur-in:focus { outline: none; }
.task-dur-row:focus-within { border-color: var(--primary); background: var(--k-ffffff); }
.task-dur-row i { font-style: normal; font-size: 10px; color: var(--muted-2); }

/* Lead time against a priced item. */
.price-lead-input {
  width: 46px; text-align: right; padding: 2px 4px; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--k-ffffff); color: var(--k-475569);
}
.price-lead-input:focus { outline: none; border-color: var(--primary); }
.price-supply-unit { color: var(--muted-2); }

/* The prompt schedule: what to order, and by when. */
.ps-wrap { padding: 4px 2px 10px; }
.ps-head { margin: 0 0 10px; }
.ps-table { width: 100%; }
.ps-table th { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--k-94a3b8); }
.ps-when { width: 116px; white-space: nowrap; }
.ps-lead, .ps-need { width: 84px; white-space: nowrap; text-align: right; }
.ps-qty { width: 96px; text-align: right; white-space: nowrap; color: var(--muted); }
.ps-item { font-weight: 500; }
.ps-for { color: var(--muted); font-size: 11.5px; }
.ps-for i { display: block; font-style: normal; font-size: 10.5px; color: var(--muted-2); }
.ps-kind, .ps-tag {
  font-style: normal; margin-left: 6px; padding: 0 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ps-kind { background: var(--k-f1f5f9); color: var(--k-94a3b8); }
.ps-tag-late { background: var(--k-fee2e2); color: var(--k-b91c1c); }
.ps-tag-soon { background: var(--k-fef3c7); color: var(--k-92400e); }
tr.ps-late .ps-when { color: var(--k-b91c1c); font-weight: 600; }
tr.ps-soon .ps-when { color: var(--k-92400e); }

/* Weekends and public holidays, behind the bars. Faint enough to read through,
   clear enough to explain why a task reaches further than the days you typed. */
.tl-off {
  position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  background: rgba(15, 23, 42, .035);
}
.tl-off.is-holiday { background: rgba(180, 83, 9, .10); pointer-events: auto; }
.tl-body > .tl-row, .tl-body > .tl-phase-row { position: relative; z-index: 1; }

/* The working calendar on the Company tab. */
.cal-table { margin-top: 18px; }
.cal-list { max-height: 340px; overflow-y: auto; }
.cal-year {
  padding: 6px 16px; background: var(--k-f8fafc); border-top: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--k-94a3b8);
}
.cal-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px;
  border-top: 1px solid var(--k-f5f5f4); font-size: 12.5px; cursor: pointer;
}
.cal-row:hover { background: var(--k-fbfdff); }
.cal-row.is-off { opacity: .45; }
.cal-row.is-off .cal-name { text-decoration: line-through; }
.cal-date { flex: 0 0 78px; color: var(--muted); font-size: 11.5px; }
.cal-name { flex: 1; min-width: 0; color: var(--k-334155); }
.cal-row-own { cursor: default; }

/* The programme: phases down a rail on the left, tasks on the chart. */
.tl-frame { display: flex; align-items: stretch; min-height: 0; }
.tl-rail {
  flex: 0 0 210px; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--k-ffffff); z-index: 3;
  height: calc(100vh - 205px); min-height: 300px;
}
.tl-rail-axis {
  height: calc(var(--tl-row, 40px) + 13px); box-sizing: border-box;
  flex: none; display: flex; align-items: center; padding: 0 10px;
  border-bottom: 1px solid var(--line); background: var(--k-fafaf9);
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--k-a8a29e);
}
.tl-rail-body { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.tl-rail-inner { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.tl-rail-phase {
  display: flex; align-items: flex-start; gap: 4px; padding: 7px 6px 0 4px;
  border-bottom: 1px solid var(--k-f5f5f4); border-left: 3px solid var(--edge, var(--k-d6d3d1));
  overflow: hidden; box-sizing: border-box;
}
.tl-rail-phase.is-done { opacity: .55; }
.tl-rail-phase.is-aside { opacity: .5; }
.tl-rail-phase.is-lit { box-shadow: inset 0 0 0 2px rgba(234,179,8,.55); }
.tl-rail-phase.is-crit { border-left-color: #dc2626; }
.tl-rail-phase.is-picked { box-shadow: inset 0 0 0 2px var(--primary); }
.tl-rail-open, .tl-rail-pick {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--muted); display: inline-flex; align-items: center; line-height: 1.3;
}
.tl-rail-pick { font-size: 12px; }
.tl-rail-pick.is-on { color: var(--primary); }
.tl-rail-body-x { }
/* Pinned to the top of its block, so it reads as the label for the rows
   beside it rather than floating in the middle of twelve of them. */
.tl-rail-phase .tl-rail-body {
  flex: 1; min-width: 0; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.tl-rail-name {
  font-size: 12px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-rail-sub { font-size: 10.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-rail-phase .tl-swatch { flex: none; }
.tl-rail-phase .tl-crews { flex: none; }

/* A shut phase draws nothing on the chart at all — it keeps only its slim
   line in the rail, which is where you open it again. */
.tl-rail-phase.is-shut { padding-top: 0; align-items: center; }
.tl-rail-phase.is-shut .tl-rail-sub { display: none; }
.tl-rail-phase.is-shut .tl-rail-name { font-weight: 500; opacity: .85; }

@media (max-width: 720px) { .tl-rail { flex-basis: 132px; } .tl-rail-sub { display: none; } }

/* Why a bar reaches further than the days set on the task. */
.tl-tip-note {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.15);
  font-size: 11px; line-height: 1.45; opacity: .85;
}

/* Crew badges on a task bar, straddling its top edge rather than sitting
   inside it — the bar keeps its whole width for the name, and the badges cost
   it nothing. Quiet until you hover the bar, then they come forward.

   The bar itself clips its contents (that's what keeps the name tidy), so the
   badges live in the row alongside it and are placed to match. */
.tl-task-bar .tl-crews { display: none; }
.tl-bar-crews {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 2px;
  transform: translateY(-52%); pointer-events: none;
  opacity: .82; transition: opacity .12s ease, filter .12s ease;
}
.tl-bar-crews .tl-crew { min-width: 14px; height: 14px; font-size: 8.5px; }
.tl-bar-crews .tl-crew b { font-size: 8.5px; }
.tl-row:hover .tl-bar-crews { opacity: 1; filter: drop-shadow(0 1px 2px rgba(15,23,42,.25)); }

/* Each day along the top: its number, its letter when there's room, and the
   days nobody works shaded the same way they are behind the bars. */
.tl-day {
  position: absolute; bottom: 0; height: 17px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 9.5px; color: var(--muted-2); border-left: 1px solid transparent;
  overflow: hidden; white-space: nowrap;
}
.tl-day b { font-weight: 600; }
.tl-day-dow { font-style: normal; opacity: .6; }
.tl-day.is-weekend { background: rgba(15, 23, 42, .05); color: var(--k-64748b); }
.tl-day.is-holiday { background: rgba(180, 83, 9, .14); color: var(--k-b45309); font-weight: 700; }
.tl-day.is-first { border-left-color: var(--k-d5d2ce); }
.tl-day.is-first b { color: var(--k-475569); }

/* The rail scrolls the chart rather than itself, so say so with the cursor
   and keep a stray drag from selecting all the phase names. */
.tl-rail-body { cursor: grab; touch-action: none; }
.tl-rail-body:active { cursor: grabbing; }
.tl-rail-phase { user-select: none; }
.tl-rail-phase button, .tl-rail-phase .tl-rail-body { cursor: pointer; }

/* Tasks tied to start together. */
.tl-par {
  flex: none; margin-left: 5px; font-size: 11px; line-height: 1;
  color: rgba(255,255,255,.9); text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* Documents kept with a job. */
.docs-card { margin-top: 14px; }
.doc-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px;
  border-top: 1px solid var(--k-f5f5f4); font-size: 12.5px;
}
.doc-row:hover { background: var(--k-fbfdff); }
.doc-kind {
  flex: 0 0 74px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--k-94a3b8);
}
.doc-name {
  flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 5px;
  padding: 3px 6px; font: inherit; font-size: 12.5px; color: var(--k-334155); background: none;
}
.doc-name:hover { border-color: var(--line); background: var(--k-ffffff); }
.doc-name:focus { outline: none; border-color: var(--primary); background: var(--k-ffffff); }
.doc-size { flex: 0 0 70px; text-align: right; color: var(--muted); font-size: 11.5px; }
.doc-when { flex: 0 0 74px; text-align: right; color: var(--muted-2); font-size: 11.5px; }
@media (max-width: 720px) { .doc-when, .doc-kind { display: none; } }

.plans-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.plans-head-row > div { flex: 1; min-width: 260px; }

/* How a task sits in the programme, said on the planning page. */
.sch-strip {
  margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--k-ffffff); border-left-width: 3px;
}
.sch-strip.sch-critical { border-left-color: #dc2626; background: var(--k-fffaf9); }
.sch-strip.sch-parallel { border-left-color: var(--primary); background: var(--k-f8fbff); }
.sch-strip.sch-flexible { border-left-color: var(--k-16a34a); background: var(--k-f9fdfa); }
.sch-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sch-label { font-size: 12px; font-weight: 600; color: var(--k-475569); }
.sch-when { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--k-475569); }
.sch-when input {
  font: inherit; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--k-ffffff); color: var(--k-0f172a);
}
.sch-modes { margin-left: auto; }
.sch-body { margin-top: 9px; }
.sch-sub {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--k-94a3b8); margin-bottom: 5px;
}
.sch-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 9px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--k-ffffff);
  font-size: 11.5px; color: var(--k-334155);
}
.sch-note { font-size: 11.5px; margin: 0; line-height: 1.5; }

/* A flexible task: the date isn't fixed, so neither is its edge. */
.tl-task-bar.is-flex {
  border-right: 2px dashed rgba(255,255,255,.75);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 70%, rgba(255,255,255,.25) 100%);
}

/* Measurements pick up by a grip and drop into folders, the way tasks do. */
.tk-mgrip {
  flex: none; margin-right: 2px; padding: 0 2px; cursor: grab;
  color: var(--muted-2, var(--k-a8a29e)); font-size: 10px; letter-spacing: -2px;
  opacity: 0; transition: opacity .12s ease; touch-action: none; user-select: none;
}
.tk-item:hover .tk-mgrip { opacity: 1; }
.tk-item-wrap.is-mdrag { opacity: .55; }
.tk-item-wrap.is-mdrag .tk-item { box-shadow: 0 4px 14px rgba(15,23,42,.18); }
.tk-loose { min-height: 2px; }
.tk-drop-hint {
  padding: 8px 10px; margin: 2px 0; border: 1px dashed var(--line, var(--k-e7e5e4));
  border-radius: 6px; font-size: 11px; color: var(--muted-2, var(--k-a8a29e)); text-align: center;
}
.tk-measuring-keys { margin-top: 6px; font-size: 10.5px; opacity: .7; line-height: 1.5; }
@media (hover: none) { .tk-mgrip { opacity: 1; } }

.res-kind {
  font-style: normal; margin-left: 7px; padding: 0 5px; border-radius: 3px;
  background: var(--k-f1f5f9); color: var(--k-94a3b8); font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

/* Naming a sheet in the plan viewer. */
.tk-pagename {
  width: 132px; margin-left: 6px; padding: 3px 7px; font-size: 11.5px;
  border: 1px solid var(--tk-line, #3a3a3a); border-radius: 6px;
  background: rgba(255,255,255,.06); color: inherit; font-family: inherit;
}
.tk-pagename::placeholder { color: rgba(255,255,255,.35); }
.tk-pagename:focus { outline: none; border-color: #60a5fa; background: rgba(255,255,255,.12); }
.tk-thumb-n { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .tk-pagename { width: 92px; } }

/* Several scales on one sheet. */
.tk-scales { padding: 6px 0; }
.tk-scales-hd { font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  opacity: .55; margin-bottom: 5px; }
.tk-scale-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px;
  border-radius: 6px; font-size: 12px; cursor: pointer; }
.tk-scale-row:hover { background: rgba(255,255,255,.06); }
.tk-scale-row.is-on { background: rgba(96,165,250,.16); }
.tk-scale-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-scale-nm:hover { text-decoration: underline; }
.tk-scale-used { font-size: 10.5px; opacity: .55; white-space: nowrap; }
.tk-scale-add { font-size: 11px; margin-top: 4px; }

/* Tracing a footing's section straight into its calculator field. */
.tk-cf-xs { align-items: stretch; }
.tk-xs-btn { margin-top: 4px; font-size: 11px; width: 100%; }
.tk-xs-btn.is-waiting { border-color: #60a5fa; color: #93c5fd; }

/* A traced cross-section, listed with the calculator it feeds. */
.tk-item.is-xs .tk-item-name { font-style: italic; }
.tk-item.is-sel { outline: 1px solid #60a5fa; outline-offset: -1px; border-radius: 6px; }
.tk-item[data-tk="pick-meas"] { cursor: pointer; }
.tk-xs-note { display: block; font-size: 10.5px; color: var(--k-9ca3af); margin-top: 3px; line-height: 1.35; }

/* Duplicate a measurement, keeping its calculator set-up. */
.tk-item-copy { font-size: 13px; line-height: 1; }

/* Rate basis and sheet size on a price-list item. */
select.price-unit-input { max-width: 190px; }
.price-sheet-in { width: 54px; }
.price-supply-x { color: var(--k-a8a29e); font-size: 12px; padding: 0 1px; }

/* How many sheets a measured area comes to. */
.ms-line-sheets { font-size: 11.5px; color: var(--k-78716c); padding: 2px 0 0 2px; }

/* ---------- Cost Tracker ---------------------------------------------- */
.tr-summary { padding: 18px 20px 14px; }
.tr-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tr-sum-cell { min-width: 0; }
.tr-sum-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--k-a8a29e); font-weight: 700; }
.tr-sum-val { font-size: 21px; font-weight: 700; margin-top: 2px; }
.tr-sum-note { font-size: 11.5px; color: var(--k-a8a29e); margin-top: 1px; }
.tr-over { color: var(--k-b91c1c); }
.tr-under { color: var(--k-15803d); }
.tr-bar { height: 7px; border-radius: 4px; background: var(--k-eeece9); margin: 14px 0 10px; overflow: hidden; }
.tr-bar-fill { height: 100%; background: var(--primary-bg); border-radius: 4px; }
.tr-bar-fill.is-over { background: #b91c1c; }
.tr-hint { font-size: 12px; color: var(--k-78716c); margin: 0; line-height: 1.5; }

.tr-table { padding: 0; overflow: hidden; }
.tr-head, .tr-phase-hd, .tr-task-hd {
  display: grid; grid-template-columns: 22px 46px 1fr 108px 108px 108px;
  align-items: center; gap: 8px; padding: 9px 14px;
}
.tr-head { grid-template-columns: 68px 1fr 108px 108px 108px; padding: 8px 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--k-a8a29e);
  font-weight: 700; border-bottom: 1px solid var(--line); }
.tr-head .tr-q, .tr-head .tr-a, .tr-head .tr-v { text-align: right; }
.tr-phase-hd { background: var(--k-faf9f8); border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 600; }
.tr-phase-hd:hover { background: var(--k-f3f1ef); }
.tr-task-hd { cursor: pointer; border-bottom: 1px solid var(--k-f2f0ee); font-size: 13.5px; }
.tr-task-hd:hover { background: var(--k-faf9f8); }
.tr-num { color: var(--k-a8a29e); font-size: 12px; }
.tr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-q, .tr-a, .tr-v { text-align: right; font-size: 13px; }
.tr-blank { color: #d6d3d1; }
.tr-task.is-started .tr-name { font-weight: 600; }

.tr-task-body { padding: 8px 14px 12px 60px; background: var(--k-fcfbfa); border-bottom: 1px solid var(--k-f2f0ee); }
.tr-entry { display: grid; grid-template-columns: 124px 118px 1fr 1fr 12px 92px 66px 30px;
  gap: 6px; align-items: center; margin-bottom: 5px; }
.tr-entry input, .tr-entry select {
  font: inherit; font-size: 12.5px; padding: 5px 7px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--k-ffffff); min-width: 0;
}
.tr-e-dollar { color: var(--k-a8a29e); font-size: 12px; text-align: right; }
.tr-e-amt, .tr-e-hrs { text-align: right; }
.tr-none { font-size: 12.5px; color: var(--k-a8a29e); padding: 2px 0 6px; }
.tr-add { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tr-logged { font-size: 12px; color: var(--k-78716c); }
.tr-override { display: flex; align-items: center; gap: 6px; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--line); }
.tr-ov-lbl { font-size: 12px; color: var(--k-78716c); }
.tr-ov-amt, .tr-ov-hrs { font: inherit; font-size: 12.5px; padding: 5px 7px; text-align: right;
  border: 1px solid var(--line); border-radius: 6px; background: var(--k-ffffff); }
.tr-ov-amt { width: 96px; } .tr-ov-hrs { width: 66px; }
.tr-hours { font-size: 12px; color: var(--k-78716c); margin-top: 8px; }

@media (max-width: 860px) {
  .tr-head, .tr-phase-hd, .tr-task-hd { grid-template-columns: 20px 38px 1fr 84px 84px 84px; gap: 5px; }
  .tr-head { grid-template-columns: 58px 1fr 84px 84px 84px; }
  .tr-task-body { padding-left: 20px; }
  .tr-entry { grid-template-columns: 1fr 1fr; }
}

/* ---------- Works & cost schedule (export) ---------------------------- */
.ex-opts-sub { padding-left: 6px; border-left: 2px solid var(--line); margin-left: 4px; }
.ex-opts-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-a8a29e); font-weight: 700; align-self: center; }

.ws-table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.ws-table th, .ws-table td { border: 1px solid #cfcac4; padding: 4px 6px; vertical-align: top; }
.ws-table thead th { background: var(--k-f5f3f1); font-size: 10px; text-align: center;
  text-transform: none; font-weight: 700; vertical-align: bottom; }
.ws-table th.ws-desc { text-align: left; }
.ws-step { width: 44px; text-align: center; font-weight: 700; font-size: 10px; }
.ws-phase { width: 92px; font-weight: 700; text-align: center; vertical-align: middle; }
.ws-desc { width: auto; }
.ws-n { width: 74px; text-align: right; white-space: nowrap; }
.ws-tot { width: 82px; text-align: right; white-space: nowrap; font-weight: 700;
  vertical-align: middle; background: var(--k-fbfaf9); }
.ws-when { width: 52px; text-align: center; vertical-align: middle; padding: 4px 2px; }
.ws-when-txt { writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; font-size: 9.5px; font-weight: 700; letter-spacing: .01em;
  display: inline-block; max-height: 100%; overflow: hidden; }
.ws-task { font-weight: 600; }
.ws-note { color: var(--k-57534e); font-size: 10px; margin-top: 1px; }
.ws-bits { margin: 2px 0 0; padding-left: 14px; color: var(--k-57534e); font-size: 10px; line-height: 1.45; }
.ws-bits li { margin: 0; }
.ws-table tfoot td { background: var(--k-f5f3f1); font-size: 11.5px; }

@media print {
  .ws-section { page-break-before: always; }
  .ws-table { font-size: 8.5pt; }
  .ws-row { page-break-inside: avoid; }
}

/* The priced items inside a task, with what each really cost. */
.tr-items { margin-bottom: 10px; }
.tr-item-hd, .tr-item {
  display: grid; grid-template-columns: 34px 1fr 92px 92px 62px; gap: 6px; align-items: center;
}
.tr-item-hd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-a8a29e); font-weight: 700; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.tr-item-hd .tr-i-q, .tr-item-hd .tr-i-a, .tr-item-hd .tr-i-h { text-align: right; }
.tr-item { padding: 3px 0; border-bottom: 1px solid var(--k-f2f0ee); font-size: 12.5px; }
.tr-i-kind { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-align: center;
  border-radius: 4px; padding: 2px 0; color: #fff; background: var(--k-a8a29e); }
.tr-k-mat { background: #b45309; } .tr-k-lab { background: #1d4ed8; }
.tr-k-eq  { background: #6d28d9; } .tr-k-sub { background: #0f766e; }
.tr-k-other { background: var(--k-78716c); }
.tr-i-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-i-name i { color: var(--k-a8a29e); font-style: normal; font-size: 11.5px; }
.tr-i-q { text-align: right; color: var(--k-57534e); }
.tr-i-a input, .tr-i-h input {
  width: 100%; font: inherit; font-size: 12.5px; padding: 4px 6px; text-align: right;
  border: 1px solid var(--line); border-radius: 6px; background: var(--k-ffffff);
}
.tr-sub-hd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-a8a29e); font-weight: 700; margin: 10px 0 4px; }
.sch-multi .sch-body + .sch-body { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; }

.ms-line-w { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--k-a8a29e); }
.ms-line-w input { width: 58px; font: inherit; font-size: 12px; padding: 3px 5px; text-align: right;
  border: 1px solid var(--line); border-radius: 6px; background: var(--k-ffffff); }
.ms-line-sheets.is-warn { color: var(--k-b91c1c); }

/* Folders inside folders, and dragging them about. */
.tk-folder-body .tk-folder { margin-left: 10px; border-left: 1px solid rgba(255,255,255,.08); }
.tk-fgrip { cursor: grab; color: var(--k-6b7280); font-size: 10px; letter-spacing: -2px;
  padding-right: 2px; user-select: none; touch-action: none; }
.tk-fgrip:active { cursor: grabbing; }
.tk-folder.is-fdrag { opacity: .55; }
.tk-folder-sub { font-size: 14px; line-height: 1; font-weight: 700; }

.build-badge { font-size: 10.5px; font-weight: 700; color: var(--k-a8a29e); letter-spacing: .03em;
  padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; }

/* Picking a task by clicking it. */
.sch-pick-row { display: flex; gap: 8px; align-items: center; }
.sch-pick-row .assign-select { flex: 1; min-width: 0; }
.sch-pick-row .btn.is-on { background: var(--primary-bg); border-color: var(--primary); color: #fff; }
.pick-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 900;
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: #1c1917; color: #fafaf9; border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); font-size: 13px;
}
.pick-dot { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; flex: none;
  animation: pickPulse 1.2s ease-in-out infinite; }
@keyframes pickPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.pick-msg b { font-weight: 700; }
.pick-bar .btn { background: transparent; color: #d6d3d1; border-color: #57534e; }
.pick-bar .btn:hover { background: #292524; color: #fafaf9; }
/* Everything you could pick says so. */
body:has(.pick-bar) .subtask-row, body:has(.pick-bar) .tl-task-bar { cursor: crosshair; }
body:has(.pick-bar) .subtask-row:hover { outline: 2px solid #fbbf24; outline-offset: -2px; }
body:has(.pick-bar) .tl-task-bar:hover { outline: 2px solid #fbbf24; outline-offset: 1px; }

/* Each run's own worked-out material, under its own settings. */
.tk-runouts { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px; }
.tk-runouts-hd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-9ca3af); font-weight: 700; margin-bottom: 3px; }
.tk-runout { display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 2px 0; }
.tk-runout span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Flipping between a plan and the costs. */
.tk-btn-costs { background: var(--primary-bg); border-color: var(--k-a54b24); color: #fff; }
.plan-fab { right: auto; left: 20px; max-width: 260px; }
.plan-fab .meas-fab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The master list, and what this job draws from it. */
.master-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--k-ffffff); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 14px; }
.master-note { font-size: 12.5px; color: var(--k-78716c); }
.price-row.is-aside-res { opacity: .5; }
.icon-btn-use { width: auto; padding: 0 8px; font-size: 11.5px; font-weight: 700;
  color: var(--primary); white-space: nowrap; }

/* ---- What to order, read off a fabrication set ---- */
.ord-modal { max-width: 760px; width: 100%; }
.ord-where { margin: -4px 0 8px; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; }
.ord-times { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; font-size: 13px; }
.ord-times input { width: 74px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.ord-times input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.ord-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.ord-group + .ord-group { border-top: 1px solid var(--line); }
.ord-group-head { background: var(--k-f5f5f4); padding: 8px 12px; position: sticky; top: 0; z-index: 1; }
.ord-all { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ord-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 13px;
}
.ord-row + .ord-row { border-top: 1px solid var(--line-2); }
.ord-row:hover { background: var(--primary-light); }
.ord-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-note { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-qty { text-align: right; white-space: nowrap; }
@media (max-width: 620px) {
  .ord-row { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .ord-note { display: none; }
}

/* ---- Plan sets: picking several, and marking the ones already read ---- */
.plan-tick { flex: none; margin: 0 2px 0 0; }
.plan-read { flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--k-16a34a); }
.plan-read .icon { width: 14px; height: 14px; }
.plan-read.is-off { color: transparent; }
.plan-row.is-read .plan-name { color: var(--muted); }
.plan-rev { cursor: pointer; font-size: 15px; line-height: 1; }
.plan-bulk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 6px;
  background: var(--k-f5f5f4); border-radius: 8px; font-size: 13px;
}
.plan-bulk-all { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.plan-bulk-note { margin-left: auto; }
.ord-skipped { font-size: 12px; margin: -2px 0 8px; }
.ord-reading { max-width: 420px; text-align: center; }
.ord-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 12px 0 8px; }
.ord-bar span { display: block; height: 100%; background: var(--primary-bg); transition: width 0.2s ease; }
.ord-group-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ord-all { flex: 1 1 auto; min-width: 0; }
.ord-folder { display: flex; align-items: center; gap: 6px; font-size: 12px; flex: none; }
.ord-folder input {
  width: 190px; padding: 4px 8px; font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--k-ffffff);
}
.ord-folder input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
@media (max-width: 620px) { .ord-folder input { width: 130px; } }

/* ---- Sections that hold sections ---- */
.price-sub-header {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 14px 7px 30px; margin-left: 14px;
  background: var(--k-fafaf9); border-left: 2px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
}
.price-sub-header:hover { background: var(--k-f5f5f4); }
.price-sub-header + [data-reorder] { margin-left: 14px; border-left: 2px solid var(--line); }
.price-subcount { margin-left: auto; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted-2); }
.matpick-fold.is-sub { padding-left: 26px; font-size: 12px; }
.matpick-fold.is-sub .matpick-fold-name { color: var(--muted); }
.matpick-fold.is-sub + .matpick-row, .matpick-fold.is-sub ~ .matpick-in-fold { padding-left: 34px; }

/* ---- The programme panel inside the Timeline's task window ---- */
.tle-body .sch-strip { margin: 0 0 14px; }

/* ---- Short bars: nothing invisible sitting on them ----
   On a short bar the hover-only add-a-delay button, the link badge and the link
   dot covered almost all of it, and a double-click on any of them did nothing.
   That's why double-clicking opened long tasks and not short ones. On a bar
   this short they were clipped out of sight anyway; the task window has them. */
.tl-task-bar.is-narrow .tl-delay-add,
.tl-task-bar.is-narrow .tl-delay-badge,
.tl-task-bar.is-narrow .tl-dep-badge,
.tl-task-bar.is-narrow .tl-linkdot { display: none; }
.tl-task-bar.is-narrow .tl-handle { width: 4px; }

/* ---- Export tab ----------------------------------------------------------
   What you're making and its switches down the left, the page itself on the
   right. Only the page prints. */
.ex-page { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 24px; align-items: start; }
.ex-side {
  position: sticky; top: 112px; max-height: calc(100vh - 128px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
}
.exs-block + .exs-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.exs-lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.exs-hint { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--muted); margin: 12px 0 6px; }
.exs-block > .exs-hint:first-of-type, .exs-lbl + .exs-hint { margin-top: 0; }
.exs-note { display: block; line-height: 1.5; margin: 0; }
.exs-links { margin-left: auto; display: inline-flex; gap: 10px; }
.exs-opts { display: flex; flex-direction: column; gap: 7px; }
.exs-opts .ex-opt { font-size: 13px; color: var(--ink); white-space: normal; }
.exs-seg { align-self: flex-start; margin-left: 22px; }
.exd-list { display: flex; flex-direction: column; gap: 3px; }
.exd {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font: inherit;
  padding: 7px 10px; border-radius: 9px; border: 1px solid transparent; background: transparent;
  cursor: pointer; color: var(--ink);
}
.exd:hover { background: var(--paper); border-color: var(--line); }
.exd.is-on { background: var(--primary-light); border-color: var(--primary); }
.exd-ic { flex-shrink: 0; display: inline-flex; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
.exd-ic svg { width: 18px; height: 18px; }
.exd.is-on .exd-ic { color: var(--primary); }
.exd-txt { min-width: 0; }
.exd-txt b { display: block; font-size: 13px; font-weight: 600; }
.exd-txt small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.exs-detail { display: flex; width: 100%; box-sizing: border-box; }
.exs-detail .ex-preset { flex: 1; font-size: 12.5px; padding: 6px 8px; }
.ex-side .ex-chips { flex: none; margin-top: 2px; }
.ex-side .ex-tp-title { width: 100%; min-width: 0; box-sizing: border-box; }
.ex-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 800px; margin: 0 auto 14px; }
.ex-bar-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.ex-bar-title b { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ex-bar-title span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-more { position: relative; }
.ex-more > summary { list-style: none; cursor: pointer; }
.ex-more > summary::-webkit-details-marker { display: none; }
.ex-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 280px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12);
}
.ex-more-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font: inherit;
  padding: 8px 10px; border: none; background: transparent; border-radius: 7px; cursor: pointer; color: var(--ink);
}
.ex-more-item:hover { background: var(--paper); }
.ex-more-item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--muted); }
.ex-more-item b { display: block; font-size: 13px; font-weight: 600; }
.ex-more-item small { display: block; font-size: 11.5px; color: var(--muted); }
.container-export .export-doc { margin-top: 0; }
@media (max-width: 960px) {
  .ex-page { grid-template-columns: minmax(0, 1fr); }
  .ex-side { position: static; max-height: none; }
}

/* The resources list */
.rs-detail { display: block; font-size: 11px; color: var(--muted); margin: 1px 0 0 69px; }
.rs-table td { vertical-align: top; }
.rs-table tbody:only-child .rs-detail { margin-left: 0; }
.rs-totals-h { margin-top: 30px; }
/* A phase printed on one line keeps its needs in plain type under the name. */
.ex-table tr.ex-phase .wp-needs { font-weight: 400; }
.ws-when-flat { font-size: 9.5px; font-weight: 700; }
.ws-flat .ws-phase { vertical-align: top; }

@media print {
  .container-export { padding: 0; max-width: none; }
  .ex-page { display: block; }
  /* Printed on its own, the schedule starts on the first page, not after a blank one. */
  .ex-doc-schedule .ws-section { page-break-before: auto; }
}

/* Days off from one date to another. */
.cal-add .cal-to { font-size: 12.5px; color: var(--muted); }
.cal-add-hint { margin: -4px 0 0; padding: 0 16px 12px; font-size: 11.5px; }
.cal-row-own .cal-date { white-space: nowrap; min-width: 200px; }
.cal-days { margin-left: 8px; font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--k-f5f5f4); border-radius: 20px; padding: 1px 8px; }

/* The sidebar's chips show their whole name, wrapping if they have to. */
.ex-side .wp-chip { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; text-align: left; line-height: 1.35; padding: 3px 10px; }
.ex-side .tp-item-head { flex-basis: 100%; margin: 6px 0 0; font-size: 11px; font-weight: 600; color: var(--muted); }
.ex-side .tp-item-head:first-child { margin-top: 0; }

.wp-need { background: var(--k-ecfeff); color: var(--k-0e7490); }
.tp-section .tp-h4-first { margin-top: 12px; }

/* Microsoft Project warnings, and moving a programme past its days off. */
.msp-modal, .dof-modal { width: 580px; max-width: calc(100vw - 32px); }
.msp-warn, .dof-list { margin: 8px 0 14px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.msp-warn li { margin-bottom: 6px; }
.dof-list li { margin-bottom: 4px; }
.dof-list b { font-weight: 600; margin-right: 8px; }
.dof-list span { color: var(--muted); }
.dof-how { font-size: 13px; line-height: 1.55; margin: 10px 0; }
.dof-finish { display: flex; align-items: center; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0 6px; }
.dof-finish span { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dof-finish b { font-size: 14px; }
.dof-arrow { color: var(--muted); font-size: 18px; }
.dof-count { font-size: 12px; }
.btn-daysoff { background: var(--k-fef3c7); border-color: #f59e0b; color: var(--k-92400e); }
.cal-break { background: var(--primary-light); color: var(--primary); }

/* Material resources: supplier, lead time and description on the list, and the export. */
.res-supply { flex-wrap: wrap; }
.res-supplier-input { width: 170px; }
.res-desc-input { flex: 1 1 200px; min-width: 160px; }
.res-supply input { border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; font: inherit; font-size: 12px; background: var(--k-ffffff); }
.mr-table td { vertical-align: top; }
.mr-name { font-weight: 600; }
.mr-dates div, .mr-lead div { white-space: nowrap; line-height: 1.6; }
.mr-dates span { color: var(--muted); font-size: 11.5px; white-space: normal; }
.mr-none { color: var(--muted-2); font-style: italic; }
.mr-prompt { color: var(--k-475569); font-size: 11.5px; white-space: normal !important; }

/* The programme's cost columns. */
.exg-cost { font-size: 11.5px; }
.exg-chart-h.is-narrow { width: 22%; }
.exg-months { max-width: 520px; }

/* The Gantt chart: wide on screen, on its side on paper. */
.container-export .ex-doc-gantt { max-width: none; }
.ex-main:has(.ex-doc-gantt) .ex-bar { max-width: none; }
.gt-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; margin-top: 8px; }
.gt-table th, .gt-table td { padding: 2px 6px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.gt-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); text-align: left; }
.gt-num { width: 40px; color: var(--muted-2); }
.gt-name { width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-table .gt-chart { position: relative; padding: 0; }
.gt-scale { position: relative; height: 22px; }
.gt-month { position: absolute; top: 0; bottom: 0; padding: 5px 4px 0; border-left: 1px solid var(--line); font-size: 9.5px; white-space: nowrap; overflow: hidden; box-sizing: border-box; text-transform: none; letter-spacing: 0; }
.gt-track { position: relative; height: 18px; }
.gt-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.gt-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed #dc2626; z-index: 2; }
.gt-bar { position: absolute; top: 4px; height: 10px; border-radius: 3px; min-width: 2px; }
.gt-phase td { font-weight: 700; background: var(--k-f8fafc); }
.gt-phase .gt-bar { top: 3px; height: 12px; opacity: .9; }
.gt-dates { position: absolute; top: 3px; font-size: 9px; color: var(--k-475569); white-space: nowrap; font-weight: 400; }
.gt-row-done td { color: var(--muted); }
@page gantt { size: landscape; margin: 0; }
@media print {
  .ex-doc-gantt { page: gantt; }
  .container-export .ex-doc-gantt { max-width: none; }
  .gt-table { font-size: 8pt; }
  .gt-table thead { display: table-header-group; }
  .gt-table tr { break-inside: avoid; }
  .gt-bar, .gt-today, .gt-phase td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Hours in a working day, on the working calendar. */
.cal-hours { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px 0; font-size: 12.5px; }
.cal-hours label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--k-334155); }
.cal-hours input { width: 70px; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font: inherit; }
.cal-hours .muted { font-size: 11.5px; }
/* The resources takeoff inside an export page. */
.tk-section .view-title { font-size: 15px; font-weight: 700; color: var(--primary); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); }
.tk-section .res-cards { margin-bottom: 14px; }

/* Where a material resource is used. */
.res-where-btn { border: 0; background: none; padding: 0; font: inherit; font-style: italic; cursor: pointer;
  color: var(--primary); text-decoration: underline dotted; text-underline-offset: 3px; }
.res-where-btn.is-open { text-decoration-style: solid; }
.res-where-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 12px 44px; }
.res-where-task { display: inline-flex; align-items: baseline; gap: 6px; font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--k-ffffff); border-radius: 999px; padding: 3px 10px; color: var(--ink); }
.res-where-task:hover { border-color: var(--primary); }
.res-where-task span { color: var(--muted); font-size: 11px; }
.res-where-other { flex-basis: 100%; font-size: 11.5px; }
.subtask.is-found > .subtask-row { box-shadow: inset 0 0 0 2px var(--primary); transition: box-shadow .3s ease; }

/* The programme, week by week. */
.exw-table td { vertical-align: top; }
.exw-week { width: 110px; white-space: nowrap; font-size: 11.5px; }
.exw-item { display: flex; align-items: baseline; gap: 6px; line-height: 1.55; font-size: 12px; }
.exw-item i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; transform: translateY(-1px); }
.exw-item span { color: var(--muted); font-size: 11px; }
.exw-off { color: var(--k-92400e); font-size: 11px; margin-top: 2px; }
.exw-quiet td { background: var(--k-fafaf9); }
@media print { .exw-item i, .exw-quiet td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* The materials order's totals, printed first. */
.exq-h4-first { margin-top: 10px; }

/* Totals at the top of every export. */
.ex-summary-top { margin: 6px 0 18px auto; }
.ws-table .ws-total-top td { background: var(--k-f5f3f1); font-size: 11.5px; }
.ex-table .exg-total-top td { background: var(--k-f0fdf4); }
.rs-section .rs-totals-h { margin-top: 12px; }

/* The Resources document's options, and its costs at the top. */
.exs-sub-opt { display: block; margin-left: 22px; }
.rs-costs { margin-bottom: 18px; }
.res-table .res-total-top td { background: var(--k-f0fdf4); }

/* The works & cost schedule: money columns wide enough for millions. */
.ws-table .ws-n { width: 104px; }
.ws-table .ws-tot { width: 112px; }
.ws-period { width: 96px; white-space: nowrap; font-size: 10.5px; vertical-align: top; }
.ws-time .ws-desc .exw-item { font-size: 10.5px; line-height: 1.45; }
.ws-time .ws-desc .exw-item span { font-size: 10px; }
.exs-period { margin-top: 6px; }
@media print { .ws-table .ws-n { width: 88px; } .ws-table .ws-tot { width: 94px; } }

/* The "tasks" button on a material resource: a small rounded button. */
.res-where-btn { font: inherit; font-style: normal; text-decoration: none; display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--line); background: var(--k-ffffff); border-radius: 999px; padding: 2px 5px 2px 10px;
  font-size: 11.5px; font-weight: 600; color: var(--k-475569); white-space: nowrap; cursor: pointer; }
.res-where-btn:hover { border-color: var(--primary); color: var(--primary); }
.res-where-btn.is-open { background: var(--primary-light); border-color: var(--primary); color: var(--primary); text-decoration: none; }
.res-where-btn .icon { width: 13px; height: 13px; transition: transform .15s ease; }
.res-where-btn.is-open .icon { transform: rotate(180deg); }
/* Keep a resource's supplier, lead time and description inside its card. */
.price-row .res-supply { min-width: 0; max-width: 100%; box-sizing: border-box; }
.res-supply .res-desc-input, .res-supply .res-supplier-input { box-sizing: border-box; max-width: 100%; }
.res-supply .res-desc-input { flex: 1 1 220px; }
/* Folders you can drag. */
.cat-grip { margin: 0 2px 0 -6px; }
.price-cat-header:hover .cat-grip { opacity: 1; }
.cat-folder.is-catdrag { opacity: .6; }
.cat-folder.is-catdrag .price-cat-header { background: var(--primary-light); }
/* Suppliers */
.sup-use { white-space: nowrap; }
.exs-arrange { margin-bottom: 4px; }
/* The supply line is indented 26px, so it's that much less than the full width. */
.price-row > .price-supply { flex-basis: calc(100% - 26px); min-width: 0; }

/* Teams and trades: each figure column sized for its figures, so the name and
   Where columns keep real width and wrap between words, not letters. */
.res-table-lab td { overflow-wrap: break-word; }
.res-table-lab th, .res-table-lab td { padding: 7px 6px; }
.res-table-lab th:nth-child(1), .res-table-lab td:nth-child(1) { width: 28%; }
.res-table-lab .ex-amt { width: 10.5%; font-size: 11.5px; }
.res-table-lab th.ex-amt { white-space: normal; }
.res-table-lab .ex-amt:nth-last-child(2) { width: 12%; }
.res-table-lab .ex-amt:last-child { width: 14%; }
.res-table-lab .crew-chip { white-space: normal; }
.lab-makeup { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
/* A materials order: who it's for, and the picks. */
.exq-for { margin-top: -4px; }
.exs-arrange { flex-wrap: wrap; }
.exs-picks { margin-bottom: 6px; }

/* Two copies of the workspace: which to keep. */
.sync-conflict { max-width: 560px; }
.sync-conflict-btns { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sync-conflict-note { font-size: 12px; margin-top: 10px; }
.sync-badge[data-sync-status="conflict"] { background: var(--k-fef3c7); color: var(--k-92400e); border-color: #f59e0b; }

/* A document sent without the letterhead: the title keeps its place. */
.ex-header-plain { padding-bottom: 14px; }
.ex-header-plain .ex-company { min-height: 1px; }
.exs-sep { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }

/* Printing without the browser's own header and footer.
   Chrome and Safari print the page's name and the web address in the paper's
   margin — "WedgeTail Work Plan" across the top and https://buildquote.net/
   beside it. That isn't part of the document and there's no way to switch it
   off from the page. With no margin at all there's nowhere for them to go, so
   the white space moves inside the document instead: the same look on paper,
   and nothing on it but your own work. */
@page { margin: 0; }
@media print {
  .export-doc { padding: 14mm 14mm 16mm; }
  .ex-doc-gantt { padding: 10mm; }
}

/* The Gantt chart prints on its side, on a page type of its own. Only the chart
   was on that type, so the page around it — body, app, containers — was still
   the ordinary upright kind, and when the chart ended Safari turned back to it
   and started one more page with nothing on it. While the Gantt chart is the
   document on show, everything is on the landscape page, so there's nothing to
   turn back to. */
@media print {
  html:has(.ex-doc-gantt), html:has(.ex-doc-gantt) body, html:has(.ex-doc-gantt) #app,
  html:has(.ex-doc-gantt) .container, html:has(.ex-doc-gantt) .ex-page, html:has(.ex-doc-gantt) .ex-main { page: gantt; }
}

/* ---- Export: leaving a line out of the printout ------------------------
   A × in the page's left margin beside every line: phases in the outer
   column, what's under them in the inner one. Faint until you point at the
   line; pointing at the × shows in red everything it would take off. Never
   printed. */
.export-doc { position: relative; }
.ex-gutter { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ex-hide {
  position: absolute; left: 4px; width: 18px; height: 18px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--k-e7e5e4); border-radius: 50%; background: var(--k-ffffff); color: var(--k-a8a29e);
  font: 700 13px/1 system-ui, sans-serif; cursor: pointer;
  opacity: .5; transition: opacity .12s, background .12s, color .12s, border-color .12s;
}
.ex-hide.is-inner { left: 25px; }
.ex-hide.is-hot { opacity: 1; color: #dc2626; border-color: var(--k-fca5a5); }
.ex-hide:hover, .ex-hide:focus-visible { opacity: 1; color: #fff; background: #dc2626; border-color: #dc2626; outline: none; }
.export-doc .ex-out-preview > td, .export-doc td.ex-out-preview {
  background: var(--k-fef2f2) !important; color: var(--k-991b1b) !important;
  text-decoration: line-through; text-decoration-color: rgba(185, 28, 28, .45);
}
@media (hover: none) { .ex-hide { opacity: .85; } }
@media screen and (max-width: 620px) {
  .export-doc.has-ex-gutter { padding-left: 42px; }
  .ex-hide { left: 2px; }
  .ex-hide.is-inner { left: 21px; }
}
@media print { .ex-gutter, .ex-hide { display: none !important; } }

/* What's been left out, listed down the side to put back. */
.exs-out-list { display: flex; flex-direction: column; margin: 6px 0 4px; max-height: 240px; overflow: auto; }
.exs-out { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--k-57534e); padding: 4px 0; border-bottom: 1px dashed var(--line); }
.exs-out span { min-width: 0; overflow-wrap: anywhere; text-decoration: line-through; text-decoration-color: #d6d3d1; }
.exs-out .linkish { flex-shrink: 0; }
.exs-out-all { margin-top: 4px; }

/* ---- Export: titles, subheadings and items easy to tell apart ------------
   A phase (or supplier, folder, heading) is a shaded band with a coloured
   edge; a subheading is small capitals with a rule under it; the items under
   them sit in from the band. The same on paper as on screen. */
.export-doc .ex-table tr.ex-phase > td {
  background: var(--k-eaf0f6); color: var(--k-0f172a); font-weight: 750;
  border-top: 1.5px solid var(--k-94a3b8); border-bottom: 1px solid var(--k-cbd5e1);
}
/* A phase printed in its own colour already has its own edge. */
.export-doc .ex-table tr.ex-phase > td:first-child:not([style*="border-left"]) { box-shadow: inset 3px 0 0 var(--primary); }
.export-doc .ex-table tr.ex-phase.ex-done > td { background: var(--k-f0fdf4); }
.export-doc .ex-table tr.ex-phase.ex-done > td:first-child { box-shadow: inset 3px 0 0 var(--k-16a34a); }
.export-doc tr.ex-group > td {
  padding: 13px 8px 5px !important; font-size: 10.5px; font-weight: 750; color: var(--k-334155);
  text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid var(--k-94a3b8);
}
.export-doc tr.exq-task > td {
  padding: 11px 8px 4px !important; font-size: 12px; font-weight: 700; color: var(--k-334155);
  border-bottom: 1px dashed var(--k-cbd5e1);
}
.export-doc .ex-table tr:not(.ex-phase):not(.ex-group):not(.exq-task):not(.exm-total) > td.ex-num + td { padding-left: 18px; }
.export-doc .ex-table tr:not(.ex-phase):not(.ex-group):not(.exq-task):not(.exm-total) > td.ex-num { color: var(--k-94a3b8); }
.export-doc .gt-table tr.gt-phase > td { background: var(--k-eaf0f6); font-weight: 750; color: var(--k-0f172a); border-top: 1px solid var(--k-cbd5e1); }
.export-doc .gt-table tr.gt-phase > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.export-doc .gt-table tr:not(.gt-phase) .gt-name { padding-left: 16px; color: var(--k-334155); }
.export-doc .ws-task { color: var(--k-0f172a); }

/* ---- Material and labour resources: the cost column ---------------------- */
.mr-table .mr-cost { width: 96px; }
.mr-total-top td { font-weight: 700; }
.mr-loose td { color: var(--k-57534e); font-style: italic; }

/* ---- Cost headings --------------------------------------------------------- */
.ch-summary td:first-child { font-weight: 600; }
.ch-summary .exm-total td:first-child { font-weight: 800; }
.export-doc tr.ch-none > td, .export-doc .ex-table tr.ex-phase.ch-none > td { color: var(--k-b45309); }
.ch-share { width: 64px; }
.ch-detail .exq-from { display: block; }
.ch-pick {
  display: block; margin-top: 5px; max-width: 280px; font: inherit; font-size: 11.5px;
  padding: 2px 6px; border: 1px solid #fcd34d; border-radius: 6px; background: var(--k-fffbeb); color: var(--k-78350f);
}
.ch-howto {
  margin: 8px 0 14px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5;
  background: var(--k-fffbeb); border: 1px solid #fde68a; border-radius: 8px; color: var(--k-92400e);
}
.ch-heads { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; }
.ch-head-row { display: flex; gap: 4px; align-items: center; }
.ch-head-name, .ch-add input {
  flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--k-ffffff);
}
.ch-btn {
  width: 26px; height: 26px; flex-shrink: 0; padding: 0; font-size: 13px; line-height: 1;
  border: 1px solid var(--line); border-radius: 6px; background: var(--k-ffffff); color: var(--k-57534e); cursor: pointer;
}
.ch-btn:disabled { opacity: .35; cursor: default; }
.ch-btn:not(:disabled):hover { background: var(--k-f5f5f4); }
.ch-btn-del:not(:disabled):hover { background: var(--k-fef2f2); color: #dc2626; border-color: var(--k-fca5a5); }
.ch-add { display: flex; gap: 6px; margin: 2px 0 8px; }
.ch-add .btn { padding: 4px 12px; }
.ch-copy, .ch-phase-row select {
  font: inherit; font-size: 12px; padding: 3px 6px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 6px; background: var(--k-ffffff);
}
.ch-copy { width: 100%; margin-bottom: 6px; }
.ch-phases { display: flex; flex-direction: column; gap: 5px; margin: 4px 0; }
.ch-phase-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--k-44403c); }
.ch-phase-row span { min-width: 0; overflow-wrap: anywhere; }
.ch-phase-row select { width: 150px; flex-shrink: 0; }

/* ---- Cost headings on Build Project ---------------------------------------
   A small pill on each phase and task. Dashed and quiet while it's following
   along; amber once a heading is set on it. */
.ch-row-pick {
  -webkit-appearance: none; appearance: none;
  max-width: 150px; height: 24px; padding: 0 22px 0 9px; margin: 0;
  font: inherit; font-size: 11.5px; line-height: 22px; color: var(--k-78716c); cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  border: 1px dashed var(--k-d6d3d1); border-radius: 12px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2378716c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center;
}
.ch-row-pick:hover { border-color: var(--k-a8a29e); color: var(--k-44403c); }
.ch-row-pick.is-set {
  border-style: solid; border-color: #fcd34d; background-color: var(--k-fffbeb); color: var(--k-78350f); font-weight: 600;
}
.ch-task-pick { max-width: 132px; }
.tsel-head { max-width: 170px; }
@media (max-width: 700px) { .ch-row-pick { max-width: 96px; } }

/* ---- Costs that repeat ------------------------------------------------------ */
.other-every {
  flex-shrink: 0; width: 82px; font: inherit; font-size: 12px; padding: 3px 4px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--k-ffffff); color: var(--k-334155);
}
.assign-line.is-repeat { flex-wrap: wrap; }
.assign-line.is-repeat .other-every { border-color: #93c5fd; background: var(--k-eff6ff); color: var(--k-1e40af); font-weight: 600; }
.other-repeat {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 2px 0 2px 18px; padding: 5px 8px; border-radius: 6px;
  background: var(--k-eff6ff); color: var(--k-1e3a8a); font-size: 11.5px;
}
.other-repeat select, .other-count {
  font: inherit; font-size: 11.5px; padding: 2px 4px; border: 1px solid var(--k-bfdbfe); border-radius: 5px; background: var(--k-ffffff); color: inherit;
}
.other-count { width: 52px; text-align: right; }
.other-date {
  font: inherit; font-size: 11.5px; padding: 2px 4px; border: 1px solid var(--k-bfdbfe); border-radius: 5px;
  background: var(--k-ffffff); color: inherit; min-width: 118px;
}
.other-repeat-sum { color: var(--k-1e40af); }
.exw-repeat span { color: #1d4ed8; }

/* ---- Ongoing costs on the Timeline and the Gantt chart ---------------------- */
/* A phase's crews sit in its own line of the rail. As corner badges they were
   placed against the whole rail, so every phase's piled up in its top corner. */
.tl-rail-phase .tl-crews-corner { position: static; transform: none; align-self: center; }
.tl-rail-repeat { --edge: #2563eb; background: var(--k-eff6ff); color: var(--k-1e3a8a); align-items: center; padding-top: 0; }
.tl-rail-repeat .tl-rail-body { cursor: default; }
.tl-row-repeat { background: rgba(239, 246, 255, .55); }
.tl-repeat {
  position: absolute; top: 7px; bottom: 7px; min-width: 10px; border-radius: 8px;
  display: flex; align-items: center; overflow: hidden;
  background: var(--k-dbeafe);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rep) 22%, var(--k-ffffff)) 0 6px, color-mix(in srgb, var(--rep) 30%, var(--k-ffffff)) 6px 12px);
  border: 1.5px solid var(--rep); color: var(--k-1e293b); cursor: default;
}
.tl-repeat.is-cut { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-repeat-tick { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--rep); opacity: .85; }
.tl-repeat-text {
  position: sticky; left: 4px; padding: 0 8px; font-size: 11px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, .78); border-radius: 5px; margin-left: 4px;
}
.cal-repeat { cursor: default; border-left-style: solid !important; opacity: 1 !important; font-weight: 600; }
.gt-rep td { background: var(--k-f8fbff); }
.gt-bar-rep { opacity: .45; }
.gt-rep-tick { position: absolute; top: 2px; height: 14px; width: 2px; margin-left: -1px; background: #1d4ed8; z-index: 1; }
@media print { .gt-rep td, .gt-bar-rep, .gt-rep-tick { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* A picture or a block of them left out shows it the same way a row does. */
.export-doc .ex-out-preview:not(tr):not(td) { outline: 2px solid #f87171; outline-offset: 2px; background: var(--k-fef2f2); opacity: .6; }

/* ---- Every tab on a big screen ------------------------------------------------
   Every tab uses the width a big monitor has, and the header is the same width
   on all of them, so the tabs sit on one row whichever one is open. A long
   task name takes a second line rather than being cut off. */
@media (min-width: 1560px) {
  .container:not(.container-wide), .header-inner { max-width: min(2400px, calc(100vw - 40px)); }
}
.subtask-name {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  min-width: 9em; flex: 0 1 auto;
}

/* ---- The programme by time: each task's cost beside it ------------------- */
.exw-item.has-cost { align-items: flex-start; }
.exw-item.has-cost > i { transform: translateY(5px); }
.exw-what { flex: 1 1 auto; min-width: 0; }
.exw-what > span { margin-left: 6px; }
.exw-cost { flex: none; margin-left: 10px; font-size: 11.5px; font-weight: 600; color: var(--k-1e293b); text-align: right; white-space: nowrap; }
.exw-of { display: block; font-style: normal; font-weight: 400; font-size: 10px; color: var(--muted); }

/* The programme's total, at the foot of the table when it's put there. */
.ex-table .exg-total-top.is-last tr td { border-top: 2px solid #86efac; }

/* ---- No contingency or margin ------------------------------------------------ */
.nomark-btn { font-size: 12px; font-weight: 800; line-height: 1; color: #cbd5e1; }
.nomark-btn:hover { color: var(--muted); }
.nomark-btn.is-on { color: var(--k-0f766e); text-decoration: line-through; text-decoration-thickness: 2px; }
.nomark-btn.is-inherited { color: #5eead4; }
/* When a task runs: a quiet chip on the row, and the dates in full once it's
   open. Both read the programme, so they move when it does. */
.task-when {
  flex: none; font-size: 10.5px; color: var(--k-57534e); background: var(--line-2);
  border-radius: 5px; padding: 1px 6px; white-space: nowrap; letter-spacing: 0;
}
.subtask-row.is-open .task-when { background: var(--k-e8ede9); color: var(--k-2a3d36); }
.task-when-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--k-f6f8f7); font-size: 13.5px;
}
.task-when-line.is-none { color: var(--muted); font-size: 12.5px; background: var(--paper); }
.task-when-line.is-none svg { width: 15px; height: 15px; flex: none; color: var(--muted-2); }
.task-when-line i { font-style: normal; color: var(--muted); }
.twl-ico { display: flex; flex: none; color: #6b8579; }
.twl-ico svg { width: 16px; height: 16px; }
.twl-when b { font-weight: 700; }
.twl-off { color: var(--k-b45309) !important; }
.twl-go { margin-left: auto; font-size: 12.5px; }
@media (max-width: 760px) { .task-when { display: none; } .twl-go { margin-left: 0; } }
.nomark-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: var(--k-ccfbf1); color: var(--k-115e59);
}
.summary-nomark .label, .summary-nomark .value { color: var(--k-0f766e); }
.ex-sum-nomark { color: var(--k-0f766e); font-size: 12px; }

/* ---- Sharing a project, and looking at one shared with you ------------------ */
.ro-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--k-eef2ff); border-top: 1px solid var(--k-c7d2fe); color: var(--k-312e81); font-size: 13px;
}
.ro-badge {
  flex: none; padding: 2px 10px; border-radius: 999px; background: #4338ca; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ro-text { flex: 1 1 320px; min-width: 0; }
.pill.ro-pill { background: var(--k-e0e7ff); color: var(--k-3730a3); }
.btn.is-shared { border-color: var(--k-a5b4fc); color: var(--k-3730a3); }
.shared-in { margin-top: 28px; }
.shared-in-title { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.shared-card { border-left: 3px solid #6366f1; }
.pshare-modal { width: 560px; max-width: calc(100vw - 32px); }
.pshare-how { font-size: 13.5px; line-height: 1.5; color: var(--k-44403c); margin: 4px 0 14px; }
.pshare-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pshare-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.pshare-email { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pshare-add { display: flex; gap: 8px; }
.pshare-add .add-input { flex: 1; min-width: 0; }
.pshare-msg { color: var(--k-b91c1c); font-size: 13px; margin: 8px 0 0; }
.pshare-note { font-size: 12px; margin: 12px 0 0; }

/* Looking only: what would change the project is put away. */
body.is-viewing .add-row, body.is-viewing .group-add-row, body.is-viewing .matpick-wrap,
body.is-viewing .other-add, body.is-viewing .need-new, body.is-viewing .assign-select,
body.is-viewing .assign-line-remove, body.is-viewing .icon-btn-danger, body.is-viewing .need-x,
body.is-viewing .row-grip, body.is-viewing .task-grip, body.is-viewing .phase-grip,
body.is-viewing .tl-handle, body.is-viewing .tl-linkdot, body.is-viewing .tl-grow,
body.is-viewing .qty-arrow, body.is-viewing .task-pick, body.is-viewing .task-copy,
body.is-viewing .tsel-bar, body.is-viewing .tl-delay-add, body.is-viewing .ch-row-pick:not(.is-set) { display: none !important; }
body.is-viewing input[readonly], body.is-viewing textarea[readonly] { background: var(--k-fafaf9); cursor: default; }
body.is-viewing .tl-bar, body.is-viewing .tl-bubble { cursor: pointer; }

/* The plan viewer, looking only. */
.tk-ro-pill {
  flex: none; padding: 2px 9px; border-radius: 999px; background: #4338ca; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.tk-readonly [data-tk="snap"], .tk-readonly [data-tk="undo-history"], .tk-readonly [data-tk="redo-history"] { display: none; }

/* The price on a line off the plans: the folded price list, like the rest. */
.ms-line-pick { flex: 1; min-width: 0; }
.ms-line-pick .ms-line-mat { width: 100%; cursor: pointer; padding-right: 16px;
  background: var(--k-ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E") no-repeat right 5px center; }
.ms-line-mat.has-mat::placeholder { color: var(--ink, var(--k-292524)); opacity: 1; }
.ms-line-mat::placeholder { color: var(--muted); opacity: 1; }
.ms-line-pick .matpick { max-width: min(420px, 86vw); }
.matpick-row.is-current { background: var(--primary-light, var(--k-fff4ed)); }
.matpick-row.is-current .matpick-name { font-weight: 700; }
.matpick-rate { border-bottom: 1px solid var(--line-2, var(--k-eeeeee)); border-radius: 7px 7px 0 0; margin-bottom: 2px; }
.matpick-rate .matpick-name { font-style: italic; color: var(--muted); }

/* Cost headings by the type of cost. */
.ch-by { margin: 2px 0 10px; }
.ch-types .ch-phase-row span { font-weight: 600; }

/* Whether GST is in a total — said beside it, and printed with it. */
.gst-tag {
  margin-left: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); white-space: nowrap; text-transform: none;
}
.gst-tag-h { display: block; margin-left: 0; margin-top: 1px; font-weight: 600; }
.ex-sum-total .gst-tag, .exm-total .gst-tag { color: inherit; opacity: .7; }

/* Documents Claude can read, and quotes split across the job. */
.doc-read { font-size: 11.5px; color: var(--k-047857); white-space: nowrap; }
.doc-read.is-no { color: var(--muted); }
.split-modal { width: 640px; max-width: calc(100vw - 32px); }
.split-how { font-size: 13.5px; line-height: 1.5; color: var(--k-44403c); margin: 4px 0 12px; }
.split-top { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.split-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; font-size: 12px; color: var(--muted); }
.split-field input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; width: 100%; }
.split-field-total { flex: 0 0 160px; }
.split-modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.split-modes .ex-seg { flex: none; width: auto; display: inline-flex; }
.split-modes .ex-seg .ex-preset { flex: none; padding: 4px 16px; }
.split-list { max-height: 44vh; overflow: auto; border: 1px solid var(--line); border-radius: 9px; padding: 4px; }
.split-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; }
.split-row.is-phase { font-weight: 600; }
.split-row.is-task { padding-left: 22px; font-size: 12.5px; color: var(--k-44403c); }
.split-row:hover { background: var(--k-fafaf9); }
.split-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.split-sub { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.split-in { display: inline-flex; align-items: center; gap: 2px; }
.split-in input { width: 92px; text-align: right; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.split-pc { color: var(--muted); }
.split-other { width: 86px; text-align: right; font-size: 12px; color: var(--muted); }
.split-tasks { font-size: 11px; margin-left: 6px; }
.split-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 2px 0; font-size: 13px; }
.split-left.is-off { color: var(--k-b45309); font-weight: 600; }
.split-left.is-done { color: var(--k-047857); font-weight: 600; }
.split-btns { margin-top: 14px; }
.split-card-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--line-2); font-size: 13px; }
.split-card-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.split-card-n { color: var(--muted); font-size: 12px; white-space: nowrap; }
.split-card-amt { white-space: nowrap; font-weight: 600; }
.split-tag {
  flex: none; padding: 1px 7px; border: 1px solid var(--k-c7d2fe); border-radius: 999px; background: var(--k-eef2ff);
  color: var(--k-3730a3); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.split-tag:hover { background: var(--k-e0e7ff); }

/* The Cost Tracker, week by week and month by month. */
.tr-viewbar { display: flex; justify-content: flex-end; margin: 14px 0 8px; }
.tr-views { display: inline-flex; width: auto; }
.tr-views .ex-preset { flex: none; padding: 5px 16px; }
.trp-card { padding: 14px 16px 12px; }
.trp-chart { margin: 0 0 12px; }
.trp-chart svg { width: 100%; height: 150px; display: block; background: var(--k-fafaf9); border: 1px solid var(--line-2, var(--k-eeeeee)); border-radius: 8px; }
.trp-plan { fill: none; stroke: var(--k-a8a29e); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.trp-act { fill: none; stroke: var(--primary, var(--k-1f3a2e)); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.trp-now { stroke: #f59e0b; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.trp-legend { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.trp-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid; margin: 0 4px 0 8px; vertical-align: middle; }
.trp-key-plan { border-top: 2px dashed var(--k-a8a29e); }
.trp-key-act { border-color: var(--primary, var(--k-1f3a2e)); border-top-width: 3px; }
.trp-key-now { border-color: #f59e0b; width: 2px; height: 12px; border-top: 0; border-left: 2px solid #f59e0b; }
.trp-scroll { overflow-x: auto; }
.trp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trp-table th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--k-a8a29e);
  font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.trp-table th i, .trp-table td i { font-style: normal; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.trp-table td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--line-2, var(--k-f0efed)); white-space: nowrap; }
.trp-table .trp-period { text-align: left; }
.trp-table td.trp-period { font-weight: 600; }
.trp-run { background: var(--k-fafaf9); }
.trp-total td { font-weight: 800; border-bottom: 2px solid var(--line); background: var(--k-f5f5f4); }
.trp-row { cursor: pointer; }
.trp-row:hover td { background: var(--k-f5f5f4); }
.trp-row.is-future td { color: var(--k-a8a29e); }
.trp-row.is-now td { background: var(--k-fffbeb); }
.trp-row .collapse-chevron { display: inline-flex; width: 16px; vertical-align: middle; color: var(--muted); }
.trp-now-tag { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #fde68a; color: var(--k-92400e); font-size: 10.5px; font-weight: 700; }
.trp-detail td { text-align: left; background: var(--k-fcfcfb); padding: 6px 12px 10px 30px; white-space: normal; }
.trp-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 8px 0 4px; }
.trp-line { display: grid; grid-template-columns: 56px minmax(140px, 1.2fr) 2fr 70px 96px; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.trp-line.is-typed .trp-what, .trp-line.is-plan .trp-what { color: var(--muted); }
.trp-line.is-plan { color: var(--k-57534e); }
.trp-hrs, .trp-amt { text-align: right; }
.trp-none { font-size: 12.5px; color: var(--muted); padding: 2px 0; }
.trp-todate { font-size: 10.5px; margin-left: 3px; }
@media (max-width: 700px) { .trp-line { grid-template-columns: 48px 1fr 70px; } .trp-line .trp-what, .trp-line .trp-hrs { display: none; } }

/* The Cost Tracker: phases that stand out from their tasks, a total at the
   foot, and one place to log a cost. */
.tr-phase-hd { background: var(--k-eef2ef); border-top: 1px solid var(--k-dfe5e1); border-bottom: 1px solid var(--k-dfe5e1); border-left: 4px solid var(--primary);
  padding-left: 10px; font-weight: 700; font-size: 14.5px; color: var(--ink, var(--k-1c1917)); }
.tr-phase-hd:hover { background: var(--k-e4ebe6); }
.tr-phase-hd .tr-num { color: var(--primary); font-weight: 800; font-size: 13px; }
.tr-phase-hd .tr-q, .tr-phase-hd .tr-a, .tr-phase-hd .tr-v { font-size: 13.5px; font-weight: 700; }
.tr-phase + .tr-phase { margin-top: 0; }
.tr-phase.is-aside .tr-phase-hd { opacity: .55; }
.tr-task-hd { padding-left: 26px; font-size: 13px; color: var(--k-44403c); font-weight: 400; }
.tr-task-hd .tr-name { color: var(--k-44403c); }
.tr-elsewhere { background: var(--k-fffbeb); border-left-color: #f59e0b; font-weight: 600; font-size: 13px; color: var(--k-92400e); cursor: default; }
.tr-foot { display: grid; grid-template-columns: 68px 1fr 108px 108px 108px; gap: 8px; align-items: center; padding: 10px 14px;
  background: var(--k-f5f5f4); border-top: 2px solid var(--line); font-weight: 800; font-size: 14px; }
.tr-foot .tr-q, .tr-foot .tr-a, .tr-foot .tr-v { text-align: right; font-size: 13.5px; }
.trq { padding: 14px 16px; margin-top: 14px; }
.trq-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.trq-hd b { font-size: 15px; }
.trq-hd span { font-size: 12.5px; color: var(--muted); }
.trq-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.trq-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--k-a8a29e); text-transform: uppercase; letter-spacing: .04em; }
.trq-f i { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; }
.trq-f input, .trq-f select { font: inherit; font-size: 13.5px; font-weight: 400; color: var(--ink, var(--k-1c1917)); text-transform: none; letter-spacing: 0;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--k-ffffff); min-width: 0; }
.trq-date input { width: 140px; }
.trq-task { flex: 2 1 240px; } .trq-task select { width: 100%; }
.trq-kind select { width: 128px; }
.trq-who { flex: 1 1 140px; } .trq-what { flex: 1.4 1 170px; }
.trq-amt input { width: 110px; text-align: right; }
.trq-hrs input { width: 72px; text-align: right; }
.trq-add { height: 34px; }
.trq-last { margin-top: 9px; font-size: 12.5px; color: var(--k-44403c); }
.trq-last .linkish { margin-left: 6px; }
body.is-viewing .trq { display: none !important; }
.wp-qty { margin-left: 5px; padding: 0 5px; border-radius: 4px; background: var(--k-f5f5f4); color: var(--k-57534e); font-size: .9em; font-variant-numeric: tabular-nums; }

/* What a task needs: solid tags that print as they look, each with its own
   picture, and the list beside it in a column of its own. */
.wp-needs { display: grid; gap: 3px; line-height: 1.5; }
.wp-needrow { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 8px; align-items: start; }
.wp-list { min-width: 0; padding-top: 1px; }
.wp-tag {
  display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start;
  min-width: 0; width: 94px; margin: 1px 0 0; padding: 2px 7px; box-sizing: border-box;
  border-radius: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; line-height: 1.5;
  text-transform: uppercase; vertical-align: 1px; color: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.wp-tag svg { width: 11px; height: 11px; flex: none; stroke: currentColor; }
.wp-mat { background: #4338ca; color: #fff; }
.wp-lab { background: #047857; color: #fff; }
.wp-eq  { background: #c2410c; color: #fff; }
.wp-oth { background: #475569; color: #fff; }
.wp-tag.wp-need { background: #0e7490; color: #fff; }
.rs-row .wp-tag { margin-right: 8px; }
@media print { .wp-tag, .wp-tag * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.export-doc .ex-table.wp-plain tr.ex-phase > td { background: var(--k-ffffff); border-top: 1.5px solid var(--k-cbd5e1); border-bottom: 1px solid var(--k-e7e5e4); }
.export-doc .ex-table.wp-plain tr.ex-phase > td:first-child { box-shadow: none; }

/* Build Costs: exc GST as the big figure, GST and inc GST under it. */
.grand-total-box .label .gt-gst { text-transform: none; letter-spacing: 0; font-weight: 700; color: #fff; opacity: .85; margin-left: 4px; }
.summary-gst { margin: 8px 2px 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--k-fafaf9); }
.summary-gst .summary-row { font-size: 12.5px; padding: 2px 0; }
.summary-gst .percent-input { width: 52px; font-size: 12px; padding: 2px 4px; margin-left: 6px; }
.summary-gst .summary-pc { color: var(--k-94a3b8); font-size: 11.5px; }
.summary-inc { border-top: 1px dashed var(--line); margin-top: 3px; padding-top: 5px !important; }
.summary-inc .label { color: var(--k-1e293b); font-weight: 700; }
.summary-inc .value { color: var(--k-0f172a); font-weight: 700; font-size: 13.5px; }

/* Phase headings on every document: bigger, on white, with the phase's number
   in a bubble of its own colour — no shaded bands or coloured edges. A
   completed phase keeps its tint. */
.ex-table tr.ex-phase td, .gt-phase td,
.export-doc .ex-table tr.ex-phase > td, .export-doc .gt-table tr.gt-phase > td {
  background: var(--k-ffffff); border-top: 1.5px solid var(--k-d6d3d1); border-bottom: 1px solid var(--k-ece9e6); font-weight: 800; color: var(--k-1c1917);
}
.export-doc .ex-table tr.ex-phase > td { font-size: 14.5px; padding-top: 11px; padding-bottom: 9px; }
.export-doc .gt-table tr.gt-phase > td { font-size: 12.5px; }
.export-doc .ex-table tr.ex-phase > td:first-child, .export-doc .gt-table tr.gt-phase > td:first-child { box-shadow: none !important; }
.export-doc .ex-table tr.ex-phase.ex-done > td { background: var(--k-f0fdf4); }
.ph-bubble {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; vertical-align: middle;
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gt-table .ph-bubble { min-width: 18px; height: 16px; padding: 0 5px; font-size: 10px; }
td[colspan] > .ph-bubble:first-child { margin-right: 9px; }


/* ---- Schedule & Calendar (build 119) ---------------------------------------
   The tab's three views as big buttons across the top. */
.sc-switch { display: flex; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
/* The Build tab's two sides. Same switch as Schedule & Calendar's, so the two
   tabs that have sides show them the same way. */
.build-switch { margin-bottom: 14px; }
/* Consumables on the summary: the figure, and whether it's this job's own. */
.summary-cons { align-items: flex-start; }
.summary-cons .label { display: flex; flex-direction: column; gap: 1px; }
.cons-own-note { font-size: 11px; color: var(--muted-2); font-weight: 400; }
.cons-own-note .linkish { font-size: 11px; }
.cons-own-fig { display: flex; align-items: center; gap: 4px; flex: none; }
.cons-own-fig .value { min-width: 78px; text-align: right; }
.pc-fig { display: flex; align-items: center; gap: 4px; flex: none; }
.pc-fig .value { min-width: 78px; text-align: right; }
.percent-input.is-own { border-color: var(--k-2a3d36); background: var(--k-f3f6f4); font-weight: 700; }
.cons-usual-note { margin-top: 6px; }
.build-switch .sc-sw { flex: 0 1 330px; }
.build-lead { margin: 0; }
.sc-sw {
  display: flex; align-items: center; gap: 12px; min-width: 220px; flex: 0 1 auto; text-align: left; cursor: pointer;
  padding: 11px 18px 11px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; transition: border-color .15s ease, background-color .15s ease;
}
.sc-sw:hover { border-color: var(--k-a8a29e); }
.sc-sw .sc-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--k-f5f5f4); color: var(--k-57534e); flex: none; }
.sc-sw .sc-ico svg { width: 20px; height: 20px; }
.sc-sw .sc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-sw b { font-size: 15px; font-weight: 700; }
.sc-sw i { font-style: normal; font-size: 12px; color: var(--muted); }
.sc-sw.is-on { border-color: var(--k-2a3d36); background: var(--k-f3f6f4); box-shadow: 0 1px 3px rgba(42, 61, 54, .12); }
.sc-sw.is-on .sc-ico { background: #2A3D36; color: #fff; }
body.is-tlfull .container-full > .sc-switch { flex: none; }
@media (max-width: 760px) { .sc-sw { min-width: 0; flex: 1 1 100%; } }

/* The bell beside a booked line. */
.line-prompt {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; height: 22px; padding: 0 4px; border-radius: 6px;
  border: 1px solid transparent; background: none; color: #d6d3d1; cursor: pointer; font-size: 10.5px; font-weight: 600;
}
.line-prompt svg { width: 13px; height: 13px; }
.line-prompt:hover { color: var(--k-b45309); border-color: #fcd34d; background: var(--k-fffbeb); }
.line-prompt.is-auto { color: var(--k-a8a29e); border-color: var(--k-e7e5e4); }
.line-prompt.is-on { color: var(--k-92400e); background: var(--k-fef3c7); border-color: #fcd34d; }
.line-prompt.is-off { color: #d6d3d1; text-decoration: line-through; }
.res-group-hd .line-prompt, .need-group .line-prompt { margin-left: 4px; }
body.is-viewing .line-prompt { display: none; }

/* A heading on Build Costs can be renamed where it stands. */
.res-group-name-in {
  flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 6px;
  padding: 2px 6px; margin-left: -6px; font-family: inherit; line-height: 1.3;
}
.res-group-name-in:hover { border-color: var(--line); background: var(--k-ffffff); }
.res-group-name-in:focus { outline: none; border-color: var(--k-2a3d36); background: var(--k-ffffff); text-transform: none; letter-spacing: 0; }
.res-group-hd .need-x { margin-left: 4px; }
/* So can a one-off's name. */
.oneoff-name-in {
  min-width: 0; width: calc(100% - 70px); max-width: 320px; border: 1px solid transparent; background: transparent; border-radius: 5px;
  padding: 1px 5px; margin-left: -5px; font: inherit; color: inherit;
}
.oneoff-name-in:hover { border-color: var(--line); background: var(--k-ffffff); }
.oneoff-name-in:focus { outline: none; border-color: var(--k-2a3d36); background: var(--k-ffffff); }
/* Who a one-off comes from, under its name. */
.oneoff-sup-in {
  display: block; width: 180px; max-width: 100%; box-sizing: border-box; margin: 3px 0 0 -5px;
  border: 1px dashed var(--line); background: transparent; border-radius: 5px; padding: 1px 5px;
  font: inherit; font-size: 11.5px; color: var(--muted);
}
.oneoff-sup-in:not(:placeholder-shown) { border-style: solid; border-color: transparent; }
.oneoff-sup-in:hover, .oneoff-sup-in:focus { outline: none; border-style: solid; border-color: var(--line); background: var(--k-ffffff); color: inherit; }
.oneoff-add .oneoff-sup { width: 120px; }

/* The prompt schedule: adding one, and ticking one off. */
.ps-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px;
  border: 1px dashed var(--k-d6d3d1); border-radius: 10px; background: var(--k-fafaf9); }
.ps-add-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.ps-add select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--k-ffffff); max-width: 340px; }
.ps-add select:disabled, .ps-add .btn:disabled { opacity: .45; cursor: default; }
.ps-table .ps-act { width: 70px; text-align: right; white-space: nowrap; }
.ps-btn { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--k-ffffff); color: var(--k-78716c); cursor: pointer; font-weight: 700; }
.ps-btn:hover { border-color: var(--k-a8a29e); color: var(--ink); }
.ps-tick.is-on { background: #16a34a; border-color: var(--k-16a34a); color: #fff; }
.ps-what { font-weight: 600; margin-right: 6px; }
.ps-tag-done { background: var(--k-dcfce7); color: var(--k-166534); }
.ps-ticked td { color: var(--k-a8a29e); }
.ps-ticked .ps-what { text-decoration: line-through; }
.lp-done.is-on { background: #16a34a; border-color: var(--k-16a34a); color: #fff; }

/* Prompts on the calendar, on the day to do them. */
.cal-chip.cal-prompt { --bg: #fffbeb; --bd: #f59e0b; --tx: #92400e; display: flex; align-items: center; gap: 4px;
  border-left-style: solid; opacity: 1; touch-action: auto; }
.cal-chip.cal-prompt svg { width: 11px; height: 11px; flex: none; }
.cal-chip.cal-prompt.is-late { --bg: #fef2f2; --bd: #dc2626; --tx: #991b1b; }
.cal-chip.cal-prompt.is-done { --bg: #f5f5f4; --bd: #d6d3d1; --tx: #a8a29e; text-decoration: line-through; }
.cal-key-prompt { display: inline-flex; align-items: center; gap: 4px; color: var(--k-92400e); }
.cal-key-prompt svg { width: 12px; height: 12px; }

/* Today: the header button and the briefing. */
.today-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--k-ffffff); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.today-btn:hover, .today-btn.is-on { border-color: var(--k-2a3d36); }
.today-btn svg { width: 15px; height: 15px; }
.today-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
/* Always there, so the header doesn't jump when the count arrives. */
.today-badge { visibility: hidden; }
.today-badge.is-on { visibility: visible; }
/* Nine tabs, the Today button and the account have to share one row on a
   laptop-to-desktop screen: slimmer tabs, and the button is just the bell and
   its count until there's room for the word. */
.tab-btn { padding: 7px 10px; font-size: 13px; }
@media (max-width: 1180px) { .tab-btn { padding: 6px 7px; font-size: 12.5px; } }
.header .account-email { max-width: 150px; }
@media (max-width: 1899px) { .today-btn .today-lbl { display: none; } .today-btn { padding: 0 8px; } }
.today-modal { width: 640px; }
.today-modal .view-title { display: flex; align-items: center; gap: 8px; }
.today-modal .view-title svg { width: 20px; height: 20px; }
.td-date { font-weight: 500; color: var(--muted); font-size: .8em; }
.td-scope { margin: 2px 0 12px; font-size: 13px; }
.td-link { border: none; background: none; padding: 0; font: inherit; color: var(--k-2a3d36); text-decoration: underline; cursor: pointer; }
.td-sec { margin: 14px 0 4px; }
.td-sec h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--k-57534e); display: flex; align-items: center; gap: 8px; }
.td-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--k-f5f5f4); color: var(--k-57534e);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; }
.td-n.is-hot { background: #dc2626; color: #fff; }
.td-muted { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.td-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; margin: 0 0 4px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--k-ffffff); font: inherit; color: inherit; }
button.td-row { cursor: pointer; }
button.td-row:hover { border-color: var(--k-a8a29e); }
.td-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.td-bell { color: var(--k-b45309); display: flex; flex: none; }
.td-bell svg { width: 15px; height: 15px; }
.td-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.td-main b { font-weight: 600; font-size: 13.5px; }
.td-note { font-style: normal; font-size: 11px; font-weight: 700; color: var(--k-2a3d36); background: var(--k-eef3f0); border-radius: 999px; padding: 1px 7px; }
.td-note.is-late { color: var(--k-991b1b); background: var(--k-fee2e2); }
.td-sub { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.td-proj { font-style: normal; font-size: 11px; color: var(--k-57534e); background: var(--k-f5f5f4); border-radius: 6px; padding: 2px 6px; white-space: nowrap; flex: none; }
.td-prompt.is-late { border-color: var(--k-fca5a5); background: var(--k-fffafa); }
.td-done { flex: none; }
.td-day { margin: 0 0 10px; }
.td-day-h { font-size: 12.5px; font-weight: 700; margin: 8px 0 4px; }
.td-none { margin: 2px 0 8px; font-size: 13px; }
.td-auto { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--k-57534e); }

/* A project you're running shows in Today. */
.live-btn.is-on { background: var(--k-eef3f0); border-color: var(--k-2a3d36); color: var(--k-2a3d36); font-weight: 600; }

/* ---- The morning notification, set up from the Today panel ------------------ */
.td-push { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--k-fafaf9); }
.td-push.is-on { border-color: var(--k-bbf7d0); background: var(--k-f6fdf8); }
.td-push-hd { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.td-push-hd svg { width: 15px; height: 15px; }
.td-push-hd b { display: inline-flex; align-items: center; gap: 6px; }
.td-push-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--k-166534); background: var(--k-dcfce7); border-radius: 999px; padding: 2px 8px; }
.td-push p { margin: 6px 0 10px; font-size: 12.5px; }
.td-push-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.td-push-fld { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--k-57534e); }
.td-push-fld select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--k-ffffff); }
.td-push-msg { margin: 6px 0 0 !important; font-size: 12.5px; color: var(--k-166534); }
.td-push-msg.is-bad { color: var(--k-b91c1c); }

/* ---- Calendar subscription links ------------------------------------------- */
.cf-modal { width: 640px; }
.cf-modal .view-title { display: flex; align-items: center; gap: 8px; }
.cf-modal .view-title svg { width: 19px; height: 19px; }
.cf-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--k-ffffff); }
.cf-row-top { display: flex; align-items: center; gap: 10px; }
.cf-row-top b { font-size: 14px; }
.cf-what { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-link { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.cf-link input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; font-family: "SFMono-Regular", Consolas, monospace;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--k-fafaf9); color: var(--k-57534e); }
.cf-link .btn { flex: none; text-decoration: none; }
.cf-hint { margin: -2px 0 8px; font-size: 12px; line-height: 1.45; }
.cf-phase { align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--k-57534e); background: var(--line-2); border-radius: 999px; padding: 2px 8px; }
.cf-note { margin: 6px 0 0; font-size: 11.5px; }
.cf-none { margin: 4px 0 12px; }
.cf-new { border: 1px dashed var(--k-d6d3d1); border-radius: 10px; padding: 12px; margin: 10px 0; background: var(--k-fafaf9); }
.cf-fld { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.cf-fld > span { width: 60px; flex: none; color: var(--k-57534e); }
.cf-fld input[type="text"], .cf-fld select { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--k-ffffff); }
.cf-ticks { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; font-size: 13px; }
.cf-ticks label { display: flex; align-items: center; gap: 8px; }
.cf-warn { font-size: 12px; margin: 8px 0 10px; }
.cf-new-btns { display: flex; justify-content: flex-end; gap: 8px; }
.cf-msg { margin: 10px 0 0; font-size: 12.5px; color: var(--k-166534); }
.cf-msg.is-bad { color: var(--k-b91c1c); }
.cf-how { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.cf-how summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.cf-how p { margin: 8px 0; font-size: 12.5px; }
@media (max-width: 620px) { .cf-modal { width: auto; } .cf-link { flex-wrap: wrap; } .cf-link input { flex-basis: 100%; } }

/* ---- The app on a phone and on an iPad -------------------------------------
   Four tabs across the top, a screen under them, and nothing that edits the
   job except ticking a prompt off. The full app is a button away.

   dvh, not %: an iPhone's toolbar slides in and out, and a page told to be
   100% tall is taller than what you can see — which put the tabs off the
   bottom of a long screen like Export. */
/* With viewport-fit=cover the page runs under the notch and the rounded
   corners, so anything at the edge keeps clear of them itself. */
.header-inner, .container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
body.is-phone { overflow: hidden; height: 100vh; height: 100dvh; }
body.is-phone #app { display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  background: var(--paper); overflow: hidden; }
body.is-phone .header, body.is-phone .container { display: none; }
.ph-nav { flex: none; display: flex; align-items: center; gap: 9px;
  padding: calc(5px + env(safe-area-inset-top)) max(9px, env(safe-area-inset-left)) 0 max(9px, env(safe-area-inset-right));
  background: var(--card); border-bottom: 1px solid var(--line); }
.ph-mark { width: 28px; height: 28px; flex: none; margin-bottom: 5px; }
.ph-mark svg { width: 100%; height: 100%; display: block; border-radius: 8px; }
.ph-iconbtn { width: 34px; height: 34px; flex: none; border: 1px solid var(--line); background: var(--k-ffffff); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ph-txtbtn { border: 1px solid var(--line); background: var(--k-ffffff); border-radius: 9px; padding: 7px 11px; font: inherit;
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ph-txtbtn.is-main { background: var(--primary-bg); border-color: var(--primary); color: #fff; }
.ph-appbtn { margin-bottom: 5px; }
.ph-screen { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px max(13px, env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom)) max(13px, env(safe-area-inset-right)); }
/* The calendar and the programme get the lot: no padding, no page scroll of
   their own — they lay themselves out to the room there is. */
.ph-screen.is-full { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ph-pad { padding: 14px 13px; }

/* The job, at the top of Today */
.ph-jobhead { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.ph-jobname { flex: 1 1 auto; min-width: 0; }
.ph-jobname b { display: block; font-size: 16px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-jobname span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ticking a prompt off */
.ph-done { width: 36px; height: 36px; flex: none; align-self: center; border: 1px solid var(--line);
  background: var(--k-ffffff); border-radius: 10px; color: var(--muted-2); display: flex; align-items: center; justify-content: center; }
.ph-done svg { width: 15px; height: 15px; }
.ph-done.is-on { background: #2A3D36; border-color: var(--k-2a3d36); color: #fff; }
.ph-card.is-done { opacity: .6; }
.ph-card.is-done > .ph-main b { text-decoration: line-through; }

.ph-head { margin: 2px 0 10px; font-size: 21px; letter-spacing: -.015em; }
.ph-head span { font-weight: 500; color: var(--muted); font-size: 14px; }
.ph-sec { margin: 16px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--k-57534e);
  display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ph-day-h { margin: 12px 0 6px; }
.ph-muted { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.ph-pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--line-2); color: var(--k-57534e);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; }
.ph-pill.is-hot { background: var(--danger, #b91c1c); color: #fff; }
.ph-card { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; margin-bottom: 8px; font: inherit; color: inherit; }
.ph-card b { font-size: 14.5px; font-weight: 600; }
/* What a card belongs to, down its left edge: its phase's colour, or amber for
   a prompt — red once it's overdue, grey once it's done. */
.ph-card.has-ph, .ph-card.is-prompt { border-left-width: 4px; padding-left: 11px; }
.ph-card.has-ph { border-left-color: var(--ph, var(--line)); }
.ph-card.has-ph .ph-dot { display: none; }
.ph-card.is-prompt { border-left-color: #f59e0b; }
.ph-card.is-prompt.is-late { border-left-color: #dc2626; }
.ph-card.is-prompt.is-done { border-left-color: var(--k-d6d3d1); }
button.ph-card:active, .ph-doc:active { background: var(--k-f5f5f4); }
.ph-sec { font-weight: 800; }
.ph-main { flex: 1 1 auto; min-width: 0; }
.ph-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.ph-tag { font-style: normal; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px;
  background: var(--k-eef3f0); color: var(--k-2a3d36); white-space: nowrap; }
.ph-tag.is-late { background: var(--k-fee2e2); color: var(--k-991b1b); }
.ph-tag.is-warn { background: var(--k-fef3c7); color: var(--k-b45309); }
.ph-proj { font-style: normal; font-size: 11px; color: var(--k-57534e); background: var(--line-2); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.ph-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; margin-top: 5px; }
.ph-bell { color: var(--k-b45309); display: flex; flex: none; margin-top: 2px; }
.ph-go { color: var(--muted-2); display: flex; align-self: center; flex: none; }
.ph-none { color: var(--muted); font-size: 13.5px; margin: 4px 0 10px; }
.ph-needs { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 7px; }
.ph-needs.is-big { margin: 4px 0 4px; }
.ph-need { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--k-57534e); }
.ph-need .wp-tag { width: auto; min-width: 0; margin: 0; padding: 3px 4px; border-radius: 5px; }
.ph-need .wp-tag svg { width: 12px; height: 12px; }
.ph-desk-was { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; padding: 12px 13px; border-radius: 12px;
  background: var(--k-f4f7f5); border: 1px solid var(--k-dbe5e0); font-size: 12.5px; color: var(--k-3f5b50); }
.ph-desk-ico { color: #6b8579; display: flex; flex: none; }
.ph-desk-btn { margin-left: auto; flex: none; border: 1px solid #b9cdc4; background: var(--k-ffffff); border-radius: 8px;
  padding: 7px 11px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--k-2a3d36); }

/* The calendar */
.ph-cal { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ph-calbar { flex: none; display: flex; align-items: center; gap: 7px; padding: 9px 12px 7px; }
.ph-calbar b { flex: 1 1 auto; font-size: 17px; letter-spacing: -.01em; }
/* One row per week, each taking an equal share of whatever is left, so the
   month always fits without the page scrolling. */
.ph-grid { flex: 0 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(var(--ph-weeks, 5), minmax(44px, 1fr)); gap: 2px; padding: 0 9px 9px; }
.ph-callist { flex: 1 1 42%; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 13px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--paper); }
.ph-dow { text-align: center; font-size: 9.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; padding: 2px 0 5px; }
.ph-day { min-height: 0; height: 100%; border-radius: 8px; background: var(--k-ffffff); border: 1px solid transparent; padding: 3px 3px 2px;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden; font: inherit; text-align: left; }
.ph-day.is-off { background: var(--k-fbfaf9); }
.ph-day.is-out { opacity: .38; }
.ph-day.is-today { border-color: var(--k-2a3d36); background: var(--k-f4f7f5); }
.ph-day.is-sel { border-color: var(--k-2a3d36); border-width: 2px; padding: 2px; }
.ph-dnum { font-size: 11px; font-weight: 700; color: var(--k-57534e); line-height: 1; padding: 1px 2px; }
.ph-day.is-today .ph-dnum { color: var(--k-2a3d36); }
.ph-chip { height: 13px; border-radius: 3px; border-left: 3px solid var(--bd); background: var(--bg); color: var(--tx);
  font-size: 8.5px; line-height: 13px; padding: 0 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ph-chip.is-cont { border-left-style: dotted; opacity: .8; }
.ph-chip.is-prompt { --bg: #fffbeb; --bd: #f59e0b; --tx: #92400e; display: flex; align-items: center; gap: 2px; }
.ph-chip.is-prompt svg { width: 8px; height: 8px; flex: none; }
.ph-chip.is-late { --bg: #fef2f2; --bd: #dc2626; --tx: #991b1b; }
.ph-more { font-size: 8.5px; color: var(--muted-2); padding-left: 3px; }
.ph-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 4px 1px 2px; font-size: 11.5px; color: var(--muted); }
.ph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ph-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid; flex: none; }
.ph-hint { font-size: 12px; color: var(--muted); margin: 9px 2px 0; }
/* A phase number in a sheet's heading: coloured in, so the number is white. */
.ph-sheet .ph-bubble { color: #fff; min-width: 19px; height: 17px; font-size: 10px; }

/* The programme — the same chart the web app draws, given the whole screen */
.ph-chartbar { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 12px;
  background: var(--card); border-bottom: 1px solid var(--line); }
.ph-grow { flex: 1 1 auto; font-size: 12px; color: var(--muted); }
.ph-zoom { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--k-ffffff); }
.ph-zoom button { width: 38px; height: 34px; border: none; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--k-57534e); }
.ph-zoom button + button { border-left: 1px solid var(--line); }
.ph-zoom .ph-fit { width: 46px; font-size: 13px; }
.ph-chart { flex: 1 1 auto; min-height: 0; display: flex; }
.ph-chart .tl-chart { flex: 1 1 auto; min-width: 0; min-height: 0; border: none; border-radius: 0; display: flex; }
.ph-chart .tl-frame { flex: 1 1 auto; min-width: 0; height: 100%; }
.ph-chart .tl-rail, .ph-chart .tl-scroll { height: 100%; min-height: 0; }
.ph-chart .tl-rail { flex: 0 0 148px; }
/* A chart you only look at: nothing shows a grab handle, and the row-height
   grip and the pick boxes are for the desk. */
.ph-chart .tl-scroll, .ph-chart .tl-scroll .tl-bar, .ph-chart .tl-scroll .tl-bubble { cursor: default; }
.ph-chart .tl-rail-pick, .ph-chart [data-tl-grow], .ph-chart [data-tl-linkdot], .ph-chart .tl-link-hit { display: none; }
.ph-chart .tl-rail-name { font-size: 12px; }
.ph-chart .tl-rail-sub { font-size: 9.5px; }
.ph-chart .tl-rail-axis { padding: 0 8px; }
.ph-chart .tl-bar-text { font-size: 10.5px; }

/* Build on the phone: its two sides, and the job laid out */
.ph-sides { margin: 0 0 14px; }
.ph-sides button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.ph-sides svg { width: 16px; height: 16px; }
.ph-jobhead-sm { margin-bottom: 12px; }
.ph-jobhead-sm .ph-jobname b { font-size: 17px; }
.ph-bp { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ph, var(--k-a8a29e));
  border-radius: 13px; margin-bottom: 8px; overflow: hidden; }
.ph-bp.is-aside { opacity: .55; }
.ph-bp-hd { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; font: inherit; color: inherit; padding: 12px 13px 12px 11px; }
.ph-bp-hd .ph-main b { font-size: 15px; font-weight: 650; }
.ph-bp-hd .ph-fold { color: var(--muted-2); display: flex; flex: none; }
.ph-bp-hd .ph-fold svg { transition: transform .12s ease; }
.ph-bp-hd .ph-fold.is-shut svg { transform: rotate(-90deg); }
.ph-bt { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-top: 1px solid var(--line-2); font: inherit; color: inherit;
  padding: 11px 13px 11px 11px; }
.ph-bt:active, .ph-bp-hd:active { background: var(--k-f5f5f4); }
.ph-bt.is-aside { opacity: .55; }
.ph-bt-num { flex: none; width: 34px; font-size: 12px; color: var(--muted); padding-top: 2px; }
.ph-bt b { font-size: 14px; font-weight: 500; }
.ph-bt .ph-needs { margin-top: 6px; }
.ph-bt-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ph-when { font-size: 11.5px; color: var(--k-2a3d36); background: var(--k-eef2ef); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.ph-when.is-none { color: var(--muted-2); background: none; padding: 2px 0; }
.ph-bt-bell { color: var(--k-b45309); display: flex; }
.ph-bt-bell svg { width: 14px; height: 14px; }

/* The money */
.ph-totals { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 4px 13px; margin-bottom: 4px; }
.ph-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.ph-tot:last-child { border-bottom: none; }
.ph-tot span { color: var(--muted); }
.ph-tot b { font-weight: 600; white-space: nowrap; }
.ph-tot.is-quiet { font-size: 12.5px; }
.ph-tot.is-quiet b { font-weight: 500; }
.ph-tot.is-sum span, .ph-tot.is-sum b { color: var(--ink); font-weight: 700; }
.ph-tot.is-big { padding: 11px 0; }
.ph-tot.is-big span { color: var(--ink); font-weight: 600; }
.ph-tot.is-big b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.ph-totals.is-small { padding: 2px 11px; margin: 4px 0 10px; }
.ph-totals.is-small .ph-tot { padding: 7px 0; font-size: 13px; }

.ph-cost-phase { background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  margin-bottom: 8px; overflow: hidden; }
.ph-cost-phase.is-aside { opacity: .55; }
.ph-cost-hd { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; font: inherit; color: inherit; padding: 12px 13px; }
.ph-cost-hd .ph-main b { font-size: 14.5px; font-weight: 600; }
.ph-cost-hd .ph-fold { color: var(--muted-2); display: flex; flex: none; }
.ph-cost-hd .ph-fold svg { transition: transform .12s ease; }
.ph-cost-hd .ph-fold.is-shut svg { transform: rotate(-90deg); }
.ph-cost-v { flex: none; font-weight: 700; font-size: 14px; }
.ph-cost-task { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; border-top: 1px solid var(--line-2); font: inherit; color: inherit;
  padding: 11px 13px 11px 40px; }
.ph-cost-task.is-aside { opacity: .55; }
.ph-cost-task b { font-size: 13.5px; font-weight: 500; }
.ph-cost-task .ph-cost-v { font-weight: 600; font-size: 13.5px; color: var(--k-57534e); }

/* The documents */
.ph-doc { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 8px; font: inherit; color: inherit; }
.ph-doc-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--line-2); color: var(--k-57534e); flex: none;
  display: flex; align-items: center; justify-content: center; }
.ph-doc b { display: block; font-size: 14.5px; }
.ph-doc small { display: block; font-size: 12px; color: var(--muted); }

/* The sheets */
.ph-dim { position: fixed; inset: 0; background: rgba(28,25,23,.45); display: flex; align-items: flex-end; z-index: 30; }
.ph-sheet { background: var(--k-ffffff); width: 100%; border-radius: 18px 18px 0 0; padding: 14px 15px calc(22px + env(safe-area-inset-bottom));
  max-height: 84vh; overflow-y: auto; }
.ph-grab { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 12px; }
.ph-sheet h4 { margin: 0 0 3px; font-size: 17px; display: flex; align-items: center; }
.ph-s { margin: 0 0 13px; font-size: 12.5px; color: var(--muted); }
.ph-facts { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin: 4px 0 10px; }
.ph-fact { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 14px;
  border-bottom: 1px solid var(--line-2); }
.ph-fact:last-child { border-bottom: none; }
.ph-fact span { color: var(--muted); }
.ph-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; margin-bottom: 8px;
  border-radius: 11px; border: 1px solid var(--line); background: var(--k-ffffff); font: inherit; font-size: 15px; font-weight: 600; }
.ph-btn.is-main { background: #2A3D36; border-color: var(--k-2a3d36); color: #fff; }
.ph-seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 4px 0 6px; }
.ph-seg button { flex: 1 1 0; padding: 11px 8px; border: none; background: var(--k-ffffff); font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); }
.ph-seg button + button { border-left: 1px solid var(--line); }
.ph-seg button.is-on { background: #2A3D36; color: #fff; }
.ph-opts { display: flex; flex-direction: column; margin-bottom: 12px; }
.ph-opts .ex-opt { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--line-2);
  font-size: 14.5px; color: var(--ink); }
.ph-opts .ex-opt:last-child { border-bottom: none; }
.ph-opts .ex-opt input { width: 21px; height: 21px; accent-color: #2A3D36; flex: none; }

/* Looking at a document before it goes */
.ph-prevbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--card);
  border-bottom: 1px solid var(--line); }
.ph-prevbar b { flex: 1 1 auto; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-preview { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--k-e7e5e4); padding: 10px; }
.ph-preview .ex-side, .ph-preview .ex-bar, .ph-preview .ex-gutter, .ph-preview .ex-hide { display: none !important; }
.ph-preview .ex-page { display: block; }
.ph-preview .export-doc { margin: 0 auto; }

/* The tabs, across the top of the screen */
.ph-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; }
.ph-tab { flex: 1 1 0; min-width: 0; border: none; background: none; font: inherit; padding: 5px 2px 7px;
  color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px;
  position: relative; border-bottom: 2px solid transparent; }
.ph-tab svg { width: 20px; height: 20px; }
.ph-tab span { font-size: 10.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ph-tab.is-on { color: var(--k-2a3d36); border-bottom-color: var(--k-2a3d36); }
.ph-badge { position: absolute; top: 0; right: 50%; transform: translateX(16px); min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: #b91c1c; color: #fff; font-size: 9.5px; font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center; visibility: hidden; }
.ph-badge.is-on { visibility: visible; }

/* An iPad, and an iPhone turned sideways: more room, so use it. The calendar
   puts the day's work beside the month instead of under it, and the reading
   screens stop a line of text from running the whole width of a 12in screen. */
@media (min-width: 700px) {
  .ph-screen:not(.is-full) { padding: 20px max(22px, calc((100% - 780px) / 2)) 34px; }
  .ph-head { font-size: 25px; }
  .ph-head span { font-size: 15px; }
  .ph-jobname b { font-size: 19px; }
  .ph-jobname span { font-size: 13px; }
  .ph-card { padding: 13px 14px; border-radius: 14px; }
  .ph-card b { font-size: 15px; }
  .ph-doc { padding: 14px; border-radius: 14px; }
  .ph-tab { flex-direction: row; gap: 7px; padding: 8px 4px 9px; }
  .ph-tab svg { width: 18px; height: 18px; }
  .ph-tab span { font-size: 13px; }
  .ph-badge { position: static; transform: none; }
  .ph-calbar b { font-size: 20px; }
  .ph-grid { grid-template-rows: auto repeat(var(--ph-weeks, 5), minmax(62px, 1fr)); padding: 0 14px 14px; }
  .ph-cal { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto minmax(0, 1fr);
            grid-template-areas: "bar list" "grid list"; }
  .ph-calbar { grid-area: bar; }
  .ph-grid { grid-area: grid; }
  .ph-callist { grid-area: list; border-top: none; border-left: 1px solid var(--line); padding-top: 12px; }
  .ph-chart .tl-rail { flex: 0 0 190px; }
  .ph-chart .tl-rail-name { font-size: 13px; }
  .ph-sheet { max-width: 620px; margin: 0 auto; border-radius: 18px 18px 0 0; }
  .ph-chip { height: 15px; font-size: 10px; }
  .ph-day { min-height: 0; }
}
/* Narrow and short — an iPhone on its side. The month grid would be four rows
   of nothing, so the day's work goes beside it there too. */
@media (max-height: 460px) and (orientation: landscape) {
  .ph-cal { display: grid; grid-template-columns: minmax(0, 1fr) 46%; grid-template-rows: auto minmax(0, 1fr);
            grid-template-areas: "bar list" "grid list"; }
  .ph-calbar { grid-area: bar; }
  .ph-grid { grid-area: grid; grid-template-rows: auto repeat(var(--ph-weeks, 5), minmax(24px, 1fr)); padding: 0 7px 7px; }
  .ph-callist { grid-area: list; border-top: none; border-left: 1px solid var(--line); padding: 8px 11px; }
  .ph-calbar { padding: 5px 10px 4px; }
  .ph-calbar b { font-size: 15px; }
  .ph-nav { padding-top: 3px; }
  .ph-tab { flex-direction: row; gap: 6px; padding: 5px 3px 6px; }
  .ph-tab span { font-size: 11.5px; }
  .ph-chip { height: 11px; font-size: 8.5px; }
}

@media print { body.is-phone .ph-nav, body.is-phone .ph-tabs, body.is-phone .ph-prevbar { display: none !important; }
  body.is-phone .ph-preview { overflow: visible; background: var(--k-ffffff); padding: 0; }
  body.is-phone, body.is-phone #app { height: auto; overflow: visible; } }

/* ---- The key under a marked-up sheet --------------------------------------
   What each colour on the drawing is. Printed with the sheet it belongs to,
   and never split across a page break. */
.exp-key {
  list-style: none; margin: -4px 0 14px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px 18px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--k-fcfcfb);
  page-break-inside: avoid; break-inside: avoid;
}
.exp-key li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--k-44403c); }
.exp-key i { width: 13px; height: 13px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.18);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.exp-key b { font-weight: 600; }
.exp-key span { color: var(--muted); font-size: 11px; }
.exp-key span.exp-key-mat { color: var(--k-57534e); }
.exp-key span.exp-key-mat::before { content: "→ "; color: var(--muted-2); }
@media print { .exp-key { background: var(--k-ffffff); } }

/* The note that the rest is done in the full app: one quiet line, not a box. */
.ph-desk { display: flex; align-items: center; gap: 8px; margin: 18px 2px 4px; padding: 0;
  background: none; border: none; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ph-desk .ph-desk-ico { color: var(--muted-2); }
.ph-desk .ph-desk-ico svg { width: 14px; height: 14px; }
.ph-desk .ph-desk-btn { margin-left: auto; flex: none; border: none; background: none; padding: 4px 0;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--k-2a3d36); text-decoration: underline; }


/* =========================================================================
   Build 138: the restyle
   ========================================================================= */

/* Dark theme: data-theme is set on <html> before the page draws (index.html)
   and by the Light / Dark / Match this device menu in the header. */
:root[data-theme="dark"] {
  --ink: #E9EDE9;
  --muted: #97A39D;
  --muted-2: #75827B;
  --paper: #121815;
  --card: #19211D;
  --line: #2F3B35;
  --line-2: #26312B;
  --primary: #9CC3AE;
  --primary-bg: #3E6152;
  --brand-deep: #4A7061;
  --primary-light: #22342C;
  --pulse: #3A3514;
  --danger: #F07A6E;
  --k-0369a1: #8DCFF4;
  --k-047857: #A2F4DD;
  --k-065f46: #AFF4E0;
  --k-0e7490: #97DAED;
  --k-0f172a: #E9EDE9;
  --k-0f766e: #A5ECE7;
  --k-115e59: #B2EBE7;
  --k-14532d: #B9E9CC;
  --k-15803d: #A0E8BB;
  --k-166534: #AFE8C5;
  --k-16a34a: #8EE7AF;
  --k-1c1917: #E9EDE9;
  --k-1e293b: #E9EDE9;
  --k-1e3a8a: #9CAEE2;
  --k-1e40af: #889DE1;
  --k-1f3a2e: #CAE0D6;
  --k-292524: #E9EDE9;
  --k-2a241e: #DFD9D4;
  --k-2a3d36: #CAD8D3;
  --k-312e81: #A4A2D8;
  --k-334155: #C9D1CB;
  --k-3730a3: #9490D6;
  --k-3f5b50: #B9CCC5;
  --k-44403c: #E9EDE9;
  --k-475569: #C9D1CB;
  --k-57534e: #C9D1CB;
  --k-64748b: #97A39D;
  --k-6b7280: #97A39D;
  --k-78350f: #ECBEA4;
  --k-78716c: #97A39D;
  --k-7c2d12: #EAB4A2;
  --k-92400e: #EDB796;
  --k-94a3b8: #75827B;
  --k-991b1b: #E49494;
  --k-9ca3af: #75827B;
  --k-a16207: #F1C88D;
  --k-a54b24: #DEA68E;
  --k-a5b4fc: #252D54;
  --k-a7f3d0: #2B5341;
  --k-a8a29e: #75827B;
  --k-b45309: #EFB283;
  --k-b91c1c: #E28383;
  --k-bae6fd: #1F3B49;
  --k-bbf7d0: #244831;
  --k-bfdbfe: #1E3046;
  --k-c2410c: #EC9D7D;
  --k-c7d2fe: #1C2342;
  --k-c7d7ea: #2C3541;
  --k-cbc7c4: #75827B;
  --k-cbd5e1: #3D4B44;
  --k-ccfbf1: #1E3F38;
  --k-d5d2ce: #3D4B44;
  --k-d6d3d1: #3D4B44;
  --k-d8d6d0: #3D4B44;
  --k-d97706: #F0B470;
  --k-dbe5e0: #3D4B44;
  --k-dbeafe: #182537;
  --k-dcfce7: #1A3623;
  --k-dfe5e1: #3D4B44;
  --k-e0e7ff: #161D35;
  --k-e0f2fe: #172834;
  --k-e2e0dd: #3D4B44;
  --k-e2e8f0: #2F3B35;
  --k-e3ebe6: #2F3B35;
  --k-e4ebe6: #2F3B35;
  --k-e6f0fb: #19242F;
  --k-e7e5e2: #2F3B35;
  --k-e7e5e4: #2F3B35;
  --k-e8ede9: #2F3B35;
  --k-eaf0f6: #1F252B;
  --k-ebe9e6: #2F3B35;
  --k-ece9e6: #2F3B35;
  --k-ececea: #2F3B35;
  --k-ecfdf5: #162D22;
  --k-ecfeff: #132D2E;
  --k-ede9fe: #1A152F;
  --k-eeece9: #2F3B35;
  --k-eeeeee: #2F3B35;
  --k-eef2ef: #232D28;
  --k-eef2f7: #232D28;
  --k-eef2ff: #12192D;
  --k-eef3f0: #232D28;
  --k-efeeec: #2F3B35;
  --k-eff6ff: #121E2D;
  --k-f0efed: #232D28;
  --k-f0f9ff: #12222C;
  --k-f0fdf4: #162A1C;
  --k-f1f5f9: #232D28;
  --k-f2f0ee: #232D28;
  --k-f3f1ef: #232D28;
  --k-f3f6f4: #232D28;
  --k-f4f7f5: #1E2723;
  --k-f4f9ff: #111C2A;
  --k-f5f3f1: #232D28;
  --k-f5f5f4: #232D28;
  --k-f6f5f4: #232D28;
  --k-f6f8f7: #1E2723;
  --k-f6fdf8: #1E2723;
  --k-f7fbff: #1E2723;
  --k-f8f7f6: #1E2723;
  --k-f8fafc: #1E2723;
  --k-f8fbff: #19211D;
  --k-f9fdfa: #1E2723;
  --k-faf7ff: #1E2723;
  --k-faf9f7: #1E2723;
  --k-faf9f8: #1E2723;
  --k-fafaf9: #1E2723;
  --k-fafafa: #1E2723;
  --k-fbfaf9: #1E2723;
  --k-fbfdff: #19211D;
  --k-fca5a5: #542525;
  --k-fcfbfa: #1E2723;
  --k-fcfcfb: #19211D;
  --k-fcfcfc: #19211D;
  --k-fcfdff: #19211D;
  --k-fdf9e3: #322E17;
  --k-fecaca: #401B1B;
  --k-fed7aa: #513B22;
  --k-fee2e2: #331616;
  --k-fef2f2: #2A1414;
  --k-fef3c7: #423A1C;
  --k-fff4ed: #2E1D13;
  --k-fff7ed: #2E2213;
  --k-fffaf2: #2B2112;
  --k-fffaf9: #19211D;
  --k-fffafa: #19211D;
  --k-fffbeb: #2F2913;
  --k-ffffff: #19211D;
  color-scheme: dark;
}

/* Paper: documents look exactly as they did in build 137, whatever the
   theme. The export preview, the client's share page, and anything printed. */
.export-doc, .share-doc {
  --ink: #0f172a;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --paper: #fafaf9;
  --card: #ffffff;
  --line: #e7e5e4;
  --line-2: #f1f0ee;
  --primary: #2A3D36;
  --primary-bg: #2A3D36;
  --brand-deep: #16304f;
  --primary-light: #E3EBE6;
  --pulse: #FDF6C8;
  --danger: #dc2626;
  --k-0369a1: #0369a1;
  --k-047857: #047857;
  --k-065f46: #065f46;
  --k-0e7490: #0e7490;
  --k-0f172a: #0f172a;
  --k-0f766e: #0f766e;
  --k-115e59: #115e59;
  --k-14532d: #14532d;
  --k-15803d: #15803d;
  --k-166534: #166534;
  --k-16a34a: #16a34a;
  --k-1c1917: #1c1917;
  --k-1e293b: #1e293b;
  --k-1e3a8a: #1e3a8a;
  --k-1e40af: #1e40af;
  --k-1f3a2e: #1f3a2e;
  --k-292524: #292524;
  --k-2a241e: #2a241e;
  --k-2a3d36: #2a3d36;
  --k-312e81: #312e81;
  --k-334155: #334155;
  --k-3730a3: #3730a3;
  --k-3f5b50: #3f5b50;
  --k-44403c: #44403c;
  --k-475569: #475569;
  --k-57534e: #57534e;
  --k-64748b: #64748b;
  --k-6b7280: #6b7280;
  --k-78350f: #78350f;
  --k-78716c: #78716c;
  --k-7c2d12: #7c2d12;
  --k-92400e: #92400e;
  --k-94a3b8: #94a3b8;
  --k-991b1b: #991b1b;
  --k-9ca3af: #9ca3af;
  --k-a16207: #a16207;
  --k-a54b24: #a54b24;
  --k-a5b4fc: #a5b4fc;
  --k-a7f3d0: #a7f3d0;
  --k-a8a29e: #a8a29e;
  --k-b45309: #b45309;
  --k-b91c1c: #b91c1c;
  --k-bae6fd: #bae6fd;
  --k-bbf7d0: #bbf7d0;
  --k-bfdbfe: #bfdbfe;
  --k-c2410c: #c2410c;
  --k-c7d2fe: #c7d2fe;
  --k-c7d7ea: #c7d7ea;
  --k-cbc7c4: #cbc7c4;
  --k-cbd5e1: #cbd5e1;
  --k-ccfbf1: #ccfbf1;
  --k-d5d2ce: #d5d2ce;
  --k-d6d3d1: #d6d3d1;
  --k-d8d6d0: #d8d6d0;
  --k-d97706: #d97706;
  --k-dbe5e0: #dbe5e0;
  --k-dbeafe: #dbeafe;
  --k-dcfce7: #dcfce7;
  --k-dfe5e1: #dfe5e1;
  --k-e0e7ff: #e0e7ff;
  --k-e0f2fe: #e0f2fe;
  --k-e2e0dd: #e2e0dd;
  --k-e2e8f0: #e2e8f0;
  --k-e3ebe6: #e3ebe6;
  --k-e4ebe6: #e4ebe6;
  --k-e6f0fb: #e6f0fb;
  --k-e7e5e2: #e7e5e2;
  --k-e7e5e4: #e7e5e4;
  --k-e8ede9: #e8ede9;
  --k-eaf0f6: #eaf0f6;
  --k-ebe9e6: #ebe9e6;
  --k-ece9e6: #ece9e6;
  --k-ececea: #ececea;
  --k-ecfdf5: #ecfdf5;
  --k-ecfeff: #ecfeff;
  --k-ede9fe: #ede9fe;
  --k-eeece9: #eeece9;
  --k-eeeeee: #eeeeee;
  --k-eef2ef: #eef2ef;
  --k-eef2f7: #eef2f7;
  --k-eef2ff: #eef2ff;
  --k-eef3f0: #eef3f0;
  --k-efeeec: #efeeec;
  --k-eff6ff: #eff6ff;
  --k-f0efed: #f0efed;
  --k-f0f9ff: #f0f9ff;
  --k-f0fdf4: #f0fdf4;
  --k-f1f5f9: #f1f5f9;
  --k-f2f0ee: #f2f0ee;
  --k-f3f1ef: #f3f1ef;
  --k-f3f6f4: #f3f6f4;
  --k-f4f7f5: #f4f7f5;
  --k-f4f9ff: #f4f9ff;
  --k-f5f3f1: #f5f3f1;
  --k-f5f5f4: #f5f5f4;
  --k-f6f5f4: #f6f5f4;
  --k-f6f8f7: #f6f8f7;
  --k-f6fdf8: #f6fdf8;
  --k-f7fbff: #f7fbff;
  --k-f8f7f6: #f8f7f6;
  --k-f8fafc: #f8fafc;
  --k-f8fbff: #f8fbff;
  --k-f9fdfa: #f9fdfa;
  --k-faf7ff: #faf7ff;
  --k-faf9f7: #faf9f7;
  --k-faf9f8: #faf9f8;
  --k-fafaf9: #fafaf9;
  --k-fafafa: #fafafa;
  --k-fbfaf9: #fbfaf9;
  --k-fbfdff: #fbfdff;
  --k-fca5a5: #fca5a5;
  --k-fcfbfa: #fcfbfa;
  --k-fcfcfb: #fcfcfb;
  --k-fcfcfc: #fcfcfc;
  --k-fcfdff: #fcfdff;
  --k-fdf9e3: #fdf9e3;
  --k-fecaca: #fecaca;
  --k-fed7aa: #fed7aa;
  --k-fee2e2: #fee2e2;
  --k-fef2f2: #fef2f2;
  --k-fef3c7: #fef3c7;
  --k-fff4ed: #fff4ed;
  --k-fff7ed: #fff7ed;
  --k-fffaf2: #fffaf2;
  --k-fffaf9: #fffaf9;
  --k-fffafa: #fffafa;
  --k-fffbeb: #fffbeb;
  --k-ffffff: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
.export-doc .mono, .share-doc .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
@media print {
  html:root, html:root[data-theme] {
  --ink: #0f172a;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --paper: #fafaf9;
    --card: #ffffff;
    --line: #e7e5e4;
    --line-2: #f1f0ee;
    --primary: #2A3D36;
    --primary-bg: #2A3D36;
    --brand-deep: #16304f;
    --primary-light: #E3EBE6;
    --pulse: #FDF6C8;
    --danger: #dc2626;
    --k-0369a1: #0369a1;
    --k-047857: #047857;
    --k-065f46: #065f46;
    --k-0e7490: #0e7490;
    --k-0f172a: #0f172a;
    --k-0f766e: #0f766e;
    --k-115e59: #115e59;
    --k-14532d: #14532d;
    --k-15803d: #15803d;
    --k-166534: #166534;
    --k-16a34a: #16a34a;
    --k-1c1917: #1c1917;
    --k-1e293b: #1e293b;
    --k-1e3a8a: #1e3a8a;
    --k-1e40af: #1e40af;
    --k-1f3a2e: #1f3a2e;
    --k-292524: #292524;
    --k-2a241e: #2a241e;
    --k-2a3d36: #2a3d36;
    --k-312e81: #312e81;
    --k-334155: #334155;
    --k-3730a3: #3730a3;
    --k-3f5b50: #3f5b50;
    --k-44403c: #44403c;
    --k-475569: #475569;
    --k-57534e: #57534e;
    --k-64748b: #64748b;
    --k-6b7280: #6b7280;
    --k-78350f: #78350f;
    --k-78716c: #78716c;
    --k-7c2d12: #7c2d12;
    --k-92400e: #92400e;
    --k-94a3b8: #94a3b8;
    --k-991b1b: #991b1b;
    --k-9ca3af: #9ca3af;
    --k-a16207: #a16207;
    --k-a54b24: #a54b24;
    --k-a5b4fc: #a5b4fc;
    --k-a7f3d0: #a7f3d0;
    --k-a8a29e: #a8a29e;
    --k-b45309: #b45309;
    --k-b91c1c: #b91c1c;
    --k-bae6fd: #bae6fd;
    --k-bbf7d0: #bbf7d0;
    --k-bfdbfe: #bfdbfe;
    --k-c2410c: #c2410c;
    --k-c7d2fe: #c7d2fe;
    --k-c7d7ea: #c7d7ea;
    --k-cbc7c4: #cbc7c4;
    --k-cbd5e1: #cbd5e1;
    --k-ccfbf1: #ccfbf1;
    --k-d5d2ce: #d5d2ce;
    --k-d6d3d1: #d6d3d1;
    --k-d8d6d0: #d8d6d0;
    --k-d97706: #d97706;
    --k-dbe5e0: #dbe5e0;
    --k-dbeafe: #dbeafe;
    --k-dcfce7: #dcfce7;
    --k-dfe5e1: #dfe5e1;
    --k-e0e7ff: #e0e7ff;
    --k-e0f2fe: #e0f2fe;
    --k-e2e0dd: #e2e0dd;
    --k-e2e8f0: #e2e8f0;
    --k-e3ebe6: #e3ebe6;
    --k-e4ebe6: #e4ebe6;
    --k-e6f0fb: #e6f0fb;
    --k-e7e5e2: #e7e5e2;
    --k-e7e5e4: #e7e5e4;
    --k-e8ede9: #e8ede9;
    --k-eaf0f6: #eaf0f6;
    --k-ebe9e6: #ebe9e6;
    --k-ece9e6: #ece9e6;
    --k-ececea: #ececea;
    --k-ecfdf5: #ecfdf5;
    --k-ecfeff: #ecfeff;
    --k-ede9fe: #ede9fe;
    --k-eeece9: #eeece9;
    --k-eeeeee: #eeeeee;
    --k-eef2ef: #eef2ef;
    --k-eef2f7: #eef2f7;
    --k-eef2ff: #eef2ff;
    --k-eef3f0: #eef3f0;
    --k-efeeec: #efeeec;
    --k-eff6ff: #eff6ff;
    --k-f0efed: #f0efed;
    --k-f0f9ff: #f0f9ff;
    --k-f0fdf4: #f0fdf4;
    --k-f1f5f9: #f1f5f9;
    --k-f2f0ee: #f2f0ee;
    --k-f3f1ef: #f3f1ef;
    --k-f3f6f4: #f3f6f4;
    --k-f4f7f5: #f4f7f5;
    --k-f4f9ff: #f4f9ff;
    --k-f5f3f1: #f5f3f1;
    --k-f5f5f4: #f5f5f4;
    --k-f6f5f4: #f6f5f4;
    --k-f6f8f7: #f6f8f7;
    --k-f6fdf8: #f6fdf8;
    --k-f7fbff: #f7fbff;
    --k-f8f7f6: #f8f7f6;
    --k-f8fafc: #f8fafc;
    --k-f8fbff: #f8fbff;
    --k-f9fdfa: #f9fdfa;
    --k-faf7ff: #faf7ff;
    --k-faf9f7: #faf9f7;
    --k-faf9f8: #faf9f8;
    --k-fafaf9: #fafaf9;
    --k-fafafa: #fafafa;
    --k-fbfaf9: #fbfaf9;
    --k-fbfdff: #fbfdff;
    --k-fca5a5: #fca5a5;
    --k-fcfbfa: #fcfbfa;
    --k-fcfcfb: #fcfcfb;
    --k-fcfcfc: #fcfcfc;
    --k-fcfdff: #fcfdff;
    --k-fdf9e3: #fdf9e3;
    --k-fecaca: #fecaca;
    --k-fed7aa: #fed7aa;
    --k-fee2e2: #fee2e2;
    --k-fef2f2: #fef2f2;
    --k-fef3c7: #fef3c7;
    --k-fff4ed: #fff4ed;
    --k-fff7ed: #fff7ed;
    --k-fffaf2: #fffaf2;
    --k-fffaf9: #fffaf9;
    --k-fffafa: #fffafa;
    --k-fffbeb: #fffbeb;
    --k-ffffff: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color-scheme: light;
  }
  html:root .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
}

/* ---- The header: the brand green, the tab you're on underlined in cream ---- */
.header { background: #2A3D36; border-bottom: 0; color: #EEF2EF; }
.header-inner { padding-top: 0; padding-bottom: 0; min-height: 56px; align-items: stretch; }
.header .brand, .header .header-right { align-self: center; }
.header .brand-name { color: #fff; }
.header .brand-mark svg { border-radius: 22%; box-shadow: 0 0 0 1px rgba(253, 240, 173, .28); }
.header .tabbar { align-self: stretch; align-items: stretch; background: none; border-radius: 0; padding: 0; gap: 0; }
.header .tab-btn { position: relative; display: inline-flex; align-items: center; min-height: 56px; padding: 0 11px;
  border-radius: 0; background: none; box-shadow: none; color: rgba(238, 242, 239, .72); font-weight: 500; }
.header .tab-btn:hover { color: #fff; }
.header .tab-btn.active { color: #fff; background: none; box-shadow: none; }
.header .tab-btn.active::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: #FDF0AD; }
.header .tab-btn:focus-visible { outline: 2px solid #FDF0AD; outline-offset: -4px; }
/* Signed in, the account takes about 500px. On a laptop the mark carries the
   brand on its own (as it already did below 1000px), so the tabs keep one row
   down to about 1400px; below that they're tighter, and if they do wrap, the
   rows are shorter. */
@media (max-width: 1599px) { .header:has(.account) .brand-name { display: none; } }
@media (max-width: 1439px) { .header .tab-btn { padding: 0 8px; min-height: 46px; } .header .header-right { gap: 10px; } }
@media (max-width: 1379px) { .header .account-email { display: none; } }
@media (max-width: 1180px) { .header .tab-btn { padding: 0 7px; min-height: 42px; font-size: 12.5px; } }
.header .today-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; height: 32px; }
.header .today-btn:hover, .header .today-btn.is-on { border-color: #FDF0AD; }
.header .account-email { color: rgba(238, 242, 239, .75); }
.header .build-badge { color: rgba(238, 242, 239, .55); border-color: rgba(255, 255, 255, .18); }
.header .icon-btn.tour-btn { width: 30px; height: 30px; border-radius: var(--r-ctl); color: rgba(238, 242, 239, .85);
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.header .icon-btn.tour-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.header .account .btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
.header .account .btn:hover { background: rgba(255, 255, 255, .12); }
.header .ro-bar { color: var(--k-312e81, #312e81); }

/* ---- Light / Dark / Match this device ---- */
.theme-pick { position: relative; }
.theme-pick > summary { list-style: none; width: 32px; height: 32px; border-radius: var(--r-ctl); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.theme-pick > summary::-webkit-details-marker { display: none; }
.theme-pick > summary:hover, .theme-pick[open] > summary { background: rgba(255, 255, 255, .12); border-color: #FDF0AD; }
.theme-pick > summary svg { width: 16px; height: 16px; }
.theme-menu { position: absolute; right: 0; top: 40px; z-index: 60; width: 240px; padding: 6px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: 0 12px 32px rgba(15, 23, 20, .22); }
.theme-menu-h { margin: 6px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.theme-opt { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--ink);
  padding: 8px; border-radius: var(--r-ctl); text-align: left; font: inherit; font-size: 13.5px; cursor: pointer; }
.theme-opt:hover { background: var(--k-f8fafc, #f8fafc); }
.theme-opt > svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.theme-opt small { display: block; font-size: 12px; color: var(--muted); }
.theme-opt .theme-tick { margin-left: auto; color: var(--primary); visibility: hidden; font-weight: 700; }
.theme-opt.is-on .theme-tick { visibility: visible; }
@media print { .theme-pick { display: none !important; } }

/* ---- Controls: one corner size, a press you can feel ---- */
.btn-primary { background: var(--primary-bg); border-color: var(--primary-bg); }
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn:active, .today-btn:active, .theme-opt:active { transform: translateY(1px); }
.field input, .field textarea { border-radius: var(--r-ctl); }
.sc-sw.is-on .sc-ico { background: var(--primary-bg); }

/* ---- The phone: the same green bar ---- */
.ph-nav { background: #2A3D36; border-bottom: 0; }
.ph-nav .ph-mark svg { box-shadow: 0 0 0 1px rgba(253, 240, 173, .28); }
.ph-tab { color: rgba(238, 242, 239, .72); }
.ph-tab.is-on { color: #fff; border-bottom-color: #FDF0AD; }
.ph-nav .ph-iconbtn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .today-btn:active, .theme-opt:active { transform: none; }
}

/* ---- Dark mode: things that carry their own colours ----------------------
   A phase's pastel, the programme's grid, a crew's wash are set on the element,
   not in the palette, so the dark theme didn't reach them. Printouts keep the
   light versions. */
:root { --tl-grid-1: #f2f1ef; --tl-grid-2: #e6e4e1; --tl-grid-3: #d5d2ce; }
:root[data-theme="dark"] { --tl-grid-1: #1c2521; --tl-grid-2: #232e29; --tl-grid-3: #2f3d36; }
.export-doc, .share-doc { --tl-grid-1: #f2f1ef; --tl-grid-2: #e6e4e1; --tl-grid-3: #d5d2ce; }
.tl-bar-text { color: inherit; }
/* A phase header: its colour, deepened for a dark page, with light writing on it. */
:root[data-theme="dark"] .phase-header.has-colour { background: color-mix(in srgb, var(--card-edge) 30%, var(--paper)); }
:root[data-theme="dark"] .phase-header.has-colour:hover { background: color-mix(in srgb, var(--card-edge) 38%, var(--paper)); }
/* The programme's phase column likewise, rather than a wall of pastel. */
:root[data-theme="dark"] .tl-rail-phase:not(.tl-rail-repeat) {
  background: color-mix(in srgb, var(--edge) 24%, var(--paper)) !important; color: var(--ink) !important; }
/* A crew's badge keeps its pastel wash, so its letters stay dark. */
:root[data-theme="dark"] .tl-crew > b { color: #2a241e; border-color: #2a241e; }
:root[data-theme="dark"] .crew-chip, :root[data-theme="dark"] .crew-chip i { color: #2a241e; }
:root[data-theme="dark"] .crew-chip i { border-color: #2a241e; }
/* A trade's heading on the Labour page: its wash, deepened. */
:root[data-theme="dark"] .lab-trade-hd { background: color-mix(in srgb, var(--wash) 20%, var(--paper)); }
/* Panels that were see-through white. */
:root[data-theme="dark"] .assign-wrap { background: rgba(255, 255, 255, .025); }
:root[data-theme="dark"] .price-cat-header .price-count { background: rgba(255, 255, 255, .07); color: var(--muted); }
:root[data-theme="dark"] .tl-row-repeat { background: rgba(96, 165, 250, .07); }
:root[data-theme="dark"] .tl-repeat-text { background: rgba(0, 0, 0, .35); }


/* ---- Progress claims ----------------------------------------------------- */
.cl-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cl-pick { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
  font: inherit; font-size: 12.5px; cursor: pointer; }
.cl-pick small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cl-pick:hover { border-color: var(--muted-2); }
.cl-pick.is-on { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); background: var(--primary-light); }
.cl-date { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 12px; color: var(--muted); }
.cl-date input { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
.cl-fill { display: block; margin: 8px 0 2px; font-size: 12px; }
.cl-save, .cl-dl { width: 100%; justify-content: center; margin-top: 10px; }
.cl-del { display: block; margin-top: 8px; font-size: 12px; color: var(--danger); }
.cl-noitems { margin-top: 10px; }
.cl-unsaved { color: var(--muted); font-weight: 400; }
.cl-table .cl-pct { width: 86px; text-align: right; white-space: nowrap; }
.cl-table td.cl-now { font-weight: 600; }
.cl-pct-in { width: 66px; text-align: right; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink); }
.cl-pct-in:focus { outline: 2px solid var(--primary-light); border-color: var(--primary); }
.cl-pct-print { display: none; }
.cl-summary .cl-sum-gap { margin-top: 6px; border-top: 1px solid var(--line-2); padding-top: 8px; }
.cl-summary .cl-sum-left { margin-top: 4px; color: var(--muted); }
@media print {
  .cl-pct-in { display: none; }
  .cl-pct-print { display: inline; }
}

/* ---- Xero items, on the Company tab -------------------------------------- */
.xero-card { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.xr-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.xr-intro, .xr-how { font-size: 12.5px; margin: 0 0 10px; }
.xr-how { margin: 8px 0 0; }
.xr-none { font-size: 12.5px; color: var(--muted); margin: 6px 0; }
.xr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 10px; }
.xr-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 5px 6px; }
.xr-table td { padding: 5px 6px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.xr-table .xr-x { width: 24px; text-align: right; }
.xr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.xr-add { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.xr-in { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); width: 150px; }
.xr-in.mono { width: 70px; }
.xr-uses { margin-top: 16px; }
.xr-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 12px 0 6px; }
.xr-use { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; color: var(--ink); }
.xr-use select { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); max-width: 60%; }
.xr-own { margin-top: 14px; }
.xr-own summary { cursor: pointer; font-size: 12.5px; color: var(--primary); }
@media (max-width: 600px) {
  .xr-use { flex-direction: column; align-items: stretch; gap: 4px; }
  .xr-use select { max-width: none; }
}


/* ---- Where a figure came from, under its line ------------------------------ */
.assign-line:has(> .line-source) { flex-wrap: wrap; }
.line-source { flex: 1 1 100%; order: 20; display: flex; align-items: center; gap: 6px; margin: 2px 0 0 22px;
  font-size: 11.5px; color: var(--muted); }
.line-source > span { flex: none; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.line-source-in { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 11.5px; color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: 5px; padding: 1px 5px; }
.line-source-in:hover { border-color: var(--line); }
.line-source-in:focus { color: var(--ink); border-color: var(--primary); outline: none; background: var(--card); }


/* ---- A booking's own people and hours a day -------------------------------- */
.bk-more { border: 0; background: none; color: var(--muted-2); font: inherit; font-size: 12px; line-height: 1; padding: 2px 4px;
  margin-left: 4px; border-radius: 4px; cursor: pointer; }
.bk-more:hover { color: var(--ink); background: var(--line-2); }
.assign-line:has(> .bk-row) { flex-wrap: wrap; }
.bk-row { flex: 1 1 100%; order: 21; display: flex; align-items: center; gap: 4px; margin: 3px 0 0 22px; }
.bk-row i { font-style: normal; font-size: 11px; color: var(--muted); margin-right: 8px; }
.bk-in { width: 40px; font-size: 11.5px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--card); color: var(--ink); text-align: right; }
.bk-in.bk-hours { width: 44px; }
.doc-claude { white-space: nowrap; }