/* ── PUBLIC DEMO WIDGET ────────────────────────────────────
   Two-material visual language: the sheet panel reads as paper
   (grid lines, monospace, zero radius/shadow); the portal panel
   reads as a finished app (warm surface, rounded, breathing room).
   Scoped entirely under .eg2-demo so it never leaks site-wide. */

.eg2-demo {
  --eg2-paper: #FFFFFF;
  --eg2-grid: #DCDFE4;
  --eg2-ink: #16191D;
  --eg2-ink-soft: #454B52;
  --eg2-muted: #5A6472;
  --eg2-trace: #FFE68A;
  --eg2-trace-edge: #E8B830;
  --eg2-portal-surface: #EFEDE8;
  --eg2-portal-accent: #0B5D5D;
  margin-top: 3rem;
  position: relative;
}

.eg2-demo-hero .hero-h1 {
  font-family: 'Frank Ruhl Libre', Georgia, serif;
}

/* ── IDENTITY BAR ──────────────────────────────────────────
   Grey header container: dropdown row on top, value line + micro
   note grouped directly beneath it (Law of Proximity — the context
   text reads as attached to the selector, not as separate copy). */
.eg2-demo-identitybar {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: #F7F6F3;
  border: 1px solid var(--eg2-grid);
  border-radius: .75rem;
  padding: .75rem 1rem .9rem;
}

.eg2-demo-identitybar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
}

.eg2-demo-identitybar-label {
  font-family: 'Assistant', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--eg2-muted);
}

.eg2-demo-identity {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--eg2-grid);
  border-radius: 2rem;
  padding: .3rem .9rem .3rem .3rem;
  min-height: 44px;
  cursor: pointer;
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--eg2-ink);
  transition: border-color .2s, box-shadow .2s;
}
.eg2-demo-identity:hover,
.eg2-demo-identity:focus-visible {
  border-color: var(--eg2-portal-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,93,93,.15);
}
.eg2-demo-identity.eg2-pulse { animation: eg2DemoPulse 1s ease-in-out; }
@keyframes eg2DemoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11,93,93,.35); }
  50%      { box-shadow: 0 0 0 8px rgba(11,93,93,0); }
}

.eg2-demo-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  font-family: 'IBM Plex Mono', monospace;
  flex-shrink: 0;
}

.eg2-demo-caret { flex-shrink: 0; opacity: .5; transition: transform .2s; }
.eg2-demo-identity[aria-expanded="true"] .eg2-demo-caret { transform: rotate(180deg); }

.eg2-demo-identity-list {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 20;
  margin-top: .4rem;
  list-style: none;
  padding: .4rem;
  background: #fff;
  border: 1px solid var(--eg2-grid);
  border-radius: .75rem;
  box-shadow: 0 12px 32px rgba(22,25,29,.14);
  min-width: 240px;
}
.eg2-demo-identity-list[hidden] { display: none; }

.eg2-demo-identity-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  border-radius: .5rem;
  cursor: pointer;
  font-family: 'Assistant', sans-serif;
  font-size: .92rem;
  color: var(--eg2-ink);
}
.eg2-demo-identity-option:hover,
.eg2-demo-identity-option.is-active { background: var(--eg2-portal-surface); }

.eg2-demo-option-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .68rem;
  font-family: 'IBM Plex Mono', monospace;
  flex-shrink: 0;
}

.eg2-demo-option-meta {
  color: var(--eg2-muted);
  font-size: .78rem;
  margin-inline-start: auto;
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}

/* ── EXPLANATORY STRIP ─────────────────────────────────────
   Single top-to-bottom block: mode chip, dropdown (label attached),
   value line, micro note. Each element has exactly one job — see
   demo-mode-copy-spec.md. Replaces the old combined trust-bar
   sentence + collapsible mobile chip/panel (short enough now to
   just always show at every breakpoint). */
.eg2-demo-explain {
  margin-bottom: 1rem;
}

/* A label, not a control: no pill/border/shadow/icon, quieter than the card it
   sits in, not tab-focusable or announced as interactive (plain <span>). If this
   ever competes with the identity Select for attention, reduce it further. */
.eg2-demo-chip {
  display: block;
  background: rgba(22, 25, 29, .04);
  border-radius: .3rem;
  padding: .2rem .4rem;
  margin: -.2rem -.4rem .5rem;
  font-family: 'Assistant', sans-serif;
  font-size: .72rem;
  font-weight: 500;
  color: var(--eg2-ink-soft);
  cursor: default;
  user-select: none;
  width: fit-content;
}

.eg2-demo-value-line {
  font-family: 'Assistant', sans-serif;
  font-size: .95rem;
  font-weight: 400;
  /* dark grey, not pure black/ink — reads as secondary to the selector next to it */
  color: var(--eg2-ink-soft);
  margin: 0;
  /* sits on the same line as the label + dropdown; wraps below them only if the
     row runs out of horizontal room (identitybar-row already has flex-wrap:wrap) */
  flex: 1 1 auto;
}

.eg2-demo-micro-note {
  font-family: 'Assistant', sans-serif;
  font-size: .82rem;
  font-weight: 400;
  color: var(--eg2-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── CTA (below the panels — converts once value is felt, not before) ──
   Flex-centered (not just text-align) so it's robust regardless of what
   the button's own display type is, and sits well clear of both panels. */
.eg2-demo-cta-row {
  display: flex;
  justify-content: center;
  padding: 2.5rem 0 1rem;
}

/* ── WORKS-WITH ROW (below the CTA) ───────────────────────
   Small, quiet, brand-colored file-type icons — a trust signal,
   not a second call to action, so it stays visually subordinate
   to the button above it. */
.eg2-demo-works-with {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 0 0;
  font-size: .82rem;
  color: var(--eg2-muted);
}

.eg2-demo-works-with-icons {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.eg2-demo-works-with-icon {
  display: flex;
}

.eg2-demo-works-with-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ── MOBILE SEGMENT TOGGLE (hidden on desktop) ───────────── */
.eg2-demo-toggle { display: none; }

/* ── PANELS ────────────────────────────────────────────── */
.eg2-demo-panels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  /* stretch (the grid default) so both panels match the taller one's height —
     the portal iframe's fixed height is what actually drives that height;
     see .eg2-demo-panel below. */
  align-items: stretch;
}

/* Source → result: points from the sheet toward the portal. Direction flips
   per language via inline style on the SVG (same pattern as the CTA arrow). */
.eg2-demo-flow-arrow {
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--eg2-portal-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eg2-demo-panel {
  display: flex;
  flex-direction: column;
}

.eg2-demo-panel-label {
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  color: var(--eg2-muted);
  margin-bottom: .5rem;
}

/* SHEET PANEL — paper material: cold white, grid lines, mono digits, zero radius/shadow.
   Height is hardcoded to match the portal iframe's fixed height below — deliberately not
   flex-stretched (a flex-basis:0 child fighting an explicit height on the portal side
   produced an unbounded runaway height; see git history if reintroducing that). All 20 sheet
   rows always render regardless of selected identity (only highlighting changes), so this
   scrolls internally rather than growing with content. */
.eg2-demo-sheet {
  border: 1px solid var(--eg2-grid);
  background: var(--eg2-paper);
  height: 520px;
  overflow: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
}

.eg2-demo-sheet-cols,
.eg2-demo-sheet-head,
.eg2-demo-sheet-row {
  display: grid;
  grid-template-columns: 34px repeat(var(--eg2-demo-cols, 6), minmax(84px, 1fr));
}

.eg2-demo-sheet-cols {
  background: #F3F4F6;
  color: var(--eg2-muted);
  font-size: .68rem;
  border-bottom: 1px solid var(--eg2-grid);
  position: sticky;
  top: 0;
}
.eg2-demo-sheet-cols > span {
  padding: .3rem .5rem;
  border-inline-end: 1px solid var(--eg2-grid);
  text-align: center;
}

.eg2-demo-sheet-head {
  background: #fff;
  color: var(--eg2-muted);
  font-family: 'Assistant', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  border-bottom: 1px solid var(--eg2-grid);
  position: sticky;
  top: 17px;
}
.eg2-demo-sheet-head > span {
  padding: .35rem .5rem;
  border-inline-end: 1px solid var(--eg2-grid);
  text-align: start;
}

.eg2-demo-sheet-row {
  border-bottom: 1px solid var(--eg2-grid);
  transition: opacity .3s ease-out, background-color .3s ease-out;
}
.eg2-demo-sheet-row > span {
  padding: .4rem .5rem;
  border-inline-end: 1px solid var(--eg2-grid);
  color: var(--eg2-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eg2-demo-sheet-row .eg2-demo-rownum {
  color: var(--eg2-muted);
  text-align: center;
  background: #FAFAF9;
}
.eg2-demo-sheet-row.is-matched {
  background: var(--eg2-trace);
  border-inline-start: 2px solid var(--eg2-trace-edge);
}
.eg2-demo-sheet-row.is-matched > span:nth-child(2) { font-weight: 700; }
.eg2-demo-sheet-row.is-unmatched { opacity: .3; }

.eg2-demo-sheet-link {
  display: inline-block;
  margin-top: .6rem;
  font-family: 'Assistant', sans-serif;
  font-size: .8rem;
  color: var(--eg2-muted);
}
.eg2-demo-sheet-link:hover { color: var(--eg2-portal-accent); }

/* PORTAL PANEL — app material: warm surface, rounded, breathing room */
.eg2-demo-panel-portal {
  background: var(--eg2-portal-surface);
  border-radius: 1.25rem;
  padding: 1rem;
}

.eg2-demo-portal-frame {
  border-radius: .85rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11,93,93,.08);
  height: 520px;
  display: flex;
  flex-direction: column;
}

/* Faux browser chrome: dots + address bar, so "Excel vs. website" reads instantly.
   No back/forward, no tabs — a hint, not a screenshot. The outer frame above keeps
   a fixed 520px height (matches the sheet panel); the iframe below is flex:1 to take
   whatever's left after this bar's natural height, NOT an explicit height — stacking
   flex:1 with an explicit height on the same element is what caused the runaway-height
   bug from an earlier round. Safe here because the ancestor above has a definite height. */
.eg2-demo-browser-chrome {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  background: #F3F4F6;
  border-bottom: 1px solid var(--eg2-grid);
  flex-shrink: 0;
}

.eg2-demo-chrome-dots {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
}
.eg2-demo-chrome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.eg2-demo-chrome-dot-red    { background: #EF4444; }
.eg2-demo-chrome-dot-yellow { background: #F59E0B; }
.eg2-demo-chrome-dot-green  { background: #22C55E; }

.eg2-demo-chrome-address {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--eg2-grid);
  border-radius: 1rem;
  padding: .2rem .7rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  color: var(--eg2-muted);
}

.eg2-demo-portal-frame iframe {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  border: none;
}

/* ── REDUCED MOTION ────────────────────────────────────── */
.eg2-demo.eg2-demo--reduced-motion .eg2-demo-sheet-row,
.eg2-demo.eg2-demo--reduced-motion .eg2-demo-identity,
.eg2-demo.eg2-demo--reduced-motion .eg2-demo-panel {
  transition: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .eg2-demo-sheet-row, .eg2-demo-identity, .eg2-demo-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* ── MOBILE (<768px): single panel, segmented toggle ─────── */
@media (max-width: 767px) {
  .eg2-demo-toggle {
    display: flex;
    gap: .4rem;
    margin-bottom: 1rem;
  }
  .eg2-demo-toggle-btn {
    flex: 1;
    padding: .55rem;
    border: 1px solid var(--eg2-grid);
    background: #fff;
    border-radius: .6rem;
    font-family: 'Assistant', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    color: var(--eg2-muted);
    cursor: pointer;
  }
  .eg2-demo-toggle-btn.active { background: var(--eg2-ink); color: #fff; border-color: var(--eg2-ink); }

  .eg2-demo-panels { grid-template-columns: 1fr; }
  .eg2-demo-panel { display: none; }
  .eg2-demo-panel[data-active="true"] { display: block; animation: eg2DemoCrossfade .25s ease-out; }
  .eg2-demo-flow-arrow { display: none; }

  .eg2-demo-portal-frame { height: 440px; }
  .eg2-demo-sheet { height: 440px; }
}
@keyframes eg2DemoCrossfade { from { opacity: 0; } to { opacity: 1; } }