/* The GS Group CRM: the one stylesheet (the "Pro" look Anthony approved on 19 Sep 2026, the reference
   being gaze-crm-design/looks/gaze-pro.html, then moved a touch towards the GS Group website the same
   day: "this will now just be crm, not gaze ... make it look a touch more GS. keep the current font").

   Restrained and data-first: hairline borders, corners of 6px at most and square buttons, square
   progress segments, no gradients, no pastel bubbles, no pill buttons and no drop shadows (the Place
   sheet is the one exception). From the website: the navy (#1a1a2e) for ink, the menu and the filled
   button, the sage (#a3c1ad / #8fb39a) as the accent, and the notched bottom-left corner on filled
   buttons. Instrument Sans for text, Geist Mono for numbers, dates, money and phone numbers (the CRM's
   own fonts, kept on purpose; the website uses DM Sans).

   Light only, for everyone (Anthony: "default mode is always light colour, for all users"): nothing
   here follows the operating system's dark mode.

   The old token names (--surface, --text-3, --accent...) are kept and mapped onto the new palette,
   so page styles that still use them fall in line without each being rewritten. */

:root {
  color-scheme: light;
  /* the palette */
  --paper: #ffffff;
  --sub: #f7f7f8;
  --line: #e7e8eb;
  --line2: #f0f1f3;
  --line-strong: #d3d6db;
  --ink: #1a1a2e;          /* the website's navy: text, filled buttons, progress */
  --ink2: #4f5561;         /* the website's slate */
  --ink3: #7c8190;
  /* GS Group (gs-group.io css/styles.css) */
  --navy: #1a1a2e;
  --navy-2: #252542;       /* hover and the active menu item */
  --navy-line: rgba(255, 255, 255, .09);
  --on-navy: rgba(255, 255, 255, .92);
  --on-navy-2: rgba(255, 255, 255, .68);
  --on-navy-3: rgba(255, 255, 255, .46);
  --sage: #a3c1ad;
  --sage-dark: #8fb39a;
  --sage-soft: #eef4f0;
  --attn: #f2c46d;         /* attention counts on the navy menu (amber, readable on navy) */
  --notch: 10px;           /* the website's cut bottom-left corner, scaled to a 32px button */
  --ok: #1f7a4a;   --ok-bg: #e9f5ee;
  --warn: #9a6300; --warn-bg: #fbf3e3;
  --info: #2b58c9; --info-bg: #edf2fd;
  --bad: #b3362a;  --bad-bg: #fbeeec;
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono: var(--font-mono);

  /* the old names, mapped */
  --bg: var(--paper);
  --surface: var(--paper);
  --surface-2: var(--sub);
  --surface-3: var(--line2);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --text: var(--ink);
  --text-2: var(--ink2);
  --text-3: var(--ink3);
  --text-muted: var(--ink3);
  --accent: var(--ink);
  --accent-hover: var(--navy-2);
  --accent-soft: var(--sage-soft);
  --success: var(--ok);
  --success-soft: var(--ok-bg);
  --success-border: #bddcc9;
  --danger: var(--bad);
  --danger-soft: var(--bad-bg);
  --danger-border: #eac3bd;
  --warning: var(--warn);
  --warning-soft: var(--warn-bg);
  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 6px; --radius-xl: 6px; --radius-pill: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

html { background: var(--paper); }
body {
  font: 13.5px/1.45 var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: inherit; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: var(--sage-dark); }
::selection { background: rgba(163, 193, 173, .45); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); }
strong, b { font-weight: 600; }
.mono, .num-mono, code, kbd {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.mono { font-size: .93em; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ================================================================ app shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; position: relative; }
/* the sidebar's column runs the whole height of a long page, behind the sticky sidebar */
.shell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 232px; background: var(--navy); }
.sidebar, .main { position: relative; }

/* The menu: the website's navy, the white GS Group logo, sage for where you are. */
.sidebar {
  background: var(--navy); color: var(--on-navy);
  display: flex; flex-direction: column; padding: 16px 10px 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.sidebar :focus-visible { outline-color: var(--sage); }
.dev-on .sidebar { top: 22px; height: calc(100vh - 22px); }
.ws { display: flex; align-items: center; gap: 12px; padding: 4px 10px 18px; text-decoration: none; color: var(--on-navy); }
.ws-logo { display: block; height: 32px; width: auto; flex: none; }
.ws-app {
  font: 600 10.5px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--sage);
  padding: 3px 0 3px 12px; border-left: 1px solid rgba(255, 255, 255, .22);
}

.srch {
  display: flex; align-items: center; gap: 8px; margin: 0 4px 14px; padding: 0 6px 0 9px; height: 30px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; background: rgba(255, 255, 255, .06); color: var(--on-navy-3);
}
.srch:focus-within { border-color: var(--sage); background: rgba(255, 255, 255, .09); }
.srch svg { flex: none; }
.srch input { border: 0; background: none; outline: none; min-width: 0; flex: 1; font-size: 12.5px; color: #fff; padding: 0; }
.srch input::placeholder { color: var(--on-navy-3); }
.srch input::-webkit-search-cancel-button { display: none; }
.srch kbd { font: 500 10.5px var(--font-mono); border: 1px solid rgba(255, 255, 255, .16); border-radius: 3px; padding: 0 5px; color: var(--on-navy-3); line-height: 16px; }

/* group labels: small capitals with the website nav's tracking */
.grp { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-3); padding: 12px 10px 6px; }
.nav-section { display: flex; flex-direction: column; gap: 1px; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 0;
  color: var(--on-navy-2); font-weight: 500; font-size: 13.5px; text-decoration: none; border: 0; background: none;
}
.nav-link svg { width: 16px; height: 16px; flex: none; opacity: .85; color: currentColor; }
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav-link.active { background: var(--navy-2); color: #fff; box-shadow: none; }
.nav-link.active::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; background: var(--sage); }
.nav-link.active svg { color: var(--sage); opacity: 1; }
.nav-count, .cnt { margin-left: auto; font: 500 11.5px var(--font-mono); color: var(--on-navy-2); background: none; padding: 0; min-width: 0; }
.nav-count.alert, .cnt.alert { color: var(--attn); }
.nav-tag { margin-left: auto; font-size: 10.5px; padding: 0 5px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 3px; color: var(--on-navy-3); }
.nav-group-btn { width: 100%; text-align: left; cursor: pointer; }
.nav-group-caret { margin-left: auto; width: 11px !important; height: 11px !important; transition: transform 120ms; }
.nav-group-btn[aria-expanded="true"] .nav-group-caret { transform: rotate(90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 2px 18px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .12); }
.nav-sub { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 0; font-size: 13px; color: var(--on-navy-2); text-decoration: none; }
.nav-sub:hover { color: #fff; }
.nav-sub.active { color: #fff; background: var(--navy-2); box-shadow: inset 2px 0 0 var(--sage); }
.nav-sub-2 { padding-left: 22px; font-size: 12.5px; }
.sb-gap { flex: 1; min-height: 16px; }

.me { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--navy-line); margin: 0 -10px; padding: 12px 10px 12px 18px; }
.sq { width: 24px; height: 24px; border-radius: 0; background: var(--sage); color: var(--navy); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; flex: none; }
.me-text { flex: 1; min-width: 0; line-height: 1.3; }
.me-name { font-weight: 500; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-sub { display: block; color: var(--on-navy-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; background: transparent;
  color: var(--ink3); border-radius: 4px; cursor: pointer; text-decoration: none; flex: none; padding: 0;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line); background: var(--paper); }
.sidebar .icon-btn { color: var(--on-navy-3); }
.sidebar .icon-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.signout-form { display: flex; flex: none; margin: 0; }

.main { min-width: 0; display: flex; flex-direction: column; position: relative; }
.bar {
  display: flex; align-items: center; gap: 10px; padding: 0 24px; height: 48px; flex: none;
  border-bottom: 1px solid var(--line); color: var(--ink3); font-size: 13px; background: var(--paper);
}
.crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.crumbs a { color: var(--ink3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { opacity: .6; }
.bar-right { margin-left: auto; display: flex; gap: 14px; align-items: center; flex: none; }
.topbar-bell { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); text-decoration: none; }
.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* ================================================================ page frame */
.page-header, .ph {
  padding: 22px 24px 0; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; justify-content: space-between;
  background: none; border: 0;
}
.page-title, .ph h1 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.page-subtitle, .sub1 { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink2); font-size: 13px; }
.page-subtitle { display: block; }
.sub1 .k { color: var(--ink3); }
.page-header > .row, .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-body { padding: 18px 24px 32px; flex: 1; min-width: 0; }
/* pages whose content sits straight under the header, without a page-body */
.main > .panel, .main > .edit-grid, .main > .table-wrap, .main > form, .main > section, .main > .edit-page > .panel,
.edit-page > .edit-grid, .main > .settings-body { margin-left: 24px; margin-right: 24px; }
.main > .page-header + .panel, .main > .page-header + form, .edit-page > .page-header + .panel,
.edit-page > .page-header + .edit-grid, .main > .page-header + .edit-grid { margin-top: 18px; }
.main > .panel:last-child, .main > .edit-grid:last-child, .edit-page > .edit-grid:last-child { margin-bottom: 32px; }

.tabbar { display: flex; gap: 2px; padding: 0 24px; border-bottom: 1px solid var(--line); overflow-x: auto; background: none; }
.tabbar .tab, .tabs a {
  padding: 8px 12px 10px; color: var(--ink2); font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 7px; align-items: center;
}
.tabbar .tab:hover, .tabs a:hover { color: var(--ink); }
.tabbar .tab.on, .tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a .mono { color: var(--ink3); font-size: 12px; }
.tabs a .mono.alert { color: var(--warn); font-weight: 600; }

.flashes { padding: 14px 24px 0; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 9px 12px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.flash::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ink3); }
.flash-success::before { background: var(--ok); }
.flash-error { border-color: #eac3bd; background: var(--bad-bg); }
.flash-error::before { background: var(--bad); }
.flash-info::before { background: var(--info); }
.flash-warning { border-color: var(--warn); background: var(--warn-bg); }
.flash-warning::before { background: var(--warn); }

.dev-banner {
  position: sticky; top: 0; z-index: 1000; height: 22px; display: flex; align-items: center; justify-content: center;
  background: #8a5a00; color: #fff; font: 500 11.5px/1 var(--font); letter-spacing: .02em; padding: 0 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dev-banner b { font: 600 10.5px var(--font-mono); letter-spacing: .08em; margin-right: 8px; }

/* ================================================================ buttons */
.btn, .b {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 0;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  font: 500 13px/1 var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color 100ms, background-color 100ms, opacity 160ms; box-shadow: none;
}
.btn:hover, .b:hover { border-color: var(--ink); background: var(--paper); }
.btn:focus-visible, .b:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: none; }
/* Filled buttons: square, with the website's cut bottom-left corner. The cut would clip an outside
   focus ring, so a filled button shows its focus as an inside sage ring instead. */
.btn-primary, .b.p, .btn-alert, .b.acc {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
  padding-left: 14px; padding-right: 14px;
}
.btn-primary, .b.p { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover, .b.p:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-primary:focus-visible, .b.p:focus-visible, .btn-alert:focus-visible, .b.acc:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--sage), inset 0 0 0 3px var(--navy);
}
/* Approve: the sage of the website with navy text (7:1). */
.btn-alert, .b.acc { background: var(--sage-dark); color: var(--navy); border-color: var(--sage-dark); font-weight: 600; }
.btn-alert:hover, .b.acc:hover { background: var(--sage); border-color: var(--sage); }
.btn-danger { color: var(--bad); background: var(--paper); border-color: var(--line-strong); }
.btn-danger:hover { border-color: var(--bad); background: var(--paper); }
.btn-ghost, .b.t { background: transparent; border-color: transparent; color: var(--ink2); }
.btn-ghost:hover, .b.t:hover { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 0; --notch: 8px; }
.btn-sm.btn-primary, .btn-sm.btn-alert { padding-left: 12px; padding-right: 12px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { cursor: default; }
.btn kbd, .b kbd { font: 500 11px var(--font-mono); opacity: .6; }
button.linkish { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
button.linkish:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }

/* Save / Discard: dead until something differs, then a short fade in. */
.gate { transition: opacity 160ms ease; }
.gate.idle { opacity: .35; pointer-events: none; cursor: default; filter: none; transform: none; }
.gate-hint { align-self: center; transition: opacity 160ms ease; color: var(--ink3); font-size: 12px; }
.gate-hint.gone { opacity: 0; }

/* ================================================================ inputs */
.input, .select, .in, textarea.input {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 4px; background: var(--paper); color: var(--ink);
  font: 400 13.5px var(--font); box-shadow: none; transition: border-color 100ms;
}
textarea.input { height: auto; min-height: 64px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
.input::placeholder, textarea::placeholder { color: var(--ink3); }
.input:hover, .select:hover { border-color: var(--ink3); }
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(163, 193, 173, .35); }
.input:disabled, .select:disabled { background: var(--sub); color: var(--ink2); }
input[type="date"].input, input[type="number"].input, .input[inputmode="decimal"], .input[inputmode="tel"], .num-box, .input.mono {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: -.01em;
}
.select {
  appearance: none; padding-right: 30px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2380868f' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
}
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset:disabled .seg-btn { cursor: default; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label, .fld label { font-size: 12.5px; font-weight: 500; color: var(--ink2); }
.field-help { font-size: 12px; color: var(--ink3); }
.field-error { color: var(--bad); font-size: 12px; font-weight: 500; }
.needs { color: var(--warn); font-weight: 500; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* a slider paired with its number box */
.num-row { display: flex; gap: 12px; align-items: center; }
.num-row input[type="range"] { flex: 1; min-width: 0; }
.num-wrap { position: relative; flex: 0 0 auto; }
.num-box { width: 104px; padding-right: 24px; text-align: right; }
.num-box.wide { width: 124px; padding-right: 10px; }
.num-wrap:has(.num-suffix) .num-box { padding-right: 24px; }
.num-suffix { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 12px var(--font-mono); color: var(--ink3); pointer-events: none; }
.num-scale { display: flex; justify-content: space-between; font: 11px var(--font-mono); color: var(--ink3); }
.num-readout { font-family: var(--font-mono); font-size: 11.5px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; margin: 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--line); border-radius: 0; }
input[type="range"]::-moz-range-track { height: 3px; background: var(--line); border-radius: 0; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 3px;
  background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink);
}
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 3px; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgba(163, 193, 173, .6); }
input[type="range"].off { opacity: .4; }

/* Two-state and few-option choices: a segmented control (the 360/180 toggle of the mockup). */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 0 1px 1px 0; max-width: 100%; align-self: flex-start; }
.seg-btn {
  position: relative; margin: 0 -1px -1px 0; height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink2);
  font: 500 12.5px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
}
/* square, like the buttons */
.seg-btn:hover { color: var(--ink); z-index: 1; border-color: var(--line-strong); }
.seg-btn.on, .seg-btn[aria-pressed="true"].on { background: var(--navy); border-color: var(--navy); color: #fff; z-index: 2; }
.seg-btn:disabled { opacity: .45; cursor: not-allowed; }
.seg[data-locked] .seg-btn { cursor: not-allowed; }
.seg[data-locked] .seg-btn:not(.on) { opacity: .45; }
.seg-n { font-family: var(--font-mono); font-size: 11.5px; opacity: .65; }
.seg-btn.on .seg-n { opacity: .75; }

/* quick date buttons under a date field */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
  color: var(--ink2); font: 500 12px var(--font); cursor: pointer;
}
.chip-btn:hover { color: var(--ink); border-color: var(--sage-dark); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px dashed var(--line); border-radius: 6px;
  color: var(--ink2); font-size: 12.5px; background: none; font-weight: 400;
}
.chip b { color: var(--ink); font-weight: 500; }

.picker-wrap { position: relative; }
.pick-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px; list-style: none;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: none; max-height: 260px; overflow: auto;
}
.pick-list li { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.pick-list li.active, .pick-list li:hover { background: var(--sub); }

/* ================================================================ cards, panels */
.panel, .surface, .job-card, .deal-card, .outlined-card, .org-box, .person-card, .cp-panel {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: none;
}
.panel > .hd, .panel-head { padding: 12px 14px; border-bottom: 1px solid var(--line2); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.panel > .hd h2, .panel > .hd h3, .panel > .hd h4 { margin: 0; font-size: 13px; font-weight: 600; }
.panel > .bd, .panel-body { padding: 12px 14px; }
.surface-pad { padding: 14px 16px; }
.section-title, .card-title, .job-card-title, .person-card-title { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.section-title { margin-bottom: 10px; }
.card-title { margin-bottom: 0; }
.big { font: 500 26px/1 var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big small { font: 400 14px var(--font); color: var(--ink3); letter-spacing: 0; }
.dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13px; }
.dl dt { color: var(--ink3); }
.dl dd { margin: 0; overflow-wrap: anywhere; }

/* ================================================================ tables */
.tw, .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: none; }
table { width: 100%; border-collapse: collapse; color: inherit; }
thead { background: none; }
th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3);
  text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--sub); white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--line2); vertical-align: middle; font-size: 13.5px; color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--sub); }
tbody tr:hover { background: none; }
td.r, th.r, td.num, th.num { text-align: right; }
td.num, td.r.mono, td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; letter-spacing: -.01em; }
.panel > table, .panel > .table, .panel > .tw { border-radius: 6px; }
.panel > table th:first-child, .panel > .table th:first-child { border-top-left-radius: 6px; }
.panel > table th:last-child, .panel > .table th:last-child { border-top-right-radius: 6px; }
.panel:has(> table), .panel:has(> .table) { overflow-x: auto; }
.t1 { font-weight: 600; color: var(--ink); }
.t2 { color: var(--ink3); font-size: 12.5px; }
.cell-secondary { color: var(--ink3); font-size: 12.5px; }
.cx-diff th, .cx-log th, .dl th, .tg-facts th, table.bare th { background: none; text-transform: none; letter-spacing: 0; }
table.bare td, table.bare th { padding: 4px 12px 4px 0; border: 0; }
table.bare tbody tr:hover td { background: none; }

/* ================================================================ tags, badges, status dots */
.badge, .deal-tag, .ty, .job-status, .placement-state, .stage-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink2);
  font: 500 11.5px/1 var(--font); letter-spacing: 0; white-space: nowrap; vertical-align: middle; text-transform: none;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-success { color: var(--ok); }
.badge-danger { color: var(--bad); }
.badge-warning { color: var(--warn); }
.badge-accent, .badge-neutral { color: var(--ink2); }
.dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); }
.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dot.ok { color: var(--ok); } .dot.warn { color: var(--warn); } .dot.info { color: var(--info); }
.dot.muted { color: var(--ink3); } .dot.bad { color: var(--bad); }
.badge .dot::before { display: none; }

/* ================================================================ square progress */
.fill { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.segs { display: flex; gap: 2px; flex-wrap: nowrap; }
.segs i { width: 10px; height: 6px; background: var(--line); display: block; }
.segs i.f { background: var(--ink); }
.segs i.w { background: var(--warn); }
.stage { display: flex; align-items: center; gap: 10px; }
.steps { display: flex; gap: 3px; flex: none; }
.steps i { width: 14px; height: 4px; background: var(--line); display: block; border-radius: 1px; }
.steps i.d { background: var(--ink2); }
.steps i.c { background: var(--ink); }
.stage .lbl { font-size: 12.5px; color: var(--ink2); min-width: 92px; }
.stage.placed .steps i { background: var(--ok); }
.stage.placed .lbl { color: var(--ok); }
.stage.out .lbl { color: var(--ink3); text-decoration: line-through; }
.stage.out .steps i { background: var(--line2); }
.slots { display: grid; gap: 4px; margin: 12px 0 4px; }
.slots i { height: 8px; background: var(--line); display: block; }
.slots i.f { background: var(--ink); }
.slots i.w { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, transparent 3px 6px); outline: 1px solid var(--warn); outline-offset: -1px; }

/* ================================================================ dialogs */
.cx-modal { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cx-modal:not([hidden]) { animation: gz-fade 120ms ease-out; }
.cx-backdrop { position: absolute; inset: 0; background: rgba(10, 11, 14, .36); backdrop-filter: none; }
.cx-card {
  position: relative; width: 100%; max-width: 520px; border-radius: 6px; background: var(--paper);
  border: 1px solid var(--line-strong); box-shadow: none; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 48px);
}
.cx-head { padding: 14px 18px; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--line); }
.cx-body { padding: 14px 18px; max-height: 60vh; overflow: auto; font-size: 13px; }
.cx-intro { font-size: 13px; margin-bottom: 10px; color: var(--ink2); }
.cx-diff { width: 100%; border-collapse: collapse; font-size: 13px; }
.cx-diff th { text-align: left; font-weight: 500; color: var(--ink3); padding: 6px 12px 6px 0; white-space: nowrap; vertical-align: top; border: 0; font-size: 12.5px; }
.cx-diff td { padding: 6px 0; vertical-align: top; overflow-wrap: anywhere; border: 0; }
.cx-diff tr:hover td { background: none; }
.cx-diff tr + tr th, .cx-diff tr + tr td { border-top: 1px solid var(--line2); }
.cx-was { text-decoration: line-through; color: var(--ink3); opacity: 1; }
.cx-now { font-weight: 600; }
.cx-arrow { color: var(--ink3); opacity: 1; padding: 0 6px; }
.cx-extra:empty { display: none; }
.cx-extra { margin-top: 12px; font-size: 13px; }
.cx-extra h4 { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; color: var(--ink3); opacity: 1; }
.cx-extra ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cx-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--paper); }
.cx-link { display: flex; gap: 8px; margin-top: 8px; }
.cx-link input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; }
@keyframes gz-fade { from { opacity: 0; } to { opacity: 1; } }

/* a dialog holding a small form (add a candidate, move one, close a job) */
.dlg { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dlg:not([hidden]) { animation: gz-fade 120ms ease-out; }
.dlg-backdrop { position: absolute; inset: 0; background: rgba(10, 11, 14, .36); }
.dlg-card {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden;
}
.dlg-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dlg-head h2 { font-size: 15px; font-weight: 600; }
.dlg-head p { margin-top: 2px; font-size: 12.5px; color: var(--ink3); }
.dlg-body { padding: 16px 18px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.dlg-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dlg-foot .grow { flex: 1; }

/* the Place sheet: a right-hand panel over the job page (the one place with a shadow) */
.sheet-scrim { position: fixed; inset: 0; z-index: 3000; background: rgba(10, 11, 14, .36); display: flex; justify-content: flex-end; }
.sheet-scrim:not([hidden]) { animation: gz-fade 120ms ease-out; }
.sheet {
  width: min(480px, 100%); height: 100%; background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16, 18, 22, .04), 0 8px 24px -12px rgba(16, 18, 22, .18), -24px 0 48px -24px rgba(16, 18, 22, .22);
  display: flex; flex-direction: column;
}
.sheet iframe { border: 0; width: 100%; flex: 1; display: block; background: var(--paper); }

/* ================================================================ sign-in pages */
/* Like the website's header: the navy ground, the white GS Group logo with "CRM" under it, a white card. */
body.auth { display: grid; place-items: center; padding: 32px 16px; background: var(--navy); }
.auth-wrap { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: stretch; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
.auth-brand img { display: block; height: 40px; width: auto; }
.auth-brand span { font: 600 11.5px/1 var(--font); letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: var(--sage); }
.auth-card {
  background: var(--paper); border: 0; border-radius: 0; padding: 28px 28px 30px; width: 100%; max-width: 380px; box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.auth-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.auth-tag { color: var(--ink2); font-size: 13px; margin-bottom: 20px; text-align: left; }
.auth-logo { display: none; }
.auth .btn-block { height: 38px; }
/* set-password pages opened while signed in sit on the white page: no white logo there */
.page-body .auth-brand { display: none; }
.page-body .auth-card { border: 1px solid var(--line); }

/* ================================================================ small utilities */
.row { display: flex; align-items: center; gap: 12px; }
.row-end { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.grow { flex: 1; }
.muted { color: var(--ink3); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.you-tag { font-size: 11px; color: var(--ink3); margin-left: 6px; font-weight: 400; }
.form-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; bottom: 0; z-index: 20;
  padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
}
.fee-preview { font-size: 13.5px; font-weight: 500; padding: 10px 12px; border: 1px solid var(--line2); background: var(--sub); border-radius: 6px; }
.fee-preview .muted { font-weight: 400; }
.preview-lines .amt, .fee-preview .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.preview-warn { color: var(--warn); font-size: 12px; font-weight: 500; }
.split-rows { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 6px; }
.split-rows:empty { display: none; }
.split-row { border: 0; border-top: 1px solid var(--line2); border-radius: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.split-row:first-child { border-top: 0; }
.split-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; font-size: 13px; }
.split-tools { display: flex; gap: 8px; align-items: center; }
.split-tools .picker-wrap { flex: 1; }
.split-total { font-size: 12.5px; font-weight: 500; font-family: var(--font-mono); }
.split-total.bad { color: var(--bad); }
.band-row { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.band-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; }
.readonly-note { font-size: 12px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--sub); }
.neg-warning { border: 1px solid var(--warn) !important; background: var(--warn-bg) !important; color: var(--warn) !important; border-radius: 6px !important; }
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { color: var(--ink3); }

/* ================================================================ phone width */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 264px; max-width: 85vw; height: auto; z-index: 70;
    transform: translateX(-105%); transition: transform 160ms ease;
  }
  .dev-on .sidebar { top: 22px; height: auto; }
  body.nav-open .sidebar { transform: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -6px;
    border: 1px solid var(--line-strong); border-radius: 0; background: var(--paper); color: var(--ink); cursor: pointer; flex: none;
  }
  .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(26, 26, 46, .45); opacity: 0; pointer-events: none; transition: opacity 160ms ease; z-index: 65; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .bar { padding: 0 16px; position: sticky; top: 0; z-index: 50; }
  .dev-on .bar { top: 22px; }
  .bar-right .mono { display: none; }
  .page-header, .ph { padding: 16px 16px 0; }
  .page-body { padding: 14px 16px 28px; }
  .flashes { padding: 12px 16px 0; }
  .tabbar { padding: 0 8px; }
  .main > .panel, .main > .edit-grid, .main > .table-wrap, .main > form, .main > section, .edit-page > .edit-grid,
  .main > .edit-page > .panel, .main > .settings-body { margin-left: 16px; margin-right: 16px; }
  .dlg, .cx-modal { padding: 12px; align-items: flex-end; }
  .dlg-card, .cx-card { max-height: calc(100vh - 24px); }
  .dev-banner { font-size: 11px; }
  .dev-more { display: none; }
  .shell::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ================================================================ slide-over panel (pages switched off today) */
.panel-backdrop { position: fixed; inset: 0; background: rgba(10, 11, 14, .36); opacity: 0; pointer-events: none; transition: opacity 120ms; z-index: 50; }
body.panel-open .panel-backdrop { opacity: 1; pointer-events: auto; }
.slide-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw; background: var(--paper); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform 160ms ease; z-index: 60; display: flex; flex-direction: column; }
.slide-panel.open { transform: none; }
.panel-header { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.panel-title { font-size: 15px; font-weight: 600; }
.panel-footer { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* ================================================================ small fixes */
body.auth > .dev-banner { position: fixed; top: 0; left: 0; right: 0; }
.edit-grid > *, .job-grid > *, .deal-grid > * { min-width: 0; }
.edit-side .panel, .edit-side .panel-body { overflow-x: auto; }