/* --- Base ---------------------------------------------------------------- */
:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #1a1f2b;
  --muted: #6b7280;
  --border: #e3e6eb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --danger: #dc2626;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --success: #16a34a;
  --tag-bg: #eef2ff;
  --tag-text: #3730a3;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 8px rgba(0,0,0,.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code { background: #f1f3f5; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- Top bar ------------------------------------------------------------- */
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 700; font-size: 1.15rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.topbar nav {
  display: flex;
  gap: 0.35rem 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar nav a {
  color: var(--text);
  font-weight: 500;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: var(--accent); text-decoration: none; }
.topbar nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* --- Pursuit workflow ---------------------------------------------------- */
.workflow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.workflow-steps li {
  flex: 1;
  min-width: 7rem;
  text-align: center;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 0.82rem;
  color: var(--muted);
}
.workflow-steps li.active {
  border-color: var(--accent);
  background: #eef2ff;
  color: var(--accent);
  font-weight: 600;
}
.workflow-steps li.done {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: var(--success);
}
.panel-workflow {
  border-left: 4px solid var(--accent);
}
/* Actionable workflow stepper (bids/detail) — each card explains its state and
   the ACTIVE step carries its action button inline. */
.wf { display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem; margin:.8rem 0 .2rem; }
@media (max-width: 900px) { .wf { grid-template-columns:1fr 1fr; } }
@media (max-width: 540px) { .wf { grid-template-columns:1fr; } }
.wf-step { display:flex; gap:.6rem; align-items:flex-start; border:1px solid var(--border);
           border-radius:10px; background:var(--panel); padding:.7rem .8rem .8rem;
           font-size:.82rem; color:var(--muted); }
.wf-step .wf-ic { flex:none; width:24px; height:24px; border-radius:50%; margin-top:.05rem;
                  display:inline-flex; align-items:center; justify-content:center;
                  font-weight:700; font-size:.78rem; border:1.5px solid var(--border);
                  background:var(--bg, #f6f8fb); color:var(--muted); }
.wf-step strong { display:block; font-size:.86rem; margin-bottom:.15rem; color:inherit; }
.wf-step.done { border-color:#bbf7d0; background:#f6fef9; }
.wf-step.done .wf-ic { background:var(--success, #047857); border-color:var(--success, #047857); color:#fff; }
.wf-step.done strong { color:var(--success, #047857); }
.wf-step.active { border-color:var(--accent); box-shadow:0 4px 14px rgba(37,99,235,.13); }
.wf-step.active .wf-ic { background:var(--accent); border-color:var(--accent); color:#fff; }
.wf-step.active strong { color:var(--accent); }
.wf-sub { display:block; line-height:1.45; }
.wf-act { margin-top:.55rem; display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.wf-act code { font-size:.8rem; }
.intel-pill-ready { background: #dbeafe; color: #1e40af; }
.intel-pill-detected { background: #fef3c7; color: #92400e; }
.intel-pill-priced { background: #dcfce7; color: #166534; }
.intel-pill-needs { background: #f1f5f9; color: #475569; }
.subnav a {
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.subnav a:hover { background: #f1f3f5; color: var(--text); text-decoration: none; }
.subnav a.active { background: #eef2ff; color: var(--accent); }

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 0.95rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.stat-strip .stat strong { display: block; font-size: 1.1rem; color: var(--text); }
.stat-strip .stat span { color: var(--muted); font-size: 0.82rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* --- Footer -------------------------------------------------------------- */
footer { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--border); }
.small { font-size: 0.85em; }
.muted { color: var(--muted); }

/* --- Hero / home --------------------------------------------------------- */
.hero { padding: 1.5rem 0 2rem; }
.hero h1 { margin: 0 0 0.5rem 0; font-size: 1.75rem; }
.cta-row { margin-top: 1.25rem; display: flex; gap: 0.5rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); border-color: #cbd5e1; }
.card h3 { margin: 0 0 0.5rem 0; font-size: 1rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.card .stat-value { font-size: 1.75rem; margin: 0; font-weight: 700; }
.card .stat-value .muted { font-size: 0.9rem; font-weight: 400; }

/* --- Panels & layout ----------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.panel h2 { margin-top: 0; font-size: 1.15rem; }
.panel h3 { margin-top: 0; font-size: 1rem; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  gap: 1rem;
}
.page-head h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.page-head p { margin: .25rem 0 0; }

/* --- Banners ------------------------------------------------------------- */
.banner {
  padding: 0.8rem 1.1rem;
  border-radius: 11px;
  margin-bottom: 1.1rem;
  border: 1px solid transparent;
  line-height: 1.5;
  font-size: .92rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.banner.warn { background: var(--warn-bg); border-color: #fcd34d; color: #78350f; }
.banner.success { background: linear-gradient(180deg, #f0fdf4, #ecfdf5); border-color: #a7f3d0; color: #065f46; border-left: 3px solid #10b981; }
.banner.info { background: #eff6ff; border-color: #93c5fd; color: #1e3a8a; }

.panel-accent-success { background: #ecfdf5; border-color: #6ee7b7; }
.panel-accent-info { background: #eff6ff; border-color: #93c5fd; }
.panel-accent-warn { background: var(--warn-bg); border-color: #fcd34d; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #f1f3f5; text-decoration: none; }
.btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { background: white; color: var(--danger); border-color: #fecaca; }
.btn.danger:hover { background: #fef2f2; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: #f1f3f5; }
.btn.small { padding: 0.25rem 0.55rem; font-size: 0.85rem; }

.inline-form { display: inline; }

/* --- Forms --------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
  max-width: 720px;
}
.form-grid.wide { max-width: 920px; }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
}
.form-grid label { display: flex; flex-direction: column; font-size: 0.9rem; gap: 0.25rem; font-weight: 500; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  background: white;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.form-row {
  display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap;
}
.form-row input { flex: 1; min-width: 8rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); }
.form-actions { margin-top: 0.5rem; display: flex; gap: 0.5rem; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; }
fieldset legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.35rem; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.4rem 1rem; }
.checkbox { flex-direction: row !important; align-items: center; gap: 0.4rem !important; font-weight: 400 !important; }

.req { color: var(--danger); }
.inline { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; }

/* --- Filter bar ---------------------------------------------------------- */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  background: var(--panel);
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filter-bar input[type="search"] { flex: 1; min-width: 14rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius); }
.filter-bar select, .filter-bar input[type="number"] { padding: 0.45rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: white; }

/* --- Tables -------------------------------------------------------------- */
table.list {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
table.list th, table.list td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid #eef2f7; vertical-align: top; }
table.list th { background: #f1f5f9; font-weight: 600; font-size: 0.72rem; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; }
table.list tr:last-child td { border-bottom: none; }
table.list tr:hover { background: #fafbfc; }
.truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Key/value lists ----------------------------------------------------- */
dl.kv { margin: 0; display: grid; grid-template-columns: 11rem 1fr; gap: 0.4rem 1rem; }
dl.kv dt { color: var(--muted); font-size: 0.88rem; }
dl.kv dd { margin: 0; }

/* --- Tags & pills -------------------------------------------------------- */
.tag {
  display: inline-block;
  background: var(--tag-bg);
  color: var(--tag-text);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  margin-right: 0.25rem;
}
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  /* own line-height: inheriting the page's dumps its extra leading below the
     glyphs, so text rides visibly high in the capsule (2.0px above vs 3.55px
     below, measured). 1.4 centers it (2.0 / 2.38). */
  line-height: 1.4;
  /* a capsule must never wrap mid-label: in narrow table columns "May 2026"
     broke into two ragged left-aligned lines. Keep it one centered line and
     let the table's scroll wrapper absorb the width. */
  white-space: nowrap;
  text-align: center;
  background: #e5e7eb;
  color: #374151;
}
.pill-open      { background: #dbeafe; color: #1e3a8a; }
.pill-watching  { background: #fef3c7; color: #78350f; }
.pill-submitted { background: #ede9fe; color: #4c1d95; }
.pill-awarded   { background: #d1fae5; color: #064e3b; }
.pill-won       { background: #d1fae5; color: #064e3b; }
.pill-lost      { background: #fee2e2; color: #7f1d1d; }
.pill-closed    { background: #e5e7eb; color: #374151; }
.pill-no_bid    { background: #f3f4f6; color: #6b7280; }
.pill-pending   { background: #f3f4f6; color: #374151; }
.pill-withdrawn { background: #fee2e2; color: #7f1d1d; }

details summary { cursor: pointer; }

/* --- Badge & dot (alerts) ----------------------------------------------- */
.badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 6px;
  margin-left: 4px;
  background: var(--danger);
  color: white;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Scraper status pills ----------------------------------------------- */
.pill-success { background: #d1fae5; color: #064e3b; }
.pill-running { background: #dbeafe; color: #1e3a8a; }
.pill-error   { background: #fee2e2; color: #7f1d1d; }
.pill-partial { background: #fef3c7; color: #78350f; }

/* --- AI summary callout ------------------------------------------------- */
.ai-summary {
  background: #f0f9ff;
  border-left: 3px solid #0ea5e9;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* --- Budget progress bar ------------------------------------------------ */
.budget-bar {
  height: 10px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.budget-bar .fill {
  height: 100%;
  background: var(--accent);
  transition: width .2s;
}
.budget-bar .fill.warn { background: var(--warn); }
.budget-bar .fill.danger { background: var(--danger); }

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .topbar .wrap { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .page-head { flex-direction: column; }
}

/* --- Foundation polish (4-tab nav, bell, table refinement) --------------- */
.topbar nav.mainnav { gap: 0.25rem 1.5rem; align-items: center; }
.topbar nav.mainnav a {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.35rem 0;
}
.topbar nav.mainnav a.active { border-bottom-width: 2px; }

/* Alerts bell sits at the end of the main nav */
.topbar nav.mainnav a.bell {
  font-size: 1.05rem;
  position: relative;
  padding: 0.2rem 0.1rem;
  border-bottom: none;
}
.topbar nav.mainnav a.bell .badge { margin-left: 1px; }

/* Zebra striping + tabular numbers make the data tables far easier to scan */
table.list tbody tr:nth-child(even) { background: #fafbfc; }
table.list tbody tr:hover { background: #f1f5ff; }
table.list td { font-variant-numeric: tabular-nums; }

/* Sticky header so column labels stay visible while scrolling long tables */
table.list thead th { position: sticky; top: 0; z-index: 2; }

/* Right-align numeric columns when marked */
table.list th.num, table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pricing matrix: denser, middle-aligned rows so a long line-item sheet stays scannable */
.matrix-wrap table.list th, .matrix-wrap table.list td { padding: 0.36rem 0.55rem; vertical-align: middle; line-height: 1.3; }
.matrix-wrap table.list td input { padding: 0.3rem 0.4rem; }

/* Command center: clickable attention stats */
.stat-strip a.stat-link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.stat-strip a.stat-link:hover { border-color: #2563eb; box-shadow: 0 2px 10px rgba(0,0,0,.06); transform: translateY(-1px); }
.stat-strip .stat.stat-danger strong { color: #dc2626; }
.stat-strip .stat.stat-accent strong { color: #2563eb; }
.stat-strip.flush { margin: 0; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Pursuit pipeline board */
.pipeline { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
.pipe-col { flex: 1 1 0; min-width: 220px; background: #f4f6f8; border: 1px solid var(--border); border-radius: 10px; padding: .6rem; }
.pipe-head { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; }
.pipe-head .count { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 0 .5rem; font-size: .8rem; color: #374151; }
.pipe-card { background: #fff; border: 1px solid var(--border); border-left: 3px solid #cbd5e1; border-radius: 8px; padding: .55rem .6rem; margin-bottom: .55rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pipe-card.due-soon { border-left-color: #f59e0b; }
.pipe-card.overdue { border-left-color: #dc2626; }
.pipe-title { display: block; font-weight: 600; color: #111827; text-decoration: none; line-height: 1.25; }
.pipe-title:hover { text-decoration: underline; }
.pipe-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; align-items: center; }
.pipe-move { margin-top: .45rem; }
.pipe-move select { width: 100%; font-size: .8rem; padding: .25rem .4rem; border: 1px solid var(--border); border-radius: 6px; background: #fafbfc; }
.pipe-empty { text-align: center; padding: .6rem 0; opacity: .55; }
.pipe-card { transition: transform .1s ease, box-shadow .1s ease; }
.pipe-card:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(15, 23, 42, .09); }
.pipe-col-pricing .pipe-head { color: #92400e; }
.pipe-col-submitted .pipe-head { color: #6d28d9; }
.pipe-col-awarded .pipe-head { color: #166534; }
.pipe-col-awarded .pipe-head .count { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.pipe-col-lost .pipe-head { color: #b91c1c; }
.pipe-col-lost .pipe-head .count { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

/* Tighten the stat-strip number/label pairing */
.stat-strip .stat strong { line-height: 1.2; }

/* ---- Pricing workbench ---------------------------------------------------- */
.wb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.wb-head > div:first-child { flex: 1 1 24rem; min-width: 0; }
.wb-actions { display: flex; gap: .4rem; flex: none; }
.wb-controls { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; margin: .9rem 0 .4rem;
  padding: .7rem .8rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; }
.wb-ctl { display: flex; flex-direction: column; font-size: .78rem; color: #475569; gap: .25rem; }
.wb-ctl input[type=text], .wb-ctl select { padding: .35rem .45rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.wb-check { flex-direction: row; align-items: center; gap: .35rem; }
.wb-slider { min-width: 240px; flex: 1; }
.wb-slider-top { display: flex; justify-content: space-between; font-weight: 600; color: #334155; }
.wb-slider input[type=range] { width: 100%; }
.wb-slider-ends { display: flex; justify-content: space-between; font-size: .68rem; color: #94a3b8; }
.wb-winbar { margin: .3rem 0 .6rem; padding: .4rem .6rem; background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 6px; font-size: .85rem; }
.wb-winbar strong { font-size: 1.05rem; color: #047857; }

.wb-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; max-height: 70vh; }
.wb-table { margin: 0; font-size: .82rem; border-collapse: separate; border-spacing: 0; min-width: 100%; }
.wb-table thead th { position: sticky; top: 0; z-index: 2; background: #f1f5f9; white-space: nowrap; box-shadow: 0 1px 0 var(--border); }
.wb-table tfoot th { position: sticky; bottom: 0; z-index: 2; background: #f1f5f9; box-shadow: 0 -1px 0 var(--border); }
.wb-table .wb-sticky-l { position: sticky; left: 0; z-index: 1; background: #fff; max-width: 360px; }
.wb-table thead .wb-sticky-l, .wb-table tfoot .wb-sticky-l { z-index: 3; background: #f1f5f9; }
.wb-table tbody tr:hover .wb-sticky-l { background: #f8fafc; }
.wb-table td, .wb-table th { padding: .35rem .5rem; border-bottom: 1px solid #eef2f7; }
.wb-desc { color: #334155; }
.wb-n { display: inline-block; margin-left: .25rem; font-size: .65rem; color: #94a3b8; vertical-align: top; }
.wb-low { display: block; font-size: .66rem; color: #64748b; }
.wb-bid-input { width: 6.2rem; text-align: right; font-weight: 600; padding: .25rem .35rem;
  border: 1px solid #cbd5e1; border-radius: 5px; background: #fffef5; }
.wb-bid-input.overridden { background: #eff6ff; border-color: #93c5fd; }
.wb-lt { font-weight: 600; }
.wb-grand { font-size: 1.05rem; color: #111827; }
.wb-win.win-hi { color: #047857; font-weight: 700; }
.wb-win.win-mid { color: #b45309; font-weight: 600; }
.wb-win.win-lo { color: #b91c1c; }
.wb-extra { background: #fbf7ff; }
.btn-x { border: none; background: transparent; cursor: pointer; color: #94a3b8; font-size: .85rem; padding: 0 .1rem; }
.btn-x:hover { color: #ef4444; }

#wb-comp-dialog { border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; max-width: 380px; }
#wb-comp-dialog::backdrop { background: rgba(15,23,42,.35); }

.wb-chat { position: fixed; right: 0; top: 0; width: min(380px, 92vw); height: 100vh; background: #fff;
  border-left: 1px solid var(--border); box-shadow: -4px 0 18px rgba(0,0,0,.12); display: flex; flex-direction: column; z-index: 50; }
.wb-chat.hidden { display: none; }
.wb-chat-head { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.wb-chat-log { flex: 1; overflow-y: auto; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .55rem; }
.wb-msg { padding: .45rem .6rem; border-radius: 8px; font-size: .85rem; line-height: 1.35; max-width: 92%; white-space: pre-wrap; }
.wb-msg-you { align-self: flex-end; background: #2563eb; color: #fff; }
.wb-msg-ai { align-self: flex-start; background: #f1f5f9; color: #0f172a; }
.wb-chat-form { display: flex; gap: .4rem; padding: .7rem .9rem; border-top: 1px solid var(--border); }
.wb-chat-form input { flex: 1; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 6px; }

.hidden { display: none !important; }
.wb-loading { display: flex; align-items: center; gap: .9rem; padding: 1.2rem .4rem; }
.wb-loading .wb-progress { width: 260px; max-width: 60vw; height: 7px; background: #e5e7eb; border-radius: 4px; margin: .4rem 0 .2rem; overflow: hidden; }
.wb-progress-bar { height: 100%; width: 8%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 4px; transition: width .4s ease; }
.wb-spinner { width: 26px; height: 26px; border: 3px solid #dbeafe; border-top-color: #2563eb; border-radius: 50%; animation: wb-spin .8s linear infinite; flex: none; }
.wb-foreman-spin { animation: foreman-pulse 1.8s ease-in-out infinite; }
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* ---- Price a Bid — Foreman, premium ------------------------------------------ */
.foreman-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none;
  border-radius: 13px; color: #fff; background: linear-gradient(145deg, #f59e0b, #d97706); box-shadow: 0 6px 16px rgba(217,119,6,.35); }
.foreman-badge svg { width: 26px; height: 26px; }
.foreman-badge.lg { width: 64px; height: 64px; border-radius: 18px; }
.foreman-badge.lg svg { width: 36px; height: 36px; }
.foreman-badge.sm { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 2px 6px rgba(217,119,6,.3); }
.foreman-badge.sm svg { width: 16px; height: 16px; }
.foreman-name { font-weight: 700; color: #b45309; }

.ps-hero { display: flex; gap: 1rem; align-items: flex-start; margin: .4rem 0 1.3rem; }
.ps-hero-title { margin: 0; font-size: 1.65rem; letter-spacing: -.02em; line-height: 1.1; }
.ps-hero-sub { margin: .35rem 0 0; color: #475569; max-width: 62ch; line-height: 1.5; }

.ps-upload { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.1rem; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.ps-drop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem;
  padding: 2rem 1rem; border: 2px dashed #cbd5e1; border-radius: 13px; background: #f8fafc; cursor: pointer; transition: .18s; }
.ps-drop:hover { border-color: #f59e0b; background: #fffbeb; }
.ps-drop.drag { border-color: #f59e0b; background: #fef3c7; transform: translateY(-1px); }
.ps-drop.has-file { border-style: solid; border-color: #16a34a; background: #f0fdf4; }
.ps-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ps-drop-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #d97706; box-shadow: 0 2px 6px rgba(0,0,0,.07); }
.ps-drop-icon svg { width: 24px; height: 24px; }
.ps-drop-main { font-size: 1.02rem; color: #1e293b; }
.ps-link { color: #b45309; text-decoration: underline; }
.ps-drop-hint { font-size: .78rem; color: #94a3b8; max-width: 50ch; line-height: 1.45; }
.ps-drop-file { font-size: .88rem; font-weight: 600; color: #15803d; }
.ps-paste { margin-top: .9rem; }
.ps-paste > summary { cursor: pointer; color: #64748b; font-size: .85rem; list-style: none; }
.ps-paste > summary::-webkit-details-marker { display: none; }
.ps-paste > summary::before { content: "›"; display: inline-block; margin-right: .35rem; transition: transform .15s; }
.ps-paste[open] > summary::before { transform: rotate(90deg); }
.ps-paste textarea { width: 100%; margin-top: .5rem; font-family: ui-monospace, monospace; font-size: .85rem; padding: .6rem; border: 1px solid var(--border); border-radius: 8px; }
.ps-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; flex-wrap: wrap; }
.ps-stance { display: flex; flex-direction: column; font-size: .78rem; color: #475569; gap: .25rem; }
.ps-stance select { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.ps-go { font-size: 1rem; padding: .62rem 1.5rem; border-radius: 10px; }

/* Foreman processing overlay */
.foreman-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(30,41,59,.55), rgba(15,23,42,.84)); backdrop-filter: blur(6px); }
.foreman-card { width: min(440px, 92vw); background: #fff; border-radius: 20px; padding: 2rem 1.8rem 1.5rem; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.4); animation: foreman-pop .35s ease; }
@keyframes foreman-pop { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.foreman-orb { display: flex; justify-content: center; margin-bottom: .9rem; }
.foreman-orb .foreman-badge { animation: foreman-pulse 1.8s ease-in-out infinite; }
@keyframes foreman-pulse { 0%, 100% { box-shadow: 0 6px 16px rgba(217,119,6,.35); } 50% { box-shadow: 0 8px 34px rgba(217,119,6,.7); } }
.foreman-title { margin: 0 0 1.1rem; font-size: 1.2rem; letter-spacing: -.01em; color: #0f172a; }
.foreman-stages { list-style: none; padding: 0; margin: 0 0 1.1rem; text-align: left; display: flex; flex-direction: column; gap: .6rem; }
.foreman-stages li { position: relative; padding-left: 1.9rem; color: #94a3b8; font-size: .92rem; transition: .25s; }
.foreman-stages li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cbd5e1; box-sizing: border-box; }
.foreman-stages li.active { color: #0f172a; font-weight: 600; }
.foreman-stages li.active::before { border-color: #f59e0b; border-top-color: transparent; animation: foreman-spin .7s linear infinite; }
.foreman-stages li.done { color: #475569; }
.foreman-stages li.done::before { border-color: #16a34a; background: #16a34a; animation: none; }
.foreman-stages li.done::after { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg); }
@keyframes foreman-spin { to { transform: translateY(-50%) rotate(360deg); } }
.foreman-bar { height: 5px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-bottom: .9rem; }
.foreman-bar span { display: block; height: 100%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, #f59e0b, #fbbf24); animation: foreman-slide 1.5s ease-in-out infinite; }
@keyframes foreman-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.foreman-note { margin: 0; font-size: .8rem; color: #64748b; }

/* ---- Bid synopsis card ---- */
.wb-synopsis { margin: .3rem 0 .9rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc); box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.wb-syn-stats { display: flex; flex-wrap: wrap; gap: 1.2rem 2.4rem; align-items: flex-end; }
.wb-syn-stat { display: flex; flex-direction: column; min-width: 7.5rem; }
.wb-syn-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 700; }
.wb-syn-value { font-size: 1.35rem; font-weight: 700; color: #0f172a; line-height: 1.15; letter-spacing: -.01em; }
.wb-syn-sub { font-size: .72rem; color: #94a3b8; margin-top: .1rem; }
.wb-syn-hero { padding-right: 1.8rem; border-right: 1px solid #e8edf3; }
.wb-syn-hero .wb-syn-value { font-size: 1.95rem; color: #b45309; }
.wb-syn-win.win-hi { color: #047857; }
.wb-syn-win.win-mid { color: #b45309; }
.wb-syn-win.win-lo { color: #b91c1c; }
.wb-syn-line { margin: .85rem 0 0; padding-top: .7rem; border-top: 1px solid #eef2f7; font-size: .88rem; color: #475569; line-height: 1.5; }

/* ---- Soft color down the decision columns (Win% / Your bid / Line total) ---- */
.wb-table th.wb-win-col { background: #e9faf2; border-left: 2px solid #d7dde5; }
.wb-table th.wb-bid-col { background: #fef4e6; }
.wb-table th.wb-lt-col  { background: #eaf1fd; }
.wb-table td.wb-win { background: rgba(16,185,129,.07); border-left: 2px solid #eef2f7; }
.wb-table td.wb-bid { background: rgba(245,158,11,.09); }
.wb-table td.wb-lt  { background: rgba(37,99,235,.06); }
.wb-table tbody tr:hover td.wb-win { background: rgba(16,185,129,.13); }
.wb-table tbody tr:hover td.wb-bid { background: rgba(245,158,11,.17); }
.wb-table tbody tr:hover td.wb-lt  { background: rgba(37,99,235,.12); }
.wb-table tbody tr.row-warn td.wb-win,
.wb-table tbody tr.row-warn td.wb-bid,
.wb-table tbody tr.row-warn td.wb-lt { background: #f8fafc; }
.wb-table tfoot #wb-tot-win { background: #e9faf2; }
.wb-table tfoot #wb-tot-bid { background: #eaf1fd; }

/* ---- Table polish ---- */
.wb-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #475569; padding-top: .5rem; padding-bottom: .5rem; }
.wb-table tbody tr:hover td { background-color: #fcfdff; }
.wb-table tbody td { border-bottom: 1px solid #f1f5f9; }
.wb-table .wb-desc { color: #1e293b; }
.wb-table .wb-bid-input:focus { outline: 2px solid #f59e0b; outline-offset: -1px; background: #fff; }
.wb-table .wb-win { font-variant-numeric: tabular-nums; }

/* Bid title in the price-sheet header (click-to-rename) */
.wb-eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #b45309; }
.wb-rename-hint { color: #cbd5e1; font-weight: 600; }
.wb-bid-title-input { display: block; width: 100%; margin: .1rem 0 0; padding: .12rem .4rem;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: #0f172a; line-height: 1.25;
  border: 1px solid transparent; border-radius: 7px; background: transparent; }
.wb-bid-title-input:hover { background: #f8fafc; border-color: #eef2f7; }
.wb-bid-title-input:focus { background: #fff; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.15); }

/* Discount/markup bid header (no per-line pricing) */
.ps-disc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.ps-disc-stats { display: flex; gap: 1.8rem; }
.ps-disc-stat { display: flex; flex-direction: column; }

/* ---- Open Bids page ------------------------------------------------------- */
.bids-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: .4rem 0 1.1rem; }
.bids-h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.bids-filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .7rem .8rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem; }
.bids-filters input, .bids-filters select { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: .9rem; }
.bids-search { flex: 1; min-width: 15rem; }
.bids-radius { font-size: .82rem; color: #475569; display: inline-flex; align-items: center; gap: .35rem; }
.bids-radius input { width: 4.2rem; }

.bids-tablewrap { border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.bids-table { margin: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
.bids-table thead th { background: #f1f5f9; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #475569; padding: .6rem .85rem; text-align: left; }
.bids-table thead th.num { text-align: right; }
.bids-table tbody td { padding: .7rem .85rem; border-top: 1px solid #eef2f7; vertical-align: top; }
.bids-table tbody tr:hover { background: #fcfdff; }
.bids-link { font-weight: 600; color: #1e293b; text-decoration: none; font-size: .96rem; }
.bids-link:hover { color: #2563eb; text-decoration: underline; }
.bids-sub { font-size: .78rem; color: #94a3b8; margin-top: .15rem; }
.bids-dot { margin: 0 .25rem; color: #cbd5e1; }
.bids-due-date { font-weight: 600; color: #334155; font-size: .9rem; }
.due-tag { display: inline-block; margin-left: .35rem; font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: #e2e8f0; color: #475569; vertical-align: middle; }
.due-tag.due-near { background: #fef3c7; color: #92400e; }
.due-tag.due-soon { background: #fee2e2; color: #b91c1c; }
.due-tag.due-over { background: #f1f5f9; color: #94a3b8; }
.bids-value { font-weight: 600; color: #0f172a; }
.bids-actions .btn { margin-left: .25rem; }
.stage-pill { text-transform: capitalize; }
.stage-discovered { background: #eff6ff; color: #1d4ed8; }
.stage-pricing { background: #fef3c7; color: #92400e; }
.stage-submitted { background: #ede9fe; color: #6d28d9; }
.stage-awarded { background: #dcfce7; color: #166534; }
.stage-lost { background: #fee2e2; color: #b91c1c; }
.stage-no_bid { background: #f1f5f9; color: #64748b; }
.bids-empty { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--border); border-radius: 14px; background: #f8fafc; }
.bids-empty-icon { width: 56px; height: 56px; margin: 0 auto .8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #94a3b8; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.bids-empty-icon svg { width: 28px; height: 28px; }
.bids-empty h3 { margin: 0 0 .3rem; color: #334155; }
.bids-empty p { margin: 0 0 1rem; }

/* ---- Opportunities page --------------------------------------------------- */
.opps-scope { display: inline-flex; padding: 3px; gap: 2px; background: #f1f5f9; border: 1px solid var(--border); border-radius: 11px; margin: 0 0 .8rem; }
.seg-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .85rem; border-radius: 8px; font-size: .85rem; font-weight: 600; color: #64748b; text-decoration: none; transition: background .12s, color .12s, box-shadow .12s; }
.seg-btn:hover { color: #334155; }
.seg-btn.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.seg-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.seg-btn:not(.is-active) .seg-dot { background: #cbd5e1; box-shadow: none; }
.opps-count { margin: 0 0 1rem; }

.opps-ext { font-size: .8em; color: #94a3b8; }
.bids-link:hover .opps-ext { color: #2563eb; }
.opps-where { font-size: .82rem; color: #475569; }
.opps-src { font-size: .72rem; color: #94a3b8; margin-top: .15rem; }
.opps-past { background: #fcfcfd; }
.opps-past .bids-link, .opps-past .bids-due-date { color: #94a3b8; }
.opps-empty-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* service-line tag (matched work category) */
.svc-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .01em; padding: .18rem .55rem; border-radius: 999px; white-space: nowrap; background: #eef2ff; color: #3730a3; }
.svc-street_sweeping    { background: #dbeafe; color: #1e40af; }
.svc-striping           { background: #ffedd5; color: #9a3412; }
.svc-janitorial         { background: #ede9fe; color: #5b21b6; }
.svc-landscape          { background: #dcfce7; color: #166534; }
.svc-waste_hauling      { background: #f5f5f4; color: #57534e; }
.svc-concrete_chipping  { background: #f1f5f9; color: #334155; }
.svc-pressure_washing   { background: #cffafe; color: #155e75; }
.svc-porter             { background: #fce7f3; color: #9d174d; }
.svc-exterior_maintenance { background: #ccfbf1; color: #115e59; }
.svc-rmc                { background: #e0e7ff; color: #3730a3; }
.svc-tire_recycling     { background: #e5e7eb; color: #374151; }

/* Horizontal-scroll wrapper for wide tables (keeps the rightmost column reachable
   on narrow / split-screen windows instead of clipping it off the page edge). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin-top: 0; }
/* Line-item lookup "Most recent" cell — vendor is a clear link, period muted below. */
.recent-cell .recent-vendor { margin-top: .15rem; font-size: .8rem; line-height: 1.25; }
.recent-cell .recent-vendor a { color: #2563eb; text-decoration: none; font-weight: 600; }
.recent-cell .recent-vendor a:hover { text-decoration: underline; }

/* ---- Command center (home) ----------------------------------------------- */
.cc-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #f8fafc; border-radius: 16px; padding: 1.6rem 1.8rem; margin: .2rem 0 1.3rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
}
.cc-eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .7rem; font-weight: 600; color: #94a3b8; margin: 0 0 .3rem; }
.cc-title { margin: 0; font-size: 1.85rem; letter-spacing: -.025em; color: #fff; line-height: 1.1; }
.cc-sub { margin: .5rem 0 0; color: #cbd5e1; font-size: .95rem; }
.cc-sub strong { color: #fff; font-weight: 700; }
.cc-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.6rem; }
.cc-kpi {
  display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cc-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); border-color: #cbd5e1; text-decoration: none; }
.cc-kpi-num { font-size: 1.95rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.cc-kpi-label { font-size: .78rem; color: var(--muted); }
.cc-kpi.is-danger { border-color: #fecaca; background: linear-gradient(180deg, #fef2f2, #fff); }
.cc-kpi.is-danger .cc-kpi-num { color: var(--danger); }
.cc-kpi.is-warn { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb, #fff); }
.cc-kpi.is-warn .cc-kpi-num { color: #b45309; }

.cc-section { margin: 0 0 1.7rem; }
.cc-section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.cc-h2 { margin: 0; font-size: 1.12rem; letter-spacing: -.01em; }

.cc-clear { text-align: center; padding: 2.2rem 1rem; border: 1px dashed var(--border); border-radius: 14px; background: #f8fafc; }
.cc-clear-icon { width: 48px; height: 48px; margin: 0 auto .7rem; border-radius: 50%; background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.cc-clear p { margin: 0 0 .9rem; color: var(--muted); }

.cc-intel { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: .75rem; }
.cc-intel-card {
  display: flex; flex-direction: column; gap: .12rem; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem 1.25rem;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cc-intel-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37, 99, 235, .1); border-color: #bfdbfe; text-decoration: none; }
.cc-intel-num { font-size: 1.7rem; font-weight: 700; color: var(--accent); letter-spacing: -.02em; line-height: 1.15; }
.cc-intel-label { font-weight: 600; font-size: .9rem; }
.cc-intel-foot { font-size: .78rem; color: var(--muted); }

.cc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.cc-action {
  display: block; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem 1.25rem;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cc-action:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); border-color: var(--accent); text-decoration: none; }
.cc-action h3 { margin: 0 0 .35rem; font-size: 1rem; }
.cc-action h3::after { content: " →"; color: var(--accent); opacity: 0; transition: opacity .12s; }
.cc-action:hover h3::after { opacity: 1; }
.cc-action p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.cc-more { display: inline-block; margin-top: .75rem; font-size: .85rem; font-weight: 600; color: var(--accent); }

/* ---- Market item-prices: row drill-down (competitor pricing) ---- */
.ip-row { cursor: pointer; }
.ip-row:hover { background: #f8fafc; }
.ip-row:hover .ip-caret { opacity: 1; color: var(--accent); }
.ip-caret { opacity: .35; font-size: .75rem; margin-left: .3rem; transition: opacity .12s; }
.ip-detail-row > td {
  background: #f8fafc; border-bottom: 2px solid var(--border);
  padding: .35rem .9rem .9rem;
}
.ipd-panel { padding: .35rem 0 0; }
.ipd-h { margin: .45rem 0 .45rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ipd-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; }
@media (max-width: 900px) { .ipd-grid { grid-template-columns: 1fr; } }
.ipd-table { font-size: .85rem; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ipd-table th { font-size: .72rem; }

/* ---- Sortable table headers (vendor price book) ---- */
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover { color: var(--accent); text-decoration: none; }
.th-sort .th-arrow { margin-left: .3rem; font-size: .68rem; opacity: .35; }
.th-sort:hover .th-arrow { opacity: .8; }
.th-sort.active { color: var(--accent); }
.th-sort.active .th-arrow { opacity: 1; color: var(--accent); }

/* Neutral pill for a placed (non-winning) bid */
.pill-bid { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* ---- Item-prices table polish ---- */
.nowrap { white-space: nowrap; }
.ip-low { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; }
.cat-tag {
  display: inline-block; margin-left: .45rem; padding: .08rem .5rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  color: #1e40af; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 999px;
  vertical-align: 1px; white-space: nowrap;
}

/* ---- Document takers (bid intent) ---- */
.intent-bar { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.intent-bar span { display: block; height: 100%; background: linear-gradient(90deg, #93c5fd, #2563eb); border-radius: 999px; }

/* ---- Workbench: likely bidders (document takers) chip strip ---- */
.wb-likely {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem .8rem; margin: .75rem 0 0;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
}
.wb-likely-label { font-weight: 600; font-size: .85rem; color: #1e3a8a; }
.wb-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border: 1px solid #bfdbfe; border-radius: 999px;
  background: #fff; font-size: .8rem; cursor: pointer; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.wb-chip:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(37, 99, 235, .18); }
.wb-chip.added { background: #d1fae5; border-color: #6ee7b7; cursor: default; }
.wb-chip.added::after { content: " ✓"; color: #065f46; font-weight: 700; }
.wb-chip-files { color: var(--accent); font-weight: 700; font-size: .74rem; }

/* ---- Workbench sanity guards ---- */
.wb-syn-warn {
  margin: .75rem 0 0; padding: .65rem .9rem; font-size: .88rem; line-height: 1.5;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; color: #78350f;
}
.row-dominant { background: #fffbeb !important; }
.row-dominant td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.wb-unitnote {
  display: inline-block; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px;
  background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
  font-size: .68rem; font-weight: 600; cursor: help;
}

/* ---- Open Bids list polish ---- */
.bids-table tbody tr:hover { background: #f8fafc; }
.row-past { opacity: .62; }
.row-past:hover { opacity: 1; }
.bids-intel { white-space: nowrap; }
.takers-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-left: .35rem; padding: .18rem .55rem;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px;
  color: #1d4ed8; font-size: .76rem; font-weight: 600; text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.takers-badge:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(37, 99, 235, .18); text-decoration: none; }
.takers-badge svg { width: 13px; height: 13px; }

/* Saved-bid delete */
.saved-del { opacity: .4; }
.saved-row:hover .saved-del { opacity: 1; }

/* ---- Mobile & touch ------------------------------------------------------- */
/* Bare table.list tables (alerts, tabs, settings, bid detail) scroll inside
   themselves on phones instead of dragging the whole page sideways. Tables
   already inside a scroll wrapper keep normal table layout so their sticky
   headers/columns keep working. */
@media (max-width: 700px) {
  table.list { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bids-tablewrap table.list, .table-scroll table.list,
  .wb-tablewrap table.list, .matrix-wrap table.list { display: table; }

  /* Compact the filter bars so results aren't pushed below the fold:
     search takes its own row, the remaining controls sit two-up. */
  .bids-filters, .filter-bar { gap: .4rem; padding: .5rem .55rem; }
  .bids-filters input, .bids-filters select,
  .filter-bar input[type="search"], .filter-bar input[type="number"],
  .filter-bar select { padding: .35rem .45rem; font-size: .85rem; }
  .bids-search, .filter-bar input[type="search"] { flex: 1 1 100%; min-width: 0; }
  .bids-filters select, .filter-bar select { flex: 1 1 calc(50% - .4rem); min-width: 0; }
}

/* Thumb-size tap targets on touch devices (row buttons, nav links, table rows). */
@media (pointer: coarse) {
  .btn.small { padding: .5rem .8rem; }
  .topbar nav a, .topbar nav.mainnav a, .topbar nav.mainnav a.bell { padding: .5rem .4rem; }
  .subnav a { padding: .55rem .8rem; }
  table.list td, .bids-table tbody td { padding-top: .8rem; padding-bottom: .8rem; }
}

/* Filter-bar collapse on phones (toggle injected by base.html; no-op on desktop).
   Collapsed: only the toggle button shows. Open: normal compact filter grid. */
@media (max-width: 700px) {
  .bids-filters.filters-collapsed > *:not(.filters-toggle) { display: none; }
  .filters-toggle { flex: 1 1 100%; }
}

/* Same thumb-size bump on small screens regardless of pointer type — phone
   browsers in this app's use (truck, gloves) don't always report a coarse pointer. */
@media (max-width: 700px) {
  .btn.small { padding: .5rem .8rem; }
  .subnav a { padding: .55rem .8rem; }
  table.list td, .bids-table tbody td { padding-top: .8rem; padding-bottom: .8rem; }
}

/* --- Design-system consistency polish ------------------------------------- */

/* Tabular figures on numeric cells and stat values so money columns align
   vertically down a column (digits all take the same width). */
.num,
table.list td.num, table.list th.num,
.bids-table td.num, .bids-table th.num,
.wb-table td, .wb-table th,
.ipd-table td,
.stat-strip .stat strong,
.card .stat-value,
.cc-kpi-num, .cc-intel-num,
.wb-syn-value, .wb-grand { font-variant-numeric: tabular-nums; }

/* Visible keyboard-focus rings (also helps fat-finger taps on phones).
   :focus-visible only — mouse clicks keep the existing subtle styles. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Workbench title input keeps its amber accent for the keyboard ring too. */
.wb-bid-title-input:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

/* Unified status pills — combine with .pill or .due-tag as needed.
   (Declared here so they win the cascade over the base .pill/.due-tag colors.) */
.pill-new  { background: #dbeafe; color: #1e3a8a; }
.pill-won  { background: #d1fae5; color: #064e3b; }
.pill-warn { background: #fef3c7; color: #92400e; }

/* Slim global progress bar while an htmx request is in flight.
   htmx 2.x only marks the requesting element, so a tiny hook in base.html
   toggles body.htmx-inflight around htmx:beforeRequest/afterRequest. */
body.htmx-inflight::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 30%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  z-index: 2000;
  pointer-events: none;
  animation: hx-progress-slide 1.1s ease-in-out infinite;
}
@keyframes hx-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Subnav on phones: one horizontally scrollable row instead of wrapping
   into two or three rows. */
@media (max-width: 700px) {
  .subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; white-space: nowrap; }
}

/* Gentle hover transitions on nav links and small link-buttons — matches the
   existing .btn / .takers-badge pattern (colors only, no layout animation). */
.topbar nav a, .subnav a { transition: color .12s ease, background-color .12s ease, border-color .12s ease; }
.th-sort, .btn-x { transition: color .12s ease; }

/* --- Autofill Q&A card ("Foreman needs N answers") ------------------------- */
/* The af-* system styles the bid-docs question queue: per-doc collapsibles with
   count pills, design-system text inputs, radio chips, and compact grids for
   duplicate-field variants ("[1]".."[4]" collapse to one label + N inputs). */
.af-save { margin: .2rem 0 .8rem; }
.af-save-bottom { margin-top: .8rem; }

.af-doc {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  margin: 0 0 .6rem;
  overflow: hidden;
}
.af-doc-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .85rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  list-style: none;
  transition: background .12s;
}
.af-doc-summary::-webkit-details-marker { display: none; }
.af-doc-summary::before {
  content: "\203A"; /* › caret; rotates when the doc is open */
  flex: none;
  color: var(--muted);
  font-weight: 700;
  transition: transform .15s;
}
.af-doc[open] > .af-doc-summary::before { transform: rotate(90deg); }
.af-doc-summary:hover { background: #f8fafc; }
.af-doc-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.af-doc-count { flex: none; background: #eef2ff; color: #3730a3; }

.af-doc-body { padding: .1rem .95rem .95rem; border-top: 1px solid #eef2f7; }
.af-q { padding: .85rem 0 .35rem; }
.af-q + .af-q { border-top: 1px dashed #eef2f7; }

.af-label {
  display: block;
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 .4rem;
}

/* Same border/radius/focus treatment as .form-grid inputs, capped at a
   comfortable reading width (no fixed px — shrinks with the viewport). */
.af-input {
  display: block;
  width: 100%;
  max-width: 36rem;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  background: white;
}
.af-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.af-input::placeholder { color: #b6bcc6; }

/* Duplicate variants of one question — one label, N compact numbered inputs. */
.af-multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .5rem;
  max-width: 36rem;
}
.af-multi .af-input { max-width: none; }

/* Radio options as clickable chips. The native radio stays visible inside the
   chip, so browsers without :has() still show the checked state plainly. */
.af-choices { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .45rem; }
.af-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: white;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.af-chip input { margin: 0; accent-color: var(--accent); }
.af-chip:hover { border-color: var(--accent); }
.af-chip:has(input:checked) {
  background: #eef2ff;
  border-color: var(--accent);
  color: var(--accent-hover);
  font-weight: 600;
}

/* Yes/No certification rows: chip pair + a small optional free-text escape. */
.af-certify-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
  margin: 0 0 .45rem;
}
.af-certify-row .af-choices { margin: 0; }
.af-certify-row .af-input { width: auto; flex: 1 1 12rem; max-width: 20rem; }
.af-other { font-size: .88rem; }

/* --- Small layout utilities (consolidated repeated inline styles) ---------- */
.block { display: block; }
.m0 { margin: 0; }
.mt-1 { margin-top: 1rem; }
.pill-raise { vertical-align: 2px; }
.action-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }

/* Print: clean black-on-white sheets (price sheets get printed for bid day). */
@media print {
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, .subnav, footer,
  .filter-bar, .bids-filters, .filters-toggle, .toolbar, .opps-scope,
  .btn, button, .form-actions, .bids-actions, .cta-row, .cc-hero-actions,
  .wb-actions, .wb-controls, .wb-chat, .foreman-overlay, .banner,
  .pipe-move { display: none !important; }
  body.htmx-inflight::before { display: none; }
  .wrap { max-width: 100%; padding: 0; }
  a { color: #000; text-decoration: none; }
  .panel, .card, .stat-strip, .wb-synopsis { box-shadow: none; border: 1px solid #bbb; background: #fff; }
  table.list, .bids-table, .wb-table { width: 100% !important; box-shadow: none; font-size: 9.5pt; }
  table.list { display: table; } /* undo phone block-scroll if printing from a phone */
  table.list th, table.list td,
  .bids-table th, .bids-table td,
  .wb-table th, .wb-table td { border: 1px solid #bbb !important; background: #fff !important; color: #000 !important; }
  table.list thead th, .wb-table thead th, .wb-table tfoot th,
  .wb-table .wb-sticky-l { position: static !important; box-shadow: none !important; max-width: none; }
  .wb-tablewrap, .bids-tablewrap, .table-scroll, .matrix-wrap {
    overflow: visible !important; max-height: none !important; border: none; box-shadow: none;
  }
  tr { break-inside: avoid; }
  .wb-bid-input { border: none !important; background: #fff !important; }
}

/* ============ The Data Vault (/market/data-vault) ============ */
.vault { max-width: 900px; }

/* Hero — the live counter */
.vault-hero {
  text-align: center;
  padding: 2.4rem 1rem 2rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 50% -20%, #eef4ff 0%, var(--panel) 62%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.vault-hero-num {
  font-size: clamp(2.8rem, 9vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;   /* no width jitter during count-up */
}
.vault-hero-label { margin-top: .35rem; color: var(--muted); font-size: 1.02rem; }
.vault-hero-chips {
  margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
}
.vault-chip {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .8rem; font-weight: 500; line-height: 1.4;
  background: #eef2ff; color: #3730a3;
}
.vault-chip.up { background: #dcfce7; color: #166534; }

/* Fun-fact stat tiles */
.vault-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1.2rem;
}
.vault-fact {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: .9rem .7rem; text-align: center;
}
.vault-fact-n { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.vault-fact-l { display: block; margin-top: .1rem; color: var(--muted); font-size: .8rem; }

.vault-section { margin-bottom: 1.1rem; }
.vault-h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
.vault-h2 { font-size: 1.12rem; margin: 0 0 .2rem; }
.vault-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }

/* Legend */
.vault-legend { display: flex; gap: .9rem; flex-wrap: wrap; }
.vault-key { color: var(--muted); font-size: .8rem; display: inline-flex; align-items: center; gap: .35rem; }
.vault-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.vault-key i.core { background: var(--success); }
.vault-key i.civil { background: var(--accent); }
.vault-key i.data { background: #94a3b8; }          /* other civil trades, recessive slate */

/* Ranked bars */
.vault-bars { display: flex; flex-direction: column; gap: 6px; }
.vault-bar {
  display: grid;
  grid-template-columns: minmax(6.5rem, 10.5rem) 1fr auto;
  align-items: center; gap: .7rem;
}
.vault-bar-label {
  font-size: .86rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-bar-track {
  position: relative; height: 15px; background: #f0f2f6; border-radius: 999px; overflow: hidden;
}
.vault-bar-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 999px; min-width: 3px;
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}
.vault-bar-fill.core { background: var(--success); }
.vault-bar-fill.civil, .vault-bar-fill.src { background: var(--accent); }
.vault-bar-fill.data { background: #94a3b8; }        /* other civil trades, recessive slate */
.vault-bar-fill.home { background: var(--accent); }
.vault-bar-fill.geo  { background: #94a3b8; }        /* benchmark states, recessive slate */
.vault-bar-val {
  font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 4.5rem; text-align: right;
}
.vault-note { margin: .8rem 0 0; }
.vault-foot { margin-top: 1.2rem; text-align: center; }

@media (max-width: 560px) {
  .vault-facts { grid-template-columns: repeat(2, 1fr); }
  .vault-bar { grid-template-columns: 6rem 1fr auto; gap: .5rem; }
  .vault-bar-val { min-width: 3.6rem; }
}

/* --- Price trends vs market (vendor price book + Data Vault arrows) -------- */
/* Additive only. Direction is shown in NEUTRAL slate, never status green/red —
   a rising or falling unit price is context for a bid, not good or bad news. */
.trend-section { margin: 1.5rem 0 1.75rem; }
.trend-head { margin-bottom: .8rem; }
.trend-h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.trend-explainer { margin: 0; max-width: 60ch; }
.trend-key { font-weight: 600; }
.trend-key-vendor { color: var(--accent); }
.trend-key-market { color: var(--muted); text-decoration: underline dashed; }

.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .7rem;
}
.trend-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: .6rem .7rem .55rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.trend-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.trend-item {
  font-size: .86rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trend-unit {
  font-size: .68rem; color: var(--muted); font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 999px; padding: 0 .4rem; flex: none;
}

/* Sparkline: one shared y-scale; market median dashed + faint BEHIND the solid
   vendor line, with a dot on the vendor's latest point. Strokes stay crisp under
   the non-uniform stretch to the card width. */
.spark { display: block; width: 100%; height: 30px; overflow: visible; }
.spark polyline { fill: none; vector-effect: non-scaling-stroke; }
.spark-market { stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 3 2.5; opacity: .55; }
.spark-vendor { stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--accent); vector-effect: non-scaling-stroke; }

.trend-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.trend-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 600; line-height: 1.6;
  padding: 0 .45rem; border-radius: 999px;
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;   /* neutral slate */
  text-transform: capitalize; font-variant-numeric: tabular-nums;
}
.trend-chip.trend-flat { color: #64748b; }
.trend-arrow { font-size: .62rem; line-height: 1; }
.trend-pill {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 600; line-height: 1.6;
  padding: 0 .45rem; border-radius: 999px;
  background: var(--tag-bg); color: var(--tag-text);            /* subtle accent */
  font-variant-numeric: tabular-nums;
}
.trend-latest { margin: 0; font-variant-numeric: tabular-nums; }

/* Data Vault: a compact market-direction arrow trailing each service-line bar.
   The empty .trend-na keeps bars without a trend aligned with those that have one. */
.trend-arrow-chip {
  display: inline-flex; align-items: center; gap: .2rem; justify-content: flex-end;
  font-size: .72rem; font-weight: 600; color: #64748b;
  min-width: 3rem; font-variant-numeric: tabular-nums;
}
.trend-arrow-chip.trend-na { min-width: 3rem; }

@media (max-width: 560px) {
  .trend-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .trend-arrow-chip { min-width: 2.4rem; }
}

/* ===== "Refresh pricing" in-progress bar (bid detail #pricing panel) ===== */
.reprice-progress { margin: .55rem 0 .2rem; }
.reprice-bar {
  height: 6px; background: #eef2f7; border-radius: 999px; overflow: hidden;
}
.reprice-bar span {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: var(--accent);
  animation: reprice-slide 1.3s ease-in-out infinite;
}
@keyframes reprice-slide {
  0%   { margin-left: -42%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reprice-bar span { animation: none; width: 100%; opacity: .5; }
}


/* ==== MERIDIAN THEME (redesign) ==== */
/* ============================================================================
   REDESIGN — "Meridian" theme.  A premium, modern SaaS look layered on top of
   the existing structural CSS.  Overrides tokens + core components; every page
   inherits it because it all flows through the same classes.
   ============================================================================ */
:root {
  --bg: #eaeef4;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --text: #0b1220;
  --text-soft: #334155;
  --muted: #667085;
  --muted-2: #98a2b3;
  --border: #e5e8ef;
  --border-soft: #eef1f6;
  --accent: #4f46e5;
  --accent-2: #6366f1;
  --accent-hover: #4338ca;
  --accent-ink: #3730a3;
  --accent-tint: #eef2ff;
  --accent-tint-2: #e0e7ff;
  --ring: rgba(79, 70, 229, .30);
  --ok: #059669;   --ok-bg: #e7f7f0;   --ok-ink: #065f46;
  --warnc: #b45309; --warn-bg2: #fdf2df; --warn-ink: #92400e;
  --dangerc: #dc2626; --danger-bg: #fdecec; --danger-ink: #991b1b;
  --info: #2563eb; --info-bg: #e8f0fe; --info-ink: #1e40af;
  --radius: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px -10px rgba(16, 24, 40, .16);
  --shadow-lg: 0 4px 8px rgba(16, 24, 40, .04), 0 24px 48px -18px rgba(16, 24, 40, .28);
}

html { background: #eaeef4; }
body {
  background:
    radial-gradient(900px 420px at 12% -60px, #eef2ff 0%, rgba(238,242,255,0) 70%) no-repeat,
    linear-gradient(180deg, #f4f6fb 0%, #eaeef4 320px, #eaeef4 100%);
  color: var(--text-soft);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--text); font-weight: 680; letter-spacing: -.015em; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
code { background: var(--accent-tint); color: var(--accent-ink); border-radius: 6px; padding: 1px 6px; font-size: .86em; font-weight: 600; }
.muted { color: var(--muted); }

/* --- Top bar / nav ------------------------------------------------------- */
.topbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
  padding: .7rem 0;
  margin-bottom: 1.6rem;
  position: sticky; top: 0; z-index: 50;
}
.brand {
  font-weight: 800; font-size: 1.16rem; letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--accent), #0ea5e9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.topbar nav a { color: var(--text-soft); font-weight: 550; border-bottom: 2px solid transparent; }
.topbar nav a.active { color: var(--accent); border-bottom-color: var(--accent); }

.subnav {
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--border);
  border-radius: 12px; padding: .35rem; box-shadow: var(--shadow-sm);
}
.subnav a { color: var(--muted); font-weight: 550; border-radius: 8px; }
.subnav a:hover { background: var(--accent-tint); color: var(--accent-ink); }
.subnav a.active { background: var(--accent); color: #fff; box-shadow: 0 1px 2px var(--ring); }

/* --- Page header → hero card -------------------------------------------- */
.page-head {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.page-head h1 {
  margin: 0; font-size: 1.7rem; line-height: 1.2; font-weight: 750; letter-spacing: -.025em;
}
.page-head .muted { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }

/* --- Panels → elevated cards -------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.55rem;
  margin-bottom: 1.35rem;
  box-shadow: var(--shadow);
}
.panel h3 { margin: 0 0 .2rem; font-size: 1.06rem; font-weight: 680; }
.panel h4 { font-size: .96rem; font-weight: 650; }
.panel > p.muted.small:first-of-type, .panel h3 + p.muted { margin-top: .15rem; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Accent panels get a soft tinted wash + colored hairline instead of flat fills */
.panel-accent-info { background: linear-gradient(180deg, #f5f8ff, #ffffff); border-color: #d3ddfb; }
.panel-accent-success { background: linear-gradient(180deg, #f1fbf6, #ffffff); border-color: #b6e6cf; }
.panel-accent-warn { background: linear-gradient(180deg, #fdf7ea, #ffffff); border-color: #f0dcae; }
.panel-workflow { border-left: none; position: relative; }
.panel-workflow::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

/* --- Section cluster dividers (the reorg headers) ----------------------- */
.cluster-head {
  display: flex; align-items: center; gap: .7rem;
  margin: 2.1rem 0 .95rem; padding: 0; border: 0;
  font-size: .73rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); font-weight: 750;
}
.cluster-head::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.cluster-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, rgba(229, 232, 239, 0) 100%);
}
.cluster-head:first-of-type { margin-top: 1.1rem; }

/* --- Two-column masonry for the intel/reference panels ------------------- */
/* Short panels pack together and tall ones (Q&A, bid tables) fill a column,
   so the page stops leaving big empty gutters on wide screens. Cluster
   headers + wide/interactive panels span the full width. */
.panel-cols { column-count: 2; column-gap: 1.35rem; margin-top: .2rem; }
/* break-inside:avoid keeps a card whole; overflow-x:auto stops a wide table from
   forcing its column past 50% (which would scroll the whole page sideways). */
.panel-cols > .panel { break-inside: avoid; overflow-x: auto; }
.panel-cols > .panel > table,
.panel-cols > .panel .bids-tablewrap { max-width: 100%; }
.panel-cols > .cluster-head,
.panel-cols > .col-span { column-span: all; }
.panel-cols > .cluster-head { margin-top: 1.9rem; }
.panel-cols > .cluster-head:first-child { margin-top: 1.1rem; }
@media (max-width: 900px) { .panel-cols { column-count: 1; } }
/* JS masonry: the layout script (in bids/detail.html) wraps runs of flowing panels in
   .mrow/.mcol and adds .js-masonry, packing each panel into the shorter column so one tall
   panel can't leave a big empty column (which CSS multicol does). Multicol above is the
   no-JS fallback. Cluster headers + .col-span panels stay full width. */
.panel-cols.js-masonry { column-count: unset; column-gap: 0; display: flex; flex-direction: column; gap: 1.35rem; }
.panel-cols.js-masonry > .cluster-head { margin: .5rem 0 0; }
.panel-cols.js-masonry > .cluster-head:first-child { margin-top: 0; }
.panel-cols.js-masonry .mrow { display: flex; gap: 1.35rem; align-items: flex-start; }
.panel-cols.js-masonry .mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.35rem; }
.panel-cols.js-masonry .mcol > .panel { overflow-x: auto; }
/* Keep a very tall comparable-jobs table from dominating a column — scroll within the panel. */
.similar-scroll { max-height: 24rem; overflow-y: auto; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: #fff; color: var(--text); font-weight: 560; font-size: .9rem;
  padding: .48rem 1rem; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .12s, border-color .12s;
}
.btn:hover { background: var(--panel-2); border-color: #d5d9e2; transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 4px 12px -4px var(--ring);
}
.btn.primary:hover { background: linear-gradient(180deg, var(--accent), var(--accent-hover)); border-color: var(--accent-hover); }
.btn.danger { background: #fff; color: var(--dangerc); border-color: #f4c6c6; }
.btn.danger:hover { background: var(--danger-bg); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { background: var(--accent-tint); color: var(--accent-ink); box-shadow: none; }
.btn.small { padding: .3rem .65rem; font-size: .82rem; }

/* --- Pills & tags -------------------------------------------------------- */
.pill, .tag {
  display: inline-flex; align-items: center; gap: .3rem;
  border-radius: 999px; padding: .2rem .62rem;
  font-size: .72rem; font-weight: 650; letter-spacing: .01em; line-height: 1.4;
  border: 1px solid transparent;
}
.tag { background: var(--accent-tint); color: var(--accent-ink); }
.pill-raise { box-shadow: none; }
.intel-pill-ready    { background: var(--info-bg);  color: var(--info-ink);  border-color: #c7d9fb; }
.intel-pill-detected { background: var(--warn-bg2); color: var(--warn-ink);  border-color: #f0dcae; }
.intel-pill-priced   { background: var(--ok-bg);    color: var(--ok-ink);    border-color: #bce7d3; }
.intel-pill-needs    { background: #f1f3f8;         color: #475467;          border-color: #e2e6ef; }
.pill-open      { background: var(--info-bg); color: var(--info-ink); border-color: #c7d9fb; }
.pill-won, .pill-awarded { background: var(--ok-bg); color: var(--ok-ink); border-color: #bce7d3; }
.pill-lost, .pill-withdrawn { background: var(--danger-bg); color: var(--danger-ink); border-color: #f4c6c6; }
.pill-watching  { background: var(--warn-bg2); color: var(--warn-ink); border-color: #f0dcae; }
.pill-submitted { background: #efeafe; color: #5b21b6; border-color: #ddd3fb; }
.pill-success { background: var(--ok-bg); color: var(--ok-ink); }
.pill-running { background: var(--info-bg); color: var(--info-ink); }
.pill-error   { background: var(--danger-bg); color: var(--danger-ink); }

/* --- Tables -------------------------------------------------------------- */
table.list, .bids-table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  border-radius: var(--radius-md); overflow: hidden;
}
table.list { border: 1px solid var(--border-soft); }
table.list th, .bids-table thead th {
  background: var(--panel-2); font-weight: 650; font-size: .7rem;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  padding: .62rem .85rem; border-bottom: 1px solid var(--border);
}
table.list td, .bids-table tbody td {
  padding: .66rem .85rem; border-bottom: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums; vertical-align: top;
}
table.list tbody tr:last-child td { border-bottom: none; }
table.list tbody tr { transition: background .1s; }
table.list tbody tr:nth-child(even) { background: transparent; }
table.list tbody tr:hover, .bids-table tbody tr:hover { background: var(--accent-tint); }
.bids-tablewrap { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

/* --- Key/value + stat strips -------------------------------------------- */
dl.kv dt { color: var(--muted); font-size: .84rem; font-weight: 550; }
dl.kv dd { margin: 0; color: var(--text-soft); }
dl.kv dd strong { color: var(--text); }
.stat-strip { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-strip .stat strong { color: var(--text); font-weight: 700; }

/* Facts / dates strip: the inline-styled ".muted.small.block" labels → refined */
.panel .muted.small.block { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--muted-2); margin-bottom: .12rem; }

/* --- Banners ------------------------------------------------------------- */
.banner { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); font-size: .92rem; }
.banner.success { background: linear-gradient(180deg, #f0fdf7, #eafaf2); border-color: #b6e6cf; color: var(--ok-ink); border-left: 3px solid var(--ok); }

/* --- Workflow steps ------------------------------------------------------ */
.workflow-steps li {
  border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2);
  font-size: .8rem; font-weight: 600; color: var(--muted);
}
.workflow-steps li.active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }
.workflow-steps li.done { border-color: #bce7d3; background: var(--ok-bg); color: var(--ok-ink); }

/* --- Nested cards: soften so panels-in-panels don't stack heavy frames --- */
.panel .panel { box-shadow: none; border-color: var(--border-soft); background: var(--panel-2); }
.panel .panel .panel { background: #fff; }
.panel-workflow { background: linear-gradient(180deg, #fdfdff 0%, #fafbff 100%); }
.panel-workflow > .panel { background: #fff; box-shadow: var(--shadow-sm); }
/* "The brief" + pricing sub-cards read as distinct surfaces within the workflow */
#pricing { border-color: var(--border); }

/* --- Ask Foreman: floating chat, pinned bottom-right -------------------- */
.foreman-widget { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.foreman-fab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .62rem 1.1rem; border-radius: 999px; border: 1px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff;
  font-weight: 600; font-size: .92rem; cursor: pointer;
  box-shadow: 0 8px 22px -6px var(--ring), 0 2px 6px rgba(16,24,40,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.foreman-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px var(--ring), 0 3px 8px rgba(16,24,40,.22); }
.foreman-widget.open .foreman-fab { display: none; }
.foreman-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: 384px; max-width: calc(100vw - 40px);
  height: 540px; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.foreman-panel[hidden] { display: none; }  /* beat the UA [hidden] that display:flex overrides */
.foreman-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .95rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #fbfcff, #f5f8ff);
}
.foreman-x { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .2rem; }
.foreman-x:hover { color: var(--text); }
.foreman-log { flex: 1; overflow-y: auto; padding: .85rem .95rem; background: var(--panel-2); }
.foreman-msg { margin: .55rem 0; line-height: 1.5; }
.foreman-msg.foreman-you strong { color: var(--accent-ink); }
.foreman-form { display: flex; gap: .4rem; padding: .7rem .8rem; border-top: 1px solid var(--border); background: var(--panel); }
.foreman-form input { flex: 1; }
@media (max-width: 520px) {
  .foreman-widget { right: 12px; bottom: 12px; }
  .foreman-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 84px); }
}

/* --- Pricing-table polish: pin the Line column while scrolling competitors - */
#vendorMatrix table th:first-child,
#vendorMatrix table td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--border-soft);
}
#vendorMatrix thead th:first-child { z-index: 3; background: var(--panel-2); }
#vendorMatrix table tbody tr:hover td:first-child { background: var(--accent-tint); }
#vendorMatrix { border: 1px solid var(--border); border-radius: var(--radius-md); }
#vendorMatrix table { border: 0; }

/* --- Table tools + expand-to-fullscreen --------------------------------- */
.tbl-tools { display: flex; justify-content: flex-end; margin: .2rem 0 .35rem; }
.tbl-fs-backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(15, 23, 42, .42); }
.is-tbl-fs {
  position: fixed !important; inset: 16px !important; z-index: 200 !important;
  max-height: none !important; height: auto !important; max-width: none !important; width: auto !important;
  margin: 0 !important; padding: 2.9rem 1rem 1rem !important; overflow: auto !important;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.tbl-fs-close {
  position: fixed; top: 24px; right: 30px; z-index: 201;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .42rem .85rem; border-radius: 9px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-weight: 600; font-size: .85rem;
  cursor: pointer; box-shadow: var(--shadow);
}
.tbl-fs-close:hover { background: var(--panel-2); }
/* Center header titles in the workbench table too (matches the read-only matrix). */
.wb-table thead th { vertical-align: middle; }

/* --- Added-competitor column: wrap the vendor name + center the header ---- */
.wb-table th.wb-extra {
  white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none;
  text-transform: none; text-align: center; vertical-align: middle;
  min-width: 94px; max-width: 130px; line-height: 1.2; font-weight: 500;
}
.wb-table th.wb-extra .btn-x { margin-left: .2rem; }

/* --- Added-competitor cell: winning price + date/contract context -------- */
.wb-table td.wb-extra { text-align: center; }      /* center the added-competitor prices */
.wb-cell-ctx { display: block; font-size: .68rem; font-weight: 400; color: var(--muted-2); line-height: 1.25; margin-top: 1px; white-space: nowrap; }
.wb-cell-ctx a { color: var(--accent); }
.wb-cell-ctx a:hover { text-decoration: underline; }
.wb-ctract-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
.wb-cell-wt { display: block; font-size: .66rem; color: var(--muted-2); line-height: 1.2; margin-top: 1px; }
.wb-extra-notwon { color: var(--muted); }          /* muted when it's a bid, not a win */
.wb-notwon { font-style: italic; color: var(--muted-2); }

/* --- Inputs -------------------------------------------------------------- */
input[type=text], input[type=url], input[type=number], input[type=date], select, textarea {
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff;
  padding: .45rem .6rem; font: inherit; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }