/* RJM Build shared visual system
   Loaded last in production so every internal and standalone surface carries the same
   spacing, typography, controls, panel geometry and brand treatment. */
:root{
  --ink:#20332b;
  --text:#33433b;
  --muted:#758077;
  --green:#244b3c;
  --green-dark:#173d2d;
  --mint:#e9f0e9;
  --paper:#f6f7f3;
  --line:#e3e7df;
  --white:#fff;
  --amber:#956e31;
  --red:#ac4c42;
  --shadow:0 3px 12px rgba(36,60,41,.06);
  --rjm-page-x:clamp(17px,2.5vw,34px);
  --rjm-page-y:32px;
  --rjm-gap:20px;
  --rjm-panel-inset:21px;
  --rjm-content-gap:16px;
  --rjm-action-gap:10px;
  --rjm-radius:9px;
  --rjm-radius-lg:12px;
  --rjm-control-h:39px;
  --rjm-topbar-h:73px;
  color:var(--text);
  background:var(--paper);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
}

html{background:var(--paper)}
body{color:var(--text);background:var(--paper);text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #51775b;outline-offset:3px}
h1,h2,h3{color:var(--ink);letter-spacing:-.03em}
p{color:var(--muted)}

/* Keep flex/grid children from creating the mysterious 6px-to-40px alignment drift
   that shows up when long labels, project names, or translated text enter a row. */
.page-header>*,.section-title>*,.panel-head>*,.toolbar>*,.topbar>*,.dialog-top>*,
.document-heading>*,.actions>*,.form-grid>*,.two-column>*,.layout>*,.dashboard-grid>*,
.project-card-grid>*,.stats>*,.kpi-grid>*{min-width:0}

.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-header,.section-title,.panel-head,.toolbar,.dialog-top,.document-heading{align-items:center}
.page-header{margin-bottom:27px}
.page-header h1{margin-bottom:8px}
.page-header>.actions{justify-content:flex-end}
.section-title h2,.panel-head h2{line-height:1.3}

/* Shared controls */
.btn,.back{
  min-height:var(--rjm-control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid #dce2d8;
  border-radius:7px;
  background:#fff;
  color:var(--text);
  font-size:12px;
  font-weight:550;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover,.back:hover{background:#f2f5ef;border-color:#b6c5b2}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-dark)}
.btn.danger{border-color:#eccac5;color:var(--red);background:#fff}
button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed}

input:not([type=checkbox]):not([type=radio]),select,textarea{
  min-height:var(--rjm-control-h);
  border-radius:6px;
  border:1px solid #dfe6d5;
  background:#fff;
  color:#4c6540;
}
textarea{line-height:1.55}
/* Text inset safety net. The :where() wrapper has zero specificity, so these only fill in where no
   other stylesheet sets padding (a control that sets its own padding, icon buttons with padding:0,
   checkboxes/radios and file/range/color inputs are untouched). Values match the existing controls. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):not([type=image]):not([type=submit]):not([type=button]):not([type=reset]),select,textarea){padding:9px 11px}
:where(.badge,.pill){padding:5px 7px}
:where(.notice){padding:15px 17px}
:where(.toast){padding:11px 14px}
:where(th){padding:13px 17px}
:where(td){padding:15px 17px}
.form-grid{align-items:start}
.field{min-width:0}
.field input,.field select,.field textarea{width:100%}

/* Shared surfaces and tables */
.panel,.kpi,.project-card,.stat,.package,.fieldset{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.panel,.kpi,.project-card,.stat{border-radius:var(--rjm-radius)}
.table-scroll,.table-wrap{max-width:100%;overflow:auto}
table,.table{width:100%;border-collapse:collapse}
th,.table th{background:#f8faf4;color:#8b967e;font-size:9px;font-weight:550;letter-spacing:0;text-transform:none}
td,.table td{color:#697a5b}
th,td,.table th,.table td{border-color:#edf0e6}
.badge,.pill{line-height:1;vertical-align:middle}

/* Text that sits directly inside a bordered .panel (which deliberately has no padding of its own so
   .section-title/.panel-head/.toolbar can pad themselves) must carry its own inset, otherwise it
   touches the card's left edge. Gutters mirror .panel>.section-title (21px) and .contract-center-page .cards (20px). */
.panel>.milestone-list{padding:0 21px 21px}
.panel>.milestone-requirements{padding:4px 21px 16px}
.panel>.milestone-actions{padding:15px 21px 21px}
.panel>.thread-shell{padding:20px 21px}
/* Conversation controls have no owning padding rule. Keep this correction to text insets. */
.thread-row{padding:11px 14px}
.thread-message{padding:14px 17px}

/* These rows are direct panel children; their owning stylesheet removes horizontal padding. */
.panel>.suite-site-row,.panel>div:not([class])>.suite-site-row,.panel>[data-company-list]>.suite-site-row{padding-left:21px;padding-right:21px}
/* Search block / disclosures / forms placed directly in a panel share the section-title gutter. */
.panel>.field,.panel>details,.panel>form,.panel>.actions{margin-left:21px;margin-right:21px}
.panel>.field+.footnote{margin-top:10px}
.panel[data-history-page]>h2{margin:21px 21px 8px}
.panel[data-history-page]>.actions{margin-bottom:21px}
.panel>details{margin-bottom:16px}
/* Flush panels own their table/header insets; a bare form or action row still needs
   a closing gutter. Content cards use one padded flow instead of child margins. */
.panel>:is(form,.actions,.suite-actions,details):last-child{margin-bottom:var(--rjm-panel-inset)}
.panel>button:last-child{margin:0 var(--rjm-panel-inset) var(--rjm-panel-inset)}
.panel:not(.panel--content)>:is(form,p,.actions):first-child{margin-top:var(--rjm-panel-inset)}
.card-stack{display:grid;gap:var(--rjm-gap);min-width:0}
.card-stack>.section-title,.card-stack>.kpi-grid{margin:0}
.card-stack>.form-error:empty,.panel--content [data-plan-unsaved]:empty{display:none}
.panel.panel--content{display:grid;gap:var(--rjm-content-gap);padding:var(--rjm-panel-inset);min-width:0}
.panel.panel--content>*{min-width:0}
.panel.panel--content>:is(h2,h3,h4,p,form,details,button,.field,.actions,.form-grid,.notice,.footnote){margin:0}
.two-column .panel.panel--content>div:not(.section-title):not(.table-scroll){margin:0}
.panel.panel--content>button,.panel.panel--content>form>button{justify-self:start;max-width:100%;white-space:normal}
.panel.panel--content>form{display:grid;gap:var(--rjm-content-gap);min-width:0}
.panel.panel--content>form>:is(h2,h3,h4,p,.field,.checkbox,.actions,.form-grid){margin:0}
.panel.panel--content .actions{gap:var(--rjm-action-gap);align-items:stretch}
.panel.panel--content .actions>.btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.panel.panel--content label.checkbox{min-height:44px}
.panel.panel--content>details>summary{min-height:44px;padding:12px 0}
.panel.panel--content>details[open]>:not(summary){margin-top:var(--rjm-content-gap)}
.actions.wizard-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:var(--rjm-action-gap)}
.wizard-actions>.btn{width:100%;white-space:normal}
@media(max-width:760px){:root{--rjm-panel-inset:16px}}
/* The export action is a bare panel child, outside any padded body. */
.suite-panel>button[data-suite-action="bulk-export"]{margin-left:21px;margin-right:21px}

/* Main application alignment normalization */
.workspace-shell{min-width:0}
.workspace-shell #main{width:100%;padding-left:var(--rjm-page-x);padding-right:var(--rjm-page-x)}
.topbar{padding-left:var(--rjm-page-x);padding-right:var(--rjm-page-x)}
.toolbar{gap:14px}
.toolbar-right{align-items:center}
.tabs button{min-height:42px}
.project-context{align-items:center}
.record-details dd{overflow-wrap:anywhere}
.dialog-actions{align-items:center}
.dialog-top>.icon-button{min-width:44px;min-height:44px;flex:0 0 auto}

/* Contract Center: make it part of RJM Build instead of a separate app wearing the same logo. */
.contract-center-page{background:var(--paper);color:var(--text)}
.contract-center-page .topbar{
  height:var(--rjm-topbar-h);
  padding:0 var(--rjm-page-x);
  background:#fbfcf8;
  color:var(--text);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
.contract-center-page .topbar>div{gap:10px}
.contract-center-page .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  color:var(--ink);
  font-size:15px;
  font-weight:750;
  letter-spacing:-.3px;
}
.contract-center-page .brand::before{
  content:"R";
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:9px;
  background:var(--green);
  color:#f2f2de;
  font-size:16px;
  font-weight:750;
}
.contract-center-page .topbar .muted{color:#90988e;font-size:11px}
.contract-center-page .back{color:var(--text);border-color:#dce2d8;background:#fff}
.contract-center-page .shell{
  width:100%;
  max-width:1700px;
  margin:0 auto;
  padding:var(--rjm-page-y) var(--rjm-page-x) 70px;
}
.contract-center-page .hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:27px;
}
.contract-center-page .hero h1{font-size:30px;line-height:1.22;margin:0 0 8px;font-weight:650}
.contract-center-page .hero p{font-size:12px;line-height:1.65;margin:0;color:#889081}
.contract-center-page .hero>.actions{justify-content:flex-end}
.contract-center-page .btn,
.contract-center-page button:not(.close){
  min-height:var(--rjm-control-h);
  border-radius:7px;
  padding:9px 14px;
  font-size:12px;
  font-weight:550;
  line-height:1.4;
}
.contract-center-page button:not(.secondary):not(.close),
.contract-center-page .btn:not(.secondary):not(.danger){background:var(--green);border:1px solid var(--green);color:#fff}
.contract-center-page .btn.secondary,
.contract-center-page button.secondary{background:#fff;color:var(--text);border:1px solid #dce2d8}
.contract-center-page .btn.danger{background:#fff;color:var(--red);border:1px solid #eccac5}
.contract-center-page .stats{gap:16px;margin-bottom:29px}
.contract-center-page .stat{padding:19px;border:1px solid var(--line);border-radius:var(--rjm-radius)}
.contract-center-page .stat strong{font-size:27px;font-weight:600;letter-spacing:-.9px;color:#293e2b}
.contract-center-page .stat span{font-size:10px;color:#8b9681}
.contract-center-page .layout{gap:25px;align-items:start}
.contract-center-page .panel{border:1px solid var(--line);border-radius:var(--rjm-radius);box-shadow:none}
.contract-center-page .panel-head{padding:20px 21px;min-height:66px;border-bottom:1px solid #eef0e9}
.contract-center-page .panel-head h2{font-size:16px;letter-spacing:-.35px}
.contract-center-page .panel-head p{font-size:10px;color:#949b8e;line-height:1.5}
.contract-center-page .cards{padding:14px 20px 20px;gap:10px}
.contract-center-page .package{border:1px solid #e5eadb;border-radius:7px;padding:14px 16px}
.contract-center-page .package h3{font-size:13px;color:var(--ink)}
.contract-center-page .package p{font-size:10px;color:#8b957f}
.contract-center-page .pill{border-radius:5px;padding:5px 7px;font-size:8px;font-weight:600;text-transform:none;letter-spacing:0}
.contract-center-page .table th,
.contract-center-page .table td{padding:13px 17px;vertical-align:middle}
.contract-center-page .table th{font-size:9px;background:#f8faf4;color:#8b967e}
.contract-center-page .table td{font-size:11px;color:#697a5b}
.contract-center-page .template-row{padding:13px 17px}
.contract-center-page .template-row strong{font-size:11px;color:#586b48}
.contract-center-page .template-row .meta{font-size:9px;color:#a0a68e}
.contract-center-page .notice{border-radius:7px;font-size:11px;padding:15px 17px}
.contract-center-page dialog{
  width:min(940px,calc(100vw - 32px));
  max-height:calc(100dvh - 48px);
  border:1px solid #dfe6d5;
  border-radius:12px;
  box-shadow:0 25px 80px rgba(23,46,35,.27);
}
.contract-center-page dialog::backdrop{background:rgba(29,48,41,.38);backdrop-filter:blur(2px)}
.contract-center-page #modal-body{padding:24px;max-height:calc(100dvh - 50px)}
.contract-center-page .modal-head{align-items:center;margin-bottom:22px}
.contract-center-page .modal-head h2{font-size:18px}
.contract-center-page .close{color:#738078;border-radius:6px}
.contract-center-page .field{gap:7px;color:#6d7f5d;font-size:11px;font-weight:550}
.contract-center-page .field input,
.contract-center-page .field select,
.contract-center-page .field textarea{padding:9px 11px;border-color:#dfe6d5;border-radius:6px;color:#4c6540;font-size:12px}
.contract-center-page .fieldset{border:1px solid var(--line);border-radius:8px;padding:16px}
.contract-center-page .check{border-color:#e5eadb;border-radius:7px;background:#fbfcf7}
.contract-center-page .modal-actions{align-items:center;border-color:#e7eddf;padding-top:20px}
.contract-center-page .toast{border-radius:8px;font-size:12px;line-height:1.7;background:#2a4a37;border:1px solid #54794a}
.contract-center-page .toast.error{background:#7d453b;border-color:#a46857}

/* Contract Center panels that hold forms/headings/disclosures directly (no .cards or .table wrapper). */
.contract-center-page .panel>.form-grid{padding:20px 21px 0}
.contract-center-page .panel>.modal-actions{padding:20px 21px}
.contract-center-page .panel>div:not(.panel-head)>h3{padding:0 20px}
.contract-center-page details.panel>summary{padding:18px 21px}

/* Public/standalone surfaces keep their purpose, but share RJM geometry and color rhythm. */
.sign-page,.bid-page{color:var(--text)}
.sign-header{min-height:var(--rjm-topbar-h);height:auto;padding-left:var(--rjm-page-x);padding-right:var(--rjm-page-x);background:var(--green-dark)}
.sign-summary,.package-contents,.document,.sign-box,.complete,.error-card{border-color:var(--line);border-radius:var(--rjm-radius-lg);box-shadow:var(--shadow)}
.bid-topbar{min-height:var(--rjm-topbar-h);height:auto;padding-left:var(--rjm-page-x);padding-right:var(--rjm-page-x)}
.bid-brand-mark{border-radius:9px;background:var(--green)}
.bid-project-card,.bid-panel,.bid-error{border-color:var(--line);border-radius:var(--rjm-radius-lg)}

/* Mobile rhythm: one gutter, one row behavior, no accidental horizontal drift. */
@media(max-width:760px){
  :root{--rjm-page-x:17px;--rjm-page-y:23px}
  .page-header,.contract-center-page .hero{align-items:flex-start;flex-direction:column;gap:15px}
  .page-header>.actions,.contract-center-page .hero>.actions{width:100%;justify-content:flex-start}
  .contract-center-page .topbar{height:61px}
  .contract-center-page .brand::before{width:32px;height:32px;flex-basis:32px;border-radius:8px}
  .contract-center-page .topbar .muted{display:none}
  .contract-center-page .back{min-height:34px;padding:7px 10px;font-size:10px}
  .contract-center-page .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:25px}
  .contract-center-page .stat{padding:15px 12px}
  .contract-center-page .stat strong{font-size:24px}
  .contract-center-page .layout{grid-template-columns:1fr;gap:18px}
  .contract-center-page .panel-head{padding:18px 17px}
  .panel>.milestone-list{padding:0 16px 18px}
  .panel>.milestone-requirements{padding:4px 16px 14px}
  .panel>.milestone-actions{padding:15px 16px 18px}
  .panel>.thread-shell{padding:16px}
  .panel>.suite-site-row,.panel>div:not([class])>.suite-site-row,.panel>[data-company-list]>.suite-site-row{padding-left:16px;padding-right:16px}
  .panel>.field,.panel>details,.panel>form,.panel>.actions{margin-left:16px;margin-right:16px}
  .panel[data-history-page]>h2{margin:18px 16px 8px}
  .suite-panel>button[data-suite-action="bulk-export"]{margin-left:16px;margin-right:16px}
  .contract-center-page .panel>.form-grid{padding:18px 17px 0}
  .contract-center-page .panel>.modal-actions{position:static;margin-left:0;margin-right:0;padding:16px 17px 18px}
  .contract-center-page .panel>div:not(.panel-head)>h3{padding:0 14px}
  .contract-center-page details.panel>summary{padding:16px 17px}
  .contract-center-page .cards{padding:12px 14px 16px}
  .contract-center-page .package{grid-template-columns:1fr;gap:10px}
  .contract-center-page #modal-body{padding:19px 16px}
  .contract-center-page .modal-actions{position:sticky;bottom:-19px;background:#fff;margin-left:-16px;margin-right:-16px;padding:15px 16px 19px}
  .contract-center-page .form-grid,.contract-center-page .check-grid{grid-template-columns:1fr}
  .contract-center-page input:not([type=checkbox]):not([type=radio]),
  .contract-center-page select,.contract-center-page textarea{font-size:16px}
}

@media(max-width:520px){
  .contract-center-page .stats{grid-template-columns:1fr 1fr}
  .contract-center-page .topbar>div{gap:6px}
  .contract-center-page .brand{font-size:14px}
}