/* ============================================================
   Bilt Base - interface

   White cards on a soft grey ground, rounded corners, quiet
   shadows. The character comes from the typography - small caps
   for labels, tabular figures for money, a dark navigation rail -
   rather than from heavy borders or a drafting grid.
   ============================================================ */

:root{
  /* Tell the browser this app has both themes. Without it, form controls,
     scrollbars and default backgrounds are drawn light whatever the theme -
     which is how an <input> that sets no background of its own ended up as
     white paper under the dark theme's near-white ink, and unreadable. Any
     control we forget to style now follows the theme on its own. */
  color-scheme: light dark;

  /* --- signals: used sparingly, the way colour is used on a drawing --- */
  /* The company's colour when it has set one - see applyBrandColour in
     ui.js, which publishes a light and a dark variant so a dark brand
     colour does not end up unreadable on a dark panel. */
  --accent:var(--brand-accent, #1a4fc4);   /* cool cobalt - action */
  --accent-deep:#143c9c;
  --accent-wash:#e6edfb;
  --blueprint:#2d5f7c;       /* structure, information */
  --blueprint-wash:#e6eef3;

  /* --- ground and ink --- */
  --paper:#ffffff;           /* white; hairlines and shadow carry the cards */
  --panel:#ffffff;
  --panel-2:#f7f8fa;
  --spine:#1a1d23;           /* the dark rail */
  --spine-2:#252932;

  --ink:#15171b;
  --ink-2:#535a66;
  --ink-3:#8b919c;

  --rule:#ebedf1;            /* hairlines */
  --rule-2:#dde0e6;
  --rule-ink:#15171b;

  --ok:#15803d;  --ok-wash:#eaf6ee;
  --warn:#b45309; --warn-wash:#fdf3e4;
  --bad:#e07038;  --bad-wash:#fdeee3;
  --info:#2d5f7c; --info-wash:#e9f1f6;
  /* The ink that sits ON a filled signal colour. The signals lighten in dark
     mode, so the text on them has to darken by the same move. */
  --on-signal:#fff;
  /* Ink that sits ON the accent. The accent lightens in dark mode - a brand
     colour has to, to stay readable on a dark panel - so white stops working
     on top of it and the text has to darken by the same move. */
  --on-accent:#fff;
  /* The quiet hover surface. The date picker asked for it and never got it. */
  --wash:var(--panel-2);
  --neutral:#6d727a; --neutral-wash:#f0f1f4;

  /* Rounded throughout. */
  --r:8px; --r-sm:6px; --r-lg:14px; --r-pill:999px;

  --spine-w:228px;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Roboto Mono",Consolas,monospace;


  /* aliases kept so existing markup keeps working */
  --bg:var(--paper);
  --surface:var(--panel);
  --surface-2:var(--panel-2);
  --sidebar:var(--spine);
  --sidebar-2:var(--spine-2);
  --line:var(--rule);
  --line-2:var(--rule-2);
  --accent-dark:var(--accent-deep);
  --accent-soft:var(--accent-wash);
  --ok-bg:var(--ok-wash); --warn-bg:var(--warn-wash);
  --bad-bg:var(--bad-wash); --info-bg:var(--info-wash); --neutral-bg:var(--neutral-wash);
  --shadow-sm:0 1px 2px rgba(17,24,39,.05);
  --shadow:0 1px 2px rgba(17,24,39,.05),0 8px 24px -14px rgba(17,24,39,.22);
  --shadow-md:0 2px 6px rgba(17,24,39,.06),0 14px 34px -18px rgba(17,24,39,.28);
  --shadow-lg:0 24px 60px rgba(17,24,39,.22);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0e1014;
    --panel:#181b21;
    --panel-2:#1f232a;
    --spine:#0a0c0f;
    --spine-2:#181b21;

    --ink:#eceef2;
    --ink-2:#b2b8c2;
    --ink-3:#959cA8;

    --rule:#272b33;
    --rule-2:#343a44;
    --rule-ink:#eceef2;

    --accent:var(--brand-accent-dark, #4679e8);
    --accent-deep:#93b0ee;
    --accent-wash:#142038;
    --ok:#5fbc84; --ok-wash:#122218;
    --warn:#d99a45; --warn-wash:#2a2014;
    --bad:#f0935c; --bad-wash:#2e1d10;
    --info:#6ba9cc; --info-wash:#122029;
    --neutral:#9aa0a8; --neutral-wash:#22262c;
    --blueprint:#6ba9cc; --blueprint-wash:#122029;
    --on-signal:#10141a;
    --on-accent:#10141a;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.7);
    --shadow-md:0 2px 6px rgba(0,0,0,.45),0 14px 34px -18px rgba(0,0,0,.8);
    --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
/* The browser hides [hidden] from its own stylesheet, which any inline
   display: on the element beats - so `el.hidden = true` silently did
   nothing to anything styled inline. Hiding is not a suggestion. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.5 var(--font);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.2}
h1{font-size:22px} h2{font-size:16px} h3{font-size:14.5px}
p{margin:0 0 10px}
hr{border:0;border-top:1px solid var(--rule);margin:18px 0}
code,.mono{font-family:var(--mono)}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ============================================================
   The spine (navigation rail)
   ============================================================ */

.app{display:grid;grid-template-columns:var(--spine-w) 1fr;min-height:100vh}

.sidebar{
  background:var(--spine);color:#b9bec6;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  border-right:1px solid var(--rule);
}

.brand{
  display:flex;align-items:center;gap:11px;padding:20px 18px 18px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.brand-mark{
  width:34px;height:34px;background:var(--accent);display:grid;place-items:center;
  font-weight:800;font-size:13px;color:var(--on-accent);flex:none;letter-spacing:.02em;
  border-radius:10px;
}
/* The product mark, as distinct from .brand-mark, which carries the tenant's
   own initials in the sidebar. */
.logo-mark{display:flex;flex:none;line-height:0}
.logo-mark svg{display:block;border-radius:9px}

.brand-name{
  font-weight:650;font-size:14px;letter-spacing:-.01em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand-sub{
  font-size:9.5px;color:#7d838d;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin-top:3px;
}

.nav{padding:6px 0 12px;flex:1}
.nav-label{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:#848b96;
  padding:18px 12px 7px;font-weight:700;display:flex;align-items:center;gap:8px;
}

/* The "More" shelf: the screens this trade does not use. Quiet, not gone -
   closed by default, and everything inside still routes exactly as before. */
.nav-more{margin-top:18px;border-top:1px solid rgba(255,255,255,.07);padding-top:6px}
.nav-more>summary{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:#848b96;
  padding:8px 12px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:7px;border-radius:var(--r);
}
.nav-more>summary::-webkit-details-marker{display:none}
.nav-more>summary::after{
  content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;
}
.nav-more[open]>summary::after{transform:rotate(45deg)}
.nav-more>summary:hover{color:#d5d9df;background:rgba(255,255,255,.05)}
.nav-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav{padding-left:8px;padding-right:8px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:var(--r);
  color:#b9bec6;font-size:13.5px;font-weight:500;text-decoration:none;position:relative;
  transition:background .12s ease,color .12s ease;
}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav a.active{background:rgba(255,255,255,.1);color:#fff;font-weight:650}
.nav a .ico{width:16px;height:16px;flex:none;opacity:.75}
.nav a.active .ico{opacity:1;color:var(--accent)}
.nav a .count{
  margin-left:auto;font-size:10.5px;font-weight:700;border-radius:var(--r-pill);
  color:#b9bec6;background:rgba(255,255,255,.11);padding:1px 7px;min-width:22px;text-align:center;
}
.nav a.active .count{color:#fff;background:var(--accent)}

.sidebar-foot{padding:12px;border-top:1px solid rgba(255,255,255,.09)}
.who{
  display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;
  border-radius:var(--r);transition:background .12s ease;
}
.who:hover{background:rgba(255,255,255,.07)}
.avatar{
  width:30px;height:30px;background:var(--spine-2);color:#fff;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.who-name{font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.who-role{font-size:11px;color:#8b919c;margin-top:1px}

/* ============================================================
   The sheet (main content)
   ============================================================ */

.main{min-width:0;display:flex;flex-direction:column;background:var(--paper)}

.topbar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  padding:0 22px;display:flex;align-items:center;gap:16px;min-height:60px;
}
.topbar h1{
  flex:none;font-size:17px;font-weight:700;letter-spacing:-.024em;
  padding-right:16px;line-height:1.2;
}
.searchbox{position:relative;flex:1;max-width:400px;margin-left:auto}
.searchbox input{
  width:100%;padding:8px 12px 8px 32px;border:1px solid var(--rule-2);border-radius:var(--r-pill);
  background:var(--panel);font-size:13.5px;transition:border-color .13s ease,box-shadow .13s ease;
}
.searchbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.searchbox svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);opacity:.42;pointer-events:none}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);
  border:1px solid var(--rule-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  max-height:min(60vh,420px);overflow:auto;z-index:60;
}
.search-results a{
  display:flex;gap:12px;align-items:center;padding:9px 12px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.search-results a:last-child{border-bottom:0}
.search-results a:hover{background:var(--accent-wash)}
.search-results .sr-type{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3);
  flex:none;width:92px;font-weight:700;
}
.search-results .sr-empty{padding:16px;color:var(--ink-3);font-size:13.5px;text-align:center}

.content{padding:22px 22px 72px;flex:1}
.page-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ============================================================
   Buttons
   ============================================================ */

.btn{
  appearance:none;border:1px solid var(--rule-2);padding:7px 14px;border-radius:var(--r);
  font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  background:var(--panel);color:var(--ink);white-space:nowrap;line-height:1.4;
  text-decoration:none;box-shadow:var(--shadow-sm);
  transition:background .13s ease,border-color .13s ease,box-shadow .13s ease,transform .08s ease;
}
.btn:hover{background:var(--panel-2);border-color:var(--rule-2);text-decoration:none;box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-sm)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn-primary:hover{background:var(--accent-deep);color:var(--on-accent);border-color:transparent}
.btn-danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.btn-danger:hover{background:var(--bad-wash);border-color:var(--bad)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
.btn-ghost:hover{background:var(--panel-2);color:var(--ink);border-color:transparent;box-shadow:none}
.btn-sm{padding:4px 10px;font-size:12.5px;border-radius:var(--r-sm)}
.btn-icon{padding:5px;width:30px;height:30px;justify-content:center;border-radius:var(--r-sm)}
.btn-block{width:100%;justify-content:center}

/* ============================================================
   Cards
   ============================================================ */

.card{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.card+.card{margin-top:16px}

.card-head{
  padding:13px 18px;border-bottom:1px solid var(--rule);display:flex;align-items:center;
  gap:12px;justify-content:space-between;flex-wrap:wrap;background:transparent;
}
.card-head h2{
  font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--ink-2);
}
.card-head .sub{font-size:12px;color:var(--ink-3);font-weight:400;letter-spacing:0;text-transform:none}
.card-body{padding:18px}
.card-body.tight{padding:0}
.card-foot{padding:12px 18px;border-top:1px solid var(--rule);background:var(--panel-2);font-size:13px}

/* ============================================================
   Tables - dense, ruled, with tabular figures
   ============================================================ */

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{
  text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;padding:9px 14px;border-bottom:1px solid var(--rule-2);background:var(--panel-2);
  white-space:nowrap;position:sticky;top:0;z-index:1;
}
table.data td{padding:9px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr.clickable{cursor:pointer}
table.data tbody tr.clickable:hover{background:var(--panel-2)}
table.data .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.data .num,table.data .ref{font-family:var(--mono)}
table.data .ref{font-size:12px;color:var(--ink-3);white-space:nowrap;letter-spacing:-.01em}
table.data .dim{color:var(--ink-3)}
table.data td .sub{font-size:12px;color:var(--ink-3);margin-top:2px}

/* Hand-written form markup. Most forms go through field() and come out as
   .fld, but a handful of screens write the label themselves - those were
   landing on no rule at all, so the label sat inline with its control. */
.field{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.field>.label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.field>input,.field>select,.field>textarea{
  padding:7px 11px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--panel);color:var(--ink);font-size:13.5px;font-family:inherit;width:100%;
}
.field>input:focus,.field>select:focus,.field>textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.field-row{display:flex;gap:12px;flex-wrap:wrap}

/* The sentence under a control that explains it. */
.hint{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:6px}

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* "Working…" on a button mid-request. Deliberately not a spinner: the button
   is already disabled and the word is the signal. */
/* A turning spinner for anything genuinely in flight. The word "checking"
   reads as a state somebody has settled on; a moving ring reads as work
   still happening, which is the difference that matters on a phone where the
   rest of the step is blank. Under reduced motion it stays a static ring -
   still legible as in-progress, just not moving. */
.bb-spin{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--rule-2);border-top-color:var(--accent);
  vertical-align:-2px;margin-right:5px;flex:none;
}
.bb-spin.lg{width:18px;height:18px;border-width:2.5px;margin-right:9px;vertical-align:-4px}
@keyframes bb-spin-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){
  .bb-spin{animation:bb-spin-rot .7s linear infinite}
}

.spin{opacity:.85}
@keyframes bb-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){.spin{animation:bb-pulse 1.1s ease-in-out infinite}}

/* The proposal editor's own two controls. These carried their border in an
   inline style and set no background or ink at all, which is the same shape
   as the bug that made the chat box unreadable in the dark theme. */
.sec-heading,.sec-body{
  border:1px solid var(--rule-2);border-radius:6px;background:var(--panel);color:var(--ink);
  font-family:inherit;
}
.sec-heading{flex:1;padding:6px 9px;font-weight:600;font-size:14px}
.sec-body{width:100%;padding:9px 11px;font-size:14px;line-height:1.55;resize:vertical}
.sec-heading:focus,.sec-body:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}

/* Chart containers. The drawing inside carries the marks; these just give it
   a box to fill. */
.colchart,.stacked{width:100%;min-width:0}
.prospect-table .c-actions{white-space:nowrap}

/* A line on Today: what is being asked, and the buttons that answer it.
   The answer belongs beside the question - having to open another screen to
   approve something is what made these three separate pages in the first
   place. */
.today-row{
  display:flex;gap:14px;align-items:flex-start;padding:12px 16px;
  border-bottom:1px solid var(--rule);
}
.today-row:last-child{border-bottom:0}
.today-row .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.5}
.today-acts{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:620px){
  .today-row{flex-direction:column;gap:9px}
  .today-acts{width:100%;justify-content:flex-start}
}

/* The offer of a worked example, at the foot of the getting-started list. */
.ob-example{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;margin:8px 10px 0;border-radius:var(--r);
  background:var(--accent-wash);font-size:13px;color:var(--ink-2);
}
.ob-example span{flex:1;min-width:0}

.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* Prospects: fixed columns so the eye runs straight down the page, and an
   action strip whose slots hold their place whether or not a prospect has
   an email or a next status to advance to. */
/* table-layout:fixed reads its column widths from the first row, so they
   belong on the header cells - setting them on the body cells did nothing
   and let the action strip spill over the column to its left. */
.prospect-table{min-width:960px;table-layout:fixed}
.prospect-table th.h-company{width:26%}
.prospect-table th.h-contact{width:16%}
.prospect-table th.h-status{width:12%}
.prospect-table th.h-next{width:14%}
.prospect-table th.h-actions{width:32%}
.prospect-table .c-contact{font-size:12.5px}
.prospect-table .c-status{white-space:nowrap}
.prospect-table .c-next{font-size:12.5px}
.prospect-table .c-company .sub,.prospect-table .c-next .truncate{max-width:100%}
.prospect-name{color:inherit;text-decoration:none}
.prospect-name:hover{color:var(--accent);text-decoration:underline}
.prospect-actions{display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.prospect-advance{flex:0 0 116px;display:flex;justify-content:flex-end}
.prospect-act{flex:0 0 auto;width:30px;padding:3px 0;font-size:12px;text-align:center}
.prospect-act:disabled{opacity:.32;cursor:default;box-shadow:none}

/* Choosing a trade, and the modules it brings with it. */
.trade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.trade{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;cursor:pointer;
  background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);
  transition:border-color .12s ease,background .12s ease;
}
.trade:hover{border-color:var(--accent)}
.trade.on{border-color:var(--accent);background:var(--accent-wash)}
.trade input{position:absolute;opacity:0;pointer-events:none}
.trade:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.trade-name{font-weight:600;font-size:13.5px}
.trade-blurb{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.mod-list{display:flex;flex-direction:column;gap:1px;margin-top:14px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.mod{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;background:var(--panel);cursor:pointer}
.mod.locked{cursor:default}
.mod input{margin:2px 0 0;flex:0 0 auto}
.mod-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mod-name{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mod-why{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ok-wash);color:var(--ok);padding:2px 7px;border-radius:var(--r-pill)}
.mod-blurb{font-size:12.5px;color:var(--ink-2);line-height:1.5}

.empty{padding:46px 20px;text-align:center;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:7px;font-size:15px;letter-spacing:-.01em}
.empty p{max-width:430px;margin:0 auto 16px;font-size:13.5px;line-height:1.6}

/* ============================================================
   Status pills
   ============================================================ */

.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;line-height:1.6;
  text-transform:uppercase;letter-spacing:.07em;
  border:1px solid transparent;background:var(--neutral-wash);color:var(--neutral);
}
.badge .dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;
}
.badge.ok{color:var(--ok);background:var(--ok-wash)}
.badge.warn{color:var(--warn);background:var(--warn-wash)}
.badge.bad{color:var(--bad);background:var(--bad-wash)}
.badge.info{color:var(--info);background:var(--info-wash)}
.badge.neutral{color:var(--neutral);background:var(--neutral-wash)}
.pri-urgent{color:var(--bad);font-weight:700}
.pri-high{color:var(--warn);font-weight:650}

/* ============================================================
   Stat tiles
   ============================================================ */

/* Tiles wrap onto a second row rather than running off the edge. This was a
   horizontally scrolling strip, which hid the last tile with nothing to say
   it was there - a clipped card reads as a broken page, not as something to
   scroll. Wrapping keeps every figure visible at every width. */
.stat-grid{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
  margin-bottom:20px;position:relative;padding:2px;
}
.stat{
  padding:15px 17px 16px;min-width:0;position:relative;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.stat .label{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);font-weight:700;
}
.stat .value{
  font-size:26px;font-weight:700;letter-spacing:-.035em;margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.stat .value.sm{font-size:20px}
.stat .foot{font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.45}
.stat .foot.up{color:var(--ok)} .stat .foot.down{color:var(--bad)}
.stat.accent{border-color:color-mix(in srgb,var(--accent) 32%,var(--rule))}
.stat.accent .value{color:var(--accent-deep)}

.bar{height:5px;background:var(--rule);overflow:hidden;margin-top:10px;border-radius:var(--r-pill)}
.bar>span{display:block;height:100%;background:var(--ink);border-radius:var(--r-pill)}
.bar.ok>span{background:var(--ok)} .bar.warn>span{background:var(--warn)} .bar.bad>span{background:var(--bad)}

/* ============================================================
   Forms - the label lives in the control, related fields share a
   block, long lists become type-ahead pickers.
   ============================================================ */

.fld{
  position:relative;background:var(--panel);border:1px solid var(--rule-2);
  border-radius:var(--r);margin-bottom:12px;
  transition:border-color .13s ease,box-shadow .13s ease;
}
.fld:focus-within{border-color:var(--accent);z-index:2;box-shadow:0 0 0 3px var(--accent-wash)}
.fld.has-error{border-color:var(--bad)}
.fld.has-error:focus-within{box-shadow:0 0 0 3px var(--bad-wash)}
.fld.has-error{border-color:var(--bad)}
.fld.is-disabled{background:var(--panel-2);opacity:.72}

.fld-input{
  width:100%;border:0;background:transparent;border-radius:0;
  padding:20px 12px 7px;font-size:14.5px;color:var(--ink);
  font-family:inherit;line-height:1.4;
}
.fld-input:focus{outline:none}
.fld-input::placeholder{color:transparent}
.fld--area .fld-input{padding-top:24px;resize:vertical;min-height:84px;line-height:1.6}

/* The label sits over the control and lifts once there is content. */
.fld-label{
  position:absolute;left:12px;right:12px;top:14px;pointer-events:none;
  font-size:14.5px;color:var(--ink-3);font-weight:400;letter-spacing:0;text-transform:none;
  transition:transform .12s ease, font-size .12s ease, color .12s ease;
  transform-origin:left top;background:transparent;margin:0;
  /* A long label must never wrap onto a second line - it would land on top
     of the value it is labelling. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fld:focus-within .fld-label,.fld.is-filled .fld-label{right:6px}
.fld-label i{color:var(--accent);font-style:normal;margin-left:2px}
.fld.is-filled .fld-label,
.fld:focus-within .fld-label,
.fld--area .fld-input:not(:placeholder-shown) ~ .fld-label,
.fld--area .fld-input:focus ~ .fld-label{
  transform:translateY(-8px) scale(.68);
  color:var(--ink-3);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.fld:focus-within .fld-label{color:var(--ink)}
.fld.has-error .fld-label{color:var(--bad)}
.fld--area .fld-label{top:16px}



.fld-affix{
  position:absolute;top:50%;transform:translateY(-2px);font-size:14px;color:var(--ink-3);
  pointer-events:none;font-variant-numeric:tabular-nums;
}
.fld-affix--left{left:12px}
.fld-affix--right{right:12px}
.fld.has-prefix .fld-input{padding-left:26px}
.fld.has-prefix .fld-label{left:26px}
.fld.has-suffix .fld-input{padding-right:32px}

.fld-hint{
  margin:0;padding:0 12px 8px;font-size:11.5px;color:var(--ink-3);line-height:1.5;
}
.fld-error{
  margin:0;padding:0 12px 8px;font-size:11.5px;color:var(--bad);font-weight:600;line-height:1.5;
}
.fld.has-error .fld-hint{display:none}

/* Native select keeps its own affordance. */
.fld--select .fld-input,.fld--combo .fld-input{
  appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
}
.fld--combo .fld-input{cursor:text}
.fld-caret{
  position:absolute;right:12px;top:22px;width:8px;height:8px;pointer-events:none;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .14s ease;
}
.fld.is-open .fld-caret{transform:rotate(-135deg);border-color:var(--ink)}

/* Type-ahead list */
.combo-list{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:60;
  background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);
  max-height:264px;overflow:auto;box-shadow:var(--shadow-md);padding:4px;
}
.combo-opt{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:9px 11px;font-size:14px;color:var(--ink);cursor:pointer;border-radius:var(--r-sm);
}
.combo-opt.active{background:var(--accent-wash);color:var(--accent-deep)}
.combo-opt.on{font-weight:650}
.combo-opt.on::after{content:"✓";float:right;color:var(--accent)}
.combo-list.is-empty::after{
  content:"No match";display:block;padding:14px 12px;font-size:13px;color:var(--ink-3);text-align:center;
}

/* Segmented control for short, mutually exclusive choices */
.fld--seg{border:0;background:transparent;margin-bottom:12px}
.fld-seglabel{
  display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--ink-3);font-weight:700;margin-bottom:6px;
}
.fld-seglabel i{color:var(--accent);font-style:normal}
.seg{
  display:flex;gap:3px;background:var(--panel-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:3px;overflow-x:auto;
}
.seg-opt{
  flex:1 0 auto;appearance:none;border:0;background:transparent;border-radius:var(--r-sm);
  padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:background .12s ease,color .12s ease,box-shadow .12s ease;
}
.seg-opt:hover:not(.on){background:var(--panel);color:var(--ink)}
.seg-opt.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:700}
.seg-opt:disabled{opacity:.5;cursor:not-allowed}

/* Date shortcuts, only while the field has focus */
.fld-dates{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:55;display:flex;
  background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-md);
}
.fld-dates button{
  flex:1;appearance:none;border:0;border-right:1px solid var(--rule);background:transparent;
  padding:8px 6px;font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap;
}
.fld-dates button:last-child{border-right:0}
.fld-dates button:hover{background:var(--accent-wash);color:var(--accent-deep)}

/* Related fields share one block. */
.fld-group{
  display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  border:1px solid var(--rule-2);border-radius:var(--r);margin-bottom:12px;
  background:var(--panel);transition:border-color .13s ease,box-shadow .13s ease;
}
.fld-group .fld{border:0;margin:0;border-right:1px solid var(--rule);border-radius:0;box-shadow:none}
.fld-group .fld:last-child{border-right:0}
.fld-group .fld:focus-within{box-shadow:none}
.fld-group .fld--seg{padding:10px 12px}
.fld-group:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}

/* Folded-away detail */
.fld-more{margin-bottom:12px;border-top:1px solid var(--rule)}
.fld-more summary{
  cursor:pointer;padding:11px 2px;font-size:11px;font-weight:700;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.13em;list-style:none;display:flex;align-items:center;gap:8px;
}
.fld-more summary::-webkit-details-marker{display:none}
.fld-more summary::before{
  content:"";width:7px;height:7px;border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .14s ease;
}
.fld-more[open] summary::before{transform:rotate(45deg)}
.fld-more summary:hover{color:var(--ink)}
.fld-more-body{padding-top:4px}

.check{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;user-select:none;padding:4px 0}
.check input{width:16px;height:16px;accent-color:var(--accent);margin:0;flex:none}
.inline-form{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.inline-form .fld{margin-bottom:0;flex:1 1 160px}
.inline-form .btn{margin-top:9px}

.toolbar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.toolbar input[type="search"],.toolbar input[type="text"],.toolbar select,.toolbar input[type="date"]{
  padding:7px 11px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--panel);
  font-size:13.5px;box-shadow:var(--shadow-sm);
}
.toolbar input[type="search"]{min-width:220px}
.toolbar input:focus,.toolbar select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.toolbar .spacer{flex:1}

/* The plain control. This class was used in six places and defined in none,
   so it fell through to the browser's white default while inheriting the
   theme's ink - white text on white paper the moment the theme went dark. */
.inp{
  padding:7px 11px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--panel);color:var(--ink);font-size:13.5px;font-family:inherit;
}
.inp::placeholder{color:var(--ink-3)}
.inp:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
textarea.inp{resize:vertical;line-height:1.55}
.chips{
  display:flex;gap:3px;flex-wrap:wrap;background:var(--panel-2);
  border:1px solid var(--rule);border-radius:var(--r);padding:3px;
}
.chip{
  padding:5px 12px;border:0;background:transparent;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink-2);
  text-decoration:none;display:inline-block;transition:background .12s ease,color .12s ease;
}
.chip:hover{background:var(--panel);color:var(--ink);text-decoration:none}
.chip.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:700}

/* ============================================================
   Modals - a sheet pulled onto the table
   ============================================================ */

.modal-backdrop{
  position:fixed;inset:0;background:rgba(21,23,27,.55);
  z-index:100;display:flex;align-items:flex-start;justify-content:center;
  padding:6vh 16px 16px;overflow-y:auto;
}
.modal{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
  width:100%;max-width:620px;animation:sheet .16s cubic-bezier(.2,.8,.3,1);
  margin-bottom:6vh;position:relative;
}
.modal.wide{max-width:1040px}
.modal.narrow{max-width:440px}
@keyframes sheet{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
.modal-head{
  padding:16px 20px 14px;border-bottom:1px solid var(--rule);display:flex;align-items:center;
  justify-content:space-between;gap:12px;background:transparent;
}
.modal-head h2{font-size:16px;letter-spacing:-.02em;font-weight:700}
.modal-body{padding:20px;max-height:calc(80vh - 130px);overflow-y:auto}
.modal-foot{
  padding:14px 20px;border-top:1px solid var(--rule);display:flex;justify-content:flex-end;
  gap:8px;flex-wrap:wrap;background:var(--panel-2);position:sticky;bottom:0;
}
.modal-foot .kbd-hint{
  margin-right:auto;align-self:center;font-size:11px;color:var(--ink-3);
  font-family:var(--mono);letter-spacing:-.02em;
}
@media (max-width:900px){.modal-foot .kbd-hint{display:none}}
.modal-foot .left{margin-right:auto}

.toast-wrap{
  position:fixed;bottom:16px;right:16px;z-index:200;display:flex;flex-direction:column-reverse;
  gap:8px;max-width:min(440px,calc(100vw - 32px));
}
.toast{
  /* --ink flips to a light colour in dark mode, which put white text on a
     white slab. --spine is the dark rail: dark in both themes, so the white
     text on it reads either way. */
  background:var(--spine);color:#fff;padding:12px 16px;border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  font-size:13.5px;animation:slide .16s ease-out;display:flex;gap:10px;align-items:flex-start;
}
.toast.err{background:var(--bad);color:var(--on-signal)}
.toast.ok{background:var(--ok);color:var(--on-signal)}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ============================================================
   Detail pages - the title block
   ============================================================ */

.detail-head{
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:20px;
  padding:20px 22px;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);position:relative;
}
.detail-head .titles{flex:1;min-width:240px}
.detail-head .eyebrow{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:5px;
  letter-spacing:.06em;text-transform:uppercase;
}
.detail-head h1{margin-bottom:9px;font-size:23px;letter-spacing:-.028em}
.detail-meta{
  display:flex;gap:0;flex-wrap:wrap;color:var(--ink-3);font-size:12.5px;align-items:center;
}
.detail-meta>*{padding-right:14px;margin-right:14px;border-right:1px solid var(--rule)}
.detail-meta>*:last-child{border-right:0;margin-right:0;padding-right:0}
.detail-meta b{color:var(--ink-2);font-weight:600;text-transform:uppercase;font-size:9.5px;letter-spacing:.13em}

.cols{display:grid;gap:16px;grid-template-columns:minmax(0,2fr) minmax(290px,1fr);align-items:start}
/* A main column beside a sidebar should not stretch the sidebar to match, so
   .cols starts its children. Two equal columns of cards are a different
   thing: side by side at different heights reads as a mistake rather than as
   information, so the even variant stretches. */
.cols.even{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:stretch}
.cols.even > *{display:flex;flex-direction:column}
.cols.even > * > .card{flex:1}

/* Tabs read as index tabs on a document set. */
.tabs{
  display:flex;gap:4px;margin-bottom:0;overflow-x:auto;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:5px;box-shadow:var(--shadow-sm);
}
/* The directory strip uses links, not buttons - each tab is its own page. */
.tabs a.dir-tab{
  border-radius:var(--r);padding:9px 14px;font-size:12.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;letter-spacing:-.005em;
}
.tabs a.dir-tab:hover:not(.on){background:var(--panel-2);color:var(--ink)}
.tabs a.dir-tab.on{background:var(--accent-wash);color:var(--accent-deep);font-weight:700}

.tabs button{
  appearance:none;background:transparent;border:0;border-radius:var(--r);
  padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  white-space:nowrap;letter-spacing:-.005em;position:relative;
  transition:background .12s ease,color .12s ease;
}
.tabs button:hover{color:var(--ink);background:var(--panel-2)}
.tabs button.on{color:#fff;background:var(--spine);font-weight:650}
.tabs .tab-count{
  font-size:10.5px;color:var(--ink-3);margin-left:6px;font-weight:700;
  background:var(--panel-2);border-radius:var(--r-pill);padding:1px 6px;
}
.tabs button.on .tab-count{color:var(--ink);background:rgba(255,255,255,.85)}
#tabBody{padding-top:18px}

.kv{display:grid;grid-template-columns:auto 1fr;gap:0;font-size:13.5px}
.kv dt{
  color:var(--ink-3);white-space:nowrap;padding:7px 14px 7px 0;border-bottom:1px solid var(--rule);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;align-self:center;
}
.kv dd{
  margin:0;text-align:right;font-weight:600;padding:7px 0;border-bottom:1px solid var(--rule);
}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}

.money-rows>div{
  display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px;
  font-variant-numeric:tabular-nums;border-bottom:1px dotted var(--rule-2);
}
.money-rows>div.total{
  border-top:2px solid var(--ink);border-bottom:0;margin-top:5px;padding-top:10px;
  font-size:18px;font-weight:700;letter-spacing:-.02em;
}
.money-rows>div.sub{color:var(--ink-3);font-size:12.5px}
.prose{white-space:pre-wrap;line-height:1.65;font-size:14px}
.prose:empty::after{content:"-";color:var(--ink-3)}

/* ============================================================
   Line item editor
   ============================================================ */

.items-editor{width:100%;min-width:1040px;border-collapse:collapse;font-size:13.5px}
.items-editor td:nth-child(3){min-width:280px}
.items-editor th{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;text-align:left;padding:0 6px 7px;border-bottom:1px solid var(--rule-2);
}
.items-editor td{padding:3px 6px;vertical-align:top}
.items-editor input,.items-editor select,.items-editor textarea{
  width:100%;padding:7px 9px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--panel);font-size:13.5px;
}
.items-editor input:focus,.items-editor select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.items-editor .amt{
  text-align:right;font-variant-numeric:tabular-nums;padding-top:13px;font-weight:650;
  white-space:nowrap;font-family:var(--mono);font-size:13px;
}
.items-editor .drag{cursor:grab;color:var(--ink-3);padding-top:13px;text-align:center;user-select:none}
.items-editor tr.dragging{opacity:.35}
.items-editor tr.over td{box-shadow:inset 0 2px 0 var(--accent)}
.col-code{width:190px} .col-qty{width:80px} .col-unit{width:78px} .col-price{width:110px}
.col-kind{width:124px} .col-amt{width:112px} .col-x{width:36px}

/* ============================================================
   Photographs - contact-sheet treatment
   ============================================================ */

.photo-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.photo{
  border:1px solid var(--rule);overflow:hidden;background:var(--panel);border-radius:var(--r);
  cursor:pointer;position:relative;box-shadow:var(--shadow-sm);
  transition:box-shadow .14s ease,transform .14s ease;
}
.photo:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--panel-2)}
.photo .doc-ico{
  width:100%;aspect-ratio:4/3;display:grid;place-items:center;background:var(--panel-2);
  color:var(--ink-3);font-size:11px;font-weight:700;letter-spacing:.12em;
}
.photo .cap{padding:7px 9px;font-size:12.5px;line-height:1.4;border-top:1px solid var(--rule)}
.photo .cap .meta{
  color:var(--ink-3);font-size:10.5px;margin-top:3px;display:flex;gap:5px;flex-wrap:wrap;
  font-family:var(--mono);
}
.photo .stage{
  position:absolute;top:7px;left:7px;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;padding:3px 8px;border-radius:var(--r-pill);
  background:rgba(21,23,27,.78);color:#fff;backdrop-filter:blur(4px);
}
.lightbox{position:fixed;inset:0;background:rgba(10,11,13,.96);z-index:150;display:flex;flex-direction:column}
.lightbox-top{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;color:#fff;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.lightbox-top .btn{background:transparent;border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.lightbox-top .btn:hover{background:rgba(255,255,255,.1);border-color:#fff}
.lightbox-body{flex:1;display:flex;align-items:center;justify-content:center;padding:0 12px;min-height:0}
.lightbox-body img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-foot{padding:14px 18px 22px;color:#dcdad4;text-align:center;font-size:13.5px}
.lightbox-foot .meta{color:#83888f;font-size:11.5px;margin-top:5px;font-family:var(--mono)}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);background:transparent;
  border:0;background:rgba(255,255,255,.12);color:#fff;width:44px;height:44px;border-radius:50%;
  font-size:20px;cursor:pointer;display:grid;place-items:center;
}
.lb-nav:hover{background:rgba(255,255,255,.14)}
.lb-nav.prev{left:14px} .lb-nav.next{right:14px}

.dropzone{
  border:1.5px dashed var(--rule-2);border-radius:var(--r-lg);padding:28px;text-align:center;
  color:var(--ink-3);cursor:pointer;background:var(--panel-2);
  transition:border-color .13s ease,background .13s ease,color .13s ease;
}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-deep)}
.upload-list{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.upload-item{
  display:flex;gap:10px;align-items:center;font-size:12.5px;padding:8px 11px;
  background:var(--panel-2);border-radius:var(--r-sm);
}
.upload-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   Schedule board
   ============================================================ */

/* Seven days at a 150px floor needs 1,050px, which the content column does
   not have - and overflow:hidden meant the last day and a half of the week
   were simply gone, with nothing to say so. Narrower floor so the week fits,
   and a scroll rather than a clip if it still cannot. */
.sched{
  display:grid;grid-template-columns:repeat(7,minmax(112px,1fr));gap:0;
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow-x:auto;box-shadow:var(--shadow-sm);
}
.sched-day{
  background:var(--panel);min-height:140px;padding:8px;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.sched-day.today{background:var(--accent-wash)}
.sched-day.weekend{background:var(--panel-2)}
.sched-day.drop-target{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-wash)}
.sched-item.dragging{opacity:.45}
.sched-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sched-day .d{
  font-size:9.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid var(--rule);
}
.sched-day.today .d{color:var(--accent-deep);border-bottom-color:var(--accent)}
.sched-item{
  background:var(--panel-2);border-left:3px solid var(--ink);border-radius:var(--r-sm);
  padding:6px 8px;font-size:12px;margin-bottom:5px;cursor:pointer;line-height:1.35;
}
.sched-item:hover{background:var(--accent-wash)}
.sched-item .t{font-weight:600;display:block}
.sched-item .c{color:var(--ink-3);font-size:10.5px;font-family:var(--mono)}
.sched-item.urgent{border-left-color:var(--bad)}
.sched-item.high{border-left-color:var(--warn)}
.sched-item.done{border-left-color:var(--ok);opacity:.6}

/* ============================================================
   Misc
   ============================================================ */

.timeline{position:relative;padding-left:18px}
.timeline::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:var(--rule-2)}
.timeline .ev{position:relative;padding-bottom:14px;font-size:13px}
.timeline .ev::before{
  content:"";position:absolute;left:-18px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--panel);border:2px solid var(--rule-2);
}
.timeline .ev .when{color:var(--ink-3);font-size:11px;margin-top:2px;font-family:var(--mono)}

/* ============================================================
   Discussion - one thread component for every kind of record
   ============================================================ */

.disc-head-right{display:flex;align-items:center;gap:14px}
.disc-count{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none}
.disc-toggle{
  display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);
  font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;white-space:nowrap;
}
.disc-toggle input{accent-color:var(--accent);width:13px;height:13px;cursor:pointer;margin:0}
.disc-empty{margin:0;padding:14px 0 4px;color:var(--ink-3);font-size:13.5px}

.note{display:flex;gap:11px;padding:14px 0;border-bottom:1px solid var(--rule)}
.note:first-child{padding-top:2px}
.note:last-of-type{border-bottom:0}
.note .avatar{background:var(--spine);width:32px;height:32px;font-size:11px;border-radius:50%;flex:none}
.note-main{flex:1;min-width:0}
.note-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3}
.note-who{font-weight:650;font-size:13.5px}
.note-title{font-size:11.5px;color:var(--ink-3)}
.note-when{font-size:11.5px;color:var(--ink-3)}
.note-body{font-size:14px;margin-top:5px;line-height:1.6;overflow-wrap:break-word}
.note.is-settled{opacity:.62}
.note.is-settled .note-body{color:var(--ink-2)}
.note.is-pinned{
  background:var(--info-wash);margin:0 -18px;padding-left:18px;padding-right:18px;
  border-radius:var(--r);border-bottom-color:transparent;
}

/* A name in a note is the reason the note reached you. */
.mention{
  background:var(--accent-wash);color:var(--accent-deep);font-weight:650;
  padding:1px 5px;border-radius:var(--r-sm);
}

.note-tools{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px}
.linky{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--ink-3);font-family:inherit;
}
.linky:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.linky.danger:hover{color:var(--bad)}
.linky:disabled{opacity:.5;cursor:default;text-decoration:none}

.note-replies{
  margin-top:11px;padding-left:14px;border-left:2px solid var(--rule);
  display:flex;flex-direction:column;
}
.note.is-reply{padding:9px 0;border-bottom:0}
.note.is-reply .avatar{width:26px;height:26px;font-size:10px}
.note.is-reply .note-body{font-size:13.5px}
.reply-slot:not(:empty){margin-top:10px;padding-left:14px;border-left:2px solid var(--rule)}

.disc-composer{margin-top:16px}
.disc-composer.is-reply{margin-top:0}
.disc-input-wrap{position:relative}
.disc-input{
  width:100%;padding:11px 13px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--panel);font-family:inherit;font-size:14px;line-height:1.6;resize:vertical;
  transition:border-color .13s ease,box-shadow .13s ease;
}
.disc-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.disc-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;flex-wrap:wrap}
.disc-share{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);cursor:pointer}
.disc-share input{accent-color:var(--accent);width:14px;height:14px;margin:0;cursor:pointer}
.note-edit{margin-top:6px}

/* The @ picker */
.mention-list{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:70;
  background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);
  box-shadow:var(--shadow-md);padding:4px;max-height:230px;overflow-y:auto;
}
.mention-opt{
  display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;border:0;
  background:transparent;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--ink);
}
.mention-opt.active{background:var(--accent-wash);color:var(--accent-deep)}
.mention-name{font-weight:600}
.mention-role{font-size:11.5px;color:var(--ink-3)}

/* In a dialog the thread is the whole content, so it loses the card chrome. */
.disc-dialog .card{border:0;box-shadow:none;border-radius:0;overflow:visible}
.disc-dialog .card-head{padding:0 0 10px;border-bottom:1px solid var(--rule)}
.disc-dialog .card-head h2{display:none}
.disc-dialog .card-body{padding:0}

.checklist{list-style:none;margin:0;padding:0}
.checklist li{
  display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-bottom:1px solid var(--rule);font-size:13.5px;
}
.checklist li:last-child{border-bottom:0}
.checklist input{width:16px;height:16px;accent-color:var(--accent);margin:1px 0 0;flex:none;cursor:pointer}
.checklist li.done .txt-line{text-decoration:line-through;color:var(--ink-3)}
.checklist .txt{flex:1}
.checklist .by{font-size:11px;color:var(--ink-3);font-family:var(--mono);margin-top:2px}

.tag{
  display:inline-block;font-size:10.5px;background:var(--panel-2);color:var(--ink-2);
  padding:2px 8px;margin:2px 3px 0 0;border-radius:var(--r-pill);font-weight:600;
}
.share-link{
  display:flex;gap:8px;align-items:center;background:var(--panel-2);
  border:1px solid var(--rule);border-radius:var(--r);padding:8px 10px;font-size:12.5px;
}
.share-link code{
  flex:1;font-family:var(--mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink-2);
}

/* No accent rail: a thick left border against a rounded corner renders as a
   wedge, and a blue bar on a neutral note says nothing the note does not.
   State is carried by the wash and a hairline that agrees with it. */
.note-box{
  background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--shadow-sm);
  padding:12px 15px;font-size:13px;margin-bottom:16px;line-height:1.6;
}
.note-box.warn{border-color:var(--warn);background:var(--warn-wash)}
.note-box.bad{border-color:var(--bad);background:var(--bad-wash)}

.skeleton{
  background:linear-gradient(90deg,var(--rule) 25%,var(--panel-2) 50%,var(--rule) 75%);
  background-size:200% 100%;animation:sk 1.3s infinite;height:14px;border-radius:var(--r-sm);
}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.loading-page{padding:36px 0;display:flex;flex-direction:column;gap:12px;max-width:620px}
.muted{color:var(--ink-3)}
/* Who and where. The two things somebody scans a screen looking for, so
   they carry weight wherever they appear - not only inside a table. */
.strong{font-weight:650}
.addr{font-weight:650}
.right{text-align:right}
.nowrap{white-space:nowrap}
.mt{margin-top:14px} .mb{margin-bottom:14px}
.pill-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* Project stage - where the job has got to */
.stage-bar{
  display:flex;gap:4px;overflow-x:auto;margin-bottom:20px;padding:5px;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--panel);
  box-shadow:var(--shadow-sm);
}
.stage-step{
  appearance:none;flex:1 0 auto;border:0;background:transparent;border-radius:var(--r);
  padding:9px 16px;font-size:10.5px;font-weight:700;color:var(--ink-3);cursor:pointer;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.1em;position:relative;
  transition:background .12s ease,color .12s ease;
}
.stage-step:hover:not(:disabled):not(.on){background:var(--panel-2);color:var(--ink)}
.stage-step.past{color:var(--ink-2);background:var(--panel-2)}
.stage-step.on{color:#fff;background:var(--accent)}
.stage-step:disabled{cursor:default}

/* Roles matrix */
.role-matrix{min-width:780px}
.role-matrix th{vertical-align:bottom}
.role-matrix td{vertical-align:top}
.role-matrix input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.role-matrix input:disabled{opacity:.35;cursor:not-allowed}
.role-matrix tr.group-row td{
  background:var(--panel-2);color:var(--ink-2);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;font-weight:700;padding:8px 14px;
}
.role-matrix tbody tr:hover:not(.group-row){background:var(--panel-2)}

/* ============================================================
   Sign-in
   ============================================================ */

.login-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,#232733,var(--spine));
}
.login-card{
  background:var(--panel);border:1px solid var(--rule);border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  width:100%;max-width:404px;padding:32px;position:relative;
}
.login-card .brand{padding:0 0 20px;color:var(--ink);border-bottom:1px solid var(--rule)}
.login-card .brand-name{color:var(--ink)}
.login-card h1{font-size:21px;margin:20px 0 5px;letter-spacing:-.025em}
.login-card .lede{color:var(--ink-3);font-size:13.5px;margin-bottom:20px}
.login-err{
  background:var(--bad-wash);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 25%,transparent);
  border-radius:var(--r);padding:11px 13px;font-size:13px;margin-bottom:14px;
}
/* The agreement box on signup. Deliberately not styled down: it has to be
   read to be worth anything, so it sits in the flow at full size. */
.agree{
  display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;
  font-size:13px;line-height:1.55;color:var(--ink-2);cursor:pointer;
}
.agree input{
  width:17px;height:17px;margin:1px 0 0;flex:0 0 auto;cursor:pointer;accent-color:var(--accent);
}
.agree a{color:var(--accent-deep);text-decoration:underline}
.agree a:hover{color:var(--accent)}

/* Drag-to-reorder states, shared by sections, tasks and line items. */
.dragging{opacity:.45}
.drop-above{box-shadow:0 -3px 0 0 var(--accent) !important}
.drag-handle{user-select:none}

/* The whole-page drop target: shown only while files hover over a record. */
.page-drop{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.82));
  border:3px dashed var(--accent);pointer-events:none;
}
.page-drop div{
  background:var(--panel);border:1px solid var(--rule);border-radius:12px;
  padding:22px 34px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.16);
}
.page-drop b{display:block;font-size:17px;margin-bottom:4px}
.page-drop span{font-size:13px;color:var(--ink-3)}

.demo-users{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);font-size:11.5px;color:var(--ink-3)}
.demo-users button{
  display:block;width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:8px 11px;margin-top:6px;cursor:pointer;font-size:12px;color:var(--ink-2);
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.demo-users button:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-wash)}

/* ============================================================
   Field Mode - the same language, sized for a glove
   ============================================================ */

body.field-mode{background:var(--paper)}
.field-app{
  display:flex;flex-direction:column;min-height:100dvh;
  max-width:640px;margin:0 auto;background:var(--paper);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
}
.field-top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top,14px));
  background:var(--spine);color:#fff;
}
.field-org{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7d838d;font-weight:700;
}
.field-top h1{
  font-size:17px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.02em;margin-top:2px;
}
.field-back{
  appearance:none;background:rgba(255,255,255,.1);border:0;color:#fff;flex:none;
  width:38px;height:38px;font-size:22px;line-height:1;cursor:pointer;border-radius:50%;
}
.field-back:active{background:rgba(255,255,255,.16)}
.field-avatar{
  appearance:none;border:0;flex:none;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;
}
.field-body{flex:1;padding:16px 14px 96px}

.field-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;
  background:var(--panel);border-top:1px solid var(--rule-2);
  padding-bottom:env(safe-area-inset-bottom,0px);max-width:640px;margin:0 auto;
}
.field-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 11px;color:var(--ink-3);text-decoration:none;
  font-size:10px;font-weight:650;letter-spacing:.01em;
}
.field-nav a svg{width:21px;height:21px}
.field-nav a.on{color:var(--accent)}
.field-nav a:active{opacity:.6}

.field-hello{margin-bottom:18px}
.field-hello h2{font-size:21px;letter-spacing:-.03em}
.field-hello p{color:var(--ink-3);font-size:13px;margin:4px 0 0}

.field-heading{
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;margin:22px 0 10px;display:flex;align-items:center;gap:9px;
}

.field-card{
  display:block;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:15px 16px;margin-bottom:11px;color:inherit;text-decoration:none;position:relative;
}
a.field-card:active{background:var(--panel-2);text-decoration:none;transform:scale(.995)}
.field-card h3{font-size:16px;margin:6px 0 4px;line-height:1.3;letter-spacing:-.02em}
.field-card-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.field-ref{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.field-meta{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.field-progress{margin-top:9px;font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.field-card-foot{
  display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--rule);font-size:11px;color:var(--ink-3);font-family:var(--mono);
}

.field-alert{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--shadow-sm);
  padding:13px 15px;margin-bottom:10px;font-size:13.5px;color:var(--ink);text-decoration:none;
}
a.field-alert:active{background:var(--accent-wash);text-decoration:none}
.field-alert.warn{border-color:var(--warn);background:var(--warn-wash)}
.field-alert.ok{border-color:var(--ok);background:var(--ok-wash)}
.field-alert span{font-size:20px;color:var(--ink-3)}

.field-empty{
  text-align:center;padding:42px 20px;background:var(--panel);
  border:1px dashed var(--rule-2);border-radius:var(--r-lg);
}
.field-empty h3{margin:10px 0 6px;font-size:15px;letter-spacing:-.015em}
.field-empty p{color:var(--ink-3);font-size:13px;max-width:320px;margin:0 auto}

.field-tiles{
  display:grid;gap:0;border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.field-tile{
  display:flex;align-items:center;gap:12px;background:var(--panel);
  padding:13px 15px;color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);
}
.field-tile:last-child{border-bottom:0}
.field-tile:active{background:var(--panel-2);text-decoration:none}
.field-tile-glyph{font-size:19px}
.field-tile small{
  display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px;font-weight:500;
}

.field-wo-head{margin-bottom:16px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.field-wo-head h2{font-size:20px;margin:8px 0 5px;line-height:1.24;letter-spacing:-.028em}
.field-address{
  display:block;margin-top:9px;font-size:13.5px;padding:9px 12px;
  background:var(--panel);border:1px solid var(--rule-2);font-weight:650;
}
.field-dates{margin-top:8px;font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.field-dates.late{color:var(--bad);font-weight:700}

.field-status-row,.field-stage-row{display:flex;gap:0;overflow-x:auto;margin-bottom:16px;border:1px solid var(--rule-2)}
.field-stage-row{margin-bottom:12px}
.field-status{
  appearance:none;flex:1 0 auto;border:0;border-right:1px solid var(--rule);background:var(--panel);
  padding:11px 14px;font-size:10.5px;font-weight:700;color:var(--ink-3);
  cursor:pointer;white-space:nowrap;text-transform:uppercase;letter-spacing:.1em;
}
.field-status.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-sm)}

.field-section{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:15px 16px;margin-bottom:11px;
}
.field-section h3{
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;
}
.field-count{
  font-size:11px;font-weight:700;color:var(--ink-2);background:var(--panel-2);
  border-radius:var(--r-pill);padding:2px 8px;letter-spacing:0;text-transform:none;
}
.field-section .muted{font-size:13.5px;margin:0}
.field-prose{white-space:pre-wrap;line-height:1.6;font-size:14.5px}

.field-tasks{list-style:none;margin:8px 0 0;padding:0}
.field-tasks li{border-bottom:1px solid var(--rule)}
.field-tasks li:last-child{border-bottom:0}
.field-tasks label{
  display:flex;gap:13px;align-items:flex-start;padding:14px 2px;cursor:pointer;
  font-size:15px;line-height:1.4;
}
.field-tasks input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--accent)}
.field-tasks .task-wrap{flex:1}
.field-tasks li.done .task-text{color:var(--ink-3);text-decoration:line-through}
.field-tasks li.done small{color:var(--ink-3)}
.field-tasks small{
  display:block;font-size:10.5px;color:var(--ink-3);text-decoration:none;margin-top:3px;
  font-family:var(--mono);
}
.field-tasks li.done small{text-decoration:none}

.field-add{
  display:flex;gap:0;margin-top:12px;border:1px solid var(--rule-2);
  border-radius:var(--r);overflow:hidden;
}
.field-add:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.field-add input{flex:1;padding:12px;border:0;background:var(--panel);font-size:16px}
.field-add input:focus{outline:none}
.field-add button{flex:none;padding:12px 16px;border:0;border-radius:0;box-shadow:none}

.field-photo-actions{display:flex;gap:8px;margin-bottom:12px}
.field-capture{flex:1;justify-content:center;cursor:pointer;font-size:14px;padding:12px 14px}
.field-upload-status{
  margin-bottom:10px;font-size:12.5px;color:var(--ink-2);background:var(--panel-2);
  padding:10px 13px;border:1px solid var(--rule);border-radius:var(--r);
}
.field-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.field-photo{
  appearance:none;border:1px solid var(--rule);padding:0;position:relative;aspect-ratio:1;
  overflow:hidden;background:var(--panel-2);cursor:pointer;border-radius:var(--r);
}
.field-photo img{width:100%;height:100%;object-fit:cover;display:block}
.field-doc{display:grid;place-items:center;width:100%;height:100%;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink-3)}
.field-photo .stage{
  position:absolute;left:5px;top:5px;font-size:8px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;background:rgba(21,23,27,.75);color:#fff;padding:2px 7px;border-radius:var(--r-pill);
}

.field-list{list-style:none;margin:8px 0 0;padding:0}
.field-list li{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;
}
.field-list li:last-child{border-bottom:0}
.field-list small{
  display:block;color:var(--ink-3);font-size:11px;margin-top:2px;font-family:var(--mono);
}

.field-crew{display:grid;gap:0}
.field-person{
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14.5px;
  padding:9px 0;border-bottom:1px solid var(--rule);
}
.field-person:last-child{border-bottom:0}
.field-person a{font-size:14px;font-family:var(--mono)}

.field-complete{margin:18px 0 8px;padding:15px;font-size:15px;font-weight:700;letter-spacing:-.01em}

.field-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--rule)}
.field-actions .btn{flex:1 0 auto}

.field-filter{
  display:flex;gap:3px;margin-bottom:14px;padding:3px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--panel-2);
}
.field-filter .chip{flex:1;text-align:center;text-decoration:none;padding:10px 14px;font-size:12.5px}

.field-form{
  display:grid;gap:14px;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:16px;margin-bottom:14px;
}
.field-form label{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-3);font-weight:700;
}
.field-form input,.field-form select,.field-form textarea{
  display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--rule-2);
  border-radius:var(--r);background:var(--panel);font-size:16px;font-family:inherit;color:inherit;
}
.field-form input:focus,.field-form select:focus,.field-form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.field-form textarea{resize:vertical;line-height:1.55}
.field-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-check{
  display:flex;align-items:center;gap:11px;text-transform:none;letter-spacing:0;
  font-size:14.5px;color:var(--ink);font-weight:500;
}
.field-check input{width:21px;height:21px;margin:0;flex:none;accent-color:var(--accent)}

@media (min-width:641px){
  .field-app{margin:20px auto;border:1px solid var(--rule-2);min-height:calc(100dvh - 40px)}
  .field-nav{position:sticky;bottom:0}
}

/* ============================================================
   Responsive
   ============================================================ */

.mobile-bar{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:262px;z-index:90;height:100dvh;
    transform:translateX(-100%);transition:transform .16s ease;box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(21,23,27,.55);z-index:85}
  .mobile-bar{display:flex;align-items:center;gap:10px}
  .topbar{padding:0 12px;flex-wrap:wrap;row-gap:8px;min-height:auto;padding-top:8px;padding-bottom:8px}
  .topbar h1{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;border-right:0}
  .searchbox{order:3;flex:1 0 100%;max-width:none;margin-left:0}
  .page-actions{flex:none;gap:5px;max-width:100%;overflow-x:auto}
  .page-actions .btn{padding:7px 11px;font-size:12.5px}
  .content{padding:14px 12px 80px}
  .cols{grid-template-columns:1fr}
  .stat-grid{
    grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
    grid-auto-columns:auto;overflow-x:visible;
  }
  .stat{padding:11px 13px 12px;border-bottom:1px solid var(--rule)}
  .stat:last-child{border-right:1px solid var(--rule)}
  .stat .value{font-size:21px}
  .sched{grid-template-columns:1fr}
  .modal-body{max-height:none}
  .modal-backdrop{padding:0;align-items:stretch}
  .modal{max-width:none;margin:0;min-height:100dvh;display:flex;flex-direction:column;border:0}
  .modal-body{flex:1}
  .modal.narrow,.modal.wide{max-width:none}
  .modal-foot{position:sticky;bottom:0;padding-bottom:max(12px,env(safe-area-inset-bottom,12px))}
  .modal-foot .btn{flex:1 0 auto;justify-content:center}
  .modal-foot .left{margin-right:0;order:3;flex-basis:100%}
  table.data th,table.data td{padding:8px 10px}
  .detail-head{padding:13px 14px}
  .detail-head h1{font-size:19px}
  .detail-meta{font-size:12px}
  .detail-meta>*{padding-right:10px;margin-right:10px}
  .tabs{margin:0 -12px;padding:0}
  #tabBody{padding-top:14px}
  .hide-sm{display:none !important}
  .btn{padding:9px 14px}
  .btn-sm{padding:6px 11px}
  .fld-input,.toolbar input,.toolbar select,
  .items-editor input,.items-editor select,.items-editor textarea{font-size:16px}
  .fld-label{font-size:16px}
  .fld-group{grid-template-columns:1fr}
  .fld-group .fld{border-right:1px solid var(--rule-2)}
  .checklist input{width:20px;height:20px}
  .checklist li{padding:11px 0}
  .toast-wrap{max-width:100vw;left:0}
}
@media (max-width:640px){
  .topbar h1{display:none}
}
@media (max-width:560px){
  .hide-xs{display:none !important}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

@media print{
  .sidebar,.topbar,.page-actions,.toolbar,.tabs,.field-nav{display:none !important}
  .app{grid-template-columns:1fr}
  .content{padding:0;background:none}
  .card{border-color:#bbb;box-shadow:none}
}


/* The desk: people you owe a call, set out like a contact sheet. */
.desk-contact{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--rule)}
.desk-contact:last-child{border-bottom:0}
.desk-contact .avatar{background:var(--spine);width:32px;height:32px;font-size:11px;border-radius:50%}
.desk-contact-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;font-size:12.5px}


/* Crew picker: tap a name rather than hunt a checkbox column. */
.crew-picker{display:flex;flex-wrap:wrap;gap:6px}
.crew-chip{position:relative;cursor:pointer;user-select:none}
.crew-chip input{position:absolute;opacity:0;width:0;height:0}
.crew-chip span{
  display:inline-block;padding:7px 14px;border:1px solid var(--rule-2);background:var(--panel);
  border-radius:var(--r-pill);font-size:13px;font-weight:500;color:var(--ink-2);
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.crew-chip:hover span{border-color:var(--ink-3);background:var(--panel-2)}
.crew-chip input:checked + span{
  background:var(--spine);border-color:var(--spine);color:#fff;font-weight:600;
}
.crew-chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}


/* Team rows on the project: a face, a role, and a way to reach them. */
.team-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--rule)}
.team-row:last-child{border-bottom:0}
.team-row .avatar{background:var(--spine);width:32px;height:32px;font-size:11px;border-radius:50%}
.team-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;font-size:12.5px}


/* ============================================================
   Admin panel - how the week is going, and what everyone is doing
   ============================================================ */

.as-of{font-size:12px;margin-right:4px}

.meter-num{font-size:19px;font-weight:700;letter-spacing:-.02em}
.meter-num.tone-bad{color:var(--bad)}
.meter-num.tone-warn{color:var(--warn)}
.meter-num.tone-ok{color:var(--ok)}

/* How the crew splits, as a row of bars you can click through to. */
.crew-bar{
  display:grid;grid-template-columns:132px 1fr 34px;align-items:center;gap:12px;
  padding:8px 0;color:inherit;text-decoration:none;
}
.crew-bar:hover{text-decoration:none}
.crew-bar:hover .crew-bar-track{background:var(--rule-2)}
.crew-bar b{text-align:right;font-variant-numeric:tabular-nums}
.crew-bar-track{
  height:8px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden;
  transition:background .12s ease;
}
.crew-bar-track>span{display:block;height:100%;border-radius:var(--r-pill);background:var(--ink-3)}
.crew-bar-track>span.tone-ok{background:var(--ok)}
.crew-bar-track>span.tone-bad{background:var(--bad)}
.crew-bar-track>span.tone-warn{background:var(--warn)}
.crew-bar-track>span.tone-info{background:var(--info)}
.crew-bar-track>span.tone-neutral{background:var(--neutral)}

/* One card per person. Everything a manager checks before ringing them. */
.crew-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.crew-card{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:16px;cursor:pointer;
  transition:box-shadow .14s ease,transform .14s ease,border-color .14s ease;
}
.crew-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.crew-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.crew-card-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.crew-card .avatar{width:38px;height:38px;font-size:12.5px;background:var(--spine);border-radius:50%;flex:none}
.crew-who{flex:1;min-width:0}
.crew-name{font-weight:650;font-size:14.5px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew-role{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.crew-figures{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.crew-figures div{min-width:0}
.crew-figures b{
  display:block;font-size:18px;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.crew-figures small{display:block;font-size:10px;color:var(--ink-3);margin-top:3px;line-height:1.3}

.crew-foot{
  display:flex;justify-content:space-between;gap:10px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--rule);font-size:11.5px;color:var(--ink-3);
}
.crew-foot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew-flag{
  margin-top:10px;padding:7px 10px;background:var(--bad-wash);color:var(--bad);
  border-radius:var(--r-sm);font-size:11.5px;font-weight:600;
}

/* The person sheet */
.sheet-head{display:flex;gap:14px;align-items:center}
.sheet-head .avatar{width:46px;height:46px;font-size:15px;background:var(--spine);border-radius:50%;flex:none}
.sheet-name{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.sheet-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:5px;font-size:13px}
.sheet-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.sheet-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);display:block}
.sheet-doc{display:grid;place-items:center;aspect-ratio:1;background:var(--panel-2);border-radius:var(--r-sm);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink-3)}

/* Hours a day, drawn small enough to read as a shape rather than a chart. */
.spark{display:flex;align-items:flex-end;gap:3px;height:64px}
.spark.tall{height:120px}
.spark-bar{
  flex:1;min-width:3px;background:var(--accent);border-radius:2px 2px 0 0;opacity:.85;
  transition:opacity .12s ease;
}
.spark-bar:hover{opacity:1}
.spark-axis{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:var(--ink-3)}

/* The company-wide note feed */
.feed-note{display:flex;gap:11px;padding:14px 0;border-bottom:1px solid var(--rule)}
.feed-note:last-child{border-bottom:0}
.feed-note:first-child{padding-top:0}
.feed-note.is-settled{opacity:.6}
.feed-note .avatar{width:32px;height:32px;font-size:11px;background:var(--spine);border-radius:50%;flex:none}
.feed-on{font-size:12px;color:var(--ink-3)}

@media (max-width:820px){
  .crew-list{grid-template-columns:1fr}
  .crew-bar{grid-template-columns:112px 1fr 30px;gap:9px}
}


/* A contractor's own diary: the time they are expected, then the job. */
.sched-day-block{margin-bottom:22px}
.sched-day-block.is-today .field-heading{color:var(--accent)}
.sched-job{display:flex;gap:14px;align-items:flex-start}
.sched-job.is-late{border-color:color-mix(in srgb,var(--bad) 40%,var(--rule))}
.sched-time{
  flex:none;width:66px;text-align:center;padding:8px 0;
  background:var(--panel-2);border-radius:var(--r);
}
.sched-time b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.sched-time span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px}
.sched-time.none b{color:var(--ink-3);font-weight:500}
.sched-body{flex:1;min-width:0}
.sched-body h3{font-size:16px;margin:6px 0 4px;line-height:1.3;letter-spacing:-.02em}
.sched-foot{margin-top:8px;font-size:11.5px;color:var(--ink-3)}
.sched-more{margin:8px 0 20px}

/* A site visit walked on a phone. The controls are deliberately oversized:
   this page is used standing up, in gloves, in direct sun, one-handed. */
.visit-action{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:18px 18px;font-size:16px;border-radius:var(--r-lg);margin-top:12px;
  min-height:68px;cursor:pointer;
}
.visit-action-glyph{font-size:26px;line-height:1;flex:none}
.visit-action b{display:block;font-size:16px;font-weight:650;letter-spacing:-.01em}
.visit-action small{display:block;font-size:12px;opacity:.8;font-weight:400;margin-top:2px}
.visit-shutter{margin-top:14px}
.visit-nocam{margin-top:8px;font-size:13.5px;padding:12px}
.visit-checkout{margin-top:14px;padding:16px;font-size:15.5px;min-height:56px}

.visit-finding{
  border:1px solid var(--rule);border-left:4px solid var(--ink-3);
  border-radius:var(--r);padding:13px 14px;margin-bottom:10px;background:var(--panel);
}
.visit-finding.sev-repair{border-left-color:var(--warn)}
.visit-finding.sev-urgent,.visit-finding.sev-replace{border-left-color:var(--bad)}
.visit-finding-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.visit-finding-n{
  width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--panel-2);font-size:11px;font-weight:700;color:var(--ink-2);
  font-family:var(--mono);
}
.visit-where{font-size:12px;color:var(--ink-3)}
.visit-edit{
  appearance:none;margin-left:auto;border:0;background:none;padding:4px 6px;
  font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;
}
.visit-finding-text{margin:0 0 9px;font-size:14.5px;line-height:1.5}
.visit-finding-meta{font-size:11.5px;color:var(--ink-3);margin-bottom:9px;font-family:var(--mono)}
.visit-nophoto{font-size:12px;color:var(--ink-3);font-style:italic}

.visit-todo{margin:0 0 4px;padding-left:20px;font-size:14px;line-height:1.9;color:var(--ink-2)}
.visit-todo li::marker{color:var(--warn)}
.visit-rec{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.visit-rec b{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-3);margin-bottom:5px;
}

/* The shots that came back from the camera, held above the description sheet
   so you are writing about a picture you can still see. */
.visit-preview{
  position:relative;display:flex;gap:6px;overflow-x:auto;margin-bottom:16px;
  padding-bottom:2px;
}
.visit-preview img{
  height:132px;width:auto;flex:none;border-radius:var(--r);object-fit:cover;
  border:1px solid var(--rule);
}
.visit-preview-count{
  position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.66);color:#fff;
  font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:var(--r-pill);
}
.visit-card.on-site{border-left:3px solid var(--warn)}

/* The window the client was given, at the top of the job in Field Mode. */
.field-arrive{
  margin-top:10px;padding:11px 13px;border-radius:var(--r);
  background:var(--accent-wash);color:var(--accent-deep);font-size:14px;
}
.field-arrive b{font-size:15px}
.field-arrive small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px}


/* ============================================================
   The guided tour card
   ============================================================ */

.tour-card{
  position:fixed;right:20px;bottom:20px;z-index:900;width:min(400px,calc(100vw - 40px));
  background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:18px 18px 14px;
}
.tour-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tour-count{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tour-x{appearance:none;border:0;background:none;font-size:14px;color:var(--ink-3);cursor:pointer;padding:4px}
.tour-card h3{font-size:16px;letter-spacing:-.02em;margin:0 0 6px}
.tour-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 10px}
.tour-facts{margin:0 0 12px;padding-left:18px;font-size:13px;color:var(--ink);line-height:1.7}
.tour-facts li::marker{color:var(--ok)}
.tour-error{color:var(--bad);font-size:13px}
.tour-actions{display:flex;gap:8px;margin-bottom:12px}
.tour-bar{height:4px;border-radius:var(--r-pill);background:var(--panel-2);overflow:hidden}
.tour-bar span{display:block;height:100%;background:var(--accent);transition:width .4s}

/* ============================================================
   Charts - the admin panel's graph language
   ============================================================ */

.hbars{display:flex;flex-direction:column;gap:7px}
.hbar-row{display:grid;grid-template-columns:150px 1fr 76px;gap:10px;align-items:center}
.hbar-label{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-svg{width:100%;height:12px;display:block}
.hbar-value{font-size:12.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

.funnel{display:flex;flex-direction:column;gap:2px}
.funnel-row{display:grid;grid-template-columns:150px 1fr 110px;gap:10px;align-items:center}
.funnel-label{font-size:12.5px;color:var(--ink-2)}
.funnel-svg{width:100%;height:16px;display:block}
.funnel-count{font-size:13px;font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.funnel-count small{display:block;font-weight:500;font-size:10.5px;color:var(--ink-3)}
.funnel-carry{
  font-size:10px;color:var(--ink-3);padding:2px 0 2px 160px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
}
.funnel-carry.is-weak{color:var(--warn)}

.colchart-svg{width:100%;height:150px;display:block}
.colchart-x{display:flex;justify-content:space-around;font-size:10px;color:var(--ink-3);margin-top:4px;font-family:var(--mono)}
.colchart-legend{display:flex;gap:16px;margin-top:9px;font-size:11.5px;color:var(--ink-2)}
.colchart-legend i,.stacked-legend i{display:inline-block;width:9px;height:9px;border-radius:2.5px;margin-right:5px;vertical-align:-1px}

.spark{display:block}

.stacked-bar{display:flex;height:14px;border-radius:var(--r-pill);overflow:hidden;background:var(--panel-2)}
.stacked-bar span{display:block;height:100%}
.stacked-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;color:var(--ink-2)}
.stacked-legend b{font-variant-numeric:tabular-nums}

.risk-row{border-bottom:1px solid var(--rule);padding:13px 0}
.risk-row:last-child{border-bottom:0}
.risk-score{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;
}
.risk-hi{background:var(--bad-wash);color:var(--bad)}
.risk-mid{background:var(--warn-wash);color:var(--warn)}
.risk-low{background:var(--ok-wash);color:var(--ok)}
.risk-reasons{margin:7px 0 0;padding-left:16px;font-size:12.5px;color:var(--ink-2);line-height:1.65}
.risk-reasons li::marker{color:var(--ink-3)}

.stuck-days{font-family:var(--mono);font-size:12px;color:var(--bad);font-weight:600;white-space:nowrap}

.crew-spark{display:flex;align-items:center;gap:8px}
.crew-spark small{font-size:10px;color:var(--ink-3)}

/* ============================================================
   Money over time
   ============================================================ */

.curve-wrap{position:relative}
.curve{width:100%;height:190px;display:block;overflow:visible}
.curve polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.curve .c-contract{stroke:var(--ink-3);stroke-dasharray:4 3}
.curve .c-billed{stroke:var(--blueprint)}
.curve .c-paid{stroke:var(--ok)}
.curve .c-cost{stroke:var(--accent)}
.curve-axis{
  display:flex;justify-content:space-between;margin-top:9px;
  font-size:11.5px;color:var(--ink-3);
}
.curve-key{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none}
.curve-key .k{display:flex;align-items:center;gap:5px;color:var(--ink-2)}
.curve-key .k::before{content:"";width:14px;height:2px;border-radius:2px;background:currentColor}
.curve-key .k-contract{color:var(--ink-3)}
.curve-key .k-billed{color:var(--blueprint)}
.curve-key .k-paid{color:var(--ok)}
.curve-key .k-cost{color:var(--accent)}

/* What the cost is made of */
.split{display:flex;flex-direction:column;gap:10px}
.split-row{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;font-size:13.5px}
.split-name{color:var(--ink-2)}
.split-bar{height:8px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden}
.split-bar>span{display:block;height:100%;border-radius:var(--r-pill);background:var(--ink-3)}
.split-bar>span.tone-info{background:var(--blueprint)}
.split-bar>span.tone-warn{background:var(--warn)}
.split-bar>span.tone-neutral{background:var(--neutral)}
.split-value{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.split-total{border-top:1px solid var(--rule);padding-top:10px;font-weight:700}

@media (max-width:600px){
  .split-row{grid-template-columns:110px 1fr auto;gap:9px;font-size:12.5px}
}


/* Raising work from a signed estimate: what to build, and when. */
.build-list{display:flex;flex-direction:column;gap:12px}
.build-row{
  display:flex;gap:12px;padding:14px;border:1px solid var(--rule);
  border-radius:var(--r-lg);background:var(--panel-2);
}
.build-pick{display:flex;align-items:flex-start;padding-top:3px;cursor:pointer}
.build-pick input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;margin:0}
.build-main{flex:1;min-width:0}
.build-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.build-title{
  flex:1;min-width:180px;padding:7px 10px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--panel);font-size:14px;font-weight:600;
}
.build-title:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.build-meta{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.build-fields{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.build-fields label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.build-fields input{
  padding:6px 9px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--panel);font-size:13px;
}
.build-fields input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.build-crew{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.build-crew .crew-chip span{padding:5px 11px;font-size:12.5px}

@media (max-width:600px){
  .build-fields{flex-direction:column;align-items:stretch}
  .build-fields label{justify-content:space-between}
}

/* The site address on a work order - where the crew is actually going. */
.site-line{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-top:10px;font-size:13.5px}
.site-line .muted{font-size:12px}


/* ============================================================
   The handbook - a left nav of every feature, and the page itself
   ============================================================ */

.hb{display:grid;grid-template-columns:264px minmax(0,1fr);gap:24px;align-items:start}
.hb-count{font-size:12px}

/* The nav sticks, because the whole point is moving between sections. */
.hb-nav{
  position:sticky;top:78px;max-height:calc(100vh - 100px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:10px;
}
.hb-nav > summary{display:none}
.hb-search{padding:2px 2px 10px}
.hb-search input{
  width:100%;padding:8px 12px;border:1px solid var(--rule-2);border-radius:var(--r-pill);
  background:var(--panel);font-size:13px;
}
.hb-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.hb-hits{margin:0 0 8px;padding:0 4px;font-size:11.5px;color:var(--ink-3)}

.hb-group{margin-bottom:14px}
.hb-group:last-child{margin-bottom:2px}
.hb-group h3{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;padding:6px 8px;margin:0;
}
.hb-nav a{
  display:block;padding:8px 10px;border-radius:var(--r);color:var(--ink-2);
  text-decoration:none;transition:background .12s ease,color .12s ease;
}
.hb-nav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.hb-nav a.on{background:var(--accent-wash);color:var(--accent-deep)}
.hb-nav-title{display:block;font-size:13px;font-weight:600;line-height:1.35}
.hb-nav-blurb{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.hb-nav a.on .hb-nav-blurb{color:color-mix(in srgb,var(--accent-deep) 60%,var(--ink-3))}

/* The page */
.hb-body{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:34px 40px 30px;min-width:0;
}
.hb-head{padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.hb-eyebrow{
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;margin-bottom:9px;
}
.hb-head h1{font-size:30px;letter-spacing:-.032em;line-height:1.15}
.hb-lede{margin:12px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:66ch}

.hb-h2{
  font-size:15px;letter-spacing:-.01em;margin:30px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.hb-prose{max-width:70ch;font-size:15px;line-height:1.68;color:var(--ink-2)}
.hb-prose p{margin:0 0 14px}
.hb-prose p:last-child{margin-bottom:0}
.hb-prose b{color:var(--ink);font-weight:650}
.hb-prose ul{margin:0 0 14px;padding-left:22px}
.hb-prose li{margin-bottom:7px}
.hb-prose code,.hb-table code{
  background:var(--panel-2);border-radius:4px;padding:1px 6px;font-size:12.5px;
  font-family:var(--mono);color:var(--ink);
}
.hb-body > * + *{margin-top:18px}
.hb-body > .hb-h2 + *{margin-top:0}

/* The worked example, set off from the explanation */
.hb-example{
  background:var(--accent-wash);border-radius:var(--r-lg);padding:18px 20px;
}
.hb-example-tag{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  color:var(--accent-deep);margin-bottom:9px;
}
.hb-example .hb-prose{color:var(--ink-2)}
.hb-example .btn{margin-top:12px}

/* Numbered how-to */
.hb-steps{list-style:none;counter-reset:hbstep;margin:0;padding:0;max-width:70ch}
.hb-steps li{
  counter-increment:hbstep;position:relative;padding:0 0 14px 42px;
  font-size:15px;line-height:1.6;
}
.hb-steps li::before{
  content:counter(hbstep);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--spine);color:#fff;font-size:12px;font-weight:700;
}
.hb-steps li > b{display:block;color:var(--ink);font-weight:650}
.hb-steps li > span{display:block;color:var(--ink-3);font-size:13.5px;margin-top:3px;line-height:1.55}
.hb-steps li > span b{color:var(--ink-2);font-weight:650}

/* A status pipeline */
.hb-pipe{
  margin:0;padding:18px 20px;background:var(--panel-2);
  border:1px solid var(--rule);border-radius:var(--r-lg);
}
.hb-pipe figcaption{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;margin-bottom:14px;
}
/* One row that scrolls rather than wrapping, so an arrow is never left
   dangling at the end of a line with nothing after it. */
.pipe-track{
  display:flex;align-items:stretch;gap:8px;flex-wrap:nowrap;
  overflow-x:auto;padding-bottom:4px;
}
.pipe-arrow{align-self:center;color:var(--ink-3);font-size:15px;flex:none}
.pipe-stage{
  flex:0 1 auto;min-width:116px;background:var(--panel);border:1px solid var(--rule-2);
  border-radius:var(--r);padding:10px 12px;text-align:center;
}
.pipe-stage b{display:block;font-size:13px;font-weight:650;letter-spacing:-.01em}
.pipe-stage small{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.pipe-stage.is-terminal{border-width:2px}
.pipe-stage.tone-ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--rule-2))}
.pipe-stage.tone-ok b{color:var(--ok)}
.pipe-stage.tone-warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--rule-2))}
.pipe-stage.tone-warn b{color:var(--warn)}
.pipe-stage.tone-bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--rule-2))}
.pipe-stage.tone-bad b{color:var(--bad)}
.pipe-stage.tone-info{border-color:color-mix(in srgb,var(--info) 45%,var(--rule-2))}
.pipe-stage.tone-info b{color:var(--info)}

.pipe-branches{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px dashed var(--rule-2)}
.pipe-branches li{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);padding:4px 0;
}
.pipe-branch-from{color:var(--ink-2);font-weight:600}
.pipe-branch-arrow{color:var(--ink-3)}
.pipe-branch-to{font-weight:650;color:var(--ink)}
.pipe-branch-to.tone-ok{color:var(--ok)}
.pipe-branch-to.tone-warn{color:var(--warn)}
.pipe-branch-to.tone-bad{color:var(--bad)}
.pipe-branch-to.tone-info{color:var(--info)}
.pipe-branch-note{color:var(--ink-3)}

/* Getting it wrong, and getting out of it */
.hb-undo{
  background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r-lg);
  padding:18px 20px;
}
.hb-undo h3{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;margin-bottom:12px;
}
.hb-undo dl{margin:0;display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:0}
.hb-undo dt{
  padding:10px 16px 10px 0;font-size:13.5px;font-weight:650;color:var(--ink);
  border-top:1px solid var(--rule);
}
.hb-undo dd{
  margin:0;padding:10px 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  border-top:1px solid var(--rule);
}
.hb-undo dt:first-of-type,.hb-undo dd:first-of-type{border-top:0}
.hb-undo dt.is-blocked{color:var(--warn)}
.hb-undo dt.is-gone{color:var(--bad)}
.undo-tag{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;margin-top:4px;
}
.undo-tag.is-blocked{color:var(--warn)}
.undo-tag.is-gone{color:var(--bad)}

/* Who can do this */
.hb-perm{
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
  padding:12px 16px;background:var(--panel-2);border-radius:var(--r);
  font-size:13px;color:var(--ink-2);
}
.hb-perm-tag{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;
  color:var(--ink-3);flex:none;
}
.hb-perm-keys{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.hb-perm-keys code{
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;
  padding:1px 7px;font-size:11.5px;font-family:var(--mono);color:var(--ink-3);
}

/* Demo photographs */
.hb-shots{margin:0}
.hb-shots-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.hb-shot{
  display:block;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  background:var(--panel);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;
  transition:box-shadow .14s ease,transform .14s ease;
}
.hb-shot:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.hb-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--panel-2)}
.hb-shot-cap{display:block;padding:9px 11px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.hb-shot-cap .stage-tag{
  display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;background:var(--panel-2);color:var(--ink-3);
  padding:2px 7px;border-radius:var(--r-pill);margin-right:6px;
}
.hb-shots figcaption{margin-top:11px;font-size:12.5px;color:var(--ink-3)}
.hb-shots-placeholder{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hb-shots-placeholder span{
  display:block;aspect-ratio:4/3;border-radius:var(--r);
  border:1.5px dashed var(--rule-2);background:var(--panel-2);
}

.hb-table-wrap{overflow-x:auto}
.hb-table{width:100%;font-size:13.5px}
.hb-table th{white-space:nowrap}
.hb-table td{vertical-align:top;line-height:1.55}

.hb-next{
  display:flex;align-items:center;gap:14px;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--rule);
}
.hb-next span{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-3);font-weight:700;
}

/* The card that points at the handbook from settings */
.hb-promo{
  display:flex;align-items:center;gap:16px;margin-bottom:16px;
  padding:16px 20px;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none;
  transition:box-shadow .14s ease,border-color .14s ease;
}
.hb-promo:hover{box-shadow:var(--shadow-md);text-decoration:none;border-color:var(--rule-2)}
.hb-promo-icon{
  flex:none;width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-deep);
}
.hb-promo-icon svg{width:22px;height:22px}
.hb-promo-text{flex:1;min-width:0}
.hb-promo-text b{display:block;font-size:14.5px;letter-spacing:-.01em}
.hb-promo-text span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.hb-promo-go{flex:none;font-size:13px;font-weight:600;color:var(--accent)}

@media (max-width:1000px){
  .hb{grid-template-columns:1fr;gap:16px}
  .hb-nav{position:static;max-height:none;padding:0}
  .hb-nav > summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;cursor:pointer;list-style:none;font-size:13px;font-weight:650;
  }
  .hb-nav > summary::-webkit-details-marker{display:none}
  .hb-nav > summary::after{
    content:"";width:8px;height:8px;flex:none;margin-left:auto;
    border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:rotate(45deg) translateY(-2px);transition:transform .15s ease;
  }
  .hb-nav[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
  .hb-nav[open] > summary{border-bottom:1px solid var(--rule)}
  .hb-nav-current{color:var(--ink-3);font-weight:500;margin-left:auto;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hb-nav .hb-search{padding:12px 12px 8px}
  .hb-nav > nav{padding:0 10px 10px}
  .hb-body{padding:24px 20px}
  .hb-head h1{font-size:24px}
  .hb-lede{font-size:15px}
  .hb-undo dl{grid-template-columns:1fr}
  .hb-undo dd{padding-top:0;border-top:0}
  .hb-undo dt{padding-bottom:4px}
  .hb-promo-go{display:none}
}


/* ============================================================
   The sandbox ribbon - which database you are looking at
   ============================================================ */

.sandbox-bar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;padding:7px 18px;font-size:12.5px;
  background:var(--warn-wash);color:var(--warn);
  border-bottom:1px solid color-mix(in srgb,var(--warn) 28%,transparent);
}
.sandbox-bar b{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  background:var(--warn);color:var(--on-signal);padding:2px 8px;border-radius:var(--r-pill);
}
.sandbox-bar span{color:var(--ink-2)}
.sandbox-bar a{margin-left:auto;color:var(--warn);font-weight:600;white-space:nowrap}

/* The rail and the field nav both stick, so they start below the ribbon. */
body.is-sandbox .sidebar{height:calc(100vh - 32px)}
body.is-sandbox .topbar{top:0}
body.is-sandbox .field-top{top:0}

.login-sandbox{
  margin:-12px -12px 18px;padding:8px 14px;border-radius:var(--r);
  background:var(--warn-wash);color:var(--warn);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  text-align:center;
}

@media (max-width:600px){
  .sandbox-bar{padding:6px 14px;font-size:11.5px}
  .sandbox-bar span{display:none}
  .sandbox-bar a{margin-left:auto}
}


/* ============================================================
   The site visit - the one page that is deliberately sequential
   ============================================================ */

.walk{list-style:none;counter-reset:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.walk-step{
  display:flex;align-items:center;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--rule);
}
.walk-step:last-child{border-bottom:0}
.walk-no{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel-2);color:var(--ink-3);font-size:12.5px;font-weight:700;
}
.walk-step.is-done .walk-no{background:var(--ok);color:#fff}
.walk-main{flex:1;min-width:0}
.walk-main b{display:block;font-size:14.5px;letter-spacing:-.01em}
.walk-step.is-done .walk-main b{color:var(--ink-2)}
.walk-main small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* A point of damage */
.finding-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
.finding-row:last-child{border-bottom:0}
.finding-row:first-child{padding-top:0}
.finding-no{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--spine);color:#fff;font-size:12px;font-weight:700;
}
.finding-main{flex:1;min-width:0}
.finding-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.finding-text{margin:0;font-size:14.5px;line-height:1.6}
.finding-rec{margin:6px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.55}
.finding-shots{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.finding-shot{
  appearance:none;border:1px solid var(--rule);border-radius:var(--r-sm);padding:0;
  width:88px;height:66px;overflow:hidden;background:var(--panel-2);cursor:pointer;
}
.finding-shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot-doc{display:grid;place-items:center;width:100%;height:100%;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink-3)}
.finding-upload{cursor:pointer}

/* ============================================================
   Follow-ups
   ============================================================ */

.handoff-row{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.handoff-row:last-child{border-bottom:0}
.handoff-row:first-child{padding-top:0}
.handoff-main{flex:1;min-width:220px}
.handoff-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.handoff-note{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* The small red number, wherever a record is listed */
.unseen{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--bad);color:#fff;
  font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;margin-left:6px;
  vertical-align:middle;
}

/* Buildings entered several at a time */
.bld-in{
  width:100%;padding:7px 9px;border:1px solid var(--rule-2);border-radius:var(--r-sm);
  background:var(--panel);font-size:13.5px;
}
.bld-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}

/* The analysis reads beside the photograph, not on top of it: the image
   keeps the room, the prose gets a quiet panel that scrolls on its own. */
.lb-stage{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;min-height:0;height:100%}
.lightbox-body.with-panel{gap:16px;padding:16px}
.lb-panel{flex:0 0 360px;max-width:38vw;align-self:stretch;display:flex;flex-direction:column;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:12px;
  overflow:hidden;min-height:0}
.lb-panel-head{padding:12px 16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:#a9adb5;border-bottom:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:8px}
.lb-ai{text-align:left;padding:14px 16px;overflow-y:auto;flex:1;min-height:0;
  font-size:13.5px;line-height:1.6;color:#e8e6e1}
.lb-ai p{margin:0 0 10px;white-space:pre-wrap}
.lb-ai-h{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9aa0a8;
  margin:16px 0 8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.lb-ai-h:first-child{margin-top:0;padding-top:0;border-top:0}
.lb-ai ul{margin:0 0 10px;padding-left:18px}
.lb-ai li{margin:5px 0}
.lb-ai li::marker{color:#6f7580}
@media (max-width: 900px){
  .lightbox-body.with-panel{flex-direction:column;overflow-y:auto}
  .lb-stage{flex:0 0 auto;max-height:45vh}
  .lb-panel{flex:0 0 auto;max-width:none;width:100%}
}
@keyframes ai-dissolve{
  0%,100%{opacity:1;filter:none}
  50%{opacity:.3;filter:blur(7px) saturate(.5)}
}
.ai-scanning{animation:ai-dissolve 2.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .ai-scanning{animation:none;opacity:.6}
}

/* The one calendar, everywhere a date is picked. */
input[type="date"]::-webkit-calendar-picker-indicator{display:none}
input[type="date"]{cursor:pointer}
.datepick{
  position:fixed;z-index:300;width:288px;background:var(--paper);border:1px solid var(--rule);
  border-radius:14px;box-shadow:0 18px 50px rgba(16,20,28,.18);padding:12px;
  animation:dp-in .12s ease;
}
@keyframes dp-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.datepick.sheet{
  left:0 !important;right:0;top:auto !important;bottom:0;width:auto;border-radius:16px 16px 0 0;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(16,20,28,.25);
}
.dp-head{display:flex;align-items:center;gap:2px;margin-bottom:8px}
.dp-head b{flex:1;text-align:center;font-size:14px}
.dp-head button{
  border:0;background:transparent;width:32px;height:32px;border-radius:8px;cursor:pointer;
  font-size:15px;color:var(--ink-2);
}
.dp-head button:hover{background:var(--wash);color:var(--accent)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:10px;letter-spacing:.08em;color:var(--ink-3);margin-bottom:2px}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-grid button{
  border:0;background:transparent;aspect-ratio:1;min-height:34px;border-radius:9px;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--ink);
}
.datepick.sheet .dp-grid button{min-height:44px;font-size:15px}
.dp-grid button:hover{background:var(--wash)}
.dp-grid button.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.dp-grid button.on{background:var(--accent);color:#fff;font-weight:700}
.dp-grid button:disabled{color:var(--ink-3);opacity:.45;cursor:default;background:transparent}
.dp-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--rule)}
.dp-foot button{border:0;background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:650;cursor:pointer;padding:6px 8px;border-radius:8px}
.dp-foot button:hover{background:var(--wash)}

/* Getting started: the checklist and its spotlight. */
.ob-card{
  position:fixed;right:18px;bottom:18px;z-index:250;width:280px;background:var(--paper);
  border:1px solid var(--rule);border-radius:14px;box-shadow:0 18px 50px rgba(16,20,28,.16);
  overflow:hidden;font-size:13.5px;
}
.ob-card.is-collapsed{width:auto}
.ob-head{display:flex;align-items:center;gap:8px;padding:11px 12px 11px 15px;cursor:pointer;background:var(--panel-2)}
.ob-head b{font-size:13px}
.ob-count{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:700}
.ob-fold{color:var(--ink-3);font-size:10px}
.ob-head [data-ob-x]{border:0;background:transparent;color:var(--ink-3);font-size:15px;cursor:pointer;padding:0 2px;margin-left:2px}
.ob-head [data-ob-x]:hover{color:var(--bad)}
.ob-list{padding:6px;max-height:46vh;overflow-y:auto}
.ob-step{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;
  padding:7px 8px;border-radius:9px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink);
}
.ob-step:hover{background:var(--wash)}
.ob-step i{
  flex:none;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--rule-2);
  font-style:normal;font-size:10px;display:grid;place-items:center;color:#fff;
}
.ob-step.done i{background:var(--ok);border-color:var(--ok)}
.ob-step.done span{color:var(--ink-3);text-decoration:line-through}
.ob-step em{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.ob-group{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:10px 6px 4px}
.ob-step i{cursor:pointer}
.ob-step i:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.ob-foot{padding:8px 10px 6px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--rule);margin-top:4px}
.ob-spot{position:fixed;inset:0;z-index:260}
.ob-ring{
  position:fixed;border:2.5px solid var(--accent);border-radius:12px;
  box-shadow:0 0 0 4000px rgba(16,20,28,.35);pointer-events:none;
  animation:ob-pulse 1.6s ease-in-out infinite;
}
@keyframes ob-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media (prefers-reduced-motion: reduce){.ob-ring{animation:none}}
.ob-bubble{
  position:fixed;width:300px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:14px 16px;box-shadow:0 18px 50px rgba(16,20,28,.22);
}
.ob-bubble b{font-size:14px}
.ob-bubble p{margin:6px 0 10px;font-size:13px;color:var(--ink-2);line-height:1.5}
.ob-bubble button{
  border:0;background:var(--accent);color:#fff;font:inherit;font-size:12.5px;font-weight:650;
  padding:7px 14px;border-radius:8px;cursor:pointer;
}
@media (max-width:640px){
  .ob-card{right:10px;left:10px;bottom:76px;width:auto}
}

/* The annotation editor: full-screen, the photo is the workspace. */
.anno{position:fixed;inset:0;z-index:320;background:rgba(12,13,16,.97);display:flex;flex-direction:column}
.anno-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.anno-tools{display:flex;align-items:center;gap:4px}
.anno-tools button{
  border:1px solid transparent;background:transparent;color:#e8e6e1;width:34px;height:34px;
  border-radius:9px;cursor:pointer;font-size:15px;display:grid;place-items:center;
}
.anno-tools button:hover{background:rgba(255,255,255,.1)}
.anno-tools button.on{border-color:var(--accent);background:rgba(26,79,196,.25)}
.anno-tools .anno-swatch{width:24px;height:24px;border-radius:50%;margin:0 2px;border:2px solid transparent}
.anno-tools .anno-swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.anno-tools [data-width] i{display:block;border-radius:50%;background:#e8e6e1}
.anno-sep{width:1px;height:20px;background:rgba(255,255,255,.15);margin:0 6px}
.anno-actions{display:flex;gap:8px}
.anno-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:14px}
.anno-stage canvas{max-width:100%;max-height:100%;border-radius:8px;touch-action:none;cursor:crosshair;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}

/* ---------- the developer wiki ----------
   Drawings that have to stay legible on a laptop and survive a phone, so the
   SVG keeps its drawn width and the container scrolls rather than squashing
   the labels into each other. */
.wiki-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.wiki-nav button{font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;
  background:var(--panel-2);border:1px solid var(--rule);border-radius:var(--r-pill);padding:7px 15px}
.wiki-nav button:hover{color:var(--ink);border-color:var(--rule-2)}
.wiki-nav button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.wiki-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.wiki-svg{display:block;min-width:100%;height:auto}
.wiki-notes h4,.wiki-domains h4,.wiki-cols h4{font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.wiki-list{margin:0;padding-left:18px;display:grid;gap:7px}
.wiki-list li{font-size:13px;line-height:1.5;color:var(--ink-2)}
.wiki-list code{font-family:var(--mono);font-size:12px;background:var(--panel-2);
  border:1px solid var(--rule);border-radius:4px;padding:1px 5px}
.wiki-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.wiki-domains{display:grid;gap:18px}
.wiki-chips{display:flex;flex-wrap:wrap;gap:6px}
.wiki-chips button{font-family:var(--mono);font-size:11.5px;cursor:pointer;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--rule-2);border-radius:6px;padding:4px 6px 4px 8px;
  display:inline-flex;align-items:center;gap:6px}
.wiki-chips button:hover{border-color:var(--accent);color:var(--ink)}
.wiki-chips button.on{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-deep)}
.wiki-chips button span{font-size:10px;color:var(--ink-3);background:var(--panel-2);
  border-radius:4px;padding:1px 4px}
.wiki-chips button.on span{background:rgba(255,255,255,.65);color:var(--accent-deep)}
.wiki-find{font:inherit;font-size:13px;padding:7px 11px;border:1px solid var(--rule-2);
  border-radius:var(--r-sm);background:var(--panel);color:var(--ink);min-width:220px}
.wiki-find:focus{outline:none;border-color:var(--accent)}
button.linkish{font:inherit;font-size:12px;font-family:var(--mono);color:var(--accent);
  background:none;border:0;padding:0;cursor:pointer}
button.linkish:hover{text-decoration:underline}

/* ---------- kill switches and the error trail ---------- */
.flag-list{display:grid;gap:20px}
.flag{display:flex;gap:14px;align-items:flex-start}
.flag.is-off .flag-body b{color:var(--ink-3)}
.flag-body{flex:1;min-width:0}
.flag-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.flag-head b{font-size:14px;letter-spacing:-.01em}
.flag-body p{font-size:13px;line-height:1.5;color:var(--ink-2);margin:0}
.flag-failsafe{margin-top:5px !important;font-size:12.5px !important;color:var(--ink-3) !important}
.flag-failsafe b{color:var(--ink-2);font-weight:600}
.flag-switch{position:relative;flex:none;width:40px;height:23px;cursor:pointer;margin-top:2px}
.flag-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.flag-switch span{position:absolute;inset:0;border-radius:999px;background:var(--rule-2);
  transition:background .16s ease}
.flag-switch span::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .16s ease}
.flag-switch input:checked + span{background:var(--accent)}
.flag-switch input:checked + span::after{transform:translateX(17px)}
.flag-switch input:disabled + span{opacity:.5}
.flag-switch input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.health{border:1px solid var(--rule);border-radius:var(--r);padding:13px 15px}
.health.is-bad{border-color:var(--bad);background:var(--bad-wash)}
.health-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.health-top b{font-size:13.5px;text-transform:capitalize}
.health p{font-size:12.5px;color:var(--ink-2);margin:0}

.provider-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.provider-note:empty{display:none}

/* ---------- address suggestions ----------
   The list hangs off the street-address field; the tick block under it shows
   what Google matched once something is picked. */
.addr-list-host{position:relative;margin-top:-12px;height:0;z-index:6}
.addr-list{
  position:absolute;left:0;right:0;top:12px;background:var(--surface,var(--panel));
  border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.addr-list button{
  display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:none;
  font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;
}
.addr-list button:hover,.addr-list button.on{background:var(--wash)}
.addr-picked{margin:0 0 12px}
.addr-tick{color:var(--ok);font-weight:700;margin-right:8px}

/* ---------- the permit plan ----------
   Shared by the intake demo, the project card and the Permits tab. */
.fplan{display:grid;gap:16px}
.fplan.compact{gap:11px;font-size:13px}
.fplan-verdict{border-left:3px solid var(--rule-2);padding:2px 0 2px 12px}
.fplan-verdict.ok{border-color:var(--ok)}.fplan-verdict.info{border-color:var(--info)}.fplan-verdict.warn{border-color:var(--warn)}
.fplan-head{font-weight:700;font-size:16.5px;line-height:1.3}
.fplan.compact .fplan-head{font-size:14px}
.fplan-sub{color:var(--ink-2);margin-top:4px;line-height:1.45}
.fplan-tier{margin-top:8px}
.fplan-h{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 -8px;font-weight:600}
.fplan-cards{display:grid;gap:8px}
.fcard{border:1px solid var(--rule-2);border-radius:var(--r);padding:10px 12px;background:var(--panel)}
.fcard-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fcard-top b{font-size:14.5px}
.fplan.compact .fcard-top b{font-size:13.5px}
.fcard-why{margin-top:4px;color:var(--ink-2);line-height:1.45}
.fcard-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px;font-size:12.5px;color:var(--ink-3)}
.fcard-meta b{color:var(--ink-2);font-weight:600;margin-right:3px}
.fplan-steps{margin:0;padding:0;list-style:none;counter-reset:fs;display:grid;gap:9px}
.fplan-steps li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.fplan-steps li::before{counter-increment:fs;content:counter(fs);width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.fplan-steps li b{display:block;line-height:1.35}
.fplan-steps li span{color:var(--ink-2);line-height:1.45}
.fws{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.fplan.compact .fws,.fws.one{grid-template-columns:1fr}
.fws ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;align-content:start}
.fws li{display:flex;gap:8px;align-items:baseline;line-height:1.35}
.fws li i{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:12px;width:18px;height:18px;line-height:18px;text-align:center;border-radius:3px;flex:none}
.fws .have i{color:var(--ok);background:var(--ok-wash)}
.fws .need i{color:var(--warn);background:var(--warn-wash)}
.fws li b{font-weight:600;margin-right:4px}
.fws .need span{color:var(--ink-2)}
.fplan-links{display:flex;gap:6px;flex-wrap:wrap}
.fplan-foot{font-size:12px;color:var(--ink-3);border-top:1px dotted var(--rule);padding-top:8px}
@media (max-width:640px){.fws{grid-template-columns:1fr}}

/* A PDF inside the lightbox: the browser's viewer, full height, a bar under it. */
.lb-doc{width:min(96vw,1100px);height:100%;display:flex;flex-direction:column;gap:8px}
.lb-doc iframe{flex:1;width:100%;min-height:0;border:0;border-radius:var(--r);background:#fff}
.lb-doc-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#dfe3e9;font-size:13px}
.lb-doc-bar .btn{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}