/**
 * END-UX-001 Phase A — Experience architecture tokens & chrome
 * Governing standard: docs/END-UX-001-EXPERIENCE-ARCHITECTURE.md
 */

/* ─── Tier tokens (T1 / T2 / T3) ─── */
:root {
  --ed-tier-t1-size: var(--ed-text-lg, 16px);
  --ed-tier-t1-weight: 600;
  --ed-tier-t1-color: var(--ed-navy);
  --ed-tier-t2-size: var(--ed-text-base, 14px);
  --ed-tier-t2-color: var(--ed-text);
  --ed-tier-t3-size: var(--ed-text-sm, 13px);
  --ed-tier-t3-color: var(--ed-text-muted);

  --ed-experience-gap: var(--ed-space-3, 12px);
  --ed-experience-frame-gap: var(--ed-space-4, 16px);
}

/* ─── Tier utility classes ─── */
.ed-tier-t1,
.ed-dominant-purpose {
  margin: 0;
  font-family: var(--ed-font);
  font-size: var(--ed-tier-t1-size);
  font-weight: var(--ed-tier-t1-weight);
  color: var(--ed-tier-t1-color);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ed-tier-t2,
.ed-purpose-hint {
  margin: 0;
  font-size: var(--ed-tier-t2-size);
  color: var(--ed-tier-t3-color);
  line-height: 1.45;
  max-width: 52ch;
}

.ed-tier-t3 {
  font-size: var(--ed-tier-t3-size);
  color: var(--ed-tier-t3-color);
  line-height: 1.45;
}

/* ─── Lens 1: Identity strip (Where am I?) ─── */
.ed-identity-strip,
.ed-page-subtitle.ed-identity-strip {
  margin: 0;
  font-family: var(--ed-font);
  font-size: var(--ed-text-sm, 13px);
  font-weight: 500;
  color: var(--ed-text-muted);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.ed-status-chip {
  display: inline-block;
  font-size: var(--ed-text-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  margin-left: 4px;
  border-radius: var(--ed-radius-pill, 999px);
  background: var(--ed-ivory-deep);
  color: var(--ed-text-muted);
  border: 1px solid var(--ed-border-light);
  vertical-align: middle;
}

.ed-status-chip--draft {
  background: #e8f4fd;
  color: #1565a8;
  border-color: #c5e3f6;
}

.ed-status-chip--attention {
  background: var(--ed-warn-light);
  color: var(--ed-warn);
  border-color: #f5d9a8;
}

/* ─── Experience frame (in-page lenses 2 & 3) ─── */
.ed-experience-frame {
  margin-bottom: var(--ed-experience-frame-gap);
  padding-bottom: var(--ed-space-3);
  border-bottom: 1px solid var(--ed-border-light);
}

.ed-experience-frame--compact {
  margin-bottom: var(--ed-space-3);
  padding-bottom: var(--ed-space-2);
  border-bottom: 1px solid var(--ed-border-light);
}

/* In-page frame only when topbar does not already state purpose */
.ed-experience-frame--skip-when-topbar {
  display: none;
}

.ed-experience-frame__main {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ed-space-3);
  flex-wrap: wrap;
}

.ed-experience-frame--compact .ed-experience-frame__main {
  flex-direction: column;
  align-items: stretch;
  gap: var(--ed-space-2);
}

.ed-experience-frame--compact .ed-experience-frame__next {
  align-self: flex-start;
}

.ed-experience-frame__purpose {
  flex: 1 1 200px;
  min-width: 0;
}

.ed-experience-frame__next {
  flex-shrink: 0;
  align-self: center;
}

.ed-experience-frame .ed-identity-strip {
  margin-bottom: var(--ed-space-2);
}

/* ─── Task mode (body + zones) ─── */
.ed-zone-build { /* default build character */ }
.ed-zone-review { /* read-first surfaces */ }
.ed-zone-reference {
  opacity: 1;
}
.ed-zone-orient { /* inventory / continue surfaces */ }

body.ed-mode-build .ed-content { --ed-active-mode: build; }
body.ed-mode-review .ed-content { --ed-active-mode: review; }
body.ed-mode-reference .ed-content { --ed-active-mode: reference; }
body.ed-mode-orient .ed-content { --ed-active-mode: orient; }

/* Reference zones — visually subordinate */
.ed-zone-reference.ed-tier-t3,
.ed-tier-t3.ed-zone-reference {
  color: var(--ed-tier-t3-color);
}

.ed-zone-reference.ed-tier-t3 .zone-heading,
.ed-zone-reference.ed-tier-t3 .group-heading {
  font-size: var(--ed-text-xs);
  color: var(--ed-text-subtle);
}

/* ─── Next-click: one primary action per viewport ─── */
.ed-experience-frame__next .btn-primary,
.ed-cf-toolbar-actions .btn-primary,
.ed-dash-empty-compact-actions .btn-primary:first-child {
  /* primary bridge actions — no extra rules needed */
}

/* Dashboard hierarchy — Phase A */
.ed-dash-continue.ed-zone-orient {
  /* T1 dominant on Home */
}

.ed-dash-continue .ed-dash-card-title {
  font-size: var(--ed-tier-t1-size);
  font-weight: var(--ed-tier-t1-weight);
}

.ed-dash-attention.ed-zone-orient .ed-dash-card-title {
  font-size: var(--ed-text-base);
  font-weight: 600;
}

.ed-dash-card.ed-zone-reference {
  /* activity, contract overview — T3 */
}

.ed-dash-card.ed-zone-reference .ed-dash-card-title {
  font-size: var(--ed-text-sm);
  font-weight: 600;
  color: var(--ed-text-muted);
}

/* Property profile — contracts dominant */
.ed-property-contracts-zone {
  margin-top: var(--ed-space-2);
}

.ed-property-reference-zone {
  /* legacy — reference now in collapsed details */
}

/* Topbar: purpose (title) vs identity (subtitle) */
.ed-topbar-titles .ed-page-title {
  font-size: var(--ed-display-sm, 22px);
}

.ed-topbar-titles .ed-identity-strip {
  margin-top: 2px;
}

/* Suppress duplicate purpose when frame + topbar both set */
.ed-experience-frame--compact .ed-dominant-purpose {
  font-size: var(--ed-text-base);
}