/* Colors. The theme picker (Account page) sets <html data-accent="..."> and the "dark" class ("Auto" follows the
   device). Each accent has a light and a dark version; Olive keeps its olive-tinted dark background, the others
   use neutral charcoal. */
:root {
  --bg: #f7f6f2;
  --panel: #ffffff;
  --side: #fbfaf7;
  --text: #1c1f17;
  --muted: #646b5a;
  --line: #e4e3da;
  --accent: var(--a-light);
  --accent-ink: #ffffff;
  --accent-soft: var(--a-soft-light);
  --danger: #b42318;
  --warn: #b54708;
  --ok: #2f6b2f;
  --radius: 2px;
  --r: 2px;   /* corners: nearly square everywhere */
  --shadow: none;
  /* Olive (default) */
  --a-light: #4b5320; --a-dark: #8a9a4f; --a-soft-light: #eef0e2; --a-soft-dark: #232818;
  --d-bg: #12140e; --d-panel: #1a1d15; --d-side: #15180f; --d-text: #eef0e6; --d-muted: #a2a891; --d-line: #2b3023;
}
html[data-accent="cedar"] { --a-light: #2f5d46; --a-dark: #6fb08d; --a-soft-light: #e3efe8; --a-soft-dark: #1a2a22; }
html[data-accent="navy"] { --a-light: #1f4e8c; --a-dark: #7aa7e6; --a-soft-light: #e4ecf7; --a-soft-dark: #18243a; }
html[data-accent="slate"] { --a-light: #3f4a56; --a-dark: #a7b4c2; --a-soft-light: #e8ebef; --a-soft-dark: #222930; }
html[data-accent="terracotta"] { --a-light: #a8462a; --a-dark: #e8946d; --a-soft-light: #f8e8e1; --a-soft-dark: #33211a; }
html[data-accent="plum"] { --a-light: #6d3b72; --a-dark: #c294c8; --a-soft-light: #f1e7f2; --a-soft-dark: #2b1e2d; }
html[data-accent]:not([data-accent="olive"]) {
  --d-bg: #121417; --d-panel: #1a1d22; --d-side: #15171b; --d-text: #eceef1; --d-muted: #9aa1ab; --d-line: #2a2f37;
}
html.dark {
  --bg: var(--d-bg);
  --panel: var(--d-panel);
  --side: var(--d-side);
  --text: var(--d-text);
  --muted: var(--d-muted);
  --line: var(--d-line);
  --accent: var(--a-dark);
  --accent-ink: var(--d-bg);
  --accent-soft: var(--a-soft-dark);
  --danger: #f97066;
  --warn: #fdb022;
  --ok: #73c26b;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.003em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-weight: 500; margin: 12px 0 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.wide { width: 100%; height: 40px; }
.btn.danger-text { border-color: transparent; background: none; color: var(--danger); padding: 0 8px; }
.scope-foot { margin-top: 4px; }
.btn:disabled { opacity: .6; cursor: default; }
.btn svg { width: 16px; height: 16px; }
.link { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 500; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r); background: none; }
.icon-btn:hover { background: var(--accent-soft); }
.icon-btn svg { width: 19px; height: 19px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 17px; }
.mark, .logo { display: block; width: auto; height: 28px; }   /* the logo's gold reads on light and dark alike */
.auth-logo { justify-content: center; }
.auth-logo { flex-direction: column; gap: 14px; }
.auth-logo .mark { height: 72px; }
.auth-logo .xy-word { height: 22px; }
/* XYLEM: the word is a mask filled with the text color, so it reads in light and dark; the trees keep their gold */
.xy-word { display: block; height: 15px; aspect-ratio: 970 / 123; background: var(--text); -webkit-mask: url(xylem-word.png) center / contain no-repeat; mask: url(xylem-word.png) center / contain no-repeat; }
html:not(.dark) .mark { filter: brightness(.78) saturate(1.3); }   /* the pale gold needs more weight on a light page */

/* Sign in */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; box-shadow: var(--shadow); }
.auth-card h1 { margin: 22px 0 6px; font-size: 24px; }
.auth-card .muted { margin: 0 0 8px; }
.auth-card .btn.primary { margin-top: 20px; }
.back-home { display: block; margin-top: 16px; text-align: center; color: var(--muted); font-size: 14px; text-decoration: none; }

/* Form fields */
.fields { display: grid; gap: 10px; }
.fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
label.field { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
label.field .hint { font-weight: 400; }
input.in, select.in, textarea.in {
  width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--text); font-size: 14px;
}
textarea.in { min-height: 80px; resize: vertical; }
.in:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
#authFields { display: grid; gap: 14px; margin-top: 14px; }

/* Shell */
.shell { display: grid; grid-template-columns: 212px 1fr; min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 12px;
  padding: 12px 10px; background: var(--side); border-right: 1px solid var(--line); overflow-y: auto;
}
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side .brand { padding: 4px 8px; }
#sideToggle { width: 32px; height: 32px; color: var(--muted); }
#sideToggle svg { width: 19px; height: 19px; }
.me-av { display: none; }
/* Collapsed sidebar (desktop): icons only, names show on hover. */
@media (min-width: 901px) {
  .shell.collapsed { grid-template-columns: 64px 1fr; }
  .shell.collapsed .side { padding: 18px 8px; }
  .shell.collapsed .side-top { flex-direction: column; }
  .shell.collapsed .side .brand { padding: 4px 0; }
  .shell.collapsed .side .mark { height: 26px; }
  .shell.collapsed .brand span, .shell.collapsed .nav a > span, .shell.collapsed .nav h3,
  .shell.collapsed .me b, .shell.collapsed .me small, .shell.collapsed #signOut { display: none; }
  .shell.collapsed .nav a { justify-content: center; padding: 10px; }
  .shell.collapsed .side-foot { padding: 12px 0 4px; justify-items: center; }
  .shell.collapsed .me-av { display: inline-grid; }
}
.nav { display: grid; gap: 2px; }
.nav h3 { margin: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* collapsible sections: the heading folds its links away (the page you're on stays) */
.nav-group { display: grid; gap: 2px; }
.nav h3 button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: left; }
.nav h3 button:hover { color: var(--text); }
.nav h3 button svg { width: 14px; height: 14px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2.25; opacity: .55; transition: transform .15s, opacity .15s; }
.nav h3 button:hover svg, .nav h3 button:focus-visible svg { opacity: 1; }
.nav-group.closed h3 button svg { transform: rotate(-90deg); }
.nav-group.closed > a:not(.on) { display: none; }
.shell.collapsed .nav-group.closed > a { display: flex; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r);
  text-decoration: none; color: var(--muted); font-weight: 500;
}
.nav a svg { width: 17px; height: 17px; flex: none; }
.nav a:hover { background: var(--accent-soft); color: var(--text); }
.nav a.on { background: var(--accent-soft); color: var(--text); }
.nav a.on svg { color: var(--accent); }
.nav .tag { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--r); background: var(--line); color: var(--muted); }
.nav .count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.side-foot { margin-top: auto; display: grid; gap: 8px; padding: 12px 10px 4px; border-top: 1px solid var(--line); }
.me { text-decoration: none; display: grid; }
.me small { color: var(--muted); }
.side-foot .link { justify-self: start; font-size: 14px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px;
  padding: 8px 20px; min-height: 52px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; min-width: 0; flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menuBtn { display: none; }
#backBtn { margin-right: -6px; color: var(--muted); }
#backBtn:hover { color: var(--text); background: color-mix(in srgb, var(--line) 50%, transparent); }
#backBtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-actions { margin-left: auto; display: flex; gap: 8px; }
.view { padding: 14px 20px 40px; max-width: 1680px; width: 100%; }
.scrim { display: none; }

/* Panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.panel > header { display: flex; align-items: center; gap: 10px; padding: 9px 14px; min-height: 42px; border-bottom: 1px solid var(--line); }
.panel > header h2 { margin: 0; font-size: 13px; font-weight: 600; }
.panel > header .link { margin-left: auto; font-size: 13px; }
.panel .empty { padding: 20px 14px; text-align: center; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.panel, .grid2 > * { min-width: 0; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat { padding: 12px 14px; }
.stat b { display: block; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.stat span { color: var(--muted); font-size: 13px; font-weight: 500; }
.stat.alert b { color: var(--danger); }

/* Rows */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.row .main-col { flex: 1; min-width: 0; }
.row .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .right { display: flex; align-items: center; gap: 10px; flex: none; }
.row.done .title { text-decoration: line-through; color: var(--muted); }
.check {
  flex: none; width: 18px; height: 18px; border-radius: var(--r); border: 1.5px solid color-mix(in srgb, var(--muted) 50%, var(--line)); background: var(--panel);
  display: grid; place-items: center; padding: 0;
}
.check svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; }
.check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.check.on svg { opacity: 1; }
.check:hover { border-color: var(--accent); }

/* Pills and badges */
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r); font-size: 11px; font-weight: 500; letter-spacing: .01em; background: var(--line); color: var(--text); white-space: nowrap; }
/* Status colors, one family per meaning, the same everywhere:
   done (green) · underway (olive) · waiting on someone (amber) · a problem (red) · booked / scheduled (blue) ·
   under contract or new (violet) · on hold (orange) · not started / closed out (grey) */
.pill.s-sold, .pill.s-done, .pill.s-paid, .pill.s-complete, .pill.s-funded, .pill.s-received, .pill.s-sale, .pill.s-delivered, .pill.s-occupied, .pill.s-current, .pill.s-completed { background: #dcefe0; color: #1f5a2c; }
.pill.s-under-construction, .pill.s-in-progress { background: #e3ecd3; color: #2e4a12; }
.pill.s-listed-for-sale, .pill.s-approved, .pill.s-out-for-bid, .pill.s-notice, .pill.s-month-to-month, .pill.s-waiting, .pill.s-high { background: #fdf0c8; color: #7a4d00; }
.pill.s-rejected, .pill.s-missed, .pill.s-late, .pill.s-vacant, .pill.s-emergency { background: #fde4e1; color: #912018; }
.pill.s-rejected { text-decoration: line-through; }
.pill.s-rented, .pill.s-rent, .pill.s-future, .pill.s-scheduled, .pill.s-submitted, .pill.s-committed { background: #e0ecf8; color: #1d4a7a; }
.pill.s-under-contract-purchase, .pill.s-under-contract-sale, .pill.s-under-contract-repairs, .pill.s-awarded, .pill.s-new, .pill.s-other { background: #e6e5f7; color: #3a3580; }
.pill.s-on-hold, .pill.s-blocked { background: #fbe8d6; color: #8a3b07; }
.pill.s-lead, .pill.s-to-do, .pill.s-pending, .pill.s-draft, .pill.s-declined, .pill.s-past, .pill.s-off-market, .pill.s-canceled, .pill.s-low { background: #e7e9ee; color: #353b48; }
html.dark .pill { filter: saturate(.8) brightness(.85); }
.due { font-size: 13px; color: var(--muted); white-space: nowrap; }
.due.late { color: var(--danger); font-weight: 600; }
.due.soon { color: var(--warn); font-weight: 500; }
.prio { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.prio.High { background: var(--danger); }
.prio.Normal { background: transparent; }
.prio.Low { background: var(--line); }
.avatar {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 600;
}
.progress { width: 80px; height: 4px; border-radius: var(--r); background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
/* A page's filter row joins the top bar: one header block that stays put while the list scrolls */
.view > .toolbar:first-child { position: sticky; top: 52px; z-index: 3; margin: -14px -20px 12px; padding: 8px 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.toolbar .search { flex: 1 1 220px; max-width: 320px; }
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r); background: var(--line); }
.seg button { height: 28px; padding: 0 10px; border: 0; border-radius: var(--r); background: none; font-weight: 500; color: var(--muted); }
.seg button.on { background: var(--panel); color: var(--text); }
.toolbar select.in { width: auto; max-width: 220px; min-height: 32px; padding: 4px 8px; }
.toolbar .combo { width: 200px; max-width: 220px; }
.toolbar .combo input.in { min-height: 32px; padding: 4px 26px 4px 8px; }
.toolbar input.in { min-height: 32px; padding: 4px 10px; }
.row .btn, .tcard .btn { height: 26px; padding: 0 9px; font-size: 13px; }

/* Project detail */
.detail-head { padding: 12px 14px; display: grid; gap: 4px; margin-bottom: 0; }
.detail-head .line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detail-head .addr { color: var(--muted); }
.copy-addr { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.copy-addr svg { width: 14px; height: 14px; flex: none; opacity: 0; transition: opacity .15s; }
.copy-addr:hover, .copy-addr:focus-visible { color: var(--text); }
.copy-addr:hover svg, .copy-addr:focus-visible svg { opacity: .8; }
@media (hover: none) { .copy-addr svg { opacity: .6; } }   /* phones: always show it's tappable */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; margin: 6px 0 0; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.facts dd { margin: 0; font-weight: 500; }
.notes { white-space: pre-wrap; margin: 6px 0 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
/* A project's tabs sit right under its header panel, as one block */
.detail-head + .tabs { background: var(--panel); border: 1px solid var(--line); border-top: 0; padding: 0 8px; }
.tabs button { border: 0; background: none; padding: 9px 10px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--text); border-color: var(--accent); }
.tabs button .tag { font-size: 10px; margin-left: 4px; padding: 1px 5px; border-radius: var(--r); background: var(--line); }

/* Board */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.col { min-width: 0; background: color-mix(in srgb, var(--line) 35%, transparent); border-radius: var(--r); padding: 8px; min-height: 200px; }
.cards > * { min-width: 0; }
.col h3 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; font-size: 13px; }
.col h3 .count { color: var(--muted); }
.col.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.cards { display: grid; gap: 6px; }
.tcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; cursor: grab; box-shadow: var(--shadow); }
.tcard:active { cursor: grabbing; }
.tcard.dragging { opacity: .5; }
.tcard .title { font-weight: 500; }
.tcard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.tcard .meta .proj { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard .meta .avatar { margin-left: auto; }
.pcard { cursor: pointer; }
.pcard[draggable="true"] { cursor: grab; }
.pcard .sub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.pcard .meta:empty { display: none; }
.pcard .jp { margin-right: auto; justify-items: start; }
/* Projects grid: a card per job, its cover photo on top */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pg-card { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; }
.pg-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pg-photo { position: relative; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--line) 45%, var(--panel)); }
.pg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-none { display: grid; place-content: center; justify-items: center; gap: 6px; height: 100%; color: var(--muted); font-size: 12px; }
.pg-none svg { width: 30px; height: 30px; opacity: .5; }
.pg-photo .pill { position: absolute; left: 8px; top: 8px; }
.pg-cam { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r);
  background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--text); opacity: 0; transition: opacity .15s; }
.pg-cam svg { width: 15px; height: 15px; }
.pg-card:hover .pg-cam, .pg-cam:focus-visible { opacity: 1; }
@media (hover: none) { .pg-cam { opacity: 1; } }
.pg-body { display: grid; gap: 2px; padding: 8px 10px 10px; }
.pg-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-meta { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-top: 4px; }
.pg-meta .jp { margin-right: auto; justify-items: start; }
.pg-meta .avatar { margin-left: auto; }
.pg-meta .ow-rent { margin-left: auto; }
.ow-edit { display: inline-flex; align-items: center; gap: 4px; }
.ow-edit svg { width: 14px; height: 14px; }
.pg-photo.ow-logo { background: #fff; }
.pg-photo.ow-logo img { object-fit: contain; padding: 14px; }
.ow-head-logo { height: 44px; max-width: 160px; object-fit: contain; padding: 4px 8px; background: #fff; border-radius: var(--r); }
.ow-notes + small { display: block; margin-top: 4px; font-size: 12px; }
.pg-group { margin: 4px 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
@media (max-width: 760px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.board.proj-board { grid-template-columns: repeat(var(--cols), minmax(250px, 1fr)); }
.proj-board .col { min-height: 320px; }
.row-group { display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px; background: color-mix(in srgb, var(--line) 45%, transparent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.row-group .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
.card-group { margin: 6px 4px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.card-group:first-child { margin-top: 0; }
.card-group .count { font-weight: 500; opacity: .8; }
.check-label { display: flex; gap: 6px; align-items: center; font-weight: 500; }
@media (max-width: 760px) {
  .board.proj-board { grid-template-columns: repeat(var(--cols), 78vw); scroll-snap-type: x mandatory; align-items: start; }
  .proj-board .col { scroll-snap-align: start; min-height: 160px; }
}

/* Team */
.role { text-transform: capitalize; }
.row.inactive { opacity: .55; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(10, 12, 8, .45); }
.modal-card {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--panel); border-radius: var(--r); box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.modal-card.wide { max-width: 1120px; }
/* Import leases: one section per property read, then its units as an editable table */
.imp-prop { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.imp-table { width: 100%; min-width: 980px; table-layout: fixed; }
.imp-table th, .imp-table td { padding: 4px 6px; vertical-align: middle; }
.imp-table th:nth-child(1) { width: 30px; } .imp-table th:nth-child(2) { width: 76px; } .imp-table th:nth-child(4) { width: 96px; } .imp-table th:nth-child(5) { width: 84px; }
.imp-table th:nth-child(6), .imp-table th:nth-child(7) { width: 150px; } .imp-table th:nth-child(8) { width: 96px; } .imp-table th:nth-child(9) { width: 140px; }
.imp-table .imp-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-prop .muted-off { opacity: .5; }
.imp-table .in { width: 100%; height: 30px; padding: 2px 6px; min-width: 0; }
.imp-table .imp-rent { text-align: right; }
.imp-table tr.off td:not(:first-child) { opacity: .45; }
.imp-table .imp-will { font-size: 12px; line-height: 1.3; white-space: normal; }
.imp-table .imp-will.over { color: var(--danger); }
.imp-sum { margin-top: 0; }
.modal-card header, .modal-card footer { display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
.modal-card header { border-bottom: 1px solid var(--line); }
.modal-card header h2 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.modal-card .fields { padding: 14px 16px; }
.modal-card .error { padding: 0 16px; margin: 0; }
.modal-card footer { border-top: 1px solid var(--line); }
.spacer { flex: 1; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  padding: 10px 16px; border-radius: var(--r); background: var(--text); color: var(--bg); font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.toast.bad { background: var(--danger); color: #fff; }

/* Phone and tablet */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 15; left: 0; top: 0; bottom: 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease; }
  .shell.menu-open .side { transform: none; }
  .shell.menu-open .scrim { display: block; position: fixed; inset: 0; z-index: 14; background: rgba(10, 12, 8, .4); }
  #menuBtn { display: grid; margin-left: -8px; }
  .topbar { padding: calc(8px + env(safe-area-inset-top)) 16px 8px; }
  .topbar h1 { font-size: 17px; }
  .view { padding: 12px 16px 40px; }
  .view > .toolbar:first-child { position: static; margin: -12px -16px 10px; padding: 8px 16px; }
  /* Phones: search on its own line, then the menus share a line, then the toggles */
  .toolbar .search { flex: 1 1 100%; max-width: none; }
  .toolbar select.in, .toolbar .combo { flex: 1 1 28%; min-width: 0; max-width: none; width: auto; }
  .toolbar .proj-totals { order: 9; }
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: 1fr 1fr; }
  #sideToggle { display: none; }
  .board { grid-template-columns: repeat(4, 260px); }
  .row { padding: 9px 14px; }
  .row .hide-sm { display: none !important; }
  .page-actions .btn .label { display: none; }
}
@media (max-width: 480px) {
  .fields .two { grid-template-columns: 1fr; }
  .fields .three { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .modal { padding: 0; place-items: end stretch; }
  .modal-card { max-width: none; border-radius: 0; max-height: 92vh; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* Address suggestions */
.ac { position: relative; }
.ac-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  max-height: 260px; overflow-y: auto;
}
.ac-list li { padding: 9px 10px; border-radius: var(--r); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.ac-list li:hover, .ac-list li[aria-selected="true"] { background: var(--accent-soft); }

/* Attachments on a task or work order */
.att-field { display: grid; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.att-list { display: flex; flex-wrap: wrap; gap: 6px; }
.att-chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.att-chip a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 4px 5px 8px; color: var(--text); font-size: 13px; text-decoration: none; }
.att-chip a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.att-chip a svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.att-chip a:hover span { text-decoration: underline; }
.att-x { padding: 2px 8px; border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.att-x:hover { color: var(--danger); }
.att-none { font-weight: 400; }
.att-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; width: 100%; }
.att-thumb { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel-2, var(--panel)); }
.att-thumb a { display: block; width: 100%; height: 100%; }
.att-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .15s; }
.att-thumb a:hover img { transform: scale(1.04); }
.att-thumb .att-x { position: absolute; top: 4px; right: 4px; padding: 0 6px; border-radius: 999px; background: rgba(8, 9, 7, .6); color: #fff; }
.att-thumb .att-x:hover { background: var(--danger); color: #fff; }
.att-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.att-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.att-tag svg { width: 13px; height: 13px; }

/* Type-to-search menus (flips, rentals, vendors): a box over the hidden <select> */
select.combo-src { display: none; }
.combo { display: block; }
.combo input.in {
  padding-right: 28px; text-overflow: ellipsis;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.combo .ac-list { right: auto; min-width: 100%; width: max-content; max-width: min(360px, 90vw); }
.ac-list li.combo-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); cursor: default; }
.ac-list li.combo-head:hover { background: none; }
.ac-list li.combo-none { color: var(--muted); cursor: default; font-weight: 400; }
.ac-list li.combo-none:hover { background: none; }
input.in[type="number"] { -moz-appearance: textfield; }

/* Phase 2: vendors, invoices, budgets */
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; border-radius: var(--r); }
.btn.sm svg { width: 15px; height: 15px; }
.amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.flags { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pill.f-warn { background: #fbe8d6; color: #8a3b07; }
.clip { display: inline-grid; vertical-align: -3px; color: var(--muted); }
.clip svg { width: 16px; height: 16px; }
.clip:hover { color: var(--accent); }
.section-title { margin: 6px 0 10px; font-size: 15px; }
.panel > header .btn { margin-left: 4px; }
.foot-note { margin: 0; padding: 10px 18px 14px; font-size: 12px; }

.table-wrap { overflow-x: auto; }
/* Reports scroll inside their panel, with the column headings (and totals) frozen in view */
.report-scroll { max-height: max(300px, calc(100vh - 190px)); overflow: auto; }
.report-scroll .table td:first-child { min-width: 170px; }
.report-scroll .table.map-table td:first-child { min-width: 0; }
/* Cost mapping (a project's Expenses tab) */
.exp-tools #mapTools { display: contents; }
.map-table td { vertical-align: middle; }
.map-table .map-pick { width: 28px; padding-right: 0; }
.map-table .map-notes { white-space: normal; color: var(--muted); max-width: 320px; }
.map-table .map-line { width: 260px; padding-top: 3px; padding-bottom: 3px; }
.map-table .map-line select.in { min-height: 28px; padding: 2px 6px; font-size: 13px; }
.map-table tr.unmapped .map-line select.in { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.map-table tr.saved td { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); transition: background .2s; }
.map-bulk { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.map-bulk select.in { width: auto; min-height: 28px; padding: 2px 6px; }
.map-left { font-size: 12px; }
.map-table tr.map-group td { padding: 6px 14px; background: color-mix(in srgb, var(--line) 45%, var(--panel)); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.map-table tr.map-group .muted { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.report-scroll .table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); box-shadow: inset 0 -1px 0 var(--line); }
.report-scroll .table tfoot td, .report-scroll .table tfoot th { position: sticky; bottom: 0; background: color-mix(in srgb, var(--accent-soft) 50%, var(--panel)); box-shadow: inset 0 1px 0 var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 6px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table thead th { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.table td:first-child { white-space: normal; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot th, .table tfoot td { border-bottom: 0; font-weight: 600; background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.table .over { color: var(--danger); font-weight: 600; }
.table .pos { color: var(--ok); font-weight: 600; }

/* Income and profit & loss */
.pl tr.sec td { padding-top: 18px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 0; }
.pl tr.sec:first-child td { padding-top: 12px; }
.pl tr.sub td:first-child { padding-left: 28px; }
.pl tr.total td { font-weight: 600; border-bottom: 2px solid var(--line); }
.pl tfoot th { font-size: 16px; }
.bar { position: relative; display: flex; width: 110px; height: 8px; border-radius: var(--r); background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar i.pend { background: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.bar.over i { background: var(--danger); }
.bar.over i.pend { background: color-mix(in srgb, var(--danger) 45%, var(--line)); }

.intro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: var(--r); background: color-mix(in srgb, var(--accent-soft) 70%, transparent); font-size: 13px; color: var(--muted); }
.intro span:not(.pill) { flex: 1 1 200px; }
.money-in { position: relative; display: block; }
.money-in::before { content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 500; }
.money-in .in { padding-left: 24px; }
input.in[type="file"] { padding: 8px; }
.in:disabled { opacity: .75; }
@media (max-width: 900px) {
  .row .right .btn.sm { padding: 0 8px; }
  .table th, .table td { padding: 9px 10px; }
}

/* Phase 3: files, scope of work, reports */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.photo { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.photo a { display: block; aspect-ratio: 4 / 3; background: var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo figcaption { display: grid; gap: 2px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.photo figcaption b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo figcaption span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo { position: relative; }
.photo-mark { position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: var(--r);
  background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--text); font-size: 12px; opacity: 0; transition: opacity .15s; }
.photo-mark svg { width: 14px; height: 14px; }
.photo:hover .photo-mark, .photo-mark:focus-visible { opacity: 1; }
@media (hover: none) { .photo-mark { opacity: 1; } .photo-mark span { display: none; } }

/* File viewer: a photo or PDF fitted to the screen, over the page */
.lb { position: fixed; inset: 0; z-index: 29; display: flex; flex-direction: column; background: rgba(8, 9, 7, .97); }
.lb-bar { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; color: #eef0e6; }
.lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.lb-count { font-size: 12px; color: rgba(238, 240, 230, .6); white-space: nowrap; }
.lb-bar .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #eef0e6; }
.lb-bar .icon-btn { color: #eef0e6; }
.lb-bar .icon-btn:hover { background: rgba(255, 255, 255, .1); }
.lb-stage { position: relative; flex: 1; min-height: 0; }
.lb-media { position: absolute; inset: 0 56px 16px; display: grid; place-items: center; }
.lb-media img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; touch-action: pan-y; user-select: none; }   /* fits the space, keeps its shape */
.lb-media iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.lb-nav { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 64px; margin-top: -32px; padding: 0; border: 0; border-radius: var(--r);
  background: rgba(255, 255, 255, .08); color: #eef0e6; }
.lb-nav:hover { background: rgba(255, 255, 255, .16); }
.lb-nav svg { width: 24px; height: 24px; }
.lb-nav.prev { left: 6px; }
.lb-nav.next { right: 6px; }
@media (max-width: 760px) {
  .lb-media { inset: 0 0 8px; }
  .lb-nav { width: 36px; height: 52px; background: rgba(0, 0, 0, .35); }
  .lb-bar .lb-act .label, .lb-count { display: none; }
  #lbOpen { display: none; }
}

/* Photo markup editor: a toolbar over the photo, which fills the rest of the screen */
body.mk-open { overflow: hidden; }
.mk { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #0c0d0a; }
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--text); }
.mk-colors { display: flex; gap: 4px; }
.mk-color { width: 24px; height: 24px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: var(--c); }
.mk-color.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--panel) inset; }
.mk-name { font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-stage { position: relative; flex: 1; min-height: 0; }
.mk-stage canvas { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 24px); max-height: calc(100% - 24px); touch-action: none; box-shadow: 0 6px 30px rgba(0, 0, 0, .5); }   /* fits the space, keeps its shape */
.mk-input { position: fixed; z-index: 31; min-width: 60px; margin: 0; padding: 0 .35em; border: 0; border-radius: 0; outline: 2px dashed rgba(255, 255, 255, .8); outline-offset: 2px;
  font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1; field-sizing: content; }
@media (max-width: 760px) { .mk-name { display: none; } .mk-bar .spacer { display: none; } }
.kind { flex: none; display: grid; place-items: center; width: 44px; height: 30px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; }
.row .title a { text-decoration: none; }
.row .title a:hover { text-decoration: underline; }

.icon-btn.sm { width: 30px; height: 30px; font-size: 20px; color: var(--muted); }
/* Vendor ratings: stars filled to the rating; on the vendor page managers click one to set it */
:root { --star: #d99a00; }
html.dark { --star: #f0b429; }
.stars { position: relative; display: inline-flex; width: max-content; vertical-align: middle; line-height: 0; }   /* never stretched: the fill is a % of it */
.stars-row { display: inline-flex; gap: 1px; }
.stars svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.stars.lg svg { width: 22px; height: 22px; }
.stars.edit svg { width: 19px; height: 19px; }
.stars-row.off { color: color-mix(in srgb, var(--muted) 28%, transparent); }
.stars-row.on { color: var(--star); }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; pointer-events: none; }
.star { padding: 1px; border: 0; background: none; color: inherit; line-height: 0; cursor: pointer; }
.stars.edit:hover .stars-fill { visibility: hidden; }   /* while pointing, preview the rating under the pointer */
.stars.edit .stars-row.off:hover .star { color: var(--star); }
.stars.edit .stars-row.off .star:hover ~ .star { color: color-mix(in srgb, var(--muted) 28%, transparent); }
.rating-sum { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.rating-sum b { font-weight: 500; }
/* The ratings box and the notes box side by side on a vendor's page */
.vendor-boxes { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 12px; margin: 12px 0 4px; }
.ratings { display: grid; align-content: start; gap: 10px; padding: 12px 14px; }   /* overall on top, the categories stacked under it */
.vendor-notes { display: flex; flex-direction: column; min-height: 0; }
.vendor-notes > header { min-height: 0; padding: 8px 12px; }
.notes-state { font-size: 12px; }
.notes-box { flex: 1; width: 100%; min-height: 150px; margin: 0; padding: 10px 12px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; white-space: pre-wrap; }
.notes-box:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.notes-box.ro { white-space: pre-wrap; }
.rating-overall { display: flex; align-items: center; gap: 8px; }
.rating-overall b { font-size: 20px; font-weight: 600; }
.rating-cats { display: grid; gap: 2px; }
.rating-cat { display: grid; grid-template-columns: 110px auto 14px auto; align-items: center; gap: 8px; min-height: 26px; }
.rc-label { font-size: 13px; }
.rc-num { font-size: 12px; text-align: center; }
.rc-clear { font-size: 12px; }
@media (max-width: 760px) { .vendor-boxes { grid-template-columns: 1fr; } .rating-sum .stars { display: none; } }

/* Reading an expense's attachment */
.read-status { margin: -4px 0 0; padding: 7px 10px; font-size: 12px; line-height: 1.5; border-radius: var(--r); background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel)); }
.read-status.bad { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); color: var(--danger); }
.read-status .spinner, .empty .spinner { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: loader-spin .8s linear infinite; }
#scopeSave.dirty { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.field.inline { display: flex; align-items: center; gap: 8px; }
.field.inline .in { width: auto; min-height: 38px; }

/* Printable scope of work */
.print-only { display: none; }
@media print {
  body > *:not(#print) { display: none !important; }
  #print { display: block; color: #000; font: 11pt/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
  .print-doc header { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
  .print-doc header div { display: grid; }
  .print-doc .pr-right { text-align: right; }
  .print-doc h1 { font-size: 18pt; margin: 0 0 2px; }
  .print-doc p { margin: 0 0 2px; }
  .print-doc h2 { font-size: 12pt; margin: 18px 0 6px; }
  .print-doc table { width: 100%; border-collapse: collapse; }
  .print-doc th, .print-doc td { border-bottom: 1px solid #bbb; padding: 4px 6px; text-align: left; }
  .print-doc .n { text-align: right; white-space: nowrap; }
  .print-doc tfoot td { font-weight: 600; border-bottom: 0; }
  .print-doc tr { break-inside: avoid; }
  .pr-notes { margin: 12px 0; padding: 8px 10px; border: 1px solid #bbb; }
  .pr-total { margin-top: 16px !important; font-size: 13pt; text-align: right; }
  .pr-sign { margin-top: 40px !important; }
  .print-doc .num { text-align: right; white-space: nowrap; }
  .print-doc .sec-row th { padding-top: 8px; font-size: 9pt; text-transform: uppercase; letter-spacing: .04em; }
  .print-doc .indent { padding-left: 14px; }
  .print-doc .sov-now td { font-weight: 600; }
  .print-doc .sov tfoot th, .print-doc .sov tfoot td { font-weight: 700; border-top: 1.5px solid #000; }
  .pr-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pr-photos figure { margin: 0; break-inside: avoid; }
  .pr-photos img { width: 100%; max-height: 3.4in; object-fit: contain; border: 1px solid #ccc; }
  .pr-photos figcaption { font-size: 9pt; color: #444; }
}
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; white-space: nowrap; }

/* Site-wide search */
.gsearch { position: relative; flex: 0 1 420px; margin-left: auto; min-width: 0; }
.gsearch .gs-icon { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#gq {
  width: 100%; height: 38px; padding: 0 52px 0 34px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--text); font-size: 14px;
}
#gq::-webkit-search-cancel-button { display: none; }
#gq:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
#gkbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border: 1px solid var(--line);
  border-radius: var(--r); font: 600 11px/1.6 -apple-system, BlinkMacSystemFont, sans-serif; color: var(--muted); pointer-events: none;
}
#gq:focus + #gkbd, #gq:not(:placeholder-shown) + #gkbd { display: none; }
.page-actions { margin-left: 0; }
.gres {
  position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; right: 0; min-width: 360px; max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.gres-group + .gres-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.gres-head { display: flex; justify-content: space-between; padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gres-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r); cursor: pointer; }
.gres-item.on, .gres-item:hover { background: var(--accent-soft); }
.gres-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); background: color-mix(in srgb, var(--line) 60%, transparent); color: var(--accent); }
.gres-ic svg { width: 17px; height: 17px; }
.gres-text { display: grid; min-width: 0; }
.gres-text b, .gres-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gres-text b { font-weight: 500; font-size: 14px; }
.gres-text small { color: var(--muted); font-size: 12px; }
.gres mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: var(--r); padding: 0 1px; }
.gres-more { padding: 6px 10px 8px 50px; font-size: 13px; font-weight: 500; color: var(--accent); cursor: pointer; }
.gres-more.muted { color: var(--muted); font-weight: 400; cursor: default; }
.gres-empty { padding: 18px 12px; text-align: center; color: var(--muted); }
#gOpen, #gCancel { display: none; }

@media (max-width: 900px) {
  .gsearch { display: none; }
  #gOpen { display: grid; margin-left: auto; }
  .topbar.searching h1, .topbar.searching #menuBtn, .topbar.searching #backBtn, .topbar.searching #gOpen, .topbar.searching .page-actions { display: none; }
  .topbar.searching .gsearch { display: block; flex: 1 1 auto; margin: 0; }
  .topbar.searching #gCancel { display: block; flex: none; }
  #gkbd { display: none; }
  .gres { position: fixed; top: calc(62px + env(safe-area-inset-top)); left: 8px; right: 8px; min-width: 0; max-height: calc(100vh - 80px); }
}

/* Schedule (Gantt) */
.gantt-panel > header { flex-wrap: wrap; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: var(--r); margin-right: -6px; vertical-align: -2px; }
.lg.todo { background: var(--accent); } .lg.prog { background: #2f6fb0; } .lg.blocked { background: #c4610f; }
.lg.done { background: #9cc9a3; } .lg.late { background: transparent; border: 2px solid var(--danger); }
.btn.warn { border-color: var(--danger); color: var(--danger); }
.gantt { display: grid; grid-template-columns: 280px minmax(0, 1fr); border-top: 1px solid var(--line); }
.g-left { border-right: 1px solid var(--line); min-width: 0; }
.g-lhead, .g-head { height: 52px; border-bottom: 1px solid var(--line); }
.g-lhead { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 14px 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.g-lrow { display: flex; align-items: center; gap: 10px; height: var(--row); padding: 0 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.g-lrow:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.g-ltext { display: grid; min-width: 0; }
.g-ltext b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-ltext small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.g-lrow.done .g-ltext b { color: var(--muted); text-decoration: line-through; }
.g-right { overflow-x: auto; overscroll-behavior-x: contain; }
.g-canvas { position: relative; }
.g-head { position: relative; }
.g-months, .g-ticks { position: relative; height: 26px; }
.g-month { position: absolute; top: 0; height: 26px; padding: 6px 8px 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; border-left: 1px solid var(--line); }
.g-day { position: absolute; top: 0; height: 26px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.g-day i { font-style: normal; opacity: .7; }
.g-day.we { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.g-day.today b { color: #fff; background: var(--danger); border-radius: var(--r); padding: 0 5px; }
.g-day.wk { justify-content: flex-start; padding-left: 6px; }
.g-body { position: relative; background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), var(--line) calc(var(--row) - 1px) var(--row)); }
.g-we { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--line) 40%, transparent); }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger); opacity: .7; z-index: 2; }
.g-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.g-arrows path { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.g-arrows path.bad { stroke: var(--danger); stroke-dasharray: 4 3; }
.g-arrows marker path { fill: var(--muted); stroke: none; }
.g-arrows #arrBad path { fill: var(--danger); }
.g-row { position: absolute; left: 0; right: 0; height: var(--row); }
.g-bar {
  position: absolute; top: 8px; height: calc(var(--row) - 16px); display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px;
  border-radius: var(--r); background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 500;
  cursor: grab; touch-action: none; user-select: none; z-index: 3; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); overflow: hidden;
}
.g-bar .g-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-bar .avatar { flex: none; }
.g-bar svg { flex: none; width: 13px; height: 13px; stroke-width: 3; }
.g-bar .avatar { width: 20px; height: 20px; font-size: 9px; background: rgba(255, 255, 255, .25); color: inherit; }
.g-bar.s-in-progress { background: #2f6fb0; color: #fff; }
.g-bar.s-blocked { background: #c4610f; color: #fff; }
.g-bar.done { background: #9cc9a3; color: #1f4d29; box-shadow: none; }
.g-bar.done .g-label { text-decoration: line-through; text-decoration-color: rgba(31, 77, 41, .5); }
.g-bar.late { outline: 2px solid var(--danger); outline-offset: 1px; }
.g-bar.conflict { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 12px); }
.g-bar.dragging { cursor: grabbing; opacity: .85; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); z-index: 5; }
.g-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.g-grip::after { content: ""; position: absolute; right: 3px; top: 30%; bottom: 30%; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, .6); }
.g-bar.done .g-grip::after { background: rgba(31, 77, 41, .4); }
.checks { border: 0; padding: 0; margin: 0; }
.checks legend { padding: 0; margin-bottom: 6px; }
.check-list { display: grid; gap: 2px; max-height: 180px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--r); }
.check-list label { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: var(--r); font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; }
.check-list label:hover { background: var(--accent-soft); }
.check-list input { width: 16px; height: 16px; accent-color: var(--accent); }
.checks .muted { margin: 0; font-size: 13px; font-weight: 400; }
@media (max-width: 900px) {
  .gantt { grid-template-columns: 150px minmax(0, 1fr); }
  .g-lrow { padding: 0 8px; gap: 8px; }
  .g-lrow .check { width: 20px; height: 20px; }
  .g-ltext small, .g-lhead .hide-sm { display: none; }
}
html.dark .g-bar.done { background: #3f6b48; color: #dcefe0; }
html.dark .g-bar.done .g-label { text-decoration-color: rgba(220, 239, 224, .5); }

/* Activity feed (dashboard) */
.feed > header { flex-wrap: wrap; }
.feed-note { margin-left: auto; font-size: 12px; }
#feedBody { max-height: 640px; overflow-y: auto; padding-bottom: 6px; }
.feed-day { margin: 0; padding: 12px 18px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  position: sticky; top: 0; background: var(--panel); z-index: 1; }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-item { display: flex; gap: 10px; padding: 8px 18px; align-items: flex-start; }
.feed-item.click { cursor: pointer; }
.feed-item.click:hover { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.feed-item .avatar { margin-top: 1px; }
.feed-text { min-width: 0; }
.feed-text p { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.feed-title { font-weight: 500; }
.feed-text small { color: var(--muted); font-size: 12px; }

/* Appearance picker (Account page) */
.theme-modes { max-width: 300px; }
.theme-modes button { flex: 1; }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.swatch {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--text); font-weight: 500; font-size: 14px;
}
.swatch.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.swatch .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--l) 50%, var(--d) 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
@media (max-width: 480px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
div.field { display: grid; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
div.field .hint { font-weight: 400; }
.theme-modes { justify-self: start; }

/* Schedule: inline add, drawing dates, linking */
.g-add { cursor: text; gap: 8px; }
.g-plus { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
.g-plus svg { width: 16px; height: 16px; }
.g-addin { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--text); font-size: 14px; }
.g-addin:hover { border-color: var(--line); }
.g-addin:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.g-nodate { color: var(--warn); }
.g-empty { cursor: crosshair; }
.g-empty:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.g-hint { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.g-empty:not(:hover) .g-hint { opacity: .55; }
.g-ghost { background: color-mix(in srgb, var(--accent) 55%, transparent); justify-content: center; pointer-events: none; }
.g-grip.l { left: 0; right: auto; }
.g-grip.l::after { left: 3px; right: auto; }
.g-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; z-index: 4;
  background: var(--panel); border: 2px solid var(--accent); cursor: crosshair; opacity: 0; transition: opacity .12s; touch-action: none;
}
.g-row:hover .g-dot, .g-body.linking .g-dot { opacity: 1; }
.g-arrows path.hit { stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; marker-end: none; }
.g-arrows path.hit:hover { stroke: color-mix(in srgb, var(--danger) 25%, transparent); }
.g-arrows path.temp { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.g-body.linking { cursor: crosshair; }
.g-bar.drop { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .g-dot { opacity: .9; } }

/* Loading logo: appears in the middle of the screen while a request is slow. Clicks pass through it. */
.loader { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.loader.on { opacity: 1; visibility: visible; }
.loader-card { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 24px rgba(10, 12, 8, .16); }
.loader-card::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: loader-spin .9s linear infinite; }
.loader .mark { width: 50px; height: auto; animation: loader-breathe 1.4s ease-in-out infinite; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-breathe { 50% { transform: scale(.86); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .loader-card::before { animation-duration: 2.4s; } .loader .mark { animation: none; } }

/* Schedule: full screen */
html.gantt-full, html.gantt-full body { overflow: hidden; }
.gantt-panel.full { position: fixed; inset: 0; z-index: 18; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.gantt-panel.full .gantt { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.gantt-panel.full .foot-note { display: none; }
.g-title { margin: 0 8px 0 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
@media (max-width: 900px) { #ganttFull .label, .gantt-panel.full .legend { display: none; } }

/* Messages */
.nav .count.unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r); background: var(--accent); color: var(--accent-ink); display: inline-grid; place-items: center; font-size: 11px; }
.msg-compose { display: grid; gap: 10px; padding: 14px; margin-bottom: 14px; }
.msg-compose [name="subject"] { font-weight: 500; }
.msg-compose textarea { min-height: 80px; }
.msg-compose-foot { display: flex; align-items: center; gap: 10px; }
.msg-compose-foot select.in { width: auto; max-width: 60%; min-height: 38px; padding: 6px 10px; }
.msg-compose-foot .combo { width: 240px; max-width: 60%; }
.msg-compose-foot .combo input.in { min-height: 38px; }
.msg-list { display: grid; gap: 12px; max-width: 900px; }
.msg-compose { max-width: 900px; }
.msg { padding: 14px 18px 12px; }
.msg.fresh { box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.msg.flash { animation: msg-flash 1.6s ease-out; }
@keyframes msg-flash { from { outline: 3px solid var(--accent); outline-offset: 2px; } to { outline: 3px solid transparent; outline-offset: 2px; } }
.panel > header.msg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0; border: 0; }
.msg-who { display: grid; line-height: 1.25; }
.msg-who small { color: var(--muted); font-size: 12px; }
.msg-job { text-decoration: none; background: var(--accent-soft); color: var(--text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sm-link { font-size: 13px; }
.sm-link.danger { color: var(--danger); }
.msg-subj { margin: 10px 0 4px; font-size: 16px; overflow-wrap: anywhere; }
.msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.msg-body a { color: var(--accent); }
.msg-replies { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.msg-replies li { display: flex; gap: 10px; align-items: flex-start; }
.msg-replies .avatar { width: 24px; height: 24px; font-size: 10px; }
.msg-rtext { flex: 1; min-width: 0; }
.msg-rtext p { margin: 0; font-size: 14px; }
.msg-rtext small { color: var(--muted); font-size: 12px; }
.msg-rdel { width: 28px; height: 28px; color: var(--muted); opacity: 0; }
.msg-replies li:hover .msg-rdel, .msg-rdel:focus-visible { opacity: 1; }
@media (hover: none) { .msg-rdel { opacity: .7; } }
.msg-rdel svg { width: 15px; height: 15px; }
.msg-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.msg-reply textarea.in { min-height: 38px; height: 38px; padding: 8px 12px; resize: none; font-size: 14px; }

/* Projected / actual profit on jobs */
.jp { display: grid; justify-items: end; line-height: 1.15; margin-right: 4px; }
.jp small { font-size: 11px; font-weight: 500; color: var(--muted); }
.jp b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pos { color: var(--ok); }
.neg { color: var(--danger); }
.facts dd.pos, .facts dd.neg { font-weight: 600; }
.facts dd small { font-weight: 400; }
.proj-totals { margin-left: auto; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.proj-totals b { font-variant-numeric: tabular-nums; }
.dot-sep { color: var(--muted); }
@media (max-width: 900px) { .proj-totals { margin-left: 0; width: 100%; } }

/* Dashboard widgets: 12 columns; each widget spans --w columns and --h rows (56px). */
.dgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 56px; grid-auto-flow: row dense; gap: 10px; }
.wg { position: relative; grid-column: span var(--w); grid-row: span var(--h); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wg > header { flex: none; }
.wg-body { flex: 1; min-height: 0; overflow-y: auto; }
.wg.feed #feedBody { max-height: none; }
.wg.is-stat .stat { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; text-decoration: none; min-width: 0; }
.wg.is-stat .stat span { overflow: hidden; text-overflow: ellipsis; }
.wg.is-stat .stat b { font-size: clamp(20px, 6vw, 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg.is-stat .stat:hover b { color: var(--accent); }
.wg.is-stat .stat.alert b { color: var(--danger); }
.wg .stat b.neg { color: var(--danger); }
.dot-new { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.dash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 14px; }
.dash-tools select.in { width: auto; min-height: 38px; padding: 6px 10px; }
.dash-hint { flex: 1 1 200px; font-size: 13px; }

/* Customizing */
.dgrid.editing .wg { outline: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); outline-offset: -1px; }
.dgrid.editing .wg > :not(.wg-bar):not(.wg-grip) { pointer-events: none; user-select: none; opacity: .55; }
.wg-bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px 0 10px;
  background: color-mix(in srgb, var(--accent-soft) 92%, var(--panel)); border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; }
.wg-grab { color: var(--muted); font-size: 16px; line-height: 1; }
.wg-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-size { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-x { width: 30px; height: 30px; flex: none; }
.wg-x svg { width: 16px; height: 16px; }
.wg-grip { position: absolute; z-index: 2; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 50%, var(--accent) 50% 58%, transparent 58% 68%, var(--accent) 68% 76%, transparent 76%); }
.wg.moving { box-shadow: 0 10px 30px rgba(0, 0, 0, .2); z-index: 3; }
.wg.moving .wg-bar { cursor: grabbing; }
.wg.resizing { outline-style: solid; }

/* Phones and tablets: two columns, stats side by side, everything else full width; heights follow the content
   (up to the chosen size). Resizing is a desktop thing. */
@media (max-width: 900px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .wg { grid-column: span 2; grid-row: auto; max-height: calc(var(--h) * 70px); }
  .wg.is-stat { grid-column: span 1; }
  .wg-grip, .wg-size { display: none; }
  .dgrid.editing .wg { padding-top: 38px; }
  .dash-tools select.in { flex: 1 1 100%; }
  .dash-tools .dash-hint { order: 5; flex-basis: 100%; }
  .dash-tools #dashTpl { margin-right: auto; }
  .dash-hint .hide-sm { display: none; }
}

/* Quick actions: small icons at the right end of the top bar; on phones, one button that opens a menu */
.quickbar { order: 10; position: relative; display: flex; align-items: center; padding-left: 10px; border-left: 1px solid var(--line); }
.qa-list { display: flex; gap: 2px; }
.qa { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--muted); }
.qa svg { width: 17px; height: 17px; }
.qa span { display: none; }
.qa:hover, .qa:focus-visible { background: var(--accent-soft); color: var(--accent); }
.qa-toggle { display: none; }
.topbar.searching .quickbar { display: none; }
@media (max-width: 900px) {
  .quickbar { padding-left: 0; border-left: 0; }
  .qa-toggle { display: grid; }
  .qa-list { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 12; flex-direction: column; gap: 2px; min-width: 200px; padding: 6px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(10, 12, 8, .18); }
  .quickbar.open .qa-list { display: flex; }
  .quickbar.open .qa-toggle { background: var(--accent-soft); color: var(--accent); }
  .qa { width: auto; height: 42px; justify-content: start; grid-auto-flow: column; gap: 10px; padding: 0 12px; color: var(--text); font-weight: 500; font-size: 15px; }
  .qa svg { color: var(--accent); }
  .qa span { display: inline; }
}

/* Budgets grouped by template section */
.table.budget tr.sec-row th, .table.budget tr.sec-row td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); font-weight: 600; }
.table.budget tr.sec-row th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table.budget td.indent { padding-left: 28px; }

/* Budget template editor: one sheet, cells like a spreadsheet's */
.tpl-intro { margin: 0 0 12px; font-size: 13px; max-width: 1000px; }
.tpl-sheet { overflow: hidden; }  /* keeps the cells inside the rounded corners */
.tpl-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 3fr) 100px 30px; align-items: stretch; border-bottom: 1px solid var(--line); }
.tpl-row > * { min-width: 0; }
.tpl-row > :not(:last-child) { border-right: 1px solid var(--line); }
.tpl-head { background: var(--panel); }
.tpl-head span { padding: 7px 8px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tpl-head .num { text-align: right; }
.cell { display: block; width: 100%; min-height: 32px; margin: 0; padding: 6px 8px; border: 0; border-radius: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 14px; line-height: 20px; }
textarea.cell { resize: none; overflow: hidden; color: var(--muted); }
.cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.cell:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--panel); color: var(--text); }
.cell::placeholder { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.tpl-row > .icon-btn { width: 30px; height: 32px; border-radius: 0; color: var(--muted); }
.tpl-row .icon-btn svg { width: 15px; height: 15px; }
.tpl-sec { grid-template-columns: minmax(170px, 1fr) minmax(0, 3fr) auto; background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); }
.tpl-sec .tpl-gname { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.tpl-sec .tpl-sum { align-self: center; padding: 0 8px; font-size: 12px; color: var(--muted); }
.tpl-tools { display: flex; align-items: center; padding-right: 2px; border-right: 0 !important; }
.tpl-tools .icon-btn { width: 28px; height: 28px; color: var(--muted); }
.tpl-tools .icon-btn:disabled { opacity: .3; cursor: default; }
.tpl-tools .icon-btn.danger:hover { color: var(--danger); }
.tpl-addrow { display: block; padding: 3px 8px 5px; }
.tpl-addrow .link { font-size: 12px; }
.tpl-foot { padding: 10px 8px; }
/* Scope of work: the same sheet, with Line / Scope / Qty / Unit / Unit cost / Total columns */
.sow-meta { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); gap: 8px 10px; margin-top: 6px; }
.sow-meta .sow-notes { grid-column: 1 / -1; }
.sow-meta textarea.in { min-height: 34px; resize: vertical; }
.sow-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(0, 3fr) 30px; align-items: stretch; border-bottom: 1px solid var(--line); }
.sow-row > * { min-width: 0; }
.sow-row > :not(:last-child) { border-right: 1px solid var(--line); }
.sow-row > .icon-btn { width: 30px; height: 32px; border-radius: 0; color: var(--muted); }
.sow-row .icon-btn svg { width: 15px; height: 15px; }
.sow-colhead span { padding: 7px 8px; font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sow-colhead .num, .sow-total.num { text-align: right; }
.sow-total { align-self: center; padding: 6px 8px; font-variant-numeric: tabular-nums; font-size: 13px; }
.sow-sec { background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); }
.sow-sec > .tpl-gname { grid-column: 1 / 3; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.sow-row.tpl-addrow { display: block; }
.sow-row.ro .cell { min-height: 0; }
.sow-row.ro .sow-desc { white-space: pre-wrap; color: var(--muted); }
.sow-foot { display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
.sow-grand-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--accent-soft) 40%, var(--panel)); font-weight: 600; }
.sow-grand-row b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sow-total-in { width: 160px; text-align: right; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sow-sheet .empty { padding: 16px 12px; }
@media (max-width: 900px) {
  .sow-meta { grid-template-columns: 1fr 1fr; }
  .sow-meta label:first-child { grid-column: 1 / -1; }
  .sow-colhead { display: none; }
  /* phones: Line + total on top, the scope wording under it, then qty / unit / cost */
  .sow-row { grid-template-columns: minmax(0, 1fr) 30px; }
  .sow-row > textarea.cell { grid-column: 1 / -1; grid-row: 2; border-top: 1px dashed var(--line); border-right: 0 !important; font-size: 13px; }
  .sow-row > .icon-btn { grid-row: 1; grid-column: 2; }
  .sow-sec { grid-template-columns: minmax(0, 1fr) 30px; }
  .sow-sec > .tpl-gname { grid-column: 1; }
  .sow-total-in { width: 130px; }
}
@media (max-width: 900px) {
  .tpl-head { display: none; }
  .tpl-row { grid-template-columns: minmax(0, 1fr) 90px 30px; }
  .tpl-row textarea.cell { grid-column: 1 / -1; grid-row: 2; border-top: 1px dashed var(--line); font-size: 13px; }
  .tpl-row > textarea { border-right: 0 !important; }
  .tpl-sec { grid-template-columns: minmax(0, 1fr) auto auto; }
  .tpl-row textarea.cell:placeholder-shown:not(:focus) { min-height: 22px; padding-top: 1px; padding-bottom: 1px; line-height: 18px; }
  .page-actions .hide-sm { display: none; }
}

/* Schedule builder: the sheet on the left, a day-by-day chart on the right; rows line up across both */
.sb { display: grid; grid-template-columns: minmax(540px, 44%) minmax(0, 1fr); overflow: hidden; }
.sb-sheet { min-width: 0; border-right: 1px solid var(--line); }
.sb-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px 46px minmax(0, .8fr) 30px; height: 34px; border-bottom: 1px solid var(--line); }
.sb-row > * { min-width: 0; }
.sb-row > * + * { border-left: 1px solid var(--line); }
.sb-row .cell { height: 100%; min-height: 0; }
.sb-row > span { display: flex; align-items: center; padding: 0 8px; font-size: 13px; }
.sb-row > span.num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.sb-n { justify-content: center !important; padding: 0 !important; color: var(--muted); font-size: 11px !important; }
.sb-head > span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sb-overall { font-weight: 600; }
.sb-overall > span { font-size: 14px; }
.sb-phase { background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel)); }
.sb-phase > span.num { font-weight: 600; color: var(--muted); }
.sb-name { display: flex; align-items: center; gap: 2px; padding: 0 0 0 2px !important; }
.sb-phase .cell { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding-left: 2px; }
.sb-caret { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 0; border-radius: var(--r); background: none; color: var(--muted); }
.sb-caret svg { width: 15px; height: 15px; transition: transform .12s; }
.sb-caret.closed svg { transform: rotate(-90deg); }
.sb-caret:hover { background: var(--accent-soft); color: var(--text); }
.sb-tools { gap: 0; padding: 0 2px !important; }
.sb-tools .icon-btn, .sb-row > .icon-btn { width: 28px; height: 100%; border-radius: 0; color: var(--muted); }
.sb-tools .icon-btn { width: 26px; height: 26px; border-radius: var(--r); }
.sb-tools .icon-btn:disabled { opacity: .3; cursor: default; }
.sb-row .icon-btn svg { width: 15px; height: 15px; }
.sb-row .icon-btn.danger:hover { color: var(--danger); }
.sb-title { padding-left: 14px; }
.sb-deps { color: var(--muted); font-size: 13px; text-overflow: ellipsis; }
.sb-add { display: flex; align-items: center; padding-left: 48px; }
.sb-add .link { font-size: 12px; }
.sb-foot { padding: 10px 8px; }
.sb-chart { overflow-x: auto; overscroll-behavior-x: contain; min-width: 0; }
.sb-days { position: relative; height: 34px; border-bottom: 1px solid var(--line); }
.sb-days span { position: absolute; top: 0; width: 26px; line-height: 34px; text-align: center; font-size: 11px; font-weight: 500; color: var(--muted); }
.sb-canvas { position: relative;
  background-image: repeating-linear-gradient(to right, transparent 0 calc(var(--px) - 1px), color-mix(in srgb, var(--line) 70%, transparent) calc(var(--px) - 1px) var(--px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--rh) - 1px), var(--line) calc(var(--rh) - 1px) var(--rh)); }
.sb-span { position: absolute; height: 28px; border-bottom: 3px solid color-mix(in srgb, var(--accent) 60%, var(--danger)); }
.sb-span b { position: absolute; left: 4px; bottom: 3px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.sb-span.overall { border-bottom-color: var(--muted); }
.sb-bar { position: absolute; height: 18px; border-radius: var(--r); background: var(--accent); cursor: grab; touch-action: none; z-index: 2; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.sb-bar:hover { filter: brightness(1.1); }
.sb-bar.dragging { cursor: grabbing; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.sb-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.sb-grip::after { content: ""; position: absolute; right: 2px; top: 4px; bottom: 4px; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, .6); }
.sb-label { position: absolute; line-height: 34px; font-size: 13px; white-space: nowrap; pointer-events: none; }
.sb-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.sb-arrows path { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.sb-arrows path.bad { stroke: var(--danger); stroke-dasharray: 4 3; }
.sb-arrows marker path { fill: var(--muted); stroke: none; }
.sb-arrows #sbArrBad path { fill: var(--danger); }
@media (max-width: 900px) {
  .sb { grid-template-columns: minmax(0, 1fr); }
  .sb-sheet { border-right: 0; }
  .sb-chart { display: none; }
  .sb-row { grid-template-columns: 28px minmax(0, 1fr) 46px 42px 30px; height: auto; min-height: 34px; }
  .sb-row .cell { min-height: 34px; }
  .sb-row > .sb-deps { grid-column: 2 / -1; grid-row: 2; border-top: 1px dashed var(--line); }
  .sb-head > span:nth-child(5), .sb-overall > span:nth-child(5) { display: none; }
  .sb-phase .sb-tools { display: none; }
  .tpl-intro .hide-sm { display: none; }
}

/* Project description, and the CSV import preview */
.proj-desc { margin: 6px 0 0; white-space: pre-line; color: var(--muted); }
.import-intro { margin: 0 0 12px; }
.import-sum { margin: 10px 0 4px; }
.import-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); }
.import-list li { padding: 7px 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.import-list li:first-child { border-top: 0; }
.import-list .pill { margin-right: 4px; }
.import-note { color: #a15c07; font-size: 12px; margin-top: 2px; }
html.dark .import-note { color: #e8b04a; }

/* ---- Finance: Cash Flow page and bank accounts ----------------------------------------
   Chart colors (checked for color blindness in light and dark): cash in blue / cash out red; the categories use the
   first four slots in a fixed order. Text stays in the text colors; a swatch beside it carries the color. */
:root { --viz-in: #2a78d6; --viz-out: #e34948; --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-bal: #2b2d27;
  --st-good: #0ca30c; --st-warn: #fab219; --st-serious: #ec835a; --st-bad: #d03b3b; }
html.dark { --viz-in: #3987e5; --viz-out: #e66767; --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-bal: #eceee6; }
.fin-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.fin-note svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.fin-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.fin-card { display: grid; gap: 2px; padding: 12px 14px; min-width: 0; }
.fin-card-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.fin-card-top svg { width: 17px; height: 17px; color: var(--accent); }
.fin-card b { font-size: 22px; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-card small { font-size: 12px; color: var(--muted); }
.fin-card.warn { border-color: color-mix(in srgb, var(--st-bad) 45%, var(--line)); }
.fin-card.warn small { color: var(--danger); }
.fin-card .link { font-size: 12px; }
.fin-card[data-go] { cursor: pointer; transition: border-color .12s, background .12s; }
.fin-card[data-go]:hover, .fin-card[data-go]:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); outline: none; }
.fin-card.warn[data-go]:hover { border-color: var(--st-bad); }
.fin-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.fin-grid > .panel { min-width: 0; }
.fin-span8 { grid-column: span 8; }
.fin-span4 { grid-column: span 4; }
.fin-sub { font-size: 12px; margin-left: 4px; }
/* projected cash chart */
.fin-chart-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 8px; padding: 10px 6px 0 6px; }
.fin-chart { position: relative; min-width: 0; }
.fin-chart svg { display: block; width: 100%; height: auto; }
.fin-chart rect, .fin-chart text, .fin-chart circle.bal-dot, .fin-donut text { stroke: none; }   /* charts don't take the icons' outline */
.fin-chart circle.bal-dot { stroke: var(--panel); }
.fin-chart .grid { stroke: var(--line); stroke-width: 1; }
.fin-chart .axis-line { stroke: color-mix(in srgb, var(--muted) 50%, var(--line)); stroke-width: 1; }
.fin-chart .axis { fill: var(--muted); font-size: 11px; }
.fin-chart .reserve { stroke: var(--st-serious); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fin-chart .reserve-label { fill: var(--text); }
.fin-chart .bar-in { fill: var(--viz-in); }
.fin-chart .bar-out { fill: var(--viz-out); }
.fin-chart .bal { fill: none; stroke: var(--viz-bal); stroke-width: 2; stroke-linejoin: round; }
.fin-chart .bal-dot { fill: var(--viz-bal); stroke: var(--panel); stroke-width: 2; }
.fin-chart .bal-dot.low { fill: var(--st-bad); }
.fin-chart .cross { stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1; }
.fin-chart .hit { fill: transparent; }
.fin-tip { position: absolute; top: 6px; z-index: 2; display: grid; gap: 3px; padding: 8px 10px; min-width: 170px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 4px 18px rgba(0, 0, 0, .14); font-size: 12px; pointer-events: none; }
.fin-tip span { display: flex; align-items: center; gap: 6px; }
.fin-tip em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
.fin-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 14px 12px; font-size: 12px; color: var(--muted); }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-bal, .lg-in, .lg-out, .lg-res { display: inline-block; flex: none; width: 12px; height: 8px; border-radius: 2px; }
.lg-bal { height: 2px; background: var(--viz-bal); }
.lg-in { background: var(--viz-in); }
.lg-out { background: var(--viz-out); }
.lg-res { height: 0; border-top: 2px dashed var(--st-serious); }
.fin-summary { margin: 0; padding: 4px 8px 8px; font-size: 12px; border-left: 1px solid var(--line); align-self: start; }
.fin-summary div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 4px; }
.fin-summary dt { color: var(--text); }
.fin-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.fin-summary .sub dt, .fin-summary .sub dd { color: var(--muted); padding-left: 10px; }
.fin-summary .sub dd { padding-left: 0; }
.fin-summary .row-head, .fin-summary .sum-in, .fin-summary .sum-out { font-weight: 600; margin-top: 4px; }
.fin-summary .end { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 6px; }
.fin-summary .neg { color: var(--danger); }
/* action queue and lists */
.fin-queue .row, .fin-events .row { align-items: flex-start; }
.fq-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); }
.fq-ic svg { width: 15px; height: 15px; }
.fq-ic.bad { background: color-mix(in srgb, var(--st-bad) 14%, var(--panel)); color: var(--st-bad); }
.fq-ic.warn { background: color-mix(in srgb, var(--st-warn) 20%, var(--panel)); color: #9a6400; }
html.dark .fq-ic.warn { color: var(--st-warn); }
.fin-queue .amt, .fin-events .amt { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt.neg { color: var(--danger); }
.amt.pos { color: var(--ok); }
.fe-date { display: grid; place-items: center; flex: none; width: 34px; padding: 2px 0; border: 1px solid var(--line); border-radius: var(--r); line-height: 1.1; }
.fe-date small { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--danger); }
.fe-date b { font-size: 14px; font-weight: 600; }
.fe-date.late { border-color: color-mix(in srgb, var(--st-bad) 50%, var(--line)); }
.fin-table td { vertical-align: middle; }
.fin-acct { display: block; font-size: 11px; }
.fin-foot { margin: 0; padding: 8px 14px; font-size: 12px; }
.fin-meter { display: block; width: 70px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fin-meter i { display: block; height: 100%; background: var(--viz-in); }
.fin-meter.over i { background: var(--st-bad); }
/* category donut */
.fin-donut { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px; }
.fin-donut svg { width: 130px; height: 130px; transform: rotate(-90deg); }
.fin-donut .seg { fill: none; stroke-width: 18; }
.fin-donut text { transform: rotate(90deg); transform-origin: 70px 70px; }
.donut-total { fill: var(--text); font-size: 17px; font-weight: 600; }
.donut-label { fill: var(--muted); font-size: 10px; }
.s1 { stroke: var(--viz-1); background: var(--viz-1); } .s2 { stroke: var(--viz-2); background: var(--viz-2); }
.s3 { stroke: var(--viz-3); background: var(--viz-3); } .s4 { stroke: var(--viz-4); background: var(--viz-4); }
.fin-cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12px; }
.fin-cat-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.fin-cat-list .sw { width: 10px; height: 10px; border-radius: 2px; }
.fin-cat-list em { font-style: normal; color: var(--muted); }
.fin-cat-list b { font-weight: 500; font-variant-numeric: tabular-nums; }
/* payables aging */
.fin-aging { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 12px; }
.fa-top { display: flex; justify-content: space-between; font-size: 13px; }
.fa-top b { font-weight: 500; font-variant-numeric: tabular-nums; }
.fa-bar { display: block; height: 6px; margin: 4px 0 2px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fa-bar i { display: block; height: 100%; }
.fa-bar .ok { background: var(--st-good); } .fa-bar .warn { background: var(--st-warn); } .fa-bar .serious { background: var(--st-serious); } .fa-bar .bad { background: var(--st-bad); }
.fin-aging small { font-size: 11px; }
.fin-acct-group { margin-bottom: 12px; }
@media (max-width: 1280px) { .fin-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .fin-span8, .fin-span4 { grid-column: 1 / -1; }
  .fin-chart-wrap { grid-template-columns: 1fr; }
  .fin-summary { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) { .fin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fin-card b { font-size: 18px; } }

/* ---- Deliveries calendar ---------------------------------------------------------------- */
.dv-month { display: flex; align-items: center; gap: 4px; }
.dv-month b { min-width: 140px; text-align: center; font-size: 15px; font-weight: 600; }
.dv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.dv-stats .fin-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-cal { overflow: hidden; margin-bottom: 12px; }
.dv-head, .dv-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dv-head span { padding: 7px 8px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.dv-day { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 112px; padding: 4px 4px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.dv-day:nth-child(7n) { border-right: 0; }
.dv-day:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.dv-day.other { background: color-mix(in srgb, var(--line) 25%, transparent); }
.dv-day.other .dv-num { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.dv-day.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.dv-num { align-self: flex-end; min-width: 22px; padding: 1px 5px; font-size: 12px; text-align: center; color: var(--muted); }
.dv-day.today .dv-num { border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.dv-chip { display: grid; padding: 3px 6px; border-radius: var(--r); border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 11.5px; line-height: 1.3; cursor: grab; }
.dv-chip b, .dv-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-chip b { font-weight: 600; }
.dv-chip span { color: var(--muted); }
.dv-chip { touch-action: none; user-select: none; }
.dv-chip.dragging { opacity: .35; }
.dv-ghost { position: fixed; z-index: 40; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); opacity: .95; }
.dv-chip.st-delivered { border-left-color: var(--st-good); background: color-mix(in srgb, var(--st-good) 10%, var(--panel)); }
.dv-chip.st-delivered b { color: var(--muted); }
.dv-chip.st-missed { border-left-color: var(--st-bad); background: color-mix(in srgb, var(--st-bad) 10%, var(--panel)); }
/* Tasks on the calendar: blue, set apart from deliveries (the accent color); the filter and list carry a matching key */
.dv-chip.task { border-left-color: var(--viz-1); background: color-mix(in srgb, var(--viz-1) 10%, var(--panel)); }
.dv-chip.task.st-done { border-left-color: var(--st-good); background: color-mix(in srgb, var(--st-good) 10%, var(--panel)); }
.dv-chip.task.st-done b { color: var(--muted); text-decoration: line-through; }
.dv-chip.task.st-late { border-left-color: var(--st-bad); background: color-mix(in srgb, var(--st-bad) 10%, var(--panel)); }
.cal-key { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; background: var(--accent); }
.cal-key.tasks { background: var(--viz-1); }
.read-deliver { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-weight: 500; color: var(--text); }
.read-deliver input.in { width: auto; min-height: 28px; padding: 2px 6px; font-size: 12px; }
@media (max-width: 900px) { .dv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* phones: a compact month (dots for deliveries); the list underneath has the details */
  .dv-day { min-height: 54px; padding: 2px; }
  .dv-chip { padding: 0; height: 6px; border-left: 0; border-radius: 3px; background: var(--accent); }
  .dv-chip.st-delivered { background: var(--st-good); } .dv-chip.st-missed { background: var(--st-bad); }
  .dv-chip.task { background: var(--viz-1); } .dv-chip.task.st-done { background: var(--st-good); } .dv-chip.task.st-late { background: var(--st-bad); }
  .dv-chip b, .dv-chip span { display: none; }
  .dv-month b { min-width: 0; }
}

/* Savings (Expenses → Savings) */
.sv-tools .sv-note { font-size: 12px; }
.sv-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-total b { color: var(--ok); }
.sv-compare { padding-bottom: 8px; margin-bottom: 12px; }
.sv-bar { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px minmax(0, 220px); align-items: center; gap: 10px; padding: 7px 14px; font-size: 13px; }
.sv-track { display: block; height: 14px; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--line) 50%, transparent); overflow: hidden; }
.sv-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.sv-bar b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.sv-bar small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-pct { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.sv-pct .fin-meter i { background: var(--st-good); }
.pos-text { color: var(--ok); }
.sv-groups { display: grid; gap: 12px; margin-bottom: 12px; }
@media (max-width: 760px) { .sv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-bar { grid-template-columns: 70px minmax(0, 1fr) 96px; } .sv-bar small { display: none; } }

/* Filters menu (projects): a button that opens a panel of checkbox groups; chips beside it show what's on */
.filt { position: relative; }
.filt .btn .count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.filt .btn .count:empty { display: none; }
.filt-panel { display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 300px; max-height: min(70vh, 560px); overflow-y: auto; padding: 4px 0 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.filt.open .filt-panel { display: block; }
.filt-group { margin: 0; padding: 8px 14px 10px; border: 0; border-bottom: 1px solid var(--line); }
.filt-group legend { display: flex; align-items: center; width: 100%; float: left; margin-bottom: 4px; padding: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.filt-group legend + * { clear: left; }
.filt-quick { display: inline-flex; gap: 10px; margin-left: auto; text-transform: none; letter-spacing: 0; }
.filt-quick .link { font-size: 12px; }
.filt-opt { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; cursor: pointer; }
.filt-opt input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.filt-panel footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--panel); }
.filt-panel footer .link { font-size: 13px; }
.filt-chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; max-width: 260px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--accent-soft); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip span { color: var(--muted); }
.chip:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
@media (max-width: 480px) { .filt-panel { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 75vh; } }

/* Rentals: property management (rentals.js) */
.rt-filters { margin-bottom: 10px; }
.rt-tools { display: contents; }
.rt-tools .in { min-height: 32px; padding: 4px 10px; width: 220px; }
.rt-alert { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--st-warn) 55%, var(--line)); border-radius: var(--r); background: color-mix(in srgb, var(--st-warn) 10%, var(--panel)); font-size: 13px; }
.rt-alert.info { border-color: var(--line); background: var(--panel); }
.rt-alert svg { width: 17px; height: 17px; flex: none; color: #9a6400; }
.rt-alert.info svg { color: var(--muted); }
.rt-alert span { flex: 1; }
.rt-alert + .fin-cards { margin-top: 12px; }
.rt-cards { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
.fin-card.warn b { color: var(--danger); }
.rt-grid { align-items: start; margin-bottom: 12px; }
.panel + .rt-grid { margin-top: 12px; }
.rt-grid > .panel { margin: 0; }
.rt-when { font-size: 12px; white-space: nowrap; }
.rt-empty { display: flex; gap: 14px; padding: 22px; align-items: flex-start; }
.rt-empty > svg { width: 28px; height: 28px; flex: none; color: var(--accent); }
.rt-empty h2 { margin: 0 0 4px; font-size: 16px; }
.rt-empty p { margin: 0 0 12px; }
.rt-empty-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rt-roll td:nth-child(2) { white-space: normal; min-width: 140px; }
.rt-ledger td:nth-child(3) { white-space: normal; }
.amt small { font-weight: 400; margin-left: 1px; }
/* unit editor in the property form */
.ru { display: grid; gap: 6px; }
.ru-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 52px 52px 70px minmax(0, 1.2fr) auto 30px; gap: 6px; align-items: center; }
.ru-row .in { min-height: 32px; padding: 4px 8px; }
.ru-row .money-in .in { padding-left: 20px; }
.ru-row .money-in::before { left: 8px; }
.ru-off { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ru-del svg { width: 15px; height: 15px; }
#ruAdd { justify-self: start; font-size: 13px; }
/* statuses */
@media (max-width: 1100px) { .rt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rt-grid { grid-template-columns: 1fr; }
  .rt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-alert { flex-wrap: wrap; }
  .rt-tools .in { width: 100%; }
  .ru-row { grid-template-columns: minmax(0, 1fr) 44px 44px 58px; }
  .ru-row .money-in { grid-column: 1 / 3; }
  .ru-row .ru-off { grid-column: 3; }
}

/* ask(): the app's confirm dialog, above any open form */
.ask { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(10, 12, 8, .45); }
.ask-card { width: min(420px, 100%); padding: 18px 18px 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.ask-card p { margin: 0 0 16px; white-space: pre-line; line-height: 1.45; }
.ask-card footer { display: flex; justify-content: flex-end; gap: 8px; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* rows and cards reached with the keyboard */
[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the ⋯ menu in a page header */
.more { position: relative; }
.btn.icon-only { width: 32px; padding: 0; }
.btn.icon-only svg { fill: currentColor; stroke: none; }
.more-list { display: none; position: absolute; z-index: 25; top: calc(100% + 4px); right: 0; min-width: 190px; padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.more.open .more-list { display: grid; gap: 2px; }
.more-list .btn { justify-content: flex-start; width: 100%; border-color: transparent; background: none; font-weight: 500; }
.more-list .btn:hover { background: var(--accent-soft); }

/* Chart of accounts: the template sheet with No. / Account / What goes in it columns */
.coa .tpl-row { grid-template-columns: 90px minmax(170px, 1.3fr) minmax(0, 3fr) 30px; }
.coa .tpl-row.tpl-sec { grid-template-columns: minmax(0, 2fr) 110px minmax(0, 1fr) auto; }
.coa .tpl-row.tpl-addrow { display: block; }
.coa .coa-kind { font-size: 12px; font-weight: 500; cursor: pointer; }
.coa .tpl-row > input[data-f="code"] { font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 760px) {
  .coa .tpl-row { grid-template-columns: 64px minmax(0, 1fr) 30px; }
  .coa .tpl-row > input[data-f="description"], .coa .tpl-head span:nth-child(3) { display: none; }
  .coa .tpl-row.tpl-sec { grid-template-columns: minmax(0, 1fr) 96px auto; }
  .coa .tpl-sec .tpl-sum { display: none; }
}

/* a job's budget as a sheet (managers): category and budget cells are typed into */
.table.b-edit td.edit { padding: 0; }
.table.b-edit td.edit .cell { padding: 6px 14px; min-height: 31px; font-size: 13px; }
.table.b-edit td.edit.indent .cell { padding-left: 28px; }
.table.b-edit .b-amt::placeholder, .table.b-edit .b-newamt::placeholder { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.table.b-edit tr.b-new td { background: color-mix(in srgb, var(--accent-soft) 25%, transparent); }
.table.b-edit .b-tools { padding: 0 4px; white-space: nowrap; text-align: right; }
.table.b-edit .b-tools .icon-btn { width: 26px; height: 26px; display: inline-grid; color: var(--muted); opacity: .55; }
.table.b-edit tr:hover .b-tools .icon-btn, .table.b-edit .b-tools .icon-btn:focus-visible { opacity: 1; }
.table.b-edit .b-tools .icon-btn svg { width: 14px; height: 14px; }
.table.b-edit .b-tools [data-bdel]:hover { color: var(--danger); }

/* a scope open in its flip's Scope of work tab: its own bar above it */
.sow-bar { margin-bottom: 8px; }
.sow-bar .sow-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sow-bar + .sow-head { margin-bottom: 12px; }

/* System status (Admin) */
.sys-sum { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; }
.sys-sum > svg { width: 22px; height: 22px; flex: none; }
.sys-sum div { display: grid; gap: 2px; }
.sys-sum b { font-size: 15px; }
.sys-sum.sys-ok > svg { color: var(--st-good); }
.sys-sum.sys-warn { border-color: color-mix(in srgb, var(--st-warn) 55%, var(--line)); } .sys-sum.sys-warn > svg { color: #9a6400; }
.sys-sum.sys-bad { border-color: color-mix(in srgb, var(--st-bad) 55%, var(--line)); } .sys-sum.sys-bad > svg { color: var(--st-bad); }
.sys-row { align-items: flex-start; }
.sys-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.sys-dot.sys-ok { background: var(--st-good); } .sys-dot.sys-warn { background: var(--st-warn); } .sys-dot.sys-bad { background: var(--st-bad); } .sys-dot.sys-off { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.sys-detail { margin-top: 2px; }
.sys-h { margin: 18px 2px 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sys-more { margin-top: 8px; }
.sys-more > summary { cursor: pointer; width: max-content; font-size: 13px; color: var(--accent); }
.sys-more[open] > summary { margin-bottom: 10px; }
.sys-meter { margin-bottom: 12px; }
.sys-meter-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; margin-bottom: 6px; }
.sys-bar { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.sys-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--st-good); }
.sys-meter.high .sys-bar > span { background: var(--st-warn); }
.sys-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 0 0 12px; }
.sys-facts div { min-width: 0; }
.sys-facts dt { font-size: 12px; color: var(--muted); }
.sys-facts dd { margin: 1px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.sys-table { display: inline-block; vertical-align: top; width: min(100%, 420px); margin: 0 16px 12px 0; }
.sys-table h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sys-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sys-table th, .sys-table td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.sys-table th { font-weight: 500; color: var(--muted); }
.sys-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sys-table td:first-child { overflow-wrap: anywhere; }

/* task lists (a flip's Tasks tab, the Tasks page): ticking tasks and the Bulk action menu */
.t-panel > header { flex-wrap: wrap; }
.t-all { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.t-all input, .t-pick { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.t-menu > .btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.t-menu .more-list { min-width: 210px; }
.t-menu .more-list .danger-text { color: var(--danger); }
.row.picking { cursor: pointer; }
.row.picking .t-pick { flex: none; margin: 0 4px 0 2px; pointer-events: none; }
.row.picked { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }

/* Roles & permissions */
.rp-wrap { overflow-x: auto; }
.rp-grid td, .rp-grid th { vertical-align: top; }
.rp-grid .rp-group th { padding-top: 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: transparent; }
.rp-help { display: block; margin-top: 2px; max-width: 46ch; line-height: 1.35; }
.rp-cell { min-width: 130px; }
.rp-sel { width: 100%; min-width: 0; }
.rp-sel.rp-none { color: var(--muted); }
.rp-changed { display: block; margin-top: 3px; font-size: 11px; color: var(--accent); }
.rp-unsaved { color: var(--st-bad); }
@media (max-width: 640px) { .rp-help, .rp-admin { display: none; } .rp-cell { min-width: 0; width: 34%; } .rp-grid td, .rp-grid th { padding-left: 6px; padding-right: 6px; } }

/* Budget template: cost code per section, group per line */
.bt .tpl-row { grid-template-columns: minmax(170px, 1fr) 150px minmax(0, 3fr) 100px 30px; }
.bt .tpl-row.tpl-sec { grid-template-columns: 76px minmax(0, 1fr) auto auto; }
.bt .tpl-row.tpl-addrow { display: block; }
.bt .bt-code { font-weight: 600; font-variant-numeric: tabular-nums; }
.bt .bt-type { border: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; padding: 0 6px; }
@media (max-width: 900px) {
  .bt .tpl-row { grid-template-columns: minmax(0, 1fr) 128px 90px 30px; }
  .bt .tpl-row.tpl-sec { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .bt .tpl-sec .tpl-sum { display: none; }
  .bt .tpl-head span:nth-child(3) { display: none; }
}
/* Add from budget: lines by group */
.bp-groups { display: grid; gap: 10px; margin-top: 8px; }
.bp-group { border: 1px solid var(--line); border-radius: 8px; }
.bp-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: color-mix(in srgb, var(--accent-soft) 50%, var(--panel)); border-radius: 8px 8px 0 0; cursor: pointer; }
.bp-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 12px; padding: 6px 10px 8px; }
.bp-line { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; font-size: 13px; cursor: pointer; }
.bp-line small { margin-left: auto; white-space: nowrap; font-size: 11px; }

/* Notifications: the bell and its panel */
.bell-wrap { position: relative; flex: none; }
.bell { position: relative; }
.bell-count { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--st-bad); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.bell-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 90px)); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.bell-panel header { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.bell-panel ul { list-style: none; margin: 0; padding: 0; }
.bell-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bell-item:hover, .bell-item:focus-visible { background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel)); outline: none; }
.bell-item > div { display: grid; gap: 2px; min-width: 0; }
.bell-item b { font-size: 13.5px; font-weight: 500; }
.bell-item.unread b { font-weight: 650; }
.bell-item span:not(.bell-dot) { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.bell-item small { font-size: 11.5px; color: var(--muted); }
.bell-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.bell-item.unread .bell-dot { background: var(--accent); }
.bell-panel .empty { padding: 18px 14px; }
@media (max-width: 640px) { .bell-panel { position: fixed; right: 12px; top: calc(56px + env(safe-area-inset-top)); } }
/* Account → Notifications */
.nt-on { margin: 4px 0; color: var(--st-good); font-weight: 600; }
.nt-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nt-kinds { display: grid; gap: 8px; margin-top: 6px; }
.nt-kind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 13.5px; font-weight: 400; }
.nt-kind .seg button { font-size: 12px; padding: 4px 9px; }

/* Scope of work: bids and the contract */
.sow-bids, .sow-contract { margin-top: 12px; }
.sow-bids header .muted, .sow-contract header .muted { font-size: 12.5px; }
.sm-note { font-size: 12px; margin-top: 2px; white-space: pre-wrap; }
.sow-facts { padding: 4px 16px 10px; }
.sow-progress { height: 8px; margin: 0 16px 14px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.sow-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.sow-sub { margin: 6px 16px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sow-contract .empty { padding: 8px 16px 16px; }

/* Lender draws */
.loan-bar { display: flex; height: 10px; margin: 0 16px 14px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.loan-bar .lb-funded { background: var(--st-good); }
.loan-bar .lb-waiting { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.draw-sum { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 8px; }
.draw-sum div { display: grid; }
.draw-sum small { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.draw-sum b { font-size: 18px; font-variant-numeric: tabular-nums; }
.draw-exp tr.on td { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.draw-exp td:first-child input { width: 16px; height: 16px; }
.draw-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 16px 16px; }
.draw-file { position: relative; display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.draw-file.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.draw-file input { position: absolute; top: 10px; left: 10px; width: 16px; height: 16px; }
.draw-file img, .draw-file-ic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: color-mix(in srgb, var(--muted) 12%, transparent); }
.draw-file-ic { display: grid; place-items: center; color: var(--muted); }
.draw-file-ic svg { width: 28px; height: 28px; }
.draw-file span { display: grid; overflow-wrap: anywhere; }
.draw-file small { color: var(--muted); font-size: 11px; }
.sov .sov-now td { font-weight: 600; }
.sov tfoot th, .sov tfoot td { font-weight: 700; }
.draw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .draw-cards { grid-template-columns: 1fr; } }

/* Daily logs */
.logs { display: grid; }
.log { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
.log:last-child { border-bottom: 0; }
.log header { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; margin-bottom: 4px; }
.log-notes { margin: 0 0 8px; white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.log-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.log-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; background: color-mix(in srgb, var(--muted) 12%, transparent); }

/* JobTread import */
.jt-setup ol { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.jt-setup code { font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 15%, transparent); }
.jt-stages .row { align-items: center; }
.jt-stages input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
.jt-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.jt-bar > span { display: block; height: 100%; background: var(--accent); }
.jt-foot { padding: 10px 16px; font-size: 13px; border-top: 1px solid var(--line); }
.jt-foot details { margin-top: 6px; }
.jt-foot ul { margin: 6px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; font-size: 12.5px; }
.jt-log { padding: 8px 16px 14px; border-top: 1px solid var(--line); }
.jt-log pre { margin: 6px 0 0; max-height: 260px; overflow: auto; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; }

/* Expenses grouped by vendor */
.vgroup { cursor: pointer; align-items: center; }
.vgroup .vg-chev { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .15s; }
.vgroup.open .vg-chev { transform: rotate(90deg); }
.vgroup.open { background: color-mix(in srgb, var(--accent-soft) 30%, transparent); }
.vg-pending { color: var(--warn); font-weight: 500; }
.rows .row.nested { padding-left: 42px; }
@media (max-width: 640px) { .rows .row.nested { padding-left: 28px; } }

/* Choose from Files: the button under a file field, and the picker over the form */
.from-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13px; }
.picked-note { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.picked-note .icon-btn { width: 22px; height: 22px; }
.picked-note .icon-btn svg { width: 13px; height: 13px; }
.picker { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.picker-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.picker-card { position: relative; display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(720px, calc(100vh - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); overflow: hidden; }
.picker-card header, .picker-card footer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.picker-card header { border-bottom: 1px solid var(--line); }
.picker-card footer { border-top: 1px solid var(--line); }
.picker-folders { margin: 10px 16px 0; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 12px 16px 16px; overflow: auto; }
.picker-item { position: relative; display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.picker-item.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.picker-item input { position: absolute; top: 10px; left: 10px; width: 17px; height: 17px; }
.picker-item img, .picker-ic { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: color-mix(in srgb, var(--muted) 12%, transparent); }
.picker-ic { display: grid; place-items: center; color: var(--muted); }
.picker-ic svg { width: 28px; height: 28px; }
.picker-name { display: grid; overflow-wrap: anywhere; }
.picker-name small { color: var(--muted); font-size: 11px; }
.picker .empty { padding: 24px 16px; }
@media (max-width: 640px) { .picker { padding: 0; } .picker-card { max-height: 100vh; height: 100%; border-radius: 0; } .picker-grid { grid-template-columns: repeat(2, 1fr); } }

.intro.danger-intro { border-color: color-mix(in srgb, var(--st-bad) 50%, var(--line)); background: color-mix(in srgb, var(--st-bad) 8%, var(--panel)); }

/* Deal summary (a flip's Expenses tab) */
.deal { margin-bottom: 12px; }
.deal-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.deal-kpis > div { display: grid; gap: 1px; padding: 12px 16px; background: var(--panel); }
.deal-kpis small { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.deal-kpis b { font-size: 20px; font-variant-numeric: tabular-nums; }
.deal-kpis span { font-size: 11.5px; color: var(--muted); }
.deal-kpis .pos b { color: var(--st-good); }
.deal-kpis .neg b { color: var(--st-bad); }
.deal-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.deal-cols > div { padding: 12px 16px; }
.deal-cols > div + div { border-left: 1px solid var(--line); }
.deal-cols h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.deal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.deal-row b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-row small { color: var(--muted); font-size: 11.5px; }
.deal-row.strong { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 7px; }
.deal-row.strong b, .deal-row.strong span { font-weight: 650; }
.deal-row.muted { color: var(--muted); }
.deal-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 35%, var(--panel)); font-weight: 650; }
.deal-total small { font-weight: 400; color: var(--muted); font-size: 12px; }
.deal-total b { font-size: 18px; font-variant-numeric: tabular-nums; }
.deal-total .pos { color: var(--st-good); } .deal-total .neg { color: var(--st-bad); }
.deal-missing { margin: 0; padding: 8px 16px 12px; font-size: 12.5px; }
@media (max-width: 760px) {
  .deal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deal-cols { grid-template-columns: 1fr; }
  .deal-cols > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* A flip's expenses in columns: committed, needs approval, payable, paid */
.ec { min-width: 560px; }
.ec th { white-space: normal; vertical-align: bottom; }
.ec td.num { white-space: nowrap; }
.ec td:first-child { min-width: 150px; }
.ec-act { margin-top: 4px; }
.ec-act .btn { font-size: 12px; color: var(--text); }
.ec .ec-total th, .ec .ec-total td { background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel)); font-weight: 650; }
.ec .vgroup td:first-child { display: flex; align-items: center; gap: 6px; }
.ec .vgroup td { cursor: pointer; }
.ec .ec-item td:first-child { padding-left: 36px; }
.ec .ec-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ec td.ec-committed { color: #3a5f8f; }
html.dark .ec td.ec-committed { color: #8fb3e0; }
.ec td.ec-pending { color: var(--warn); }
.ec-note { margin: 0; padding: 10px 16px 14px; font-size: 12.5px; }
.pl-committed td, .pl-committed th { font-weight: 500; color: var(--muted); }

/* A rental's project */
.rt-project { margin-bottom: 12px; }
.rt-project-note { margin: 0; padding: 0 16px 12px; font-size: 12.5px; }
.rt-project-none { padding: 12px 16px 14px; display: grid; gap: 8px; justify-items: start; }
.rt-project-none p { margin: 0; }
.rt-project-matches { display: grid; gap: 6px; }
.rt-project-matches > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sow-props .sh-amt { width: 120px; text-align: right; }
.sow-props tfoot td { border-top: 1px solid var(--line); font-weight: 600; }
.sow-warn { padding: 8px 16px 12px; margin: 0; color: var(--st-warn, #a86b00); }
.split-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 4px 0 10px; background: var(--panel-2, rgba(127,127,127,.06)); }
.split-head { display: grid; gap: 2px; margin-bottom: 8px; font-size: 13px; }
.split-rows { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.split-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.split-row input { width: 130px; text-align: right; }
.split-row small { display: block; }
.split-total { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; font-weight: 600; }

/* ---- Reports: Overview, Project report, letterhead printing ------------------------------------
   Charts use the checked chart palette (--viz-*): money in / profit blue, money out / loss red; projected profit is
   the same blue, lighter, and the legend says so. Text stays in the text colors. */
.rp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rp-inv .rp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .rp-tiles, .rp-inv .rp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-tile { display: grid; gap: 2px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.rp-tile small { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rp-tile b { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rp-tile span { font-size: 12px; color: var(--muted); }
.rp-tile.pos b { color: var(--st-good); }
.rp-tile.neg b { color: var(--st-bad); }
.rp-tile.warn b { color: var(--warn); }
.rp-panel header .muted { font-size: 12.5px; }
.rp-chart { padding: 8px 10px 0; }
.rp-hbar { display: grid; gap: 4px; padding: 4px 4px 8px; }
.rp-hrow { display: grid; grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) 54px; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; border-radius: var(--r); }
.rp-hrow:hover { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.rp-hlab { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-htrack { position: relative; height: 14px; }
.rp-htrack i { position: absolute; top: 0; bottom: 0; }
.rp-zero { width: 1px; background: color-mix(in srgb, var(--muted) 50%, var(--line)); }
.rp-bar { border-radius: 3px; background: var(--viz-1); }
.rp-bar.neg { background: var(--viz-out); }
.rp-bar.proj { background: color-mix(in srgb, var(--viz-1) 45%, var(--panel)); }
.rp-bar.proj.neg { background: color-mix(in srgb, var(--viz-out) 45%, var(--panel)); }
.rp-bar.other { background: color-mix(in srgb, var(--viz-1) 60%, var(--panel)); }
.rp-hval { font-variant-numeric: tabular-nums; color: var(--text); }
.rp-chart .rp-val { fill: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; }
.rp-chart .rp-lab { fill: var(--text); }
.rp-chart .hit:hover { fill: color-mix(in srgb, var(--muted) 8%, transparent); }
.rp-tip { position: absolute; pointer-events: none; }
.lg-pos, .lg-proj { display: inline-block; flex: none; width: 12px; height: 8px; border-radius: 2px; }
.lg-pos { background: var(--viz-1); }
.lg-proj { background: color-mix(in srgb, var(--viz-1) 45%, var(--panel)); }
.rp-numbers { padding: 4px 14px 12px; font-size: 13px; }
.rp-numbers summary { cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 6px 0; }
.rp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .rp-two { grid-template-columns: 1fr; } }
.rp-hint { font-size: 12.5px; }
.rp-inv { padding: 16px; }
.rp-inv-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.rp-inv-head > div { flex: 1; min-width: 0; }
.rp-inv-head h1 { margin: 0 0 2px; font-size: 22px; }
.rp-inv-head p { margin: 0; }
.rp-cover { width: 260px; max-width: 40%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }
.rp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 16px; margin: 12px 0 0; }
.rp-facts dt { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rp-facts dd { margin: 0; font-weight: 500; }
.rp-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 4px 0 8px; }
.rp-progress > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: baseline; }
.rp-progress span { color: var(--muted); font-size: 12.5px; }
.rp-progress .rp-meter, .rp-progress small { grid-column: 1 / -1; }
.rp-progress small { color: var(--muted); font-size: 12px; }
.rp-meter { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rp-meter span { display: block; height: 100%; background: var(--viz-1); border-radius: 4px; }
.rp-sub { margin: 16px 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rp-foot { font-size: 12px; margin: 12px 0 0; }
.rp-table tfoot th { font-weight: 650; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .rp-inv-head { flex-direction: column; } .rp-cover { max-width: 100%; width: 100%; } .rp-progress { grid-template-columns: 1fr; } }

@media print {
  @page { margin: 0.5in; @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 9pt; color: #555; } }
  /* paper is white: the light colors, whatever theme the app is in */
  #print { --panel: #fff; --bg: #fff; --text: #111; --muted: #555; --line: #ccc; --accent-soft: #f2f2ee;
    --viz-in: #2a78d6; --viz-out: #e34948; --viz-1: #2a78d6; --viz-bal: #2b2d27; --st-good: #0a7d0a; --st-bad: #c0312f; --warn: #a15c07; }
  #print { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-doc { font-size: 10pt; }
  .rp-head { align-items: center; }
  .rp-logo { height: 0.75in; width: auto; }
  .rp-head .pr-right b { font-size: 13pt; }
  .rp-doc .panel { border: 0; background: none; padding: 0; margin: 0 0 14px; break-inside: auto; }
  .rp-doc .panel > header { display: flex; gap: 8px; align-items: baseline; padding: 0 0 4px; border: 0; }
  .rp-doc .panel > header h2 { margin: 0; }
  .rp-doc .table-wrap, .rp-doc .report-scroll { overflow: visible !important; max-height: none !important; }
  .rp-doc table { font-size: 9pt; }
  .rp-doc .rp-tiles { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .rp-doc .rp-inv .rp-tiles { grid-template-columns: repeat(4, 1fr); }
  .rp-doc .rp-tile { padding: 6px 8px; border: 1px solid #ccc; break-inside: avoid; }
  .rp-doc .rp-tile b { font-size: 14pt; }
  .rp-doc .rp-two { grid-template-columns: 1fr 1fr; }
  .rp-doc .rp-chart { break-inside: avoid; }
  .rp-doc .rp-numbers summary { display: none; }
  .rp-doc .rp-inv { padding: 0; }
  .rp-doc .rp-cover { width: 2.6in; }
  .rp-doc .over, .rp-doc .neg { color: #c0312f; }
  .rp-doc .pos { color: #0a7d0a; }
  .rp-page { break-before: page; }
  .rp-tx table { font-size: 8pt; table-layout: auto; }
  .rp-tx th, .rp-tx td { padding: 3px 4px; }
  .rp-tx td:first-child { white-space: nowrap; }
  .rp-doc table { width: 100%; max-width: 100%; }
  .rp-page h2 small { font-weight: 400; color: #555; font-size: 10pt; }
  .rp-cover-page { padding-top: 1.5in; }
  .rp-cover-page h1 { font-size: 26pt; }
  .rp-cover-page ol { margin: 18px 0; line-height: 1.8; font-size: 12pt; }
  .rp-doc .pl tr.sec td { font-weight: 600; padding-top: 8px; }
  .rp-doc .pl tr.total td { font-weight: 600; border-top: 1px solid #999; }
}

/* Files: Select, and the PDF made from the picked photos */
.pick-bar { position: sticky; top: 104px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 12px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--r); }
.file-picking .photo, .file-picking .row[data-pick-doc] { cursor: pointer; }
.file-picking .photo-mark { display: none; }
.photo.picked { outline: 3px solid var(--accent); outline-offset: -3px; }
.row.picked { background: var(--accent-soft); }
.pick-tick { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--muted); background: var(--panel); font-size: 12px; font-weight: 700; }
.photo .pick-tick { position: absolute; top: 8px; left: 8px; z-index: 1; border-color: #fff; background: rgba(0, 0, 0, .35); color: #fff; }
.pick-tick.on, .photo .pick-tick.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
@media print {
  .pp-cover h1 { font-size: 22pt; margin: 0.3in 0 6px; }
  .pp-cover h2 { font-size: 12pt; margin-top: 18px; }
  .pp-cover ol, .pp-cover ul { line-height: 1.6; }
  /* Photos fit the printable page, whatever its size, orientation and margins (in print, vh is the page's height),
     and a photo never splits across pages: each stays whole with its caption. */
  .pp-page { break-before: page; display: block; }
  .pp-page figure { margin: 0 0 0.15in; break-inside: avoid; page-break-inside: avoid; text-align: center; }
  .pp-page img { display: block; width: 100%; height: auto; object-fit: contain; break-inside: avoid; }
  .pp-page figcaption { font-size: 9pt; color: #333; margin-top: 3px; }
  .pp-1 img { max-height: calc(100vh - 0.5in); }
  .pp-2 img { max-height: calc(50vh - 0.5in); }
  .pp-4 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.15in; }
  .pp-4 img { max-height: calc(50vh - 0.5in); }
}

/* Scope of work: photos for the contractor */
.sow-ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 12px 14px 14px; }
.sow-ph { margin: 0; display: grid; gap: 6px; }
.sow-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.sow-ph .in { font-size: 13px; min-height: 32px; }
.sow-ph figcaption { font-size: 12.5px; color: var(--muted); }
.sow-ph-tools { display: flex; align-items: center; gap: 4px; }
.sow-ph-tools .icon-btn { width: 28px; height: 28px; font-size: 16px; }
@media print { .pp-2 h2 { margin-top: 0; } .pp-2 img { max-height: calc(50vh - 0.75in); } }

/* ---- Material (materials.js) ---- */
.mt-filters { flex-wrap: wrap; gap: 8px; }
.mt-filters #mtQ { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.mt-hint { padding: 12px 14px; margin-bottom: 12px; font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt-hint b { color: var(--text); }
.mt-thumb { width: 44px; height: 44px; flex: none; border-radius: var(--r); object-fit: cover; background: #fff; border: 1px solid var(--line); }
.mt-thumb.sm { width: 32px; height: 32px; }
.mt-ph { display: inline-grid; place-items: center; background: var(--bg); color: var(--muted); }
.mt-ph svg { width: 18px; height: 18px; }
.mt-row { align-items: flex-start; gap: 12px; }
.mt-row.mt-new { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mt-review { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mt-review .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mt-cell > span { display: grid; min-width: 0; }
.mt-cell b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-cell small { font-size: 12px; }
.mt-top td { vertical-align: middle; }
.mt-more { margin: 8px 14px 12px; }
.mt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.mt-grid .panel { margin: 0; }
@media (max-width: 900px) { .mt-grid { grid-template-columns: 1fr; } }
.mt-bars { display: grid; gap: 8px; padding: 12px 14px 14px; }
.mt-bar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.mt-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-track { height: 10px; border-radius: 4px; background: var(--line); overflow: hidden; }
.mt-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.mt-bar b { font-weight: 500; font-variant-numeric: tabular-nums; }
.mt-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 190px; padding: 12px 14px 10px; }
.mt-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; font-size: 11px; color: var(--muted); }
.mt-col i { align-self: end; display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); min-height: 0; }
.mt-colv { font-size: 10px; white-space: nowrap; overflow: hidden; }
.mt-col small { padding-top: 4px; }
.mt-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.mt-big { width: 96px; height: 96px; border-radius: var(--r); object-fit: cover; background: #fff; border: 1px solid var(--line); }
.mt-big.mt-ph svg { width: 32px; height: 32px; }
.mt-photo-tools { display: grid; gap: 6px; justify-items: start; }
.mt-facts { margin: 0; font-size: 13px; }
.mt-merge { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0; }
.mt-merge .field { flex: 1 1 280px; }
.mt-history h3, .mt-hist h3 { font-size: 13px; margin: 14px 0 6px; }
.mt-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.mt-lines { display: grid; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.mt-ltable { font-weight: 400; color: var(--text); }
.mt-ltable td { vertical-align: middle; padding: 4px 6px; }
.mt-ltable .in { height: 30px; width: 80px; text-align: right; }
.mt-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mt-add .mt-addq { flex: 1 1 260px; }
.mt-add .mt-addn { width: 80px; }
.mt-add .mt-addkit { width: auto; }
.mt-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.mt-note { font-size: 13px; margin: 6px 0; }
.pill.s-requested { background: #fdf0c8; color: #7a4d00; }
.pill.s-ordered { background: #e0ecf8; color: #1d4a7a; }
.tabs button .tag.warn { background: #fdf0c8; color: #7a4d00; }