/* * Demand Gen Tracker styles — v2 design system module CSS * * Scoped via `body.dg-page` so unprefixed class names from the design-system * mockups (.head, .panel, .field, .btn, .pill, etc.) can be used verbatim * without colliding with other modules' CSS. Demand Gen views set the body * class via `<% content_for :body_class, "dg-page" %>` at the top of each * template; the layout reads that into ``. * * Reference mockups in design-deliverables/demand-gen-tracker/. * Tokens from new-design-system/design-system/tokens/design-tokens.css * (loaded globally via the layout). */ body.dg-page { margin: 0; padding: 0; font-family: var(--font-sans); background: var(--paper); color: var(--fg); -webkit-font-smoothing: antialiased; font-size: 14px; } body.dg-page * { box-sizing: border-box; } body.dg-page a { color: inherit; text-decoration: none; } body.dg-page main { padding-bottom: 48px; } /* ============================================================ */ /* Shared page shell */ /* ============================================================ */ /* Module-specific class (was `.shell`). `.shell` collided with the app frame's own `.viewport > .shell` content container: `body.dg-page .shell` (specificity 0,2,1) beat the frame's `.viewport > .shell` (0,2,0) and overrode its nav offset, so the nav overlapped demand-gen content instead of clearing it. Renamed to `.dg-shell`. Container-relative, not viewport-relative: the earlier `width: min(1280px, 100vw - 96px)` forced a viewport-based width that ignores the nav push/narrowing — at laptop widths the frame's content shell is narrower than `100vw - 96px`, so this wrapper overflowed its parent. `width: 100%` fills whatever container it's in (the frame shell when framed, the body otherwise), capped at 1280 and centered. Matches the screening shared-page-shell. */ body.dg-page .dg-shell { width: 100%; max-width: 1280px; margin: 0 auto; } /* Top row — toplinks variant (Index, Compact Detail, Help — boxed page-head below) */ body.dg-page .toplinks { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; font-size: 12.5px; color: var(--fg-muted); } body.dg-page .toplinks .crumbs { display: flex; align-items: center; gap: 6px; } body.dg-page .toplinks .crumbs a { color: var(--fg-muted); text-decoration: none; } body.dg-page .toplinks .crumbs a:hover { color: var(--fg); } body.dg-page .toplinks .crumb-sep { color: var(--fg-faint); } body.dg-page .toplinks .crumb-cur, body.dg-page .crumb-current { color: var(--fg); font-weight: 500; } body.dg-page .home-link { color: var(--color-blue-700); text-decoration: none; } body.dg-page .home-link:hover { text-decoration: underline; } /* Top row — full-bleed topnav variant (Rich Detail) */ body.dg-page .topnav { padding: 9px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--paper); } body.dg-page .topnav .crumbs { font-size: 13px; color: var(--fg-muted); } body.dg-page .topnav .crumbs a:hover { color: var(--fg); } body.dg-page .topnav .crumb-sep { color: var(--fg-faint); margin: 0 7px; font-size: 11px; } body.dg-page .topnav-right { display: flex; gap: 14px; font-size: 13px; align-items: center; color: var(--fg-muted); } body.dg-page .topnav-right a:hover { color: var(--fg); } /* Subnav — pills variant (Index, Compact Detail) */ body.dg-page .subnav { display: flex; gap: 6px; padding: 4px 0 18px; } body.dg-page .subnav .pill { padding: 5px 11px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); font: inherit; font-size: 12.5px; color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } body.dg-page .subnav .pill:hover { color: var(--fg); } body.dg-page .subnav .pill--active { background: var(--color-slate-900); color: #fff; border-color: var(--color-slate-900); } body.dg-page .subnav .pill-arrow { font-family: var(--font-mono); font-size: 9px; color: var(--fg-faint); } body.dg-page .subnav .pill--active .pill-arrow { color: rgba(255,255,255,0.6); } /* Subnav — flat full-bleed variant (Rich Detail layout) */ body.dg-page .subnav.subnav--flat { padding: 7px 22px 7px; border-bottom: 1px solid var(--border); background: var(--paper); } body.dg-page .subnav.subnav--flat .pill { background: transparent; border: none; padding: 5px 10px; border-radius: 3px; color: var(--fg-muted); } body.dg-page .subnav.subnav--flat .pill:hover { background: var(--color-slate-50); color: var(--fg); } body.dg-page .subnav.subnav--flat .pill.act, body.dg-page .subnav.subnav--flat .pill--active { background: var(--color-slate-100); color: var(--fg); font-weight: 600; border-color: transparent; } /* ============================================================ */ /* Page-head variants */ /* ============================================================ */ /* Index page — boxed head (title bar + saved-views row + control strip) */ body.dg-page .page-head { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; } body.dg-page .page-title-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } body.dg-page .page-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } /* Rich Detail — full-bleed page head with prefix + 32px name + launch-feature */ body.dg-page .head { padding: 22px 28px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 22px; } body.dg-page .head--reader { padding: 22px 0 18px; } /* Compact Detail / Help / Intake */ body.dg-page .head-block { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } body.dg-page .head-prefix { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); font-weight: 700; } body.dg-page .head-name { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--fg); } body.dg-page .head-name--compact { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 4px 0 0; } body.dg-page .head-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-faint); margin-top: 6px; } body.dg-page .head-meta .id-pending, body.dg-page .id-pending { font-style: italic; } body.dg-page .head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; } body.dg-page .head-launch-l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); font-weight: 700; text-align: right; } /* Launch-feature inline-edit cell — P0.5 progressive border on a 26px mono value. Rest: transparent border placeholder. Hover: slate-200 border. Active/click: slate-400 + surface bg. */ body.dg-page .head-launch-v { font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1.1; text-align: right; color: var(--fg); cursor: pointer; border-radius: var(--r-input); padding: 1px 4px; margin: -1px -4px; transition: border-color var(--t-fast), background-color var(--t-fast); background: transparent; border: 1px solid transparent; } body.dg-page .head-launch-v:hover { border-color: var(--border); } body.dg-page .head-launch-v:active { border-color: var(--color-slate-400); background: var(--surface); } /* Intake form — title is an editable input */ body.dg-page .head-name-input { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--fg); font-family: inherit; border: 1px solid transparent; border-radius: var(--r-input); background: var(--surface-2); padding: 3px 8px; margin: 2px 0 0; width: 100%; outline: none; } body.dg-page .head-name-input::placeholder { color: var(--fg-faint); font-weight: 700; } body.dg-page .head-name-input:focus { background: var(--surface); border-color: var(--color-blue-600); box-shadow: 0 0 0 3px var(--color-blue-50); } /* State badge — clickable (dotted border + caret per multi-axis encoding) */ body.dg-page .badge-state { display: inline-flex; align-items: center; padding: 3px 4px 3px 9px; font-size: 12px; font-weight: 600; border: 1px dotted currentcolor; border-radius: 3px; background: var(--paper); cursor: pointer; white-space: nowrap; line-height: 1.3; font-family: inherit; } body.dg-page .badge-state::after { content: "▾"; font-size: 9px; margin-left: 4px; color: var(--fg-faint); } body.dg-page .badge-state--not_started { color: var(--fg-muted); } body.dg-page .badge-state--in_progress { color: var(--color-warning-text); } body.dg-page .badge-state--in_review { color: var(--color-info-text); } body.dg-page .badge-state--approved { color: var(--color-success-text); } body.dg-page .badge-state--uploaded { color: var(--color-success-text); } body.dg-page .badge-state--launched { color: var(--color-success-text); } body.dg-page .badge-state--cancelled { color: var(--fg-faint); text-decoration: line-through; } body.dg-page .badge-state--archived { color: var(--fg-faint); } body.dg-page .badge-state--draft { color: var(--fg-muted); } body.dg-page .badge-state--ready { color: var(--color-info-text); } body.dg-page .badge-state--done { color: var(--color-success-text); } /* Unsaved badge — solid border, no caret (Intake form during create) */ body.dg-page .badge-unsaved { display: inline-flex; align-items: center; padding: 3px 9px; font-size: 12px; font-weight: 600; border: 1px solid var(--fg-faint); border-radius: 3px; background: var(--paper); color: var(--fg-muted); white-space: nowrap; line-height: 1.3; } /* BETA marker — Outbound Send pages */ body.dg-page .beta-tag { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-warning-text); font-weight: 700; padding: 1px 5px; border: 1px solid var(--color-warning-text); border-radius: 3px; margin-left: 8px; } /* ============================================================ */ /* Rich Detail — 2-column body */ /* ============================================================ */ body.dg-page .body { display: grid; grid-template-columns: 1fr 300px; gap: 0; } body.dg-page .work { padding: 18px 28px 36px; border-right: 1px solid var(--border); min-width: 0; } body.dg-page .facts { padding: 18px 22px 36px; position: sticky; top: 16px; align-self: start; } /* ============================================================ */ /* Compact Detail / Intake — single-column reader */ /* ============================================================ */ body.dg-page .reader { max-width: 880px; margin: 0 auto; padding: 0 28px 72px; } /* ============================================================ */ /* Panels (work-column atom) */ /* ============================================================ */ /* Per the Rich Detail archetype: "Work column has no panel boxes — each panel separated by a top hairline." app/assets/stylesheets/ configuration_page_canon.css ships a bare `.panel { background; full border; radius; margin-top }` rule that leaks onto every page; the overrides below kill that leak on DGT specifically so the canon top-hairline-only treatment renders cleanly. Without these, the rightmost panel-head affordance (e.g. "+ Attach Outbound Send") sits 1px from a stray right border that shouldn't be there. */ body.dg-page .panel { background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0; margin-top: 0; margin-bottom: 22px; } body.dg-page .panel:first-child { border-top: none; margin-top: 0; } body.dg-page .panel-head { padding: 12px 0 10px; display: flex; align-items: center; gap: 10px; } body.dg-page .panel-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; display: flex; align-items: baseline; gap: 8px; color: var(--fg); } body.dg-page .panel-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); font-weight: 500; } body.dg-page .panel-actions { margin-left: auto; display: flex; gap: 14px; align-items: center; } body.dg-page .panel-action { font: inherit; font-size: 12px; font-weight: 500; color: var(--color-blue-700); background: transparent; border: none; padding: 0; cursor: pointer; } body.dg-page .panel-action:hover { text-decoration: underline; } body.dg-page .panel-overflow { background: transparent; border: none; color: var(--fg-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; } body.dg-page .panel-overflow:hover { color: var(--fg); } body.dg-page .panel-body { padding-bottom: 4px; } body.dg-page .panel-empty { font-style: italic; color: var(--fg-faint); font-size: 12.5px; padding: 8px 0 12px; } /* ============================================================ */ /* Proposal field-grid (inline-editable per P0.5) */ /* ============================================================ */ body.dg-page .pgrid { display: grid; grid-template-columns: 180px 1fr; gap: 2px 16px; } body.dg-page .pgrid-l { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); font-weight: 600; padding: 8px 0 8px; } /* Inline-editable value cell — P0.5 progressive border. Rest: transparent border (placeholder, prevents layout shift). Hover: 1px slate-200 border, no background. Active (mid-click before input swap): 1px slate-400 border + surface bg. Transition: 100ms ease-out on border-color per motion canon. */ body.dg-page .pgrid-v { font-size: 13px; color: var(--fg); line-height: 1.55; padding: 6px 8px; margin: 0 -8px; border: 1px solid transparent; border-radius: var(--r-input); transition: border-color var(--t-fast), background-color var(--t-fast); cursor: text; min-width: 0; overflow-wrap: anywhere; } body.dg-page .pgrid-v[data-controller~="dgt-inline-edit"]:hover { border-color: var(--border); } body.dg-page .pgrid-v[data-controller~="dgt-inline-edit"]:active { border-color: var(--color-slate-400); background: var(--surface); } body.dg-page .pgrid-v a { color: var(--color-blue-700); } body.dg-page .pgrid-v a:hover { text-decoration: underline; } body.dg-page .pgrid-v--muted { color: var(--fg-faint); font-style: italic; } /* ============================================================ */ /* Facts column */ /* ============================================================ */ body.dg-page .facts-section { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg); font-weight: 700; margin: 22px 0 8px; border-bottom: 2px solid var(--fg); padding-bottom: 5px; } body.dg-page .facts-section:first-child { margin-top: 0; } body.dg-page .facts-row { display: grid; grid-template-columns: 84px 1fr; gap: 4px 14px; padding: 6px 0; border-bottom: 1px solid var(--border); align-items: baseline; } body.dg-page .facts-row:last-of-type { border-bottom: none; } body.dg-page .facts-l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); font-weight: 600; padding-top: 3px; } body.dg-page .facts-v { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } body.dg-page .facts-v--mono { font-family: var(--font-mono); font-size: 12px; } body.dg-page .facts-v a { color: var(--color-blue-700); } body.dg-page .facts-v a:hover { text-decoration: underline; } /* ============================================================ */ /* Chips + badges */ /* ============================================================ */ /* Static chip (vertical, template, etc.) */ body.dg-page .chip { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11.5px; border-radius: 3px; line-height: 1.3; background: var(--surface); border: 1px solid var(--border); } body.dg-page .chip--vert { background: var(--chip-event-bg, var(--color-info-bg)); border-color: var(--chip-event-border, var(--color-info-border)); color: var(--chip-event-text, var(--color-info-text)); } /* Clickable badge (badge-chip canon: dotted border + ▾ chevron). Multi-axis affordance: dotted border distinguishes clickable from static. Transition per motion canon (--t-fast, 100ms ease-out). */ body.dg-page .chip-click { border: 1px dotted var(--border-strong); cursor: pointer; background: var(--paper); display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; font-size: 11.5px; border-radius: 3px; color: var(--fg); transition: border-color var(--t-fast), background-color var(--t-fast); } body.dg-page .chip-click:hover { border-color: var(--color-slate-400); background: var(--surface-2); } body.dg-page .chip-click::after { content: "▾"; font-size: 9px; color: var(--fg-faint); } /* Index strip — control panel sentence chips */ body.dg-page .strip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); margin-top: 10px; } body.dg-page .strip-sentence { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } body.dg-page .sent-text { font-size: 14px; color: var(--fg-muted); line-height: 1.85; flex: 1; } body.dg-page .sent-text b { color: var(--fg); font-weight: 600; } body.dg-page .strip-chip { display: inline-flex; align-items: center; padding: 2px 7px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 3px; font-size: 12.5px; font-weight: 500; color: var(--fg); cursor: pointer; } body.dg-page .strip-chip .chip-arrow { font-family: var(--font-mono); font-size: 9px; color: var(--fg-faint); margin-left: 3px; } body.dg-page .chip-pair { display: inline-flex; align-items: stretch; } body.dg-page .chip-pair .chip-field { padding: 2px 8px 2px 7px; background: var(--surface); border: 1px solid var(--border-strong); border-right: 1px solid var(--border); border-radius: 3px 0 0 3px; font-size: 12.5px; font-weight: 500; color: var(--fg); cursor: pointer; } body.dg-page .chip-pair .chip-dir { padding: 2px 7px; background: var(--surface); border: 1px solid var(--border-strong); border-left: none; border-radius: 0 3px 3px 0; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--fg); cursor: pointer; } body.dg-page .chip-add { color: var(--color-blue-700); border: none; background: transparent; padding: 2px 6px; cursor: pointer; font-size: 12.5px; font-family: inherit; } body.dg-page .chip-add:hover { text-decoration: underline; } body.dg-page .util-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-input); font: inherit; font-size: 12.5px; color: var(--fg); cursor: pointer; } body.dg-page .util-btn:hover { background: var(--surface-2); } body.dg-page .util-btn .count { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); margin-left: 2px; } /* Small status badge — mono lowercase per Index vernacular */ body.dg-page .vchip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-family: var(--font-mono); background: var(--chip-event-bg, var(--color-info-bg)); color: var(--chip-event-text, var(--color-info-text)); border: 1px solid var(--chip-event-border, var(--color-info-border)); } body.dg-page .badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 500; font-family: var(--font-mono); text-transform: lowercase; background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); white-space: nowrap; } body.dg-page .badge--not_started { background: var(--surface-2); color: var(--fg-muted); border-color: var(--border-strong); } body.dg-page .badge--in_progress { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border, #fde68a); } body.dg-page .badge--in_review { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border, #bfdbfe); } body.dg-page .badge--approved { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border, #a7f3d0); } body.dg-page .badge--uploaded { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border, #a7f3d0); } body.dg-page .badge--launched { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border, #a7f3d0); } body.dg-page .badge--draft { background: var(--surface-2); color: var(--fg-muted); border-color: var(--border); } body.dg-page .badge--ready { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border, #bfdbfe); } body.dg-page .badge--done { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border, #a7f3d0); } body.dg-page .badge--cancelled { background: var(--surface-2); color: var(--fg-faint); border-color: var(--border); text-decoration: line-through; } body.dg-page .badge--archived { background: var(--surface-2); color: var(--fg-faint); border-color: var(--border); } body.dg-page .badge--skipped { background: var(--surface-2); color: var(--fg-faint); border-color: var(--border); } /* .badge-sm — base declaration lives below (single source of truth). Per-state tint variants only set background/color. */ body.dg-page .badge-sm--in_progress { background: var(--color-warning-bg); color: var(--color-warning-text); } body.dg-page .badge-sm--draft { background: var(--surface-2); color: var(--fg-muted); } body.dg-page .badge-sm--ready { background: var(--color-info-bg); color: var(--color-info-text); } body.dg-page .badge-sm--done { background: var(--color-success-bg); color: var(--color-success-text); } body.dg-page .badge-sm--launched { background: var(--color-success-bg); color: var(--color-success-text); } body.dg-page .badge-sm--cancelled { background: var(--surface-2); color: var(--fg-faint); } body.dg-page .badge-sm--archived { background: var(--surface-2); color: var(--fg-faint); } /* ============================================================ */ /* Tables (Index + data tables on Scrape detail) */ /* ============================================================ */ body.dg-page .tbl-wrap { background: var(--surface); border: 1px solid var(--border); margin-top: 10px; } /* Inside an index page (dg-index-head sets horizontal rhythm), the strip + table inherit the same 28px margin so the page reads as one column. */ body.dg-page .dg-index-head + .cp-panel, body.dg-page .dg-index-head ~ .tbl-wrap, body.dg-page .dg-index-head ~ .landmark { margin-left: 28px; margin-right: 28px; } body.dg-page .tbl-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); } body.dg-page table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } body.dg-page table.tbl th { text-align: left; padding: 8px 12px; font-weight: 600; color: var(--fg-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } body.dg-page table.tbl th.num { text-align: right; } body.dg-page table.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border-faint, var(--border)); color: var(--fg); vertical-align: middle; } body.dg-page table.tbl tr:last-child td { border-bottom: none; } body.dg-page table.tbl tr.data-row { cursor: pointer; } body.dg-page table.tbl tr.data-row:hover td { background: var(--color-slate-50); } body.dg-page table.tbl tr.group-band td { background: var(--surface-2); padding: 7px 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); font-weight: 600; } body.dg-page .group-chev { display: inline-block; width: 12px; color: var(--fg-faint); } body.dg-page .group-name { color: var(--fg); } body.dg-page .group-meta { color: var(--fg-faint); font-weight: 400; margin-left: 8px; } body.dg-page .col-code { font-family: var(--font-mono); font-weight: 600; } body.dg-page .col-src a { color: var(--fg); } body.dg-page .col-src a:hover { text-decoration: underline; color: var(--color-blue-700); } body.dg-page .col-mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); } body.dg-page .col-num { font-family: var(--font-mono); text-align: right; font-size: 12px; } /* Index page head — title row above the saved-views tab strip. The page-head, title, and tab strip together render the Index archetype's "saved views row" per archetypes/index-page/. */ body.dg-page .dg-index-head { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; margin: 0 28px; } body.dg-page .dg-index-title-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } body.dg-page .dg-index-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--fg); } /* Control strip actions cluster — right-aligned "Columns N hidden" button next to the strip. Anchors the Display popover. */ body.dg-page .dg-strip-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 10px 28px 0; } /* Empty-state row inside the index table — full-width with muted italic text + a single recovery link. Per the Index archetype's "split A/B" empty states. */ body.dg-page .dg-empty-cell { padding: 36px 22px; text-align: center; color: var(--fg-faint); font-style: italic; font-size: 13px; } body.dg-page .dg-empty-link { color: var(--color-blue-700); font-style: normal; margin-left: 6px; } body.dg-page .dg-empty-link:hover { text-decoration: underline; } /* Vertical chip — single-chip value form for the Vert column. Uses the canonical chip geometry from badge-chip canon. */ body.dg-page .vchip { display: inline-flex; align-items: center; padding: 1px 7px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--r-badge, 3px); } /* Index views row (saved-view tabs) */ body.dg-page .views-row { display: flex; align-items: stretch; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--surface); overflow-x: auto; } body.dg-page .tab { padding: 10px 13px; font-size: 13px; color: var(--fg-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; display: flex; align-items: center; gap: 6px; white-space: nowrap; background: transparent; border-left: none; border-right: none; border-top: none; } body.dg-page .tab:hover { color: var(--fg); } body.dg-page .tab.is-active { color: var(--fg); border-bottom-color: var(--color-slate-900); } body.dg-page .tab-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); font-weight: 400; } body.dg-page .tab.is-active .tab-meta { color: var(--fg-muted); } body.dg-page .tab-meta--attention { color: var(--color-warning-text); } body.dg-page .tab-sep { width: 1px; background: var(--border); margin: 8px 8px; align-self: stretch; } body.dg-page .tab-add { padding: 10px 12px; font-size: 13px; color: var(--fg-faint); cursor: pointer; font-family: var(--font-mono); background: transparent; border: none; } body.dg-page .tab-add:hover { color: var(--fg); } /* Index landmark row (bottom) */ body.dg-page .landmark { background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--r-card) var(--r-card); padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; } body.dg-page .landmark-left { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.04em; } body.dg-page .landmark-right { display: flex; align-items: center; gap: 14px; } body.dg-page .landmark-link { background: transparent; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--color-blue-700); cursor: pointer; } body.dg-page .landmark-link:hover { text-decoration: underline; } /* Scrape-detail data table cluster */ body.dg-page .data-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 8px; } body.dg-page .data-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); } body.dg-page .data-count strong { color: var(--fg); font-weight: 600; } body.dg-page .tbl-pagernote { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); margin-top: 8px; text-align: right; } /* ============================================================ */ /* Row collection (Outbound Sends panel; channels panel) */ /* ============================================================ */ /* 3-column row: OS (flex, name + code/channels meta line) / State badge (fixed) / ×. Sized for the constrained work-column width when the global nav is expanded. */ body.dg-page .os-row { display: grid; grid-template-columns: minmax(0,1fr) 120px 14px; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border-faint, var(--border)); } body.dg-page .os-row:last-child { border-bottom: none; } body.dg-page .os-name a { font-size: 13px; color: var(--fg); font-weight: 500; } body.dg-page .os-name a:hover { text-decoration: underline; color: var(--color-blue-700); } body.dg-page .os-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); margin-top: 2px; } body.dg-page .os-detach, body.dg-page form.os-detach { background: transparent; border: none; color: var(--fg-faint); font-size: 14px; cursor: pointer; padding: 0; margin: 0; line-height: 1; } body.dg-page .os-detach:hover { color: var(--color-danger-text); } /* Channel rows on Outbound Send detail */ /* 4-column row: Channel(flex) / Owner(flex) / Status(fixed) / ×. Completed date and notes stack inside the Channel cell as muted meta lines, since fitting 5 columns in the work column at the global-nav-expanded viewport collapsed the Owner column to zero. */ body.dg-page .ch-head { display: grid; grid-template-columns: minmax(120px, 200px) minmax(120px, 1fr) 130px 14px; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); font-weight: 600; } body.dg-page .ch-row { display: grid; grid-template-columns: minmax(120px, 200px) minmax(120px, 1fr) 130px 14px; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border-faint, var(--border)); } body.dg-page .ch-when { font-size: 11px; color: var(--fg-faint); margin-top: 2px; } body.dg-page .ch-row:last-child { border-bottom: none; } body.dg-page .ch-name { font-size: 13px; font-weight: 500; color: var(--fg); } body.dg-page .ch-note { font-size: 12px; color: var(--fg-faint); margin-top: 2px; } body.dg-page .ch-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); } body.dg-page .ch-when--unset { color: var(--fg-faint); } body.dg-page .ch-overflow, body.dg-page .ch-overflow form, body.dg-page form.ch-overflow { background: transparent; border: none; color: var(--fg-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; margin: 0; } body.dg-page .ch-overflow:hover { color: var(--fg); } /* 3-column row: Source (flex, name + code/counts meta line) / State badge (fixed) / × — sized for the constrained work-column width when the global nav is expanded. */ body.dg-page .sc-row { display: grid; grid-template-columns: minmax(0,1fr) 120px 14px; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border-faint, var(--border)); } body.dg-page .sc-name a { color: var(--fg); font-weight: 500; } body.dg-page .sc-name a:hover { color: var(--color-blue-700); text-decoration: underline; } body.dg-page .sc-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); margin-top: 2px; } body.dg-page .sc-row:last-child { border-bottom: none; } body.dg-page .sc-code { font-family: var(--font-mono); font-size: 12px; font-weight: 600; } body.dg-page .sc-name a { font-size: 13px; color: var(--fg); } body.dg-page .sc-name a:hover { text-decoration: underline; color: var(--color-blue-700, #1d4ed8); } body.dg-page .sc-counts { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-muted); } body.dg-page .sc-detach, body.dg-page form.sc-detach { background: transparent; border: none; color: var(--fg-faint); font-size: 14px; cursor: pointer; padding: 0; margin: 0; } body.dg-page .sc-detach:hover { color: var(--color-danger-text, #991b1b); } body.dg-page .badge-sm { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 500; font-family: var(--font-mono); text-transform: lowercase; white-space: nowrap; background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); } body.dg-page .badge-sm--launched { background: var(--color-success-bg); color: var(--color-success-text); } body.dg-page .badge-sm--in_progress, body.dg-page .badge-sm--in_review { background: var(--color-warning-bg); color: var(--color-warning-text); } body.dg-page .badge-sm--approved, body.dg-page .badge-sm--uploaded { background: var(--color-success-bg); color: var(--color-success-text); } /* Clickable status (channel inline) — dotted border + caret per multi-axis affordance */ body.dg-page .stat { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; border: 1px dotted currentcolor; border-radius: 3px; font-size: 11.5px; font-weight: 500; cursor: pointer; background: var(--paper); width: fit-content; } body.dg-page .stat::after { content: "▾"; font-size: 9px; opacity: 0.6; } body.dg-page .stat--not_started { color: var(--fg-muted); } body.dg-page .stat--in_progress { color: var(--color-warning-text); } body.dg-page .stat--done { color: var(--color-success-text); } body.dg-page .stat--skipped { color: var(--fg-faint); } body.dg-page .ch-label { font-size: 13px; font-weight: 500; } body.dg-page .ch-owner, body.dg-page .ch-status { display: inline-flex; } body.dg-page .ch-completed { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); text-align: right; } /* ============================================================ */ /* Activity log */ /* ============================================================ */ body.dg-page .log-stream { display: flex; flex-direction: column; } body.dg-page .log-entry { padding: 8px 0; border-bottom: 1px solid var(--border-faint, var(--border)); display: flex; flex-direction: column; gap: 3px; } body.dg-page .log-entry:last-of-type { border-bottom: none; } body.dg-page .log-bracket { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.04em; } body.dg-page .log-body { font-size: 13px; color: var(--fg); line-height: 1.5; } /* ============================================================ */ /* File upload / source picker */ /* ============================================================ */ body.dg-page .source-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); font-weight: 600; margin-bottom: 6px; } body.dg-page .source-url-row { display: flex; gap: var(--s-3); align-items: stretch; } body.dg-page .source-divider { display: flex; align-items: center; gap: var(--s-3); margin: 14px 0; color: var(--fg-faint); font-size: 11px; } body.dg-page .source-divider::before, body.dg-page .source-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } body.dg-page .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 22px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-card); background: transparent; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast); } body.dg-page .dropzone:hover { background: var(--color-bg-hover, var(--color-slate-50)); border-color: var(--color-slate-400); } body.dg-page .dropzone-main { font-size: 13px; color: var(--fg-muted); } body.dg-page .dropzone-hint { font-size: 12px; color: var(--fg-faint); } /* ============================================================ */ /* Inputs, buttons (atoms) */ /* ============================================================ */ body.dg-page .input, body.dg-page input.input, body.dg-page select.select, body.dg-page textarea.textarea { width: 100%; font-family: var(--font-sans); font-size: 13.5px; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r-input); background: var(--surface-2); color: var(--fg); } body.dg-page .textarea { resize: vertical; min-height: 56px; line-height: 1.5; } body.dg-page .input::placeholder, body.dg-page .textarea::placeholder { color: var(--fg-faint); } body.dg-page .input:focus, body.dg-page .select:focus, body.dg-page .textarea:focus { outline: none; background: var(--surface); border-color: var(--color-blue-600); box-shadow: 0 0 0 3px var(--color-blue-50); } body.dg-page .select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; padding-right: 28px; } body.dg-page .hint { font-size: 12px; color: var(--fg-faint); margin-top: 5px; line-height: 1.5; } body.dg-page .btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 13px; font-size: 13px; font-weight: 500; border-radius: var(--r-input); cursor: pointer; font-family: inherit; line-height: 1.3; } body.dg-page .btn--primary { background: var(--color-slate-900); color: #fff; border: 1px solid var(--color-slate-900); font-weight: 600; } body.dg-page .btn--primary:hover { background: var(--color-slate-800); } body.dg-page .btn--primary:disabled { background: var(--color-slate-400); border-color: var(--color-slate-400); cursor: not-allowed; } body.dg-page .btn--secondary { background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); } body.dg-page .btn--secondary:hover { background: var(--surface-2); } body.dg-page .btn-primary { padding: 6px 13px; background: var(--color-slate-900); color: #fff; border: 1px solid var(--color-slate-900); border-radius: var(--r-input); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; } body.dg-page .btn-primary:hover { background: var(--color-slate-800); } /* ============================================================ */ /* Intake form (Scrape create + Outbound Send create) */ /* ============================================================ */ body.dg-page .intake-note { margin: 16px 0 0; padding: 9px 13px; background: var(--color-slate-50); border: 1px solid var(--border); border-left: 3px solid var(--fg-muted); border-radius: var(--r-input); font-size: 12.5px; color: var(--fg-muted); line-height: 1.5; } body.dg-page .section { margin-top: 26px; } body.dg-page .section-heading { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg); font-weight: 700; margin: 0 0 14px; border-bottom: 2px solid var(--fg); padding-bottom: 5px; } body.dg-page .field { margin-bottom: 16px; } body.dg-page .field:last-child { margin-bottom: 0; } body.dg-page .label { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); font-weight: 600; margin-bottom: 5px; } body.dg-page .label .ast { color: var(--color-warning-text); margin-left: 3px; } body.dg-page .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } body.dg-page .submit-bar { position: sticky; bottom: 0; margin-top: 30px; padding: 14px 0; background: linear-gradient(to top, var(--paper) 70%, transparent); border-top: 1px solid var(--border); display: flex; align-items: center; gap: 16px; } body.dg-page .submit-status { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); flex: 1; } body.dg-page .submit-status b { color: var(--fg); } /* ============================================================ */ /* Inline-edit cells (dgt-inline-edit Stimulus controller) */ /* ============================================================ */ /* When a cell is being edited, its rendered input replaces the original text node. These styles make the input look reasonable inside each of the host contexts (head-launch-v, chip-click, stat). See app/javascript/controllers/dgt_inline_edit_controller.js. */ /* Input — Borderless variant per the canonical Input component (new-design-system/design-system/components/input/). Used when a P0.5 progressive-border cell swaps to an editable input. Border: slate-400, blue focus ring via outline (not box-shadow, so the input plays nicely inside any host context). */ body.dg-page .dgt-inline-input { font: inherit; color: inherit; padding: 2px 6px; border: 1px solid var(--color-slate-400); border-radius: var(--r-input); background: var(--surface); outline: 2px solid var(--color-blue-500); outline-offset: 1px; transition: border-color var(--t-fast), outline-color var(--t-fast); /* Fill the host cell. URL fields, free-text values, and the page- head title input all want to use the cell's available width per the design canon — short fixed-width inputs read as wrong when the value (a URL, a long event name) is wider than the box. */ width: 100%; box-sizing: border-box; } /* Date picker — design-system custom calendar popover. Replaces the browser-native overlay (which doesn't match the rest of the visual system). The picker JS in lib/dgt_date_picker.js builds the markup; these rules supply the chrome: white surface, slate border, --sh-modal shadow, --r-modal corners. */ body.dg-page .dgt-datepicker { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-modal); box-shadow: var(--sh-modal); padding: 16px 18px 12px; width: 320px; font-family: var(--font-sans); color: var(--fg); } body.dg-page .dgt-datepicker-header { display: grid; grid-template-columns: 24px 1fr 24px auto; align-items: center; gap: 6px; margin-bottom: 14px; } body.dg-page .dgt-datepicker-nav { background: transparent; border: 0; cursor: pointer; font-size: 18px; color: var(--fg-muted); width: 24px; height: 24px; line-height: 1; border-radius: var(--r-input); transition: background-color var(--t-fast), color var(--t-fast); } body.dg-page .dgt-datepicker-nav:hover { background: var(--color-slate-50); color: var(--fg); } body.dg-page .dgt-datepicker-title { text-align: center; font-size: 14px; font-weight: 600; color: var(--fg); } body.dg-page .dgt-datepicker-close { font-size: 12px; padding: 4px 10px; } body.dg-page .dgt-datepicker-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } body.dg-page .dgt-datepicker-dow-cell { text-align: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); padding: 4px 0; } body.dg-page .dgt-datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } body.dg-page .dgt-datepicker-day { background: transparent; border: 1px solid transparent; cursor: pointer; height: 32px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--fg); border-radius: var(--r-input); transition: background-color var(--t-fast), border-color var(--t-fast); } body.dg-page .dgt-datepicker-day--blank { cursor: default; pointer-events: none; } body.dg-page .dgt-datepicker-day:hover:not(.dgt-datepicker-day--blank) { background: var(--color-slate-50); } body.dg-page .dgt-datepicker-day--today { font-weight: 700; } body.dg-page .dgt-datepicker-day--selected { background: var(--surface-2); border-color: var(--border-strong); color: var(--fg); font-weight: 600; } body.dg-page .dgt-datepicker-footer { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; display: flex; justify-content: flex-start; } body.dg-page .dgt-datepicker-clear { background: transparent; border: 0; cursor: pointer; font-size: 13px; color: var(--color-blue-700); padding: 0; } body.dg-page .dgt-datepicker-clear:hover { text-decoration: underline; } /* The page-head source name lives in a by default. Make it block while editing so the 100%-width input has a container to fill (otherwise inline-span sizing collapses it). */ body.dg-page .head-name.dgt-inline-field--editing { display: block; } body.dg-page .dgt-inline-input--textarea { display: block; width: 100%; resize: vertical; line-height: 1.5; } /* Save/Cancel buttons rendered under the textarea variant per the AM canonical Notes pattern. Compact — these add ~30px of vertical height to the cell while editing, which is the unavoidable cost of an explicit commit ceremony. */ body.dg-page .dgt-inline-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; } body.dg-page .dgt-inline-save, body.dg-page .dgt-inline-cancel { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: var(--r-input); cursor: pointer; border: 1px solid var(--border-strong); } body.dg-page .dgt-inline-save { background: var(--color-slate-900); color: #fff; border-color: var(--color-slate-900); } body.dg-page .dgt-inline-cancel { background: var(--surface); color: var(--fg); } /* While editing, suppress the host's caret/decorative chrome so the raw input renders cleanly inside the cell. */ body.dg-page .dgt-inline-field--editing.chip-click::after, body.dg-page .dgt-inline-field--editing.stat::after { content: ""; } body.dg-page .dgt-inline-field--editing.chip-click, body.dg-page .dgt-inline-field--editing.stat { border: 1px solid transparent; background: transparent; padding: 0; } /* ============================================================ */ /* Error modal — design-system Modal chrome */ /* Used by lib/dgt_error_modal to surface 4xx rejection */ /* messages (template-switch refused, validation, etc.) instead */ /* of the OS-native window.alert. Matches the Modal component: */ /* white surface, slate border, --sh-modal, --r-modal corners, */ /* slate-900 primary button. */ /* ============================================================ */ body.dg-page .dgt-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; } body.dg-page .dgt-modal { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-modal); box-shadow: var(--sh-modal); padding: 22px 24px 20px; min-width: 320px; max-width: 560px; margin: 0 24px; } body.dg-page .dgt-modal-title { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 12px; line-height: 1.5; } /* Modal body — consequence mode only. One sentence describing the external side-effect or cascade, in plain language with named records. See components/modal/ in the design system. */ body.dg-page .dgt-modal-body { font-size: 13px; color: var(--fg-muted); line-height: 1.55; margin-bottom: 18px; } body.dg-page .dgt-modal-actions { display: flex; gap: 8px; justify-content: flex-end; } /* ============================================================ */ /* Help page */ /* ============================================================ */ body.dg-page .lead { font-size: 15px; line-height: 1.6; color: var(--fg); margin: 16px 0 0; max-width: 64ch; } body.dg-page h3 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; } body.dg-page .prose p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--fg); } body.dg-page .prose p:last-child { margin-bottom: 0; } body.dg-page .prose strong { font-weight: 600; } body.dg-page .prose code { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); } body.dg-page dl.defs { margin: 0; display: block; } body.dg-page dl.defs > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 18px; padding: 9px 0; border-bottom: 1px solid var(--border-faint, var(--border)); } body.dg-page dl.defs dd code, body.dg-page .prose code { overflow-wrap: anywhere; } body.dg-page dl.defs > div:last-child { border-bottom: none; } body.dg-page dl.defs dt { font-weight: 600; font-size: 13.5px; color: var(--fg); } body.dg-page dl.defs dd { margin: 0; font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; } body.dg-page ol.steps, body.dg-page ul.bullets { margin: 0 0 10px; padding-left: 22px; font-size: 14px; line-height: 1.65; color: var(--fg); } body.dg-page ol.steps li, body.dg-page ul.bullets li { margin-bottom: 6px; } body.dg-page ol.steps li strong, body.dg-page ul.bullets li strong { font-weight: 600; } /* ============================================================ */ /* Flash messages (preserve readable defaults inside the module) */ /* ============================================================ */ body.dg-page .dg-flash { margin: 12px 0; padding: 9px 14px; border-radius: var(--r-input); font-size: 13px; } body.dg-page .dg-flash--notice { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border, #a7f3d0); } body.dg-page .dg-flash--alert { background: var(--color-danger-bg, #fee2e2); color: var(--color-danger-text, #991b1b); border: 1px solid var(--color-danger-border, #fca5a5); } /* ============================================================ */ /* Native

popovers — state/owner/status menus, etc. */ /* ============================================================ */ body.dg-page details.state-menu, body.dg-page details.launch-edit, body.dg-page details.add-channel-menu, body.dg-page details.channel-owner-menu, body.dg-page details.channel-status-menu, body.dg-page details.attach-scrape-menu { position: relative; } body.dg-page details > summary { list-style: none; cursor: pointer; } body.dg-page details > summary::-webkit-details-marker { display: none; } body.dg-page .state-menu-pop, body.dg-page .add-channel-pop { position: absolute; right: 0; margin-top: 6px; min-width: 180px; background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--sh-menu, 0 4px 16px rgba(0,0,0,0.08)); z-index: 30; padding: 4px 0; } body.dg-page .state-menu-item, body.dg-page .state-menu-item form, body.dg-page form .state-menu-item { display: block; width: 100%; text-align: left; padding: 7px 13px; font-size: 13px; color: var(--fg); background: transparent; border: 0; cursor: pointer; font-family: inherit; } body.dg-page .state-menu-item:hover { background: var(--surface-2); } body.dg-page .state-menu-pop form { margin: 0; } body.dg-page details.launch-edit > summary { list-style: none; } body.dg-page .launch-edit-form { position: absolute; right: 0; margin-top: 6px; background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--sh-menu, 0 4px 16px rgba(0,0,0,0.08)); z-index: 30; padding: 10px; display: flex; gap: 6px; align-items: center; } body.dg-page .attach-scrape-form { position: absolute; right: 0; margin-top: 6px; background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--sh-menu, 0 4px 16px rgba(0,0,0,0.08)); z-index: 30; padding: 10px; display: flex; gap: 6px; align-items: center; } /* ============================================================ * cpv1-badge + cpv1-state-dot variants for DGT-specific states * ------------------------------------------------------------ * Scope is .cpv1-body (added to .dg-shell on both DGT detail * pages). Color semantics mirror the existing .badge-state-- * tokens so the visual didn't change when we migrated the chip * markup to the canon controller (cpv1-state-menu + cpv1-mutate). * ============================================================ */ /* ScrapedList states not already covered by campaign_page.css */ .cpv1-body .cpv1-badge--state-not_started { background: #ffffff; border: 1px solid var(--color-slate-300); color: var(--fg-muted); } .cpv1-body .cpv1-badge--state-not_started.cpv1-badge--clickable:hover { background: var(--color-slate-100); } .cpv1-body .cpv1-badge--state-in_progress { background: #fffbeb; border: 1px solid #fde68a; color: var(--color-warning-text); } .cpv1-body .cpv1-badge--state-in_progress.cpv1-badge--clickable:hover { background: #fef3c7; } .cpv1-body .cpv1-badge--state-uploaded { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--color-success-text); } .cpv1-body .cpv1-badge--state-uploaded.cpv1-badge--clickable:hover { background: #dcfce7; } .cpv1-body .cpv1-badge--state-launched { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--color-success-text); } .cpv1-body .cpv1-badge--state-launched.cpv1-badge--clickable:hover { background: #dcfce7; } .cpv1-body .cpv1-badge--state-cancelled { background: var(--cp-surface-2, var(--surface-2)); border: 1px solid var(--cp-border, var(--border)); color: var(--fg-faint); text-decoration: line-through; } .cpv1-body .cpv1-badge--state-cancelled.cpv1-badge--clickable:hover { background: var(--color-slate-100); } /* OutboundSend states (draft + in_review + approved + archived reuse the * campaign_page.css definitions; only the OS-specific ones go here) */ .cpv1-body .cpv1-badge--state-ready { background: #eff6ff; border: 1px solid #bfdbfe; color: var(--color-info-text); } .cpv1-body .cpv1-badge--state-ready.cpv1-badge--clickable:hover { background: #dbeafe; } .cpv1-body .cpv1-badge--state-done { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--color-success-text); } .cpv1-body .cpv1-badge--state-done.cpv1-badge--clickable:hover { background: #dcfce7; } /* State-dots for the menu items — Campaign / Send pattern (no --state- prefix). */ .cpv1-body .cpv1-state-dot--not_started { background: var(--color-slate-200); border-color: var(--color-slate-300); } .cpv1-body .cpv1-state-dot--in_progress { background: #fcd34d; border-color: #fde68a; } .cpv1-body .cpv1-state-dot--uploaded { background: #86efac; border-color: #bbf7d0; } .cpv1-body .cpv1-state-dot--launched { background: #4ade80; border-color: #86efac; } .cpv1-body .cpv1-state-dot--cancelled { background: var(--cp-surface-2, var(--surface-2)); border-color: var(--color-slate-300); } .cpv1-body .cpv1-state-dot--ready { background: #93c5fd; border-color: #bfdbfe; } .cpv1-body .cpv1-state-dot--done { background: #4ade80; border-color: #86efac; } /* Reuse but redeclare for the .dg-page-only states that overlap with * Campaign vocab — same colors, same scope; keeps the styling here * intentional and traceable rather than relying on import order. */