/* Target staff app layout. Colors, fonts and sizes come from ../theme/theme.css. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.small { font-size: var(--dt-size-xs); }
.grow { flex: 1; }
body.busy { cursor: progress; }
body.busy main { opacity: .75; }

main { padding: var(--dt-space-4); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); align-items: center; margin-bottom: var(--dt-space-3);
  padding: var(--dt-space-2) var(--dt-space-3); background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: var(--dt-radius); }
#project { min-width: 240px; font-weight: var(--dt-weight-medium); }
#search { width: 300px; max-width: 100%; }

/* Phase bar = the main navigation of the list. Design pass (Oct 22 2026): tab-like segments, navy selected tab with a bronze underline. */
.phasebar { display: flex; border: 1px solid var(--dt-border); border-radius: var(--dt-radius); overflow: hidden; background: var(--dt-surface); margin-bottom: var(--dt-space-2); }
.phasebar button { flex: 1; border: 0; border-right: 1px solid var(--dt-border); background: none; text-align: left; padding: 8px 12px;
  font: inherit; font-size: var(--dt-size-sm); color: var(--dt-ink-muted); cursor: pointer; box-shadow: inset 0 -3px 0 transparent; }
.phasebar button:last-child { border-right: 0; }
.phasebar button:hover { background: var(--upt-navy-soft, var(--dt-bg)); color: var(--dt-ink); }
.phasebar button b { display: block; font-size: var(--dt-size-lg); color: var(--dt-ink); font-weight: var(--dt-weight-medium); }
.phasebar button.on { background: var(--upt-navy, var(--dt-brand)); color: var(--upt-header-muted, var(--dt-brand-ink)); box-shadow: inset 0 -3px 0 var(--upt-bronze-light, var(--dt-brand)); }
.phasebar button.on b { color: var(--upt-header-ink, var(--dt-brand-ink)); }
.statuschips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--dt-space-2); min-height: 4px; }

.listwrap { display: flex; gap: var(--dt-space-3); align-items: flex-start; }
/* Filters and list. Design pass (Oct 22 2026): a card-style filter rail that stays in view, and a framed results table. */
.filters { width: 240px; flex: none; background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: var(--dt-radius);
  padding: var(--dt-space-3); position: sticky; top: calc(var(--dt-header-h) + var(--dt-space-2)); max-height: calc(100vh - var(--dt-header-h) - var(--dt-space-4)); overflow-y: auto; }
.filters.collapsed { width: 40px; padding: var(--dt-space-2) 4px; }
.filters.collapsed #filterbody, .filters.collapsed .ftitle { display: none; }
.fhead { display: flex; justify-content: space-between; align-items: center; font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink)); }
.fgroup { border: 0; border-top: 1px solid var(--dt-border); margin: var(--dt-space-2) 0 0; padding: var(--dt-space-2) 0 0; }
.fsec-head { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--dt-size-xs); font-weight: var(--dt-weight-medium); color: var(--dt-ink-muted); padding: 0 0 2px; text-transform: uppercase; letter-spacing: .4px; text-align: left; }
.fsec-head:hover { color: var(--upt-navy, var(--dt-ink)); }
.fsec-head:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; border-radius: 4px; }
.fsec-arrow { display: inline-block; font-size: var(--dt-size-sm); color: var(--dt-ink); transition: transform .15s ease; }
.fgroup.closed .fsec-arrow { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .fsec-arrow { transition: none; } }
.fsec-label { display: inline-flex; align-items: baseline; gap: 6px; }
.fsec-picked { text-transform: none; letter-spacing: 0; color: var(--dt-ink); font-weight: var(--dt-weight-medium); }
.fsec-list[hidden] { display: none; }
/* Oct 26 Target List filters: Min / Max range boxes, their inline error, "Show all (N)" and the contains box */
.fsec-range { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.fsec-num { width: 0; flex: 1 1 0; min-width: 0; font: inherit; padding: 2px 6px; border: 1px solid var(--dt-border); border-radius: 4px; }
.fsec-num[aria-invalid="true"] { border-color: var(--dt-bad); }
.fsec-err { color: var(--dt-bad); font-size: var(--dt-size-sm); margin: 2px 0 4px; }
.fsec-contains { width: 100%; box-sizing: border-box; font: inherit; padding: 2px 6px; margin: 4px 0; border: 1px solid var(--dt-border); border-radius: 4px; }
.fsec-more { display: block; margin: 4px 0 0; }
/* Nov 6 (Quinn): rearrange the filter headings (filterorder.js): a drag handle and Up / Down arrows on each heading's row */
.fgroup.movable { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 4px; }
.fgroup.movable > .fsec-head { grid-column: 1; grid-row: 1; }
.fgroup.movable > .fsec-tools { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 1px; }
.fgroup.movable > .fsec-list { grid-column: 1 / -1; grid-row: 2; }
.fsec-grip { cursor: grab; color: var(--dt-ink-muted); padding: 0 3px; font-size: var(--dt-size-sm); user-select: none; }
.fsec-mv { background: none; border: 0; cursor: pointer; color: var(--dt-ink-muted); font-size: 9px; line-height: 1; padding: 2px 3px; border-radius: 3px; }
.fsec-mv:hover:not([disabled]) { color: var(--upt-navy, var(--dt-ink)); background: var(--upt-navy-soft, var(--dt-bg)); }
.fsec-mv:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 1px; }
.fsec-mv[disabled] { opacity: .3; cursor: default; }
.fgroup.dragging { opacity: .5; }
.fgroup.drop-before, .fsec-droptail.drop-before { box-shadow: 0 -2px 0 var(--dt-focus); }
.fsec-droptail { min-height: 10px; }
.fsec-reset { margin-left: 6px; }
.fgroup label { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: var(--dt-size-sm); padding: 2px 4px; margin: 0 -4px; border-radius: 4px; cursor: pointer; }
.fgroup label:hover { background: var(--upt-navy-soft, var(--dt-bg)); }
.fgroup label:has(input:checked) { background: var(--upt-navy-soft, var(--dt-accent-soft)); font-weight: var(--dt-weight-medium); }
.fgroup .c { color: var(--dt-ink-muted); font-size: var(--dt-size-xs); font-variant-numeric: tabular-nums; }

.main { flex: 1; min-width: 0; }
.tablewrap { overflow-x: auto; border: 1px solid var(--dt-border); border-radius: var(--dt-radius); background: var(--dt-surface); box-shadow: var(--upt-shadow-1, none); }
.tablewrap .dt-table td { font-variant-numeric: tabular-nums; }
.bulk { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); align-items: center; background: var(--upt-navy-soft, var(--dt-accent-soft));
  border: 1px solid var(--dt-border); border-left: 3px solid var(--upt-navy, var(--dt-brand)); border-radius: var(--dt-radius); padding: var(--dt-space-2) var(--dt-space-3); margin-bottom: var(--dt-space-2); }
.bulk[hidden] { display: none; }
tr.sel td { background: var(--upt-navy-soft, var(--dt-accent-soft)); }
.pager { display: flex; gap: var(--dt-space-2); align-items: center; margin-top: var(--dt-space-3); font-size: var(--dt-size-sm); }

.signin[hidden] { display: none; }
.signin { display: flex; justify-content: center; padding: 60px var(--dt-space-4); }
.signin .dt-box { max-width: 420px; }
.signin h1 { font-size: var(--dt-size-xl); margin: 0 0 var(--dt-space-2); }

@media (max-width: 760px) {
  .listwrap { flex-direction: column; align-items: stretch; }
  #project, #search { width: 100%; min-width: 0; }
  .filters { width: 100%; }
  .phasebar { flex-wrap: wrap; }
  .phasebar button { flex: 1 1 33%; border-bottom: 1px solid var(--dt-border); }
}

/* Target Detail */
.detail { padding: var(--dt-space-4); }
.detail[hidden] { display: none; }
.detail .dtitle { font-size: var(--dt-size-xl); margin: 0 var(--dt-space-2); }
.detail .dt-box { margin-bottom: var(--dt-space-3); }
.detail h2 { font-size: var(--dt-size-lg); margin: 0 0 var(--dt-space-2); }
.detail .big { font-size: var(--dt-size-lg); font-weight: var(--dt-weight-medium); margin-bottom: 2px; }
.detail .row { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); align-items: center; margin-top: var(--dt-space-2); }
.detail .full { width: 100%; display: block; }
.detail .kv td { padding: 3px 8px 3px 0; vertical-align: top; }
.detail .desc { margin: var(--dt-space-2) 0 0; }
.detail .feed .item { border-top: 1px solid var(--dt-border); padding: 6px 0; }
.detail .feed .item:first-child { border-top: 0; }
.dt-tag.warn { border-color: var(--dt-warn); color: var(--dt-warn); margin-left: 4px; }
.dgrid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--dt-space-3); align-items: start; }
@media (max-width: 860px) { .dgrid2 { grid-template-columns: 1fr; } }
button.dt-link.name { color: var(--dt-ink); text-decoration: none; text-align: left; }
button.dt-link.name:hover b { text-decoration: underline; }
.dgrid2 > .col { min-width: 0; }
/* Target tabs (Oct 26): six tabs under the header. The strip wraps onto more lines in a narrow drawer (never scrolls sideways or clips);
   panels grow with their content (no fixed heights, no inner scroll). Inactive panels carry [hidden]. */
.dtabs { display: flex; flex-wrap: wrap; gap: var(--dt-space-1); margin: var(--dt-space-3) 0; border-bottom: 1px solid var(--dt-border); }
.dtab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.dtab:hover { background: var(--dt-surface-alt); }
.dtab.on, .dtab[aria-selected="true"] { border-bottom-color: var(--dt-accent); font-weight: var(--dt-weight-bold); }
.dtab:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
.dpanel:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
.dpanel[hidden] { display: none; }
.dpanel > .dt-box + .dt-box { margin-top: var(--dt-space-3); }
.dt-stages { list-style: none; margin: 0; padding: 0; }
.dt-stages li { padding: 4px 0; }
.detail select, .detail input { max-width: 100%; }
.detail .dt-table { display: block; overflow-x: auto; }

/* Access requests */
#requests .feed .item .row { margin-top: 4px; }
#requests .dt-input { min-width: 260px; flex: 1 1 260px; }
/* Design pass 2 (Oct 22 2026): Access requests, Unassigned versions and My profile get the same framed page as Settings, with a clear title row.
   Visual only; brand colours fall back to the theme's own values. */
#requests { max-width: 1120px; margin: var(--dt-space-4) auto; }   /* its parts are already cards: centre them, no extra frame */
#unassigned, #profile { max-width: 1120px; margin: var(--dt-space-4) auto; padding: var(--dt-space-5); background: var(--dt-surface);
  border: 1px solid var(--dt-border); border-radius: var(--dt-radius); box-shadow: var(--upt-shadow-1, none); }
#unassigned .dt-detail-head, #profile .dt-detail-head { display: flex; align-items: center; gap: var(--dt-space-3);
  padding-bottom: var(--dt-space-3); margin-bottom: var(--dt-space-3); border-bottom: 2px solid var(--upt-bronze, var(--dt-border)); }
#requests h2, #unassigned h2, #profile h2 { color: var(--upt-navy, var(--dt-ink)); }
#requests .feed .item { padding: var(--dt-space-3) 0; }
#requests .feed .item:hover { background: var(--upt-navy-soft, var(--dt-bg)); }
@media (max-width: 760px) { #unassigned, #profile { margin: 0; padding: var(--dt-space-3); border-radius: 0; border-left: 0; border-right: 0; } }
.toolbar #reqbtn[hidden] { display: none; }
/* PR 485 review (2e64da4) must-fix: theme.css .dt-btn { display: inline-flex } beats the hidden attribute. #setbtn showed for non-admin
   staff; #unbtn and #bulk-remove had the same gap. Explicit rules, plus a staff-wide catch-all for any other .dt-btn given [hidden]. */
.toolbar #setbtn[hidden], #bulk-remove[hidden] { display: none; }   /* 446: #unbtn is gone */
.dt-btn[hidden] { display: none; }
/* D9 PR 3 settings */
.dt-setting { border-bottom: 1px solid var(--dt-border); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dt-setting-label { font-weight: var(--dt-weight-medium); min-width: 280px; }
/* Email wording toolbar (Email PR 3, #439: div.row.dt-wording-tools[role=toolbar] > button.dt-btn.small × 2 + span.dt-hint). Design, Oct 22 2026:
   one joined button group on its own line above the text box, clear hover / focus / pressed / disabled states. CSS only; colours via --upt-* with theme fallbacks. */
.dt-wording-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0; width: 100%; margin: var(--dt-space-1) 0 0; padding: 0; }   /* own line above the text box */
.dt-wording-tools > .dt-btn { border-radius: 0; margin: 0; min-width: 56px; background: var(--dt-surface); position: relative; }
.dt-wording-tools > .dt-btn + .dt-btn { margin-left: -1px; }
.dt-wording-tools > .dt-btn:first-of-type { border-radius: var(--dt-radius-sm) 0 0 var(--dt-radius-sm); font-weight: var(--dt-weight-bold); }
.dt-wording-tools > .dt-btn:last-of-type { border-radius: 0 var(--dt-radius-sm) var(--dt-radius-sm) 0; text-decoration: underline; text-underline-offset: 2px; }
.dt-wording-tools > .dt-btn:hover { z-index: 1; border-color: var(--upt-navy, var(--dt-brand)); color: var(--upt-navy, var(--dt-accent)); background: var(--upt-navy-soft, var(--dt-accent-soft)); }
.dt-wording-tools > .dt-btn:focus-visible { z-index: 2; outline: 2px solid var(--dt-focus); outline-offset: 2px; }
.dt-wording-tools > .dt-btn:active, .dt-wording-tools > .dt-btn[aria-pressed="true"] { z-index: 1; background: var(--upt-navy, var(--dt-brand)); border-color: var(--upt-navy, var(--dt-brand)); color: var(--dt-brand-ink); }
.dt-wording-tools > .dt-btn:disabled, .dt-wording-tools > .dt-btn:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--dt-surface); border-color: var(--dt-control-border); color: var(--dt-ink); }
.dt-wording-tools > .dt-hint { width: auto; flex: 1; margin-left: var(--dt-space-3); font-size: var(--dt-size-xs); }
.dt-hint { color: var(--dt-ink-muted); font-size: var(--dt-size-sm); width: 100%; }
.dt-hint.warn { color: var(--dt-warn); }
.dt-ceiling { display: block; width: 100%; }
/* Design pass 2 (Oct 22 2026): Settings and NDA templates read as one framed page with clear sections, instead of a full-width list.
   Visual only; brand colours fall back to the theme's own values. */
#settings, #nda { max-width: 1120px; margin: var(--dt-space-4) auto; padding: var(--dt-space-5); background: var(--dt-surface);
  border: 1px solid var(--dt-border); border-radius: var(--dt-radius); box-shadow: var(--upt-shadow-1, none); }
#settings .dt-detail-head, #nda .dt-detail-head { display: flex; align-items: center; gap: var(--dt-space-3); padding-bottom: var(--dt-space-3);
  margin-bottom: var(--dt-space-3); border-bottom: 2px solid var(--upt-bronze, var(--dt-border)); }
#settings .dt-detail-head h2, #nda .dt-detail-head h2 { margin: 0; font-size: var(--dt-size-xl); color: var(--upt-navy, var(--dt-ink)); }
#settings > h3 { font-size: var(--dt-size-lg); font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink));
  margin: var(--dt-space-5) 0 var(--dt-space-1); padding-top: var(--dt-space-4); border-top: 1px solid var(--dt-border); }
#settings > h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
#settings > .dt-hint, #nda > .dt-hint { margin: 0 0 var(--dt-space-3); }
#settings .dt-setting, #nda .dt-setting { align-items: center; gap: var(--dt-space-2) var(--dt-space-3); padding: var(--dt-space-3) var(--dt-space-2);
  margin: 0 calc(-1 * var(--dt-space-2)); border-radius: var(--dt-radius-sm); }
#settings .dt-setting:hover, #nda .dt-setting:hover { background: var(--upt-navy-soft, var(--dt-bg)); }
#settings .dt-setting .dt-hint, #nda .dt-setting .dt-hint { font-size: var(--dt-size-xs); }
#settings .dt-setting-now { color: var(--dt-ink-muted); font-variant-numeric: tabular-nums; }
#settings .dt-setting .dt-input, #nda .dt-setting .dt-input { min-width: 0; }
#nda .dt-setting-label .dt-tag { margin-left: var(--dt-space-2); }
/* KD-5 / D6: the NDA templates (the retired #nda screen's list) sit on Settings > Kickoff documents, under the card's note. */
#settings [data-part="nda-templates"] { margin-top: var(--dt-space-4); padding-top: var(--dt-space-3); border-top: 1px solid var(--dt-border); }
#settings [data-part="nda-templates"] .dt-setting-label .dt-tag { margin-left: var(--dt-space-2); }
#settings .dt-table, #nda .dt-table { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); }
@media (max-width: 760px) { #settings, #nda { margin: 0; padding: var(--dt-space-3); border-radius: 0; border-left: 0; border-right: 0; } .dt-setting-label { min-width: 0; } }
/* F1 (Oct 20): Change status, Tier, Region and Type on one line; the Save button is 50% larger than the old small Save (2px 8px, xs). */
.detail .dt-edit-line { flex-wrap: wrap; }
.detail .dt-save-lg { padding: 3px 12px; font-size: calc(var(--dt-size-xs) * 1.5); }
/* Smart import pop-up (Oct 21): a dialog over the target list, five steps shown at the top */
.si-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--dt-border); border-radius: var(--dt-radius);
  background: var(--dt-surface); color: var(--dt-ink); box-shadow: var(--dt-shadow-dialog); }
.si-dialog[open] { display: flex; flex-direction: column; }
.si-dialog::backdrop { background: var(--dt-overlay); }
.si-dialog.busy .si-body { opacity: .6; }
.si-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--dt-space-3); padding: var(--dt-space-3) var(--dt-space-4) 0; }
.si-head h2 { font-size: var(--dt-size-xl); margin: 0; }
.si-beta { font-size: var(--dt-size-xs); vertical-align: middle; }
.si-sub { margin: 4px 0 0; max-width: 760px; }
.si-steps { display: flex; gap: var(--dt-space-2); list-style: none; margin: var(--dt-space-3) var(--dt-space-4) 0; padding: 0 0 var(--dt-space-2); border-bottom: 1px solid var(--dt-border); flex-wrap: wrap; }
.si-step { display: flex; align-items: center; gap: 6px; font-size: var(--dt-size-sm); color: var(--dt-ink-muted); padding-right: var(--dt-space-3); }
.si-step .si-dot { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; border: 1px solid var(--dt-control-border); font-size: var(--dt-size-xs); }
.si-step.on { color: var(--dt-ink); font-weight: var(--dt-weight-medium); }
.si-step.on .si-dot { background: var(--dt-brand); border-color: var(--dt-brand); color: var(--dt-brand-ink); }
.si-step.done .si-dot { background: var(--dt-accent-soft); border-color: var(--dt-accent); color: var(--dt-accent); }
.si-step.skip { text-decoration: line-through; opacity: .7; }
.si-error { margin: var(--dt-space-2) var(--dt-space-4) 0; padding: 8px 12px; border-radius: var(--dt-radius-sm); background: var(--dt-bad-soft); color: var(--dt-bad); font-size: var(--dt-size-sm); }
.si-error[hidden] { display: none; }
.si-body { padding: var(--dt-space-3) var(--dt-space-4); overflow: auto; flex: 1; min-height: 160px; }
.si-body h3 { font-size: var(--dt-size-md, 1rem); margin: var(--dt-space-2) 0; }
.si-foot { display: flex; gap: var(--dt-space-2); align-items: center; padding: var(--dt-space-3) var(--dt-space-4); border-top: 1px solid var(--dt-border); background: var(--dt-bg); }
.si-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--dt-control-border); border-radius: var(--dt-radius);
  padding: var(--dt-space-4); cursor: pointer; text-align: center; background: var(--dt-bg); }
.si-drop:hover, .si-drop.over, .si-dialog input[type=file]:focus + .si-drop { border-color: var(--dt-brand); background: var(--dt-accent-soft); }
.si-paste { width: 100%; margin-top: var(--dt-space-2); box-sizing: border-box; font-family: inherit; }
.si-body > .dt-input { width: 100%; box-sizing: border-box; margin-top: var(--dt-space-2); }
.si-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dt-space-2) var(--dt-space-3); list-style: none; padding: 0; margin: var(--dt-space-3) 0 0; }
.si-caps li { display: flex; flex-direction: column; gap: 2px; font-size: var(--dt-size-sm); }
.si-row { display: flex; gap: var(--dt-space-2); align-items: center; flex-wrap: wrap; margin: var(--dt-space-2) 0; }
.si-notes { margin: 0 0 var(--dt-space-2); padding-left: 20px; font-size: var(--dt-size-sm); }
.si-scroll { overflow-x: auto; }
.si-preview td, .si-preview th { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.si-derived { background: var(--dt-accent-soft) !important; }
.si-ex { max-width: 280px; }
.si-cols select { min-width: 200px; }
tr.si-ignored td { color: var(--dt-ink-muted); }
.si-need { color: var(--dt-warn); }
.si-card { margin-bottom: var(--dt-space-2); }
.si-card h3 { margin-top: 0; }
.si-done { font-size: var(--dt-size-lg); }
@media (max-width: 760px) { .si-caps { grid-template-columns: 1fr; } .si-dialog { width: 100vw; max-height: 100vh; border-radius: 0; } }
/* Email, step 1 (Oct 21): the compose and Campaigns pop-ups */
.em-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--dt-border); border-radius: var(--dt-radius);
  background: var(--dt-surface); color: var(--dt-ink); box-shadow: var(--dt-shadow-dialog); }
.em-dialog.em-narrow { width: min(760px, calc(100vw - 32px)); }
.em-dialog[open] { display: flex; flex-direction: column; }
.em-dialog::backdrop { background: var(--dt-overlay); }
.em-dialog.busy .em-write, .em-dialog.busy .em-preview { opacity: .6; }
.em-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--dt-space-3); padding: var(--dt-space-3) var(--dt-space-4) var(--dt-space-2); border-bottom: 1px solid var(--dt-border); }
.em-head h2 { font-size: var(--dt-size-xl); margin: 0; }
.em-sub { margin: 4px 0 0; }
.em-error, .em-ok, .em-flag { margin: var(--dt-space-2) var(--dt-space-4) 0; padding: 8px 12px; border-radius: var(--dt-radius-sm); font-size: var(--dt-size-sm); }
.em-error { background: var(--dt-bad-soft); color: var(--dt-bad); }
.em-ok { background: var(--dt-ok-soft); color: var(--dt-ok); }
.em-error[hidden], .em-ok[hidden], .em-write[hidden], .em-preview[hidden], .em-done[hidden] { display: none; }
.em-flag { margin: var(--dt-space-2) 0; background: var(--dt-accent-soft); }
.em-flag ul { margin: 4px 0; padding-left: 20px; }
.em-tabs { display: flex; gap: 4px; padding: var(--dt-space-2) var(--dt-space-4) 0; }
.em-tab { border: 1px solid var(--dt-border); border-bottom: 0; background: var(--dt-bg); padding: 6px 14px; border-radius: var(--dt-radius-sm) var(--dt-radius-sm) 0 0; font: inherit; font-size: var(--dt-size-sm); cursor: pointer; color: var(--dt-ink); }
.em-tab.on { background: var(--dt-surface); font-weight: var(--dt-weight-medium); }
.em-write, .em-preview, .em-done { padding: var(--dt-space-3) var(--dt-space-4); overflow: auto; flex: 1; border-top: 1px solid var(--dt-border); }
.em-row, .em-to, .em-subj { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); align-items: center; margin-bottom: var(--dt-space-2); }
.em-field { display: flex; gap: var(--dt-space-2); align-items: center; margin-bottom: var(--dt-space-2); flex: 1 1 auto; }
.em-field .dt-input { flex: 1; min-width: 0; }
.em-lab { display: inline-block; min-width: 84px; font-size: var(--dt-size-sm); color: var(--dt-ink-muted); font-weight: var(--dt-weight-medium); }
.em-small { font-size: var(--dt-size-sm); }
.em-skipped { width: 100%; font-size: var(--dt-size-sm); margin-left: 92px; }
.em-skipped ul { margin: 4px 0; padding-left: 20px; max-height: 140px; overflow: auto; }
.em-skipgroup { margin: 6px 0; } .em-skipgroup .em-move { margin-left: 8px; }
.em-nobody { color: var(--dt-bad); max-width: 50%; }
.em-editor { min-height: 240px; }
.em-editor .ql-editor, .em-sig-editor .ql-editor { font-family: Aptos, Calibri, Arial, Helvetica, sans-serif; font-size: 11pt; min-height: 220px; }
.em-sig-editor .ql-editor { min-height: 80px; }
.em-editor .ql-editor p, .em-sig-editor .ql-editor p { margin: 0; }
.em-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: var(--dt-space-2) 0; }
.em-chip { cursor: pointer; font: inherit; font-size: var(--dt-size-xs); background: var(--dt-surface); }
.em-chip:hover { border-color: var(--dt-brand); color: var(--dt-accent); }
.em-gap { width: var(--dt-space-3); }
.em-fillin { background: var(--dt-accent-soft); color: var(--dt-accent); border-radius: 4px; padding: 0 3px; }
.em-sig, .em-files { border-top: 1px solid var(--dt-border); padding-top: var(--dt-space-2); margin-top: var(--dt-space-2); }
.em-sig-view { font-size: var(--dt-size-sm); padding-left: 92px; }
.em-filelist { margin: 0 0 0 92px; padding-left: 16px; font-size: var(--dt-size-sm); }
.em-link { border-color: var(--dt-accent); color: var(--dt-accent); }
.em-bad { border-color: var(--dt-bad); color: var(--dt-bad); }
.em-foot { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); align-items: center; padding: var(--dt-space-3) var(--dt-space-4); border-top: 1px solid var(--dt-border); background: var(--dt-bg); }
.em-est { max-width: 340px; }
.em-need { width: 100%; color: var(--dt-warn); text-align: right; }
.em-mail { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); padding: var(--dt-space-3); background: var(--dt-surface); }
.em-hdr { border-bottom: 1px solid var(--dt-border); padding-bottom: var(--dt-space-2); margin-bottom: var(--dt-space-2); }
.em-hdr:last-child { border-bottom: 0; border-top: 1px solid var(--dt-border); padding-top: var(--dt-space-2); margin-top: var(--dt-space-2); }
.em-unsub { color: var(--dt-ink-muted); font-size: calc(var(--dt-size-xs) - 2px); margin-top: var(--dt-space-3); }   /* Nov 5 (Quinn): 2 sizes smaller, as in the email (10px) */
.em-unsub-set { display: flex; flex-direction: column; gap: var(--dt-space-1); margin-top: var(--dt-space-3); }   /* Nov 5: the campaign's unsubscribe switch and wording */
.em-unsub-text { font-size: var(--dt-size-xs); }
.em-big { font-size: var(--dt-size-lg); font-weight: var(--dt-weight-medium); }
.em-camp { margin-bottom: var(--dt-space-2); }
.em-counts { display: flex; gap: var(--dt-space-3); margin: 4px 0 var(--dt-space-2); }
.em-follow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--dt-space-2); background: var(--dt-accent-soft); border-radius: var(--dt-radius-sm); padding: 8px 12px; margin-bottom: var(--dt-space-2); }
/* Nov 5: the campaign funnel (funnel.js) */
.fn-box { margin-bottom: var(--dt-space-3); overflow-x: auto; }
.fn-stages { list-style: none; padding: 0; margin: var(--dt-space-2) 0; }
.fn-stage { display: grid; grid-template-columns: 9em 1fr 9em; gap: var(--dt-space-2); align-items: center; padding: 2px 0; }
.fn-bar { width: 100%; }
.fn-num { text-align: right; }
.fn-table { margin-top: var(--dt-space-2); width: 100%; }
/* Nov 5: automatic follow-ups (compose_ui.js) */
.em-auto { gap: var(--dt-space-2); align-items: center; margin-top: var(--dt-space-2); }
.em-days { width: 4.5em; }
.toolbar #campbtn[hidden], #bulk-email[hidden], #bulk-forward[hidden] { display: none; }
.toolbar #addtargetbtn { margin-left: auto; }   /* c5 (Quinn): like the home list's "+ New project" (after span.grow), + Add target sits at the far right of its row, at every width */
/* the editor's font list, named as in Outlook */
.em-dialog .ql-snow .ql-picker.ql-font { width: 150px; }
.em-dialog .ql-snow .ql-picker.ql-font .ql-picker-label::before, .em-dialog .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "Aptos (default)"; }
.em-dialog .ql-snow .ql-picker.ql-font [data-value="calibri"]::before { content: "Calibri"; }
.em-dialog .ql-snow .ql-picker.ql-font [data-value="arial"]::before { content: "Arial"; }
.em-dialog .ql-snow .ql-picker.ql-font [data-value="georgia"]::before { content: "Georgia"; }
.em-dialog .ql-snow .ql-picker.ql-font [data-value="times"]::before { content: "Times New Roman"; }
.em-dialog .ql-snow .ql-picker.ql-font [data-value="verdana"]::before { content: "Verdana"; }
.em-dialog .ql-snow .ql-picker.ql-font [data-value="courier"]::before { content: "Courier New"; }
.ql-font-calibri { font-family: Calibri, Arial, sans-serif; }
.ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-font-georgia { font-family: Georgia, serif; }
.ql-font-times { font-family: "Times New Roman", Times, serif; }
.ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }
.ql-font-courier { font-family: "Courier New", Courier, monospace; }
.ql-size-small { font-size: 9pt; } .ql-size-large { font-size: 14pt; } .ql-size-huge { font-size: 18pt; }
.em-dialog .ql-editor td { border: 1px solid var(--dt-border); padding: 4px 8px; }
@media (max-width: 760px) { .em-dialog { width: 100vw; max-height: 100vh; border-radius: 0; } .em-lab { min-width: 0; } .em-skipped, .em-sig-view, .em-filelist { margin-left: 0; padding-left: 0; } }

/* Oct 22 (Quinn): edit in the grid (gridedit.js) */
#rows td.ge-can { cursor: pointer; }
#rows td.ge-can:hover, #rows td.ge-can:focus { background: var(--dt-accent-soft); outline: none; }
#rows td.ge-cell { background: var(--dt-accent-soft); }
.ge { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 180px; }
.ge .dt-input, .ge .dt-select { min-width: 0; flex: 1 1 120px; }
.ge-btns { display: inline-flex; gap: 4px; }
.ge-pen { margin-left: 4px; opacity: .6; }
.ge-pen:hover, .ge-pen:focus { opacity: 1; }
.ge-label { color: var(--dt-ink-muted); flex: 0 0 auto; }   /* #470 review: a visible label on each contact box */
.pp-f { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 6px 0; }   /* contact PR 2: People add / edit, label + box together */
.pp-edit .row, .pp-edit { margin: 6px 0; }
.ct-li a { color: var(--dt-link, inherit); }
.ge-err { flex: 1 0 100%; color: var(--dt-bad); }
.ge-err:empty { display: none; }
/* Oct 22: the Last touch pop-up (touches.js) */
.tc-dialog { width: min(760px, calc(100vw - 32px)); }
.tc-open { text-align: left; }
.tc-contact { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); padding: var(--dt-space-2) var(--dt-space-3); margin-bottom: var(--dt-space-3); }
.tc-lines { display: flex; flex-wrap: wrap; gap: var(--dt-space-3); margin-top: 2px; }
.tc-log { border-bottom: 1px solid var(--dt-border); padding-bottom: var(--dt-space-2); margin-bottom: var(--dt-space-2); }
.tc-notes { width: 100%; box-sizing: border-box; font-family: inherit; }
.tc-list { list-style: none; padding: 0; margin: 0; }
.tc-item { padding: var(--dt-space-2) 0; border-bottom: 1px solid var(--dt-border); }
/* 4b: People > Touches by contact */
.tc-people { list-style: none; padding: 0; margin: 0; }
.tc-person { padding: var(--dt-space-2) 0; border-bottom: 1px solid var(--dt-border); }
.tc-person > .row { display: flex; gap: var(--dt-space-2); align-items: baseline; flex-wrap: wrap; }
.tc-person .tc-list { margin-left: var(--dt-space-3); }
.tc-text { margin-top: 2px; }
.tc-text.full { white-space: pre-wrap; }
/* Nov 1 (Quinn): email forward (forward.js) */
.fw-dialog { width: min(760px, calc(100vw - 32px)); }
/* Nov 5: the engagement column (engagement.js); shades from theme vars */
.eg-pill { white-space: nowrap; }
.eg-pill[data-level="hot"] { background: var(--upt-brand, var(--dt-brand)); color: var(--dt-brand-ink); }
.eg-pill[data-level="warm"] { background: var(--dt-accent-soft); }
.eg-pill[data-level="cold"], .eg-pill[data-level="passed"] { opacity: 0.7; }
/* Nov 5: the reply inbox (replies.js) */
.rp-dialog { width: min(820px, calc(100vw - 32px)); }
.rp-tabs { display: flex; gap: var(--dt-space-2); margin-bottom: var(--dt-space-2); }
.rp-list { list-style: none; padding: 0; margin: 0; }
.rp-row { padding: var(--dt-space-3) 0; border-bottom: 1px solid var(--dt-border); }
.rp-row[data-handled="yes"] { opacity: 0.75; }
.rp-text { margin: var(--dt-space-2) 0; padding: var(--dt-space-2); border-left: 3px solid var(--dt-border); white-space: pre-wrap; max-height: 12em; overflow: auto; }
.rp-acts, .rp-later { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); align-items: center; }
.rp-later { margin-top: var(--dt-space-2); }
.rp-suggest { background: var(--dt-accent-soft); }   /* Nov 5: an unsubscribe / pass reply to confirm */
.rp-why { margin: var(--dt-space-1) 0; }
.rp-refer .rp-note { flex-basis: 100%; width: 100%; box-sizing: border-box; font-family: inherit; }
.rp-ok { margin: 0 0 var(--dt-space-2); }
.fw-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--dt-space-2); }
.fw-note { width: 100%; box-sizing: border-box; font-family: inherit; }
.fw-list { list-style: none; padding: 0; margin: 0 0 var(--dt-space-3); }
.fw-row { padding: var(--dt-space-2) 0; border-bottom: 1px solid var(--dt-border); }
.fw-pick { display: inline-flex; gap: var(--dt-space-2); align-items: center; }
.fw-to { margin-top: 2px; }
.fw-to .dt-select { max-width: 100%; }
.fw-skipped { margin: var(--dt-space-2) 0 0; padding-left: var(--dt-space-4); }
.tc-fwd { margin-left: var(--dt-space-2); }
/* Oct 22: the Target profile Edit form (detail.js) */
.facts-form .dt-input { width: 100%; box-sizing: border-box; }
/* Oct 22: primary contact's "email · phone" under the name in the grid. It never widens the column: width 0 + min-width keeps it out of
   the table's width calculation, then fills the column up to 220px; long lines end in "…" (full line in the tooltip). Name · title wrap. */
.ct-email, .ct-phone { width: 0; min-width: min(100%, 220px); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dt-ink-muted); }
/* #477 review (5): the filled star (the primary contact) is a disabled button, but it carries meaning: no .5 fade; its colour keeps
   >= 3:1 against the surface (WCAG 1.4.11 non-text contrast; --dt-warn is 5.09:1 on white). */
.dt-btn.pp-star.on:disabled, .dt-btn.pp-star.on:disabled:hover { opacity: 1; color: var(--dt-warn); cursor: default; }
/* P1 (Oct 22 2026): Settings shell. Left section nav (tabs under 1024px), "This project" / "Organization defaults", section cards,
   save bar, skeleton / error / read-only states. Oct 22 tokens only (--upt-* with --dt-* fallbacks); card and head follow #442, controls #437. */
#settings .upt-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--dt-space-4); align-items: start; }
#settings .upt-settings-nav { position: sticky; top: calc(var(--dt-header-h) + var(--dt-space-2)); }
#settings .upt-nav-scope { font-size: var(--dt-size-xs); font-weight: var(--dt-weight-medium); color: var(--dt-ink-muted); text-transform: uppercase;
  letter-spacing: .4px; margin: var(--dt-space-3) 0 var(--dt-space-1); }
#settings .upt-nav-group:first-child .upt-nav-scope { margin-top: 0; }
#settings .upt-nav-list { list-style: none; margin: 0; padding: 0; }
#settings .upt-nav-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid transparent;
  border-radius: var(--dt-radius-sm); padding: 6px 10px; font: inherit; font-size: var(--dt-size-sm); color: var(--dt-ink); cursor: pointer; }
#settings .upt-nav-item:hover { background: var(--upt-navy-soft, var(--dt-bg)); }
#settings .upt-nav-item:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
/* Create in Settings (New project mode): items that need a saved project; shown, not pickable, with the reason. */
#settings .upt-nav-item.is-disabled { color: var(--dt-ink-muted); cursor: not-allowed; }
#settings .upt-nav-item.is-disabled:hover { background: none; }
#settings .upt-nav-why { display: block; font-size: 0.85em; }
#settings .upt-nav-item[aria-current="page"] { border-left-color: var(--upt-bronze, var(--dt-brand)); background: var(--upt-navy-soft, var(--dt-accent-soft));
  color: var(--upt-navy, var(--dt-ink)); font-weight: var(--dt-weight-medium); }
/* Quinn (Nov 2): "Hide menu" / "Show menu" collapses the Settings section menu; the content then takes the full width. */
#settings .upt-settings.is-menu-hidden { grid-template-columns: minmax(0, 1fr); }
#settings .upt-settings.is-menu-hidden > .upt-settings-nav[hidden] { display: none; }
#settings .upt-settings-tools { display: flex; justify-content: flex-start; margin: 0 0 var(--dt-space-2); }
#settings .upt-menu-toggle:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
/* Quinn (Nov 2): Team & permissions is a real table (not the .detail block scroll box) inside its own scroll wrapper, so narrow screens
   scroll sideways in the card instead of clipping the right-hand columns. Compact rows; the per-row buttons sit on one line. */
.upt-team-scroll { max-width: 100%; overflow-x: auto; }
.detail .dt-table.upt-team-table, .dt-table.upt-team-table { display: table; width: 100%; overflow: visible; }
.dt-table.upt-team-table th, .dt-table.upt-team-table td { padding: var(--dt-space-1) var(--dt-space-2); vertical-align: middle; }
.dt-table.upt-team-table td[data-col="email"], .dt-table.upt-team-table td.upt-team-actions { white-space: nowrap; }
.dt-table.upt-team-table .upt-team-level > th { padding-top: var(--dt-space-2); }
.upt-team-actions-row { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--dt-space-1); }
.dt-table.upt-team-table td.upt-team-actions .dt-hint { white-space: normal; }
.upt-team-addrow .dt-input { width: 100%; min-width: 8em; box-sizing: border-box; }
#settings .upt-scope-title { font-size: var(--dt-size-lg); color: var(--upt-navy, var(--dt-ink)); margin: 0 0 var(--dt-space-1); }
#settings .upt-scope > .dt-hint { margin: 0 0 var(--dt-space-3); }
#settings .upt-card { border: 1px solid var(--dt-border); border-radius: var(--dt-radius); background: var(--dt-surface); padding: var(--dt-space-4);
  margin-bottom: var(--dt-space-3); box-shadow: var(--upt-shadow-1, none); }
#settings .upt-card:focus { outline: none; }
#settings .upt-card:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
#settings .upt-card-title { font-size: var(--dt-size-lg); font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink)); margin: 0 0 var(--dt-space-1); }
#settings .upt-card-purpose { margin: 0 0 var(--dt-space-3); }
#settings .upt-readonly { border-left: 3px solid var(--dt-border); padding-left: var(--dt-space-2); }
#settings .upt-skel-line { height: 12px; margin: var(--dt-space-2) 0; border-radius: var(--dt-radius-sm); background: var(--dt-bg); }
#settings .upt-skel-line.short { width: 60%; }
#settings .upt-card-error { border-radius: var(--dt-radius-sm); }
.upt-savebar-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-2); margin-top: var(--dt-space-3); padding: var(--dt-space-2) var(--dt-space-3);
  background: var(--upt-navy-soft, var(--dt-accent-soft)); border: 1px solid var(--dt-border); border-left: 3px solid var(--upt-navy, var(--dt-brand)); border-radius: var(--dt-radius); }
.upt-savebar-msg { font-weight: var(--dt-weight-medium); }
.upt-savebar-reason { flex: 1 1 200px; min-width: 0; }
.upt-savebar-error { width: 100%; color: var(--dt-bad); }
.upt-savebar-error:empty, .upt-savebar-live:empty { display: none; }
.upt-savebar-body[hidden] { display: none; }   /* PR 485 follow-up: display:flex above would otherwise beat the hidden attribute, showing a clean bar */
.upt-savebar-live { color: var(--dt-ok); font-size: var(--dt-size-sm); margin-top: var(--dt-space-1); }

/* P6 (Oct 22 2026): Workflow (phases/statuses, read-only), Diagnostics (read-only), Change history list. Design tokens only, no new colors. */
.upt-p6-phase { margin-top: var(--dt-space-3); }
.upt-p6-phase h5 { margin: 0 0 var(--dt-space-2); color: var(--upt-navy, var(--dt-ink)); font-weight: var(--dt-weight-medium); }
.upt-p6-table { width: 100%; border-collapse: collapse; border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); background: var(--dt-surface); }
.upt-p6-table th, .upt-p6-table td { text-align: left; padding: var(--dt-space-1) var(--dt-space-2); border-bottom: 1px solid var(--dt-border); }
.upt-p6-table th { color: var(--dt-ink-muted); font-weight: var(--dt-weight-medium); background: var(--upt-navy-soft, var(--dt-bg)); }
.upt-p6-table th:not(:first-child), .upt-p6-table td:not(:first-child) { width: 6em; }
.upt-p6-notes { margin: var(--dt-space-2) 0; padding-left: var(--dt-space-4); }
.upt-p6-dl { display: grid; grid-template-columns: minmax(10em, max-content) 1fr; gap: var(--dt-space-1) var(--dt-space-3); margin: 0 0 var(--dt-space-3); }
.upt-p6-diag { display: contents; }
.upt-p6-diag dt { color: var(--dt-ink-muted); }
.upt-p6-diag dd { margin: 0; }
.upt-p6-history { list-style: none; margin: var(--dt-space-2) 0; padding: 0; }
.upt-p6-history > li { border-bottom: 1px solid var(--dt-border); padding: var(--dt-space-2) 0; }
/* P5 (Oct 22 2026): Settings > Email & outreach. Field groups, inline errors and the read-only status list. Oct 22 tokens only
   (--upt-* with --dt-* fallbacks); fields follow #437 dialogs-forms, the group heads and status list follow #442 settings-nda. */
#settings .upt-outreach .upt-group { border: 0; border-top: 1px solid var(--dt-border); margin: 0; padding: var(--dt-space-3) 0 0; }
#settings .upt-outreach .upt-group:first-of-type { border-top: 0; padding-top: 0; }
#settings .upt-outreach .upt-group-title { font-size: var(--dt-size-sm); font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink)); padding: 0; margin: 0 0 var(--dt-space-2); }
#settings .upt-outreach .upt-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dt-space-1); }
#settings .upt-outreach .upt-field .dt-input { max-width: 160px; }
#settings .upt-outreach .upt-field textarea.dt-input { max-width: 100%; width: 100%; resize: vertical; }
#settings .upt-outreach .dt-input:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 1px; }
#settings .upt-outreach .dt-input[aria-invalid="true"] { border-color: var(--dt-bad); }
#settings .upt-outreach .upt-field-error { color: var(--dt-bad); }
#settings .upt-outreach .upt-field-error:empty { display: none; }
#settings .upt-outreach-status { margin-top: var(--dt-space-4); padding-top: var(--dt-space-3); border-top: 2px solid var(--upt-bronze, var(--dt-border)); }
#settings .upt-status-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--dt-space-1) var(--dt-space-3); margin: 0 0 var(--dt-space-2); }
#settings .upt-status-list dt { font-weight: var(--dt-weight-medium); color: var(--dt-ink); }
#settings .upt-status-list dd { margin: 0; color: var(--dt-ink-muted); }
#settings .upt-status-list dd[data-status="warn"] { color: var(--dt-warn); }
@media (max-width: 1024px) {
  #settings .upt-settings { grid-template-columns: minmax(0, 1fr); }
  #settings .upt-settings-nav { position: static; overflow-x: auto; display: flex; gap: var(--dt-space-3); border-bottom: 1px solid var(--dt-border); }
  #settings .upt-nav-list { display: flex; gap: var(--dt-space-1); }
  #settings .upt-nav-item { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; }
  #settings .upt-nav-item[aria-current="page"] { border-bottom-color: var(--upt-bronze, var(--dt-brand)); }
  /* PR 485 review: at 1024px the two groups sat side by side in one scrolling row, so "Organization defaults" was cut off at the right
     edge. Each group now takes its own row and its tabs wrap; nothing scrolls sideways or clips. */
  #settings .upt-settings-nav { display: block; overflow-x: visible; }
  #settings .upt-nav-list { flex-wrap: wrap; }
  #settings .upt-nav-scope { white-space: nowrap; }
  /* P6: definition lists stack to one column (kept in the single 1024px block so later rules and tests see one breakpoint). */
  .upt-p6-dl { grid-template-columns: 1fr; }
  .upt-p6-diag dd { margin-bottom: var(--dt-space-2); }
  /* P5: the status list stacks to one column (kept in the single 1024px block so later rules and tests see one breakpoint). */
  #settings .upt-status-list { grid-template-columns: minmax(0, 1fr); }
  #settings .upt-status-list dd { margin-bottom: var(--dt-space-2); }
}
/* Oct 23: Settings › Workflow editing (Target admins) */
.upt-wf-head { display: flex; align-items: center; gap: var(--dt-space-2); flex-wrap: wrap; }
.upt-wf-head h5 { margin-bottom: 0; }
.upt-wf-acts { white-space: nowrap; } .upt-wf-acts .dt-btn + .dt-btn { margin-left: 4px; }
.upt-p6-table td.upt-wf-acts { width: auto; }
.upt-wf-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--dt-radius-sm); background: var(--upt-navy-soft, var(--dt-bg)); color: var(--dt-ink-muted); font-size: var(--dt-size-sm); }
.upt-wf-add { margin-top: var(--dt-space-2); }
.upt-wf-form { margin: var(--dt-space-2) 0; padding: var(--dt-space-2); border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); background: var(--dt-surface); display: grid; gap: var(--dt-space-2); }
.upt-wf-field { display: grid; gap: 2px; max-width: 28em; }
.upt-wf-actions { display: flex; gap: var(--dt-space-2); }
/* demo feedback 5 (Oct 23): LinkedIn logo badge, drawn in CSS (no external image); colours from the theme (AA-checked) */
.ct-linkedin { text-decoration: none; display: inline-block; vertical-align: middle; }
.ct-linkedin .li-logo { display: inline-block; min-width: 1.25em; height: 1.25em; line-height: 1.25em; padding: 0 .1em; border-radius: .2em;
  background: var(--dt-brand); color: var(--dt-brand-ink); font: bold .85em/1.25em Arial, Helvetica, sans-serif; text-align: center; letter-spacing: -.02em; }
.ct-linkedin:hover .li-logo, .ct-linkedin:focus-visible .li-logo { background: var(--dt-brand-hover); }
.ct-linkedin:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
/* Oct 23: email step 5, drop files into the email window */
.em-drop { border: 1px dashed transparent; border-radius: var(--dt-radius-sm); padding: 2px 0; }
.em-drop.over { border-color: var(--dt-brand); background: var(--upt-navy-soft, var(--dt-bg)); }
/* demo feedback 8 (Oct 23): Edit and Invite side by side in one Actions cell */
.pp-actions { white-space: nowrap; }
.pp-actions > * + * { margin-left: .4em; }
.pp-invite > * + * { margin-left: .3em; }
/* demo feedback 2 (Oct 23): the target detail as a right-hand drawer over the grid (grid stays visible behind) */
.upt-setov.dt-drawer, .detail.dt-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(max(760px, 66.667vw), 96vw);   /* Oct 31 (Quinn): about 2/3 of the page */
  overflow-y: auto; z-index: 50;
  background: var(--dt-surface); border-left: 1px solid var(--dt-border); box-shadow: var(--dt-shadow-dialog); }
.upt-setov.dt-drawer:focus, .detail.dt-drawer:focus { outline: none; }
.dr-launch-cell { text-align: right; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* demo feedback 3 (Oct 23): combined Documents view, one folder per data room */
.dt-folder { border-top: 1px solid var(--dt-border); padding: var(--dt-space-2) 0; }
.dt-folder:first-of-type { border-top: 0; }
.dt-folder > .dt-table { margin-top: var(--dt-space-2); }
/* Oct 24 (Quinn): Settings > SharePoint site picker, one searchable dropdown (spsites.js sitePicker) */
.dt-combo { position: relative; max-width: 560px; }
.dt-combo-input { width: 100%; box-sizing: border-box; }
.dt-combo-input:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 1px; }
.dt-combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); max-height: 280px; overflow-y: auto; margin: 0; padding: 4px 0;
  list-style: none; background: var(--dt-surface); border: 1px solid var(--dt-control-border); border-radius: var(--dt-radius-sm); box-shadow: var(--dt-shadow-dialog); }
.dt-combo-list[hidden] { display: none; }
/* Review N1 / MF1: while a load or search runs, Search all and retry stay focusable (aria-disabled, not disabled): they look unavailable */
.dt-sp-picker .dt-btn[aria-disabled="true"], .dt-sp-picker .dt-btn[aria-disabled="true"]:hover { opacity: .5; cursor: not-allowed; background: var(--dt-surface); border-color: var(--dt-control-border); color: var(--dt-ink); }
/* Review M1 (LEF-8 fix1): a full Swap empty folder… stays focusable (aria-disabled, not disabled): it still looks unavailable */
.dt-btn[data-folderbtn][aria-disabled="true"], .dt-btn[data-folderbtn][aria-disabled="true"]:hover { opacity: .5; cursor: not-allowed; background: var(--dt-surface); border-color: var(--dt-control-border); color: var(--dt-ink); }
/* Part 0 rule 3: upload / release / invite in a room with no folder (roomgate.js) */
.dt-btn[data-gated][aria-disabled="true"], .dt-btn[data-gated][aria-disabled="true"]:hover { opacity: .5; cursor: not-allowed; background: var(--dt-surface); border-color: var(--dt-control-border); color: var(--dt-ink); }
.dt-combo-option { display: flex; justify-content: space-between; gap: var(--dt-space-3); padding: 6px var(--dt-space-3); cursor: pointer; color: var(--dt-ink); }
.dt-combo-option:hover { background: var(--dt-surface-alt); }
.dt-combo-option[aria-selected="true"] { background: var(--dt-accent-soft); box-shadow: inset 3px 0 0 var(--dt-brand); }
.dt-combo-option[data-picked="true"] .dt-combo-name { font-weight: var(--dt-weight-medium); }
.dt-combo-url { color: var(--dt-ink-muted); font-size: var(--dt-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* H1 (Oct 25): the home project list */
.home-head { display: flex; align-items: center; gap: var(--dt-space-2); flex-wrap: wrap; }
.home-head .grow { flex: 1; }
.home-table tr.home-row { cursor: pointer; }
.home-table tr.home-row:hover { background: var(--upt-navy-soft, var(--dt-bg)); }
.home-table tr.closed { opacity: .7; }

/* H2 Practice mode: the banner stays at the top of the New project page while scrolling (calm "info" colours, not a warning). */
.np-practice { position: sticky; top: 0; z-index: 2; font-weight: var(--dt-weight-medium); }

/* Staff home link (Oct 25, Quinn t1704u): the header's Target logo goes to the home list (the only home link since Oct 25 late: no Home
   link). Pointer cursor and a visible keyboard focus ring on the navy header. */
.dt-header .dt-brand { display: flex; align-items: center; gap: var(--dt-space-3); color: inherit; cursor: pointer; padding: 2px 4px; }
.dt-header .dt-brand:hover { background: none; text-decoration: none; }
.dt-header .dt-brand:hover .dt-app { text-decoration: underline; }
.dt-header .dt-brand:focus-visible { outline: 2px solid var(--upt-header-ink, var(--dt-focus)); outline-offset: 2px; }

/* H2 New project validation (Oct 26, Quinn "nothing happened"): errors must look like errors. --dt-bad #c62828 is 5.62:1 on white
   (text, AA) and well over 3:1 for the control edge; the summary is the theme's .dt-banner.bad (4.92:1 on --dt-bad-soft).
   .dt-field-error had no style anywhere, so it is styled for every page; the red control edge is kept to the New project page. */
.dt-field-error { color: var(--dt-bad); font-size: var(--dt-size-sm); font-weight: var(--dt-weight-medium); margin: var(--dt-space-1) 0 0;
  padding-left: var(--dt-space-2); border-left: 3px solid var(--dt-bad); }
.upt-newproject input[aria-invalid="true"], .upt-newproject select[aria-invalid="true"], .upt-newproject textarea[aria-invalid="true"],
.upt-newproject button[aria-invalid="true"] { border: 2px solid var(--dt-bad); border-radius: var(--dt-radius-sm); background: var(--dt-bad-soft); color: var(--dt-ink); }
.upt-newproject [aria-invalid="true"]:focus { border-color: var(--dt-bad); box-shadow: 0 0 0 3px var(--dt-bad-soft); }
.upt-newproject [aria-invalid="true"]:focus-visible { outline: 2px solid var(--dt-bad); outline-offset: 1px; }
.np-nomatch { margin: var(--dt-space-1) 0 0; }

/* Nov 9 (Quinn, profile layout PR 2): Target profile = Description full width, then Overview (left) and Financial (right) in bordered boxes.
   An empty box isn't drawn and the other takes the whole row (.one). Below 860px the boxes stack: Overview, then Financial. */
.detail .dt-profile { margin-bottom: var(--dt-space-3); }
.detail .dt-profile > h2 { margin-bottom: var(--dt-space-2); }
.dt-pbox { border: 1px solid var(--upt-line, var(--dt-border)); border-radius: 10px; padding: 14px 16px; background: var(--dt-surface); min-width: 0; }
.dt-pbox.editing { border-color: var(--dt-accent, var(--dt-ink-muted)); }
.dt-pbox h3 { font-size: 15px; font-weight: var(--dt-weight-medium); margin: 0; }   /* h3: the section above it is the page's "Target profile" h2 */
.detail .dt-pbox-head { margin-top: 0; margin-bottom: var(--dt-space-2); flex-wrap: nowrap; }
.dt-pbox-head .grow { flex: 1 1 auto; }
.dt-pgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dt-space-3); align-items: start; margin-top: var(--dt-space-3); }
.dt-pgrid.one { grid-template-columns: minmax(0, 1fr); }
/* Nov 10 (Internal Notes, staff only): in the grid's RIGHT column directly under Financial (.dt-pcol holds Financial and the notes, the same gap as between boxes).
   It follows the grid's stacking: below 860px the grid is one column, so the order is Overview, Financial, Internal Notes. When no grid is drawn
   (no profile fields, loading, error) it sits under the grid, full width, with the margin below. An empty one takes no room. */
.dt-pcol { display: grid; gap: var(--dt-space-3); align-content: start; min-width: 0; }
.dt-pnotes { margin-top: var(--dt-space-3); }
.dt-pcol > .dt-pnotes { margin-top: 0; }
.dt-pnotes:empty { display: none; }
.dt-pnotes .dt-hint { margin: 0 0 8px; }
@media (max-width: 860px) { .dt-pgrid { grid-template-columns: minmax(0, 1fr); } }
.dt-pbox .dt-porder-hint { margin: 0 0 var(--dt-space-2); font-size: 12px; }
.dt-pbox .dt-pmove { width: 1%; white-space: nowrap; text-align: right; }
.dt-pbox .dt-grip { display: inline-block; cursor: grab; padding: 0 6px; color: var(--dt-ink-muted); user-select: none; letter-spacing: -2px; }
.dt-pbox .dt-grip:active { cursor: grabbing; }
.dt-pbox .dt-pmove-btn { padding: 0 6px; min-width: 24px; margin-left: 2px; }
.dt-pbox tr.dt-drop-before > td { box-shadow: inset 0 2px 0 var(--dt-accent, var(--dt-ink-muted)); }   /* where the dragged row will land */
.dt-pbox tr.dt-drop-after > td { box-shadow: inset 0 -2px 0 var(--dt-accent, var(--dt-ink-muted)); }
.detail .dt-pbox .kv { max-width: none; }
.detail .dt-pbox .kv td:first-child, .detail .dt-pbox .kv td.dt-muted { width: 38%; }
.detail .dt-pbox .kv td { overflow-wrap: anywhere; }
.dt-pbox .dt-input { width: 100%; box-sizing: border-box; }

/* H2 New project / Basics layout (Oct 26, Quinn "squished"): labels in a fixed right-aligned left column, controls to the right
   (fluid up to 480px), even row spacing, four small group headings (as Settings > Email & outreach's .upt-group), Search inline with
   its box, muted hints, and a right-aligned footer (Cancel, then Create). Settings tokens only; stacks to one column on narrow widths. */
.upt-newproject { --np-label-w: 180px; --np-control-max: 480px; }
.upt-newproject .np-form { display: flex; flex-direction: column; gap: var(--dt-space-4); }
.upt-newproject .np-group { border: 0; border-top: 1px solid var(--dt-border); margin: 0; padding: var(--dt-space-3) 0 0; min-width: 0; }
.upt-newproject .np-group:first-of-type { border-top: 0; padding-top: 0; }
.upt-newproject .np-group-title { font-size: var(--dt-size-sm); font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink));
  text-transform: uppercase; letter-spacing: .4px; padding: 0; margin: 0 0 var(--dt-space-2); float: left; width: 100%; }   /* float: the legend sits under the group's top line, not in it */
.upt-newproject .np-group > .np-row { clear: both; }
.upt-newproject .np-row { display: grid; grid-template-columns: var(--np-label-w) minmax(0, var(--np-control-max)); column-gap: var(--dt-space-4);
  align-items: start; padding: var(--dt-space-2) 0; margin: 0; }
.upt-newproject .np-label { text-align: right; font-weight: var(--dt-weight-medium); color: var(--dt-ink); padding-top: 6px; line-height: 1.4; }
.upt-newproject .np-control { min-width: 0; display: flex; flex-direction: column; gap: var(--dt-space-1); }
.upt-newproject .np-control > .dt-input, .upt-newproject .np-control > .dt-select, .upt-newproject .np-control textarea.dt-input { width: 100%; box-sizing: border-box; }
.upt-newproject .np-control textarea.dt-input { resize: vertical; }
.upt-newproject .np-control .dt-hint { margin: 0; font-size: var(--dt-size-xs); color: var(--dt-ink-muted); }
.upt-newproject .np-control .dt-field-error { margin: 0; }
.upt-newproject .np-search { display: flex; gap: var(--dt-space-2); align-items: center; }
.upt-newproject .np-search > .dt-input { flex: 1 1 auto; min-width: 0; }
.upt-newproject .np-search > .dt-btn { flex: 0 0 auto; }
.upt-newproject .np-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dt-space-2); margin: 6px 0 var(--dt-space-1); }
.upt-newproject .np-sublabel { display: block; margin: var(--dt-space-2) 0 var(--dt-space-1); font-size: var(--dt-size-xs); color: var(--dt-ink-muted); }
.upt-newproject .np-sublabel + .dt-input { width: 100%; box-sizing: border-box; }
.upt-newproject .np-hits, .upt-newproject .np-team { list-style: none; margin: var(--dt-space-1) 0 0; padding: 0; }
.upt-newproject .np-hits > li, .upt-newproject .np-team > li { display: flex; gap: var(--dt-space-2); align-items: baseline; padding: 2px 0; }
.upt-newproject .np-footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--dt-space-2); margin: 0;
  padding-top: var(--dt-space-3); border-top: 1px solid var(--dt-border); }
/* Read-only Basics (after a create, and Settings > Basics): the same columns and group headings. */
.upt-newproject .np-summary, .np-summary { display: flex; flex-direction: column; gap: var(--dt-space-3); }
.np-summary .np-group { border: 0; border-top: 1px solid var(--dt-border); margin: 0; padding: var(--dt-space-3) 0 0; }
.np-summary .np-group:first-of-type { border-top: 0; padding-top: 0; }
.np-summary .np-group-title { font-size: var(--dt-size-sm); font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink));
  text-transform: uppercase; letter-spacing: .4px; margin: 0 0 var(--dt-space-2); }
.np-summary .np-dl { display: grid; grid-template-columns: 180px minmax(0, 480px); gap: var(--dt-space-2) var(--dt-space-4); margin: 0; }
.np-summary .np-dl dt { text-align: right; color: var(--dt-ink-muted); font-weight: var(--dt-weight-medium); }
.np-summary .np-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .upt-newproject .np-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--dt-space-1); }
  .upt-newproject .np-label { text-align: left; padding-top: 0; }
  .np-summary .np-dl { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .np-summary .np-dl dt { text-align: left; }
  .np-summary .np-dl dd { margin-bottom: var(--dt-space-2); }
  .upt-newproject .np-footer { flex-wrap: wrap; }
}
.upt-newproject .np-error-summary { margin: 0 0 var(--dt-space-3); }   /* clear of the Settings nav below it */
/* Oct 26: close / delete project. The Danger zone at the foot of Settings > Basics (Target admins) and its dialogs. */
.upt-danger { margin-top: var(--dt-space-4); padding: var(--dt-space-3); border: 1px solid var(--dt-bad); border-radius: var(--dt-radius-sm); }
.upt-danger > .upt-danger-title { font-size: var(--dt-size-sm); font-weight: var(--dt-weight-medium); padding: 0; margin: 0 0 var(--dt-space-2); color: var(--dt-bad); }   /* Nov 6 (Basics): an h5 group heading under the card's h4 (was an h3) */
.upt-danger-dialog .upt-danger-dialog-title { margin: 0 0 var(--dt-space-2); font-size: var(--dt-size-sm); font-weight: var(--dt-weight-medium); }
.upt-danger-actions { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); margin-top: var(--dt-space-2); }
.upt-danger-btn { border-color: var(--dt-bad); color: var(--dt-bad); }
.upt-danger-dialog { margin-top: var(--dt-space-3); padding: var(--dt-space-3); border-radius: var(--dt-radius-sm); background: var(--dt-bad-soft); }
.upt-danger-counts { margin: var(--dt-space-2) 0; padding-left: 1.2em; }
.upt-danger-field { display: block; margin-top: var(--dt-space-2); }
.upt-danger-field textarea, .upt-danger-field input[type="text"] { display: block; width: 100%; max-width: 40em; margin-top: var(--dt-space-1); }
.upt-danger-tick { display: flex; gap: var(--dt-space-2); align-items: flex-start; margin-top: var(--dt-space-2); }
.upt-danger-go:disabled { opacity: .6; cursor: not-allowed; }
.home-marker { color: var(--dt-muted, inherit); font-size: var(--dt-size-sm); }
tr.deleted td { opacity: .75; }
/* Item 114 (Gap 4): Client invites box (clientinvite.js) on Team & permissions. Theme tokens only. */
.upt-clientinvites { display: flex; flex-direction: column; gap: var(--dt-space-2); }
.upt-ci-form, .upt-ci-link, .upt-ci-cancel { display: flex; flex-direction: column; gap: var(--dt-space-2); padding: var(--dt-space-3); border: 1px solid var(--dt-control-border); border-radius: var(--dt-radius-sm); }
.upt-ci-field { display: flex; flex-direction: column; gap: var(--dt-space-1); }
.upt-ci-roles { display: flex; flex-direction: column; gap: var(--dt-space-1); margin: 0; padding: 0; border: 0; }
.upt-ci-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-2); }
.upt-ci-link input[readonly] { width: 100%; font-family: monospace; }

/* S2 (Send NDA, Oct 27): a warning line in the screen banner (the send went through, but something needs doing). Theme has ok/bad/info
   only, so the banner sits on --dt-surface (no new colour): --dt-warn is 5.09:1 on it, the bar is the same --dt-warn. */
.dt-banner.warn { background: var(--dt-surface); color: var(--dt-warn); border-left: 3px solid var(--dt-warn); font-weight: var(--dt-weight-medium); }
/* Target tabs, Contacts & Permissions (Qdog SHOULD-2, Oct 27): in the 760px drawer (and on any narrow screen) the people table with the
   Room access / NDA / Access requests / Actions columns turns into one stacked card per person, each cell on its own line under its column
   name (td[data-label]), so nothing sits behind a sideways scroll. Phone numbers never break between digit groups; long emails may break. */
.pp-phone { white-space: nowrap; }
.pp-email { overflow-wrap: anywhere; }
.detail.dt-drawer .pp-table.pp-cards, .detail.dt-drawer .pp-table.pp-cards tbody, .detail.dt-drawer .pp-table.pp-cards tr, .detail.dt-drawer .pp-table.pp-cards td { display: block; }
.detail.dt-drawer .pp-table.pp-cards { overflow-x: visible; border: 0; }
.detail.dt-drawer .pp-table.pp-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.detail.dt-drawer .pp-table.pp-cards tr { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); padding: var(--dt-space-2) var(--dt-space-3); margin-bottom: var(--dt-space-2); }
.detail.dt-drawer .pp-table.pp-cards td { border: 0; padding: 3px 0 3px 9.5em; position: relative; min-height: 1.4em; }
.detail.dt-drawer .pp-table.pp-cards td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 10.5em; color: var(--dt-ink-muted); font-size: var(--dt-size-xs); font-weight: var(--dt-weight-medium); text-transform: uppercase; letter-spacing: .02em; }
.detail.dt-drawer .pp-table.pp-cards td.pp-name { padding-left: 0; font-weight: var(--dt-weight-medium); padding-bottom: 4px; }
.detail.dt-drawer .pp-table.pp-cards td.pp-name::before, .detail.dt-drawer .pp-table.pp-cards td.pp-empty { display: none; content: none; }
.detail.dt-drawer .pp-table.pp-cards .pp-actions { white-space: normal; }
.detail.dt-drawer .pp-table.pp-cards .pp-actions > * + * { margin-left: 0; }
.detail.dt-drawer .pp-table.pp-cards .pp-actions, .detail.dt-drawer .pp-table.pp-cards .pp-invite { gap: 6px; }
.detail.dt-drawer .pp-table.pp-cards .pp-invite { display: flex; flex-wrap: wrap; align-items: center; }
.detail.dt-drawer .pp-table.pp-cards .pp-invite > * + * { margin-left: 0; }
.detail.dt-drawer .pp-table.pp-cards .pp-req .row { flex-wrap: wrap; }
@media (max-width: 760px) {
  .detail .pp-table.pp-cards, .detail .pp-table.pp-cards tbody, .detail .pp-table.pp-cards tr { display: block; }
  .detail .pp-table.pp-cards { overflow-x: visible; }
  .detail .pp-table.pp-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .detail .pp-table.pp-cards tr { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); padding: var(--dt-space-2); margin-bottom: var(--dt-space-2); }
  .detail .pp-table.pp-cards td { display: block; position: relative; border: 0; padding: 3px 0 3px 8.5em; min-height: 1.4em; }
  .detail .pp-table.pp-cards td::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 9.5em; color: var(--dt-ink-muted); font-size: var(--dt-size-xs); font-weight: var(--dt-weight-medium); }
  .detail .pp-table.pp-cards td.pp-name { padding-left: 0; font-weight: var(--dt-weight-medium); }
  .detail .pp-table.pp-cards td.pp-name::before, .detail .pp-table.pp-cards td.pp-empty { display: none; content: none; }
  .detail .pp-table.pp-cards .pp-actions { white-space: normal; }
  .detail .pp-table.pp-cards .pp-invite { display: flex; flex-wrap: wrap; gap: 6px; }
  .detail .pp-table.pp-cards .pp-invite > * + * { margin-left: 0; }
}
/* NDA plan step 4 (Oct 28): NDA links (ndalinks.js) — the box on the NDA tab, the row's pop-up and the compose chip */
.upt-nl-copy, .upt-nl-dialog { display: flex; flex-direction: column; gap: var(--dt-space-2); padding: var(--dt-space-3); border: 1px solid var(--dt-control-border); border-radius: var(--dt-radius-sm); }
.upt-nl-field { display: flex; flex-direction: column; gap: var(--dt-space-1); }
.upt-nl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-2); }
.upt-nl-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; background: var(--dt-overlay); }
.upt-nl-modal-box { width: min(32rem, 92vw); }
.dr-ndalink { margin-left: var(--dt-space-1); }

/* ---------- NDA tab redesign (Quinn, Oct 28 night) ----------
   .dt-nda-main  the negotiation box: .dt-nda-hero (where it is, who it waits on, step bar, the next thing to do), .dt-nda-tl (two-lane
                 timeline: the target above the line, the client & Uplift below, versions left to right), .dt-nda-work (Edit online,
                 upload, signing). Then .dt-nda-cols: two columns of the other NDA boxes (one column on a narrow screen).
   Colours carry no meaning on their own: every state is also in words. */
.dt-nda-main > h2 { margin-bottom: var(--dt-space-3); }
.dt-nda-flow { display: flex; flex-direction: column; gap: var(--dt-space-4); }
.dt-nda-hero { border: 1px solid var(--dt-border); border-radius: var(--dt-radius); padding: var(--dt-space-4); background: var(--dt-surface-alt); display: flex; flex-direction: column; gap: var(--dt-space-3); }
.dt-nda-hero-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--dt-space-3); }
.dt-nda-kicker { font-size: var(--dt-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--dt-ink-muted); }
.dt-nda-hero .big { font-size: var(--dt-size-xl); }
.dt-nda-waiting { border-radius: 999px; padding: 4px 12px; font-weight: var(--dt-weight-medium); font-size: var(--dt-size-sm); border: 1px solid var(--dt-border); background: var(--dt-surface); color: var(--dt-ink); }
.dt-nda-waiting.us { border-color: var(--dt-warn); color: var(--dt-warn); }
.dt-nda-waiting.them { border-color: var(--dt-accent); color: var(--dt-accent); background: var(--dt-accent-soft); }
.dt-nda-waiting.done { border-color: var(--dt-ok); color: var(--dt-ok); background: var(--dt-ok-soft); }
/* the step bar: dots on a line, labels under them */
.dt-nda-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dt-nda-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: var(--dt-size-sm); color: var(--dt-ink-muted); }
.dt-nda-steps li::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--dt-border); z-index: 0; }
.dt-nda-steps li:first-child::before { display: none; }
.dt-nda-steps li.done::before, .dt-nda-steps li.current::before { background: var(--dt-brand); }
.dt-nda-steps .dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--dt-control-border); background: var(--dt-surface);
  display: flex; align-items: center; justify-content: center; font-size: var(--dt-size-xs); font-weight: var(--dt-weight-bold); }
.dt-nda-steps li.done .dot { background: var(--dt-brand); border-color: var(--dt-brand); color: var(--dt-brand-ink); }
.dt-nda-steps li.done { color: var(--dt-ink); }
.dt-nda-steps li.current .dot { border-color: var(--dt-brand); box-shadow: 0 0 0 4px var(--dt-accent-soft); }
.dt-nda-steps li.current { color: var(--dt-ink); font-weight: var(--dt-weight-medium); }
.dt-nda-steps .dt-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--dt-brand); text-decoration: underline; cursor: pointer; }
.dt-nda-steps .dt-linkbtn:focus-visible { outline: 2px solid var(--dt-brand); outline-offset: 2px; }
/* the next thing to do */
.dt-nda-next { border-left: 4px solid var(--dt-border); background: var(--dt-surface); border-radius: var(--dt-radius-sm); padding: var(--dt-space-3); display: flex; flex-direction: column; gap: var(--dt-space-2); }
.dt-nda-next.decide, .dt-nda-next.ours, .dt-nda-next.countersign { border-left-color: var(--dt-warn); }
.dt-nda-next.theirs { border-left-color: var(--dt-accent); }
.dt-nda-next.done { border-left-color: var(--dt-ok); }
.dt-nda-next-title { font-weight: var(--dt-weight-medium); font-size: var(--dt-size); }
.dt-nda-next .row .dt-input { flex: 1 1 260px; }
/* the two-lane timeline */
.dt-nda-tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dt-space-2) var(--dt-space-3); margin-bottom: var(--dt-space-2); }
.dt-nda-tl-head h3 { margin: 0; }
.dt-tl { display: grid; grid-auto-flow: column; grid-template-rows: minmax(140px, auto) 40px minmax(140px, auto); grid-template-columns: 128px; grid-auto-columns: minmax(220px, max-content);
  overflow-x: auto; border: 1px solid var(--dt-border); border-radius: var(--dt-radius); }
.dt-tl-lane { grid-column: 1; position: sticky; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--dt-space-2);
  font-weight: var(--dt-weight-medium); font-size: var(--dt-size-sm); border-right: 1px solid var(--dt-border); background: var(--dt-surface); }
.dt-tl-lane.top { grid-row: 1; background: var(--dt-accent-soft); color: var(--dt-accent); }
.dt-tl-lane.mid { grid-row: 2; }
.dt-tl-lane.bottom { grid-row: 3; background: var(--dt-surface-alt); color: var(--dt-ink); }
.dt-tl-slot { padding: var(--dt-space-2); display: flex; }
.dt-tl-slot.top { grid-row: 1; align-items: flex-end; background: color-mix(in srgb, var(--dt-accent-soft) 45%, transparent); }
.dt-tl-slot.bottom { grid-row: 3; align-items: flex-start; }
.dt-tl-axis { grid-row: 2; position: relative; display: flex; align-items: center; justify-content: center; }
.dt-tl-axis::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--dt-control-border); }
.dt-tl-axis.first::before { left: 50%; }
.dt-tl-axis.last::before { right: 50%; }
.dt-tl-axis.first.last::before { display: none; }
.dt-tl-node { position: relative; z-index: 1; min-width: 28px; height: 28px; border-radius: 14px; padding: 0 6px; display: flex; align-items: center; justify-content: center;
  font-size: var(--dt-size-xs); font-weight: var(--dt-weight-bold); border: 2px solid var(--dt-control-border); background: var(--dt-surface); color: var(--dt-ink); }
.dt-tl-node.target { border-color: var(--dt-accent); color: var(--dt-accent); }
.dt-tl-axis.latest .dt-tl-node { background: var(--dt-brand); border-color: var(--dt-brand); color: var(--dt-brand-ink); }
.dt-tl-card { width: 100%; max-width: 300px; min-width: 200px; border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); background: var(--dt-surface); padding: var(--dt-space-2) var(--dt-space-3);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.dt-tl-card.target { border-top: 3px solid var(--dt-accent); }
.dt-tl-card.ours { border-bottom: 3px solid var(--dt-control-border); }
.dt-tl-card.latest { box-shadow: 0 0 0 2px var(--dt-brand); }
.dt-tl-num { font-weight: var(--dt-weight-bold); display: flex; gap: var(--dt-space-2); align-items: center; }
.dt-tl-label { font-weight: var(--dt-weight-medium); }
.dt-tl-links { margin-top: 2px; }
.dt-nda-vhist { margin-top: var(--dt-space-2); }
/* the unsent working copy and the next-version slot (dashed: not a version yet) */
.dt-tl-card.draft, .dt-tl-card.next { border-style: dashed; border-color: var(--dt-control-border); border-bottom-width: 1px; }
.dt-tl-card.next { min-width: 280px; gap: var(--dt-space-1); }
.dt-tl-card.next .dt-select, .dt-tl-card.next .dt-input { width: 100%; }
/* Nov 1 (Quinn): a tighter Next box (less vertical space): no extra margin round the drop zone, smaller gaps between the parts */
.dt-tl-card.next .dt-drop { margin: 0; padding: var(--dt-space-2) var(--dt-space-3); }
/* send model (Oct 29): an unsent version (only our side sees it) and the small "Upload a version" link */
.dt-tl-card.unsent { border-style: dashed; }
.dt-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--dt-brand); text-decoration: underline; cursor: pointer; text-align: left; }
.dt-linkbtn:focus-visible { outline: 2px solid var(--dt-brand); outline-offset: 2px; }
.dt-next-group { display: flex; flex-direction: column; gap: var(--dt-space-1); width: 100%; }
.dt-next-group + .dt-next-group { border-top: 1px solid var(--dt-border); padding-top: var(--dt-space-1); margin-top: var(--dt-space-1); }
.dt-tl-node.pending { border-style: dashed; background: var(--dt-surface); color: var(--dt-ink-muted); }
.dt-tl-axis.pending::before { background: repeating-linear-gradient(90deg, var(--dt-control-border) 0 6px, transparent 6px 10px); }
/* work on the NDA */
.dt-nda-work h3 { margin: 0 0 var(--dt-space-2); }
.dt-nda-work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--dt-space-3); }
.dt-nda-work-group { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); padding: var(--dt-space-3); display: flex; flex-direction: column; gap: var(--dt-space-2); }
.dt-nda-work-group h4 { margin: 0; font-size: var(--dt-size); font-weight: var(--dt-weight-medium); }
.dt-nda-work-group p { margin: 0; }
.dt-upload-grid { display: flex; flex-direction: column; gap: var(--dt-space-2); }
/* the other NDA boxes in two columns */
.dt-nda-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dt-space-3); align-items: start; }
.dt-nda-col > .dt-box + .dt-box { margin-top: var(--dt-space-3); }
.dt-nda-col:empty { display: none; }
/* NDA tab clean-up (Oct 29): the data room link to copy */
.dt-roomlink + .dt-roomlink { margin-top: var(--dt-space-3); }
.dt-roomlink .row { flex-wrap: nowrap; }
.dt-roomlink-url { flex: 1 1 auto; min-width: 0; font-size: var(--dt-size-sm); }
.dt-roomlink-more { margin-top: var(--dt-space-3); }
.dt-roomlink-more > summary { cursor: pointer; color: var(--dt-ink-muted); }
.dt-roomlink-more[open] > summary { margin-bottom: var(--dt-space-2); }
@media (max-width: 900px) {
  .dt-nda-cols { grid-template-columns: minmax(0, 1fr); }
  .dt-nda-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--dt-space-3); }
  .dt-nda-steps li:nth-child(5)::before { display: none; }
  .dt-tl { grid-template-columns: 84px; grid-auto-columns: minmax(200px, max-content); }
}
/* NDA rounds (Oct 29): files sent together stack in one column; our next box holds the round's files and its one Send button */
.dt-tl-stack { display: flex; flex-direction: column; gap: var(--dt-space-2); width: 100%; }
.dt-tl-file { border: 1px dashed var(--dt-border); border-radius: var(--dt-radius-sm); padding: var(--dt-space-1) var(--dt-space-2); display: flex; flex-direction: column; gap: 4px; }
.dt-tl-card.next.wait { min-width: 200px; }
/* Process tab (Quinn, Oct 30): the same layout the target sees: From Uplift | status on top, the Proposal timeline below */
.dt-process { display: flex; flex-direction: column; gap: var(--dt-space-3); }
.dt-process-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dt-space-3); align-items: start; }
.dt-process-top > .dt-box { margin: 0; }
.dt-post + .dt-post { border-top: 1px solid var(--dt-border); padding-top: var(--dt-space-2); margin-top: var(--dt-space-2); }
@media (max-width: 760px) { .dt-process-top { grid-template-columns: 1fr; } }

/* Oct 30 (Quinn): Docs & Q&A tab = Documents on the left half, Q&A and updates at the top of the right half (one column when narrow);
   sortable table headers (a header click sorts; the arrow shows the order); View and the trash can at the right of a document row. */
.dt-docs-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dt-space-3); align-items: start; }
.dt-docs-col { display: grid; gap: var(--dt-space-3); min-width: 0; }
@media (max-width: 1100px) { .dt-docs-cols { grid-template-columns: minmax(0, 1fr); } }
.detail.dt-drawer .dt-docs-cols { grid-template-columns: minmax(0, 1fr); }   /* Design pass 3: the 760px drawer stacks Documents above Q&A */
.dt-sortable th .dt-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: inherit; cursor: pointer; text-align: left; }
.dt-sortable th .dt-sort:hover { text-decoration: underline; }
.dt-sortable th .dt-sort:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
.dt-sortable th[aria-sort="ascending"] .dt-sort::after { content: " ▲"; font-size: 0.75em; }
.dt-sortable th[aria-sort="descending"] .dt-sort::after { content: " ▼"; font-size: 0.75em; }
.dt-sortable td.dt-actions { text-align: right; white-space: nowrap; }
.dt-trash { margin-left: 4px; }
.dt-row-more > td { padding-top: 0; }
.qa-table .dt-row-more .thread { margin: 0 0 var(--dt-space-2, 8px); }
/* Nov 8 2026 (Quinn, Q&A panel): "Suggest we shade one question from another such that people can see how questions and their answers
   are grouped together and distinguished from the next question and answer. The shading should be subtle." Each question is two rows
   (its row + the thread row from sorttable.js `after`), so every other PAIR gets the shared --upt-record-shade. A sort rebuilds the body,
   so the shading stays right. The thread cell undoes theme.css's empty-state td[colspan] look (centred, italic, muted), and hover keeps the
   pair's own shade (the .dt-table.qa-table prefix outranks theme.css's td[colspan] hover). No line between a question and its thread.
   Pinned in tests/qa_shading.test.mjs. */
.dt-table.qa-table > tbody > tr:hover > td { background: var(--dt-surface); }
.dt-table.qa-table > tbody > tr:nth-child(4n+3) > td, .dt-table.qa-table > tbody > tr:nth-child(4n+4) > td { background: var(--upt-record-shade, var(--dt-bg)); }
.dt-table.qa-table > tbody > tr.dt-row-more > td { text-align: left; font-style: normal; color: inherit; padding: 0 12px var(--dt-space-2, 8px); }
.dt-table.qa-table > tbody > tr:has(+ tr.dt-row-more) > td { border-bottom: 0; }
.dt-table.qa-table .dt-row-more .thread { border-top: 0; }
/* Oct 30: a document name that opens the document */
.dt-doclink { color: var(--dt-accent); text-decoration: underline; }
/* Oct 30 (Quinn): add a document, link or calendar invite on the Process tab */
.dt-process-add { margin-top: var(--dt-space-3); border-top: 1px solid var(--dt-border); padding-top: var(--dt-space-2); }
.dt-process-add > summary { cursor: pointer; color: var(--dt-accent); font-weight: 500; }
.dt-process-add[open] > summary { margin-bottom: var(--dt-space-2); }
.dt-process-add .dt-input, .dt-process-add .row { margin-bottom: var(--dt-space-2); }

/* ===================== Design pass 3 (Oct 30 2026, Quinn: "simple yet professional", high efficacy) ==============
   Visual only (plus pill keys data-phase / data-approval and the projects summary strip). Calm page, cards with soft edges, one navy
   accent, quiet secondary buttons, readable tables (clear headers, no wrapping short values, the row actions always in view).
   Colours come from theme.css tokens (each pill ink is 4.5:1 or more on its tint). */
body { background: var(--upt-page, var(--dt-bg)); }
main { padding: var(--dt-space-4) var(--dt-space-5); }
.dt-box { border-color: var(--upt-line, var(--dt-border)); border-radius: 10px; }
.dt-box h2 { font-size: 16px; font-weight: var(--dt-weight-medium); }

/* Toolbar: one calm bar; secondary actions are quiet buttons, the project picker leads */
.toolbar { border-color: var(--upt-line, var(--dt-border)); border-radius: 10px; box-shadow: var(--upt-shadow-1, none); padding: 10px 12px; row-gap: 8px; }
.toolbar .dt-btn.small:not(.primary) { border-color: var(--upt-line, var(--dt-border)); color: var(--upt-navy, var(--dt-ink)); background: var(--dt-surface); }
.toolbar .dt-btn.small:not(.primary):hover { border-color: var(--upt-navy, var(--dt-brand)); background: var(--upt-navy-soft, var(--dt-bg)); }
#project { min-width: 260px; font-size: 15px; }
#search { width: 340px; }

/* Phase bar: KPI tiles; the selected one is tinted navy with a navy underline (not a solid block) */
.phasebar { border-color: var(--upt-line, var(--dt-border)); border-radius: 10px; box-shadow: var(--upt-shadow-1, none); margin-bottom: var(--dt-space-3); }
.phasebar button { padding: 12px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-right-color: var(--upt-line, var(--dt-border)); }
.phasebar button b { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; text-transform: none; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.phasebar button.on { background: var(--upt-navy-soft, var(--dt-accent-soft)); color: var(--upt-navy, var(--dt-ink)); box-shadow: inset 0 -3px 0 var(--upt-navy, var(--dt-brand)); }
.phasebar button.on b { color: var(--upt-navy, var(--dt-ink)); }

/* Filter rail */
.filters { border-color: var(--upt-line, var(--dt-border)); border-radius: 10px; box-shadow: var(--upt-shadow-1, none); }
.fgroup { border-top-color: var(--upt-line, var(--dt-border)); }
.fgroup label { padding: 3px 6px; margin: 0 -6px; }

/* Tables: white header with a firm rule, roomier cells, no wrapping of short values, a soft hover */
.dt-table th { background: var(--dt-surface); font-size: 11px; letter-spacing: .06em; border-bottom: 1px solid var(--upt-line-strong, var(--dt-control-border)); padding: 10px 12px; }
.dt-table td { border-bottom-color: var(--upt-line, var(--dt-border)); }
.dt-table td.num, .dt-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { border-color: var(--upt-line, var(--dt-border)); border-radius: 10px; }
.tablewrap .dt-table td { padding: 12px; }
#rows td:nth-child(4), #rows td:nth-child(5), #rows td:nth-child(9) { white-space: nowrap; }   /* Nov 1: Last touch is the 9th column now (To-do is 8th) */
#rows td:nth-child(3) { min-width: 90px; max-width: 130px; }
#rows td:nth-child(6) { min-width: 150px; max-width: 175px; }
#rows .dr-room { padding: 2px 8px; }
#rows td { padding: 10px 7px; }
.listwrap .filters:not(.collapsed) { width: 214px; }
.listwrap .tablewrap .dt-table th { padding-left: 7px; padding-right: 7px; }
#rows .st-pill { font-size: 11.5px; }
/* Quinn, Oct 30: slight shading on every other row of the grid (and the other lists); hover and selection still win.
   Nov 2: lighter, the shared --upt-record-shade (theme.css), the same shade as the client grid */
#rows > tr:nth-child(even) > td, .home-table tbody tr:nth-child(even) td { background: var(--upt-record-shade, var(--dt-bg)); }
.listwrap .tablewrap .dt-table #rows > tr:nth-child(even) > td.dr-launch-cell { background: var(--upt-record-shade, var(--dt-bg)); }
#rows > tr:hover > td, .home-table tbody tr:hover td, .listwrap .tablewrap .dt-table #rows > tr:hover > td.dr-launch-cell { background: var(--upt-navy-soft, var(--dt-bg)); }
#rows > tr.sel > td { background: var(--upt-navy-soft, var(--dt-accent-soft)); }
#rows .dr-launch-cell .dt-btn.small { padding: 2px 8px; }
#rows td:nth-child(6) .dt-muted, #rows td:nth-child(2) .dt-muted { font-size: 12px; }
#rows button.dt-link.name b { color: var(--upt-navy, var(--dt-ink)); font-weight: var(--dt-weight-medium); font-size: 14.5px; }
#rows .ge-pen { opacity: 0; transition: opacity var(--upt-ease, 0s); }
#rows tr:hover .ge-pen, #rows .ge-pen:focus-visible { opacity: 1; }
/* the row actions stay in view at the right edge of a wide table */
.listwrap .tablewrap .dt-table td.dr-launch-cell, .listwrap .tablewrap .dt-table thead th:last-child { position: sticky; right: 0; background: var(--dt-surface); box-shadow: -6px 0 6px -6px var(--upt-line-strong, var(--dt-border)); }
.listwrap .tablewrap .dt-table thead th:last-child { z-index: 2; }
.listwrap .tablewrap .dt-table tr:hover td.dr-launch-cell { background: var(--upt-navy-soft, var(--dt-bg)); }

/* Status and approval pills: phase colours (text says the phase too, so colour is never the only sign) */
.st-pill, .ap-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: var(--dt-weight-medium); white-space: nowrap;
  border: 0; background: var(--upt-tint-grey, var(--dt-surface-alt)); color: var(--upt-ink-grey, var(--dt-ink)); }
.st-pill[data-phase="list-build"] { background: var(--upt-tint-grey); color: var(--upt-ink-grey); }
.st-pill[data-phase="outreach"] { background: var(--upt-tint-blue); color: var(--upt-ink-blue); }
.st-pill[data-phase="under-nda"] { background: var(--upt-tint-purple); color: var(--upt-ink-purple); }
.st-pill[data-phase="confirmed-interest"] { background: var(--upt-tint-green); color: var(--upt-ink-green); }
.st-pill[data-phase="passed"], .st-pill[data-phase="closed"] { background: var(--upt-tint-red); color: var(--upt-ink-red); }
.ap-pill[data-approval="approved"] { background: var(--upt-tint-green); color: var(--upt-ink-green); }
.ap-pill[data-approval="pending"] { background: var(--upt-tint-amber); color: var(--upt-ink-amber); }
.ap-pill[data-approval="rejected"] { background: var(--upt-tint-red); color: var(--upt-ink-red); }
.ap-pill[data-approval="held"] { background: var(--upt-tint-amber); color: var(--upt-ink-amber); }
.ap-pill[data-approval="excluded"] { background: var(--upt-tint-red); color: var(--upt-ink-red); }
.bulk { border-radius: 10px; }

/* Projects (home): a summary strip, then the list as a card */
#home .home-head > h2 { font-size: 22px; margin: 0 var(--dt-space-2) 0 0; }
.detail .dt-table.home-table { display: table; width: 100%; }
.home-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--dt-space-3); margin: var(--dt-space-3) 0; }
.home-kpi { background: var(--dt-surface); border: 1px solid var(--upt-line, var(--dt-border)); border-radius: 10px; padding: 14px 16px; box-shadow: var(--upt-shadow-1, none);
  }
.home-kpi b { display: block; font-size: 26px; font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink)); line-height: 1.2; font-variant-numeric: tabular-nums; }
.home-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dt-ink-muted); }
@media (max-width: 900px) { .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-card { margin-top: var(--dt-space-2); }
.home-table td:first-child a { color: var(--upt-navy, var(--dt-accent)); font-weight: var(--dt-weight-medium); text-decoration: none; }
.home-table td:first-child a:hover { text-decoration: underline; }

/* Target detail: a header card (name, status, the edit line), clean underline tabs, readable key/value lists */
.detail { background: var(--upt-page, var(--dt-bg)); }
.detail .dt-detail-head { background: var(--dt-surface); border: 1px solid var(--upt-line, var(--dt-border)); border-radius: 10px; box-shadow: var(--upt-shadow-1, none);
  padding: 14px 20px 16px; margin-bottom: var(--dt-space-2); }
.detail .dt-detail-head > .toolbar { border: 0; box-shadow: none; background: none; padding: 0; margin: 0 0 var(--dt-space-2); }
.detail .dtitle { font-size: 24px; font-weight: var(--dt-weight-medium); margin: 0 var(--dt-space-2) 0 var(--dt-space-1); }
/* Nov 8 2026 (Quinn): "<Targets" just above the name (its own small line); the name links to the target's website (https only) */
.detail .dt-detail-head > .dt-back-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--dt-space-1); }
.detail .dtitle .dt-title-link { color: inherit; text-decoration: none; }
.detail .dtitle .dt-title-link:hover, .detail .dtitle .dt-title-link:focus-visible { color: var(--upt-navy, var(--dt-accent)); text-decoration: underline; }
.detail .dt-detail-head .big { font-size: 15px; color: var(--upt-navy, var(--dt-ink)); padding: 2px 10px; border-radius: 999px; background: var(--upt-navy-soft, var(--dt-accent-soft)); }
.detail .dt-detail-head .row { margin-top: var(--dt-space-2); }
.detail .dt-detail-head .dt-edit-line { padding-top: var(--dt-space-3); margin-top: var(--dt-space-3); border-top: 1px solid var(--upt-line, var(--dt-border)); }
.detail .dt-save-lg { min-height: 34px; padding: 6px 22px; font-size: 15px; }
.dtabs { gap: 2px; margin: var(--dt-space-3) 0 var(--dt-space-4); border-bottom-color: var(--upt-line-strong, var(--dt-border)); }
.dtab { padding: 10px 14px; color: var(--dt-ink-muted); font-weight: var(--dt-weight-medium); border-bottom-width: 3px; border-radius: 6px 6px 0 0; }
.dtab:hover { color: var(--upt-navy, var(--dt-ink)); background: var(--upt-navy-soft, var(--dt-surface-alt)); }
.dtab.on, .dtab[aria-selected="true"] { color: var(--upt-navy, var(--dt-ink)); border-bottom-color: var(--upt-navy, var(--dt-accent)); font-weight: var(--dt-weight-medium); }
.detail .dt-box { padding: 18px 20px; }
.detail h2 { font-size: 16px; font-weight: var(--dt-weight-medium); margin-bottom: var(--dt-space-3); }
.detail .kv { border-collapse: collapse; }
.detail .kv td { padding: 6px 16px 6px 0; border-bottom: 1px solid var(--upt-line, var(--dt-border)); }
.detail .kv tr:last-child td { border-bottom: 0; }
.detail .kv { width: 100%; max-width: 720px; }
.detail .kv td:first-child, .detail .kv td.dt-muted { width: 180px; color: var(--dt-ink-muted); font-size: 13px; }
.upt-setov.dt-drawer, .detail.dt-drawer { box-shadow: var(--upt-shadow-2, none); }

/* Connect executed NDA (Oct 30): the file pick, the two choices (one per line), the button */
.dt-connect { display: grid; gap: 8px; }
.dt-connect .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dt-connect select.dt-input { max-width: 100%; min-width: 260px; }
.dt-connect-modes { display: grid; gap: 4px; }
.dt-connect-mode { display: block; cursor: pointer; }
.dt-connect-more { margin: 0 0 16px; }
.dt-connect-more > summary { cursor: pointer; color: var(--dt-ink-muted); font-size: 13px; }
.dt-connect-more[open] > summary { margin-bottom: 8px; }
/* Oct 31 (Quinn): sortable grid headers (button in each header; the arrow shows the order) */
.listwrap thead th .dt-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.listwrap thead th .dt-sort:hover { color: var(--upt-navy, var(--dt-ink)); text-decoration: underline; }
.listwrap thead th[aria-sort="ascending"] .dt-sort::after { content: " ▲"; font-size: .8em; }
.listwrap thead th[aria-sort="descending"] .dt-sort::after { content: " ▼"; font-size: .8em; }
.listwrap thead th[aria-sort="ascending"], .listwrap thead th[aria-sort="descending"] { color: var(--upt-navy, var(--dt-ink)); }
/* Oct 31 (Quinn): the "Data Room" button: plain until the NDA is signed and documents are released, then navy, darker with more documents and activity */
.dr-room[data-heat="1"] { background: var(--upt-heat-1); border-color: var(--upt-heat-1); color: var(--upt-navy, var(--dt-ink)); }
.dr-room[data-heat="2"] { background: var(--upt-heat-2); border-color: var(--upt-heat-2); color: var(--upt-navy, var(--dt-ink)); }
.dr-room[data-heat="3"] { background: var(--upt-heat-3); border-color: var(--upt-heat-3); color: var(--dt-brand-ink); }
.dr-room[data-heat="4"] { background: var(--upt-heat-4); border-color: var(--upt-heat-4); color: var(--dt-brand-ink); }
/* Nov 5 (Quinn): blue = no data room yet (was red); green = open, light to dark with activity; grey = closed (each ink 5.0:1 or more on its fill) */
.dr-room[data-room="none"] { background: var(--upt-tint-blue); border-color: var(--upt-ink-blue); color: var(--upt-ink-blue); }
.dr-room[data-room="closed"] { background: var(--upt-tint-grey); border-color: var(--upt-line-strong); color: var(--upt-ink-grey); }
.dr-room[data-room="open"][data-heat="1"] { background: var(--upt-room-1); border-color: var(--upt-room-1); color: var(--upt-ink-green); }
.dr-room[data-room="open"][data-heat="2"] { background: var(--upt-room-2); border-color: var(--upt-room-2); color: var(--upt-room-ink-2); }
.dr-room[data-room="open"][data-heat="3"] { background: var(--upt-room-3); border-color: var(--upt-room-3); color: var(--dt-surface); }
.dr-room[data-room="open"][data-heat="4"] { background: var(--upt-room-4); border-color: var(--upt-room-4); color: var(--dt-surface); }
.dr-room[data-heat]:not([data-heat="0"]):hover { filter: brightness(.95); }
/* Oct 31 (Quinn): Docs & Q&A: "Data room - …" and "Q&A and updates" are the same heading style, side by side at the same height */
.dt-target-comms > .toolbar { border: 0; box-shadow: none; padding: 0; margin: 0 0 var(--dt-space-3); background: none; }
.dt-target-comms > .toolbar h2, .dt-folder-head > .row:first-child > b { font-size: 16px; font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink)); margin: 0; line-height: 1.4; }
.dt-docs-col > .dt-box > .dt-docs > .dt-folder:first-child .dt-folder-head > .row:first-child { margin-top: 0; }
#rows td:nth-child(7) { max-width: 170px; }
#rows .st-pill { white-space: normal; line-height: 1.35; }
.dt-docs-col > .dt-box { overflow-x: auto; }   /* a wide documents table scrolls inside its own half, never over Q&A */

/* Oct 31 (Quinn): "View as target" button next to Remove target, and the read-only preview of the target's data room.
   Nov 8 2026 (Quinn): "These links need to be side by side horizontally rendered - not vertical." Settings, Remove target, Exclude for client
   and View as target sit in one row (wrapping on a narrow side panel), level with the target's name. */
.dt-head-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.tv-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--dt-space-3); flex-wrap: wrap; margin: var(--dt-space-2) 0 var(--dt-space-3);
  padding: 10px 14px; border-radius: 10px; background: var(--upt-tint-amber, var(--dt-accent-soft)); color: var(--upt-ink-amber, var(--dt-ink)); border: 1px solid var(--upt-line, var(--dt-border)); }
.tv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--dt-space-3); margin-bottom: var(--dt-space-2); }
.tv-title { font-size: 20px; margin: 0; }
.tv-where { font-size: 18px; margin: 2px 0 var(--dt-space-3); }
.tv-thread { padding: 10px 0; border-top: 1px solid var(--upt-line, var(--dt-border)); }
.tv-thread:first-child { border-top: 0; }
.tv-thread p { margin: 4px 0; }
.tv-preview .dt-docs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Oct 31 (Quinn): the Data Room pop-up: the link fills the row, Copy beside it */
.upt-nl-modal-box:has([data-part="dr-body"]) { width: min(40rem, 94vw); }
.upt-nl-modal-box .dt-roomlink .row { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
.upt-nl-modal-box .dt-roomlink-url { flex: 1; min-width: 0; }

/* Oct 31 (Quinn): the folder picker browses the project's library (breadcrumb, Open ›, Connect) */
.dt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: var(--dt-space-2) 0; }
.dt-folderrows > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--upt-line, var(--dt-border)); }
.dt-folderrows .dt-foldername { font-weight: var(--dt-weight-medium); }
.dt-folderrows .dt-folderacts { margin-left: auto; display: inline-flex; gap: 6px; }
.dt-noroom .row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--dt-space-2); }

/* Oct 31 (Quinn): drag and drop onto a file box (dashed; highlighted while a file is over it) */
.dt-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; margin: 6px 0; border: 1.5px dashed var(--upt-line-strong, var(--dt-border)); border-radius: 8px; background: var(--dt-surface); }
.dt-drop[data-over] { border-color: var(--upt-navy, var(--dt-brand)); background: var(--upt-row-alt, var(--dt-bg)); }
.dt-drop .dt-drop-hint { color: var(--dt-ink-muted); }
/* c5b (Qdog 5:52 PM): the NDA tab's start area is one large gray dashed drop zone (as on Docs & Q&A); Upload inside, "or drag and drop" the main line */
.dt-drop.dt-drop-lg { flex-direction: column; justify-content: center; min-height: 120px; padding: 20px 16px; background: var(--dt-surface-alt); text-align: center; }
.dt-drop.dt-drop-lg .dt-drop-hint { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; color: var(--dt-ink); font-size: 15px; }
.dt-drop.dt-drop-lg .dt-drop-main { font-weight: var(--dt-weight-medium); }
.dt-drop.dt-drop-lg input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.dt-nda-start-kinds { display: flex; flex-direction: column; gap: 6px; }
.dt-nda-start-kind { display: block; }
.dt-nda-start-kinds[aria-invalid="true"] { border-color: var(--dt-bad); }
/* KD-4: Settings > Kickoff documents, each slot's upload line (drop zone, .docx hint, buttons, status) */
.dt-kd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-2); }
.dt-kd-controls > [data-drop] { flex: 1 1 100%; }
.dt-kd-state[data-upload-state="refused"], .dt-kd-state[data-upload-state="error"] { color: var(--dt-bad); }
.dt-kd-state[data-upload-state="done"] { color: var(--dt-ok); }
/* KD-3b look nit (Quinn, Oct 31): each slot's "Found in SharePoint" list reads as a plain left-aligned list: never centered, no bullets */
.dt-kd-found { text-align: left; margin: var(--dt-space-2) 0 0; }
.dt-kd-found-list { list-style: none; padding-left: 0; margin: 4px 0 0; text-align: left; }
.dt-kd-found-list > li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 6px; padding: 4px 0; text-align: left; }
.dt-kd-found-list > li::marker { content: none; }
/* 438 (Nov 1, Quinn): compact Kickoff documents: one table row per document so every slot fits on one screen; the long help sits behind
   each row's ⓘ (a focusable button; its tip shows on hover or keyboard focus, and is the button's aria-describedby). */
.dt-kd-table { width: 100%; border-collapse: collapse; table-layout: auto; }
/* 438 review (MUST-FIX): Settings is a .detail page, whose ".detail .dt-table { display: block; overflow-x: auto }" made this table a scroll box,
   so a lower row's ⓘ tip (absolutely placed under its button) was clipped and the table grew its own scrollbar. This table is a normal
   table that never clips: the tip is drawn over what follows the table. A narrow screen wraps the cells instead of scrolling. */
.detail .dt-table.dt-kd-table, .dt-table.dt-kd-table { display: table; overflow: visible; }
.dt-kd-table th, .dt-kd-table td { padding: 4px 6px; vertical-align: middle; text-align: left; border-bottom: 1px solid var(--upt-line, var(--dt-border)); }
.dt-kd-table th { font-size: 12px; color: var(--dt-ink-muted); font-weight: var(--dt-weight-medium); white-space: nowrap; }
.dt-kd-doc { position: relative; min-width: 250px; }
.dt-kd-name { white-space: nowrap; }   /* 438 review (b): "N of T", the name, its tag and the ⓘ stay on one line */
.dt-kd-doc .dt-tag { margin-left: 4px; }
.dt-kd-no { display: inline-block; min-width: 3.2em; color: var(--dt-ink-muted); font-size: 12px; white-space: nowrap; }
.dt-kd-file { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-kd-date { white-space: nowrap; }
.dt-kd-fname { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }   /* 438 review: the table fits its card */
.dt-kd-actions { min-width: 240px; }
.dt-kd-row .dt-kd-controls { flex-wrap: nowrap; gap: 6px; }
.dt-kd-row .dt-kd-controls > [data-drop] { flex: 0 1 auto; }
.dt-kd-row .dt-drop { padding: 2px 8px; margin: 0; border-width: 1px; font-size: 12px; flex-wrap: nowrap; white-space: nowrap; }
/* 438 review (b): the drop zone's text stays on one line (rows were 77-95px tall with "Drop a / file here" wrapped); a drop's message may wrap */
.dt-kd-row .dt-drop [data-drop-msg] { white-space: normal; }
@media (max-width: 760px) { .dt-kd-doc, .dt-kd-actions { min-width: 0; } .dt-kd-row .dt-kd-controls { flex-wrap: wrap; } }   /* 438 review: narrow screens wrap, never scroll */
.dt-kd-row .dt-kd-found { margin: 2px 0 0; font-size: 12px; }
.dt-kd-remove td { background: var(--upt-row-alt, var(--dt-bg)); }
.dt-kd-remove .dt-input { max-width: 320px; }
.dt-kd-file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.dt-info { border: 0; background: none; padding: 0 2px; margin-left: 4px; cursor: help; color: var(--dt-ink-muted); font-size: 14px; line-height: 1; }
.dt-info:focus-visible { outline: 2px solid var(--upt-navy, var(--dt-brand)); border-radius: 4px; }
.dt-tip { display: none; position: absolute; z-index: 20; left: 0; top: 100%; width: max-content; max-width: min(420px, 80vw); white-space: normal; padding: 8px 10px; border-radius: 6px; background: var(--dt-surface);
  border: 1px solid var(--upt-line-strong, var(--dt-border)); box-shadow: var(--upt-shadow-1, none); font-size: 12px; font-weight: normal; color: var(--dt-ink); }
.dt-tip-line { display: block; margin: 2px 0; }
.dt-info:hover + .dt-tip, .dt-info:focus + .dt-tip, .dt-info:focus-visible + .dt-tip { display: block; }
/* 438 review (a): Escape hides a shown tip (infotip.js sets [hidden] until the pointer or focus leaves), WCAG 1.4.13 */
.dt-tip[hidden], .dt-info:hover + .dt-tip[hidden], .dt-info:focus + .dt-tip[hidden], .dt-info:focus-visible + .dt-tip[hidden] { display: none; }
/* 438: the NDA templates panel, kept, but tight: one line per template, its help behind the title's ⓘ */
.dt-nda-compact .dt-nda-title { position: relative; display: flex; align-items: center; gap: 4px; }
.dt-nda-compact .dt-nda-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; margin: 0; }
.dt-nda-compact .dt-nda-row .dt-setting-label { margin: 0 6px 0 0; }
.dt-nda-compact .dt-nda-row .dt-input { width: auto; min-width: 140px; padding: 2px 6px; }

/* Recipient activity (Nov 1): the Documents cell unfolds the documents a person opened */
.dt-recip-more summary { cursor: pointer; white-space: nowrap; }
.dt-recip-docs { margin: 6px 0 0; padding-left: 18px; }
.dt-recip-docs li { margin: 2px 0; }

/* Item 114 (Gap 1): Data-room access box (roomaccess.js) on a target's People section. */
.upt-roomaccess .upt-ra-toggle.on { border-color: var(--dt-ok); color: var(--dt-ok); }
.upt-ra-dialog { margin: var(--dt-space-2) 0; padding: var(--dt-space-3); border-radius: var(--dt-radius-sm); background: var(--dt-bad-soft); }
.upt-ra-field { display: block; margin-top: var(--dt-space-2); }
.upt-ra-field textarea { display: block; width: 100%; max-width: 40em; margin-top: var(--dt-space-1); }
.upt-ra-actions { display: flex; gap: var(--dt-space-2); margin-top: var(--dt-space-2); }

/* Staff to-dos (Nov 1): the grid's To-do column */

.td-todo { line-height: 1.3; }
.td-kind { margin-right: 2px; }

/* View as client (Nov 1): the read-only preview of the client's dashboard, Targets list and Review targets panel */
.cv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--dt-space-3); margin-bottom: var(--dt-space-3); }
.cv-kpis .kpi .big { font-size: var(--dt-size-xl); font-weight: var(--dt-weight-bold); }
.cv-preview .dt-box { margin-bottom: var(--dt-space-3); }
.cv-preview button[disabled] { cursor: not-allowed; }
/* To-dos (Nov 1 follow-up): the filter group's heading isn't a toggle; the grid cell wraps inside its column */
.td-head { cursor: default; }
#rows td.td-todo-cell { white-space: nowrap; }
.td-todo { display: block; }
.td-top { display: block; white-space: nowrap; }
.td-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* To-do pill (Nov 1, Quinn): the cell only says whether there is a to-do; hover lists them, a click opens the details */
.td-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--upt-bronze, var(--dt-accent)); background: var(--upt-bronze-soft, var(--dt-accent-soft));
  color: var(--upt-bronze-ink, var(--dt-ink)); border-radius: 999px; padding: 2px 10px; font: inherit; font-size: var(--dt-size-xs); font-weight: var(--dt-weight-medium); cursor: pointer; white-space: nowrap; }
.td-pill:hover { background: var(--upt-bronze-light, var(--dt-accent-soft)); }
.td-pill:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
.td-list { list-style: none; margin: var(--dt-space-2) 0; padding: 0; }
.td-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--dt-space-3); align-items: center; padding: var(--dt-space-2) 0; border-top: 1px solid var(--dt-border); }
.td-list li .td-line, .td-list li .td-what { grid-column: 1; }
.td-list li button { grid-column: 2; grid-row: 1 / span 2; }
/* Nov 1: bid comparison (bids.js): Key terms on the Process tab, Compare bids, Settings > Bid fields */
.bid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--dt-space-2) var(--dt-space-3); margin: var(--dt-space-2) 0; }
.bid-grid label { display: flex; flex-direction: column; gap: var(--dt-space-1); }
.bid-grid label.wide { grid-column: 1 / -1; }
.bid-grid .wide { grid-column: 1 / -1; }
/* PR B: a value filled from the proposal PDF ("from the file — check it") */
.bid-from { display: inline-block; margin-left: var(--dt-space-1); padding: 0 var(--dt-space-1); border: 1px solid var(--dt-warn); border-radius: var(--dt-radius-sm); color: var(--dt-ink); background: var(--dt-surface-alt); font-size: var(--dt-size-xs); cursor: help; }
.dt-input.bid-suggested { border-color: var(--dt-warn); background: var(--dt-surface-alt); }
.bid-table td, .bid-table th { white-space: nowrap; }
.bid-table td.small { white-space: normal; min-width: 180px; }
.bid-chart { display: flex; flex-direction: column; gap: var(--dt-space-1); }
.bid-bar-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: var(--dt-space-2); }
.bid-bar-track { display: block; height: 14px; background: var(--dt-bg); border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); overflow: hidden; }
.bid-bar { display: block; position: relative; height: 100%; background: var(--dt-brand); }
.bid-bar-low { display: block; height: 100%; background: var(--dt-accent-soft); opacity: 0.55; }
.bid-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .bid-bar-row { grid-template-columns: 1fr; } }
/* PR5 c3 (B5): the bulk upload list in each data room header. Rows wrap at narrow widths; state is data-state, progress is <progress>. */
.dt-bulk { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dt-bulk [hidden] { display: none !important; }
.dt-bulk-bar { gap: 8px; align-items: center; }
.dt-bulk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dt-bulk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 8px; border: 1px solid var(--dt-border); border-radius: 6px; background: var(--dt-surface); }
.dt-bulk-row .dt-bulk-file { font-weight: var(--dt-weight-medium); overflow-wrap: anywhere; max-width: 28ch; }
.dt-bulk-row .dt-bulk-name { flex: 1 1 14em; min-width: 10em; overflow-wrap: anywhere; cursor: text; }
.dt-bulk-row .dt-bulk-name .dt-input { width: 100%; box-sizing: border-box; }
.dt-bulk-row progress { width: 90px; }
.dt-bulk-row .dt-bulk-status { flex-basis: 100%; }
.dt-bulk-row[data-state="blocked"] { background: var(--dt-bad-soft, var(--dt-surface)); }
.dt-bulk-row[data-state="blocked"] .dt-bulk-status, .dt-bulk-row[data-state="failed"] .dt-bulk-status, .dt-bulk-row[data-state="unchecked"] .dt-bulk-status { color: var(--dt-bad); }
/* Nov 1: deal close-out (closeout.js): five step cards, the checklist, the client report (printable). Theme variables only. */
.co-view .co-step { margin-bottom: var(--dt-space-3); }
.co-step h3 { display: flex; align-items: center; gap: var(--dt-space-2); }
.co-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dt-brand); color: var(--dt-brand-ink); font-size: var(--dt-size-sm); }
.co-field { display: flex; flex-direction: column; gap: var(--dt-space-1); margin: var(--dt-space-2) 0; }
.co-preview { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); background: var(--dt-surface-alt); padding: var(--dt-space-2) var(--dt-space-3); margin: var(--dt-space-2) 0; }
.co-preview-body { white-space: pre-wrap; margin-top: var(--dt-space-1); }
.co-checklist { list-style: none; padding: 0; margin: 0 0 var(--dt-space-3); }
.co-checklist li { padding: var(--dt-space-1) 0; border-bottom: 1px solid var(--dt-border); }
.co-mark { display: inline-block; width: 1.4em; text-align: center; font-weight: var(--dt-weight-bold); }
.co-mark.co-done { color: var(--dt-ok); }
.co-mark.co-todo { color: var(--dt-warn); }
.co-mark.co-skipped { color: var(--dt-ink-muted); }
.co-winner-tag { background: var(--dt-ok-soft); color: var(--dt-ink); border-color: var(--dt-ok); }
.co-report { border: 1px solid var(--dt-border); border-radius: var(--dt-radius); background: var(--dt-surface); padding: var(--dt-space-3); margin-top: var(--dt-space-2); }
.co-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--dt-space-2); margin: var(--dt-space-2) 0; }
.co-stat { border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); padding: var(--dt-space-2); background: var(--dt-surface-alt); }
.co-stat .big { font-size: var(--dt-size-xl); font-weight: var(--dt-weight-medium); }
@media print {
  body.co-printing header, body.co-printing .toolbar, body.co-printing #banner, body.co-printing #app,
  body.co-printing .co-view > .dt-detail-head, body.co-printing .co-step:not([data-part="co-report-card"]),
  body.co-printing [data-part="co-report-card"] > :not(.co-report) { display: none !important; }
  body.co-printing .co-report { border: 0; padding: 0; }
  body.co-printing .tablewrap { overflow: visible; box-shadow: none; }
}
/* Dashboard (Nov 2): every home column sorts (house arrow on aria-sort; a faint double arrow when not sorted) and filters (a funnel
   button + a small popover); a Status cell (dropdown for Project Admins, text otherwise); a "Link to Project" button; the Status dialog. */
.home-table th.home-th { position: relative; white-space: nowrap; }
.home-table th[aria-sort="none"] .dt-sort::after { content: " ↕"; font-size: .75em; opacity: .35; }
.home-table th[aria-sort="ascending"], .home-table th[aria-sort="descending"] { color: var(--upt-navy, var(--dt-ink)); }
.home-filter-btn { background: none; border: 0; padding: 0 2px; margin-left: 4px; cursor: pointer; color: var(--dt-ink-muted, inherit); vertical-align: middle; font: inherit; }
.home-filter-btn::before { content: "⏷"; font-size: .8em; }
.home-filter-btn.on { color: var(--upt-navy, var(--dt-accent)); }
.home-filter-btn.on::before { content: "⏷●"; }
.home-filter-btn:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 2px; }
.home-filter-pop { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 200px; background: var(--dt-surface); border: 1px solid var(--upt-line, var(--dt-border)); border-radius: 8px; padding: 8px; box-shadow: var(--upt-shadow-1); display: flex; flex-direction: column; gap: 6px; text-transform: none; letter-spacing: normal; font-weight: 400; white-space: normal; }
.home-table th.num .home-filter-pop { left: auto; right: 0; }
/* while a column filter is open the card stops clipping, so the pop-over is never cut off by the table's sideways scroll box */
.tablewrap.home-filter-open { overflow: visible; }
.home-table th:last-child .home-filter-pop, .home-table th:nth-last-child(2) .home-filter-pop { left: auto; right: 0; }
.home-filter-pop .home-pick { display: flex; align-items: center; gap: 6px; }
.home-status-select { padding: 2px 6px; min-width: 120px; }
.home-status[data-status="deactivated"] { color: var(--dt-bad); }
.home-status[data-status="closed"] { color: var(--dt-ink-muted, inherit); }
.home-table td.home-link-cell { text-align: right; white-space: nowrap; }
.home-table td.home-link-cell a.home-link { color: inherit; font-weight: 400; text-decoration: none; }
.home-dlg-back { position: fixed; inset: 0; background: var(--dt-overlay); display: flex; align-items: center; justify-content: center; z-index: 50; }
.home-dlg { background: var(--dt-surface); border-radius: 12px; padding: 20px 22px; max-width: 520px; width: calc(100% - 32px); box-shadow: var(--dt-shadow-dialog); display: flex; flex-direction: column; gap: 10px; }
.home-dlg h3 { margin: 0; }
.home-dlg textarea, .home-dlg input[type="text"] { width: 100%; box-sizing: border-box; }

/* Quinn (Nov 2): Link to Project copies the link; the "Link copied" note by the button (theme tokens only) */
.home-copied { margin-left: var(--dt-space-2); color: var(--dt-ok); font-size: .85em; }

/* Quinn (Nov 2): the dashboard row's Settings overlay (in-page, Team & permissions); theme tokens only */
.home-link-cell .dt-btn + .dt-btn { margin-left: var(--dt-space-2); }
.upt-setov-back { position: fixed; inset: 0; background: var(--dt-overlay); z-index: 60; }
.upt-setov.dt-drawer { display: flex; flex-direction: column; overflow: hidden; animation: upt-setov-in 0.2s ease-out; }   /* slide-over: the grid drawer's rule above places it (right, ~2/3) */
.upt-setov-head { display: flex; align-items: center; gap: var(--dt-space-2); padding: var(--dt-space-2) var(--dt-space-3); border-bottom: 1px solid var(--dt-border); }
.upt-setov-head .grow { flex: 1; }
.upt-setov-title { font-size: var(--dt-size-lg); margin: 0; }
.upt-setov-body { flex: 1; min-height: 0; overflow: auto; padding: var(--dt-space-3); }
.upt-setov #settings { margin: 0; max-width: none; padding: 0; box-shadow: none; border: 0; }
.upt-setov #settings .upt-settings-nav { top: 0; }
@keyframes upt-setov-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .upt-setov.dt-drawer { animation: none; } }
.upt-setov .detail-head, .upt-setov .dt-detail-head { position: static; }
/* Nov 2 (Quinn, Demo 1): the version-card stream (theme/versionstream.js). ONE row of cards, oldest on the left, scrolling sideways;
   each card names its party by company name. The target's cards have an accent top edge, the client's (and Uplift's for it) a grey one;
   cards not sent yet are dashed; the newest sent card is ringed. The upload box is the last card. */
.vs-stream { display: flex; gap: var(--dt-space-3); align-items: stretch; overflow-x: auto; padding: var(--dt-space-2) 2px var(--dt-space-3); scroll-snap-type: x proximity; }
.vs-card { flex: 0 0 auto; width: 232px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm);
  background: var(--dt-surface); padding: var(--dt-space-2) var(--dt-space-3); scroll-snap-align: start; min-width: 0; }
.vs-card.target { border-top: 3px solid var(--dt-accent); }
.vs-card.client { border-top: 3px solid var(--dt-control-border); }
.vs-card.held, .vs-card.vs-next { border-style: dashed; }
.vs-card.latest { box-shadow: 0 0 0 2px var(--dt-brand); }
.vs-tail { flex: 0 0 auto; display: flex; }
.vs-tail > .vs-card { width: 280px; }
.vs-stack { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--dt-space-2); }   /* Nov 6: files sent together (one Send), stacked */
.vs-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-1) var(--dt-space-2); min-width: 0; }   /* c2: wraps so the party name never shrinks to a letter */
.vs-num { font-size: var(--dt-size-xs); font-weight: var(--dt-weight-medium); color: var(--dt-accent); background: var(--dt-accent-soft); border-radius: 999px; padding: 1px 8px; flex: 0 0 auto; }
.vs-party { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vs-latest { margin-left: auto; flex: 0 0 auto; }
.vs-name { font-weight: var(--dt-weight-medium); overflow-wrap: anywhere; }
.vs-file { color: var(--dt-ink-muted); overflow-wrap: anywhere; }   /* Nov 7: the uploaded file's full name, with its extension */
/* Nov 8 (Quinn): grouped NDA columns: the party and side once at the top, mini cards, the Sent line once at the bottom */
.vs-group { flex: 0 0 auto; width: 252px; display: flex; flex-direction: column; gap: var(--dt-space-2); border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); padding: var(--dt-space-3); background: var(--dt-surface); }
.vs-group.target { border-top: 3px solid var(--dt-accent); }
.vs-group.client { border-top: 3px solid var(--dt-control-border); }
.vs-group.held { border-style: dashed; }
.vs-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-space-1) var(--dt-space-2); min-width: 0; }
.vs-group-list { display: flex; flex-direction: column; gap: var(--dt-space-2); }
.vs-group .vs-card.vs-mini { width: auto; border-top-width: 1px; border-style: solid; padding: var(--dt-space-2); }
.vs-group .vs-card.vs-mini.latest { box-shadow: 0 0 0 2px var(--dt-brand); }
.vs-group-foot { margin-top: auto; }
@media (max-width: 1100px) { .vs-group { width: 228px; } }
.vs-sent.warn { color: var(--dt-ink-muted); font-style: italic; }
.vs-links { margin-top: auto; padding-top: 4px; gap: var(--dt-space-2); }
.vs-upload { display: flex; flex-direction: column; gap: var(--dt-space-2); }
.vs-upload input[type="file"] { max-width: 100%; }
@media (max-width: 1100px) { .vs-card { width: 208px; } .vs-tail > .vs-card { width: 248px; } }

/* c2 (Nov 3): the NDA timeline is one stream of version cards (no lanes): the side tag on each card, the staff extras, and the working
   copy + upload box together at the end */
.vs-side { flex: 0 0 auto; }
.vs-extra { display: flex; flex-direction: column; gap: var(--dt-space-1); }
/* Email not sent (Quinn GO, Nov 3): what happened to the email behind an NDA version / a room invite */
.vs-emails { display: flex; flex-direction: column; gap: 2px; }
.pp-ri-row.warn { color: var(--dt-warn); }
.dt-nda-tail { display: flex; gap: var(--dt-space-3); align-items: stretch; }
.dt-nda-tail > .vs-card { width: 280px; }
/* Shareable links (Nov 2): the item a link names (thread / document / NDA version / round), by class only (never style=) */
.upt-linked { outline: 2px solid var(--dt-focus); outline-offset: 2px; border-radius: var(--dt-radius-sm); background: var(--dt-accent-soft); }
.upt-linked:focus { outline-width: 3px; }
/* Quick discard (Quinn, Nov 3): a trash-can icon (inline SVG mask, drawn in the text colour) on the grid's Remove and the dashboard's De-activate */
.dt-trash::before { content: ""; display: inline-block; width: 14px; height: 14px; vertical-align: -2px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat; }
#bulk-remove.dt-trash::before { margin-right: 4px; }
.home-trash { margin-left: 2px; padding-left: 5px; padding-right: 5px; }
.home-trash:hover { color: var(--dt-warn); border-color: var(--dt-warn); }
/* Nov 4 (Quinn): the grid row's buttons in a compact 2 x 2 block (Data Room over Invite Link; the side-panel icon over the trash can), so
   the sticky right-hand column is about half as wide and the Client column fits at 1440px */
#rows .dr-acts { display: flex; gap: 4px; justify-content: flex-end; align-items: flex-start; }
#rows .dr-acts-col { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
#rows .dr-acts-col > .dt-btn.small { margin: 0; white-space: nowrap; text-align: center; }
#rows .dr-acts-icons > .dt-btn.small { min-width: 30px; padding: 2px 6px; }
#rows .dr-trash { margin-left: 0; }
#rows .dr-trash::before { margin: 0; }
/* Fields v2 part 2 (Nov 4): Settings > Target profile fields as one table, and its Values pop-up */
.ft-table td, .ft-table th { vertical-align: top; }
.ft-table .dt-input.small { min-width: 140px; width: 100%; box-sizing: border-box; }
.ft-table tr.ft-std b { color: var(--upt-navy, var(--dt-ink)); }
.ft-add { margin-top: var(--dt-space-2); gap: 6px; flex-wrap: wrap; align-items: center; }
.ft-overlay { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: flex-start; padding-top: 8vh; }
.ft-backdrop { position: absolute; inset: 0; background: var(--dt-overlay); }
.ft-panel { position: relative; background: var(--dt-surface); border-radius: var(--dt-radius); box-shadow: var(--dt-shadow-dialog); padding: var(--dt-space-4);
  width: min(560px, 94vw); max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--dt-space-2); }
.ftv-list { margin: 0; padding-left: 24px; }
.ftv-list li { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.ftv-list .ftv-v { flex: 1; }
.ft-table td.nowrap { white-space: nowrap; }
.ft-panel > .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-panel > .row > .grow { flex: 1; }
/* Nov 5: the field table fits the Settings card: tighter cells, headings that wrap, narrower text boxes (they still grow with the cell). */
.ft-table th { white-space: normal; padding: 8px 6px; font-size: 12px; }
.tablewrap .dt-table.ft-table td { padding: 8px 6px; }
.ft-table .dt-input { width: 100%; min-width: 110px; max-width: 170px; }
.ft-table td .dt-muted.small { display: inline-block; max-width: 140px; }
/* Phase / Status per project, part 5 (Nov 4; workflowset.js): the summary and the Status pop-up's grid (phases across the top). */
.ws-summary, .ws-grid { display: flex; gap: var(--dt-space-3); overflow-x: auto; align-items: flex-start; }
.ws-col { min-width: 200px; flex: 0 0 auto; border: 1px solid var(--dt-border); border-radius: var(--dt-radius); padding: var(--dt-space-2); background: var(--dt-surface); }
.ws-col ul { margin: 4px 0 0; padding-left: 18px; }
.ft-panel.ws-panel { width: min(1100px, 96vw); }
.ws-add { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
/* Nov 5: Add target "More fields": a multi-select is a row of checkboxes. */
.at-multi { display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* Nov 5 (Quinn): the Data Room pop-up's "Send the data-room link" section */
.dt-rls { margin-top: var(--dt-space-3); border-top: 1px solid var(--dt-border); padding-top: var(--dt-space-2); }
.dt-rls h3 { font-size: var(--dt-size-sm); margin: 0 0 var(--dt-space-1); }
.dt-rls-list { display: flex; flex-direction: column; gap: var(--dt-space-1); margin: var(--dt-space-2) 0; }
.dt-rls-edit { display: flex; flex-direction: column; gap: var(--dt-space-2); }
.dt-rls-edit label { display: flex; flex-direction: column; gap: var(--dt-space-1); }
/* Nov 6 (Quinn): "Copy link for Outlook": the contact's own link, shown once in a read-only box */
.dt-rls-made { margin-top: var(--dt-space-2); }
.dt-rls-made .dt-roomlink-url { width: 100%; box-sizing: border-box; }
/* Copy emails (Nov 6, Quinn: "quickly copy email addresses by hovering over them and allowing me to copy and paste into an outlook email";
   copyemail.js). Each address's Copy button shows while its row / cell / card is hovered or while it has keyboard focus (opacity only, never
   display:none, so Tab still reaches it); with no hover (touch screens) it is always shown. The word "Copy" is drawn here (the button's
   name is its aria-label "Copy <address>"). "Copy all emails" sits under its list. Theme colours only. */
.upt-ec-tools { display: inline-flex; align-items: center; gap: var(--dt-space-1); margin-left: var(--dt-space-1); vertical-align: middle; white-space: nowrap; }
.upt-ec-btn { flex: none; font: inherit; font-size: var(--dt-size-xs); line-height: 1.4; padding: 0 6px; border: 1px solid var(--dt-control-border); border-radius: var(--dt-radius-sm); background: var(--dt-surface); color: var(--dt-accent); cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.upt-ec-btn::before { content: "Copy"; }
.upt-ec-btn:hover { background: var(--dt-accent-soft); }
.upt-ec-btn:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 1px; }
:is(tr, li, .item, .upt-ec, .ct-email-row, .dt-rls-line, .tc-lines, .pp-req, .upt-ec-tools):hover .upt-ec-btn, .upt-ec-btn:focus, .upt-ec-btn:focus-visible { opacity: 1; }
@media (hover: none) { .upt-ec-btn { opacity: 1; } }
/* an empty status line takes no room but stays in the accessibility tree (never display:none), so "Copied" is read out when it appears */
.upt-ec-status:empty, .upt-ecall-status:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-email-row { display: flex; align-items: center; gap: var(--dt-space-1); max-width: 100%; }
.ct-email-row > .ct-email { min-width: min(calc(100% - 4em), 220px); }
.ct-email-row > .upt-ec-tools { margin-left: 0; }
.upt-ecall { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--dt-space-2); }
.pp-copyall, .upt-team-copyall { margin: var(--dt-space-2) 0; }
.dt-rls-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dt-space-1); }
.dt-rls > .upt-ecall { margin: var(--dt-space-1) 0 var(--dt-space-2); }
/* NDA box: Release the materials (Quinn, Nov 8 2026: "The "Release the materials" button should appear off to the far right and be fairly
   prominent"; ndaflow.js releaseButton). Its own row at the bottom of "Where the NDA is", pushed to the right edge; a larger primary button. */
.dt-nda-release-row { display: flex; justify-content: flex-end; }
.dt-nda-release-row .dt-nda-release { font-size: var(--dt-size-lg); padding: var(--dt-space-2) var(--dt-space-5); }
/* Description editor (Nov 9 2026, Quinn: "act and perform like the email composer in Outlook ... Make it 3x as wide initially and keep the
   ability for users to expand it"): the email composer's editor in a box 3x the old text box (240px -> 720px), dragged larger from its corner. */
.dt-desc-editor { width: 720px; max-width: 100%; height: 260px; min-width: 320px; min-height: 160px; resize: both; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
.dt-desc-editor .ql-toolbar.ql-snow { flex: 0 0 auto; }
.dt-desc-editor .dt-desc-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dt-desc-editor .ql-container.ql-snow { flex: 1 1 auto; min-height: 0; font-family: inherit; font-size: inherit; }
.dt-desc-editor .ql-editor { min-height: 100%; }
.dt-desc-editor .ql-editor p { margin: 0; }
.dt-desc-editor .ql-snow .ql-picker.ql-font { width: 130px; }
.dt-desc-editor .ql-snow .ql-picker.ql-font .ql-picker-label::before, .dt-desc-editor .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "Default"; }
.dt-desc-editor .ql-snow .ql-picker.ql-font [data-value="calibri"]::before { content: "Calibri"; }
.dt-desc-editor .ql-snow .ql-picker.ql-font [data-value="arial"]::before { content: "Arial"; }
.dt-desc-editor .ql-snow .ql-picker.ql-font [data-value="georgia"]::before { content: "Georgia"; }
.dt-desc-editor .ql-snow .ql-picker.ql-font [data-value="times"]::before { content: "Times New Roman"; }
.dt-desc-editor .ql-snow .ql-picker.ql-font [data-value="verdana"]::before { content: "Verdana"; }
.dt-desc-editor .ql-snow .ql-picker.ql-font [data-value="courier"]::before { content: "Courier New"; }
/* the link box's refusal text (compose_ui.js httpsLinkRules): under the address box, only while the box is open */
.dt-desc-editor .ql-snow .ql-tooltip .ql-link-msg { display: block; white-space: normal; max-width: 260px; margin-top: var(--dt-space-1); color: var(--dt-bad); font-size: var(--dt-size-xs); line-height: 1.3; }
.dt-desc-editor .ql-snow .ql-tooltip .ql-link-msg:empty, .dt-desc-editor .ql-snow .ql-tooltip:not(.ql-editing) .ql-link-msg { display: none; }

/* Settings > Basics (Nov 6, Quinn: "make this look a bit more professional and of course keep it consistent with the other tabs. Spacing
   looks off."; projectbasics.js): the same groups, fields, inline errors and read-only list as Settings > Email & outreach (P5 above), with
   wider boxes for names. Theme tokens only. */
#settings .upt-basics { display: block; }   /* review: no gap; groups meet like Email & outreach's (border-top + padding only) */
#settings .upt-basics .upt-group { border: 0; border-top: 1px solid var(--dt-border); margin: 0; padding: var(--dt-space-3) 0 0; min-width: 0; }
#settings .upt-basics .upt-group:first-child { border-top: 0; padding-top: 0; }
#settings .upt-basics .upt-group-title { font-size: var(--dt-size-sm); font-weight: var(--dt-weight-medium); color: var(--upt-navy, var(--dt-ink)); padding: 0; margin: 0 0 var(--dt-space-2); }
#settings .upt-basics .upt-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dt-space-1); }
#settings .upt-basics .upt-field .dt-input { width: 100%; max-width: 480px; box-sizing: border-box; }
#settings .upt-basics .dt-input:focus-visible { outline: 2px solid var(--dt-focus); outline-offset: 1px; }
#settings .upt-basics .dt-input[aria-invalid="true"] { border-color: var(--dt-bad); }
#settings .upt-basics .upt-field-error { color: var(--dt-bad); }
#settings .upt-basics .upt-field-error:empty { display: none; }
#settings .upt-basics .upt-status-list { margin: 0; }
#settings .upt-basics-client { display: flex; flex-direction: column; gap: var(--dt-space-1); min-width: 0; }
#settings .upt-basics-search { display: flex; gap: var(--dt-space-2); align-items: center; max-width: 480px; }
#settings .upt-basics .upt-basics-search > .dt-input { flex: 1 1 auto; min-width: 0; }
#settings .upt-basics-hits { list-style: none; margin: 0; padding: 0; }
#settings .upt-basics-hits > li { padding: 2px 0; }
#settings .upt-basics-pick { display: flex; flex-wrap: wrap; gap: var(--dt-space-2); align-items: baseline; margin: 0; }
#settings .upt-basics-sublabel { display: block; margin-top: var(--dt-space-2); font-size: var(--dt-size-xs); color: var(--dt-ink-muted); }
#settings .upt-basics-wrap > .upt-danger { margin-top: var(--dt-space-4); }
/* Add target pop-up (Nov 2, Demo 1 item 8; addtarget_ui.js). Same dialog frame as Smart import (.si-*). c5 (Quinn: "match Add project"): the
   form uses the New project page's own classes (.upt-newproject on the dialog: .np-group, .np-row, .np-label, .np-control, .dt-hint,
   .dt-field-error, .np-footer), so its layout rules are the ones above, not copies. Left here: the panel width (New project's two columns
   plus the body's padding), the read-only Client, the type-ahead list inside the dialog, the duplicate panel and the after-save row. */
.at-dialog { width: min(calc(var(--np-label-w) + var(--np-control-max) + 4 * var(--dt-space-4)), calc(100vw - 32px)); }
.at-ro .dt-input { background: var(--dt-bg); color: var(--dt-ink-muted); }
.at-dup[hidden] { display: none; }
.at-dialog .upt-ac { position: relative; }
.at-dialog .upt-ac-list { position: absolute; z-index: 5; left: 0; right: 0; top: 0; margin: 2px 0 0; padding: 4px 0; list-style: none; max-height: 220px; overflow: auto;
  background: var(--dt-surface); border: 1px solid var(--dt-border); border-radius: var(--dt-radius-sm); box-shadow: var(--dt-shadow-dialog); }
.at-dialog .upt-ac-list[hidden] { display: none; }
.at-dialog .upt-ac-opt { padding: 4px 10px; cursor: pointer; font-size: var(--dt-size-sm); }
.at-dialog .upt-ac-opt.on, .at-dialog .upt-ac-opt:hover { background: var(--dt-accent-soft); }
.at-dialog .upt-ac-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.at-dup { margin: 0 var(--dt-space-4) var(--dt-space-2); padding: 8px 12px; border-radius: var(--dt-radius-sm); background: var(--dt-accent-soft); font-size: var(--dt-size-sm); }
.at-dup[data-from="server"][data-kind^="website"] { background: var(--dt-bad-soft); }
.at-dup p { margin: 0 0 6px; }
.at-dup-acts { display: flex; gap: var(--dt-space-2); flex-wrap: wrap; align-items: center; }
.at-added > td { background: var(--dt-accent-soft); }
.at-open { margin-left: var(--dt-space-2); }
@media (max-width: 760px) { .at-dialog { width: 100vw; } }
/* O1 (Qdog, Nov 2): inside the overlay only, the Team table fits the dialog (no sideways scroll at 1024px and wider): cells and actions wrap */
.upt-setov .upt-team-scroll { overflow-x: visible; }
.upt-setov .dt-table.upt-team-table { table-layout: auto; width: 100%; }
.upt-setov .dt-table.upt-team-table th, .upt-setov .dt-table.upt-team-table td { padding: var(--dt-space-1); white-space: normal; }
.upt-setov .dt-table.upt-team-table td[data-col="email"] { overflow-wrap: anywhere; }
.upt-setov .upt-team-actions .dt-btn { white-space: nowrap; }
.upt-setov .dt-table.upt-team-table td[data-col="email"], .upt-setov .dt-table.upt-team-table td.upt-team-actions { white-space: normal; }
.upt-setov .upt-team-actions-row { flex-wrap: wrap; }
.upt-setov .upt-team-addrow .dt-input, .upt-setov .upt-team-table select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.upt-setov .upt-team-table select { width: 100%; }   /* the role select shrinks to its column so the table fits beside the menu at 1280 */