/* ====================================================================
 * Compact Detail archetype — first in-app implementation.
 *
 * Extracted from the canon reference:
 *   new-design-system/design-system/archetypes/compact-detail/reference.html
 * Class names follow the archetype README's CSS API
 * (.compact-detail-page / .compact-section / .compact-eyebrow); field
 * rows and the row-collection atom are the reference's .row / .row-coll
 * blocks under compact- prefixes. Values are mapped onto the app's
 * design tokens (design_tokens.css) — same mapping campaign_page.css
 * uses for the cpv1 chrome.
 *
 * Pages: Creative Concept, Creative Template, Sending Address detail
 * (the Compact Detail sweep), and any future lightweight record.
 * ==================================================================== */

/* Reading column — the defining structural difference from Rich Detail.
 * max-width 880px, centered, 28px gutters (locked). */
.compact-detail-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Page head — same anatomy as the cpv1 head, calmer 26px title (locked:
 * Compact Detail title is 26/700 vs Rich Detail's 32). The cpv1-head
 * classes render inside; only the size differs. */
.compact-detail-page .cpv1-head-name { font-size: 26px; }
.compact-detail-page .cpv1-head { padding: 22px 0 18px; }

/* Head meta line — 11.5 mono muted (locked). */
.compact-head-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-muted);
  margin-top: 6px;
}

/* Typed sections (locked: 10.5 mono uppercase eyebrow, 2px underline —
 * same treatment as Rich Detail's facts column, full-width here). */
.compact-section { margin-top: 28px; }
.compact-section:last-child { padding-bottom: 48px; }
.compact-eyebrow {
  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 10px;
  border-bottom: 2px solid var(--fg);
  padding-bottom: 5px;
}
.compact-eyebrow-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: 0;
}

/* Collection-section head action (P0.1: add affordance lives in the
 * head, right-aligned, text-link style, "+ Verb", hover underline —
 * never in the body). The section eyebrow is this collection's head. */
.compact-eyebrow--with-action {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.compact-eyebrow-action {
  margin-left: auto;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-blue-600);
  text-decoration: none;
  /* The action renders as <a> (navigate) or <button> (open picker) —
   * both get the identical text-link treatment per P0.1. */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.compact-eyebrow-action:hover { text-decoration: underline; }

/* Inline link inside a field value (e.g. Usage count, Domain). */
.compact-link { color: var(--color-blue-700); }

/* Inline-edit inputs inside a compact field row fill the value cell
 * (match-and-verify canon: never the browser-default ~160px input on a
 * wide row). The field span grows only while an input is mounted, so
 * the P0.5 rest/hover border still conforms to the text bounds. */
.cpv1-body.compact-detail-page .compact-row-v .cpv1-inline-field:has(.cpv1-inline-input) {
  flex: 1;
  min-width: 0;
  max-width: none;
}
.cpv1-body.compact-detail-page .compact-row-v .cpv1-inline-input {
  width: 100%;
  box-sizing: border-box;
}

/* A ghost chip that hosts an active inline editor sheds its chip chrome
 * for the duration — the editor is a full-width block surface (Input
 * Borderless lifecycle per P0.5), never a textarea squeezed inside a
 * dashed pill. Applies to every "+ Add …" ghost trigger on the page. */
.cpv1-body.compact-detail-page .cpv1-chip--ghost:has(.cpv1-inline-input) {
  border: none;
  background: transparent;
  padding: 0;
  display: block;
  width: 100%;
  cursor: default;
  white-space: normal;
}
.cpv1-body.compact-detail-page .cpv1-chip--ghost .cpv1-inline-input--textarea,
.cpv1-body.compact-detail-page .compact-section > .cpv1-inline-field .cpv1-inline-input--textarea {
  width: 100%;
  box-sizing: border-box;
}

/* URL value row (canon reference Source row): the URL text itself is
 * the editable surface — mono, blue, truncating, bounded. */
.compact-url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-blue-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 540px;
}
.compact-link-open {
  color: var(--fg-muted);
  font-size: 12px;
  padding: 0 4px;
  text-decoration: none;
}
.compact-link-open:hover { color: var(--color-blue-700); }

/* Field rows — 180px label / 1fr value (locked: wider than Rich
 * Detail's facts column because the page IS the column). */
.compact-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 4px 18px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.compact-row:last-of-type { border-bottom: none; }
.compact-row-l {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 600;
  padding-top: 3px;
}
.compact-row-v {
  font-size: 13.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.compact-row-v--mono { font-family: var(--font-mono); font-size: 12.5px; }
.compact-row-v--muted { color: var(--fg-muted); }
.compact-row-v--prose { display: block; line-height: 1.6; }

/* Row collection — the at-most-one secondary collection (Decision #20
 * atom, reference.html .row-coll*). Grid columns are set per page via
 * the --compact-coll-cols custom property so different record types
 * carry different column sets without forking the atom. */
.compact-coll-wrapper {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.compact-coll-head {
  display: grid;
  grid-template-columns: var(--compact-coll-cols, minmax(0, 1.4fr) 130px 1fr 100px 12px);
  gap: 12px;
  padding: 6px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
  align-items: center;
}
.compact-coll-row {
  display: grid;
  grid-template-columns: var(--compact-coll-cols, minmax(0, 1.4fr) 130px 1fr 100px 12px);
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.compact-coll-row:last-child { border-bottom: none; }
.compact-coll-row:hover { background: var(--surface-2); }
.compact-coll-name {
  font-size: 13px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-coll-name a:hover { text-decoration: underline; }
.compact-coll-when { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.compact-coll-meta {
  font-size: 12px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-coll-link {
  color: var(--color-blue-700);
  font-size: 12px;
  text-decoration: none;
  text-align: right;
}

/* ====================================================================
 * Create state (foundations/record-creation.md + reference-create.html,
 * extracted verbatim). The detail page IS the create page: the same
 * show view renders inside [data-compact-create-state] when the record
 * is unsaved. data-compact-create-state flips "draft" → "saved" on
 * commit and the P0.7 V4 morphs play.
 * ==================================================================== */

/* Title — editable input during draft, static heading after commit.
 * The .tx wrapper holds whichever is widest; nothing shifts. */
.compact-name-tx { position: relative; display: block; }
.compact-name-shared {
  font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
  color: var(--fg);
  padding: 2px 6px; margin: 0 -6px;
  border-radius: 3px;
  max-width: 100%; box-sizing: border-box;
}
.compact-name-input {
  border: 1px solid var(--border-strong); background: var(--surface);
  font-family: inherit; outline: none; width: 100%;
  transition: opacity 1.6s ease-out, border-color 0.2s ease-out;
  position: relative; z-index: 1; display: block;
}
.compact-name-input:focus { border-color: var(--fg-muted); }
.compact-name-input::placeholder { color: var(--fg-faint); font-weight: 400; }
.compact-name-static {
  border: 1px solid transparent;
  position: absolute; top: 0; left: 0; opacity: 0;
  transition: opacity 1.6s ease-out;
  display: inline-block;
}
[data-compact-create-state="saved"] .compact-name-input { animation: compact-morph-old-ring 2.6s ease-out forwards; pointer-events: none; }
[data-compact-create-state="saved"] .compact-name-static { animation: compact-morph-new-ring 2.6s ease-out forwards; }

/* Record-ID morph in the meta line. */
.compact-id-tx { position: relative; display: inline-block; }
.compact-id-old { font-style: italic; color: var(--fg-muted); transition: opacity 1.6s ease-out; }
.compact-id-new { font-family: var(--font-mono); color: var(--fg-muted); position: absolute; top: 0; left: 0; opacity: 0; white-space: nowrap; transition: opacity 1.6s ease-out; }
[data-compact-create-state="saved"] .compact-id-old { animation: compact-morph-old-ring 2.6s ease-out forwards; }
[data-compact-create-state="saved"] .compact-id-new { animation: compact-morph-new-ring 2.6s ease-out forwards; }

/* Badge — "X · unsaved" solid border no caret during draft; the real
 * clickable badge fades in on commit. */
.compact-badge-tx { position: relative; display: inline-block; }
.compact-badge-tx .compact-swap-old { position: relative; z-index: 1; transition: opacity 1.6s ease-out; border-radius: 4px; }
.compact-badge-tx .compact-swap-new { position: absolute; top: 0; right: 0; opacity: 0; transition: opacity 1.6s ease-out; border-radius: 4px; }
[data-compact-create-state="draft"] .compact-badge-tx .compact-swap-new { pointer-events: none; }
[data-compact-create-state="saved"] .compact-badge-tx .compact-swap-old { animation: compact-morph-old-ring 2.6s ease-out forwards; pointer-events: none; }
[data-compact-create-state="saved"] .compact-badge-tx .compact-swap-new { animation: compact-morph-new-ring 2.6s ease-out forwards; }
.cpv1-body .cpv1-badge--unsaved { border: 1px solid currentcolor; cursor: default; }

/* Required-cluster eyebrow — "Required" morphs to the real section name. */
.compact-eyebrow-tx { position: relative; display: block; padding-bottom: 5px; border-bottom: 2px solid var(--fg); margin: 28px 0 10px; min-height: 16px; }
.compact-eyebrow-tx .compact-eyebrow { border-bottom: none; margin: 0; padding-bottom: 0; }
.compact-eyebrow-tx .compact-swap-old { display: inline-block; position: relative; z-index: 1; transition: opacity 1.6s ease-out; border-radius: 3px; padding: 0 3px; margin: 0 -3px; }
.compact-eyebrow-tx .compact-swap-new { display: inline-block; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1.6s ease-out; border-radius: 3px; padding: 0 3px; margin: 0 -3px; }
[data-compact-create-state="saved"] .compact-eyebrow-tx .compact-swap-old { animation: compact-morph-old-ring 2.6s ease-out forwards; }
[data-compact-create-state="saved"] .compact-eyebrow-tx .compact-swap-new { animation: compact-morph-new-ring 2.6s ease-out forwards; }

/* Required asterisk — canonical amber; fades out on commit. */
.compact-ast { color: #b45309; margin-left: 4px; transition: opacity 1s ease-out; }
[data-compact-create-state="saved"] .compact-ast { opacity: 0; }

/* Cluster inputs (reference-create row inputs). */
.compact-row-v .compact-create-input,
.compact-row-v select.compact-create-input {
  font: inherit; font-size: 13px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); outline: none; max-width: 280px; width: 100%;
}
.compact-row-v .compact-create-input:focus { border-color: var(--fg-muted); }

/* Footer row — counter + Create and Continue →; collapses out on commit. */
.compact-create-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 0;
  margin-top: 16px; border-top: 1px dashed var(--border);
  transition:
    opacity 0.6s ease-out 0.6s,
    max-height 0.6s ease-out 1.4s,
    padding 0.6s ease-out 1.4s,
    margin 0.6s ease-out 1.4s,
    border-top-color 0.4s ease-out 0.6s;
  max-height: 60px; overflow: hidden;
}
.compact-create-footer .compact-create-status {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-muted); flex: 1;
}
[data-compact-create-state="saved"] .compact-create-footer {
  opacity: 0; max-height: 0; padding-top: 0; margin-top: 0; border-top-color: transparent;
}
.compact-btn-create {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  padding: 7px 18px; border-radius: 3px;
  background: var(--color-slate-900, #111827); color: #ffffff;
  border: 1px solid var(--color-slate-900, #111827); cursor: pointer;
  font-family: inherit; line-height: 1.3; white-space: nowrap;
}
.compact-btn-create:hover { background: var(--color-slate-800, #1f2937); }
.compact-btn-create:disabled { opacity: 0.45; cursor: not-allowed; }

/* Endpoint-A hint (records with no required fields beyond the title). */
.compact-create-hint {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted);
  margin-top: 10px;
  transition: opacity 0.6s ease-out;
}
[data-compact-create-state="saved"] .compact-create-hint { opacity: 0; }

/* Rest of page during create — ghosted, restores on commit. */
[data-compact-create-state="draft"] .compact-create-rest { opacity: 0.4; pointer-events: none; }
[data-compact-create-state="saved"] .compact-create-rest { opacity: 1; pointer-events: auto; transition: opacity 1.4s ease-out 0.8s; }

/* P0.7 V4 double-ring keyframes — verbatim from reference-create. */
@keyframes compact-morph-old-ring {
  0%   { box-shadow: 0 0 0 0 rgba(100, 116, 139, 0); opacity: 1; }
  10%  { box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.55); opacity: 1; }
  25%  { box-shadow: 0 0 0 0 rgba(100, 116, 139, 0); opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes compact-morph-new-ring {
  0%, 35% { opacity: 0; box-shadow: 0 0 0 0 rgba(100, 116, 139, 0); }
  55%     { opacity: 1; box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.55); }
  100%    { opacity: 1; box-shadow: 0 0 0 0 rgba(100, 116, 139, 0); }
}

/* Empty state for a collection with no rows. P0.2 absence vocabulary:
 * italic faint "No <plural-noun> yet", left-aligned for row panels,
 * 12.5px, padding consistent with the populated rows. */
.compact-empty {
  padding: 9px 14px;
  text-align: left;
  color: var(--fg-faint);
  font-style: italic;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* Active / Inactive state-badge variants (reference.html .badge--active /
 * .badge--inactive) — the is_active lifecycle family, joining the
 * cpv1-badge state families defined in campaign_page.css. */
.cpv1-body .cpv1-badge--state-active { background: var(--color-success-bg); color: var(--color-success-text); }
.cpv1-body .cpv1-badge--state-active.cpv1-badge--clickable:hover { background: #dcfce7; }
.cpv1-body .cpv1-badge--state-inactive { background: var(--surface-2); color: var(--fg-muted); }
.cpv1-body .cpv1-badge--state-inactive.cpv1-badge--clickable:hover { background: var(--color-slate-100); }
.cpv1-body .cpv1-state-dot--state-active { background: var(--color-success-text); }
.cpv1-body .cpv1-state-dot--state-inactive { background: var(--fg-muted); }

/* Absent value form (Field atom form 8 / P0.5 empty-cell): italic faint
 * "No X yet" — the absence line IS the click-to-edit target; hover shows
 * the input shape via the inline-field progressive border. */
.cpv1-body.compact-detail-page .compact-absent {
  color: var(--fg-faint);
  font-style: italic;
  font-size: 12.5px;
}