/* ════════════════════════════════════════════════════════════════════════════
   Presence — M1 commercial prototype styles
   ----------------------------------------------------------------------------
   Prototype-only. Linked from Pages/Prototype/Presence.cshtml via @section Head,
   so emprise.css stays exactly as shipped. M2 owns whatever of this graduates.

   Every colour, font, radius and shadow comes from the existing Emprise tokens in
   emprise.css. Nothing here replaces eh-h1/h2/btn/card/container/section/nav —
   these classes only add the explanatory visuals Presence needs:
   public surfaces connected by a governed thread.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.eh-presence-h1 em { font-style: normal; color: var(--eh-clay); }

.eh-presence-hero-support {
  margin: 18px 0 26px;
  padding-left: 16px;
  border-left: 2px solid var(--eh-thread);
  font-size: 15px; line-height: 1.6;
  color: rgba(245,240,231,.82);
}

/* ─── Public presence console (hero visual) ──────────────────────────────── */
.eh-presence-console {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--eh-border-dark);
  border-radius: var(--eh-r-card);
  box-shadow: var(--eh-shadow-dark);
  overflow: hidden;
}
.eh-presence-console-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
}
.eh-presence-console-title {
  font-family: var(--eh-font-mono); font-size: 11.5px; letter-spacing: .04em;
  color: rgba(245,240,231,.66);
}
.eh-presence-console-badge {
  font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(109,147,166,.16); color: #9CC0D1;
}
.eh-presence-console-body { padding: 6px 18px 14px; }

/* the soft-blue thread that visually strings the rows together */
.eh-presence-console-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0 11px 20px;
  font-size: 13px;
}
.eh-presence-console-row::before {
  content: ''; position: absolute; left: 4px; top: 0; bottom: 0;
  width: 2px; background: rgba(109,147,166,.85);
}
.eh-presence-console-row::after {
  content: ''; position: absolute; left: 1px; top: 50%; margin-top: -3.5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--eh-deep-command); border: 2px solid var(--eh-thread);
}
.eh-presence-console-label {
  color: rgba(245,240,231,.62); font-family: var(--eh-font-mono); font-size: 12px;
}
.eh-presence-console-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 6px; padding-left: 20px;
  font-family: var(--eh-font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(245,240,231,.62);
}
.eh-presence-console-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07);
}
.eh-presence-console-note {
  padding: 0 18px 16px;
  font-size: 11.5px; line-height: 1.5; color: rgba(245,240,231,.70);
}

/* State pills. Each carries a word as well as a colour — never colour alone. */
.eh-presence-state {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.eh-presence-state.is-approved  { color: #8FCBAC; background: rgba(124,185,155,.14); border-color: rgba(124,185,155,.3); }
.eh-presence-state.is-review    { color: #DDA073; background: var(--eh-clay-light);   border-color: rgba(199,126,91,.34); }
.eh-presence-state.is-current   { color: #9CC0D1; background: var(--eh-soft-blue-light); border-color: rgba(109,147,166,.34); }
.eh-presence-state.is-observed  { color: rgba(245,240,231,.75); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.eh-presence-state.is-attention { color: #DDA073; background: var(--eh-clay-light);   border-color: rgba(199,126,91,.34); }
.eh-presence-state.is-human     { color: #9CC0D1; background: var(--eh-soft-blue-light); border-color: rgba(109,147,166,.34); }

/* ─── Problem cards ──────────────────────────────────────────────────────── */
.eh-presence-drift-grid { margin-top: 40px; }
.eh-presence-drift-card { border-top: 3px solid var(--eh-thread-dim); }
.eh-presence-drift-tag {
  display: block; margin-bottom: 10px;
  font-family: var(--eh-font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--eh-evergreen);
}
.eh-presence-drift-close {
  margin-top: 34px; text-align: center;
  font-family: var(--eh-font-serif); font-size: 19px; line-height: 1.55;
  color: var(--eh-evergreen);
}

/* ─── Governed public truth: the thread ──────────────────────────────────── */
.eh-presence-truth-flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 0;
  margin: 44px 0 48px;
}
.eh-presence-truth-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--eh-border-dark);
  border-radius: var(--eh-r-card);
  padding: 26px 24px;
}
.eh-presence-truth-card.is-anchor {
  background: rgba(109,147,166,.1);
  border-color: rgba(109,147,166,.42);
  box-shadow: 0 0 0 1px rgba(109,147,166,.18);
}
.eh-presence-truth-step {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--eh-font-mono); font-size: 11px; letter-spacing: .08em;
  color: #9CC0D1;
}
.eh-presence-truth-title {
  font-family: var(--eh-font-serif); font-size: 20px; font-weight: 600; line-height: 1.25;
  color: var(--eh-warm-sand); margin-bottom: 8px;
}
.eh-presence-truth-copy { font-size: 13.5px; line-height: 1.62; color: rgba(245,240,231,.58); }

/* the rail between the cards */
.eh-presence-truth-link {
  position: relative; width: 56px; align-self: center; height: 2px;
  background: var(--eh-thread-dim);
}
.eh-presence-truth-link::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-top: 2px solid var(--eh-thread); border-right: 2px solid var(--eh-thread);
  transform: rotate(45deg);
}

.eh-presence-truth-kinds { margin-bottom: 40px; }
.eh-presence-kind { border-top: 3px solid rgba(255,255,255,.14); }
.eh-presence-kind.is-approved { border-top-color: var(--eh-thread); }
.eh-presence-kind.is-observed { border-top-color: rgba(199,126,91,.55); }
.eh-presence-kind-label {
  margin-bottom: 10px;
  font-family: var(--eh-font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(245,240,231,.72);
}
.eh-presence-truth-value {
  max-width: 760px; margin: 0 auto; text-align: center;
  padding: 22px 26px;
  border: 1px solid rgba(109,147,166,.3); border-radius: var(--eh-r-card);
  background: rgba(109,147,166,.07);
  font-family: var(--eh-font-serif); font-size: 18px; line-height: 1.58;
  color: var(--eh-warm-sand);
}

/* ─── Website: browser illustration ──────────────────────────────────────── */
.eh-presence-website { align-items: start; }
.eh-presence-browser {
  border: 1px solid var(--eh-border);
  border-radius: var(--eh-r-card);
  overflow: hidden;
  background: var(--eh-white);
  box-shadow: var(--eh-shadow-card);
}
.eh-presence-browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  background: var(--eh-mist); border-bottom: 1px solid var(--eh-border);
}
.eh-presence-browser-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--eh-mist-dark); }
.eh-presence-browser-url {
  margin-left: 10px; padding: 3px 12px; border-radius: 999px;
  background: var(--eh-white); border: 1px solid var(--eh-border-warm);
  font-family: var(--eh-font-mono); font-size: 10.5px; color: var(--eh-ink-light);
}
.eh-presence-browser-content { padding: 18px; }

.eh-presence-masthead {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--eh-border-warm);
}
.eh-presence-masthead-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--eh-evergreen);
}
.eh-presence-masthead-name {
  font-family: var(--eh-font-serif); font-size: 14px; font-weight: 600; color: var(--eh-evergreen);
}
.eh-presence-masthead-nav { margin-left: auto; display: flex; gap: 6px; }
.eh-presence-masthead-nav i { display: block; width: 22px; height: 5px; border-radius: 3px; background: var(--eh-mist-dark); }

.eh-presence-site-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--eh-border-warm); border-left: 3px solid var(--eh-thread);
  border-radius: 10px; background: var(--eh-warm-sand);
}
.eh-presence-site-kind {
  font-family: var(--eh-font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--eh-evergreen);
}
.eh-presence-site-title { font-size: 13.5px; font-weight: 600; color: var(--eh-evergreen); }
.eh-presence-site-meta  { font-size: 11.5px; color: var(--eh-ink-light); }
.eh-presence-site-action {
  display: inline-block; margin-top: 6px;
  padding: 9px 16px; border-radius: var(--eh-r-btn);
  background: var(--eh-evergreen); color: var(--eh-warm-sand);
  font-size: 12.5px; font-weight: 600;
}
.eh-presence-browser-note {
  margin-top: 12px; font-size: 11.5px; color: var(--eh-ink-light);
}

/* ─── Reputation ─────────────────────────────────────────────────────────── */
.eh-presence-reputation { align-items: start; }
.eh-presence-review-stack { display: flex; flex-direction: column; gap: 14px; }
.eh-presence-review-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--eh-border-dark);
  border-left: 3px solid var(--eh-thread);
  border-radius: var(--eh-r-card);
  padding: 16px 18px;
}
.eh-presence-review-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 0; font-size: 13px;
}
.eh-presence-review-row + .eh-presence-review-row { border-top: 1px solid rgba(255,255,255,.05); }
.eh-presence-review-key {
  font-family: var(--eh-font-mono); font-size: 11.5px; letter-spacing: .03em;
  color: rgba(245,240,231,.66);
}
.eh-presence-review-val { color: rgba(245,240,231,.82); font-weight: 500; }

.eh-presence-roadmap-item { opacity: .72; }
.eh-presence-roadmap-tag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  padding: 2px 8px; border-radius: 999px;
  border: 1px dashed rgba(245,240,231,.3);
  font-family: var(--eh-font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,240,231,.6);
}

/* ─── Feedback → recovery flow ───────────────────────────────────────────── */
.eh-presence-example {
  max-width: 640px; margin: 0 auto 34px; text-align: center;
  font-size: 14px; color: var(--eh-ink-light);
}
.eh-presence-example span {
  font-family: var(--eh-font-serif); font-size: 17px; color: var(--eh-evergreen);
}
.eh-presence-recovery-flow {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.eh-presence-recovery-step {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 16px;
  background: var(--eh-white);
  border: 1px solid var(--eh-border-warm);
  border-radius: var(--eh-r-card);
}
.eh-presence-recovery-step::after {
  content: ''; position: absolute; right: -12px; top: 50%; z-index: 1;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 2px solid var(--eh-thread); border-right: 2px solid var(--eh-thread);
  transform: rotate(45deg);
}
.eh-presence-recovery-step.is-final { border-color: rgba(109,147,166,.5); background: var(--eh-mist); }
.eh-presence-recovery-step.is-final::after { display: none; }
.eh-presence-recovery-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--eh-soft-blue-light); color: var(--eh-evergreen);
  font-family: var(--eh-font-mono); font-size: 11.5px; font-weight: 500;
}
.eh-presence-recovery-label {
  font-size: 13px; font-weight: 600; line-height: 1.42; color: var(--eh-evergreen);
}

/* ─── Built for healthcare ───────────────────────────────────────────────── */
.eh-presence-controls { margin-top: 40px; }
.eh-presence-control { border-top: 3px solid var(--eh-thread-dim); }
.eh-presence-control-title {
  margin-bottom: 10px;
  font-family: var(--eh-font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--eh-warm-sand);
}
.eh-presence-safety-note {
  margin-top: 30px; text-align: center;
  font-size: 14px; color: rgba(245,240,231,.62);
}

/* ─── Emprise loop ───────────────────────────────────────────────────────── */
.eh-presence-loop {
  list-style: none; margin: 40px 0 0; padding: 0 0 34px;
  position: relative;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.eh-presence-loop-node {
  position: relative;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 16px 14px;
  background: var(--eh-white);
  border: 1px solid var(--eh-border-warm);
  border-top: 3px solid var(--eh-mist-dark);
  border-radius: var(--eh-r-card);
}
.eh-presence-loop-node.is-presence { border-top-color: var(--eh-thread); }
.eh-presence-loop-node::after {
  content: ''; position: absolute; right: -12px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 2px solid var(--eh-thread-dim); border-right: 2px solid var(--eh-thread-dim);
  transform: rotate(45deg);
}
.eh-presence-loop-name  { font-size: 13.5px; font-weight: 700; color: var(--eh-evergreen); }
.eh-presence-loop-owner {
  font-family: var(--eh-font-mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--eh-evergreen);
}
.eh-presence-loop-node:not(.is-presence) .eh-presence-loop-owner { color: var(--eh-ink-light); }

/* the return leg: the loop visibly reconnects rather than ending in a list */
.eh-presence-loop-return {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  border: 2px solid var(--eh-thread-dim); border-top: none;
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
}
.eh-presence-loop-return::before {
  content: ''; position: absolute; left: -1px; top: -1px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--eh-thread); border-left: 2px solid var(--eh-thread);
  transform: rotate(45deg) translate(-1px, 3px);
}
.eh-presence-loop-return-label {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  padding: 0 12px; background: var(--eh-warm-sand);
  font-family: var(--eh-font-mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--eh-evergreen);
}

.eh-presence-loop-copy {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px;
  align-items: center; margin-top: 44px;
}
.eh-presence-loop-close {
  font-family: var(--eh-font-serif); font-size: 20px; line-height: 1.5;
  color: var(--eh-evergreen);
  padding-left: 18px; border-left: 2px solid var(--eh-clay);
}

/* ─── Final CTA ──────────────────────────────────────────────────────────── */
.eh-presence-cta-copy { max-width: 620px; margin: 14px auto 26px; }
.eh-presence-cta-row  { justify-content: center; }

/* ─── Shared contrast rules moved OUT of this file in M2 (§18, §19) ─────────
   M1-R1 carried prototype-scoped copies of the eyebrow and .eh-section-sub contrast
   corrections, because M1-R1 was forbidden from touching emprise.css. M2 owns the
   shared repair, so those rules now live once, in emprise.css, and apply site-wide.
   Removed here: the .eh-eyebrow colour overrides per section background; the
   .eh-section-sub override on dark/evergreen; and .eh-cta-band .eh-section-sub and
   .eh-section-dark/.eh-section-evergreen .eh-body, neither of which matched a single
   element on any page (verified against the rendered markup).
   What remains below is Presence-only: readability inside the console, browser,
   reputation and lifecycle components this page introduces.                        */

/* the last node's forward arrow is carried by the return rail, not a dangling chevron */
.eh-presence-loop-node:last-of-type::after { display: none; }

/* make the governed thread read clearly at a glance */
.eh-presence-truth-link { background: var(--eh-thread); }
.eh-presence-truth-link::after { border-color: var(--eh-thread); }


/* ════════════════════════════════════════════════════════════════════════════
   Responsive — matches the existing 900 / 860 / 780 / 640 breakpoint family
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .eh-presence-recovery-flow { grid-template-columns: repeat(3, 1fr); }
  .eh-presence-recovery-step:nth-child(3)::after { display: none; }
  .eh-presence-loop { grid-template-columns: repeat(3, 1fr); }
  .eh-presence-loop-node:nth-child(3)::after { display: none; }
  .eh-presence-loop-copy { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 900px) {
  .eh-presence-drift-grid { grid-template-columns: repeat(2, 1fr); }
  .eh-presence-controls   { grid-template-columns: repeat(2, 1fr); }
  .eh-presence-truth-kinds { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* the thread turns vertical rather than shrinking to unreadable columns */
  .eh-presence-truth-flow { grid-template-columns: 1fr; gap: 0; }
  .eh-presence-truth-link {
    width: 2px; height: 34px; margin: 0 auto; align-self: center;
  }
  .eh-presence-truth-link::after {
    right: 50%; top: auto; bottom: 0; margin-top: 0; transform: translateX(50%) rotate(135deg);
  }
}

@media (max-width: 780px) {
  .eh-presence-website,
  .eh-presence-reputation { grid-template-columns: 1fr; gap: 40px; }
  .eh-presence-truth-value { font-size: 16.5px; padding: 20px; }
  .eh-presence-drift-close { font-size: 17px; }
}

@media (max-width: 640px) {
  .eh-presence-drift-grid,
  .eh-presence-controls { grid-template-columns: 1fr; }

  /* stacked flows: the connector rotates to point down */
  .eh-presence-recovery-flow,
  .eh-presence-loop { grid-template-columns: 1fr; gap: 22px; }
  .eh-presence-recovery-step::after,
  .eh-presence-loop-node::after {
    right: 50%; top: auto; bottom: -15px; margin-top: 0;
    transform: translateX(50%) rotate(135deg);
  }
  .eh-presence-recovery-step:nth-child(3)::after,
  .eh-presence-loop-node:nth-child(3)::after { display: block; }
  .eh-presence-loop-node:last-of-type::after { display: none; }

  .eh-presence-loop { padding-bottom: 0; }
  .eh-presence-loop-return {
    position: static; height: auto; border: none;
    display: flex; align-items: center; justify-content: center;
    padding-top: 4px;
  }
  .eh-presence-loop-return::before { display: none; }
  .eh-presence-loop-return-label {
    position: static; transform: none; padding: 6px 14px;
    border: 1px dashed var(--eh-thread-dim); border-radius: 999px;
  }

  .eh-presence-console-body { padding: 4px 14px 12px; }
  .eh-presence-console-row  { flex-wrap: wrap; gap: 6px; }
  .eh-presence-console-note { padding: 0 14px 14px; }
  .eh-presence-loop-close   { font-size: 18px; }
}

/* Nothing here animates; the page is motion-free by default. */