:root {
  --bg: #e8e0cf;
  --bg-strong: #d7cfbe;
  --surface: rgba(255, 252, 246, 0.94);
  --surface-strong: #fffdf8;
  --ink: #0d0d0d;
  --muted: #5f5a51;
  --line: rgba(13, 13, 13, 0.12);
  --accent: #00578d;
  --accent-soft: #1a75ad;
  --accent-deep: #003f67;
  --green: #00578d;
  --shadow: 0 20px 50px rgba(13, 13, 13, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(26, 117, 173, 0.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(0, 63, 103, 0.12), transparent 32%),
    linear-gradient(180deg, #eee7d9 0%, #e2d8c7 100%);
}

.page-shell {
  width: min(1400px, calc(100% - 32px));
  margin: 24px auto 40px;
}

.site-disclaimer {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 252, 246, 0.72);
  box-shadow: 0 10px 22px rgba(13, 13, 13, 0.04);
}

.site-disclaimer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.hero,
.panel,
.card,
.metric-callout {
  backdrop-filter: blur(12px);
}

.hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgba(26, 117, 173, 0.18), transparent 35%),
    linear-gradient(135deg, rgba(255, 252, 245, 0.96), rgba(255, 255, 255, 0.9)),
    linear-gradient(120deg, rgba(0, 87, 141, 0.08), rgba(0, 63, 103, 0.06));
  box-shadow: var(--shadow);
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 32px 0 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 87, 141, 0.2), rgba(0, 87, 141, 0));
}

.eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 700;
}

.hero-copy-wrap {
  max-width: 58rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1,
h2,
h3,
legend {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.95;
  max-width: 10ch;
}

.hero-copy,
.panel-header p,
.metric-subtext,
.share-status {
  color: var(--muted);
}

.hero-copy {
  margin: 18px 0 0;
  font-size: 1.04rem;
  line-height: 1.7;
  max-width: 60ch;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  position: relative;
}

.hero-timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  width: 100%;
}

.timeline-step {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}

.timeline-dot {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  border: 3px solid rgba(0, 87, 141, 0.18);
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.timeline-copy {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.timeline-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.timeline-note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.3;
}

.timeline-connector {
  align-self: center;
  height: 3px;
  margin-top: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 87, 141, 0.22), rgba(0, 87, 141, 0.14));
}

.timeline-connector.is-complete {
  background: linear-gradient(90deg, #1a75ad, #00578d);
}

.timeline-step.is-complete .timeline-dot {
  background: linear-gradient(180deg, #1a75ad, #00578d);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 87, 141, 0.24);
}

.timeline-step.is-current .timeline-dot {
  background: linear-gradient(180deg, #1a75ad, #00578d);
  color: #fff;
  border-color: rgba(0, 87, 141, 0.28);
  box-shadow:
    0 0 0 6px rgba(0, 87, 141, 0.12),
    0 14px 28px rgba(0, 87, 141, 0.22);
}

.timeline-step.is-next .timeline-dot {
  background: rgba(255, 255, 255, 0.96);
  color: var(--accent);
  border-color: rgba(0, 87, 141, 0.4);
}

.timeline-step:hover .timeline-dot {
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------
   Buttons — tightened, less rounded, no cartoonish lift on hover.
   Three variants:
     .button-primary   solid navy, used sparingly for THE action
     .button-secondary white w/ border, the default for most actions
     .button-tertiary  transparent + border, used for quieter actions
   Size modifier:
     .button-sm        compact rows (recipient actions, table actions)
   --------------------------------------------------------------- */
.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 16px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.button:focus-visible {
  outline: 2px solid rgba(0, 87, 141, 0.5);
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button-sm {
  padding: 6px 12px;
  font-size: 0.82rem;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.button-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.button-primary:hover {
  background: #00436d;
  border-color: #00436d;
}

.button-secondary {
  background: #ffffff;
  color: var(--ink);
  border-color: rgba(13, 13, 13, 0.14);
}

.button-secondary:hover {
  background: #f7f8fa;
  border-color: rgba(0, 87, 141, 0.35);
}

.button-tertiary {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}

.button-tertiary:hover {
  background: rgba(0, 87, 141, 0.06);
  color: var(--accent);
}

.button-quaternary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.button-quaternary:hover {
  background: #00436d;
  border-color: #00436d;
}

.modal-shell[hidden] {
  display: none;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.48);
  backdrop-filter: blur(6px);
}

.modal-panel {
  position: relative;
  width: min(1100px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  margin: 12px auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, rgba(26, 117, 173, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(252, 248, 240, 0.98));
  box-shadow: 0 24px 60px rgba(13, 13, 13, 0.28);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
  background: rgba(255, 252, 246, 0.88);
}

.modal-content {
  max-height: calc(100vh - 124px);
  overflow: auto;
  padding: 24px;
  display: grid;
  gap: 28px;
}

.how-page-shell {
  margin-bottom: 56px;
}

.how-page-main {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.how-page-section .panel-header {
  padding-bottom: 0;
}

.how-page-content {
  display: grid;
  gap: 20px;
  padding: 20px 24px 24px;
}

.how-image-section {
  overflow: hidden;
}

.how-page-photo {
  margin: 0;
}

.how-page-photo img {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 520px);
  object-fit: cover;
  object-position: center 44%;
}

.how-page-photo video {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 520px);
  object-fit: cover;
  object-position: center 44%;
  background: #000;
}

.modal-eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: rgba(0, 87, 141, 0.5);
  font-weight: 700;
}

.modal-close {
  appearance: none;
  border: 1px solid rgba(13, 13, 13, 0.12);
  background: rgba(255, 252, 246, 0.9);
  color: var(--ink);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.how-section {
  display: grid;
  gap: 16px;
}

.how-hero-band {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 18px;
}

.how-hero-card {
  padding: 24px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 240, 0.98));
  border: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: 0 16px 32px rgba(13, 13, 13, 0.06);
}

.how-hero-card h3 {
  margin: 8px 0 10px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  max-width: 16ch;
}

.how-hero-card p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  max-width: 60ch;
}

.how-hero-kicker {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 700;
}

.how-hero-metrics {
  display: grid;
  gap: 12px;
}

.how-hero-metric {
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.06), transparent 42%),
    rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(13, 13, 13, 0.08);
}

.how-hero-metric span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.how-hero-metric strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  color: var(--accent-deep);
}

.how-section-heading {
  display: grid;
  gap: 6px;
}

.how-section-intro {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.playbook-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.item-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.item-type-card {
  padding: 26px 24px;
  border-radius: 22px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.06), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 240, 0.98));
  box-shadow: 0 14px 28px rgba(13, 13, 13, 0.05);
}

.item-type-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.item-type-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(0, 87, 141, 0.1);
  color: var(--accent-deep);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.item-type-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
}

.item-type-card h3 {
  margin: 0;
  font-size: 2rem;
  color: var(--accent-deep);
}

.item-type-copy,
.item-type-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.item-type-copy {
  font-size: 1.05rem;
}

.item-type-note {
  margin-top: 14px;
  font-style: italic;
}

.playbook-card {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.06), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 240, 0.98));
  box-shadow: 0 14px 28px rgba(13, 13, 13, 0.05);
}

.playbook-step-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.playbook-step-tag {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
}

.how-step-number {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0, 87, 141, 0.1);
  color: var(--accent-deep);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.playbook-card h4,
.rule-card h4,
.team-standard h4 {
  margin: 0;
}

.playbook-card p,
.rule-card p,
.role-body li {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.role-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.role-toggle-button {
  appearance: none;
  border: 1px solid rgba(11, 52, 92, 0.12);
  background: #f5f7fa;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.role-toggle-button.is-active {
  background: linear-gradient(
    180deg,
    #1568ae,
    #0b345c
  );
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(13, 13, 13, 0.08);
}

.role-toggle-mark {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #d2c8b7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0b345c;
}

.role-toggle-button.is-active .role-toggle-mark {
  background: rgba(245, 247, 250, 0.18);
  color: #fff;
}

.role-toggle-panel {
  --panel-role: #0b345c;
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.08), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 240, 0.98));
  border-left: 5px solid var(--panel-role);
  padding: 22px 24px;
  box-shadow: 0 14px 30px rgba(13, 13, 13, 0.06);
}

.role-toggle-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.role-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent-deep);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(0, 87, 141, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.role-toggle-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #1568ae, #0b345c);
}

.role-card-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}

.role-title {
  margin: 0;
  color: var(--accent-deep);
}

.role-body {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.team-standard {
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.06), transparent 45%),
    rgba(255, 252, 246, 0.72);
  padding: 18px;
}

.team-standard-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.team-standard-card {
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 12px;
  background: rgba(255, 252, 246, 0.94);
  padding: 14px 12px;
  text-align: center;
}

.team-standard-value {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.7rem;
  color: var(--accent-deep);
  font-weight: 700;
}

.team-standard-label {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rule-card {
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.06), transparent 42%),
    rgba(255, 252, 246, 0.96);
  border-top: 4px solid rgba(0, 87, 141, 0.18);
  padding: 18px;
  box-shadow: 0 12px 26px rgba(13, 13, 13, 0.05);
}

.rule-icon {
  margin: 0 0 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0, 87, 141, 0.08);
  color: var(--accent-deep);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.rule-card-navy {
  border-top-color: rgba(0, 87, 141, 0.18);
}

.rule-card-teal {
  border-top-color: rgba(0, 87, 141, 0.18);
}

.rule-card-red {
  border-top-color: rgba(0, 87, 141, 0.18);
}

.rule-card-green {
  border-top-color: rgba(0, 87, 141, 0.18);
}

.hero-logo-image {
  align-self: flex-end;
  width: min(220px, 100%);
  height: auto;
  margin-top: 12px;
  object-fit: contain;
  opacity: 0.92;
}

.layout {
  display: grid;
  grid-template-columns: minmax(350px, 470px) 1fr;
  gap: 24px;
  margin-top: 24px;
}

.output-panel-full {
  grid-column: 1 / -1;
}

.top-parameters {
  margin-top: 24px;
  padding-bottom: 24px;
}

.scenario-panel {
  margin-top: 24px;
}

.scenario-panel + .scenario-panel {
  margin-top: 20px;
}

#builder-home-panel .scenario-actions {
  justify-content: flex-start;
}

.scenario-toolbar {
  display: grid;
  gap: 16px;
  padding: 20px 24px 24px;
}

.scenario-create-grid {
  display: grid;
  gap: 10px;
}

.scenario-contact-grid {
  display: grid;
  gap: 8px;
}

.scenario-search-wrap {
  margin: 0;
}

.scenario-search-wrap span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--muted);
}

.scenario-create-label {
  margin: 0;
}

.scenario-select-wrap {
  margin: 0;
}

.scenario-select-wrap span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--muted);
}

.scenario-select-wrap select {
  width: 100%;
}

.scenario-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.job-library-list {
  display: grid;
  gap: 12px;
}

.job-library-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
}

.job-library-row.is-selected {
  border-color: rgba(0, 87, 141, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 87, 141, 0.08);
}

.job-library-title {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.job-library-title:hover {
  color: var(--accent);
}

.job-library-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.job-library-action {
  min-width: 110px;
}

.job-library-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.delete-job-modal-panel {
  width: min(560px, calc(100% - 24px));
}

.delete-job-modal-copy,
.delete-job-modal-name {
  margin: 0;
}

.delete-job-modal-copy {
  color: var(--muted);
  line-height: 1.6;
}

.delete-job-modal-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.delete-job-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.job-library-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.5);
}

.job-response-panel {
  margin-top: -2px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid rgba(0, 87, 141, 0.16);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 251, 255, 0.98));
}

.job-response-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.job-response-kicker,
.job-response-panel-header h3,
.job-response-company,
.job-response-meta,
.job-response-empty,
.job-response-summary p {
  margin: 0;
}

.job-response-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.job-response-panel-header h3 {
  margin-top: 4px;
  font-size: 1.1rem;
}

.job-response-panel-body {
  display: grid;
  gap: 12px;
}

.job-response-card {
  padding: 16px;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.84);
  display: grid;
  gap: 12px;
}

.job-response-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.job-response-company {
  font-size: 1.05rem;
  font-weight: 700;
}

.job-response-meta,
.job-response-empty,
.job-response-summary p {
  color: var(--muted);
}

.job-response-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.job-response-download {
  min-width: 150px;
}

.job-response-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Secondary action toolbar — slim text-button row that sits under
   the card header. Pulled out of the action stack so the header
   only carries the single primary action; everything else lives
   here as low-visual-weight links. */
.job-response-card-actions-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(13, 13, 13, 0.06);
  border-bottom: 1px solid rgba(13, 13, 13, 0.06);
  font-size: 0.84rem;
}

.job-response-action-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 12px;
  margin: 0;
  font: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.job-response-action-link:first-child {
  padding-left: 0;
}

.job-response-action-link:hover {
  text-decoration: underline;
}

.job-response-action-link:focus-visible {
  outline: none;
  text-decoration: underline;
  box-shadow: 0 0 0 3px rgba(0, 87, 141, 0.15);
  border-radius: 3px;
}

/* Vertical separator between actions — gives the row a clean
   "toolbar" feel without the heavy border of full buttons. */
.job-response-action-link + .job-response-action-link {
  border-left: 1px solid rgba(13, 13, 13, 0.15);
}

.job-response-action-link.is-danger {
  color: #b91c1c;
}

.job-response-action-link.is-danger:hover {
  color: #991b1b;
}

.job-response-card.is-winner {
  border-color: rgba(22, 163, 74, 0.4);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2), 0 8px 20px rgba(22, 163, 74, 0.08);
  background: rgba(22, 163, 74, 0.04);
}

.job-response-winner-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.16);
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Mark Winner is the primary "advance the deal" action — light green
   for the positive intent + white text for full contrast. Overrides
   the navy `button-primary` background on this specific button. */
.job-response-mark-winner {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.job-response-mark-winner:hover {
  background: #15803d !important;
  border-color: #14532d !important;
}

.job-response-mark-winner:focus-visible {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3) !important;
}

.job-response-unmark-winner {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.25) !important;
}

/* ---- Withdrawn response card ---- */
.job-response-card.is-withdrawn {
  background: rgba(107, 114, 128, 0.06);
  border-color: rgba(107, 114, 128, 0.25);
  opacity: 0.78;
}

.job-response-card.is-withdrawn .job-response-company {
  color: #4b5563;
}

.job-response-withdrawn-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.16);
  color: #4b5563;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.job-response-withdrawn-reason {
  margin: 0;
  color: #4b5563;
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.7);
  border-left: 3px solid rgba(107, 114, 128, 0.35);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}

.job-response-restore {
  color: #15803d !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

.job-response-restore:hover {
  background: rgba(22, 163, 74, 0.08) !important;
}

.job-response-withdraw {
  color: #92400e !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}

.job-response-withdraw:hover {
  background: rgba(217, 119, 6, 0.08) !important;
}

/* ---- Withdraw Response modal ---- */
.withdraw-response-modal-panel {
  width: 92vw;
  max-width: 520px;
}

.withdraw-response-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.withdraw-response-company {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(107, 114, 128, 0.08);
  border-radius: var(--radius-sm);
}

.withdraw-response-company-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4b5563;
}

.withdraw-response-company-name {
  font-size: 1rem;
  font-weight: 600;
}

.withdraw-response-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.withdraw-response-field span {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
}

.withdraw-response-field span em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.withdraw-response-field textarea {
  padding: 8px 10px;
  border: 1px solid rgba(13, 13, 13, 0.15);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 70px;
}

.withdraw-response-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 87, 141, 0.15);
}

.withdraw-response-status {
  margin: 8px 0 0;
  min-height: 1em;
  font-size: 0.85rem;
  color: var(--muted);
}

.withdraw-response-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ---- Adjust Quote modal — visually mirrors withdraw modal but
   has two number inputs side-by-side and a "current quote" preview
   block so the user always knows what they're editing against. ---- */
.adjust-quote-modal-panel {
  width: 92vw;
  max-width: 560px;
}

.adjust-quote-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.adjust-quote-company {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(107, 114, 128, 0.08);
  border-radius: var(--radius-sm);
}

.adjust-quote-company-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4b5563;
}

.adjust-quote-company-name {
  font-size: 1rem;
  font-weight: 600;
}

.adjust-quote-current {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(217, 119, 6, 0.06);
  border-left: 3px solid rgba(217, 119, 6, 0.6);
  border-radius: var(--radius-sm);
}

.adjust-quote-current-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b45309;
}

.adjust-quote-current-values {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.95rem;
}

/* "Their quote was built from" — read-only context card showing the
   four calculator inputs the mover submitted. Used in both the
   Adjust Quote and Counter Offer modals. Visual weight is lower
   than the editable rate row above so it reads as reference,
   not as another input field. */
/* Editable cost-component inputs in the Counter Offer / Adjust Quote
   modals. The four inputs (mover, driver, truck, warehouse storage)
   feed the live derived-rate readout below them. */
.quote-cost-inputs {
  margin: 0 0 12px;
  padding: 10px 12px 6px;
  background: rgba(0, 87, 141, 0.04);
  border: 1px solid rgba(0, 87, 141, 0.12);
  border-radius: var(--radius-sm);
}

.quote-cost-inputs-legend {
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1d4ed8;
}

.quote-cost-inputs-help {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.quote-cost-inputs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

@media (max-width: 520px) {
  .quote-cost-inputs-grid {
    grid-template-columns: 1fr;
  }
}

.quote-volume-context {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.quote-volume-context strong {
  color: #1f2937;
  font-weight: 600;
}

/* Derived-rate readout — what actually gets saved or sent to the
   mover. Visually distinct from the editable inputs so the operator
   can tell at a glance which numbers are in their hands and which
   are computed. */
.quote-derived-readout {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: var(--radius-sm);
}

.quote-derived-readout-label {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f766e;
}

.quote-derived-readout-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  font-size: 0.95rem;
  color: #0f766e;
}

.quote-derived-readout-values strong {
  color: #115e59;
  font-weight: 700;
}

.quote-derived-readout-note {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #b45309;
}

.adjust-quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

@media (max-width: 520px) {
  .adjust-quote-row {
    grid-template-columns: 1fr;
  }
}

.adjust-quote-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.adjust-quote-field span {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
}

.adjust-quote-field span em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.adjust-quote-field input,
.adjust-quote-field textarea {
  padding: 8px 10px;
  border: 1px solid rgba(13, 13, 13, 0.15);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
}

.adjust-quote-field textarea {
  resize: vertical;
  min-height: 70px;
}

.adjust-quote-field input:focus,
.adjust-quote-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 87, 141, 0.15);
}

/* Notify-mover checkbox row used by both the Adjust Quote modal and
   the Counter-Offer modal. Needs the explicit overrides below — the
   global `label { display: grid }` and `input { width: 100% }` rules
   would otherwise stretch the checkbox to fill the row and push the
   label text into a weird floating position. */
.adjust-quote-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(0, 87, 141, 0.04);
  border: 1px solid rgba(0, 87, 141, 0.12);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}

.adjust-quote-checkbox input[type="checkbox"] {
  /* Beat the global `input { width: 100% }` rule that would
     otherwise blow the checkbox up to row-width. */
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.adjust-quote-checkbox span {
  /* Beat the global `label span { color: var(--muted) }` so the
     notify text reads at the same weight as the form labels above
     it, not as a faded helper string. */
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #1f2937;
}

.adjust-quote-status {
  margin: 8px 0 0;
  min-height: 1em;
  font-size: 0.85rem;
  color: var(--muted);
}

.adjust-quote-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ---- Adjusted-quote banner on the response card (sits between
   the company header and the summary line). Surfaces "this quote
   has been edited" without burying the change inside the
   collapsible details. ---- */
.job-response-adjusted-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  padding: 8px 12px;
  margin: 6px 0 12px;
  background: rgba(217, 119, 6, 0.08);
  border-left: 3px solid rgba(217, 119, 6, 0.6);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #1f2937;
}

.job-response-adjusted-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
}

.job-response-adjusted-meta strong {
  font-weight: 600;
}

.job-response-adjusted-rounds {
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---- Adjustment audit log inside the View Full Response panel ---- */
.job-response-detail-adjustments h4 {
  margin: 0 0 8px;
}

.job-response-adjustment-log {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 10px;
}

.job-response-adjustment-log li {
  padding: 8px 10px;
  background: rgba(107, 114, 128, 0.06);
  border-radius: var(--radius-sm);
}

.job-response-adjustment-line {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.job-response-adjustment-line + .job-response-adjustment-line {
  margin-top: 2px;
}

.job-response-adjustment-reason {
  margin: 4px 0 0;
  padding: 6px 8px;
  background: #fff;
  border: 1px dashed rgba(13, 13, 13, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #374151;
  white-space: pre-wrap;
}

.job-response-adjustment-sent {
  margin-left: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- "Not-selected notice sent" banner (replaces the Send Not
   Selected Notice button on the response card once the mover has
   been notified — manual or batch). Grey-tinted to read as
   "informational, no action needed." ---- */
.job-response-regret-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 8px 12px;
  margin: 6px 0 12px;
  background: rgba(107, 114, 128, 0.08);
  border-left: 3px solid rgba(107, 114, 128, 0.5);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #1f2937;
}

.job-response-regret-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
}

.job-response-regret-meta {
  color: var(--muted);
}

.job-response-regret-note {
  flex-basis: 100%;
  margin: 4px 0 0;
  padding: 6px 8px;
  background: #fff;
  border: 1px dashed rgba(13, 13, 13, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #374151;
  white-space: pre-wrap;
}

/* ---- Counter-offer / negotiation banner on the response card ---- */
.job-response-negotiation-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  padding: 8px 12px;
  margin: 6px 0 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #1f2937;
}

.job-response-negotiation-banner.is-waiting-mover {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid rgba(59, 130, 246, 0.6);
}

.job-response-negotiation-banner.is-waiting-ustorage {
  background: rgba(217, 119, 6, 0.1);
  border-left: 3px solid rgba(217, 119, 6, 0.7);
}

.job-response-negotiation-banner.is-accepted {
  background: rgba(22, 163, 74, 0.08);
  border-left: 3px solid rgba(22, 163, 74, 0.6);
}

.job-response-negotiation-banner.is-declined {
  background: rgba(107, 114, 128, 0.1);
  border-left: 3px solid rgba(107, 114, 128, 0.6);
}

.job-response-negotiation-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.is-waiting-mover .job-response-negotiation-kicker {
  color: #1d4ed8;
}
.is-waiting-ustorage .job-response-negotiation-kicker {
  color: #b45309;
}
.is-accepted .job-response-negotiation-kicker {
  color: #15803d;
}
.is-declined .job-response-negotiation-kicker {
  color: #4b5563;
}

.job-response-negotiation-meta strong {
  font-weight: 600;
}

/* Counter-Offer history inside View Full Response. */
.job-response-detail-negotiation h4 {
  margin: 0 0 4px;
}

.job-response-negotiation-summary {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--muted);
}

.job-response-negotiation-summary strong {
  color: #1f2937;
}

.job-response-negotiation-log {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 10px;
}

.job-response-negotiation-log li {
  padding: 8px 10px;
  background: rgba(59, 130, 246, 0.06);
  border-radius: var(--radius-sm);
}

.job-response-negotiation-line {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.job-response-negotiation-line + .job-response-negotiation-line {
  margin-top: 2px;
}

.job-response-negotiation-note {
  margin: 4px 0 0;
  padding: 6px 8px;
  background: #fff;
  border: 1px dashed rgba(13, 13, 13, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #374151;
  white-space: pre-wrap;
}

.job-response-negotiation-log li.is-voided {
  background: rgba(107, 114, 128, 0.04);
  opacity: 0.78;
  text-decoration: line-through;
  text-decoration-color: rgba(107, 114, 128, 0.4);
}

.job-response-negotiation-log li.is-voided .job-response-negotiation-line:not(.job-response-negotiation-voided) strong {
  text-decoration: line-through;
}

.job-response-negotiation-voided {
  margin-top: 4px !important;
  font-size: 0.82rem !important;
  color: #6b7280;
  text-decoration: none !important;
  font-style: italic;
}

/* Soft-cap "you're past 5 rounds" warning. Used inside the
   counter-offer modal AND inside the mover-facing counter.html
   page — same look in both contexts. */
.counter-cap-warning {
  margin: 10px 0 12px;
  padding: 12px 14px;
  background: rgba(217, 119, 6, 0.08);
  border-left: 3px solid rgba(217, 119, 6, 0.6);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: #1f2937;
}

.counter-cap-warning p {
  margin: 0;
  line-height: 1.5;
}

.counter-cap-warning p + p {
  margin-top: 6px;
}

.counter-cap-warning-kicker {
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
}

/* ---- Mover-facing counter.html page ---- */
.counter-card {
  display: grid;
  gap: 16px;
}

.counter-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.counter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}

@media (max-width: 600px) {
  .counter-grid {
    grid-template-columns: 1fr;
  }
}

.counter-side {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  line-height: 1.6;
}

.counter-side-mover {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
}

.counter-side-ustorage {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.counter-side-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.counter-side-mover .counter-side-label {
  color: #1d4ed8;
}
.counter-side-ustorage .counter-side-label {
  color: #b45309;
}

.counter-note {
  padding: 12px 14px;
  background: rgba(217, 119, 6, 0.06);
  border-left: 3px solid rgba(217, 119, 6, 0.6);
  border-radius: var(--radius-sm);
}

.counter-note-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
}

.counter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.counter-back-form {
  margin-top: 10px;
  padding: 14px 16px;
  background: rgba(107, 114, 128, 0.06);
  border-radius: var(--radius-md);
}

.counter-back-form-intro {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

.counter-back-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

@media (max-width: 520px) {
  .counter-back-row {
    grid-template-columns: 1fr;
  }
}

.counter-back-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.counter-back-field span {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
}

.counter-back-field span em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.counter-back-field input,
.counter-back-field textarea {
  padding: 8px 10px;
  border: 1px solid rgba(13, 13, 13, 0.15);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
}

.counter-back-field textarea {
  resize: vertical;
  min-height: 70px;
}

.counter-back-field input:focus,
.counter-back-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 87, 141, 0.15);
}

.counter-status {
  margin: 8px 0 0;
  min-height: 1em;
  font-size: 0.9rem;
  color: var(--muted);
}

.counter-history-details {
  margin-top: 14px;
}

.counter-history-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}

.counter-history-list {
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 8px;
}

.counter-history-list li {
  padding: 8px 10px;
  background: rgba(107, 114, 128, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.counter-history-list li p {
  margin: 0;
}

.counter-history-list li p + p {
  margin-top: 2px;
}

.counter-history-note {
  margin-top: 4px;
  padding: 6px 8px;
  background: #fff;
  border: 1px dashed rgba(13, 13, 13, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: #374151;
  white-space: pre-wrap;
}

.counter-terminal-message {
  font-size: 1rem;
  line-height: 1.6;
  color: #1f2937;
}

/* =========================================================
   Contract panel (Responses tab, below winning quote card)
   ========================================================= */

.contract-panel {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 87, 141, 0.18);
  border-radius: var(--radius-md);
  background: rgba(0, 87, 141, 0.04);
  display: grid;
  gap: 14px;
}

.contract-panel-header {
  display: grid;
  gap: 2px;
}

.contract-panel-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.contract-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.contract-panel-body {
  display: grid;
  gap: 12px;
}

.contract-status {
  display: grid;
  gap: 6px;
}

.contract-status-desc {
  margin: 0;
  color: #1f2937;
}

.contract-status-envelope {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.contract-status-envelope code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}

.contract-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  width: fit-content;
}

.contract-status-pill-neutral {
  background: rgba(107, 114, 128, 0.1);
  color: #374151;
  border-color: rgba(107, 114, 128, 0.22);
}

.contract-status-pill-pending {
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.3);
}

.contract-status-pill-success {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.3);
}

.contract-status-pill-error {
  background: rgba(185, 28, 28, 0.12);
  color: #991b1b;
  border-color: rgba(185, 28, 28, 0.3);
}

.contract-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.contract-void-button {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.25) !important;
}

.contract-void-button:hover {
  background: rgba(185, 28, 28, 0.06) !important;
}

.contract-audit-log {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(13, 13, 13, 0.06);
}

.contract-audit-log summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  list-style: none;
}

.contract-audit-log summary::-webkit-details-marker {
  display: none;
}

.contract-audit-summary-count {
  font-weight: 600;
}

.contract-audit-entries {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: #1f2937;
}

.contract-audit-entry {
  padding: 4px 0;
  border-top: 1px dashed rgba(13, 13, 13, 0.08);
}

.contract-audit-entry:first-child {
  border-top: none;
}

.contract-audit-at {
  color: var(--muted);
  margin-right: 6px;
}

.contract-audit-event {
  font-weight: 600;
  color: var(--accent);
}

/* ---- Contract Send modal ---- */

.contract-send-modal-panel {
  width: 92vw;
  max-width: 520px;
}

.contract-send-modal-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.contract-send-modal-company {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(0, 87, 141, 0.06);
  border-radius: var(--radius-sm);
}

.contract-send-modal-company-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.contract-send-modal-company-name {
  font-size: 1rem;
  font-weight: 600;
}

.contract-send-modal-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.contract-send-modal-field span {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1f2937;
}

.contract-send-modal-field span em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

.contract-send-modal-field input {
  padding: 8px 10px;
  border: 1px solid rgba(13, 13, 13, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
}

.contract-send-modal-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 87, 141, 0.15);
}

.contract-send-status {
  margin: 8px 0 0;
  min-height: 1em;
  font-size: 0.85rem;
  color: var(--muted);
}

.contract-send-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* =========================================================
   Analytics modal
   ========================================================= */

.analytics-modal-panel {
  width: 95vw;
  max-width: 960px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.analytics-modal-content {
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.analytics-empty {
  margin: 0;
  padding: 32px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.analytics-card {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(244, 248, 252, 0.7);
  border: 1px solid rgba(0, 87, 141, 0.12);
  display: grid;
  gap: 8px;
}

.analytics-card-wide {
  grid-column: span 3;
}

.analytics-card-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.analytics-card-value {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 2rem;
  color: var(--accent);
  line-height: 1;
}

.analytics-card-note {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.45;
}

.analytics-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink);
}

.analytics-status-list li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.analytics-range {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.analytics-range > div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: var(--radius-sm, 10px);
}

.analytics-range span {
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.analytics-range strong {
  font-size: 1.15rem;
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
}

.analytics-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.analytics-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(13, 13, 13, 0.06);
  font-size: 0.9rem;
}

.analytics-rate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.analytics-rate-block {
  padding: 12px 14px;
  background: #fff;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid rgba(13, 13, 13, 0.06);
  display: grid;
  gap: 8px;
}

.analytics-rate-label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.analytics-rate-count {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

@media (max-width: 820px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  .analytics-card-wide {
    grid-column: span 1;
  }
  .analytics-range {
    grid-template-columns: 1fr;
  }
  .analytics-rate-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Email Engine test modal
   ========================================================= */

.email-test-modal-panel {
  width: 95vw;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.email-test-modal-content {
  padding: 18px 22px 22px;
  overflow-y: auto;
  display: grid;
  gap: 16px;
}

.email-test-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.email-test-field {
  display: grid;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--muted);
}

.email-test-field input,
.email-test-field select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(13, 13, 13, 0.12);
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
}

.email-test-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.email-test-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1em;
  font-size: 0.86rem;
  color: var(--muted);
}

.email-test-preview-shell {
  display: grid;
  gap: 8px;
}

.email-test-preview-label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.email-test-preview-label span {
  color: var(--ink);
  font-weight: 600;
}

#email-test-preview-frame {
  width: 100%;
  height: 540px;
  border: 1px solid rgba(13, 13, 13, 0.12);
  border-radius: var(--radius-sm, 10px);
  background: #fff;
}

@media (max-width: 720px) {
  .email-test-controls {
    grid-template-columns: 1fr;
  }
  #email-test-preview-frame {
    height: 420px;
  }
}

/* =========================================================
   Mover Agreement manager modal
   ========================================================= */

.mover-agreement-modal-panel {
  width: 95vw;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.mover-agreement-modal-content {
  padding: 18px 22px 22px;
  overflow-y: auto;
  display: grid;
  gap: 16px;
}

.mover-agreement-status {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 87, 141, 0.06);
  border: 1px solid rgba(0, 87, 141, 0.12);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.4;
}

.mover-agreement-status.is-fallback {
  background: rgba(179, 149, 102, 0.1);
  border-color: rgba(179, 149, 102, 0.35);
}

.mover-agreement-status .mover-agreement-status-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.mover-agreement-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mover-agreement-upload-label {
  cursor: pointer;
  margin: 0;
}

.mover-agreement-help {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.mover-agreement-feedback {
  margin: 0;
  min-height: 1em;
  font-size: 0.86rem;
  color: var(--muted);
}

.mover-agreement-feedback.is-error {
  color: #c1272d;
}

.mover-agreement-feedback.is-success {
  color: #15803d;
}

.mover-agreement-preview-shell {
  display: grid;
  gap: 8px;
}

.mover-agreement-preview-label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

#mover-agreement-preview-frame {
  width: 100%;
  height: 560px;
  border: 1px solid rgba(13, 13, 13, 0.12);
  border-radius: var(--radius-sm, 10px);
  background: #fff;
}

@media (max-width: 720px) {
  #mover-agreement-preview-frame {
    height: 420px;
  }
}

.job-response-details {
  margin-top: 12px;
  border-top: 1px solid rgba(13, 13, 13, 0.08);
  padding-top: 10px;
}

.job-response-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
  font-weight: 600;
  color: var(--accent);
  border-radius: 6px;
}

.job-response-details summary::-webkit-details-marker {
  display: none;
}

.job-response-details summary:hover {
  background: rgba(0, 87, 141, 0.06);
}

.job-response-details-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 87, 141, 0.12);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.job-response-details[open] .job-response-details-summary-icon {
  transform: rotate(45deg);
}

.job-response-details[open] .job-response-details-summary-label::after {
  content: " (click to collapse)";
  font-weight: 400;
  color: var(--muted);
}

.job-response-details-body {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius-sm, 10px);
  background: rgba(244, 248, 252, 0.9);
  border: 1px solid rgba(0, 87, 141, 0.12);
}

.job-response-detail-group h4 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.job-response-detail-group dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  column-gap: 14px;
  row-gap: 6px;
}

.job-response-detail-group dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.job-response-detail-group dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  word-break: break-word;
}

.job-response-empty-value {
  color: var(--muted);
  font-style: italic;
}

.job-response-detail-notes p {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.auth-gate {
  position: fixed;
  inset: 0;
  /* Must stay below the Netlify Identity widget (z-index 99) so the login
     dialog can appear on top of this gate. */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(26, 117, 173, 0.18), transparent 45%),
    linear-gradient(180deg, #f4f8fc 0%, #e8f2fa 100%);
}

/* Restore the default hidden behavior that our display:flex above would
   otherwise override — without this, authGate.hidden = true does nothing. */
.auth-gate[hidden] {
  display: none;
}

.rfp-success-download-status {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  min-height: 1.2em;
}

.auth-gate-card {
  max-width: 460px;
  width: 100%;
  padding: 36px 36px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 87, 141, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0, 87, 141, 0.18);
  display: grid;
  gap: 12px;
  justify-items: center;
}

.auth-gate-logo {
  width: 120px;
  height: auto;
  opacity: 0.9;
}

.auth-gate-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.auth-gate-title {
  margin: 0;
  font-size: 1.6rem;
}

.auth-gate-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 52ch;
}

.auth-gate .button {
  min-width: 160px;
  margin-top: 6px;
}

.auth-gate-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--muted);
}

.auth-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 0.82rem;
  color: var(--ink);
}

.auth-user-label {
  color: var(--muted);
  font-size: 0.78rem;
}

.auth-user-email {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.82rem;
}

.auth-user-chip .button {
  padding: 4px 10px;
  font-size: 0.78rem;
}

@media (max-width: 640px) {
  .job-response-detail-group dl {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .job-response-detail-group dt {
    margin-top: 8px;
  }
}

.internal-calculator-frame {
  width: 100%;
  min-height: 2200px;
  border: 0;
  border-radius: calc(var(--radius-lg) - 4px);
  background: transparent;
}

.internal-calculator-accordion {
  border-radius: inherit;
}

.internal-calculator-accordion summary {
  list-style: none;
  cursor: pointer;
}

.internal-calculator-accordion summary::-webkit-details-marker {
  display: none;
}

.internal-calculator-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 8px 8px;
}

.internal-calculator-summary .panel-header {
  margin: 0;
  padding-right: 0;
}

.internal-calculator-summary .panel-header p {
  margin-top: 8px;
  max-width: 62ch;
}

.internal-calculator-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 18px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247, 245, 240, 0.98));
  color: var(--accent-deep);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(13, 13, 13, 0.05);
}

.internal-calculator-shell {
  margin-top: 18px;
}

.scenario-status {
  margin: 0;
  color: var(--muted);
  min-height: 1.3em;
}

.job-parameters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 24px 0;
}

.job-parameters-grid > label,
.job-parameters-grid > label > .input-with-prefix,
.job-parameters-grid > label > .input-with-suffix {
  min-width: 0;
}

/* Job Location label holds a "View on Google Maps" link on the right
   that appears as soon as the user types something. */
.job-location-label .job-location-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.job-location-map-link {
  font-size: 0.72rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.job-location-map-link:hover {
  text-decoration: underline;
}

.job-location-map-link[hidden] {
  display: none;
}

.job-location-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
}

.fieldset-note {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.input-panel {
  position: sticky;
  top: 20px;
  align-self: start;
}

.panel-header {
  padding: 24px 24px 0;
  display: grid;
  gap: 6px;
}

.section-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-chip-input {
  background: rgba(0, 87, 141, 0.1);
  color: var(--accent);
  border: 1px solid rgba(0, 87, 141, 0.12);
}

.section-chip-output {
  background: rgba(31, 53, 85, 0.06);
  color: var(--muted);
  border: 1px solid rgba(31, 53, 85, 0.1);
}

.recipients-panel {
  margin: 12px 0 4px;
  padding: 18px 20px 20px;
  border-radius: var(--radius-md);
  background: rgba(232, 244, 255, 0.35);
  border: 1px solid rgba(0, 87, 141, 0.14);
}

.recipients-panel-header {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.recipients-panel-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.recipients-panel h3 {
  margin: 0;
  font-size: 1.05rem;
}

.recipients-panel-note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 68ch;
}

.recipients-panel-empty {
  margin: 0;
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}

/* Add Mover form — sits at the top of the Invitations tab so adding
   recipients is native to this panel instead of happening over on
   Scope. */
.recipient-add-form {
  margin: 12px 0 18px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(13, 13, 13, 0.12);
  border-radius: 10px;
}

.recipient-add-fields {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr auto;
  gap: 10px;
  align-items: end;
}

.recipient-add-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.recipient-add-field span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recipient-add-field input {
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid rgba(13, 13, 13, 0.15);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

.recipient-add-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 87, 141, 0.15);
}

.recipient-add-submit {
  align-self: end;
  height: 36px;
}

.recipient-add-status {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #b91c1c;
  min-height: 1em;
}

.recipient-add-status:empty {
  display: none;
}

@media (max-width: 640px) {
  .recipient-add-fields {
    grid-template-columns: 1fr;
  }
}

.recipient-remove {
  color: #b91c1c;
  padding: 4px 8px !important;
  font-size: 1rem !important;
}

.recipient-remove:hover {
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
}

.recipients-panel-toggles {
  display: grid;
  gap: 10px;
  margin: 10px 0 18px;
  padding: 14px 16px;
  background: rgba(0, 87, 141, 0.04);
  border: 1px solid rgba(0, 87, 141, 0.12);
  border-radius: 10px;
}

.recipients-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
}

.recipients-toggle input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.recipients-toggle-label {
  display: grid;
  gap: 2px;
}

.recipients-toggle-label strong {
  font-size: 0.9rem;
  color: var(--ink);
}

.recipients-toggle-help {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.recipients-toggle-help code {
  background: rgba(0, 87, 141, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.78rem;
}

.recipients-list {
  display: grid;
  gap: 10px;
}

.recipient-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(13, 13, 13, 0.1);
}

.recipient-row:hover {
  border-color: rgba(0, 87, 141, 0.25);
}

.recipient-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Mover company name — promoted to primary identity. Styled as a
   seamless inline input so it looks like a label until focused,
   keeping the row visually uncluttered. */
.recipient-company-input {
  margin: 0;
  padding: 4px 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 120ms ease, border-color 120ms ease;
  max-width: 100%;
  min-width: 0;
}

.recipient-company-input::placeholder {
  color: rgba(107, 114, 128, 0.7);
  font-weight: 400;
  font-style: italic;
}

.recipient-company-input:hover {
  background: rgba(0, 87, 141, 0.04);
  border-color: rgba(0, 87, 141, 0.15);
}

.recipient-company-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 87, 141, 0.12);
}

/* Contact name sits between the company name (primary, bold) and
   the email (muted). Lighter weight + smaller so it reads as
   secondary context, still inline-editable like the company name. */
.recipient-contact-input {
  margin: 0;
  padding: 3px 6px;
  font-family: inherit;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background 120ms ease, border-color 120ms ease;
  max-width: 100%;
  min-width: 0;
}

.recipient-contact-input::placeholder {
  color: rgba(107, 114, 128, 0.7);
  font-style: italic;
}

.recipient-contact-input:hover {
  background: rgba(0, 87, 141, 0.04);
  border-color: rgba(0, 87, 141, 0.15);
}

.recipient-contact-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 87, 141, 0.12);
}

.recipient-email {
  margin: 0;
  padding: 0 6px;
  font-size: 0.82rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.recipient-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 6px;
}

.recipient-status {
  font-size: 0.78rem;
  color: var(--muted);
}

.recipient-status.is-sent {
  color: var(--accent);
  font-weight: 600;
}

.recipient-status.is-responded {
  color: #15803d;
  font-weight: 600;
}

/* "Viewed …" — shown after Sent but before Quote received. Uses the
   amber/attention color so it reads as a meaningful engagement signal
   without looking as loud as the green "Quote received" state. */
.recipient-status.is-viewed {
  color: #92400e;
  font-weight: 600;
}

.recipient-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .recipient-row {
    grid-template-columns: 1fr;
  }
  .recipient-actions {
    justify-content: flex-start;
  }
}

.mover-preview-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(90deg, rgba(0, 87, 141, 0.96), rgba(26, 117, 173, 0.96));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 87, 141, 0.18);
}

.mover-preview-banner-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  max-width: 1280px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.mover-preview-banner-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.mover-preview-banner-copy {
  margin: 0;
  font-size: 0.92rem;
  flex: 1;
  min-width: 240px;
}

.mover-preview-banner-back {
  background: #fff;
  color: var(--accent);
  border-color: #fff;
  padding: 6px 14px;
  font-size: 0.85rem;
}

.mover-preview-banner-back:hover {
  background: rgba(255, 255, 255, 0.9);
}

.mover-edit-note {
  margin: 18px 24px 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid rgba(0, 87, 141, 0.2);
  background:
    radial-gradient(circle at top right, rgba(26, 117, 173, 0.1), transparent 42%),
    rgba(232, 244, 255, 0.78);
  color: var(--accent-deep);
  font-weight: 600;
  line-height: 1.5;
}

.mover-quote-field {
  display: none;
}

.public-calculator-mode .mover-quote-field {
  display: block;
}

.bid-line-items {
  display: grid;
  gap: 16px;
  padding: 20px 24px 24px;
}

.bid-line-header {
  display: grid;
  grid-template-columns: 2.1fr 0.7fr 1fr 1fr;
  gap: 16px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 8px;
  margin-top: 20px;
}

.bid-line-row {
  display: grid;
  grid-template-columns: 2.1fr 0.7fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(31, 53, 85, 0.08);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.bid-line-label {
  display: grid;
  gap: 6px;
}

.bid-line-title {
  font-weight: 600;
  color: var(--ink);
}

.bid-line-note {
  font-size: 0.9rem;
  color: var(--muted);
}

.bid-line-qty {
  font-size: 0.95rem;
  color: var(--muted);
  white-space: normal;
  line-height: 1.3;
}

.bid-line-input .input-with-prefix {
  margin: 0;
}

.bid-line-input {
  display: grid;
  gap: 8px;
}

.bid-line-input-label {
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent-deep);
}

.bid-line-input-hint {
  margin-left: 6px;
  color: #c1272d;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bid-line-input .input-with-suffix {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.bid-line-input .input-suffix {
  font-weight: 600;
  color: var(--muted);
}

.bid-line-subheader {
  background: rgba(9, 62, 106, 0.04);
  border-style: dashed;
}

.bid-line-extra {
  display: grid;
  gap: 12px;
}

.bid-line-extra .bid-line-row {
  grid-template-columns: 1.6fr 0.5fr 1fr 1fr;
}

.bid-line-extra input[type="text"] {
  width: 100%;
}

.bid-line-actions {
  background: rgba(255, 255, 255, 0.55);
}

.soft-button {
  border: 1px solid rgba(31, 53, 85, 0.2);
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent-deep);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.soft-button:hover {
  border-color: rgba(31, 53, 85, 0.35);
}

.ghost-button {
  border: 1px solid rgba(31, 53, 85, 0.18);
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.ghost-button:hover {
  color: var(--accent-deep);
  border-color: rgba(31, 53, 85, 0.35);
}

.bid-line-total {
  font-weight: 600;
  color: var(--accent-deep);
  text-align: right;
}

.bid-line-header .align-center,
.bid-line-row .bid-line-qty {
  text-align: center;
}

.bid-line-header .align-right {
  text-align: right;
}

@media (max-width: 900px) {
  .bid-line-header {
    display: none;
  }

  .bid-line-row {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: left;
  }

  .bid-line-qty,
  .bid-line-total {
    text-align: left;
  }
}

.panel-header h2 {
  margin: 0;
  font-size: 1.6rem;
}

.panel-header p {
  margin: 0;
}

.form-grid,
.results-stack {
  display: grid;
  gap: 16px;
  padding: 20px 24px 24px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  box-shadow: 0 16px 35px rgba(53, 45, 17, 0.06);
}

fieldset.card {
  margin: 0;
  padding: 18px;
}

legend {
  padding: 0 8px;
  font-size: 1rem;
  font-weight: 700;
}

label {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

label:first-of-type {
  margin-top: 10px;
}

label span {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(64, 80, 58, 0.16);
  background: #fffdf8;
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
}

input[readonly] {
  background: rgba(0, 87, 141, 0.08);
  border-color: rgba(0, 87, 141, 0.18);
}

.public-calculator-mode #job-parameters-form label:not(.mover-editable-field) input[readonly] {
  background: rgba(13, 13, 13, 0.04);
  border-color: rgba(13, 13, 13, 0.08);
  color: rgba(13, 13, 13, 0.8);
}

.mover-edit-panel {
  margin-top: 12px;
  border: 2px solid rgba(0, 87, 141, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(26, 117, 173, 0.12), transparent 40%),
    rgba(232, 244, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mover-editable-field {
  padding: 14px;
  margin-top: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid rgba(0, 87, 141, 0.18);
  box-shadow: 0 10px 22px rgba(0, 87, 141, 0.08);
}

.mover-editable-field span {
  color: var(--accent-deep);
  font-weight: 700;
}

.mover-editable-field input {
  background: #fff;
  border: 2px solid rgba(0, 87, 141, 0.28);
  box-shadow: 0 0 0 4px rgba(0, 87, 141, 0.06);
}

.mover-editable-field .input-prefix {
  color: var(--accent-deep);
}

textarea {
  resize: vertical;
  min-height: 140px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(194, 100, 26, 0.25);
  border-color: rgba(194, 100, 26, 0.4);
}

.input-with-suffix {
  position: relative;
}

.input-with-prefix {
  position: relative;
}

.input-with-prefix input {
  padding-left: 34px;
}

.input-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 600;
  pointer-events: none;
}

.rfp-page-shell {
  margin-bottom: 56px;
}

.rfp-snapshot-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rfp-form {
  display: grid;
  gap: 20px;
}

.rfp-form-grid {
  display: grid;
  gap: 18px;
}

.rfp-form-section {
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.06), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 240, 0.98));
  padding: 20px;
  box-shadow: 0 12px 26px rgba(13, 13, 13, 0.04);
}

.rfp-form-section h3 {
  margin: 0 0 2px;
  font-size: 1.15rem;
}

.rfp-subsection + .rfp-subsection {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(13, 13, 13, 0.08);
}

.rfp-subsection-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.rfp-subsection-title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-deep);
}

.rfp-subsection-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* "Job needs: X" context line under each operational question.
   Small, muted, with a gold accent on the left so it reads as
   "this is data from the job, not your answer." Sits between the
   question label and the input. */
.rfp-job-context {
  margin: 2px 0 4px;
  padding: 2px 0 2px 8px;
  border-left: 3px solid #b39566;
  color: #6b4e26;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.4;
}

.rfp-two-column {
  padding: 12px 0 0;
}

.rfp-two-column,
.rfp-full-width-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rfp-bid-terms-grid {
  align-items: start;
}

.rfp-bid-pricing-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.rfp-bid-term-field {
  margin-top: 0;
}

.rfp-bid-pricing-row > .rfp-bid-term-field,
.rfp-bid-pricing-row > .rfp-bid-term-field:first-of-type {
  margin-top: 0;
}

.rfp-bid-term-field .rfp-locked-note {
  margin-top: 10px;
}

.rfp-bid-range-row {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
}

.rfp-bid-range-row > .rfp-field-note,
.rfp-bid-range-row > .rfp-field-guidance {
  max-width: calc(50% - 8px);
}

.rfp-full-width-grid label {
  margin-top: 0;
  grid-column: 1 / -1;
}

.rfp-span-2 {
  grid-column: 1 / -1;
}

/* Checkbox-style fit question — used for Climate-Controlled warehouse
   today, reusable for any other yes/no toggle we add. Designed to
   read clearly next to the other form inputs without breaking the
   two-column grid. */
.rfp-checkbox-label {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  margin-top: 4px !important;
}

.rfp-checkbox-label:hover {
  border-color: rgba(0, 87, 141, 0.3);
}

.rfp-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}

.rfp-checkbox-text {
  display: grid;
  gap: 2px;
}

.rfp-checkbox-text strong {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 600;
}

.rfp-checkbox-help {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.rfp-field-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.rfp-field-guidance {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.rfp-section-note {
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.rfp-bid-terms-highlight {
  border: 2px solid rgba(26, 117, 173, 0.25);
  background:
    radial-gradient(circle at top right, rgba(26, 117, 173, 0.12), transparent 55%),
    rgba(232, 244, 255, 0.65);
  box-shadow: 0 18px 40px rgba(31, 53, 85, 0.08);
}

.rfp-bid-terms-highlight h3 {
  color: var(--accent-deep);
}

.rfp-bid-terms-note {
  font-weight: 600;
  color: var(--accent-deep);
}

.rfp-locked-payout-input {
  background: linear-gradient(180deg, rgba(226, 234, 245, 0.9), rgba(239, 244, 251, 0.95));
  border-color: rgba(32, 87, 146, 0.24);
  color: var(--ink);
  font-weight: 600;
}

.rfp-locked-payout-input[readonly] {
  cursor: not-allowed;
}

.rfp-locked-note {
  color: var(--brand-blue-dark);
  font-weight: 500;
}

.rfp-field-guidance[data-state="warning"] {
  color: #9a5a00;
}

.rfp-field-guidance[data-state="in-range"] {
  color: var(--accent-deep);
}

.rfp-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-top: 6px;
}

.rfp-submit-note {
  margin: 0;
  max-width: 60ch;
  color: var(--muted);
  line-height: 1.6;
}

.rfp-success-layout {
  margin-top: 32px;
}

.rfp-success-card {
  padding: 32px;
}

.rfp-success-summary {
  margin-top: 22px;
  padding-left: 0;
  padding-right: 0;
}

.rfp-success-follow-up {
  margin: 20px 0 0;
  color: var(--accent-deep);
  font-weight: 600;
}

.rfp-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.input-with-suffix input {
  padding-right: 44px;
}

.input-suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 600;
  pointer-events: none;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 24px 0;
}

.metric-callout {
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 249, 239, 0.98));
  box-shadow: 0 14px 30px rgba(13, 13, 13, 0.05);
}

.metric-callout.accent {
  background:
    linear-gradient(135deg, rgba(0, 87, 141, 0.18), rgba(255, 255, 255, 0.96)),
    linear-gradient(180deg, #ffffff, #f6fbff);
  border-color: rgba(0, 87, 141, 0.18);
}

.metric-callout-payment {
  grid-column: 1 / -1;
  text-align: center;
}

.metric-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.metric-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 87, 141, 0.08);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.metric-value {
  margin: 12px 0 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 0.95;
}

.result-card {
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(252,248,240,0.98));
  position: relative;
  overflow: hidden;
}

.result-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: rgba(0, 87, 141, 0.2);
}

.section-pricing {
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(247, 252, 255, 0.98), rgba(241, 248, 252, 0.98));
}

.section-pricing::before {
  background: linear-gradient(180deg, #00578d, #1a75ad);
}

.section-operations {
  background:
    radial-gradient(circle at top right, rgba(13, 13, 13, 0.05), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(247, 245, 240, 0.98));
}

.section-operations::before {
  background: linear-gradient(180deg, #0d0d0d, #4d4d4d);
}

.section-warehousing {
  background:
    radial-gradient(circle at top right, rgba(191, 179, 157, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(255,252,246,0.98), rgba(246, 239, 227, 0.98));
}

.section-warehousing::before {
  background: linear-gradient(180deg, #bfb39d, #8f8575);
}

.section-trucking {
  background:
    radial-gradient(circle at top right, rgba(26, 117, 173, 0.09), transparent 42%),
    linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(243, 248, 251, 0.98));
}

.section-trucking::before {
  background: linear-gradient(180deg, #1a75ad, #00578d);
}

.section-hourly {
  background:
    radial-gradient(circle at top right, rgba(0, 63, 103, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(246, 251, 255, 0.98), rgba(238, 246, 251, 0.98));
}

.section-hourly::before {
  background: linear-gradient(180deg, #003f67, #00578d);
}

.section-time-guide {
  background:
    radial-gradient(circle at top right, rgba(210, 200, 183, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(246, 239, 227, 0.96));
}

.section-time-guide::before {
  background: linear-gradient(180deg, #b7aa93, #00578d);
}

.section-photo {
  margin: -20px -20px 18px;
  border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 18px 18px;
  overflow: hidden;
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
}

.section-photo img {
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 420px);
  object-fit: cover;
  object-position: center 42%;
}

.equation {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.equation-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.hourly-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 16px;
}

.hourly-example-card {
  border: 1px solid rgba(0, 87, 141, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  padding: 14px 16px;
}

.hourly-example-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.hourly-example-value {
  margin: 8px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
}

.hourly-example-value span {
  margin-left: 4px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.92rem;
  color: var(--muted);
}

.hourly-details {
  margin-top: 16px;
  border-top: 1px solid rgba(0, 87, 141, 0.14);
  padding-top: 14px;
}

.hourly-details summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--accent-deep);
}

.hourly-details summary::-webkit-details-marker {
  display: none;
}

.hourly-details summary::after {
  content: " +";
}

.hourly-details[open] summary::after {
  content: " -";
}

.hourly-details #hourly-breakdown-table {
  margin-top: 10px;
}

.comparison-table {
  display: grid;
  gap: 0;
  margin-top: 18px;
  border: 1px solid rgba(0, 87, 141, 0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.comparison-table-header,
.comparison-table-row {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
}

.comparison-table-header {
  background: linear-gradient(180deg, rgba(0, 87, 141, 0.12), rgba(0, 87, 141, 0.06));
  font-weight: 700;
}

.comparison-table-row + .comparison-table-row {
  border-top: 1px solid rgba(0, 87, 141, 0.1);
}

.comparison-table-cell {
  padding: 14px 16px;
  font-size: 0.96rem;
}

.comparison-table-header .comparison-table-cell {
  color: var(--accent-deep);
}

.comparison-table-row .comparison-table-cell:nth-child(3),
.comparison-table-row .comparison-table-cell:nth-child(4) {
  font-weight: 600;
}

.comparison-table-row:nth-child(even) {
  background: rgba(255,255,255,0.45);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.info-grid.info-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.standard-item-result {
  margin-top: 24px;
  padding: 0;
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(232, 244, 255, 0.9), rgba(255, 255, 255, 0.98));
  border: 1px solid rgba(0, 87, 141, 0.22);
}

.standard-item-result-inner {
  display: grid;
  gap: 10px;
  padding: 28px 32px 32px;
  justify-items: start;
}

.standard-item-result-label {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.standard-item-result-value {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
}

.standard-item-result-helper {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
  max-width: 58ch;
}

.standard-item-result-secondary {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.standard-item-result-secondary strong {
  color: var(--ink);
}

.standard-item-result-secondary-note {
  color: var(--muted);
}

.standard-item-result-cta {
  margin-top: 14px;
}

.standard-item-result.is-pending .standard-item-result-value,
.standard-item-result.is-pending .standard-item-result-helper,
.standard-item-result.is-pending .standard-item-result-secondary,
.standard-item-result.is-pending .standard-item-result-cta {
  display: none;
}

.standard-item-result.is-ready .standard-item-result-empty-note {
  display: none;
}

.standard-item-result-empty-note {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: italic;
}

.standard-item-result-cta[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.standard-item-result-glossary {
  margin: 8px 0 4px;
  border: 1px solid rgba(0, 87, 141, 0.18);
  border-radius: var(--radius-sm, 10px);
  background: rgba(255, 255, 255, 0.6);
  max-width: 58ch;
  width: 100%;
}

.standard-item-result-glossary summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.92rem;
  border-radius: inherit;
}

.standard-item-result-glossary summary::-webkit-details-marker {
  display: none;
}

.standard-item-result-glossary summary:hover {
  background: rgba(0, 87, 141, 0.05);
}

.standard-item-result-glossary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 87, 141, 0.12);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.standard-item-result-glossary[open] .standard-item-result-glossary-icon {
  transform: rotate(45deg);
}

.standard-item-result-glossary dl {
  margin: 0;
  padding: 0 14px 14px;
  display: grid;
  gap: 10px;
}

.standard-item-result-glossary dt {
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--accent);
}

.standard-item-result-glossary dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.mover-draft-status {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1em;
  font-style: italic;
}

.job-quote-compare {
  margin: 0 0 16px;
  padding: 14px 16px 12px;
  border-radius: var(--radius-md);
  background: rgba(232, 244, 255, 0.5);
  border: 1px solid rgba(0, 87, 141, 0.18);
}

.job-quote-compare-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.job-quote-compare-export {
  font-size: 0.82rem;
  padding: 6px 12px;
}

.job-quote-compare-kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.job-quote-compare h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.job-quote-compare-scroll {
  overflow-x: auto;
}

.job-quote-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 620px;
}

.job-quote-compare-table thead th {
  text-align: left;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid rgba(0, 87, 141, 0.2);
}

.job-quote-compare-table tbody td,
.job-quote-compare-table tbody th {
  padding: 10px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.06);
  text-align: left;
  vertical-align: middle;
  color: var(--ink);
  font-weight: 400;
}

.job-quote-compare-table tbody tr:last-child td,
.job-quote-compare-table tbody tr:last-child th {
  border-bottom: none;
}

.job-quote-compare-table tbody tr.is-lowest {
  background: rgba(0, 87, 141, 0.06);
}

.job-quote-compare-table tbody tr.is-winner {
  background: rgba(22, 163, 74, 0.08);
  box-shadow: inset 4px 0 0 #15803d;
}

.job-quote-compare-badge.is-winner {
  background: rgba(22, 163, 74, 0.16);
  color: #15803d;
}

.job-quote-compare-company {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

.job-quote-compare-submitted {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.job-quote-compare-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 87, 141, 0.14);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.job-quote-compare-empty {
  color: var(--muted);
  font-style: italic;
}

.job-quote-compare-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}

.job-quote-compare-pill.is-yes {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.job-quote-compare-pill.is-yes-with {
  background: rgba(234, 179, 8, 0.16);
  color: #854d0e;
}

.job-quote-compare-pill.is-no {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.job-quote-compare-pill.is-neutral {
  background: rgba(107, 114, 128, 0.12);
  color: var(--muted);
}

.job-quote-compare-pill.is-waiting {
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}

/* Waiting-state rows (mover invited but hasn't submitted yet).
   Muted text, subtle bg, and a full-row waiting cell span. */
.job-quote-compare-table tr.is-waiting th,
.job-quote-compare-table tr.is-waiting td {
  background: rgba(107, 114, 128, 0.04);
  color: var(--muted);
}

.job-quote-compare-table tr.is-waiting .job-quote-compare-company {
  color: var(--ink);
  font-weight: 500;
}

.job-quote-compare-waiting-cell {
  text-align: center;
}

.job-quote-compare-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* =========================================================
   Job Builder: two-pane app shell
   ========================================================= */

.job-builder-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f4f8fc 0%, #eef3f9 100%);
}

.app-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 87, 141, 0.14);
  box-shadow: 0 2px 10px rgba(13, 13, 13, 0.04);
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* Works as a <button> home link — keep the chrome invisible until
     hover so the brand still reads as branding, not a button. */
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 8px;
  margin: -4px -8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}

.app-topbar-brand:hover {
  background: rgba(0, 87, 141, 0.05);
  border-color: rgba(0, 87, 141, 0.18);
}

.app-topbar-brand:focus-visible {
  outline: 2px solid rgba(0, 87, 141, 0.5);
  outline-offset: 2px;
}

.app-topbar-logo {
  width: 36px;
  height: auto;
  opacity: 0.85;
}

.app-topbar-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.app-topbar-title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--ink);
}

.app-topbar-search {
  display: flex;
  justify-content: center;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.app-topbar-search input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(13, 13, 13, 0.12);
  background: #fff;
  font-size: 0.88rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-topbar-search input:focus {
  outline: none;
  border-color: rgba(0, 87, 141, 0.4);
  box-shadow: 0 0 0 3px rgba(0, 87, 141, 0.12);
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid rgba(13, 13, 13, 0.08);
}

.app-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 0;
  min-height: 0;
  align-items: stretch;
}

/* =========================================================
   Library pane (left)
   ========================================================= */

.library-pane {
  padding: 16px 14px 40px;
  border-right: 1px solid rgba(13, 13, 13, 0.1);
  background: #fafbfc;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
}

.library-pane-status {
  margin: 0 4px 12px;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1em;
}

/* Library filter toolbar — two dropdowns + reset. Sits above the
   sections so you can narrow the list at scale (30+ jobs). */
.library-filters {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  margin: 0 0 16px;
  background: #fff;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 8px;
}

.library-filter {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.library-filter span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-filter select {
  width: 100%;
  padding: 6px 26px 6px 10px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid rgba(13, 13, 13, 0.15);
  border-radius: 6px;
  appearance: none;
  cursor: pointer;
}

.library-filter select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 87, 141, 0.15);
}

.library-filter-reset {
  align-self: end;
}

.library-filter-reset[hidden] {
  display: none !important;
}

.library-section {
  margin-bottom: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.library-section-header {
  padding: 4px 6px 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent;
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
  list-style: none;
  cursor: default;
  margin-bottom: 10px;
}

details.library-section > summary.library-section-header {
  cursor: pointer;
}

details.library-section > summary.library-section-header::-webkit-details-marker {
  display: none;
}

details.library-section > summary.library-section-header::after {
  content: "▸";
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}

details.library-section[open] > summary.library-section-header::after {
  transform: rotate(90deg);
}

.library-section-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
}

.library-section-dot.is-attention {
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.library-section-dot.is-active {
  background: var(--accent);
}

.library-section-dot.is-closed {
  background: rgba(107, 114, 128, 0.6);
}

.library-section-dot.is-archived {
  background: rgba(107, 114, 128, 0.35);
  box-shadow: inset 0 0 0 2px rgba(107, 114, 128, 0.5);
}

.library-section-header h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.library-section-header p {
  margin: 3px 0 0 18px;
  width: 100%;
  font-size: 0.72rem;
  color: var(--muted);
}

.library-list {
  display: grid;
  padding: 0;
  gap: 8px;
}

.library-empty {
  margin: 0;
  padding: 14px;
  font-size: 0.84rem;
  color: var(--muted);
  font-style: italic;
}

/* ---------------------------------------------------------------
   Library rows
   Left-edge color strip (4px) encodes status at a glance. Each row
   has a visible border so rows look like distinct cards rather than
   one merged list. Selected state gets a stronger strip + filled bg.
   --------------------------------------------------------------- */

.library-row {
  position: relative;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.library-row:hover {
  border-color: rgba(0, 87, 141, 0.3);
  background: #fafbfc;
}

.library-row.is-selected {
  border-color: var(--accent);
  background: rgba(0, 87, 141, 0.06);
}

.library-row-main {
  position: relative;
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 12px 14px 12px 18px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.library-row-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(107, 114, 128, 0.4);
}

.library-row.is-selected .library-row-strip {
  width: 6px;
}

/* Status-driven strip colors — intentionally distinct so three
   jobs at the same campus don't look identical. */
.library-row[data-status="draft"] .library-row-strip {
  background: rgba(107, 114, 128, 0.45);
}
.library-row[data-status="sent"] .library-row-strip {
  background: var(--accent);
}
.library-row[data-status="quoting"] .library-row-strip {
  background: #d97706; /* amber — needs attention */
}
.library-row[data-status="awarded"] .library-row-strip {
  background: #15803d; /* green — won */
}
.library-row[data-status="closed"] .library-row-strip {
  background: #4b5563;
}

.library-row-body {
  flex: 1;
  min-width: 0;
}

.library-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.library-row-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.library-row-quote-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.library-row-quote-badge strong {
  font-size: 0.82rem;
  font-weight: 700;
  margin-right: 3px;
}

.library-row-campus {
  margin: 0 0 2px;
  font-size: 0.8rem;
  color: var(--ink);
  font-weight: 500;
}

.library-row-location {
  margin: 0 0 3px;
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 500;
}

/* Welcome page map iframe — rounded, responsive, subtle border.
   Sits inside a .welcome-map-frame wrapper that provides the aspect
   ratio so the layout never jumps while the embed loads. */
.welcome-map-section[hidden] {
  display: none;
}

/* Invitation-expired banner — consistent with the cream + gold-accent
   callouts used elsewhere in the branded emails and mover pages. */
.invite-expired-banner[hidden] {
  display: none;
}

.invite-expired-banner {
  margin: 24px auto 0;
  max-width: 960px;
  padding: 0 20px;
}

.invite-expired-inner {
  padding: 22px 26px;
  background: #f4efe6;
  border-left: 6px solid #b39566;
  border-radius: 12px;
  color: var(--ink);
}

.invite-expired-kicker {
  margin: 0 0 4px;
  color: #b39566;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.invite-expired-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  color: var(--ink);
}

.invite-expired-copy {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* When the invitation is expired, dim the Welcome page content so the
   mover's eye lands on the banner rather than the now-irrelevant
   job details and stepper. */
body.invitation-expired .hero,
body.invitation-expired .how-page-main,
body.invitation-expired #welcome-map-section {
  opacity: 0.55;
  pointer-events: none;
}

/* Inline version of the expired banner used inside the Submit Quote
   form, above the form fields. Same cream + gold design; slightly
   tighter margins since it sits inside a form shell. */
.invite-expired-banner-inline[hidden] {
  display: none;
}

.invite-expired-banner-inline {
  margin: 0 0 20px;
  padding: 18px 22px;
  background: #f4efe6;
  border-left: 6px solid #b39566;
  border-radius: 10px;
  color: var(--ink);
}

.invite-expired-banner-inline .invite-expired-kicker {
  margin: 0 0 4px;
  color: #b39566;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.invite-expired-banner-inline .invite-expired-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: var(--ink);
}

.invite-expired-banner-inline .invite-expired-copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ---- Google Places Autocomplete widget on Warehouse Address ---- */
/* The PlaceAutocompleteElement renders its own bordered container +
   a search icon + the input field. If we also style the inner input
   with a border, the user sees a "box inside a box" — so here we
   strip the inner input's border and let the widget's own outer
   chrome be the single visible frame. */
.rfp-place-autocomplete {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.rfp-place-autocomplete::part(input) {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: inherit;
  padding: 10px 4px;
}

body.invitation-expired .rfp-form .rfp-form-grid,
body.invitation-expired .rfp-form .rfp-submit-row,
body.invitation-expired .rfp-form .rfp-nonbinding-notice {
  opacity: 0.55;
}

.welcome-map-frame {
  position: relative;
  width: 100%;
  padding-top: 52%; /* ~16:9-ish */
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 87, 141, 0.04);
}

.welcome-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.welcome-map-foot {
  margin: 12px 0 0;
  font-size: 0.88rem;
  text-align: right;
}

.welcome-map-external {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.welcome-map-external:hover {
  text-decoration: underline;
}

/* Non-binding notice on Submit Quote form — sits right above the
   submit button so movers see it in the same eye-path as the CTA.
   Cream bg with a gold left accent so it reads as an informational
   note rather than an error/warning. */
.rfp-nonbinding-notice {
  margin: 16px 0;
  padding: 16px 20px;
  background: #f4efe6;
  border-left: 4px solid #b39566;
  border-radius: 8px;
  color: var(--ink);
  line-height: 1.55;
  font-size: 0.92rem;
}

.rfp-nonbinding-notice p {
  margin: 0;
}

.rfp-nonbinding-notice p + p {
  margin-top: 6px;
}

.rfp-nonbinding-kicker {
  color: #b39566;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.library-row-pickup {
  margin: 0 0 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

.library-row-movers {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}

.library-row-movers-muted {
  font-style: italic;
}

.library-row-status {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(13, 13, 13, 0.06);
}

.library-row-status-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-row-status-neutral {
  color: #374151;
}
.library-row-status-info {
  color: var(--accent);
}
.library-row-status-warning {
  color: #92400e;
}
.library-row-status-success {
  color: #15803d;
}
.library-row-status-muted {
  color: var(--muted);
}

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

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

.status-pill-neutral {
  background: rgba(107, 114, 128, 0.1);
  color: #374151;
  border-color: rgba(107, 114, 128, 0.2);
}
.status-pill-info {
  background: rgba(0, 87, 141, 0.1);
  color: var(--accent);
  border-color: rgba(0, 87, 141, 0.22);
}
.status-pill-warning {
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.3);
}
.status-pill-success {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.3);
}
.status-pill-muted {
  background: transparent;
  color: var(--muted);
  border-color: rgba(107, 114, 128, 0.2);
}

/* =========================================================
   Detail pane (right)
   ========================================================= */

.detail-pane {
  padding: 20px 24px 60px;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  min-width: 0;
  background: #f4f5f7;
}

.detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 40px 24px;
}

.detail-empty-card {
  max-width: 520px;
  padding: 32px 32px 28px;
  background: #fff;
  border: 1px solid rgba(0, 87, 141, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(0, 87, 141, 0.08);
  text-align: left;
}

.detail-empty-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.detail-empty-card h2 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  color: var(--ink);
}

.detail-empty-copy {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.95rem;
}

.detail-empty-steps {
  margin: 0 0 20px;
  padding: 0 0 0 20px;
  display: grid;
  gap: 8px;
}

.detail-empty-steps li {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Wrap the whole job view in a single card so the header, tabs, and
   tab panels all clearly read as parts of the SAME job. The outer
   gap is collapsed and internal padding moves inside each section
   so the card has a single, uninterrupted outline. Subtle shadow
   lifts the card off the pane so it reads as one contained unit. */
.detail-body {
  display: grid;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(13, 13, 13, 0.12);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.04);
}

/* Restore [hidden] behavior in places where our display rules would
   otherwise win over the user-agent's display: none. */
.detail-empty[hidden],
.detail-body[hidden],
.detail-tab-panel[hidden],
.detail-lifecycle-menu[hidden],
#library-section-attention[hidden] {
  display: none !important;
}

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 22px 16px;
  margin: 0;
  border-bottom: 1px solid rgba(13, 13, 13, 0.1);
}

.detail-header-primary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  flex-wrap: wrap;
}

.detail-header-titles {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* The status pill now lives ABOVE the title in small uppercase form
   so it reads as "this is the job, and its current status is X"
   rather than floating disconnected in the action cluster. */
.detail-header-titles .status-pill {
  justify-self: start;
  margin-bottom: 2px;
}

.detail-header-titles h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.detail-meta {
  margin: 2px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}

/* Actions grouped in a single attached unit so they read as
   "things I can do to THIS job" not "floating toolbar". A shared
   border + background makes them feel connected. */
.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 3px;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 8px;
  background: #fff;
}

.detail-header-actions .button {
  border-radius: 6px;
  border-color: transparent;
}

.detail-header-actions .button:hover {
  background: rgba(0, 87, 141, 0.06);
}

.detail-header-actions .button-primary {
  border-color: var(--accent);
}

.detail-header-actions .detail-delete {
  color: #b91c1c;
}

.detail-header-actions .detail-delete:hover {
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
}

.detail-header-menu {
  position: relative;
}

.detail-lifecycle-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 12px 30px rgba(13, 13, 13, 0.12);
  padding: 6px;
  display: grid;
  gap: 2px;
  z-index: 30;
  min-width: 180px;
}

.detail-lifecycle-menu button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.88rem;
}

.detail-lifecycle-menu button:hover {
  background: rgba(0, 87, 141, 0.08);
}

.detail-lifecycle-menu button[hidden] {
  display: none;
}

.detail-lifecycle-divider {
  margin: 4px 2px;
  border: 0;
  border-top: 1px solid rgba(13, 13, 13, 0.08);
}

/* Legacy .detail-delete styles live above inside .detail-header-actions;
   this hook is kept for any non-header placements (none currently). */
.detail-delete {
  color: #b91c1c;
}

/* Tabs — live INSIDE the detail-body card. Subtle off-white strip
   so they visually look like notebook tabs attached to the content
   below, not floating navigation. */

.detail-tabs {
  display: flex;
  gap: 0;
  padding: 0 22px;
  background: #f6f7f9;
  border-bottom: 1px solid rgba(13, 13, 13, 0.1);
}

.detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.detail-tab:hover {
  color: var(--ink);
  background: rgba(0, 87, 141, 0.04);
}

.detail-tab.is-active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
  background: #fff;
}

.detail-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(0, 87, 141, 0.12);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.detail-tab.is-active .detail-tab-count {
  background: rgba(0, 87, 141, 0.18);
}

.detail-tab-count.is-empty {
  background: rgba(13, 13, 13, 0.06);
  color: var(--muted);
}

/* Active tab's panel gets breathing room INSIDE the card. */
.detail-tab-panel {
  padding: 22px 24px 24px;
}

.tab-empty {
  margin: 0;
  padding: 24px;
  font-size: 0.92rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  background: rgba(244, 248, 252, 0.5);
  border-radius: var(--radius-sm, 10px);
  border: 1px dashed rgba(13, 13, 13, 0.1);
}

/* Scope tab form shell */

.detail-tab-panel[data-panel="scope"] {
  display: grid;
  gap: 18px;
}

.detail-tab-panel[data-panel="scope"] .job-parameters-grid {
  padding: 0;
  /* minmax(0, 1fr) prevents a cell's content (e.g. a long hint
     paragraph) from pushing the column wider than 50% and crowding
     its neighbor. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Rows line up at the top so a label with a hint underneath
     doesn't vertically stretch a neighboring label's input. */
  align-items: start;
}

.detail-tab-panel[data-panel="scope"] .job-parameters-grid > label {
  align-self: start;
  min-width: 0;
  /* Neutralize the default label top-margin — the grid's own gap
     already spaces rows, and the label:first-of-type rule would
     otherwise give Job Reference a different top offset than
     Campus on the same row. */
  margin-top: 0;
}

/* Job Address spans both columns inside the Scope grid so it gets
   room for a full street address, and so the pickup/delivery window
   pairs line up on their own rows below it. */
.detail-tab-panel[data-panel="scope"] .job-parameters-grid .job-location-label {
  grid-column: 1 / -1;
}

.scope-sent-warning {
  padding: 12px 14px;
  border-radius: var(--radius-sm, 10px);
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.5;
}

.scope-save-row {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: var(--radius-md);
  grid-template-columns: 1fr 1fr;
}

.scope-save-label {
  display: grid;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--muted);
}

.scope-save-label input {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(13, 13, 13, 0.1);
  font-size: 0.95rem;
  color: var(--ink);
}

.scope-save-hint {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--muted);
}

.scope-save-row #save-job-button {
  grid-column: 1 / -1;
  justify-self: start;
}

.scope-save-row .scenario-status {
  grid-column: 1 / -1;
  margin: 0;
}

/* Internal calc modal */

.internal-calc-modal-panel {
  width: 95vw;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.internal-calc-modal-content {
  flex: 1;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.internal-calc-modal-content iframe {
  width: 100%;
  height: 100%;
  min-height: 600px;
}

/* "All Jobs" back button only appears on small screens */
.detail-back {
  display: none;
  margin-bottom: 12px;
  align-self: flex-start;
}

/* Mobile */
@media (max-width: 900px) {
  .app-layout {
    grid-template-columns: 1fr;
  }
  .library-pane {
    max-height: none;
    border-right: none;
    border-bottom: 1px solid rgba(13, 13, 13, 0.08);
    padding: 14px 14px 24px;
  }
  /* When a job is selected on mobile, collapse the library pane into a
     compact header so the detail pane gets the screen. */
  .job-builder-shell.is-detail-mode .library-pane {
    display: none;
  }
  .detail-pane {
    max-height: none;
    padding: 18px 18px 40px;
  }
  .job-builder-shell.is-detail-mode .detail-back {
    display: inline-flex;
  }
  .app-topbar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 14px;
  }
  .app-topbar-brand {
    justify-self: start;
  }
  .app-topbar-search {
    order: 3;
    max-width: 100%;
  }
  .app-topbar-actions {
    order: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .app-topbar-title {
    font-size: 1.05rem;
  }
  .detail-header-primary {
    flex-direction: column;
    align-items: flex-start;
  }
  .detail-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .detail-tab-panel[data-panel="scope"] .job-parameters-grid,
  .scope-save-row {
    grid-template-columns: 1fr;
  }
  .detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .detail-tab {
    flex-shrink: 0;
  }
  .library-row-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .auth-user-label {
    display: none;
  }
  .app-topbar-actions {
    gap: 6px;
  }
}

@media (max-width: 640px) {
  .standard-item-result-inner {
    padding: 22px 20px 24px;
  }

  .standard-item-result-value {
    font-size: 2.4rem;
  }
}

.info-card {
  border: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at top right, rgba(0, 87, 141, 0.08), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(252,248,240,0.96));
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 136px;
  text-align: center;
}

.info-card.span-2 {
  grid-column: 1 / -1;
}

.info-card.span-3 {
  grid-column: 1 / -1;
}

.info-card-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.info-card-value {
  margin: 10px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.8rem;
  line-height: 0.95;
}

.info-card-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.badge {
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 87, 141, 0.1);
  color: var(--accent-deep);
  font-size: 0.84rem;
  font-weight: 600;
}

.metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 18px 0 0;
}

.metric-list div {
  padding-top: 12px;
  border-top: 1px solid rgba(38, 55, 38, 0.1);
}

.metric-list dt {
  color: var(--muted);
  font-size: 0.9rem;
}

.metric-list dd {
  margin: 6px 0 0;
  font-size: 1.08rem;
  font-weight: 600;
}

@media (max-width: 1120px) {
  .layout,
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .timeline-connector {
    display: none;
  }

  .hero-logo-image {
    align-self: flex-start;
    width: min(180px, 55%);
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rfp-snapshot-grid,
  .rfp-two-column,
  .rfp-full-width-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-parameters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-hero-band,
  .playbook-grid,
  .item-type-grid {
    grid-template-columns: 1fr;
  }

  .rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-standard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .input-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 20px, 1400px);
    margin: 10px auto 24px;
  }

  .hero,
  .panel-header,
  .form-grid,
  .results-stack,
  .summary-grid,
  .how-page-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero {
    gap: 18px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .modal-panel {
    width: min(100% - 12px, 1100px);
    max-height: calc(100vh - 12px);
    margin: 6px auto;
  }

  .modal-content,
  .modal-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .modal-content {
    padding-bottom: 18px;
  }

  .how-step-number {
    width: 34px;
    height: 34px;
  }

  .team-standard-grid,
  .rules-grid {
    grid-template-columns: 1fr;
  }

  .role-toggle-bar {
    flex-direction: column;
  }

  .hero-copy-wrap {
    gap: 8px;
  }

  h1 {
    font-size: clamp(2.1rem, 12vw, 3.2rem);
    max-width: none;
  }

  .hero-copy {
    margin-top: 8px;
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .hero-actions {
    gap: 10px;
  }

  .hero-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .timeline-dot {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .timeline-label {
    font-size: 0.94rem;
  }

  .timeline-note {
    font-size: 0.76rem;
  }

  .hero-logo-image {
    width: min(140px, 42%);
    margin-top: 6px;
  }

  .rfp-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .top-parameters {
    margin-top: 16px;
    padding-bottom: 18px;
  }

  .scenario-panel {
    margin-top: 16px;
  }

  .scenario-toolbar {
    padding: 14px 16px 16px;
  }

  .scenario-actions {
    flex-direction: column;
  }

  .panel-header {
    padding-top: 18px;
  }

  .panel-header h2 {
    font-size: 1.35rem;
  }

  .section-chip {
    font-size: 0.66rem;
  }

  .panel-header p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .job-parameters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px 0;
  }

  .rfp-two-column,
  .rfp-full-width-grid,
  .rfp-snapshot-grid {
    grid-template-columns: 1fr;
  }

  label {
    margin-top: 8px;
    gap: 6px;
  }

  label span {
    font-size: 0.84rem;
  }

  input {
    padding: 12px 12px;
    font-size: 0.96rem;
  }

  .input-with-prefix input {
    padding-left: 30px;
  }

  .input-prefix {
    left: 12px;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 14px;
  }

  .metric-list {
    grid-template-columns: 1fr;
  }

  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .info-card.span-2,
  .info-card.span-3 {
    grid-column: 1 / -1;
  }

  .metric-callout {
    padding: 14px 14px 16px;
  }

  .metric-kicker {
    margin-bottom: 8px;
    padding: 4px 8px;
    font-size: 0.66rem;
  }

  .metric-label {
    font-size: 0.8rem;
  }

  .metric-value {
    margin: 8px 0 6px;
    font-size: clamp(1.45rem, 8vw, 2rem);
  }

  .metric-subtext {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .results-stack {
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 16px;
  }

  .hourly-example-grid {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .result-card {
    padding: 16px;
  }

  .section-photo {
    margin: -16px -16px 14px;
  }

  .section-photo img {
    height: 220px;
  }

  .result-card h3 {
    font-size: 1.08rem;
  }

  .equation {
    margin-top: 10px;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .info-card {
    min-height: 110px;
    padding: 14px;
  }

  .info-card-label {
    font-size: 0.76rem;
  }

  .info-card-value {
    margin-top: 8px;
    font-size: 1.45rem;
  }

  .info-card-note {
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.3;
  }

  .comparison-table-header,
  .comparison-table-row {
    grid-template-columns: 1.1fr 0.7fr 0.95fr 0.95fr;
  }

  .comparison-table-cell {
    padding: 11px 10px;
    font-size: 0.82rem;
  }
}

@media (max-width: 520px) {
  .summary-grid,
  .job-parameters-grid,
  .info-grid,
  .rfp-two-column,
  .rfp-full-width-grid,
  .rfp-snapshot-grid {
    grid-template-columns: 1fr;
  }

  .hourly-example-grid {
    grid-template-columns: 1fr;
  }

  .metric-callout,
  .info-card {
    min-height: auto;
  }

  .comparison-table {
    overflow-x: auto;
  }

  .comparison-table-header,
  .comparison-table-row {
    min-width: 520px;
  }

  .job-response-panel-header,
  .job-response-card-top {
    flex-direction: column;
    align-items: stretch;
  }

  .job-response-summary {
    grid-template-columns: 1fr;
  }
}