/* Buxton Sign UI foundation, taken from the current dashboard. */
:root {
  --bs-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-canvas: #f8fbff;
  --bs-surface: #ffffff;
  --bs-ink: #10213e;
  --bs-text: #192a43;
  --bs-muted: #657997;
  --bs-line: #d5e1f2;
  --bs-line-soft: #e5edf7;
  --bs-blue: #1266d9;
  --bs-blue-hover: #0755bb;
  --bs-blue-soft: #eaf3ff;
  --bs-green: #08ad82;
  --bs-green-soft: #def8ed;
  --bs-amber: #f5b72b;
  --bs-amber-soft: #fff0ca;
  --bs-red: #ee315c;
  --bs-red-soft: #ffe2e9;
  --bs-gray-soft: #eaf0f6;
  --bs-radius-control: 10px;
  --bs-radius-card: 12px;
  --bs-space-1: 4px;
  --bs-space-2: 8px;
  --bs-space-3: 12px;
  --bs-space-4: 16px;
  --bs-space-5: 20px;
  --bs-space-6: 24px;
  --bs-shadow-card: 0 5px 17px rgba(21, 61, 115, .035);
}

/* Product screens share the dashboard's typography and neutral surfaces. */
body:has(.contract-app), body:has(.costco-platform-shell) { font-family: var(--bs-font); color: var(--bs-ink); }
body .contract-app {
  --app-bg: var(--bs-canvas);
  --card-bg: var(--bs-surface);
  --ink: var(--bs-ink);
  --muted: var(--bs-muted);
  --line: var(--bs-line);
  --line-strong: #bdcee4;
  --blue: var(--bs-blue);
  background: var(--bs-canvas) !important;
  color: var(--bs-ink);
}
body .contract-app :is(.app-main, .monday-main) { font-size: 14px; line-height: 1.5; }
body .contract-app :is(.app-main, .monday-main) h1 { color: var(--bs-ink); }
body :is(.app-main, .monday-main) { color: var(--bs-ink); }
body :is(.app-main, .monday-main) :is(input, select, textarea, button) { font-family: var(--bs-font); }
body :is(.app-main, .monday-main) :is(input, select, textarea) { color: var(--bs-ink); }
body :is(.app-main, .monday-main) :is(input, select, textarea)::placeholder { color: #778ba8; }
body :is(.app-main, .monday-main) :is(a, button, input, select, textarea):focus-visible,
body :is(.app-sidebar, .mobile-nav) a:focus-visible { outline: 3px solid #74aaff !important; outline-offset: 2px !important; }

/* The same icon drawing, scale, and navigation states on every product page. */
.bs-icon { display: block; width: 21px; height: 21px; flex: none; fill: none !important; stroke: currentColor; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
body .app-sidebar { background: var(--bs-surface) !important; border-right: 1px solid var(--bs-line-soft) !important; }
body .app-sidebar .nav-link { border-radius: var(--bs-radius-control) !important; }
body .app-sidebar .nav-link.active { background: var(--bs-blue-soft) !important; color: var(--bs-blue) !important; box-shadow: inset 3px 0 #3e98ff !important; }
body .app-sidebar .nav-link.active :is(span, svg),
body .app-sidebar .nav-link:hover :is(span, svg) { color: var(--bs-blue) !important; stroke: currentColor !important; }
body[class] .app-sidebar .nav-link.active svg.bs-icon { color: var(--bs-blue) !important; stroke: var(--bs-blue) !important; }
body .app-sidebar .nav-icon svg { width: 21px !important; height: 21px !important; fill: none !important; stroke-width: 1.9 !important; }
body[class] .app-sidebar .nav-icon svg.bs-icon { stroke-width: 1.9 !important; }
body .buxton-mobile-strip { background: var(--bs-surface); border-bottom: 1px solid var(--bs-line-soft); }
@media (max-width: 920px) {
  body .mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; border-color: var(--bs-line) !important; }
  body[class] .mobile-nav a.active { background: var(--bs-blue-soft) !important; color: var(--bs-blue) !important; }
  body[class] .mobile-nav a.active svg.bs-icon { color: var(--bs-blue) !important; stroke: var(--bs-blue) !important; }
  body .mobile-nav a:hover { color: var(--bs-blue) !important; }
  body .mobile-nav svg { width: 21px !important; height: 21px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.9 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
  body[class] .mobile-nav svg.bs-icon { stroke-width: 1.9 !important; }
}
@media (max-width: 360px) {
  body .mobile-nav { left: 6px !important; right: 6px !important; gap: 0 !important; padding: 5px !important; }
  body[class] .mobile-nav a { min-width: 0 !important; padding-inline: 1px !important; font-size: 9px !important; letter-spacing: -.025em !important; }
}

/* Reusable pieces for new screens; existing workflow layouts remain untouched. */
.bs-card { min-width: 0; padding: var(--bs-space-5); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-card); background: var(--bs-surface); box-shadow: var(--bs-shadow-card); }
.bs-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--bs-space-2); min-height: 42px; padding: 8px 14px; border: 1px solid var(--bs-line); border-radius: var(--bs-radius-control); background: #fff; color: var(--bs-text); font: 700 13px/1.35 var(--bs-font); text-decoration: none; cursor: pointer; }
.bs-button:hover { border-color: #88b4fa; background: #f6faff; }
.bs-button-primary { border-color: var(--bs-blue); background: var(--bs-blue); color: #fff; }
.bs-button-primary:hover { border-color: var(--bs-blue-hover); background: var(--bs-blue-hover); color: #fff; }
.bs-button-danger { color: #cd2950; }
.bs-button .bs-icon { width: 18px; height: 18px; }
.bs-field { display: grid; gap: var(--bs-space-2); min-width: 0; }
.bs-field label { color: var(--bs-text); font-size: 13px; font-weight: 700; }
.bs-field :is(input, select, textarea) { width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid var(--bs-line); border-radius: var(--bs-radius-control); background: #fff; color: var(--bs-ink); font: 14px/1.45 var(--bs-font); }
.bs-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; color: var(--bs-text); font-size: 12px; font-weight: 700; }
.bs-status[data-status="signed"] { background: var(--bs-green-soft); color: #087c60; }
.bs-status[data-status="pending"] { background: var(--bs-amber-soft); color: #805300; }
.bs-status[data-status="issue"] { background: var(--bs-red-soft); color: #b32a4b; }
.bs-status[data-status="expired"] { background: var(--bs-gray-soft); color: #546882; }

/* Help retains its compact guide layout while adopting dashboard surfaces and states. */
body.page-support-redesign .support-search-card,
body.page-support-redesign .support-guide,
body.page-support-redesign .support-contact-card { border-color: var(--bs-line); border-radius: var(--bs-radius-card); box-shadow: var(--bs-shadow-card); }
body.page-support-redesign .support-guide-copy strong,
body.page-support-redesign .support-contact-card h2 { color: var(--bs-ink); }
body.page-support-redesign .support-guide-copy > span,
body.page-support-redesign .support-contact-card p { color: var(--bs-muted); }
body.page-support-redesign .support-guide-action,
body.page-support-redesign .support-contact-card a { color: var(--bs-blue); }
body.page-support-redesign .support-contact-card a { background: var(--bs-blue); color: #fff; }
body.page-support-redesign .support-contact-card a:hover { background: var(--bs-blue-hover); }
body.page-support-redesign .support-guide-icon.blue { background: var(--bs-blue-soft); color: var(--bs-blue); }
body.page-support-redesign .support-guide-icon.green { background: var(--bs-green-soft); color: #087c60; }
body.page-support-redesign .support-guide-icon.orange { background: var(--bs-amber-soft); color: #805300; }
body.page-support-redesign .support-guide-icon.red { background: var(--bs-red-soft); color: #b32a4b; }
body.page-support-redesign .support-guide-icon.purple,
body.page-support-redesign .support-guide-icon.navy { background: var(--bs-gray-soft); color: #3f5b78; }