/*
 * Team Assignments — manager overview (round 6).
 * Loaded on top of campaigns.css (index chrome), campaign_page.css
 * (cpv1 pickers / state menus / badges) and creative_page.css (workflow
 * palette). Carries only what this page adds: section heads, the person
 * token, the numeric cells, the editable-pill signal, the drawer, and
 * the P0.7 external-change flash. Tokens only; measurements per the
 * handoff's MEASUREMENTS.md.
 */

/* ---------- Section heads (shared/_section_head) ---------- */
.ta-board .cpv1-sec-h {
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px 20px 8px;
}
.ta-board .cpv1-sec-title {
  margin: 0; padding-bottom: 3px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg);
  border-bottom: 2px solid var(--color-slate-900);
}
.ta-board .cpv1-sec-toggle {
  margin-left: auto; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; color: var(--fg-muted); cursor: pointer;
}
.ta-board .cpv1-sec-toggle:hover { color: var(--fg); }

/* ---------- Tables ---------- */
.ta-board .cpv1-tbl td { white-space: nowrap; vertical-align: middle; }
/* The name column takes whatever the card leaves after the fixed columns
 * (table-layout: fixed) — the handoff's 340px assumes a 1280px card. */
.ta-board .cpv1-tbl th.ta-col-name, .ta-board .cpv1-tbl td.ta-col-name { width: auto; }
.ta-board .cpv1-tbl th.ta-col-state, .ta-board .cpv1-tbl td.ta-col-state { width: 150px; }
.ta-board .cpv1-tbl th.ta-col-who, .ta-board .cpv1-tbl td.ta-col-who { width: 150px; }
.ta-board .cpv1-tbl th.ta-col-date, .ta-board .cpv1-tbl td.ta-col-date { width: 98px; }
.ta-board .cpv1-tbl th.ta-col-datetime, .ta-board .cpv1-tbl td.ta-col-datetime { width: 170px; }
.ta-board .cpv1-tbl th.ta-col-n, .ta-board .cpv1-tbl td.ta-col-n { width: 74px; text-align: right; }
.ta-board .cpv1-tbl th.ta-col-send, .ta-board .cpv1-tbl td.ta-col-send { width: 110px; }
.ta-board .cpv1-tbl th.ta-col-campaign, .ta-board .cpv1-tbl td.ta-col-campaign { width: auto; }
.ta-board td.ta-col-name, .ta-board td.ta-col-campaign { overflow: hidden; text-overflow: ellipsis; }
/* Cells hosting overlays (menus, pickers) and full names must not clip. */
.ta-board td.ta-col-who, .ta-board td.ta-col-state, .ta-board td.ta-col-datetime { overflow: visible; }
.ta-board .ta-name { font-size: 13px; font-weight: 500; color: var(--fg); }
.ta-board a.ta-link { color: var(--fg); text-decoration: none; }
.ta-board a.ta-link:hover { text-decoration: underline; }
.ta-board .cpv1-data-row[data-controller~="row-link"] { cursor: pointer; }
.ta-board .cpv1-data-row[data-controller~="row-link"]:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: -2px; }

/* Numeric cells: mono, tabular, right-aligned; 0 faint; bold = behind. */
.ta-board .ta-num {
  font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.ta-board .ta-num--zero, .ta-board .ta-num--none { color: var(--fg-faint); }
.ta-board .ta-num--over { font-weight: 700; }

/* Dates: MM/DD/YYYY in mono. */
.ta-board .ta-date { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.ta-board button.ta-date--edit {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg);
  border-bottom: 1px dotted var(--color-slate-400);
}
.ta-board .ta-date--empty { color: var(--fg-faint); font-style: italic; }

/* ---------- Editable pills ---------- */
.ta-board .ta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 2px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 500; line-height: 1;
  border-style: dotted; cursor: pointer;
}
.ta-board .ta-pill--sealed { border-style: solid; cursor: default; }
.ta-board .ta-state { position: relative; display: inline-block; }
.ta-board .ta-state .cpv1-state-menu { left: 0; }

/* ---------- Person tokens ---------- */
.ta-board .ta-who-cell, .ta-board .ta-date-cell { position: relative; display: block; }
.ta-board .ta-who {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--fg);
}
.ta-board .ta-who--static { cursor: default; }
.ta-board .ta-tok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 3px; background: var(--color-slate-100);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--fg-muted);
}
.ta-board .ta-who-nm { border-bottom: 1px dotted var(--color-slate-400); max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-board .ta-who--static .ta-who-nm { border-bottom: 0; }
.ta-board .ta-who-car { font-size: 8px; color: var(--fg-faint); }
.ta-board .ta-who--none .ta-who-nm { color: var(--color-danger-text); font-style: italic; }
/* Row-hosted pickers open below their cell; the overlay controller pins
 * them to the screen when the viewport would clip them. */
.ta-board .creative-picker-anchor > turbo-frame > .cpv1-picker { min-width: 320px; }

/* ---------- Sends section ---------- */
.ta-board .ta-sends-empty { margin: 0 20px 20px; }

/* ---------- Drawer (edit-in-place-drawer, 430px; no backdrop — the
   page beside it stays visible and clickable) ---------- */
.ta-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200;
  width: 430px; max-width: 92vw;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.10);
  transform: translateX(100%);
  transition: transform 240ms ease-out;
}
.ta-drawer--open { transform: translateX(0); }
.ta-drawer > turbo-frame, .ta-dw { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ta-dw-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.ta-dw-kind {
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--fg-muted);
}
.ta-dw-title { margin: 3px 0 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--fg); white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.ta-dw-head-block { min-width: 0; flex: 1; }
.ta-dw-title-field { cursor: text; border-radius: var(--r-input); }
.ta-dw-title-field:hover { box-shadow: inset 0 0 0 1px var(--color-slate-200); }
.ta-dw-x { padding: 2px 6px; border: 0; background: none; font-size: 14px; color: var(--fg-muted); cursor: pointer; }
.ta-dw-x:hover { color: var(--fg); }
.ta-dw-body { flex: 1; overflow: auto; padding: 4px 16px 16px; }
.ta-dw-sec {
  margin: 16px 0 8px; padding-bottom: 4px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-muted);
  border-bottom: 1px solid var(--fg);
}
.ta-dw-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.ta-dw-l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }
.ta-dw-v { color: var(--fg); min-width: 0; }
.ta-dw-v--wrap { white-space: normal; overflow-wrap: anywhere; }
.ta-dw-v .cpv1-inline-field { cursor: text; border-radius: var(--r-input); }
.ta-dw-v .cpv1-inline-field:hover { box-shadow: inset 0 0 0 1px var(--color-slate-200); }
.ta-dw-url { font-family: var(--font-mono); font-size: 11.5px; }
.ta-dw-link { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--color-blue-700); text-decoration: none; }
.ta-dw-link:hover { text-decoration: underline; }
.ta-dw-rev {
  margin-top: 2px; padding: 8px 10px; border-radius: 3px;
  border: 1px solid var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-text);
  font-size: 12.5px; line-height: 1.5; white-space: normal;
}
.ta-dw-excerpt { font-size: 12.5px; line-height: 1.55; color: var(--fg); white-space: normal; }
.ta-dw-excerpt--none { color: var(--fg-faint); font-style: italic; }
.ta-dw-list { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; white-space: normal; }
.ta-dw-list a { color: var(--color-blue-700); text-decoration: none; }
.ta-dw-list a:hover { text-decoration: underline; }
.ta-dw-history { color: var(--fg-muted); }
.ta-dw-foot { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12.5px; }
.ta-dw-foot-link { font-weight: 600; color: var(--color-blue-700); text-decoration: none; }
.ta-dw-foot-link:hover { text-decoration: underline; }

/* ---------- P0.7 variant 1: external change, slate double-ring ---------- */
.ta-board .ta-tx { position: relative; display: inline-block; }
.ta-board .ta-tx-old {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  animation: ta-tx-old-ring 0.7s ease-out 0s 1, ta-tx-old-out 1.1s ease 0.7s 1 forwards;
  border-radius: 4px;
}
.ta-board .ta-tx-new {
  animation: ta-tx-new-in 1.2s ease 1.4s 1 backwards, ta-tx-new-ring 1.6s ease-out 2s 1;
  border-radius: 4px;
}
@keyframes ta-tx-old-ring { 0% { box-shadow: 0 0 0 0 rgba(100, 116, 139, 0.55); } 40% { box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.55); } 100% { box-shadow: 0 0 0 3px rgba(100, 116, 139, 0); } }
@keyframes ta-tx-old-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ta-tx-new-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ta-tx-new-ring { 0% { box-shadow: 0 0 0 0 rgba(100, 116, 139, 0.55); } 30% { box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.55); } 100% { box-shadow: 0 0 0 3px rgba(100, 116, 139, 0); } }

/* ---------- Sealed rows (JC-4): done, and legibly so ---------- */
.ta-board tr.ta-row--sealed td,
.ta-board tr.cpv1-data-row:has(.ta-pill--sealed) td { color: var(--fg-muted); }
.ta-board tr.ta-row--sealed .ta-name, .ta-board tr.cpv1-data-row:has(.ta-pill--sealed) .ta-name { color: var(--fg-muted); }
.ta-board tr.ta-row--sealed .ta-tok { background: var(--color-slate-50); }

/* ---------- Send readiness checklist (JC-2) ---------- */
.ta-board .cpv1-tbl th.ta-col-check, .ta-board .cpv1-tbl td.ta-col-check { width: 236px; }
.ta-board .ta-check { display: inline-flex; gap: 4px; }
.ta-board .ta-check-item {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border-radius: 3px; border: 1px solid var(--color-slate-200);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-slate-400); background: var(--surface);
}
.ta-board .ta-check-item--done {
  color: var(--color-success-text); background: var(--color-success-bg); border-color: var(--color-success-border);
}

/* ---------- Refused edits (JC-9): the reason under the cell ---------- */
.ta-board .ta-cell-alert {
  display: block; margin-top: 4px; padding: 3px 6px; border-radius: 3px;
  border: 1px solid var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger-text);
  font-size: 11.5px; line-height: 1.35; white-space: normal; max-width: 260px;
}
.ta-board tr.ta-row--sealed .ta-who--none .ta-who-nm { color: var(--fg-faint); }

/* ======================================================================
   Send Readiness — the worker overview (round 6, handoff-am-readiness).
   Same shell as Team Assignments; this block carries only what the
   page adds: the value cells, the sub-line, the selected row, the
   sortable header, the switch, and its column widths. Inter only in
   the body — one family, two sizes.
   ====================================================================== */
.rd-board .cpv1-tbl td { vertical-align: top; line-height: 20px; }
/* Ten columns that fit a standard window without sideways scroll: cells
   use the handoff's 10px horizontal padding, each fixed column is sized
   to its widest content ("Pick a config", "Unassigned", "07/16/2026
   9:00 AM ▾"), and the campaign takes what is left. Below 1180px the
   viewport scrolls sideways rather than crushing the campaign name. */
.rd-board .cpv1-tbl { min-width: 1180px; }
.rd-board .cpv1-tbl th, .rd-board .cpv1-tbl td { padding-left: 10px; padding-right: 10px; }
.rd-board .cpv1-tbl th.rd-col-sf,        .rd-board .cpv1-tbl td.rd-col-sf        { width: 130px; }
.rd-board .cpv1-tbl th.rd-col-who,       .rd-board .cpv1-tbl td.rd-col-who       { width: 116px; }
.rd-board .cpv1-tbl th.rd-col-creative,  .rd-board .cpv1-tbl td.rd-col-creative  { width: 130px; }
.rd-board .cpv1-tbl th.rd-col-list,      .rd-board .cpv1-tbl td.rd-col-list      { width: 116px; }
.rd-board .cpv1-tbl th.rd-col-platform,  .rd-board .cpv1-tbl td.rd-col-platform  { width: 110px; }
.rd-board .cpv1-tbl th.rd-col-from,      .rd-board .cpv1-tbl td.rd-col-from      { width: 116px; }
.rd-board .cpv1-tbl th.rd-col-utms,      .rd-board .cpv1-tbl td.rd-col-utms      { width: 86px; }
.rd-board .cpv1-tbl th.ta-col-datetime,  .rd-board .cpv1-tbl td.ta-col-datetime  { width: 156px; }
.rd-board .cpv1-tbl th.rd-col-state,     .rd-board .cpv1-tbl td.rd-col-state     { width: 92px; }
.rd-board .rd-col-who .ta-who-nm { max-width: 74px; font-size: 13px; }
.rd-board .rd-col-who .ta-who--none .ta-who-nm { max-width: none; }
.rd-board td.rd-col-creative, .rd-board td.rd-col-list, .rd-board td.rd-col-platform,
.rd-board td.rd-col-from, .rd-board td.rd-col-utms, .rd-board td.rd-col-sf { overflow: hidden; text-overflow: ellipsis; }
.rd-board .rd-sf-link { font-size: 13px; }
.rd-board td.ta-col-campaign { overflow: hidden; }

/* Campaign: name over "Comp · segment". */
.rd-board .ta-sub {
  display: block; font-size: 12px; line-height: 16px; color: var(--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Under the creative's name: its state while not yet approved, and the
   way to its Google Doc — the drawer's link, in the sub-line's type. */
.rd-board .rd-creative-sub { margin-top: 0; }
/* Under the sender's name: where replies go. */
.rd-board .rd-from-reply { margin-top: 0; }
/* Under the list's name: the way to the list itself. */
.rd-board .rd-list-sub { margin-top: 0; }
.rd-board .rd-doc-link { color: var(--color-blue-700); text-decoration: none; }
.rd-board .rd-doc-link:hover { text-decoration: underline; }

/* Editable values: dotted underline + caret; the prompt when empty. */
.rd-board .fk {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--fg);
  text-decoration: none; cursor: pointer;
}
.rd-board .fk .v { color: var(--fg); border-bottom: 1px dotted var(--color-slate-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-board .fk--empty {
  display: inline-block; color: var(--fg-faint); font-style: italic; border-bottom: 1px dotted var(--color-slate-400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.rd-board .fk--static, .rd-board .fk--static .v { border-bottom: 0; color: var(--fg-muted); cursor: default; }
.rd-board td.rd-col-creative, .rd-board td.rd-col-list, .rd-board td.rd-col-platform,
.rd-board td.rd-col-from, .rd-board td.rd-col-utms { cursor: pointer; }
.rd-board tr:has(.ta-pill--sealed) td { cursor: default; }

/* Dates in the body family (no mono on this page). */
.rd-board .ta-date, .rd-board button.ta-date--edit { font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }

/* The row an open drawer edits, and the cell(s) it edits. */
.rd-board tr.cpv1-data-row--sel td { background: #eff6ff; }
.rd-board td.c-fk--sel { box-shadow: inset 0 0 0 1px #93c5fd; }

/* Sortable header: the control sits in the th; the th carries aria-sort. */
.rd-board .th-sort-form { display: inline; margin: 0; }
.rd-board .th-sort {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-decoration: none; cursor: pointer;
}
.rd-board .th-sort .dir { font-size: 9px; color: var(--fg-muted); }

/* The switch that sets unscheduled sends aside (the configuration
   page's switch, at the right end of the strip). */
.rd-board .rd-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; flex-shrink: 0; }
.rd-board .rd-switch-label { font-size: 12.5px; color: var(--fg-muted); cursor: pointer; }
.rd-board .add-toggle { display: inline-block; }

/* Drawer: the field name is the title; the line below names the row. */
.rd-dw-title { font-size: 15px; }
.ta-dw-send { margin-top: 4px; font-size: 13px; color: var(--fg-muted); line-height: 1.4; white-space: normal; }
.ta-dw-send b { color: var(--fg); font-weight: 600; }
.rd-dw-body { padding-top: 8px; }
.rd-dw-body .cpv1-panel { border: 0; padding: 0; }
/* The drawer's title names the field; the hosted panel keeps only its
   right-hand links (+ Quick add · + Attach existing) and status pill. */
.rd-dw-body .cpv1-panel-chevron, .rd-dw-body .cpv1-panel-title { display: none; }
.rd-dw-body .cpv1-panel-head { justify-content: flex-end; }
.rd-dw-facts .cpv1-facts-row { grid-template-columns: 96px 1fr; }
/* The configurator drawer on this page picks from existing
   configurations only (handoff §8: no create-new path here). */
.rd-board [data-sending-config-drawer-target="createNewLink"] { display: none; }
/* Pickers hosted by a drawer panel (+ Attach existing, + Quick add) span
   the drawer instead of floating past its edge; their lists scroll. */
.rd-dw-body turbo-frame > .cpv1-picker { left: 0; right: 0; width: auto; min-width: 0; max-width: 100%; }