/* Project Hub - the same tokens as the app and the website
   (navy #1a2b4a, blue #2c6fad, 8px cards, 6px controls, system type). */
:root {
  --navy: #1a2b4a; --blue: #2c6fad; --blue-dark: #21578a; --blue-wash: #e8f2fc;
  --ink: #1e2430; --ink-soft: #4d5665; --ink-faint: #6f7888;
  --line: #e3e8ef; --line-soft: #eef2f7; --paper: #fff; --paper-tint: #f6f8fb; --paper-deep: #dfe6ee;
  --green: #1a7a3c; --green-wash: #eaf7ee; --amber: #d4800a; --amber-wash: #fff4e0; --red: #c0392b; --red-wash: #fdecea;
  --gold: #a6820a; --gold-wash: #fbf3ce; --grey: #6b7380; --grey-wash: #f0f1f3;
  --shadow: 0 1px 4px rgba(0,0,0,.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--paper-tint); }
a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-dark); text-decoration: underline; }
button { font-family: inherit; }

.topbar { height: 56px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.brand { display: flex; align-items: center; gap: 12px; }
/* THE FIRM'S NAME IS THE HEADLINE. It is their Hub, shown to their own
   clients; the platform's name is a credit beside it. */
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand { min-width: 0; }
/* On a phone the firm's name keeps one line; the word "Hub" and the divider give way first. */
@media (max-width: 720px) { .brand-name { font-size: 15px; max-width: 46vw; } .brand-sep, .brand-sub { display: none; } }
.brand-by { color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .02em; }
@media (max-width: 720px) { .brand-by { display: none; } }
.brand-sep { width: 1px; height: 20px; background: rgba(255,255,255,.25); }
.brand-sub { color: rgba(255,255,255,.85); }
.topnav { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.topnav a { color: rgba(255,255,255,.85); } .topnav a.on { color: #fff; font-weight: 600; }
.topnav .who { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.topnav button { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 6px; height: 30px; padding: 0 10px; font-size: 12.5px; cursor: pointer; }

.main { max-width: 1440px; margin: 0 auto; }
.page-head { background: var(--paper); border-bottom: 1px solid var(--line); padding: 20px 28px 0; }
.crumbs { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 6px; }
.crumbs span { margin: 0 6px; }
h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: var(--navy); }
.sub { font-size: 13.5px; color: var(--ink-soft); }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.tabs { display: flex; gap: 28px; margin-top: 14px; }
.tab { padding: 12px 4px; font-size: 14px; font-weight: 600; color: var(--ink-soft); border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; }
.tab.on { color: var(--navy); border-bottom-color: var(--blue); }
.body { padding: 24px 28px; }
.card { background: var(--paper); border-radius: 8px; box-shadow: var(--shadow); }
.card-pad { padding: 20px 22px; }
h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--navy); }
h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
h3.warn { color: var(--amber); }
.muted { color: var(--ink-faint); font-size: 12.5px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--green-wash); color: var(--green); } .pill.warn { background: var(--amber-wash); color: var(--amber); }
.pill.open { background: var(--gold-wash); color: var(--gold); } .pill.closed { background: var(--grey-wash); color: var(--grey); }
.pill.blue { background: var(--blue-wash); color: var(--navy); } .pill.red { background: var(--red-wash); color: var(--red); }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid #c8ccd2; background: var(--paper); color: var(--ink); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
input[type=text], input[type=password] { height: 40px; border: 1px solid #c8ccd2; border-radius: 6px; padding: 0 12px; font-size: 14px; font-family: inherit; width: 100%; }
input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(44,111,173,.15); }
label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 6px; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .topbar, .page-head, .body { padding-left: 16px; padding-right: 16px; } .tabs { overflow-x: auto; } }
.stack { display: flex; flex-direction: column; gap: 16px; }
/* Two tiles of equal weight, full width - the submittal progress and the RFI
   table. minmax(0,1fr) rather than 1fr so a wide table inside shrinks with
   the column instead of pushing the grid past the page. */
.dash-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.dash-pair + .card { margin-top: 16px; }
@media (max-width: 900px) { .dash-pair { grid-template-columns: 1fr; } }

.rows .row { display: grid; gap: 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.rows .row.head { border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.rows.projects .row { grid-template-columns: 1.4fr 1fr 130px 1.2fr 110px; }
.rows.reports .row { grid-template-columns: 90px 1fr 170px 150px; }
/* No. | Subject | Needed by | With - the subject takes what is left */
.rows.rfis .row { grid-template-columns: 54px minmax(0, 1fr) 110px 120px; padding: 10px 0; }
/* Condition | Location | Assigned | Raised | Status - the leading 70px item
   number is gone: the report numbers action items by POSITION and the API
   returns storage order, so any number here could contradict the PDF. */
.rows.actions .row { grid-template-columns: 1fr 150px 160px 120px 130px; }
.rows a.big { font-weight: 700; font-size: 15px; }

table.plan { width: 100%; border-collapse: collapse; }
.plan th { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); text-align: center; padding: 8px 4px; }
.plan th:first-child { text-align: left; padding-left: 0; }
.plan td { height: 40px; text-align: center; border-top: 1px solid var(--line-soft); }
.plan td:first-child { text-align: left; font-weight: 600; }
.cell { display: inline-flex; width: 28px; height: 28px; border-radius: 6px; align-items: center; justify-content: center; font-size: 13px; }
.cell.done { background: var(--green-wash); color: var(--green); }
.cell.planned { background: var(--blue-wash); }
.cell.hold { background: var(--amber-wash); color: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber); }
.legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--ink-soft); align-items: center; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .cell { width: 18px; height: 18px; font-size: 11px; }
.hold-item { border-left: 3px solid var(--amber); padding: 2px 0 2px 12px; }
.hold-item b { display: block; }
.empty { padding: 28px; text-align: center; color: var(--ink-faint); }
.signin { max-width: 420px; margin: 60px auto; }
.signin .card-pad { padding: 28px; }
.err { color: var(--red); font-size: 12.5px; min-height: 16px; margin-top: 8px; }

/* ---- buckets: photographs, RFIs, filed documents ------------------------ */
/* The tab strip now carries seven buckets, so it scrolls sideways on a phone
   rather than wrapping into a second row that pushes the content down. */
.tabs { overflow-x: auto; scrollbar-width: thin; }
.tabs::-webkit-scrollbar { height: 4px; }
.tab { white-space: nowrap; }

.photo-grid {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.ph { margin: 0; }
/* The tile holds its shape before the bytes arrive, so a grid of photographs
   does not reflow line by line as they load in. */
.ph-img {
  aspect-ratio: 4 / 3; background: var(--panel, #f4f6f9);
  border: 1px solid var(--line, #dde3ea); border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-img.ph-missing::after { content: 'not available'; font-size: 11px; color: var(--muted, #7a8699); }
.ph figcaption { font-size: 11px; color: var(--muted, #7a8699); margin-top: 5px; line-height: 1.35; }

.rows.rfis .row { grid-template-columns: 70px 1fr 130px 120px 110px; }
.pill.rfi { background: #ede4fb; color: #5b3fa0; margin-left: 6px; }

/* ---- warranties, the protocol, maintenance and service life ------------- */
.proto { margin: 0; padding-left: 20px; }
.proto li { margin-bottom: 12px; padding-left: 4px; }
.proto li b { display: block; margin-bottom: 2px; }

.wgrid { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
      color: var(--muted, #7a8699); margin-bottom: 2px; }
.wsub { margin-top: 14px; }
.wsub ul { margin: 4px 0 0; padding-left: 18px; }
.wsub li { margin-bottom: 3px; }

/* Who to ring, laid out to be read standing up rather than scanned at a desk. */
.wcs { display: grid; gap: 10px; margin-top: 14px;
       grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wc { border: 1px solid var(--line, #dde3ea); border-radius: 6px; padding: 10px 12px; }
.wc-role { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
           color: var(--muted, #7a8699); margin-bottom: 3px; }
.wc b { display: block; }
.wc .muted { font-size: 12px; }

.rows.maint .row { grid-template-columns: 1.4fr 180px 1fr; }
.rows.mfound .row { grid-template-columns: 1.3fr 140px 1.6fr 120px; align-items: center; }
.rows.life .row { grid-template-columns: 1.2fr 180px 1fr; }
/* A warranty in force is good news; the amber "open" pill reads as a warning. */
.pill.ok { background: #e3f3e8; color: #256b3a; }

/* ---- the cover page: picture 3x3, weather to its left, address below ----- */
/* Four equal columns; the picture takes three and is square, so its height is
   three column-widths, and the weather tile spans the same three rows beside it.
   Capped in width so a wide monitor does not turn the square into a wall. */
/* Revised 2026-09-12 (Brian): address top left, the picture under it and 1.5in
   (144 CSS px) smaller than the 746px it measured, the weather on the right,
   the schedule across the bottom. */
/* The dashboard's top row: the rendering on the left, the map on the right,
   equal halves, each the same shape so neither reads as the more important.
   16/10 rather than square - a building and a street map are both wider than
   they are tall, and a square tile crops both badly. */
.dash-top { display: grid; gap: 16px; max-width: 1240px; align-items: start;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-bottom: 16px; }
.dash-pic { overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 16 / 10; }
.dash-img { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; }
.dash-radar { margin-top: 0; flex: 1; min-height: 0; aspect-ratio: auto; border-radius: 0; }
.dash-panel { max-width: 1240px; margin-bottom: 16px; }
.dash-say { padding: 0 12px 10px; }
.pick-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pick-err:not(:empty) { color: var(--red); font-size: 13px; margin-bottom: 8px; }
.pick-grp { margin-bottom: 14px; }
.pick-ph { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 0;
           cursor: pointer; overflow: hidden; display: flex; flex-direction: column; text-align: center; }
.pick-ph:hover { border-color: var(--navy); }
.pick-ph .ov-img { aspect-ratio: 4 / 3; }
.pick-ph span { padding: 4px; font-size: 12px; }
.ov-weather, .ov-schedule { max-width: 1240px; margin-bottom: 16px; }
.ov-img { flex: 1; min-height: 0; background: var(--paper-deep); }
.ov-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-cap { font-size: 12px; color: var(--ink-faint); padding: 8px 12px; border-top: 1px solid var(--line); }
.ov-img-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: 6px; padding: 24px; text-align: center; }
.ov-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ov-temp { font-size: 44px; font-weight: 700; line-height: 1.1; margin: 12px 0 4px; color: var(--navy); }
.ov-cond { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.ov-asof { margin-top: 12px; font-size: 12px; }
.ov-src { margin-top: 16px; font-size: 11px; }
/* The two top tiles stack only on a genuinely narrow screen - auto-fit does
   that on its own at 340px each, so there is nothing to override here. */

/* ---- weather: now, the 7-day strip, radar ---------------------------------- */
.ov-now { display: flex; gap: 18px; align-items: center; }
.ov-now .ov-temp { margin: 8px 0; }
.ov-sub { margin-top: 18px; }
.fc { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.fc-day { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
          padding: 8px 2px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.fc-t { font-weight: 600; white-space: nowrap; }
.fc-l { font-size: 11px; line-height: 1.2; }
.fc-rain { font-size: 11px; color: var(--blue-dark); font-weight: 600; }
.radar { position: relative; margin-top: 6px; border-radius: 6px; overflow: hidden; background: var(--paper-deep); aspect-ratio: 640 / 440; }
.radar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.radar-wx { opacity: .85; }
.radar-pin { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
             border-radius: 50%; background: var(--red); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.radar-off { display: none; }

/* ---- the construction schedule --------------------------------------------- */
.sch-head { align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.sch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.sch-msg { background: var(--green-wash); color: var(--green); border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
/* The tiles line up ACROSS the row: a label that wraps to two lines used to
   push its own value down, so "Adjusted by executed change orders" sat 16px
   lower than the tiles either side of it (Brian, 2026-09-22). The label keeps
   two lines' worth of room whether it needs it or not, and the tiles are wider
   so fewer labels wrap at all. */
.sch-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; margin-bottom: 8px; align-items: stretch; }
.sch-fact { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
/* two LINES of room, measured: the label is 11px on a 15.95px line, so two
   lines is 32px - "2.2em" of an 11px font is only 24px and still misaligned. */
.sch-fact .wl { display: block; line-height: 16px; min-height: 32px; }
.sch-fact b { font-size: 16px; }
.sch-fact .muted { font-size: 12px; }
.sch-h { margin: 22px 0 8px; }
.sch-scroll { overflow-x: auto; }
.sch-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sch-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint);
                font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sch-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.sch-table td .muted { font-size: 12px; }
.sch-empty { padding: 18px; }
.sch-empty .btn { margin-left: 8px; }
.sch-note { margin-top: 16px; font-size: 12px; }
.warn-t { color: var(--amber); }
.pill.ms-done { background: var(--green-wash); color: var(--green); }
.pill.ms-on-track { background: var(--blue-wash); color: var(--blue-dark); }
.pill.ms-late, .pill.ms-at-risk { background: var(--amber-wash); color: var(--amber); }
.pill.ms-overdue { background: var(--red-wash); color: var(--red); }
.pill.ms-undated { background: var(--grey-wash); color: var(--grey); }
.pill.ev-logged, .pill.ev-notice, .pill.ev-review { background: var(--amber-wash); color: var(--amber); }
.pill.ev-change-order { background: var(--blue-wash); color: var(--blue-dark); }
.pill.ev-no-time, .pill.ev-withdrawn { background: var(--grey-wash); color: var(--grey); }
.sch-form { border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin: 12px 0 4px; background: var(--paper-tint); }
.sch-form h3 { margin: 0 0 12px; }
.sch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.sch-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.sch-field input, .sch-field select, .sch-field textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sch-hint { font-size: 12px; margin: 4px 0 10px; }
.sch-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 10px; font-size: 13px; }
.sch-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.sch-form-actions .err { margin-right: auto; }
/* A date never breaks across lines ("Aug 10, / 2026" in the first render). */
.sch-table td:first-child { white-space: nowrap; }
.sch-table.ms td:first-child { white-space: normal; }

/* ---- project costs ---------------------------------------------------------
   Series colours are the validated categorical set (slots in fixed order,
   adjacent pairs checked for colour-vision separation). They carry identity
   only; every mark also has a written label, a legend and a table. */
.cs-1 { fill: #2a78d6; } .cs-2 { fill: #eda100; } .cs-3 { fill: #1baf7a; } .cs-4 { fill: #eb6834; }
.cb-1 { fill: #4a3aa7; stroke: #4a3aa7; } .cb-2 { fill: #e87ba4; stroke: #e87ba4; }
.cost-key b { color: var(--navy); }
.cost-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin: 14px 0 6px; }
.cost-chart { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.cost-chart h3 { margin: 0 0 10px; font-size: 14px; }
.cost-wide { grid-column: 1 / -1; }
.cost-chart-empty { padding: 18px 0; }
.cost-small { font-size: 12px; margin-top: 6px; }
.cost-bar { display: block; width: 100%; height: 28px; }
.cost-line { display: block; width: 100%; height: auto; }
.cost-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 8px; font-size: 12.5px; color: var(--ink-soft); }
.cl-item { display: inline-flex; align-items: center; gap: 6px; }
.cl-item b { color: var(--ink); }
.cl-key { width: 12px; height: 12px; flex: none; }
.cg-grid { stroke: var(--line); stroke-width: 1; }
.cg-tick { fill: var(--ink-faint); font-size: 11px; }
.cg-sub { font-size: 10px; }
.cg-lab { fill: var(--ink-soft); font-size: 11.5px; font-weight: 600; }
.cg-ref { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.cg-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.cg-dot { stroke: var(--paper); stroke-width: 2; }
.cg-hit { fill: transparent; }
.cg-pt:hover .cg-dot { stroke: var(--ink); }
.co-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) 1.4fr minmax(110px, auto); align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.co-bar { width: 100%; height: 14px; display: block; background: var(--line-soft); border-radius: 3px; }
.co-val { text-align: right; white-space: nowrap; }
.cost-ch-head { align-items: center; flex-wrap: wrap; gap: 8px; }
.cost-views { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid #c8ccd2; background: var(--paper); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cost-btns { display: flex; gap: 6px; }
.sch-table.ch td:nth-child(2) { min-width: 200px; }
.sch-table.pa td, .sch-table.ch td:nth-child(5), .sch-table.ch td:nth-child(6) { white-space: nowrap; }
.pill.chg-pending { background: var(--gold-wash); color: var(--gold); }
.pill.chg-disputed { background: var(--red-wash); color: var(--red); }
.pill.chg-executed { background: var(--blue-wash); color: var(--blue-dark); }
.pill.chg-declined, .pill.chg-withdrawn { background: var(--grey-wash); color: var(--grey); }
.pill.pay-submitted { background: var(--gold-wash); color: var(--gold); }
.pill.pay-certified { background: var(--blue-wash); color: var(--blue-dark); }
.pill.pay-paid { background: var(--green-wash); color: var(--green); }
.pill.pay-returned { background: var(--red-wash); color: var(--red); }
.cost-ws { border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 8px; padding: 16px 18px; margin-top: 16px; background: var(--paper-tint); }
.cost-ws h3 { margin: 0 0 12px; }
.ws-pos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 10px 0; }
.ws-pos > div { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; white-space: pre-wrap; }
.ws-items { display: flex; flex-direction: column; gap: 8px; }
.ws-item { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ws-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ws-text { white-space: pre-wrap; }
.cost-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .cost-charts { grid-template-columns: minmax(0, 1fr); } }
.cb-row { margin-bottom: 10px; }
.cb-label { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 4px; }
.cost-bar { height: 22px; }
.cost-chart h3 { text-transform: none; letter-spacing: 0; }

/* ---- the close-out package -------------------------------------------------
   The readiness list, then the package itself: 8.5x11 sheets on screen that
   print one to a page. The look follows the "Close-Out Package Cover" design
   canvas - a document of record, not a dashboard. */
.co-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.co-opt input[type="text"] { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; min-width: 190px; }
.co-opt .wl { display: inline; text-transform: uppercase; }
.co-secs { border-top: 1px solid var(--line); }
.co-sec { display: grid; grid-template-columns: 34px 1fr minmax(110px, auto) 96px; gap: 12px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.co-sec-no { font-size: 12px; font-weight: 700; color: var(--blue-dark); letter-spacing: .06em; padding-top: 2px; }
.co-sec-c { font-size: 12.5px; text-align: right; }
.co-missing { font-size: 12.5px; color: var(--amber); margin-top: 3px; }

.pkg-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 12px 28px; background: var(--paper); border-bottom: 1px solid var(--line); }
.pkg-bar-btns { display: flex; gap: 8px; }
.pkg { background: var(--paper-deep); padding: 24px 12px 40px; display: grid; gap: 22px; justify-items: center; }
.pkg-sheet { background: #fff; width: 100%; max-width: 8.5in; position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 32px -12px rgba(26,35,48,.25); container-type: inline-size; }
/* A SHEET IS AT LEAST A PAGE AND MAY BE MORE. 129.4cqw is 11in at an 8.5in
   width, so the page keeps its proportions at any preview size - and a
   section longer than one page GROWS instead of hiding its end, which is what
   a fixed height with overflow:hidden did. */
.pkg-in { min-height: 129.4cqw; padding: 7cqw 7.5cqw 6cqw; display: flex; flex-direction: column; }
.pkg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqw; }
.pkg-firm { font-family: Georgia, "Times New Roman", serif; font-size: 2.4cqw; color: var(--navy); }
.pkg-docid { text-align: right; font-size: 1.25cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.7; }
.pkg-docid b { color: #8a6a3b; font-weight: 600; }
.pkg-hero { margin: 5cqw 0 0; aspect-ratio: 16 / 9.2; background: #eef0ec; position: relative; }
.pkg-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4cqw 1.8cqw; font-size: 1.15cqw;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pkg-kicker { margin: 5cqw 0 0; font-size: 1.55cqw; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #8a6a3b; }
.pkg-h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 6.4cqw; line-height: 1.02; margin: 1.6cqw 0 0; color: var(--navy); }
.pkg-addr { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 2.05cqw; color: var(--ink-soft); margin: 1.2cqw 0 0; }
.pkg-facts { margin: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 5cqw; border-top: 1.5px solid var(--navy); padding-top: 2.4cqw; }
.pkg-facts-wide { margin: 3cqw 0 0; }
.pkg-fact { display: grid; grid-template-columns: 42% 1fr; gap: 1.5cqw; padding: .9cqw 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.pkg-fact dt { font-size: 1.1cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.pkg-fact dd { margin: 0; font-size: 1.6cqw; color: var(--ink); }
.pkg-scope { grid-column: 1 / -1; margin: 2.2cqw 0 0; font-size: 1.15cqw; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); display: flex; justify-content: space-between; gap: 2cqw; }
.pkg-toc-h { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 4.6cqw; margin: 0; color: var(--navy); }
.pkg-toc-sub { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.75cqw; color: var(--ink-soft); margin: .8cqw 0 0; }
.pkg-toc { list-style: none; margin: 4cqw 0 0; padding: 0; border-top: 1.5px solid var(--navy); }
.pkg-toc li { display: grid; grid-template-columns: 5cqw 1fr auto; align-items: baseline; gap: 0 1.2cqw; padding: 1.25cqw 0; border-bottom: 1px solid var(--line-soft); }
.pkg-toc .n { font-size: 1.35cqw; font-weight: 600; letter-spacing: .08em; color: #8a6a3b; }
.pkg-toc .t { font-family: Georgia, "Times New Roman", serif; font-size: 2.1cqw; }
.pkg-toc .p { font-size: 1.35cqw; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; }
.pkg-toc .d { grid-column: 2 / 4; font-size: 1.3cqw; color: var(--ink-faint); margin-top: .35cqw; }
.pkg-toc li.app .n { color: var(--ink-faint); }
.pkg-sec-no { font-size: 1.2cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #8a6a3b; margin: 0; }
.pkg-sec-h { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 4.2cqw; margin: 1cqw 0 0; color: var(--navy); }
.pkg-sec-sub { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.7cqw; color: var(--ink-soft); margin: .6cqw 0 2.6cqw; }
.pkg-h3 { font-size: 1.7cqw; margin: 2.4cqw 0 1cqw; color: var(--navy); }
.pkg-table { width: 100%; border-collapse: collapse; font-size: 1.35cqw; margin-bottom: 1.6cqw; }
.pkg-table th { text-align: left; font-size: 1.05cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--navy); padding: .8cqw .6cqw; }
.pkg-table td { padding: .7cqw .6cqw; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.pkg-table .plan { font-size: inherit; }
.pkg-note { font-size: 1.15cqw; line-height: 1.5; color: var(--ink-soft); margin: 1.6cqw 0 0; }
.pkg-sub { font-size: 1.3cqw; color: var(--ink-soft); margin: .6cqw 0 0; }
.pkg-empty { font-size: 1.5cqw; color: var(--ink-faint); font-style: italic; }
.pkg-stmt { font-size: 1.6cqw; line-height: 1.6; }
.pkg-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; margin: 5cqw 0 0; }
.pkg-sign-line { display: block; border-bottom: 1px solid var(--ink); height: 4cqw; }
.pkg-sign .wl { margin-top: .8cqw; }
.pkg-warr { margin-bottom: 2cqw; }
.pkg-foot { margin-top: auto; display: flex; justify-content: space-between; border-top: 1px solid var(--line);
  padding-top: 1.6cqw; font-size: 1.1cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

@media print {
  @page { size: letter; margin: 0; }
  body { background: #fff; }
  .topbar, .page-head, .pkg-bar { display: none !important; }
  .pkg { background: #fff; padding: 0; gap: 0; }
  .pkg-sheet { box-shadow: none; max-width: none; width: 8.5in; page-break-after: always; }
  /* a table never breaks with its header stranded on the page before */
  .pkg-table thead { display: table-header-group; }
  .pkg-table tr { page-break-inside: avoid; }
  .pkg-sheet:last-child { page-break-after: auto; }
}

.pkg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkg-hero-cap { background: linear-gradient(transparent, rgba(20,33,58,.8)); color: rgba(255,255,255,.9); }

/* ---- ask the project -------------------------------------------------------
   A question box and an answer whose every line names the record it came from
   and opens it. Deliberately plain: this is a record lookup, not a chat. */
.ask-sub { max-width: 60ch; margin-bottom: 14px; }
.ask-bar { display: flex; gap: 8px; }
.ask-bar input { flex: 1; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.ask-bar input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.ask-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ask-answer { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.ask-lead { font-size: 17px; line-height: 1.45; color: var(--navy); font-weight: 600; max-width: 70ch; }
.ask-none { font-weight: 400; color: var(--ink-soft); }
.ask-range { font-size: 12.5px; margin-top: 4px; }
.ask-group { margin-top: 16px; }
.ask-row { display: grid; grid-template-columns: 22px 1fr minmax(160px, auto); gap: 10px; align-items: baseline;
  padding: 8px 6px; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
a.ask-row:hover { background: var(--blue-wash); text-decoration: none; }
.ask-ico { color: var(--blue); font-size: 12px; }
.ask-what { min-width: 0; }
.ask-cite { font-size: 12.5px; text-align: right; }
.ask-more { font-size: 12.5px; margin-top: 10px; }

/* ---- places ----------------------------------------------------------------
   The building as its records describe it: a card per level, elevation or
   unit, with everything that happened there under it. */
.pl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.pl-filters .wl { display: inline; margin: 0 4px 0 10px; }
.pl-filters .wl:first-child { margin-left: 0; }
.pl-list { display: grid; gap: 12px; }
.pl-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.pl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pl-head-right { display: flex; align-items: center; gap: 8px; }
.pl-kinds { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; margin-top: 3px; }
.pl-kind { display: inline-flex; align-items: baseline; gap: 5px; }
.pl-items { margin-top: 8px; border-top: 1px solid var(--line-soft); }
.pl-items .ask-row:last-child { border-bottom: 0; }

/* ---- submittal review ------------------------------------------------------ */
.sb-comments { display: grid; gap: 8px; margin-top: 4px; }
.sb-comment { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.sb-no { font-weight: 700; color: var(--blue-dark); }
.sb-add { display: flex; gap: 8px; margin-top: 10px; }
.sb-add input { flex: 1; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.sch-table.sb td:first-child { white-space: normal; }

/* ---- RFI staging workspace ------------------------------------------------- */
.rf-question { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 6px; padding: 12px 14px; margin: 12px 0; white-space: pre-wrap; }
.rf-cands { display: grid; gap: 6px; margin-bottom: 10px; }
.rf-cand { display: grid; grid-template-columns: auto 20px 1fr; gap: 10px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; cursor: pointer; }
.rf-cand:hover { border-color: var(--blue); }
.rf-thread { display: grid; gap: 8px; }
.rf-msg { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.rf-msg-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }

/* the dashboard strip: cost and time, each tile linking to its own page */
.dash-strip { margin-bottom: 18px; }
a.dash-tile { color: inherit; text-decoration: none; }
a.dash-tile:hover { border-color: var(--blue); text-decoration: none; }

/* the Reports table gained an "at the office" column when the shelf landed */
.rows.reports .row { grid-template-columns: 90px 120px 1fr 150px 210px; }

/* reading a payment application: the checks list */
.pill.pr-ties { background: var(--green-wash); color: var(--green); }
.pill.pr-differs { background: var(--red-wash); color: var(--red); }
.pill.pr-unread { background: var(--grey-wash); color: var(--grey); }
.pr-checks { display: grid; gap: 6px; margin: 6px 0 10px; }
.pr-check { display: grid; grid-template-columns: 1fr minmax(160px, 260px); gap: 12px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.pr-ws .sch-scroll { max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) { .pr-check { grid-template-columns: 1fr; gap: 4px; } }

/* submittal comments: one shared list, pinned to what they are about */
.sb-thr-head { align-items: center; margin-top: 18px; }
.sb-threads { display: grid; gap: 12px; margin: 10px 0 16px; }
.sb-thread { border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; padding: 12px 14px; background: var(--paper); }
.sb-thread.sbt-include { border-left-color: var(--navy); }
.sb-thread.sbt-resolved, .sb-thread.sbt-withdrawn { border-left-color: var(--line); background: var(--paper-tint); }
.sb-thread-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.sb-about { font-weight: 700; }
.sb-post { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.sb-post:first-of-type { border-top: 0; }
.sb-post-by { font-size: 13px; margin-bottom: 3px; }
.sb-post-text { white-space: pre-wrap; }
.sb-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.sb-reply textarea { flex: 1; min-height: 38px; }
.sb-outcomes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.sb-wording { margin-top: 8px; }
.sb-compose { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 10px 0; background: var(--paper-tint); }
.sb-response { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.sb-resp-list { margin: 10px 0 0; padding-left: 22px; }
.sb-resp-list li { margin-bottom: 10px; }
.pill.sbo-open { background: var(--gold-wash); color: var(--gold); }
.pill.sbo-include { background: var(--blue-wash); color: var(--navy); }
.pill.sbo-resolved { background: var(--green-wash); color: var(--green); }
.pill.sbo-withdrawn { background: var(--grey-wash); color: var(--grey); }
.pill[class*="sbr-"] { background: var(--grey-wash); color: var(--grey); font-size: 11px; }
.pill.sbr-firm { background: var(--blue-wash); color: var(--navy); }
.pill.sbr-architect { background: #ede4fb; color: #5b3fa0; }
.pill.sbr-gc { background: var(--amber-wash); color: var(--amber); }
.pill.sbr-sub { background: var(--green-wash); color: var(--green); }
.pill.sbr-owner { background: var(--red-wash); color: var(--red); }
@media (max-width: 640px) { .sb-reply { flex-direction: column; align-items: stretch; } }

/* reading a submittal, and the review stamp */
.sb-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sb-readout { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 8px 0 14px; background: var(--paper-tint); }
.sb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; margin: 10px 0; }
.sb-fields .wl { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.sb-stamp { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.sb-stamp-picks { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.sb-pick { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; background: var(--paper); }
.sb-pick input { width: 16px; height: 16px; }

/* submittal progress on the dashboard */
.sp-rows { display: grid; gap: 10px; }
.sp-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.sp-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-row .pill { white-space: nowrap; }
.sp-parties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sp-party { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--grey); }
.sp-party.done { border-color: var(--green); color: var(--green); background: var(--green-wash); }
a.btn { text-decoration: none; display: inline-block; }

/* the project's specification sections */
.sb-specs { margin: 12px 0; }
.sp-types { display: grid; gap: 8px; margin: 10px 0; }
.sp-types .btn { text-align: left; }
.sp-list { display: grid; gap: 8px; margin-top: 12px; }
.sp-sec { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.sp-sec:last-child { border-bottom: 0; }

/* the contractor's schedule, read into the Hub */
.sd-card { margin: 14px 0; }
.sd-h { margin: 16px 0 6px; font-size: 14px; }
.sd-keys { margin-top: 10px; }
.sd-soon { display: grid; gap: 6px; }
.sd-soon-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.sd-gantt { margin-top: 6px; }
.sd-scale { position: relative; height: 18px; border-bottom: 1px solid var(--line); margin: 0 0 8px 34%; }
.sd-tick { position: absolute; top: 0; font-size: 11px; color: var(--grey); transform: translateX(-50%); white-space: nowrap; }
.sd-today { position: absolute; top: 0; bottom: -400px; width: 2px; background: var(--red); opacity: .55; }
.sd-scope { margin-bottom: 10px; }
.sd-scope-h { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--grey); margin: 8px 0 4px; }
.sd-lane { display: grid; grid-template-columns: 34% 1fr 96px; gap: 8px; align-items: center; padding: 2px 0; }
.sd-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-track { position: relative; height: 14px; background: var(--paper-tint); border-radius: 7px; }
.sd-bar { position: absolute; top: 2px; height: 10px; border-radius: 5px; background: var(--blue, #2a78d6); }
.sd-bar.done { background: var(--green); }
.sd-bar.late { background: var(--amber); }
.sd-when { font-size: 11px; text-align: right; }
@media (max-width: 640px) { .sd-lane { grid-template-columns: 1fr; } .sd-scale { margin-left: 0; } }

/* the project on one line, and the dated cash chart */
.tl-card { margin: 14px 0 18px; }
.tl-wrap { position: relative; margin: 18px 0 6px; }
.tl-track { position: relative; height: 10px; border-radius: 5px; background: var(--paper-deep); }
.tl-done { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px 0 0 5px; background: var(--blue-wash); }
.tl-mark { position: absolute; top: -4px; width: 12px; height: 18px; margin-left: -6px; border-radius: 3px; background: var(--navy); }
.tl-mark.tl-forecast { background: var(--paper); border: 2px solid var(--amber); }
.tl-today { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--red); }
.tl-labels { position: relative; height: 112px; margin-top: 8px; }
.tl-label { position: absolute; transform: translateX(-50%); text-align: center; width: 130px; font-size: 11px; line-height: 1.25; }
.tl-label b { display: block; font-size: 12px; }
.tl-label span { color: var(--grey); }
.tl-label.tl-row1 { top: 38px; }
.tl-label.tl-row2 { top: 76px; }
.tl-label.tl-start { transform: none; text-align: left; }
.tl-label.tl-end { transform: translateX(-100%); text-align: right; }
.tl-label.tl-forecast b { color: var(--amber); }
.tl-legend { margin-top: 2px; }
.tl-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--navy); }
.tl-key.tl-forecast { background: var(--paper); border: 2px solid var(--amber); }
.tl-key.tl-key-today { width: 3px; height: 14px; border-radius: 0; background: var(--red); }
.cg-vref { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .6; }
.cg-vlab { fill: var(--navy); font-size: 11px; }
@media (max-width: 640px) { .tl-labels { height: 130px; } .tl-label { width: 96px; } }

/* ---- long-run options (the VE comparison) ---------------------------------- */
.ve-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ve-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.ve-yrs { font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.ve-yrs input { width: 64px; margin: 0 4px; }
.ve-scroll { overflow-x: auto; }
.ve-tbl { width: 100%; border-collapse: collapse; min-width: 960px; }
.ve-tbl th, .ve-tbl td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--line); }
.ve-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.ve-tbl tbody th { font-weight: 600; white-space: nowrap; }
.ve-calc { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ve-pair { display: flex; gap: 4px; margin-bottom: 3px; }
.ve-in { width: 100%; min-width: 60px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13px; }
.ve-num .ve-in { text-align: right; font-variant-numeric: tabular-nums; }
.ve-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.ve-actions .ok { color: var(--green, #256b3a); font-size: 13px; }
.ve-note { font-size: 12px; line-height: 1.6; }
.ve-note + .ve-note { margin-top: 10px; }

/* ---- the staged submittal review (the skill's own output shape) ------------ */
.sb-staged { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; }
.sb-staged-note { font-size: 12px; line-height: 1.6; }
.sb-staged-list { margin: 12px 0; }
.sb-staged-list .muted { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.sb-json-head { margin-top: 14px; }
.sb-json { background: var(--paper-deep); border: 1px solid var(--line); border-radius: 6px;
           padding: 12px; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre;
           max-height: 320px; overflow-y: auto; margin: 6px 0 10px; }
.ve-gen { font-size: 12px; white-space: nowrap; }
.ve-base { font-size: 11px; font-weight: 400; margin-top: 2px; }
.ve-lib { font-size: 12.5px; }
.ve-watch { margin: 0; padding-left: 16px; }
.ve-watch li { margin: 1px 0; }

/* ---- setting a project up from its documents ------------------------------- */
.dash-setup { margin-bottom: 16px; max-width: 1240px; }
.dash-setup.thin { border-left: 3px solid var(--navy); }
.onb { max-width: 1240px; margin-bottom: 16px; }
.onb-note { font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }
.onb-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.onb-docs { list-style: none; margin: 0 0 12px; padding: 0; }
.onb-docs li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.onb-scroll { overflow-x: auto; }
.onb-tbl { width: 100%; border-collapse: collapse; min-width: 820px; }
.onb-tbl th, .onb-tbl td { text-align: left; vertical-align: top; padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.onb-tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.onb-grp th { background: var(--tint, var(--paper-deep)); font-size: 12px; text-transform: uppercase;
              letter-spacing: .04em; color: var(--ink-faint); padding-top: 12px; }
.onb-tick { width: 40px; }
.onb-in { width: 100%; min-width: 140px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13px; }
.onb-src { font-size: 12px; max-width: 420px; }
.onb-ex { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
.onb-clash td, .onb-clash th { background: #fdf6e3; }
.onb-clash-note { color: #8a5a00; font-size: 12px; margin-top: 3px; }
.onb-missing { font-size: 12px; margin: 10px 0; }
.onb-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; margin: 8px 0; }
.onb-sec { font-size: 13px; }
.onb-opt { display: block; margin: 10px 0; font-size: 14px; }

/* ---- the coordinated reply: a part per discipline, drafted then finalized --- */
.co-block { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 18px 0; }
.co-note { font-size: 12px; line-height: 1.6; }
.co-invite { background: #eef4fd; border-left: 3px solid var(--navy); padding: 8px 12px; margin: 10px 0; font-size: 13px; }
.co-final { background: var(--green-wash, #e3f3e8); border-left: 3px solid var(--green, #256b3a);
            padding: 8px 12px; margin: 10px 0; font-size: 13px; }
.co-reopen { background: #fdf0d5; border-left: 3px solid #8a5a00; padding: 8px 12px; margin: 10px 0; font-size: 13px; }
.co-parts { display: grid; gap: 10px; margin: 14px 0; }
.co-part { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.co-part.co-ready { border-left: 3px solid var(--green, #256b3a); }
.co-part.co-drafting { border-left: 3px solid #8a5a00; }
.co-part.co-na { border-left: 3px solid var(--line); }
.co-part-head { align-items: flex-start; gap: 10px; }
.co-part-right { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.co-pill-ready { background: var(--green-wash, #e3f3e8); color: var(--green, #256b3a); }
.co-pill-drafting { background: #fdf0d5; color: #8a5a00; }
.co-in { width: 100%; margin-top: 8px; padding: 7px 8px; border: 1px solid var(--line);
         border-radius: 5px; font: inherit; font-size: 13.5px; resize: vertical; }
.co-part-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; font-size: 12px; }
.co-part-foot select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 12.5px; }
.co-text { margin-top: 8px; font-size: 13.5px; white-space: pre-wrap; }
.co-blockers { background: var(--paper-deep); border-radius: 6px; padding: 10px 12px; margin: 12px 0; font-size: 13px; }
.co-blockers ul { margin: 6px 0; padding-left: 18px; }
.co-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 12px 0; }
.co-thread { border-left: 3px solid var(--line); }
.co-thread-open { border-left-color: #8a5a00; }
.co-post { margin: 6px 0; font-size: 13.5px; }
.co-compose { border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin-top: 10px; }

/* ---- the executive summary of a submittal review --------------------------- */
.xs-block { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; }
.xs-head { font-size: 15px; line-height: 1.55; margin-bottom: 12px; }
.xs-alarm { background: var(--paper-deep); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }
.xs-alarm ul { margin: 6px 0; padding-left: 18px; }
.xs-bad { color: var(--red, #b32828); }
.xs-ve { color: #8a5a00; }
.xs-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 12px; }
.xs-cols ul { margin: 6px 0; padding-left: 18px; }
.xs-cols li { margin: 3px 0; font-size: 13.5px; }
.xs-ok::marker { content: '\2713  '; }
.xs-miss::marker { content: '\2014  '; }
.xs-cond { border-left: 3px solid var(--navy); padding: 8px 12px; margin-bottom: 12px; }
.xs-cond ul { margin: 6px 0; padding-left: 18px; font-size: 13.5px; }
.xs-actions ol { margin: 6px 0; padding-left: 20px; }
.xs-actions li { margin: 4px 0; font-size: 13.5px; }
.xs-note { font-size: 12px; line-height: 1.6; margin-top: 12px; }
.xs-bem { border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px; }
.xs-bem-ok { background: var(--green-wash, #e3f3e8); border-left: 3px solid var(--green, #256b3a); }
.xs-bem-bad { background: #fdf0d5; border-left: 3px solid #8a5a00; }
.xs-bem-none { background: var(--paper-deep); border-left: 3px solid var(--line); }
.xs-bem div { margin-top: 5px; }
.xs-bem-note { font-size: 11.5px; line-height: 1.55; }

/* The contract-document register: one row per document, its versions folded
   underneath. The version list is indented and ruled so a superseded issue
   reads as part of its document's history rather than as another document. */
.doc-row { border-top: 1px solid var(--line-soft); padding: 12px 16px; }
.doc-row:first-child { border-top: 0; }
.doc-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; }
.doc-vers { margin: 10px 0 2px 0; border-left: 2px solid var(--line-soft); padding-left: 14px; }
.doc-ver { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 12px; align-items: center; padding: 8px 0; }
.doc-ver + .doc-ver { border-top: 1px solid var(--line-soft); }
@media (max-width: 760px) {
  .doc-main, .doc-ver { grid-template-columns: 1fr; gap: 6px; }
}

/* The value-engineering block is always drawn now, so it needs to read as a
   section with a control rather than as an alarm that is firing. The compare
   panel sits under it, ruled off: it is an input, not a finding. */
.xs-ve-block .head-row { margin-bottom: 8px; }
.xs-ve-block li .btn.sm { margin-left: 6px; }
.xs-cmp { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.xs-cmp .sch-grid { margin-bottom: 8px; }

/* The response check. Each discipline's part gets its own list, so a reader
   knows whose wording a finding is about. */
.cf-block .cf-part { margin-bottom: 10px; }
.cf-block .cf-part ul { margin: 4px 0 0 0; }

/* A file input a LABEL drives must stay RENDERED. `hidden` (display:none)
   takes it out of the layout, and an unrendered form control is exactly the
   case where a browser may decline to open the file dialog - the press then
   does nothing and there is nothing on screen to explain why. Clipped to a
   pixel instead: invisible, still rendered, still focusable from the
   keyboard, and the label works. */
.vis-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- the shared project page (Hub v1, 2026-10-03) ---- */
.share-from { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6b7280); margin-bottom: 6px; }
.body.share { max-width: 880px; }
.share-sec { margin-bottom: 16px; }
.share-sec h2 { font-size: 17px; margin: 0 0 10px; }
.share-item { border-top: 1px solid var(--line, #e5e7eb); padding: 12px 0; }
.share-item:first-of-type { border-top: 0; padding-top: 2px; }
.share-item-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.share-cond { font-weight: 600; }
.share-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.share-ph { width: 168px; height: 126px; border-radius: 8px; overflow: hidden; background: #f1f3f6; }
.share-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-row { padding: 6px 0; }
.share-note { margin: 6px 2px 30px; font-size: 12.5px; line-height: 1.5; }
.share-box { margin: 10px 0 4px; }
.share-box h3 { margin: 0 0 6px; }
.share-link-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.share-link-row input { flex: 1 1 320px; min-width: 0; }
@media (max-width: 640px) { .share-ph { width: calc(50% - 4px); height: 110px; } }

/* The firm's own mark in the header, where the vendor's used to be. Capped in
   height so a tall logo cannot push the bar open, and left at its natural
   width so a wide lockup is not squashed. */
.brand-logo { height: 26px; width: auto; max-width: 180px; display: block; }

/* Setting the firm's own mark. A quiet row under the page heading - it is
   done once, not every day. */
.brand-set { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.brand-set .muted { font-size: 12px; }
.btn.small { padding: 4px 10px; font-size: 12px; }

/* The admin page. Dense on purpose - it is a control panel, not a dashboard;
   everything that can be done to somebody is on one row with them. */
.adm-msg { min-height: 20px; margin-bottom: 10px; color: var(--ink-2, #475569); font-size: 13px; }
.adm-msg code { font-size: 12px; word-break: break-all; }
.rows.adm-people .row { grid-template-columns: 2fr 1fr 1fr auto; }
.rows.adm-grants .row { grid-template-columns: 2fr 1fr auto; }
.rows.adm-invites .row { grid-template-columns: 2fr 1fr auto; }
.rows.adm-hist .row { grid-template-columns: 170px 1fr; }
.adm-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.adm-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.adm-mod { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.adm-mod input { margin-top: 2px; }

/* The firm settings page: a form, not a dashboard. Rows of people, lists of
   companies, one Save. */
.firm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.firm-grid textarea, .firm-grid input { width: 100%; box-sizing: border-box; }
.firm-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.firm-row { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr 1fr auto; gap: 6px; align-items: center; }
#st-rows .firm-row { grid-template-columns: 1.4fr 1fr 1.4fr 1fr auto; }
.firm-row input { width: 100%; box-sizing: border-box; min-width: 0; }
.firm-save { display: flex; align-items: center; gap: 14px; margin: 8px 0 24px; }
@media (max-width: 720px) { .firm-row, #st-rows .firm-row { grid-template-columns: 1fr 1fr; } }

/* Open action items on the dashboard: three columns, like the RFI table beside it. */
.rows.dash-actions .row { grid-template-columns: 2fr 1fr 1fr; }

/* The window testing summary. Facts first, failures next, every test last;
   it prints as the executive summary it is. */
.tst-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 14px; }
.tst-facts > div { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px 14px; min-width: 110px; }
.tst-facts b { display: block; font-size: 22px; }
.tst-facts span { color: var(--muted, #64748b); font-size: 12px; }
.tst-facts .bad b { color: #b42318; }
.tst-meta > div { margin: 4px 0; }
.tst-meta .wl, .tst-fail .wl { display: inline-block; min-width: 130px; color: var(--muted, #64748b); font-size: 12px; }
.tst-fail, .tst-unit { border-top: 1px solid var(--line-soft); padding: 12px 0; }
.tst-fail-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.tst-retest { margin-top: 6px; font-style: italic; }
.rows.tst-rows .row { grid-template-columns: 1fr 1fr 0.8fr 0.8fr 2.4fr; }
.tst-note { margin: 10px 2px 24px; font-size: 12px; }
@media print {
  .topbar, .tabs, #tst-print { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* Tidying: the project's own actions, quiet, under its header; Hide on a report row or photograph. */
.tidy-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.tidy-bar #pt-form { flex-basis: 100%; }
.ph figcaption .tidy-hide { margin-left: 6px; padding: 1px 6px; font-size: 11px; }
.rows.reports .row .tidy-hide { margin-top: 4px; }

/* Photographs within a visit, filed by checklist item. */
.ph-item { margin-top: 12px; }
.ph-item > .wl { font-weight: 600; margin-bottom: 6px; }

/* Waiting for you: projects from reports, not yet in the Hub. */
.waiting { border-left: 3px solid #b7791f; margin-top: 12px; }
.waiting .row-w { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }

/* The firm's project list: eight columns, two rows on a phone. */
.firm-row.pj-row { grid-template-columns: 1.6fr 1.4fr 1fr 0.5fr 0.6fr 1fr 1fr 1fr auto; }
@media (max-width: 720px) { .firm-row.pj-row { grid-template-columns: 1fr 1fr; } }

/* The Firm page's tabs. */
.firm-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line-soft); margin: 4px 0 12px; }
.firm-tabbtn { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; color: var(--muted, #64748b); cursor: pointer; }
.firm-tabbtn.on { color: inherit; border-bottom-color: currentColor; font-weight: 600; }
.firm-tab[hidden] { display: none; }

/* Quick links at the top of the dashboard. */
.dash-links { margin-bottom: 12px; }
.dash-links-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* New project: start from the drawing set. */
.np-pdf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.np-pdf #np-pdf-pic { flex-basis: 100%; }
.np-pic { max-width: 320px; max-height: 200px; border-radius: 6px; border: 1px solid var(--line-soft); display: block; margin-top: 6px; }

/* ---- My Work, owners and the bell (2026-10-07) ------------------------------
   Quiet, large type and generous space: one thing per line, the date doing
   the shouting only when it is late. System fonts; no new colours beyond
   the blue the Hub already uses and one red for overdue. */
.topnav .nav-me { position: relative; margin-right: 10px; }
.topnav .badge { position: absolute; top: -7px; right: -13px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: #ff3b30; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--navy); }
.topnav .badge[hidden] { display: none; }

.me { max-width: 1180px; margin: 0 auto; padding: 0 28px 64px; }
.me-hero { padding: 48px 0 28px; }
.me-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-faint); margin-bottom: 6px; }
.me-h { font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -.025em; color: #1d1d1f; margin: 0; }
.me-lede { font-size: 19px; line-height: 1.45; color: #6e6e73; margin: 10px 0 0; max-width: 640px; }
.me-viewing { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.me-viewing label { margin: 0; font-weight: 500; color: var(--ink-faint); }
.me-viewing select { height: 34px; border-radius: 8px; border: 1px solid #d2d2d7; padding: 0 10px; font: inherit; background: #fff; }
.me-sec { margin-bottom: 36px; }
.me-sh { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: #1d1d1f; margin: 0 0 14px; text-transform: none; }
.me-shn { font-size: 13px; font-weight: 400; color: var(--ink-faint); margin-left: 6px; }
.me-sh-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.me-sh-row .me-sh { margin: 0; }
.me-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
@media (max-width: 960px) { .me-grid { grid-template-columns: 1fr; } .me-h { font-size: 32px; } .me-hero { padding-top: 32px; } }
.me-skel { height: 76px; border-radius: 16px; background: linear-gradient(90deg, #eef0f3 0%, #f6f7f9 50%, #eef0f3 100%); background-size: 200% 100%; animation: me-shimmer 1.4s infinite; margin-bottom: 12px; }
@keyframes me-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .me-skel { animation: none; } }

/* resume cards */
.resume { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.resume-c { scroll-snap-align: start; display: block; background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.resume-c:hover { text-decoration: none; color: inherit; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.09); }
.resume-p { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-t { font-size: 17px; font-weight: 600; color: #1d1d1f; margin: 4px 0 10px; }
.resume-a { font-size: 12px; color: #0071e3; }

/* segmented filter */
.segs { display: inline-flex; background: #e8e8ed; border-radius: 10px; padding: 3px; gap: 2px; }
.seg { border: 0; background: transparent; height: 30px; padding: 0 13px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500; color: #1d1d1f; cursor: pointer; }
.seg.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg-n { color: var(--ink-faint); font-weight: 400; margin-left: 2px; }

/* the work list */
.wk-list { background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05); overflow: hidden; }
.wk { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border-top: 1px solid #f0f0f3; }
.wk:first-child { border-top: 0; }
.wk.late { background: linear-gradient(90deg, rgba(255,59,48,.05), transparent 40%); }
.wk-glyph { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.k-action { background: linear-gradient(135deg, #ff9f0a, #ff7a00); }
.k-rfi { background: linear-gradient(135deg, #5e5ce6, #3d3bd1); }
.k-submittal { background: linear-gradient(135deg, #30b0c7, #0a84a8); }
.k-review { background: linear-gradient(135deg, #8e8e93, #636366); }
.wk-t { font-size: 16px; font-weight: 600; color: #1d1d1f; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-m { font-size: 13px; color: var(--ink-faint); margin-top: 3px; }
.wk-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tool { font-size: 12px; font-weight: 500; color: #0071e3; background: #f0f6fe; border-radius: 999px; padding: 4px 11px; }
.tool:hover { text-decoration: none; background: #e0edfc; }
.wk-side { display: flex; align-items: center; gap: 10px; }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
a.btn { text-decoration: none; justify-content: center; } a.btn:hover { text-decoration: none; }
.btn.ghost { background: transparent; border-color: transparent; color: #0071e3; }
.wk-done { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #c7c7cc; background: #fff; cursor: pointer; position: relative; transition: all .2s ease; }
.wk-done:hover { border-color: #34c759; }
.wk-done.ticked { background: #34c759; border-color: #34c759; }
.wk-done.ticked::after { content: ''; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.due { font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: #f2f2f7; color: #3a3a3c; }
.due.late { background: #fff0ef; color: #d70015; }
.due.soon { background: #fff7e6; color: #b25000; }
@media (max-width: 640px) { .wk { grid-template-columns: 36px 1fr; } .wk-glyph { width: 36px; height: 36px; border-radius: 10px; } .wk-side { grid-column: 2; } }

.me-empty { text-align: center; padding: 56px 24px; background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05); }
.me-empty.sm { padding: 40px 24px; }
.me-empty-t { font-size: 21px; font-weight: 600; color: #1d1d1f; letter-spacing: -.01em; }
.me-empty-s { font-size: 15px; color: #6e6e73; margin-top: 6px; }

/* the side column */
.me-aside .panel { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05); margin-bottom: 20px; }
.me-aside .me-sh { font-size: 17px; }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dot-n { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px; background: #ff3b30; color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; padding: 0 6px; vertical-align: 2px; }
.link-btn { border: 0; background: none; color: #0071e3; font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.nt-list { margin: 0 -10px; }
.nt { display: block; padding: 11px 10px 11px 22px; border-radius: 12px; color: inherit; position: relative; }
.nt:hover { background: #f5f5f7; text-decoration: none; color: inherit; }
.nt.unread::before { content: ''; position: absolute; left: 8px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: #0071e3; }
.nt-h { font-size: 12px; color: var(--ink-faint); }
.nt-t { font-size: 14px; color: #1d1d1f; font-weight: 500; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt.unread .nt-t { font-weight: 600; }
.nt-a { font-size: 12px; color: #8e8e93; }
.nt-a .bad { color: #d70015; }
.nt-empty { padding: 4px 0 2px; line-height: 1.5; }
.lead-link { display: block; padding: 8px 0; border-top: 1px solid #f0f0f3; font-size: 14px; }
.lead-link:first-of-type { border-top: 0; }

/* the iOS-style switch */
.tgl { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #f0f0f3; margin: 0; font-size: 14px; font-weight: 400; color: #1d1d1f; cursor: pointer; }
.tgl:first-of-type { border-top: 0; }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl-ui { flex: none; width: 46px; height: 28px; border-radius: 14px; background: #e9e9eb; position: relative; transition: background .2s ease; }
.tgl-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s ease; }
.tgl input:checked + .tgl-ui { background: #34c759; }
.tgl input:checked + .tgl-ui::after { transform: translateX(18px); }
.tgl input:focus-visible + .tgl-ui { box-shadow: 0 0 0 3px rgba(0,113,227,.35); }

/* owner chips on the lists */
.av { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #6e8efb, #4a6cf7); color: #fff; font-size: 10px; font-weight: 700; flex: none; }
.av.lg { width: 36px; height: 36px; font-size: 13px; }
.own-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid #e3e3e8; background: #fff; font: inherit; font-size: 12.5px; font-weight: 500; color: #1d1d1f; cursor: pointer; white-space: nowrap; transition: border-color .15s ease, box-shadow .15s ease; }
.own-chip:hover { border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0,113,227,.12); }
.own-chip.empty { padding: 0 12px; color: #0071e3; border-style: dashed; border-color: #b9d4f5; }
.own-plus { font-size: 15px; line-height: 1; margin-right: -2px; }
.own-due { font-size: 11.5px; color: var(--ink-faint); }
.own-due.late { color: #d70015; font-weight: 600; } .own-due.soon { color: #b25000; }
.rows.actions .row { grid-template-columns: 1fr 140px 150px 100px 110px 150px; }
.co-secs.owned .co-sec { grid-template-columns: 34px 1fr minmax(110px, auto) auto 150px; }
@media (max-width: 760px) { .co-secs.owned .co-sec { grid-template-columns: 34px 1fr; } }
.lead-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 12px; padding: 10px 16px; margin: 0 0 14px; box-shadow: var(--shadow); font-size: 13.5px; }
.lead-k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }

/* the sheet */
.sheet-back { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 16px; animation: sheet-fade .18s ease; }
.sheet { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 22px; padding: 28px 28px 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28); animation: sheet-up .26s cubic-bezier(.2,.9,.3,1.1); }
@keyframes sheet-fade { from { opacity: 0; } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .sheet-back, .sheet { animation: none; } }
.sheet-eyebrow { font-size: 12.5px; color: var(--ink-faint); }
.sheet-t { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #1d1d1f; margin: 2px 0 4px; }
.sheet-sub { font-size: 14.5px; color: #6e6e73; line-height: 1.45; }
.sheet-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 10px; }
.people { display: grid; gap: 6px; max-height: 260px; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.person { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1.5px solid transparent; background: #f5f5f7; font: inherit; cursor: pointer; }
.person .av { grid-row: 1 / span 2; }
.person-n { font-size: 14.5px; font-weight: 600; color: #1d1d1f; }
.person-e { font-size: 12px; color: var(--ink-faint); }
.person:hover { background: #ececf0; }
.person.on { background: #f0f6fe; border-color: #0071e3; }
.sheet-due { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sheet-due input[type=date] { height: 38px; border: 1px solid #d2d2d7; border-radius: 10px; padding: 0 10px; font: inherit; }
.sheet-due .seg { background: #f5f5f7; height: 34px; }
.sheet-due .seg:hover { background: #ececf0; }
.sheet-note { font-size: 13px; color: var(--ink-faint); margin-top: 18px; }
.sheet-err { color: #d70015; font-size: 13.5px; min-height: 18px; margin-top: 8px; }
.sheet-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sheet-actions .grow { flex: 1; }
.sheet .btn { height: 40px; border-radius: 10px; padding: 0 18px; font-size: 14px; }
.sheet .btn.primary { background: #0071e3; border-color: #0071e3; }
.sheet .btn.primary:disabled { opacity: .6; }
.me-grid > *, .me-sec, .me-col { min-width: 0; }
@media (max-width: 640px) {
  .me { padding: 0 16px 48px; }
  .topbar { padding: 0 14px; }
  .topnav { gap: 12px; font-size: 12.5px; }
  .topnav a[href="#/options"] { display: none; }
}

.topnav a { white-space: nowrap; }
a.btn { line-height: 1; }

/* ---- the register (2026-10-07) ---- */
.reg { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.reg-h { font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: #1d1d1f; margin: 0 0 2px; }
.reg-add { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.reg-add input { height: 42px; border: 1px solid #d2d2d7; border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14.5px; flex: 1 1 320px; min-width: 0; background: #fff; }
.reg-add input.reg-no { flex: 0 0 110px; }
.reg-add input:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.15); }
.reg-add .btn { height: 42px; border-radius: 12px; padding: 0 20px; background: #0071e3; border-color: #0071e3; }
.reg-list { margin-top: 8px; }
.reg-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 170px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.reg-no-c { font-weight: 700; color: var(--navy); font-size: 13.5px; }
.reg-t { font-size: 15px; font-weight: 600; } .reg-t a { color: #1d1d1f; } .reg-t a:hover { color: #0071e3; }
.reg-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reg-docs .tool { border: 0; cursor: pointer; font-family: inherit; }
.reg-empty { padding: 14px 0 4px; }
@media (max-width: 640px) { .reg-row { grid-template-columns: 1fr; gap: 6px; } }
.in-pick { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.in-pick select { height: 32px; border-radius: 8px; border: 1px solid #d2d2d7; padding: 0 8px; font: inherit; font-size: 13px; background: #fff; max-width: 100%; }
.reg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.reg-row { grid-template-columns: 72px minmax(0, 1fr) 190px; }
.reg-resp { margin-top: 18px; padding: 20px 22px; border-radius: 16px; background: #f5f5f7; }
.reg-resp textarea { background: #fff; }
.pp-msg { padding: 8px 28px 0; min-height: 18px; }
@media print { .pp-msg { display: none; } }

.np-pdf .btn + .btn { margin-left: 6px; }
input.from-cover { background: #f0f6fe; border-color: #9cc3f5; }
.np-team { margin-top: 10px; font-size: 13px; line-height: 1.6; }
.np-team b { font-weight: 600; margin-right: 6px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 8px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid #ececf0; }
.team-row.ours { border-color: #b9d4f5; background: #f0f6fe; }
.team-mark { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #e8e8ed; color: #3a3a3c; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.team-logo { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #ececf0; }
.team-logo img { max-width: 32px; max-height: 32px; }
.team-role { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.team-name { font-size: 13.5px; font-weight: 600; color: #1d1d1f; }
.steps { display: flex; align-items: center; gap: 0; margin-top: 10px; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 6px; }
.step-dot { width: 9px; height: 9px; border-radius: 50%; background: #d2d2d7; flex: none; }
.step.done .step-dot { background: #34c759; }
.step.now .step-dot { background: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.15); }
.step-t { font-size: 12.5px; font-weight: 600; color: #0071e3; white-space: nowrap; }
.step-line { width: 22px; height: 2px; background: #e5e5ea; margin: 0 6px; flex: none; }
.wk-issues { margin: 8px 0 0; padding: 0; list-style: none; }
.wk-issues li { position: relative; padding-left: 16px; font-size: 13px; color: #b25000; line-height: 1.45; }
.wk-issues li::before { content: ''; position: absolute; left: 3px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #ff9f0a; }
.team-logo.plain { border: 0; background: transparent; }
.team-logo.has-logo { background: #fff; border: 1px solid #ececf0; }
.team-logo .team-mark { width: 36px; height: 36px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
.cl-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }

.team-logo.has-logo { width: 84px; height: 40px; padding: 3px 6px; }
.team-logo.has-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hdr-ask input { height: 36px; width: 260px; border: 1px solid #d2d2d7; border-radius: 999px; padding: 0 14px 0 34px; font: inherit; font-size: 13.5px; background: #f5f5f7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.4'><circle cx='11' cy='11' r='7'/><path d='m20 20-4-4'/></svg>") no-repeat 12px center; }
.hdr-ask input:focus { outline: none; background-color: #fff; border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.15); width: 340px; }
@media (max-width: 760px) { .hdr-ask input, .hdr-ask input:focus { width: 100%; } .head-actions { width: 100%; } .hdr-ask { flex: 1; } }
/* ---- the pin board (2026-10-08) ---- */
.pinb { margin: 22px 0; padding: 18px 20px; border-radius: 16px; background: #fbfbfd; border: 1px solid #ececf0; }
.pinb-head { align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.pin-list { display: grid; gap: 10px; margin-top: 10px; }
.pin { background: #fff; border: 1px solid #e5e5ea; border-left: 4px solid #0071e3; border-radius: 12px; padding: 12px 14px; }
.pin.conflict { border-left-color: #ff9f0a; }
.pin.settled { opacity: .62; border-left-color: #c7c7cc; }
.pin-top { display: flex; align-items: center; gap: 8px; }
.pin-kind { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #0071e3; }
.pin.conflict .pin-kind { color: #b25000; }
.pin-t { font-size: 15px; font-weight: 600; color: #1d1d1f; margin-top: 3px; }
.pin-note { font-size: 13.5px; color: #424245; margin-top: 4px; white-space: pre-wrap; }
.pin-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.pin-ref { font-size: 12.5px; background: #f2f2f7; border-radius: 8px; padding: 4px 9px; color: #1d1d1f; }
.pin-vs { font-size: 11px; font-weight: 700; color: #b25000; text-transform: uppercase; }
.pin-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 12.5px; }
.pin-foot .grow { flex: 1; }
.pin-for { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--ink-faint); }
.pin-d { background: #f0f6fe; color: #0060c0; border-radius: 999px; padding: 2px 8px; font-weight: 600; }
.pin-empty { padding: 4px 0; }
.pin-form { background: #fff; border: 1px solid #e5e5ea; border-radius: 14px; padding: 16px; margin: 10px 0; display: grid; gap: 10px; }
.pin-lbl { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.pin-refrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 170px; gap: 8px; }
.pin-refrow select, .pin-refrow input { height: 36px; border: 1px solid #d2d2d7; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px; min-width: 0; }
@media (max-width: 760px) { .pin-refrow { grid-template-columns: 1fr; } }
.pin-ds { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tab-more { position: relative; }
.tab-more > summary { list-style: none; cursor: pointer; display: inline-block; }
.tab-more > summary::-webkit-details-marker { display: none; }
.tab-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05); }
.tab-item { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: #1d1d1f; }
.tab-item:hover { background: #f5f5f7; text-decoration: none; color: #1d1d1f; }
.tab-item.on { color: #0071e3; font-weight: 600; }
.tabs { flex-wrap: wrap; row-gap: 0; }

.tabs { overflow: visible; }
/* the firm's submittal stamp (Firm page) */
.stamp-set { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.stamp-prev { width: 240px; min-height: 90px; border: 1px dashed var(--line, #d6dbe3); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 10px; background: #fff; }
.stamp-prev img { max-width: 100%; max-height: 120px; }
/* the Hub's site-photo drop */
.sp-drop { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sp-drop .sp-desc { flex: 1 1 260px; }
.sp-drop .sp-desc input { width: 100%; }
/* Egnyte: the documents bar, folder browser and the to-confirm list */
.eg-browse { margin-top: 10px; border: 1px solid var(--line, #e3e6eb); border-radius: 8px; padding: 10px; }
.eg-path { margin-bottom: 6px; }
.eg-dir { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 4px; cursor: pointer; border-radius: 6px; }
.eg-dir:hover { background: var(--grey-wash, #f2f3f5); }
.eg-wait { display: grid; grid-template-columns: 1fr 180px auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line, #e3e6eb); }
@media (max-width: 640px) { .eg-wait { grid-template-columns: 1fr; } }
/* Egnyte filing rules (Firm page) */
.eg-piece { font-size: 12px; background: var(--grey-wash, #f2f3f5); padding: 1px 5px; border-radius: 4px; }
.eg-rule { border-top: 1px solid var(--line, #e3e6eb); padding: 12px 0; }
.eg-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.eg-rule-grid input { width: 100%; }
.eg-prev { margin-top: 6px; font-size: 13px; word-break: break-all; }
.eg-filed { margin-top: 10px; font-size: 13px; }
@media (max-width: 640px) { .eg-rule-grid { grid-template-columns: 1fr; } }
/* the project team strip and picker */
.team-bar { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.team-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--grey-wash, #f2f3f5); font-size: 13px; }
.team-pick { cursor: pointer; }
.team-pick input { margin-right: 8px; }
.eg-watch { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.eg-watch code { font-size: 12px; }
.eg-search { display: flex; gap: 8px; margin-bottom: 8px; }
.eg-search input { flex: 1; }
.eg-row { display: flex; align-items: center; }
.eg-row .eg-dir { flex: 1; }
.eg-hide { font-size: 12px; opacity: .7; }
.eg-hidden { margin-top: 8px; font-size: 13px; }