/* DealTeam shared theme (Target staff app and Target website pages), matched to Diligence's look (Quinn approved, Oct 18 2026).
   Values come from the Diligence pages on the DEV site (brand sheet: build/branding/diligence/brand_sheet.md): Material blue
   #1976d2 / #1565c0, grey #212121 text on white, #e0e0e0 borders, Roboto, 4px spacing unit, 8px corners, 48px header.
   Every text colour pair below meets WCAG AA (4.5:1) and every control border or focus ring meets 3:1; the numbers are in the comments and
   are checked by tests/website.test.mjs. Where Diligence's own value falls short of AA, a darker shade of the same hue is used (noted).
   Roboto is self-hosted next to this file (roboto-*.woff2, Apache License 2.0, notice in roboto-license.txt). Nothing is loaded from
   another host, so the pages' Content-Security-Policy (default-src 'self') stays as it is. */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url("roboto-300.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("roboto-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("roboto-700.woff2") format("woff2"); }

:root {
  /* Brand */
  --dt-brand: #1976d2;          /* primary buttons, selected chips (Diligence --primary); white text on it 4.60:1 */
  --dt-brand-hover: #1565c0;    /* primary button hover (Diligence's darker blue) */
  --dt-brand-ink: #ffffff;      /* text on brand */
  --dt-accent: #1565c0;         /* links and selected text: 5.75:1 on white, 5.51:1 on --dt-bg, 5.03:1 on --dt-accent-soft
                                   (Diligence links use #1976d2, which is 4.41:1 on #fafafa, so the darker blue is used for text) */
  --dt-accent-soft: #e3f2fd;    /* info banner, selected rows (Material blue 50) */
  --dt-secondary: #f57c00;      /* Diligence's orange: decoration only (2.7:1 on white), never text or the only sign of state */
  --dt-mark: #4a95cf;           /* the Uplift hexagon (logo.svg): 3.24:1 on white, graphic only */

  /* Neutrals */
  --dt-bg: #fafafa;             /* page (Diligence sidebar / canvas) */
  --dt-surface: #ffffff;        /* cards, header, tables (Diligence --card) */
  --dt-surface-alt: #f5f5f5;    /* table header row */
  --dt-border: #e0e0e0;         /* dividers and card edges (Diligence --border); decoration, not a control's only edge */
  --dt-overlay: rgba(33, 33, 33, .45);           /* behind a pop-up (Smart import): decoration only, never text */
  --dt-shadow-dialog: 0 12px 40px rgba(0, 0, 0, .25);   /* a pop-up's shadow: decoration only */
  --dt-control-border: #8a8a8a; /* input and select edges: 3.45:1 on white (Diligence's #e0e0e0 is 1.3:1, below the 3:1 for controls) */
  --dt-ink: #212121;            /* text: 16.1:1 on white (Diligence --foreground) */
  --dt-ink-muted: #616161;      /* secondary text: 6.19:1 on white, 5.68:1 on --dt-surface-alt, 5.42:1 on --dt-accent-soft
                                   (Diligence's #757575 is 4.23:1 on #f5f5f5, so Material grey 700 is used) */
  --dt-focus: #1976d2;          /* keyboard focus ring: 4.60:1 on white */

  /* Signals (Material 800 shades; each 4.5:1 or more on white and on its own banner background) */
  --dt-ok: #2e7d32;             /* 5.13:1 on white, 4.56:1 on --dt-ok-soft */
  --dt-ok-soft: #e8f5e9;
  --dt-warn: #a85a00;           /* 5.09:1 on white */
  --dt-bad: #c62828;            /* 5.62:1 on white, 4.92:1 on --dt-bad-soft */
  --dt-bad-soft: #ffebee;

  /* Type (Diligence: Roboto, body text 14px, line height 1.5) */
  --dt-font: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --dt-size-xs: 12px;
  --dt-size-sm: 13px;
  --dt-size: 14px;
  --dt-size-lg: 18px;
  --dt-size-xl: 20px;
  --dt-weight-medium: 500;      /* headings, buttons, table heads (Roboto Medium; there is no 600 file) */
  --dt-weight-bold: 700;

  /* Spacing and shape (Diligence: 4px unit, 8px radius, 6px on controls, 48px header) */
  --dt-space-1: 4px;
  --dt-space-2: 8px;
  --dt-space-3: 12px;
  --dt-space-4: 16px;
  --dt-space-5: 24px;
  --dt-radius: 8px;
  --dt-radius-sm: 6px;
  --dt-header-h: 48px;

  /* Uplift Partners brand (design pass, Oct 22 2026). Read from https://www.upliftpartners.com/ stylesheets (Elementor globals):
     --e-global-color-primary #1D2F55 (navy), --e-global-color-secondary #8C7051 (bronze), --e-global-color-accent #415A4C (green),
     --e-global-color-text #2E2E2E, --divider-color #293D68, and #E9DED2 (light bronze panel). The site's Manrope/Hind fonts are
     loaded from another host, so they are not used here: Roboto stays self-hosted and the CSP is unchanged.
     Contrast (checked by tests/website.test.mjs, "design tokens" tests): white on navy 13.21:1, white on navy-2 10.71:1, header-muted on navy 8.77:1,
     bronze-ink on white 5.80:1, green on white 7.52:1, navy on navy-soft 11.67:1, navy on bronze-soft 9.96:1, bronze-light on navy 7.72:1.
     Later design branches use these as var(--upt-..., var(--dt-...)) so each still works without this block. */
  --upt-navy: #1d2f55;          /* header, nav, headings, primary buttons */
  --upt-navy-2: #293d68;        /* hover on navy, the site's divider colour */
  --upt-navy-soft: #eef1f7;     /* selected rows, active filter chips */
  --upt-bronze: #8c7051;        /* the site's secondary: rules and underlines (4.61:1 on white; not used for small text) */
  --upt-bronze-ink: #7a6145;    /* bronze for text: 5.80:1 on white */
  --upt-bronze-light: #d8c3a5;  /* active-tab underline on navy: 7.72:1 */
  --upt-bronze-soft: #e9ded2;   /* warm panel tint */
  --upt-green: #415a4c;         /* the site's accent: positive highlights */
  --upt-header-ink: #ffffff;
  --upt-header-muted: #c9d3e6;  /* secondary text on navy */
  --upt-brand: #1d2f55;
  --upt-brand-hover: #293d68;
  --upt-shadow-1: 0 1px 2px rgba(29, 47, 85, .06), 0 1px 3px rgba(29, 47, 85, .08);
  --upt-shadow-2: 0 4px 12px rgba(29, 47, 85, .12);
  --upt-radius-lg: 12px;
  --upt-ease: 120ms ease-out;
  --upt-heading-tracking: -.01em;
  /* Design pass 3 (Oct 30 2026): a cooler page, softer card edges and soft pill tints. Each ink is 4.5:1 or more on its tint
     (blue 7.9:1, green 6.0:1, amber 6.0:1, grey 8.0:1, purple 7.6:1, red 6.5:1). */
  --upt-page: #eceff4;           /* Oct 31 (Quinn): a touch darker, so the shaded grid rows read lighter than the page */
  --upt-row-alt: #f5f7fa;        /* between white rows and the page */
  /* Nov 2 (Quinn): the ONE shade for alternating records (staff grid and lists, client grid): half the old row shade (50% toward the
     white card), so records read lighter. #fafbfd is the fallback; browsers with color-mix get the exact 50% mix below. */
  --upt-record-shade: #fafbfd;
  /* Oct 31: the Data Room button's shades, light to dark navy (navy text on 1-2: 11.3:1 / 7.6:1; white on 3-4: 5.9:1 / 10.7:1) */
  --upt-heat-1: #dfe6f3;
  --upt-heat-2: #b9c7e2;
  --upt-heat-3: #4a6297;
  /* Nov 5 (Quinn): the Data Room button's greens, light to dark (green ink on 1-2: 6.0:1 / 6.2:1; white on 3-4: 5.0:1 / 7.8:1) */
  --upt-room-1: #e6f3eb; --upt-room-2: #bfe3cc; --upt-room-ink-2: #1d5634; --upt-room-3: #2f7d4f; --upt-room-4: #1b5e37;
  --upt-heat-4: #293d68;      /* every other table row (Quinn, Oct 30); text stays 15.0:1 / muted 5.6:1 on it */
  --upt-line: #e3e7ee;
  --upt-line-strong: #cfd6e1;
  --upt-tint-blue: #e8effa;   --upt-ink-blue: #1d4a8f;
  --upt-tint-green: #e6f3eb;  --upt-ink-green: #23663f;
  --upt-tint-amber: #fbf0e1;  --upt-ink-amber: #874600;
  --upt-tint-grey: #eef0f3;   --upt-ink-grey: #444a53;
  --upt-tint-purple: #efe9f8; --upt-ink-purple: #573a8a;
  --upt-tint-red: #fbe9e9;    --upt-ink-red: #a11d1d;
}
@supports (color: color-mix(in srgb, red 50%, white)) { :root { --upt-record-shade: color-mix(in srgb, var(--upt-row-alt) 50%, var(--dt-surface, #fff)); } }

* { box-sizing: border-box; }
body { margin: 0; font: var(--dt-size)/1.5 var(--dt-font); color: var(--dt-ink); background: var(--dt-bg);
  -webkit-font-smoothing: antialiased; }
a { color: var(--dt-accent); }
:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }

/* Header shared by every DealTeam app. Design pass (Oct 22 2026): Uplift Partners navy bar (from upliftpartners.com) with a bronze rule,
   white app name; the blue Uplift mark is 4.08:1 on the navy. Each colour falls back to the Diligence value if the brand tokens are absent. */
.dt-header { display: flex; align-items: center; gap: var(--dt-space-3); height: var(--dt-header-h);
  padding: 0 var(--dt-space-5); background: var(--upt-navy, var(--dt-surface)); color: var(--upt-header-ink, var(--dt-ink));
  border-bottom: 3px solid var(--upt-bronze, var(--dt-border)); position: sticky; top: 0; z-index: 50; }
.dt-header .dt-logo { height: 30px; width: auto; display: block; }
.dt-header .dt-app { font-weight: var(--dt-weight-medium); font-size: var(--dt-size-lg); letter-spacing: .02em;
  padding-left: var(--dt-space-3); border-left: 1px solid var(--upt-navy-2, var(--dt-border)); }
.dt-header .dt-spacer { flex: 1; }
.dt-header .dt-me { font-size: var(--dt-size-sm); color: var(--upt-header-muted, var(--dt-ink-muted)); }
.dt-header a, .dt-header button.dt-link { color: var(--upt-header-ink, var(--dt-accent)); text-decoration: none; padding: 4px 8px; border-radius: var(--dt-radius-sm); }
.dt-header a:hover, .dt-header button.dt-link:hover { background: var(--upt-navy-2, var(--dt-accent-soft)); text-decoration: underline; }
.dt-header :focus-visible { outline-color: var(--upt-header-ink, var(--dt-focus)); }

/* Buttons, inputs, tags. Design pass (Oct 22 2026): Uplift navy primary buttons (13.2:1 white on navy), 32px controls,
   clear hover / focus / disabled states. Falls back to the Diligence blue if the brand tokens are absent. */
.dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--dt-space-1); border: 1px solid var(--dt-control-border);
  background: var(--dt-surface); color: var(--dt-ink); border-radius: var(--dt-radius-sm); padding: 6px 14px; min-height: 32px;
  font: inherit; font-size: var(--dt-size-sm); font-weight: var(--dt-weight-medium); line-height: 1.3; cursor: pointer; text-decoration: none;
  transition: background-color var(--upt-ease, 0s), border-color var(--upt-ease, 0s), color var(--upt-ease, 0s); }
.dt-btn:hover { border-color: var(--upt-navy, var(--dt-brand)); color: var(--upt-navy, var(--dt-accent)); background: var(--upt-navy-soft, var(--dt-surface)); }
.dt-btn.primary { background: var(--upt-brand, var(--dt-brand)); border-color: var(--upt-brand, var(--dt-brand)); color: var(--dt-brand-ink); }
.dt-btn.primary:hover { background: var(--upt-brand-hover, var(--dt-brand-hover)); border-color: var(--upt-brand-hover, var(--dt-brand-hover)); color: var(--dt-brand-ink); }
.dt-btn.small { padding: 2px 10px; min-height: 26px; font-size: var(--dt-size-xs); }
.dt-btn:disabled, .dt-btn:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--dt-surface); border-color: var(--dt-control-border); color: var(--dt-ink); }
.dt-btn.primary:disabled, .dt-btn.primary:disabled:hover { background: var(--upt-brand, var(--dt-brand)); color: var(--dt-brand-ink); }
button.dt-link { background: none; border: 0; padding: 0; font: inherit; color: var(--dt-accent); cursor: pointer; text-decoration: underline; }
.dt-input, .dt-select { border: 1px solid var(--dt-control-border); border-radius: var(--dt-radius-sm); padding: 6px 10px; min-height: 32px;
  font: inherit; background: var(--dt-surface); color: var(--dt-ink); transition: border-color var(--upt-ease, 0s), box-shadow var(--upt-ease, 0s); }
.dt-input:hover, .dt-select:hover { border-color: var(--dt-ink-muted); }
.dt-input:focus, .dt-select:focus { border-color: var(--dt-focus); box-shadow: 0 0 0 3px var(--dt-accent-soft); outline: none; }
.dt-input:focus-visible, .dt-select:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 1px; }
.dt-input::placeholder { color: var(--dt-ink-muted); }
.dt-input:disabled, .dt-select:disabled { background: var(--dt-surface-alt); color: var(--dt-ink-muted); cursor: not-allowed; }
textarea.dt-input { min-height: 72px; line-height: 1.5; }
.dt-tag { display: inline-block; border: 1px solid var(--dt-border); border-radius: 999px; padding: 0 8px;
  font-size: var(--dt-size-xs); background: var(--dt-surface); color: var(--dt-ink); white-space: nowrap; }
.dt-tag.on { background: var(--upt-navy, var(--dt-brand)); color: var(--dt-brand-ink); border-color: var(--upt-navy, var(--dt-brand)); }
button.dt-tag { font: inherit; font-size: var(--dt-size-xs); cursor: pointer; }
/* Pop-ups (Smart import, compose, Campaigns): restyled here, not in staff.css or compose*.js, so the email work can carry on untouched.
   Selectors are one step more specific than staff.css so these win without editing those rules. */
dialog.si-dialog, dialog.em-dialog { border: 0; border-top: 4px solid var(--upt-navy, var(--dt-brand)); border-radius: var(--upt-radius-lg, var(--dt-radius)); box-shadow: var(--dt-shadow-dialog); }
.si-dialog .si-head, .em-dialog .em-head { padding-top: var(--dt-space-4); padding-bottom: var(--dt-space-3); border-bottom: 1px solid var(--dt-border); }
.si-dialog .si-foot, .em-dialog .em-foot { background: var(--dt-surface-alt); justify-content: flex-end; }
.em-dialog .em-tab.on { box-shadow: inset 0 3px 0 var(--upt-navy, var(--dt-brand)); }
.si-dialog .si-drop:hover { background: var(--upt-navy-soft, var(--dt-accent-soft)); }
.dt-muted { color: var(--dt-ink-muted); }
.dt-box { background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: var(--dt-radius); padding: var(--dt-space-4); }
/* Design pass 2 (Oct 22 2026): empty and error states. Only elements the JS marks with data-state="empty" or data-state="error" are styled,
   so a normal hint or a loading line never looks like an error. Text colours are the theme's checked AA pairs (--dt-bad on --dt-bad-soft 4.92:1). */
[data-state="empty"] { padding: var(--dt-space-4); border: 1px dashed var(--dt-border); border-radius: var(--dt-radius-sm); background: var(--dt-bg);
  color: var(--dt-ink-muted); text-align: center; font-style: italic; }
[data-state="error"] { display: flex; align-items: baseline; gap: var(--dt-space-2); padding: var(--dt-space-2) var(--dt-space-3);
  border: 1px solid var(--dt-bad); border-left-width: 3px; border-radius: var(--dt-radius-sm); background: var(--dt-bad-soft); color: var(--dt-bad); }
[data-state="error"]::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dt-bad); color: var(--dt-surface); font-size: var(--dt-size-xs); font-weight: var(--dt-weight-bold); font-style: normal; }
.dt-hint.warn, .dt-tag.warn { font-weight: var(--dt-weight-medium); }

/* Tables. Design pass (Oct 22 2026): sticky header row, zebra-free rows with a soft navy hover, a centred empty-state row. */
.dt-table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--dt-surface); }
.dt-table th, .dt-table td { border-bottom: 1px solid var(--dt-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.dt-table th { background: var(--dt-surface-alt); font-size: var(--dt-size-xs); text-transform: uppercase; letter-spacing: .4px;
  color: var(--dt-ink-muted); font-weight: var(--dt-weight-medium); white-space: nowrap; position: sticky; top: 0; z-index: 1;
  border-bottom-color: var(--dt-control-border); }
.dt-table tbody tr:last-child td { border-bottom: 0; }
.dt-table tr:hover td { background: var(--upt-navy-soft, var(--dt-bg)); }
.dt-table td[colspan] { text-align: center; padding: var(--dt-space-5) var(--dt-space-4); color: var(--dt-ink-muted); font-style: italic; }
.dt-table tr:hover td[colspan] { background: var(--dt-surface); }

/* Messages */
.dt-banner { padding: 8px var(--dt-space-4); font-size: var(--dt-size-sm); border-bottom: 1px solid var(--dt-border); color: var(--dt-ink); }
.dt-banner.info { background: var(--dt-accent-soft); }
.dt-banner.bad { background: var(--dt-bad-soft); color: var(--dt-bad); }
.dt-banner.ok { background: var(--dt-ok-soft); color: var(--dt-ok); }

/* Design pass (Oct 22 2026): shared headings, cards and states. Visual only: no class names or markup change. */
h1, h2, h3 { color: var(--upt-navy, var(--dt-ink)); letter-spacing: var(--upt-heading-tracking, 0); }
.dt-box { box-shadow: var(--upt-shadow-1, none); }
.dt-banner { display: flex; align-items: center; gap: var(--dt-space-2); }
.dt-banner.info { border-left: 3px solid var(--dt-accent); }
.dt-banner.bad { border-left: 3px solid var(--dt-bad); font-weight: var(--dt-weight-medium); }
.dt-banner.ok { border-left: 3px solid var(--dt-ok); }
/* Loading: the busy page gets a thin moving bar under the header; only an element marked data-state="loading" (set by the JS while it loads) gets a small spinner, never a final message */
body.busy::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, transparent, var(--dt-brand), transparent); background-size: 50% 100%; background-repeat: no-repeat;
  animation: dt-sweep 1.1s linear infinite; }
@keyframes dt-sweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
[data-state="loading"]::before { content: ""; display: inline-block; width: 12px; height: 12px;
  margin-right: var(--dt-space-2); vertical-align: -1px; border: 2px solid var(--dt-border); border-top-color: var(--dt-brand); border-radius: 50%;
  animation: dt-spin .8s linear infinite; }
@keyframes dt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.busy::before, [data-state="loading"]::before { animation: none; } }

/* Formatted Description (Nov 9 2026; theme/richdesc.js richNodes, staff app and website alike): fonts and sizes as classes (the same
   faces and sizes as the editor), colors set through the element's style object. */
.rd .rd-p { margin: 0; }
.rd .rd-list { margin: 0; padding-left: 1.6em; }
.rd a { color: #0563c1; text-decoration: underline; }
.rd .rd-align-center { text-align: center; } .rd .rd-align-right { text-align: right; } .rd .rd-align-justify { text-align: justify; }
.rd .rd-indent-1 { margin-left: 3em; } .rd .rd-indent-2 { margin-left: 6em; } .rd .rd-indent-3 { margin-left: 9em; } .rd .rd-indent-4 { margin-left: 12em; }
.rd .rd-indent-5 { margin-left: 15em; } .rd .rd-indent-6 { margin-left: 18em; } .rd .rd-indent-7 { margin-left: 21em; } .rd .rd-indent-8 { margin-left: 24em; }
.rd-font-calibri { font-family: Calibri, Arial, sans-serif; } .rd-font-arial { font-family: Arial, Helvetica, sans-serif; } .rd-font-georgia { font-family: Georgia, serif; }
.rd-font-times { font-family: "Times New Roman", Times, serif; } .rd-font-verdana { font-family: Verdana, Geneva, sans-serif; } .rd-font-courier { font-family: "Courier New", Courier, monospace; }
.rd-size-small { font-size: 0.75em; } .rd-size-large { font-size: 1.5em; } .rd-size-huge { font-size: 2.5em; }