/* Koddis One — one token set. Nothing below invents a colour or a size. */

/* The hidden attribute must win over any display value. Without this a component given
   display:flex ignores el.hidden entirely — which is how an empty selection bar sat above
   every register as a thin maroon strip. */
[hidden] { display: none !important; }

:root {
  /* ------------------------------------------------------------------ Procore
     Read off Koddis's live Procore on 21 Sep 2026, not from memory. The brief is that this
     must LOOK like Procore, so the primary action is Procore's orange and a reference is a
     blue underlined link — not the Koddis maroon, which now does what it does in Procore:
     nothing but the company's own mark. To put maroon back, change --action and --link here
     and nothing else moves. */
  --action:        #F35A21;   /* the orange every primary button and quick-create uses */
  --action-deep:   #D64409;
  --link:          #0F5FA6;   /* every reference, title and cross-reference */
  --bar:           #14141C;   /* the near-black top bar */

  /* Identity. The Koddis maroon is the mark alone and has no token here, because a token is
     an invitation: every time one existed, the brand found its way back onto a status, a
     hover or a focus ring. It lives in the logo file. */

  /* Ink and paper. The ink carries a warm cast so it sits under the maroon rather than fighting it. */
  --ink:           #16141A;
  --ink-2:         #2A262F;
  --ink-3:         #4A4551;
  --text:          #1C1A20;
  --text-2:        #5C5762;
  --text-3:        #8A8492;

  --paper:         #FAFAF8;
  --surface:       #FFFFFF;
  --grey-1:        #F2F2F2;   /* Koddis */
  --grey-2:        #D9D9D9;   /* Koddis */
  --line:          #E4E2E0;
  --line-strong:   #C9C6C3;

  /* States. Deliberately not maroon: status must never be confused with brand. */
  --ok:            #1F6F4A;
  --ok-wash:       #ECF5F0;
  --open:          #A8640A;
  --open-wash:     #FBF3E7;
  --late:          #B3261E;
  --late-wash:     #FBEDEC;
  --draft:         #6B6B72;
  --draft-wash:    #F1F1F2;
  /* Claimable: money that can go on the next application without waiting for approval.
     Deliberately not the amber used for "pending" — a reader has to tell at a glance which
     variations they can invoice today and which they are still chasing. */
  --claim:         #1A5E8A;
  --claim-wash:    #EAF2F8;

  /* Type */
  --ui:   Inter, "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-micro: 11px;
  --t-small: 12px;
  --t-body:  13px;
  --t-lead:  15px;
  --t-h2:    17px;
  --t-h1:    22px;

  /* Space — a 4px grid, named so layouts stop inventing numbers. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --rail:   224px;
  --radius: 5px;
  --shadow: 0 1px 2px rgba(22,20,26,.06), 0 4px 16px rgba(22,20,26,.06);
}

/* No dark mode. Procore has none, and the brief is to match Procore: a person on a dark
   Mac sees the same white screens as everyone else. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: var(--t-body)/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* The focus ring is Procore's blue. It was the brand maroon, so anybody working the screens
   from the keyboard — which is how a site manager fills a form on a laptop — saw the brand on
   every field they touched. The walk reads computed colours and never looked at an outline
   (found by hand as the contract administrator, 22 Sep 2026); it does now. */
:focus-visible { outline: 2px solid #1D5CC9; outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- app frame */
/* minmax(0, 1fr), not auto: an auto column takes the bar's max-content width, so at 390px the
   bar was 608px wide and the page scrolled sideways — every picker's flex-shrink was ignored
   because the container was never short of room. */
.app { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100%; }


/* ------------------------------------------------------------------- layout */
/* The bar, then the page, then Procore's footer strip. The page takes the height. */
.frame { display: flex; flex-direction: column; min-height: 0; }
.main { flex: 1 1 auto; }

.main { min-width: 0; overflow: auto; padding: var(--s5) var(--s6) var(--s7); }
.main > * { max-width: 1180px; }
.main .wide { max-width: none; }

/* -------------------------------------------------------------------- heads */
.page-head { margin-bottom: var(--s5); }
.eyebrow {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-3); font-weight: 600; margin-bottom: var(--s2);
}
h1 { font-size: var(--t-h1); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 var(--s2); font-weight: 600; }
h2 { font-size: var(--t-h2); letter-spacing: -.01em; margin: var(--s6) 0 var(--s3); font-weight: 600; }
.sub { color: var(--text-2); font-size: var(--t-lead); margin: 0; }

.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.scroller > .register { min-width: 560px; }

/* ---------------------------------------------------- the register (signature) */
.register { width: 100%; border-collapse: collapse; background: var(--surface);
            border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.register thead th {
  text-align: left; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); font-weight: 600; padding: var(--s2) var(--s4);
  background: var(--grey-1); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
.register td { padding: 7px var(--s4); border-bottom: 1px solid var(--line); vertical-align: baseline; }
.register td .tiny { margin-top: 1px; }
.register tbody tr:last-child td { border-bottom: 0; }
.register tbody tr { cursor: pointer; }
.register tbody tr:hover td { background: #F4F5F6; }

/* the reference: mono, tabular, carrying the same optical weight as the title */
.ref {
  font-family: var(--mono); font-size: var(--t-small); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap;
}
.num { font-variant-numeric: tabular-nums; }
.money { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.title { font-weight: 500; }
.muted { color: var(--text-2); }
.tiny { font-size: var(--t-small); color: var(--text-2); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* the 4px status edge — the thing you scan */
.register td.edge { padding-left: 0; }
.edge-bar { display: inline-block; width: 3px; height: 15px; border-radius: 2px; vertical-align: -3px; margin-right: var(--s3); }
.e-ok { background: var(--ok); } .e-open { background: var(--open); }
.e-late { background: var(--late); } .e-draft { background: var(--draft); }

.pill {
  display: inline-block; font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px var(--s2); border-radius: 3px; white-space: nowrap;
}
.p-ok { background: var(--ok-wash); color: var(--ok); }
.p-open { background: var(--open-wash); color: var(--open); }
.p-late { background: var(--late-wash); color: var(--late); }
.p-draft { background: var(--draft-wash); color: var(--draft); }
.p-claim { background: var(--claim-wash); color: var(--claim); }
.e-claim { background: var(--claim); }

details.more { margin-top: var(--s3); }
details.more > summary {
  cursor: pointer; font-size: var(--t-small); color: var(--text-2); list-style: none;
  padding: var(--s2) 0; user-select: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before {
  content: '\25b8'; color: var(--text-3); display: inline-block;
  width: 14px; font-size: 9px; vertical-align: 1px;
}
details.more[open] > summary::before { content: '\25be'; }
details.more > summary:hover { color: var(--text); }

/* -------------------------------------------------------------------- bits */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.card .k { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); font-weight: 600; }
.card .v { font-size: var(--t-h1); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: var(--s1); }

.toolbar { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s4); flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

input[type=text], input[type=search], input[type=email], input[type=password], select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px var(--s3);
}
input::placeholder { color: var(--text-3); }

.btn {
  font: inherit; font-size: var(--t-body); font-weight: 500; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  padding: 7px var(--s4); border-radius: var(--radius);
}
.btn:hover { background: var(--grey-1); }
.btn-primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-deep); }
.btn-quiet { border-color: transparent; background: none; color: var(--text-2); }
.btn-quiet:hover { background: var(--grey-1); color: var(--text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: var(--s7) var(--s5); text-align: center; color: var(--text-2); background: var(--surface);
}
.empty strong { display: block; color: var(--text); font-size: var(--t-lead); margin-bottom: var(--s2); font-weight: 600; }
/* A refusal and a wrong address are screens like any other. Both were appended straight to
   the frame with no page inset, so they came out edge to edge and jammed against the top bar
   while every real screen sits 16px in (found by hand, 22 Sep 2026). */
.main > .empty { margin: 8px 16px 16px; }

.notice { padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: var(--t-body); margin-bottom: var(--s4); }
.notice-bad  { background: var(--late-wash); color: var(--late); border: 1px solid #F0CFCC; }
.notice-ok   { background: var(--ok-wash); color: var(--ok); border: 1px solid #CDE6DA; }
/* An advisory is not an error. Something needs attention; nothing has gone wrong. */
.notice-warn { background: var(--open-wash); color: var(--open); border: 1px solid #F0DFC0; }

/* two-column record page: facts left, history right */
.record { display: grid; grid-template-columns: 1fr 320px; gap: var(--s6); align-items: start; }
.facts { width: 100%; border-collapse: collapse; }
.facts th {
  text-align: left; font-weight: 500; color: var(--text-2); font-size: var(--t-small);
  padding: var(--s2) var(--s4) var(--s2) 0; width: 190px; vertical-align: baseline;
  border-bottom: 1px solid var(--line);
  /* A table cell's width is a suggestion: put anything wide in the value column and the label
     column collapses and wraps every label onto three lines. min-width is what actually holds. */
  min-width: 190px;
}
.facts td { padding: var(--s2) 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }

.history { border-left: 2px solid var(--line); padding-left: var(--s4); }
.history li { list-style: none; margin-bottom: var(--s4); position: relative; }
/* A root cause runs to a paragraph. Left to the window it set as one line 1,300px wide, which
   is past the measure anybody reads comfortably. */
.history li > .tiny { max-width: 80ch; }
.history ul { margin: 0; padding: 0; }
.history li::before {
  content: ''; position: absolute; left: calc(-1 * var(--s4) - 5px); top: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
}
.history .when { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 600; }

/* sign in */
/* ------------------------------------------------------------------ sign in
   Measured off login.procore.com, 21 Sep 2026 (fresh profile, 1440x900). Left pane 395px,
   padding 0 60px, contents centred vertically; form 275px; logo 275 wide; H1 18px/700
   #343739 margin 15px 0 20px; label 12px; input 275x44 Arial 14px, 1px #C3C2C2, radius 2px,
   padding 1px 8px; Continue 275x39 #FF5100 Arial 16px radius 2px margin 30px 0; links 13px
   #1E519F; footer absolute, 30px off the bottom. Procore's inputs and buttons are Arial while
   everything else is Inter — that is what it measures, so that is what this is. */
.signin { display: flex; height: 100vh; font: 13px/13px var(--ui); color: #000; background: #fff; }
.signin-left {
  position: relative; flex: 0 0 395px; width: 395px; padding: 0 60px; background: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.signin-form { width: 275px; text-align: center; }
.signin-logo { display: block; width: 180px; height: auto; margin: 0 auto; }
.signin-form h1 { font-size: 18px; font-weight: 700; line-height: 18px; color: #343739; margin: 15px 0 20px; }
.signin-field { display: block; margin: 0 0 10px; text-align: left; }
.signin-field label { display: block; font-size: 12px; font-weight: 400; color: #000; line-height: 12px; }
.signin-field input[type=email], .signin-field input[type=password], .signin-field input[type=text] {
  display: block; width: 275px; height: 44px; margin: 4px 0; padding: 1px 8px;
  font: 14px Arial, sans-serif; color: #000; background: #fff;
  border: 1px solid #C3C2C2; border-radius: 2px; box-shadow: none;
}
.signin-field input:focus { outline: none; border-color: #FF5100; }
.signin-field .caps { height: 13px; line-height: 13px; font-size: 13px; color: #B3261E; }
.signin-field .caps[hidden] { display: block !important; visibility: hidden; }
.signin-field .hint { font-size: 12px; line-height: 16px; color: #676767; margin-top: 4px; }
.signin-email { display: flex; align-items: center; height: 44px; margin: 4px 0; padding: 0 0 0 8px; }
.signin-email span { flex: 1; font: 14px Arial, sans-serif; }
.signin-email b { font-size: 12px; font-weight: 700; color: #676767; padding: 0 10px; cursor: pointer; }
.signin-email b:hover { color: #000; text-decoration: underline; }
.signin-pw { position: relative; }
.signin-pw input { padding-right: 33px !important; }
.signin-pw .eye {
  position: absolute; right: 0; top: 4px; width: 36px; height: 44px; border: 0; background: none; cursor: pointer;
  color: #676767;
}
.signin-pw .eye::before {
  content: ''; display: block; width: 18px; height: 18px; margin: 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4-10.5 7C3 15 7 19 12 19s9-4 10.5-7C21 9 17 5 12 5zm0 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5 0-9 4-10.5 7C3 15 7 19 12 19s9-4 10.5-7C21 9 17 5 12 5zm0 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.signin-pw .eye.on { color: #000; }
.signin-remember {
  display: flex; align-items: center; gap: 0; font-size: 12px; line-height: 13px; color: #000;
  text-align: left; margin: 0 0 10px; cursor: pointer;
}
.signin-remember input { width: 13px; height: 13px; margin: 3px 3px 3px 4px; }
.signin-continue {
  display: block; width: 275px; height: 39px; margin: 30px 0; padding: 10px 25px;
  font: 16px Arial, sans-serif; color: #fff; background: #FF5100; border: 0; border-radius: 2px;
  cursor: pointer; text-align: center;
}
.signin-continue:hover { background: #E64900; }
.signin-form.step2 .signin-continue { margin: 1px 0 24px; }
/* Procore's two login links sit on one line either side of a rule. Fixed widths copied from
   its stylesheet broke ours onto two lines, because our words are not its words: "Trouble
   logging in?" does not fit in 70px. The row is centred and each link sized by its text. */
.signin-links { display: flex; justify-content: center; align-items: center; gap: 6px;
  font-size: 13px; line-height: 18px; }
.signin-links a { color: #1E519F; text-decoration: none; white-space: nowrap; }
.signin-links a:hover { text-decoration: underline; }
.signin-links .divider { color: #000; }
.signin-flash {
  margin: 0 0 15px; padding: 10px; text-align: left; font-size: 12px; line-height: 16px;
  color: #232729; background: #FDECEA; border-left: 3px solid #B3261E;
}
.signin-foot {
  position: absolute; left: 0; bottom: 0; width: 395px; margin: 0 0 30px; text-align: center;
  font-size: 13px; line-height: 13px;
}
.signin-foot a { color: #1E519F; text-decoration: none; }
.signin-foot a:hover { text-decoration: underline; }
.signin-right {
  flex: 1; min-width: 0; position: relative; display: flex; align-items: center;
  background: #FF5100;
  background-image: linear-gradient(160deg, #FF6A1F 0%, #FF5100 45%, #E84300 100%);
  color: #000;
}
.signin-content { width: 450px; margin-left: 48px; }
.signin-content .brow { font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 15px; }
.signin-content .headline { font-size: 44px; font-weight: 700; line-height: 48px; margin-bottom: 25px; letter-spacing: -.01em; }
.signin-content .body-copy { font-size: 20px; font-weight: 400; line-height: 28px; }
@media (max-width: 760px) {
  .signin-right { display: none; }
  .signin-left { flex: 1; width: auto; }
}

/* ------------------------------------------------------------------ forms */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(22,20,26,.44);
  display: grid; place-items: start center; padding: 6vh var(--s4) var(--s4); overflow: auto;
}
.sheet {
  width: 100%; max-width: 560px; background: var(--surface); color: var(--text);
  border-radius: 8px; box-shadow: 0 24px 64px rgba(22,20,26,.28); overflow: hidden;
}
.sheet header {
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
}
.sheet header h3 { margin: 0; font-size: var(--t-h2); font-weight: 600; letter-spacing: -.01em; }
.sheet header p { margin: var(--s1) 0 0; font-size: var(--t-small); color: var(--text-2); }
/* One field to a row. The record page's read-only grid is three columns and is also called
   .fields, and being written later in this file it was silently laying every sheet out in
   thirds: "Under investigation" arrived in a 160px control that ellipsised it, and every other
   short field in every sheet in the application sat in a third of a row. A sheet that wants two
   fields side by side asks for it with .field-row. */
.sheet .fields {
  padding: var(--s4) var(--s5); display: grid; gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}
.sheet footer {
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line); background: var(--grey-1);
  display: flex; gap: var(--s2); justify-content: flex-end;
}
.field > label { display: block; font-size: var(--t-small); font-weight: 500; margin-bottom: var(--s1); }
.field input, .field select, .field textarea { width: 100%; }
.field textarea { min-height: 96px; resize: vertical; font: inherit; }
.field .hint { font-size: var(--t-small); color: var(--text-3); margin-top: var(--s1); }
/* A tickbox and its question read as one sentence, so the field takes the whole row rather
   than a third of it. Inside a three-column grid the box, the label and the hint were each
   being given a narrow column of their own and every one of them wrapped. */
.field.wide { grid-column: 1 / -1; }
.field.inline {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s2); align-items: start;
}
.field.inline input { width: auto; margin-top: 3px; }
.field.inline > label { margin: 0; }
.field.inline .hint { grid-column: 2; margin-top: 2px; }
/* An email being checked before it goes, shown as it will arrive. The white ground and the
   border are the sheet of paper; the message brings its own Arial 11 with it. */
.rich {
  width: 100%; min-height: 140px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3) var(--s4);
}
.rich:focus { outline: 2px solid #1D5CC9; outline-offset: -1px; }
.rich table { border-collapse: collapse; }
/* The padlock on a private record's row. Quiet: it is a fact about the row, not a warning. */
.lock { color: var(--text-3); display: inline-flex; vertical-align: middle; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.sheet .notice { margin: 0 var(--s5) var(--s4); }
/* What the numbers you have typed come to, sitting where you look last — immediately above
   the button that commits them. */
.form-readout {
  margin: 0 var(--s5) var(--s4); padding: var(--s3) var(--s4);
  background: var(--grey-1); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--t-body); display: flex; justify-content: space-between; gap: var(--s3);
}
.form-readout strong { font-variant-numeric: tabular-nums; }

.actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.page-head + .actions { margin-top: calc(-1 * var(--s3)); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--s5); z-index: 80;
  background: var(--ink); color: #fff; padding: var(--s3) var(--s5); border-radius: var(--radius);
  font-size: var(--t-body); box-shadow: var(--shadow); max-width: 90vw;
}


}

/* =========================================================================
   Responsive overrides.

   These live at the END on purpose. CSS at equal specificity is decided by
   order, and when a component's own rules are written below its media query
   the override silently loses — which is exactly what happened to the
   notification button: it kept its full width on a phone because .bell was
   defined further down the file than the rule meant to shrink it.
   ========================================================================= */





@media (max-width: 720px) {
  .main > * { max-width: 100%; }
  h1 { font-size: 21px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .main { padding: var(--s4); }
}

@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

@media (max-width: 1100px) { .record { grid-template-columns: 1fr; } }




/* ----------------------------------------------------------- budget forecast
   A forecast to complete is either something the system worked out or something a person
   decided. Those are different kinds of number and the screen has to say which, or nobody
   can tell whether a figure is a calculation or a commercial judgement. Procore marks the
   automatic ones with a lightning bolt and drops the mark once you type over the value;
   the same distinction is drawn here. */
.auto-mark {
  /* A quiet hint that a figure worked itself out, not a status and not the brand. */
  margin-right: 5px; font-size: .85em; color: #6A767C;
  opacity: .75; cursor: help; vertical-align: 1px;
}
/* Typed by a person: stated plainly. Automatic: present but quieter, because it will move
   on its own the next time an order lands. */
.money .typed { font-weight: 600; color: var(--ink); }
.money .muted { color: var(--ink-3); }

td.editable { cursor: pointer; }
td.editable:hover { background: #F4F5F6; box-shadow: inset 0 0 0 1px #75838A; }
td.editable:focus-visible { outline: 2px solid #1D5CC9; outline-offset: -2px; }

/* An action that belongs inside a table row rather than above the table. */
.btn-small { padding: 3px var(--s3); font-size: var(--t-small); }

/* ================================================================ register
   The controls Procore puts above every register. They sit on one line and stay there: the
   count and the search are read together, and a toolbar that wraps to two rows pushes the
   table below the fold on a laptop. */
.reg-bar {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3); flex-wrap: wrap;
}
.reg-search {
  flex: 1 1 220px; min-width: 0;          /* a flex item's min-width is its CONTENT width */
  padding: 6px var(--s3); font: inherit; font-size: var(--t-small);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.reg-search:focus-visible, .reg-filter:focus-visible { outline: 2px solid #1D5CC9; outline-offset: -1px; }
.reg-filter {
  padding: 6px var(--s2); font: inherit; font-size: var(--t-small);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--text); max-width: 200px;
}
.reg-count { font-size: var(--t-small); color: var(--text-2); white-space: nowrap; }
.reg-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* Sorting is a button, not a click handler on a th: it has to be reachable from the keyboard
   and announce itself, because a register is the screen people live in. */
.reg-sort {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.reg-sort:hover { color: #000; }
.reg-sort i { font-style: normal; font-size: 9px; color: #232729; }
.money .reg-sort { justify-content: flex-end; width: 100%; }

.reg-cols { position: relative; }
.reg-cols summary {
  list-style: none; cursor: pointer; font-size: var(--t-small);
  padding: 5px var(--s3); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); user-select: none;
}
.reg-cols summary::-webkit-details-marker { display: none; }
.reg-cols[open] summary { border-color: #1D5CC9; color: #1D5CC9; }
.reg-cols-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20,16,22,.14); padding: var(--s2);
}
.reg-cols-menu label {
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px var(--s2); font-size: var(--t-small); border-radius: 4px; cursor: pointer;
}
.reg-cols-menu label:hover { background: #F4F5F6; }

@media (max-width: 700px) {
  .reg-right { margin-left: 0; width: 100%; }
}

/* A group heading inside a register. Not clickable, and it must not pick up the row hover. */
.register tbody tr.reg-group { cursor: default; }
.register tbody tr.reg-group td { background: var(--grey-1); padding: 5px var(--s4); }
.register tbody tr.reg-group:hover td { background: var(--grey-1); }

/* ---------------------------------------------------------------------- photos
   A contact sheet, not a list of filenames. The tile is sized so a phone photograph in
   either orientation fills it without distortion (object-fit: cover), because a site
   photograph that has been squashed is evidence somebody will argue about. */
.photo-grid {
  display: grid; gap: var(--s4); margin-top: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.photo {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--grey-1);
}
.photo-missing {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  padding: var(--s4); text-align: center; background: var(--grey-1);
  color: var(--text-3); font-size: var(--t-small);
}
.photo figcaption { padding: var(--s3); display: flex; flex-direction: column; gap: 2px; }
.photo figcaption b { font-weight: 600; }
.photo-grid .empty { grid-column: 1 / -1; }

/* A register's totals row. It is the sum of what is on screen, so it sits with the table
   rather than floating above it as a separate figure. */
.register tfoot td {
  background: var(--grey-1); font-weight: 600; border-top: 2px solid var(--line-strong);
}

/* ------------------------------------------------------------------ record tabs
   Procore puts a record's sections on a tab strip with counts, so the page says what is on
   the record before anything is clicked. The strip is a rule the active tab sits on, not a
   row of buttons — it should read as part of the page, not as a control panel. */
.rec-tabs { margin-top: var(--s5); }
.rec-strip {
  display: flex; gap: var(--s5); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.rec-strip::-webkit-scrollbar { display: none; }
.rec-strip button {
  appearance: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
  padding: var(--s3) 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-2); font: inherit; font-weight: 600; font-size: var(--t-body);
}
.rec-strip button i { font-style: normal; font-weight: 500; color: var(--text-3); }
.rec-strip button:hover { color: var(--text); }
.rec-strip button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--action); }
.rec-strip button[aria-selected="true"] i { color: var(--text-2); }
.rec-strip button:focus-visible { outline: 2px solid #1D5CC9; outline-offset: 2px; }
.rec-panel { padding-top: var(--s5); }
.rec-panel > aside > .history { border-left: 2px solid var(--line); }

/* --------------------------------------------------------------- project home
   Procore's project home is a wall of cards, each answering one question, each with its own
   heading and its own way in. The grid is wider than the figure cards above it because these
   hold facts and people, not single numbers. */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s4); align-items: start; }
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--grey-1);
}
.panel > header h3 {
  margin: 0; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-2); font-weight: 700;
}
.panel > header button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--t-small); color: var(--link); font-weight: 600;
}
.panel > header button:hover { text-decoration: underline; }
.panel .body { padding: var(--s4); }
.panel .facts th { width: 150px; min-width: 150px; }
.panel .facts tr:last-child th, .panel .facts tr:last-child td { border-bottom: 0; }
.panel.wide { grid-column: 1 / -1; }
/* A panel holding a register or a table lets it run to the panel's own edges. */
.panel .flush { padding: 0; }
.panel .flush .register th:first-child, .panel .flush .register td:first-child { padding-left: var(--s4); }
.panel .flush .register th:last-child,  .panel .flush .register td:last-child  { padding-right: var(--s4); }

/* The team list: a person, what they are on this job, and how to reach them.
   Stacked rather than side by side — an email address beside a name puts two unbreakable
   strings in one row, and the narrower one loses: "Koddis Construction Limited" came out as
   three lines of one word each. */
.people { list-style: none; margin: 0; padding: 0; }
.people li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.people li:first-child { padding-top: 0; }
.people li:last-child { border-bottom: 0; padding-bottom: 0; }
.people b { font-weight: 600; display: block; }
.people .role { display: block; color: var(--text-2); font-size: var(--t-small); }
.people a { color: var(--link); font-size: var(--t-small); text-decoration: none;
            display: block; overflow-wrap: anywhere; }
.people a:hover { text-decoration: underline; }


/* A wide register freezes its first column, as Procore's change events table does. Scrolling
   the budget sideways without it loses which code the row belongs to, which makes the far
   columns unreadable at exactly the moment somebody is comparing them. */
/* `.register` carries overflow:hidden so the border-radius clips its corners. On a table that
   is the nearest scrollport for its own cells, which makes position:sticky inside it do
   nothing at all — the frozen column silently scrolled away with the rest. Inside a scroller
   the radius is the scroller's job anyway. */
.scroller > .register.wide { overflow: visible; border-radius: 0; }
.scroller { border-radius: var(--radius); }

.scroller > .register.wide th:first-child,
.scroller > .register.wide td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  /* A width on a th is a suggestion, and on a table wider than its box the browser took it
     back: the frozen column collapsed to 72px, the code wrapped under its own status bar, and
     the next column's figures showed through beside it. min-width is not negotiable. */
  min-width: 128px; white-space: nowrap;
  /* The rule carries the shadow: a frozen column with no edge reads as a rendering fault when
     the row beneath slides under it. */
  box-shadow: 1px 0 0 var(--line);
}
.scroller > .register.wide thead th:first-child { background: var(--grey-1); z-index: 2; }
.scroller > .register.wide tfoot td:first-child { background: var(--grey-1); z-index: 2; }
/* The sticky first column is the title on every wide money register, and this rule outranks
   the plain row-hover one — so hovering a commitment, a variation or an application painted
   its title cell in the Koddis maroon. The brand belongs on the logo. */
.scroller > .register.wide tbody tr:hover td:first-child { background: #F4F5F6; }

/* ------------------------------------------------------------- bulk actions
   The checkbox column is narrow and quiet: it is a way of pointing at rows, not a column of
   data, so it never competes with the reference beside it. */
.register th.reg-pick, .register td.reg-pick {
  width: 34px; padding-left: var(--s3); padding-right: 0;
}
.register td.reg-pick input, .register th.reg-pick input { cursor: pointer; margin: 0; }

/* The bar only exists while something is selected, so it can afford to be loud about it. */
.reg-sel {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s2) var(--s4); margin-bottom: var(--s2);
  background: #E4EDFB; border: 1px solid #BCD1F5;
  border-radius: var(--radius); color: #1D5CC9;
}
.reg-sel b { margin-right: var(--s2); }

/* =========================================================================
   PROCORE SHELL — everything below was written against screenshots of Koddis's
   live Procore taken on 21 Sep 2026, replacing rules written from prose notes.
   It comes last so it wins over the earlier definitions it supersedes.
   ========================================================================= */

/* No rail. Content is full width, as Procore's is; the frame is a column with the footer at its foot. */
.frame { display: flex; flex-direction: column; }
.main { padding: 0; background: var(--surface); }
.main > div { padding: var(--s4) var(--s5) var(--s6); max-width: none; }

/* ------------------------------------------------------------- the page head
   Gear, title, and the page's actions on the same line at the right. */
.page-head { margin: 0 0 var(--s3); }
.head-row { display: flex; align-items: center; gap: var(--s4); }
.page-head h1 {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0; font-size: var(--t-h1); font-weight: 700; letter-spacing: -.01em; flex: 1;
}
.page-head .gear { color: var(--text-3); display: inline-flex; }
.page-head .sub { margin: var(--s2) 0 0; color: var(--text-2); font-size: var(--t-body); }
.head-actions { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.head-actions:empty { display: none; }

/* The breadcrumb. Blue links, a chevron between, the current page dark. */
.crumbs { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
          font-size: var(--t-body); margin-bottom: var(--s2); }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs i { color: var(--text-3); font-style: normal; }
.crumbs span { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------- buttons
   Orange primary, white-on-grey secondary. Procore's secondary buttons are
   filled light grey with no border, not outlined. */
.btn {
  background: var(--grey-1); border: 0; color: var(--text);
  font: inherit; font-size: var(--t-body); font-weight: 600;
  padding: 7px var(--s3); border-radius: 4px; cursor: pointer;
}
.btn:hover { background: var(--grey-2); }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-deep); }
.btn-quiet { background: none; color: var(--text-2); }
.btn-quiet:hover { background: var(--grey-1); color: var(--text); }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }

/* ------------------------------------------------------------------ cards
   Every register and every panel sits in a white card with a hairline border. */
.scroller, .reg > .reg-bar, .panel, .rec-panel > * {
  border-color: var(--line);
}
.reg {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: var(--s4); margin-bottom: var(--s4);
}
.reg > .scroller { border: 0; border-radius: 0; }

/* -------------------------------------------------------------- the table
   Sentence-case grey headers, tight rows, blue links, hairline rules. */
.register { border: 0; border-radius: 0; }
.register thead th {
  background: var(--grey-1); color: var(--text-2);
  font-size: var(--t-body); font-weight: 600; text-transform: none; letter-spacing: 0;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line);
}
.register thead th .reg-sort { font-size: var(--t-body); text-transform: none; letter-spacing: 0;
                               font-weight: 600; color: var(--text-2); }
.register td { padding: var(--s2) var(--s3); font-size: var(--t-body); }
.register tbody tr { border-bottom: 1px solid var(--line); }
.register tbody tr:hover td { background: #F4F5F6; }
.register td.title { font-weight: 400; }
/* Exactly one column opens the record, and which one is the tool's own choice — the Subject on
   RFIs, the Number on Commitments (measured 22 Sep 2026). The register marks it `.lnk`. */
.register tbody tr[tabindex] td.lnk {
  color: var(--link); text-decoration: underline; text-underline-offset: 2px;
}
.register tbody tr[tabindex] { cursor: pointer; }
.register td.num, .register td.tiny, .register td.money { color: var(--text); text-decoration: none; }
.register td.tiny, .register td .tiny { color: var(--text-2); }
.register tfoot td { background: var(--grey-1); border-top: 1px solid var(--line-strong); }
.reg-count { font-style: italic; color: var(--text-2); font-size: var(--t-body); }

/* Pills: sentence case, small, quiet. Procore's are not shouted. */
.pill {
  text-transform: none; letter-spacing: 0; font-size: var(--t-small); font-weight: 600;
  padding: 2px var(--s2); border-radius: 10px;
}

/* ------------------------------------------------------ record field grid
   Three columns, label above value, "--" where there is nothing. */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); }
.facts tbody { display: contents; }
.facts tr { display: block; margin-bottom: var(--s4); }
.facts th, .facts td {
  display: block; width: auto; min-width: 0; border: 0; padding: 0; text-align: left;
}
.facts th {
  font-size: var(--t-body); font-weight: 700; color: var(--text); margin-bottom: 2px;
}
.facts td { font-size: var(--t-body); color: var(--text); }
.facts td .tiny { color: var(--text-2); display: block; margin-top: 2px; }

/* ------------------------------------------------------------ record tabs */
.rec-strip button { font-size: var(--t-body); font-weight: 600; color: var(--text-2); }
.rec-strip button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--action); }
.rec-strip button[aria-selected="true"] i { color: var(--text-2); }

/* --------------------------------------------------- project home panels
   No grey header strip: a bold sentence-case title, and the action as a small
   grey button at the right. */
.panel > header { background: none; border-bottom: 0; padding: var(--s4) var(--s4) var(--s2); }
.panel > header h3 {
  font-size: var(--t-lead); font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.panel > header button {
  background: var(--grey-1); border-radius: 4px; padding: 5px var(--s3);
  color: var(--text); font-weight: 600;
}
.panel > header button:hover { background: var(--grey-2); text-decoration: none; }
.panel { border-radius: 6px; }
.panel .body { padding: 0 var(--s4) var(--s4); }

/* The figure cards above a register keep their shape but lose the shouted label. */
.card .k { font-size: var(--t-small); text-transform: none; letter-spacing: 0; color: var(--text-2); font-weight: 600; }
.card .v { font-size: var(--t-h1); }

/* The toolbar. Procore's search is a fixed-width box at the left, not a field that grows to
   fill the row — stretched across 1,000px it stops reading as a search box at all. */
.reg-bar { gap: var(--s2); margin-bottom: var(--s3); }
.reg-search { flex: 0 0 260px; width: 260px; }
.reg-bar .reg-right { margin-left: auto; }
.reg-filter { font-size: var(--t-body); }
.reg-cols summary, .reg-bar .btn-small { font-size: var(--t-body); }

.panel .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel .facts th { min-width: 0; width: auto; }
.panels { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

/* =========================================================================
   MEASURED FROM PROCORE — 21 Sep 2026, read off the computed styles of
   Koddis's live Variations register, not estimated from a screenshot.
   Every value below is a number Procore actually uses.
   ========================================================================= */
:root {
  --action:      #FF5100;   /* Procore orange, exact */
  --action-deep: #D94500;
  --link:        #1D5CC9;
  --bar:         #000000;   /* the bar is pure black, and 52px tall */
  --text:        #232729;   /* Procore's ink, used at full strength in headers too */
  --text-2:      #55595B;
  --text-3:      #7A7E80;
  --paper:       #FFFFFF;   /* the page is white, not an off-white */
  --grey-1:      #F4F5F6;   /* column header fill */
  --btn-grey:    #E3E6E8;   /* secondary button fill */
  --btn-grey-on: #D2D7DA;
  --line:        #E3E6E8;
  --line-strong: #C9CDD0;
  --ok:          #26732D;  --ok-wash:    #E8F7E9;
  --radius:      4px;
  --shadow:      0 0 8px -1px rgba(34,40,42,.16);
}

html, body { font-family: var(--ui); background: var(--paper); color: var(--text); }
.app, .frame, .main { background: var(--paper); }


/* Buttons: 36px tall, 14px/600, 4px radius, grey fill with no border. */
.btn {
  height: 36px; padding: 0 var(--s3); font-size: 14px; font-weight: 600;
  background: var(--btn-grey); color: var(--text); border: 0; border-radius: var(--radius);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--btn-grey-on); }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-deep); }
.btn-quiet { background: none; }
.btn-quiet:hover { background: var(--btn-grey); }
.btn-small { height: 28px; font-size: var(--t-small); }

/* Cards: white, NO border, 4px radius, a soft shadow. */
.reg, .panel, .card {
  border: 0; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow);
}

/* The table: 12px throughout, headers at full ink and weight 700 on #F4F5F6. */
.register thead th {
  font-size: 12px; font-weight: 700; color: var(--text); background: var(--grey-1);
  text-transform: none; letter-spacing: 0; padding: var(--s2);
}
.register thead th .reg-sort { font-size: 12px; font-weight: 700; color: var(--text); }
.register td { font-size: 12px; color: var(--text); padding: 7px var(--s2); }
.register tbody tr { border-bottom: 1px solid var(--line); }
.register td.tiny, .register td .tiny { font-size: 11px; color: var(--text-2); }

/* Pills: 12px/600, 10px radius, 1px 8px, 20px tall. */
.pill {
  font-size: 12px; font-weight: 600; padding: 1px var(--s2); border-radius: 10px;
  text-transform: none; letter-spacing: 0; line-height: 18px;
}
.p-ok { background: var(--ok-wash); color: var(--ok); }

/* Headings: 24px/700 in the same ink as the body. */
.page-head h1 { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: 0; }
h2 { font-size: 17px; font-weight: 700; color: var(--text); }

/* Links */
a, .crumbs a { color: var(--link); }
.register tbody tr[tabindex] td.lnk { color: var(--link); }

/* ------------------------------------------------------- filters, Procore's way
   One button, a panel that drops under the toolbar, and chips for what is actually on. */
.reg-filter-btn .reg-on {
  font-style: normal; background: var(--action); color: #fff; border-radius: 9px;
  min-width: 17px; padding: 0 5px; font-size: 11px; line-height: 17px; text-align: center;
}
.reg-filters {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s3);
}
.reg-field { display: flex; flex-direction: column; gap: 4px; }
.reg-field > span { font-size: 12px; font-weight: 700; color: var(--text); }
.reg-field select { min-width: 170px; }

.reg-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.reg-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #E8F0FB; color: var(--link); border-radius: 12px;
  padding: 3px var(--s2) 3px var(--s3); font-size: 12px;
}
.reg-chip b { font-weight: 700; }
.reg-chip button {
  background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px;
  line-height: 1; padding: 0 2px;
}
.reg-chip button:hover { color: var(--action); }


/* =========================================================================
   THE SHELL — measured off Procore's header, tool menu, pickers, account menu and footer
   on KOD341, 21 Sep 2026, at 1920 wide. Every number here is one Procore uses.
   ========================================================================= */
.topbar {
  position: relative; display: flex; align-items: center; height: 52px; z-index: 60;
  background: #17191C; color: #fff; font-size: 14px; padding: 0;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar > * { flex-shrink: 0; }

/* The orange square goes back to the company; the white box holds the company's own logo. */
.tb-home {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 52px;
  background: #F47E42; color: #fff;
}
.tb-home:hover { background: #FF5100; }
.tb-logo { display: flex; align-items: center; height: 52px; padding: 0 24px; margin-right: 12px; background: #fff; }
.tb-logo img { display: block; height: 52px; width: auto; }

/* Two-line pickers on #2F3437: caption 12px/300 over value 14px/400, a 16px caret. */
.picker { position: relative; margin: 0 4px; min-width: 0; }
.picker > button {
  display: flex; justify-content: space-between; align-items: stretch; height: 40px; max-width: 100%;
  padding: 0 0 0 8px; background: #2F3437; color: #fff; border: 0; border-radius: 4px;
  font: inherit; cursor: pointer; text-align: left;
}
.picker > button:hover, .picker.open > button { background: #3B4145; }
.pick-lines { display: flex; flex-direction: column; min-width: 0; }
.pick-top { font-size: 12px; font-weight: 300; line-height: 16px; letter-spacing: .4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-bottom { font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: .25px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-caret { display: flex; align-items: center; justify-content: center; width: 16px; margin: 0 4px; flex: 0 0 16px; }
.picker.open .pick-caret svg { transform: rotate(180deg); }
.picker.proj > button { max-width: 300px; }
.picker.tools > button { min-width: 140px; }

/* Search: 500x40, white, 6px radius, the glyph at the left and the keycaps at the right. */
.search {
  position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 500px; min-width: 160px;
  height: 40px; margin: 0 4px; padding: 0 6px; background: #fff; border-radius: 6px; color: #232729;
}
.search > svg { flex: 0 0 24px; }
.search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none;
  font: inherit; font-size: 14px; letter-spacing: .15px; color: #232729; padding: 0 6px;
}
.search input::placeholder { color: #6A767C; }
.search .keys { display: flex; gap: 4px; }
.search kbd {
  font: 600 11px/16px var(--ui); color: #232729; background: #F4F5F6;
  border: 1px solid #D2D7DA; border-radius: 3px; padding: 0 5px;
}
.search input:focus ~ .keys { display: none; }
.search .results {
  position: absolute; top: calc(100% + 4px); left: 0; width: min(560px, 92vw); z-index: 70;
  background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.24);
  max-height: 62vh; overflow: auto; padding: 4px;
}
.search .results button {
  display: grid; grid-template-columns: 96px 70px 1fr; gap: 12px; align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0; font: inherit; color: #232729;
  padding: 8px 12px; border-radius: 4px; cursor: pointer;
}
.search .results button:hover, .search .results button.on { background: #F4F5F6; }
.search .results .kind { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6A767C; font-weight: 600; }
.search .results .none { padding: 16px; color: #55595B; font-size: 12px; }

/* Favourites: a star, the caption, then a row of 14px #ACB5B9 links 24px apart. */
/* The favourites keep 260px before the search starts to give way, so a 1440 screen still shows two or three. */
.favs { display: flex; align-items: center; flex: 1 1 260px; min-width: 260px; height: 46px; padding-top: 4px; margin-left: 4px; }
.favs-empty { min-width: 0; }
.favs-star { display: flex; align-items: center; margin: 0 12px 0 8px; color: #fff; }
.favs-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.favs-top { font-size: 12px; font-weight: 300; line-height: 16px; letter-spacing: .4px; }
.favs-tabs ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; height: 26px; overflow: hidden; }
.favs-tabs li { display: flex; align-items: center; margin-left: 24px; position: relative; flex-shrink: 0; }
.favs-tabs li:first-child { margin-left: 0; }
.favs-tabs li[hidden] { display: none; }
.favs-tabs a, .favs-more > button {
  font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: .15px; color: #ACB5B9;
  padding: 0 4px; white-space: nowrap; border-radius: 4px 4px 0 0;
}
.favs-tabs a:hover, .favs-more > button:hover { color: #fff; }
.favs-more > button { display: flex; align-items: center; gap: 2px; background: none; border: 0; font: inherit; cursor: pointer; }

/* The right-hand group: Apps, then icons padded 0 24 0 8, the avatar a 40px circle. */
.tb-right { display: flex; align-items: center; margin-left: auto; }
.tb-icons { display: flex; align-items: center; height: 44px; padding: 0 24px 0 8px; }
.tb-icons .ico {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; background: none; border: 0; border-radius: 4px; color: #fff; cursor: pointer;
}
.tb-icons .ico:hover { background: rgba(255,255,255,.12); }
.tb-dd { position: relative; }
.bell { position: relative; }
.bell .count {
  position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
  border-radius: 8px; background: #FF5100; color: #fff; font-size: 10px; font-weight: 700; text-align: center;
}
.avatar {
  width: 40px; height: 40px; margin-left: 8px; border: 0; border-radius: 50%; cursor: pointer;
  background: #464F53; color: #fff; font: 600 14px var(--ui); letter-spacing: .15px;
}
.avatar:hover { background: #55595B; }

/* Dropdowns off the bar: white, 4px radius, a soft shadow, 14px rows padded 4px 16px. */
.pick-menu {
  position: absolute; top: 100%; left: 0; margin-top: 2px; min-width: 200px; z-index: 70;
  background: #fff; color: #232729; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.24);
  padding: 8px 0; font-size: 14px; line-height: 20px; letter-spacing: .15px;
}
.pick-menu > a, .pick-menu .acct-link, .pick-menu .acct-out {
  display: flex; width: 100%; padding: 4px 16px; color: #232729; text-decoration: none;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
}
.pick-menu > a:hover, .pick-menu .acct-link:hover, .pick-menu .acct-out:hover { background: #F4F5F6; text-decoration: none; }
.more-menu { min-width: 150px; }
.apps-menu, .help-menu, .account-menu { left: auto; right: 0; }
.help-menu { width: 300px; }
.menu-title { font-weight: 700; padding: 4px 16px; }
.menu-text { padding: 4px 16px 8px; color: #55595B; }
.account-menu { width: 243px; }
.acct-name { padding: 8px 16px 0; }
/* An address that runs past the edge of the menu is an address you cannot read. The menu
   keeps its measured width and the address wraps inside it. */
.acct-email { padding: 2px 16px 8px; color: #6A767C; white-space: normal; overflow-wrap: anywhere; }
.acct-link { color: #FF5100 !important; }
.acct-rule { height: 1px; background: #E3E6E8; margin: 4px 0; }
.acct-out { justify-content: center; }

/* The project picker: a search box, Recent projects, Projects, the current company at the foot. */
.proj-menu { width: 370px; padding: 12px 12px 0; }
.proj-search { position: relative; display: flex; align-items: center; height: 36px; padding: 0 8px; border: 1px solid #D2D7DA; border-radius: 4px; }
.proj-search:focus-within { border-color: #FF5100; }
.proj-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 14px; }
.proj-search svg { width: 16px; height: 16px; color: #6A767C; flex: 0 0 16px; }
.proj-list { max-height: 50vh; overflow: auto; margin: 8px -12px 0; }
.proj-head { font-weight: 700; padding: 8px 16px 4px; }
.proj-list button {
  display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit;
  font-size: 13px; padding: 5px 16px; cursor: pointer; color: #232729;
}
.proj-list button:hover { background: #F4F5F6; }
.proj-none { padding: 8px 16px; color: #6A767C; }
.proj-foot {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px; margin: 8px -12px 0;
  border-top: 1px solid #E3E6E8; background: #F4F5F6; border-radius: 0 0 4px 4px;
}
.proj-foot img { width: 48px; height: auto; background: #fff; border: 1px solid #E3E6E8; padding: 4px; }
.proj-foot .cap { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: #6A767C; }
.proj-foot .co { font-size: 14px; }

/* The tool menu: a white sheet the width of the screen, 44px above the columns and 56 below;
   columns 248 wide, 24 apart; 16px/700 group titles ruled in #DFDFDE; rows 24px tall with a
   star, the name in 14px #707070, and a ⊕ for tools something can be created in. */
.toolmenu {
  position: absolute; top: 52px; left: 0; right: 0; z-index: 65; padding: 44px 0 56px;
  background: #fff; color: #232729; box-shadow: 0 8px 16px rgba(0,0,0,.16);
  max-height: calc(100vh - 52px); overflow: auto;
}
.toolmenu-inner { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: 1634px; margin: 0 auto; padding: 0 40px; }
.tool-col { display: flex; flex-direction: column; margin: 0 24px 16px 0; }
.tool-group-title {
  font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .15px;
  padding: 0 0 8px; margin: 0 0 8px 28px; border-bottom: 1px solid #DFDFDE;
}
.tool-group { display: flex; align-items: flex-start; }
.tool-group-col { display: flex; flex-direction: column; width: 248px; }
.tool-row { display: flex; align-items: flex-start; height: 24px; margin-bottom: 8px; }
.tool-star, .tool-star-space { width: 16px; height: 16px; margin: 4px 4px 0 0; flex: 0 0 16px; }
.tool-star { display: flex; padding: 0; border: 0; background: none; cursor: pointer; color: transparent; }
.tool-row:hover .tool-star { color: #C9CDD0; }
.tool-star.on, .tool-row:hover .tool-star.on { color: #FECD0B; }
.tool-name { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: #707070; margin: 2px 0 2px 4px; white-space: nowrap; }
.tool-name:hover { color: #232729; text-decoration: underline; }
.tool-create { display: flex; align-items: center; height: 24px; margin-left: 16px; color: #FF5100; }
.tool-create svg { border: 1px solid currentColor; border-radius: 50%; }
.tool-create:hover { color: #D94500; }

/* The footer: a 24px #343739 strip, 11px, links left and POWERED BY at the right. */
.tb-foot {
  display: flex; align-items: center; justify-content: space-between; height: 24px;
  padding: 5px 10px; background: #343739; color: #E3E6E8; font-size: 11px; line-height: 13px; flex: 0 0 24px;
}
.tb-foot a { color: #E3E6E8; text-decoration: none; }
.tb-foot a:hover { text-decoration: underline; }
.tb-foot .powered { font-weight: 300; letter-spacing: .5px; text-transform: uppercase; padding-right: 5px; }
.tb-foot b { font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

/* Narrower screens. Procore is a desktop product; the bar gives things up from the right,
   and nothing in it ever wraps. */
@media (max-width: 1400px) { .picker.proj > button { max-width: 240px; } }
@media (max-width: 1200px) { .favs { display: none; } }
@media (max-width: 900px)  { .search { display: none; } .tb-logo { padding: 0 12px; margin-right: 4px; } .tb-icons { padding-right: 8px; } }
@media (max-width: 720px)  {
  .pick-top { display: none; } .picker.tools > button { min-width: 0; }
  /* The job picker is the one thing that gives way: it shrinks and ellipsises, nothing wraps. */
  /* Basis 0, not auto: with auto the picker's own text sets its size and it never shrinks. */
  .picker.proj { flex: 1 1 0%; min-width: 0; }
  .picker.proj > button { width: 100%; }
  .picker.tools { flex: 0 0 auto; }
  .tb-icons { padding: 0 8px 0 4px; }
  .tb-icons .ico, .avatar { flex: 0 0 auto; white-space: nowrap; }
  .picker.apps, .tb-icons .tb-dd:not(.account), .tb-icons > a.ico { display: none; }
    .tb-logo img { height: 40px; }
  .proj-menu { width: min(92vw, 370px); }
  .toolmenu { padding: 16px 0 24px; }
  .toolmenu-inner { padding: 0 16px; }
  .tool-col { margin-right: 0; width: 100%; }
  .tool-group { flex-wrap: wrap; }
}
@media (max-width: 480px)  { .tb-logo { display: none; } .tb-home { flex: 0 0 32px; } }

/* =========================================================================
   THE REGISTER — measured off KOD341's Variations, 21 Sep 2026.
   Card padded 16 · 36px toolbar · 398px side panels · 48px header cells on #F4F5F6 with a
   ⋮ menu · 36px rows on #D6DADC rules · pinned actions · Grand totals · Rows: N.
   ========================================================================= */
.main > div { padding: 8px 16px 16px; }
.page-head { margin: 0 0 8px; }
.head-row { display: flex; align-items: center; gap: 0; min-height: 36px; }
.head-row h1 { margin: 0 16px 0 0; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: .15px; }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gear-btn {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 12px;
  background: #E3E6E8; color: #232729; border-radius: 4px; flex: 0 0 36px;
}
.gear-btn:hover { background: #D2D7DA; text-decoration: none; }
/* The line under a tool's title saying what the tool is for: 14px/400 #6A767C, 20px line,
   .15px tracking, 12px of air beneath, indented to sit under the title rather than the gear
   (measured on Procore's RFI tool, 22 Sep 2026). */
.page-head .sub {
  margin: 4px 0 12px 48px; font-size: 14px; font-weight: 400;
  line-height: 20px; letter-spacing: .15px; color: #6A767C;
}
/* ...but only where there IS a gear. A tool's title starts 48px in because the gear sits to
   its left; a page without one starts at the margin, and the 48px left every company-level
   screen with its strapline floating half an inch right of the heading it belongs to
   (Companies, People, Insurance — 22 Sep 2026). */
.page-head:not(:has(.gear)) .sub { margin-left: 0; }

/* Tabs: 26px, 14px, active 600 on a 3px rule, 24px apart. The panes start 17px below. */
.tabs { display: flex; align-items: center; height: 26px; margin: 0 0 17px; }
.tabs button {
  display: flex; align-items: center; height: 26px; padding: 0 4px; margin-left: 24px;
  background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0;
  font: 400 14px/20px var(--ui); letter-spacing: .15px; color: #232729; cursor: pointer;
}
.tabs button:first-child { margin-left: 0; }
.tabs button:hover { color: #000; }
.tabs button.on { font-weight: 600; border-bottom-color: #232729; }
.tab-count { color: #6A767C; font-weight: 400; margin-left: 2px; }

.reg { background: #fff; border: 0; border-radius: 4px; box-shadow: 0 0 8px -1px rgba(34,40,42,.16); padding: 16px; margin-bottom: 16px; }
.reg-bar { display: flex; align-items: center; justify-content: space-between; height: 36px; margin: 0 0 8px; }
.reg-bar-left, .reg-bar-right { display: flex; align-items: center; gap: 8px; }
.reg-tool {
  display: inline-flex; align-items: center; height: 36px; padding: 0 6px; gap: 0;
  background: none; border: 0; border-radius: 4px; font: 600 14px/20px var(--ui); letter-spacing: .15px;
  color: #232729; cursor: pointer; position: relative;
}
.reg-tool > span { padding: 0 6px; }
.reg-tool:hover { background: #F4F5F6; }
.reg-tool.on { background: #E4EDFB; color: #1D5CC9; box-shadow: inset 0 0 0 1px #1D5CC9; }
.reg-tool .reg-on {
  position: absolute; top: 2px; right: 2px; font-style: normal; background: #FF5100; color: #fff; border-radius: 9px;
  min-width: 17px; padding: 0 5px; font-size: 11px; line-height: 17px; text-align: center;
}
.ico-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 4px; color: #232729; cursor: pointer; }
.ico-btn:hover { background: #F4F5F6; }

.reg-body { display: flex; align-items: stretch; }
.reg-table { flex: 1; min-width: 0; overflow-x: auto; }
.reg-panel { flex: 0 0 398px; width: 398px; display: flex; flex-direction: column; background: #fff; }
.reg-panel-left { border-right: 1px solid #D6DADC; margin-right: 16px; }
.reg-panel-right { border-left: 1px solid #D6DADC; margin-left: 16px; }
.reg-panel-head { display: flex; align-items: center; padding: 16px; gap: 8px; }
.reg-panel-head h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: .15px; color: #232729; }
.reg-panel-head .btn { margin-right: 0; }
.reg-panel-body { flex: 1; padding: 0 16px 16px; }
.reg-panel-foot { display: flex; justify-content: flex-end; padding: 16px; }

/* Saved views: Procore's is a 316px white column down the left of the card, its heading
   20px/600, the view you are on blue and bold on a blue wash, everything else 14px/400 in
   ink under a 14px/600 group heading (measured on the RFI tool, 22 Sep 2026). */
.reg-views { flex-basis: 316px; width: 316px; }
.reg-view-list { display: flex; flex-direction: column; }
.reg-view-group {
  margin: 16px 0 4px; font-size: 14px; font-weight: 600; line-height: 20px;
  letter-spacing: .15px; color: #232729;
}
.reg-view-row { display: flex; align-items: center; border-radius: 4px; }
.reg-view-row:hover { background: #F4F5F6; }
.reg-view-row.on { background: #EDF3FC; }
.reg-view {
  flex: 1; min-width: 0; text-align: left; padding: 6px 8px; border: 0; background: none;
  font: 400 14px/20px var(--ui); letter-spacing: .15px; color: #232729; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reg-view-row.on .reg-view { font-weight: 600; color: #1D5CC9; }
.reg-view-x svg { width: 16px; height: 16px; }
.reg-view-x {
  display: none; width: 24px; height: 24px; margin-right: 4px; padding: 0; flex: 0 0 auto;
  border: 0; border-radius: 4px; background: none; color: #5E696E; cursor: pointer;
}
.reg-view-row:hover .reg-view-x, .reg-view-x:focus-visible { display: inline-flex; align-items: center; justify-content: center; }
.reg-view-x:hover { background: #E3E6E8; color: #232729; }
.reg-views-btn svg { width: 20px; height: 20px; }
/* Procore's Views button carries the blue wash on its own, with no outline. */
.reg-tool.reg-views-btn.on { background: #EDF3FC; color: #1D5CC9; box-shadow: none; }
.reg-field { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.reg-field > span { font-size: 14px; font-weight: 700; line-height: 20px; color: #232729; }
.reg-field select, .reg-cols-search {
  height: 36px; padding: 0 12px; font: 400 14px/20px var(--ui); color: #232729; background: #fff;
  border: 1px solid #75838A; border-radius: 4px; width: 100%; min-width: 0;
}
.reg-cols-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; }
.reg-cols-head h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; }
.reg-cols { margin-top: 4px; }
.reg-switch {
  display: flex; align-items: center; height: 36px; padding: 8px 8px 8px 16px; margin-top: 4px;
  background: #F4F5F6; border-radius: 4px; cursor: pointer; font-size: 14px; line-height: 20px;
}
.reg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reg-switch .track { position: relative; width: 36px; height: 20px; border-radius: 20px; background: #BCD1F5; flex: 0 0 36px; transition: background .12s; }
.reg-switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .12s; }
.reg-switch input:checked + .track { background: #2066DF; }
.reg-switch input:checked + .track .knob { left: 18px; }
.reg-switch.locked { cursor: default; opacity: .7; }
.reg-switch .lbl { padding-left: 20px; }

.reg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.reg-chip { display: inline-flex; align-items: center; gap: 4px; background: #E4EDFB; color: #1D5CC9; border-radius: 12px; padding: 3px 8px 3px 12px; font-size: 12px; }
.reg-chip b { font-weight: 700; }
.reg-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }

.reg .register { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #D6DADC; border-radius: 3px; background: #fff; min-width: 0; }
.reg .register thead th {
  height: 48px; padding: 0 8px; background: #F4F5F6; color: #232729; font-size: 12px; font-weight: 700;
  text-align: left; vertical-align: middle; border-bottom: 1px solid #D6DADC; white-space: nowrap; text-transform: none; letter-spacing: 0;
  position: relative;
}
.reg .register thead th.money { text-align: right; }
.reg-th { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
th.money .reg-th { flex-direction: row-reverse; }
.reg-th-label { display: inline-flex; align-items: center; gap: 4px; }
.reg-th-label.sortable { cursor: pointer; }
.reg-sort-ind { display: inline-flex; color: #232729; }
.reg-th-menu { display: inline-flex; width: 16px; height: 16px; padding: 0; margin: 0 5px; background: none; border: 0; border-radius: 1px; color: #232729; cursor: pointer; opacity: .85; }
.reg-th-menu:hover { box-shadow: 0 0 0 4px #E3E6E8; background: #E3E6E8; }
.reg-menu { position: absolute; top: 40px; right: 4px; z-index: 30; min-width: 180px; background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.24); padding: 8px 0; }
.reg-menu button { display: block; width: 100%; text-align: left; padding: 4px 16px; background: none; border: 0; font: 400 14px/20px var(--ui); color: #232729; cursor: pointer; }
.reg-menu button:hover { background: #F4F5F6; }
.reg .register td { height: 36px; padding: 0 8px; font-size: 12px; line-height: 16px; color: #232729; border-bottom: 1px solid #D6DADC; vertical-align: middle; }
.reg .register tbody tr:last-child td { border-bottom: 0; }
.reg .register tbody tr[tabindex] { cursor: pointer; }
.reg .register tbody tr:hover td { background: #F4F5F6; }
.reg .register td.edge { padding-left: 0; }
.reg .register td.tiny, .reg .register td .tiny { font-size: 11px; color: #55595B; }
.reg .register td .tiny { margin-top: 1px; }
.reg .register tbody tr[tabindex] td.lnk { color: #1D5CC9; text-decoration: underline; }
/* The second line under a title says which job or which company it is. It is not part of the
   link, and it came out blue and underlined wherever the link column carried one. */
.register tbody tr[tabindex] td.lnk .tiny { color: var(--text-2); text-decoration: none; }
.reg .register td.money, .reg .register th.money { text-align: right; font-variant-numeric: tabular-nums; }
.reg .register tr.reg-group { cursor: pointer; }
.reg .register tr.reg-group td { background: #F4F5F6; height: 32px; font-size: 12px; font-weight: 600; }
.reg .register tr.reg-group td i { font-style: normal; font-weight: 400; color: #5E696E; }
.reg .register tr.reg-group:hover td { background: #E9EBEC; }
.reg-fold {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  margin-right: 4px; vertical-align: -3px; color: #5E696E; transform: rotate(90deg);
}
.reg .register tr.reg-group.folded .reg-fold { transform: rotate(0deg); }
.reg-fold svg { width: 16px; height: 16px; }
.reg .register tfoot td { background: #F4F5F6; font-weight: 700; border-top: 1px solid #D6DADC; border-bottom: 0; }
.reg .register tfoot td:first-child { font-weight: 600; padding-left: 16px; }
.reg .register th.reg-actions, .reg .register td.reg-actions {
  width: 125px; min-width: 125px; text-align: left; position: sticky; right: 0; background: #fff;
  box-shadow: -3px 0 6px -2px rgba(34,40,42,.16);
}
.reg .register thead th.reg-actions, .reg .register tfoot td.reg-actions { background: #F4F5F6; }
.reg .register tbody tr:hover td.reg-actions { background: #F4F5F6; }
.reg .register td.reg-actions { padding: 0 8px; white-space: nowrap; }
.reg-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 4px; margin-right: 18px; background: none; border: 0; border-radius: 4px; color: #232729; cursor: pointer; }
.reg-act:last-child { margin-right: 0; }
.reg-act:hover { background: #E3E6E8; }
.reg-act.off, .reg-act:disabled { color: #ACB5B9; cursor: default; }
.reg .register th.reg-pick, .reg .register td.reg-pick { width: 36px; text-align: center; padding: 0; }
.reg-rows { padding: 12px 0 0; font: italic 400 14px/20px var(--ui); letter-spacing: .15px; color: #6A767C; }
/* The bar that appears when rows are ticked. The Procore rule only repainted its background,
   so it kept a brand-maroon border and brand-maroon text underneath — brand colour standing in
   for a UI state, on every register in the system. Procore's blue, the same wash its Open pill
   uses. */
.reg-sel {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 8px;
  background: #E4EDFB; border: 1px solid #BCD1F5; border-radius: 4px;
  font-size: 14px; color: #1D5CC9;
}
.reg .empty { margin: 0; }

@media (max-width: 900px) {
  .reg-panel { flex-basis: 100%; width: 100%; border: 0; margin: 0 0 16px; }
  .reg-body { flex-wrap: wrap; }
}
/* Procore's register prints a reference like 001 in Inter, not a monospace face, and has no
   coloured stripe down the first column. */
.reg .register .ref { font-family: var(--ui); font-weight: 400; letter-spacing: 0; }
/* Procore's tables have no coloured stripe down the first column, in a register or anywhere
   else. It was hidden inside .reg only, so it came back on every table on a record card. */
.edge-bar { display: none; }
.reg .register td.edge { padding-left: 8px; }
.reg .register tfoot td:first-child { white-space: nowrap; }
th.money .reg-th { flex-direction: row; justify-content: flex-end; }

/* A field that failed validation: the control outlined in red, the reason underneath. */
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #B3261E; outline: 2px solid #F0CFCC; outline-offset: 0; }
.field-error { margin-top: 4px; font-size: 12px; line-height: 16px; color: #B3261E; }

/* Procore's register search: 225x36, a 16px magnifier inside the left, border #75838A, radius 4. */
.reg-search-box { position: relative; width: 225px; height: 36px; margin-right: 4px; }
.reg-search-box > svg { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; color: #6A767C; pointer-events: none; }
.reg-search-box input { width: 100%; height: 36px; padding: 1px 12px 1px 32px; font: 400 14px/20px var(--ui); color: #232729; border: 1px solid #75838A; border-radius: 4px; background: #fff; }
.reg-search-box input:focus { outline: none; border-color: #1D5CC9; box-shadow: 0 0 0 1px #1D5CC9; }
.reg-group { width: 248px; height: 36px; margin-right: 4px; padding: 0 12px; font: 400 14px/20px var(--ui); color: #232729; border: 1px solid #75838A; border-radius: 4px; background: #fff; }
/* Record tabs (Contracts | Recycle bin, General | Emails | Change history) are the same tabs. */
.rec-tabs { margin-top: 0; }
.rec-strip { display: flex; align-items: center; gap: 24px; height: 26px; margin: 0 0 17px; border-bottom: 0; }
.rec-strip button { height: 26px; padding: 0 4px; margin: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; font: 400 14px/20px var(--ui); letter-spacing: .15px; color: #232729; }
.rec-strip button i { font-style: normal; font-weight: 400; color: #6A767C; }
.rec-strip button:hover { color: #000; }
.rec-strip button[aria-selected="true"] { color: #232729; font-weight: 600; border-bottom-color: #232729; }
.rec-panel { margin-top: 0; }
.btn svg { margin-right: 0; }
.btn-primary svg + * , .btn svg { vertical-align: middle; }
.head-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
/* The page's first .actions row is lifted into the head; a leftover empty row must not leave a gap. */
.actions:empty { display: none; }
/* Money in Inter, as Procore prints it. The monospace face was Koddis's own. */
.reg .register td.money, .reg .register th.money, .reg .register .money { font-family: var(--ui); }

/* Budget: Procore's "View" row over the register, the code over its name in the first
   column, a 58px two-line header, and an over-budget row's figures in red #D92626. */
.budget-views { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.budget-views label { display: flex; align-items: center; gap: 8px; font: 600 14px/20px var(--ui); }
.budget-views select { width: 250px; height: 36px; padding: 0 12px; font: 400 14px/20px var(--ui); color: #232729; border: 1px solid #75838A; border-radius: 4px; background: #fff; }
.reg .register td.desc { line-height: 16px; }
.reg .register td.desc .code, .reg .register td.desc .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 224px; }
.reg .register td.desc .name { color: #55595B; }
.reg .register thead th .reg-th-label { white-space: normal; line-height: 16px; }
.reg .register tbody tr.over td.money { color: #D92626; }
.reg .register tbody tr.over .forecast-cell .muted { color: #D92626; }
.over-under-bad { color: #D92626; font-weight: 600; }
.forecast-cell.editable { cursor: pointer; border-bottom: 1px dashed #ACB5B9; }
.budget-summary h2 { margin: 0 0 12px; font-size: 16px; }
/* Money in Inter everywhere, as Procore prints it; the monospace face was Koddis's own. */
.money, td.money, .facts td.money, .card .v { font-family: var(--ui); }

/* Records, measured off KOD341's MCV #001 (21 Sep 2026): breadcrumb 14px #5E696E with 24px
   chevrons at 8px under the bar; H1 24/700 with the actions on its line; tabs; then cards of
   radius 8 padded 16 with a 20px/600 title, "Created …" in 14px #5E696E, and fields three to
   a row — label 14/600, value 14/400, 24px apart. */
.crumbs { display: flex; align-items: center; gap: 0; flex-wrap: wrap; height: 24px; margin: 0 0 10px; font-size: 14px; line-height: 20px; }
.crumbs a, .crumbs span { color: #5E696E; font-weight: 400; text-decoration: none; }
.crumbs a:hover { color: #1D5CC9; text-decoration: underline; }
.crumbs i { display: inline-flex; color: #75838A; padding: 0 var(--s2); }
.crumbs span[aria-current] { color: #232729; }
.record-card { background: #fff; border-radius: 8px; box-shadow: 0 0 8px -1px rgba(34,40,42,.16); padding: 16px; margin: 0 0 16px; }
.rc-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: .15px; color: #232729; }
.rc-sub { font-size: 14px; line-height: 20px; color: #5E696E; margin-top: 4px; }
/* A general sibling, not an adjacent one: the card's Edit button sits between the heading and
   the fields in the DOM even though it is painted on the heading line. */
.rc-title ~ .fields, .rc-sub ~ .fields { margin-top: 24px; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.field-ro.wide { grid-column: 1 / -1; }
.field-ro .fl { font-size: 14px; font-weight: 600; line-height: 20px; color: #232729; margin-bottom: 4px; }
.field-ro .fv { font-size: 14px; font-weight: 400; line-height: 20px; color: #232729; overflow-wrap: anywhere; }
.field-ro .fv a { color: #1D5CC9; text-decoration: underline; }
.field-ro .fv .tiny { color: #5E696E; }
/* Procore's status pills, measured off the RFI register 22 Sep 2026: 12px/600, 10px radius,
   0 8px, 18px tall, each a wash with a 1px border a shade darker than the fill.
   Settled things are green, live things are blue. Amber stays ours, for money awaiting a
   decision, where Procore has no equivalent. */
.pill { border: 1px solid transparent; }
.pill.p-ok   { background: #E8F7E9; color: #26732D; border-color: #8CD993; }
.pill.p-info { background: #E4EDFB; color: #1D5CC9; border-color: #BCD1F5; }
/* An open record past its answer date: Procore turns the reference red and leaves the status
   pill alone. A closed record past its date stays in ink — being late only matters while it
   is still somebody's to answer. */
.register .ref-late { color: #E61920; }
@media (max-width: 900px) { .fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

/* Asking before throwing away typed work. It happens in the sheet's own footer rather than in
   an OS dialog: window.confirm stops the renderer dead, cannot be driven by any check, and
   looks like nothing else in the application. */
.sheet footer .foot-ask { margin-right: auto; font-weight: 600; color: var(--text); }
.btn-danger { background: var(--late); color: #fff; }
.btn-danger:hover { background: #8E1E17; }


/* ------------------------------------------------------------------- dropdowns
   Procore's, measured off the Commitments group control 22 Sep 2026. There is no native
   <select> anywhere in Procore, and none here either. */
.dd { position: relative; display: inline-block; min-width: 0; }
.dd-btn {
  display: flex; align-items: center; gap: 4px; width: 100%; height: 36px;
  padding: 0 8px 0 12px; background: #fff; border: 1px solid #75838A; border-radius: 4px;
  font: 400 14px/20px var(--ui); letter-spacing: .15px; color: #232729;
  text-align: left; cursor: pointer;
}
.dd-btn:hover { border-color: #232729; }
.dd-btn:focus-visible { outline: 2px solid #1D5CC9; outline-offset: 1px; }
.dd.on .dd-btn { border-color: #1D5CC9; }
.dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-label.dd-placeholder { color: #6A767C; }
.dd-btn svg { flex: 0 0 auto; color: #232729; }
/* The menu is put on the body while it is open and positioned from the control's screen
   rectangle, so it escapes the sheet's own clipping and any register that scrolls. It sits
   above the sheet scrim (60), because it belongs to a control drawn on top of it. */
.dd-menu {
  position: fixed; z-index: 80;
  max-height: 320px; overflow-y: auto; padding: 8px 0; background: #fff; border-radius: 4px;
  box-shadow: 0 0 16px -2px rgba(34, 40, 42, .32);
}
.dd-opt {
  padding: 4px 16px; font: 400 14px/20px var(--ui); letter-spacing: .15px; color: #232729;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.dd-opt.at { background: #F4F5F6; }
.dd-opt.on { font-weight: 600; }

/* Where a dropdown stands in for a field it fills the field, as the input beside it does. */
.field .dd, .reg-field .dd { display: block; width: 100%; }
.reg-group { width: 248px; }
.invalid .dd-btn { border-color: var(--late); }


/* ------------------------------------------------------------------ RFI responses
   Procore's response row: who and when down the left, the answer beside it, whether it is the
   official one at the end (KOD341 RFI #78, 22 Sep 2026). */
.resp {
  display: grid; grid-template-columns: 200px 1fr 150px; gap: 24px;
  padding: 16px 0; border-top: 1px solid #D6DADC;
}
.rw-name { font: 600 14px/20px var(--ui); color: #232729; }
.rw-co { font: 400 14px/20px var(--ui); color: #232729; }
.rw-when { margin-top: 4px; font: italic 400 14px/20px var(--ui); color: #6A767C; }
.resp-body { font: 400 14px/20px var(--ui); color: #232729; overflow-wrap: anywhere; }
.resp-body p { margin: 0 0 8px; }
.resp-body p:last-child { margin-bottom: 0; }
.resp-mark { text-align: right; }

/* The card's own action sits on the heading line, at the right, as Procore's
   "+ Add response" does — on the line, not floating over the rule beneath it.
   ONLY the one placed on the heading line: a card that puts its buttons at the FOOT, under its
   table, was having them lifted out of the flow and dropped on the title — where the table's
   own header then painted over them. The payment application's "Save what is claimed" and
   "Claim everything left" were half-hidden behind the Lines header, which is the one screen a
   subcontractor uses every month. */
.record-card { position: relative; }
.record-card > .rc-title + .actions,
.record-card > .rc-sub + .actions { position: absolute; top: 16px; right: 16px; margin: 0; }
.record-card > .actions .btn { margin: 0; }
.record-card > .actions:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .resp { grid-template-columns: 1fr; gap: 8px; }
  .resp-mark { text-align: left; }
}


/* A record's cards stand on Procore's grey ground, which is what makes them read as cards
   rather than as sections of one long white page (measured 22 Sep 2026). */
.rec-panel.rec-cards {
  margin: 0 calc(var(--s4) * -1); padding: 24px var(--s4);
  background: #F4F5F6;
}


/* Procore's section list beside a record's cards: 172px, sticky, 28px rows, the one you are
   reading in ink and the rest in grey (measured 22 Sep 2026). */
.rec-jump-row { display: flex; align-items: flex-start; gap: 16px; }
.rec-jump {
  position: sticky; top: 16px; flex: 0 0 172px; width: 172px;
  display: flex; flex-direction: column; padding: 8px 0;
}
.rec-jump button {
  height: 28px; padding: 0 8px; border: 0; background: none; border-radius: 4px;
  font: 400 13px/28px var(--ui); color: #6A767C; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-jump button:hover { background: #E9EBEC; color: #232729; }
.rec-jump button.on { font-weight: 600; color: #171A1C; }
.rec-jump-body { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .rec-jump { display: none; }
}

/* The folder or file mark before a document's name: Procore's grey, aligned to the text. */
.doc-kind { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: #6A767C; }

/* A segmented choice: several settings, one of them on. Distinct from a button you press to do
   something, which is why it is not a .btn — Procore keeps orange for the action. */
.seg {
  height: 28px; padding: 0 12px; margin-right: 4px;
  border: 1px solid #D6DADC; border-radius: 4px; background: #fff;
  font: 600 12px/26px var(--ui); color: #232729; cursor: pointer;
}
.seg:hover { background: #F4F5F6; }
.seg.on { background: #E4EDFB; border-color: #BCD1F5; color: #1D5CC9; }

/* Procore's photo timeline puts the period above the photographs it holds. */
.photo-month {
  grid-column: 1 / -1; margin: 16px 0 0;
  font: 600 14px/20px var(--ui); letter-spacing: .15px; color: #232729;
}
.photo-grid > .photo-month:first-child { margin-top: 0; }

/* ------------------------------------------------- project admin (Project settings)
   Procore's Admin, measured off KOD341 on 22 Sep 2026: the page's own content on the left,
   a 237px "Project settings" panel down the right listing the pages beside it, and a sticky
   bar at the foot carrying the asterisk note and one Update button. */
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) 237px; gap: 32px; align-items: start; }
.set-main { min-width: 0; }

.set-panel { position: sticky; top: 76px; }
.set-panel-title {
  font: 900 14px/20px var(--ui); text-transform: uppercase; color: #343739;
  padding: 16px 0 0; margin: 0 0 16px;
}
.set-panel nav { display: flex; flex-direction: column; }
.set-tab {
  display: block; height: 28px; padding: 4px 8px 4px 4px; box-sizing: border-box;
  border-left: 6px solid transparent;
  font: 400 14px/20px var(--ui); color: #676767; text-decoration: none;
}
.set-tab:hover { background: #F4F5F6; }
.set-tab.on { border-left-color: #FF5100; background: #E7E7E7; font-weight: 700; }

/* The settings page itself is a form. Its cards are the record card, so a person reading
   Admin and a person reading an RFI are reading the same furniture. */
.set-form .record-card { margin: 16px 0; }
.set-form .field > label { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.set-note { font-size: 13px; line-height: 20px; color: #5E696E; margin: 16px 0 0; }
.set-form .notice-bad { margin: 16px 0 0; }
.set-bar {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  margin-top: 16px; padding: 16px 0; background: var(--surface);
  border-top: 1px solid var(--line);
}
.set-required { font-size: 13px; color: #5E696E; }
.set-required::first-letter { color: #E61920; }

/* On a narrow window the panel goes above the page rather than squeezing it. */
@media (max-width: 1000px) {
  .set-row { grid-template-columns: minmax(0, 1fr); }
  .set-panel { position: static; order: -1; }
  .set-panel nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
}
/* A record head carries a breadcrumb, not a gear, so its sub is not indented past one. */
.page-head.rec-head .sub { margin-left: 0; }
.set-page { display: flow-root; }
.set-bar .set-bad { font-size: 13px; font-weight: 600; color: #E61920; }

/* ---------------------------------------------------- choosing several people
   A tick list, not a token field: on a job of forty you want to see who is on it and which
   company they are from, and the search narrows it rather than hiding it. */
.pick { display: grid; gap: 8px; }
.pick-find {
  width: 100%; height: 36px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid #75838A; border-radius: 4px; font: 400 14px/20px var(--ui); color: #232729;
}
.pick-find:focus-visible { outline: 2px solid #1D5CC9; outline-offset: 1px; }
.pick-list {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
.pick-list > p { margin: 12px 16px; }
.pick-row {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 16px;
  font: 400 14px/20px var(--ui); color: #232729; cursor: pointer;
}
.pick-row:hover { background: #F4F5F6; }
.pick-row input { width: auto; margin: 0; flex: 0 0 auto; }
.pick-count { margin: 0; }
/* The ✕ that drops a grouping, inside the control and before the caret. */
.dd-clear {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 20px; height: 20px; padding: 0; margin-right: 2px;
  background: none; border: 0; border-radius: 4px; color: #6A767C; cursor: pointer;
}
.dd-clear svg { width: 14px; height: 14px; }
.dd-clear:hover { background: #E3E6E8; color: #232729; }
/* Filing a photograph after it was taken: the control sits on the card, not in a menu. */
.photo { position: relative; }
.photo-edit {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  padding: 0; background: rgba(255,255,255,.92); color: #232729;
  border: 1px solid var(--line); border-radius: 4px; cursor: pointer; opacity: 0;
  transition: opacity .12s;
}
.photo:hover .photo-edit, .photo-edit:focus-visible { opacity: 1; }
.photo-edit svg { width: 16px; height: 16px; }
.photo-edit:hover { background: #fff; border-color: #232729; }