/* ISG Bid Board — one stylesheet, tokens from DESIGN.md. Operate mode: the tool
   should disappear into the task. Brand lives in precise details: the navy top
   bar with its gold rule, Stolzl, crimson spent only on urgency. */

@font-face { font-family: 'Stolzl'; src: url('/fonts/Stolzl-Book.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Stolzl'; src: url('/fonts/Stolzl-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Stolzl'; src: url('/fonts/Stolzl-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --navy: #2c4251; --navy-dark: #1e2f3b; --navy-tint: #e6ebef;
  --crimson: #9c1d1f; --crimson-dark: #7a1517; --crimson-tint: #f7e6e6;
  --gold: #d7b377; --gold-dark: #8a6a2a; --gold-tint: #f6efe0;
  --charcoal: #575a5e; --light-gray: #eae8ed;
  --bg: #f5f4f7; --surface: #ffffff; --surface-2: #faf9fb;
  --border: #d4d8de; --border-strong: #b9c0c8;
  --text: #1a1a1a; --text-2: #575a5e; --text-3: #7a8590;
  --ring: #2c4251;
  --tier-a: var(--navy); --tier-a-bg: var(--navy-tint);
  --tier-b: var(--gold-dark); --tier-b-bg: var(--gold-tint);
  --tier-c: var(--charcoal); --tier-c-bg: var(--light-gray);
  /* D is the quietest tier on the board on purpose: it is the opt-in
     'dig if you have time' lane, so it must never pull the eye off A. */
  --tier-d: var(--text-3); --tier-d-bg: transparent;
  --urgent: var(--crimson); --urgent-bg: var(--crimson-tint);
  --ok: #2f7d4f; --ok-bg: #e5f2ea;
  --warn: #8a6a2a; --warn-bg: #f6efe0;
  --muted-action: var(--charcoal);
  --danger: var(--crimson);
  --font: 'Stolzl', 'Helvetica Neue', Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px;
  --lh-tight: 1.25; --lh-body: 1.5;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --r-ctl: 4px; --r-card: 6px;
  --shadow-1: 0 1px 2px rgba(30, 47, 59, .08);
  --shadow-2: 0 8px 24px rgba(30, 47, 59, .18);
  --dur: 160ms; --dur-drawer: 220ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --topbar-h: 56px; --filter-h: 48px; --drawer-w: 520px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-body);
  background: var(--bg); color: var(--text); min-height: 100dvh;
}
a { color: var(--navy); }
button, input, select, textarea { font-family: var(--font); font-size: var(--fs-base); color: var(--text); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; border-radius: var(--r-ctl); }
.skip:focus { left: 8px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-5); padding: 0 var(--s-5);
  background: var(--navy); color: #fff; border-bottom: 3px solid var(--gold);
}
.topbar .logo { height: 32px; width: auto; display: block; }
.topbar .title { font-weight: 700; font-size: var(--fs-md); letter-spacing: .01em; white-space: nowrap; }
.topbar nav { display: flex; gap: var(--s-2); margin-left: var(--s-2); }
.topbar nav a {
  color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
  padding: 6px 10px; border-radius: var(--r-ctl); transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topbar nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.topbar nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
.topbar nav a:focus-visible { outline-color: var(--gold); }
.counts { display: flex; gap: var(--s-4); margin-left: auto; align-items: baseline; }
.counts .c { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .78); }
.counts .c b { font-size: var(--fs-lg); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.counts .c.urgent b { color: #f2b3b4; }
.who { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: rgba(255, 255, 255, .82); white-space: nowrap; }
.who button { background: transparent; color: var(--gold); border: 1px solid rgba(215, 179, 119, .5); border-radius: var(--r-ctl); padding: 5px 10px; font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
.who button:hover { background: rgba(215, 179, 119, .12); }
.who button:focus-visible { outline-color: var(--gold); }

/* ---------- filter bar ---------- */
.filters {
  position: sticky; top: var(--topbar-h); z-index: 30; min-height: var(--filter-h);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-5);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip[aria-pressed="true"] .sub { color: rgba(255, 255, 255, .72); }
.chip .sub { font-weight: 400; color: var(--text-3); }
.chip.urg[aria-pressed="true"] { background: var(--crimson); border-color: var(--crimson); }
.chip b { font-variant-numeric: tabular-nums; }
.filters .sep { width: 1px; height: 24px; background: var(--border); }
.filters select, .filters input[type="search"] {
  height: 32px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface);
  padding: 0 10px; font-size: var(--fs-sm); color: var(--text); min-width: 160px;
}
.filters input[type="search"] { min-width: 240px; margin-left: auto; }
.filters label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.filters label.inline input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }
.freshness { font-size: var(--fs-xs); color: var(--text-3); max-width: 100%; } /* names every source; six of them ran 1600px wide when nowrap */
.freshness.stale { color: var(--gold-dark); font-weight: 500; }
.freshness.dead { color: var(--crimson); font-weight: 500; }

/* ---------- table ---------- */
.board { padding: var(--s-4) var(--s-5) var(--s-6); }
.tablewrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: auto; }
table.jobs { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.jobs th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-2);
  font-weight: 500; font-size: var(--fs-xs); letter-spacing: .02em; text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none;
}
table.jobs th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
table.jobs th button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
table.jobs th[aria-sort] button { color: var(--navy); font-weight: 700; }
table.jobs th button svg { width: 12px; height: 12px; opacity: .5; }
table.jobs th[aria-sort="ascending"] svg { transform: rotate(180deg); opacity: 1; }
table.jobs th[aria-sort="descending"] svg { opacity: 1; }
table.jobs td { padding: 8px 12px; border-bottom: 1px solid var(--light-gray); vertical-align: top; min-height: 44px; }
table.jobs tbody tr { cursor: pointer; transition: background var(--dur) var(--ease); }
table.jobs tbody tr:hover { background: var(--surface-2); }
table.jobs tbody tr:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
table.jobs tbody tr[aria-selected="true"] { background: var(--navy-tint); }
table.jobs tbody tr.is-urgent td:first-child { box-shadow: inset 3px 0 0 var(--urgent); }
table.jobs tbody tr.is-passed { opacity: .55; }
td.tier { width: 56px; }
td.bids { width: 112px; white-space: nowrap; }
td.bids .date { font-weight: 500; }
td.bids .days { display: block; font-size: var(--fs-xs); color: var(--text-3); }
td.bids .days.soon { color: var(--crimson); font-weight: 500; }
td.project { min-width: 260px; max-width: 420px; }
.pname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; color: var(--text); line-height: var(--lh-tight); }
.psrc { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-3); }
td.material { min-width: 220px; max-width: 320px; }
td.customers { min-width: 200px; max-width: 300px; }
td.csr { min-width: 200px; max-width: 280px; }
td.est { width: 96px; white-space: nowrap; text-align: right; }
td.decision { width: 120px; }
td.open { width: 44px; text-align: right; }
td.open a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--text-3); border-radius: var(--r-ctl); }
td.open a:hover { background: var(--light-gray); color: var(--navy); }
td.open a svg { width: 16px; height: 16px; }
.muted { color: var(--text-3); }
.more { font-size: var(--fs-xs); color: var(--text-3); }

/* badges */
.tierbadge {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px;
  font-weight: 700; font-size: var(--fs-sm); line-height: 1;
}
.tierbadge.A { background: var(--tier-a-bg); color: var(--tier-a); }
.tierbadge.B { background: var(--tier-b-bg); color: var(--tier-b); }
.tierbadge.C { background: var(--tier-c-bg); color: var(--tier-c); }
.tierbadge.D { background: var(--tier-d-bg); color: var(--tier-d); box-shadow: inset 0 0 0 1px var(--border); }
/* Why THIS job earned its letter. Was drawer-only, so the board showed a
   letter it never explained. Quiet by design: it is a check, not a headline. */
.tier .why { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.25;
  color: var(--text-3); max-width: 15ch; }
@media (max-width: 900px) { .tier .why { max-width: none; } }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; line-height: 1; }
.pill.urgent { background: var(--urgent-bg); color: var(--urgent); }
.pill.pursue { background: var(--ok-bg); color: var(--ok); }
.pill.pass { background: var(--light-gray); color: var(--muted-action); }
.pill.defer { background: var(--warn-bg); color: var(--warn); }
.pill.flag { background: var(--navy-tint); color: var(--navy); }
.conf { display: inline-block; margin-top: 3px; font-size: var(--fs-xs); padding: 1px 6px; border-radius: 3px; border: 1px solid transparent; line-height: 1.4; }
.conf.plans { background: var(--navy-tint); color: var(--navy); }
.conf.sheet { background: var(--navy-tint); color: var(--navy); }
.conf.listing { background: var(--light-gray); color: var(--text-2); }
.conf.guess { background: transparent; color: var(--gold-dark); border-color: var(--gold); border-style: dashed; }
.conf.none { background: transparent; color: var(--text-3); }
.cust { display: inline; }
.cust .noowner { color: var(--crimson); font-size: var(--fs-xs); font-weight: 500; margin-left: 2px; }
.csrline { display: block; }
.csrline.unowned { color: var(--crimson); }

/* states */
.state { padding: var(--s-6) var(--s-5); text-align: center; color: var(--text-2); }
.state h2 { margin: 0 0 var(--s-2); font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.state a, .state button.linky { color: var(--navy); font-weight: 500; background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; font-size: inherit; }
.banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); font-size: var(--fs-sm); }
.banner.err { background: var(--crimson-tint); color: var(--crimson-dark); }
.banner.warn { background: var(--gold-tint); color: var(--gold-dark); }
.banner button { margin-left: auto; }
.skeleton td { height: 44px; }
.skeleton .bar { height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--light-gray) 25%, var(--surface-2) 50%, var(--light-gray) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px;
  border-radius: var(--r-ctl); border: 1px solid var(--navy); background: var(--navy); color: #fff;
  font-weight: 500; font-size: var(--fs-base); cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.outline { background: var(--surface); color: var(--navy); }
.btn.outline:hover { background: var(--navy-tint); }
.btn.quiet { background: var(--surface); color: var(--muted-action); border-color: var(--border-strong); }
.btn.quiet:hover { background: var(--light-gray); }
.btn.crimson { background: var(--crimson); border-color: var(--crimson); }
.btn.crimson:hover { background: var(--crimson-dark); border-color: var(--crimson-dark); }
.btn.sm { height: 32px; padding: 0 12px; font-size: var(--fs-sm); }
.btn svg { width: 16px; height: 16px; }
.btn .spin { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.outline .spin, .btn.quiet .spin { border-color: rgba(44, 66, 81, .25); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(30, 47, 59, .4); opacity: 0; pointer-events: none; transition: opacity var(--dur-drawer) var(--ease); }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: var(--drawer-w); max-width: 100vw;
  background: var(--surface); box-shadow: var(--shadow-2); transform: translateX(100%);
  transition: transform var(--dur-drawer) var(--ease); display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer header { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.drawer header .meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: 6px; }
.drawer header h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-tight); }
.drawer header .sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.drawer .close { margin-left: auto; flex-shrink: 0; width: 36px; height: 36px; border: 0; background: transparent; border-radius: var(--r-ctl); cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.drawer .close:hover { background: var(--light-gray); color: var(--text); }
.drawer .close svg { width: 18px; height: 18px; }
.drawer .body { overflow: auto; padding: var(--s-4) var(--s-5) var(--s-6); flex: 1; }
.drawer section { padding: var(--s-4) 0; border-bottom: 1px solid var(--light-gray); }
.drawer section:last-child { border-bottom: 0; }
.drawer h3 { margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.drawer p { margin: 0 0 var(--s-2); max-width: 70ch; }
.drawer .facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.drawer .facts div { min-width: 0; }
.drawer .facts dt { font-size: var(--fs-xs); color: var(--text-3); margin: 0 0 2px; }
.drawer .facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.drawer ul.plain { list-style: none; margin: 0; padding: 0; }
.drawer ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--light-gray); display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; }
.drawer ul.plain li:last-child { border-bottom: 0; }
.drawer ul.plain .r { margin-left: auto; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.drawer .evidence { font-size: var(--fs-xs); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--light-gray); border-radius: var(--r-ctl); padding: 6px 8px; margin: 4px 0 0; overflow-wrap: anywhere; }
.drawer .actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.drawer .reason { margin-top: var(--s-2); display: none; gap: var(--s-2); }
.drawer .reason.show { display: flex; }
.drawer .reason input { flex: 1; height: 40px; border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 0 12px; }
.drawer .status { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); }
.drawer .status .undo { color: var(--navy); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; font-size: var(--fs-sm); }
.drawer .csrpick { display: flex; gap: var(--s-2); align-items: center; }
.drawer .csrpick select { flex: 1; height: 40px; border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 0 10px; background: var(--surface); }
.drawer .note { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--s-2); }
.drawer .links a { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s-4); font-weight: 500; }
.drawer .links svg { width: 14px; height: 14px; }
.drawer .role { font-size: var(--fs-xs); color: var(--text-3); }
.drawer .confirmed { color: var(--ok); font-size: var(--fs-xs); font-weight: 500; }
.live { position: fixed; bottom: var(--s-4); left: 50%; transform: translateX(-50%); z-index: 70; background: var(--navy-dark); color: #fff; padding: 10px 16px; border-radius: var(--r-ctl); font-size: var(--fs-sm); box-shadow: var(--shadow-2); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.live.show { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .counts .c span { display: none; }
  .filters input[type="search"] { min-width: 160px; }
}
@media (max-width: 600px) {
  .counts { display: none; } /* the filter chips carry the same numbers on a phone */
  .who span { display: none; }
}
@media (max-width: 900px) {
  :root { --drawer-w: 100vw; }
  .topbar { gap: var(--s-3); padding: 0 var(--s-4); }
  .topbar .title { display: none; }
  .filters, .board { padding-left: var(--s-4); padding-right: var(--s-4); }
  .tablewrap { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  table.jobs, table.jobs tbody, table.jobs tr, table.jobs td { display: block; }
  table.jobs thead { display: none; }
  table.jobs tbody tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); margin-bottom: var(--s-3); padding: var(--s-3); }
  table.jobs tbody tr.is-urgent { box-shadow: inset 3px 0 0 var(--urgent); }
  table.jobs tbody tr.is-urgent td:first-child { box-shadow: none; }
  table.jobs td { padding: 4px 0; border: 0; width: auto !important; max-width: none !important; min-width: 0 !important; }
  table.jobs td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--text-3); }
  td.tier::before, td.project::before, td.open { display: none; }
  td.tier { float: left; margin-right: var(--s-2); }
  td.bids { white-space: normal; } /* the date and time may wrap inside a card; nowrap pushed them past a 375px screen */
  td.est { text-align: left; }
  .drawer .facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .chip, .btn, table.jobs tbody tr { transition: none; }
  .skeleton .bar { animation: none; }
}

/* ---------- login ---------- */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-5); }
.login-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; }
.login-card .head { background: var(--navy); color: #fff; padding: var(--s-5); border-bottom: 3px solid var(--gold); display: flex; align-items: center; gap: var(--s-4); }
.login-card .head img { height: 44px; width: auto; }
.login-card .head h1 { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.login-card .head p { margin: 4px 0 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .78); }
.login-card form { padding: var(--s-5); }
.login-card label { display: block; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.login-card input { width: 100%; height: 44px; border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 0 12px; font-size: var(--fs-md); }
.login-card input:focus { border-color: var(--navy); }
.login-card .help { font-size: var(--fs-xs); color: var(--text-3); margin: 6px 0 var(--s-4); }
.login-card .err { color: var(--crimson); font-size: var(--fs-sm); margin: var(--s-3) 0 0; }
.login-card .btn { width: 100%; height: 44px; }
.login-foot { margin-top: var(--s-4); text-align: center; font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- prospects / admin ---------- */
.page { padding: var(--s-4) var(--s-5) var(--s-6); }
.page h1 { margin: 0 0 var(--s-1); font-size: var(--fs-lg); font-weight: 700; }
.page .lede { margin: 0 0 var(--s-4); color: var(--text-2); max-width: 70ch; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); }
table.data th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-2); font-weight: 500; font-size: var(--fs-xs); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data td { padding: 8px 12px; border-bottom: 1px solid var(--light-gray); vertical-align: top; }
table.data td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data th.n { text-align: right; }
.kpis { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.kpis div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s-3) var(--s-4); min-width: 140px; }
.kpis b { display: block; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpis span { font-size: var(--fs-xs); color: var(--text-2); }

/* Prospects: the job links a CSR opens to judge a company. Capped in height so
   one busy company cannot push the rest of the table off the screen. */
table.data td.jobs { max-width: 34ch; }
table.data td.jobs a { display: block; color: var(--navy); text-decoration: none;
  font-size: var(--fs-sm); line-height: 1.5; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
table.data td.jobs a:hover { text-decoration: underline; }
table.data td.jobs .more { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

/* ---------- shared ISG Tools menu ----------
   Canonical CSS from the ISG Tools Launcher (nav/isg-tools-menu.html, contract
   section 1). Kept verbatim so the menu looks the same in every tool; the two
   .topbar rules after it only place it in this header. */
.isg-tools { position: relative; font-family: inherit; }
.isg-tools > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0 .9rem; border-radius: 8px;
  font-weight: 600; font-size: .92rem; line-height: 1;
  color: #ffffff; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.45);
}
.isg-tools > summary::-webkit-details-marker { display: none; }
.isg-tools > summary::after {
  content: ""; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.isg-tools[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.isg-tools > summary:hover { background: rgba(255,255,255,.2); }
.isg-tools > summary:focus-visible { outline: 3px solid #d7b377; outline-offset: 2px; }
.isg-tools-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000;
  min-width: 240px; margin: 0; padding: .35rem; list-style: none;
  background: #ffffff; color: #1a1a1a; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(44,66,81,.22), 0 1px 2px rgba(26,26,26,.08);
}
.isg-tools-list li { margin: 0; }
.isg-tools-list a, .isg-tools-current {
  display: flex; align-items: center; min-height: 44px; padding: 0 .85rem;
  border-radius: 7px; color: #2c4251; text-decoration: none; font-size: .95rem; font-weight: 500;
}
.isg-tools-list a:hover { background: #eae8ed; }
.isg-tools-list a:focus-visible { outline: 3px solid #d7b377; outline-offset: -3px; }
.isg-tools-current { color: #575a5e; background: #eae8ed; cursor: default; }
.isg-tools-current::after { content: "current"; margin-left: auto; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #9c1d1f; }
.isg-tools-list li.isg-tools-all { border-top: 1px solid #eae8ed; margin-top: .25rem; padding-top: .25rem; }
.isg-tools-list li.isg-tools-all a { color: #9c1d1f; font-weight: 600; }
@media (max-width: 480px) { .isg-tools-list { position: fixed; left: .5rem; right: .5rem; top: auto; min-width: 0; } }
/* Placement in this header: the menu sits at the right end, after the signed-in person. */
.topbar .isg-tools { flex-shrink: 0; }
/* With a mouse the button matches the bar's other controls; on touch it keeps the contract's 44px hit area. */
@media (hover: hover) and (pointer: fine) { .topbar .isg-tools > summary { height: 36px; min-height: 36px; } }
@media (max-width: 600px) {
  /* A phone cannot fit the logo, both sections, Report, Sign out and Tools on
     one 56px row (the bar already overflowed 375px before the menu existed), so
     the bar takes two rows there: logo, sections and Tools first; Report and
     Sign out on the second. --topbar-h grows with it so the filter bar still
     sticks directly under it. */
  :root { --topbar-h: 92px; }
  .topbar { flex-wrap: wrap; align-content: center; column-gap: var(--s-2); row-gap: 0; }
  .topbar .isg-tools { order: 2; margin-left: auto; }
  .topbar .who { order: 3; flex-basis: 100%; justify-content: flex-end; }
}

/* ---------- report an issue ---------- */
.who #reportBtn { color: rgba(255, 255, 255, .82); border-color: rgba(255, 255, 255, .3); }
.who #reportBtn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.report-panel {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 80; width: 360px; max-width: calc(100vw - 2 * var(--s-4));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-2);
  padding: var(--s-4);
}
.report-panel .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-1); }
.report-panel .x { width: 32px; height: 32px; border: 0; background: transparent; border-radius: var(--r-ctl); cursor: pointer; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.report-panel .x:hover { background: var(--light-gray); color: var(--text); }
.report-panel .x svg { width: 16px; height: 16px; }
.report-panel .sub { margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--text-2); }
.report-panel textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 8px 10px; resize: vertical; font-size: var(--fs-sm); line-height: var(--lh-body); }
.report-panel textarea:focus { border-color: var(--navy); }
.report-panel label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); margin: var(--s-2) 0; cursor: pointer; }
.report-panel label.inline input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }
.report-panel .actions { display: flex; gap: var(--s-2); justify-content: flex-end; }
.report-panel .note { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--text-2); min-height: 1em; }

/* ---------- drawer: links to the other tools ---------- */
.drawer .tools a { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s-4); font-weight: 500; }
.drawer .tools svg { width: 14px; height: 14px; }