/* Hedwig Outreach demo — brand tokens taken from the product's own index.css.
   Zero dependencies: everything here ships in the repo. */

@font-face {
  font-family: 'Orev Edge';
  src: url('assets/OrevEdge-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Orev Edge';
  src: url('assets/OrevEdge-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('assets/Onest-Variable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  src: url('assets/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}

:root {
  --pumpkin: #F97316;
  --pumpkin-mid: #EA580C;
  --carbon: #1D1F22;
  --smoke: #FDFFFE;
  --grape: #5F5AA2;
  --emerald: #10B981;
  --canvas: #F1F2F4;
  --line: rgba(29, 31, 34, 0.10);
  --line-soft: rgba(29, 31, 34, 0.06);
  --muted: rgba(29, 31, 34, 0.52);
  /* Matches the product's own html rule: Inter for UI, Onest behind it. */
  --ui: 'Inter Variable', 'Inter', 'Onest', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow: 0 14px 40px -14px rgba(29, 31, 34, 0.25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: var(--ui);
  color: var(--carbon);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

/* The dot grid the real canvas wears. */
.app {
  position: relative; height: 100%;
  display: grid;
  grid-template-rows: 56px 1fr auto;
  background-image: radial-gradient(circle, rgba(29,31,34,0.15) 1.2px, transparent 1.2px);
  background-size: 25px 25px;
}

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; padding: 0 20px;
}
/* The brand owns the top-left corner: mark beside the wordmark on one line,
   sized so the mark matches the wordmark's height. The lockup is the link. */
/* Centre, not baseline: the lockup is a flex box wrapping an image, so its
   baseline is unreliable and the address drifted below the wordmark. */
.brand-left { display: inline-flex; align-items: center; gap: 13px; }
/* No flex gap here: the wordmark and "AI" are both children, so a gap would
   space those two apart as well. The mark's spacing is a margin instead. */
.brand-lockup {
  display: inline-flex; align-items: center; gap: 0;
  font: inherit; color: inherit; background: none; border: 0;
  padding: 0; cursor: pointer;
}
.brand-mark { display: block; align-self: center; }
/* "Hedwig" is the display wordmark; "AI" is set in the plain UI face so it
   reads as a qualifier beside the mark rather than part of the logotype. */
.wordmark {
  font-family: 'Orev Edge', var(--ui); font-weight: 700;
  font-size: 27px; letter-spacing: -0.005em; line-height: 1;
  margin-left: 10px;
}
.wordmark-ai {
  font-family: var(--ui); font-weight: 500;
  font-size: 21px; line-height: 1; margin-left: 6px; color: var(--carbon);
}
.brand-lockup:hover .wordmark, .brand-lockup:hover .wordmark-ai { color: var(--pumpkin-mid); }

/* The address sits right beside the lockup — visible, not just clickable. */
.site-link {
  font-size: 14px; font-weight: 600; color: var(--pumpkin-mid);
  text-decoration: none; letter-spacing: .005em;
  border-bottom: 1.5px solid transparent; transition: border-color 120ms;
}
.site-link:hover { border-bottom-color: var(--pumpkin); }

.board-name { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--muted); }

.stats {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  background: rgba(253,255,254,0.95); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 6px 16px; box-shadow: 0 1px 2px rgba(29,31,34,0.04);
  white-space: nowrap; backdrop-filter: blur(6px);
}
.stat-n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 12px; color: var(--muted); }
.stat-dot { margin: 0 8px; font-size: 12px; color: var(--muted); opacity: 0.45; }

/* ── the canvas ──────────────────────────────────────────── */
.app { background: #F6F6F7; }

/* Narrow tool rail down the left edge. */
.rail {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.rail-btn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: none; cursor: pointer; color: #9A9BA1;
}
.rail-btn:hover { background: rgba(29,31,34,.06); color: var(--carbon); }
.rail-btn.is-on { background: #E4EAFB; color: #4E5BA6; }
.rail-gap { height: 18px; }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: none; cursor: pointer; color: #86878E;
}
.icon-btn:hover { background: rgba(29,31,34,.06); color: var(--carbon); }
.icon-btn.sm { width: 26px; height: 26px; }
.avatar-me {
  width: 28px; height: 28px; border-radius: 50%; margin-left: 4px;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  color: #fff; background: linear-gradient(140deg, #5B6ED0, #8E6BC6);
}

/* Shared icon sizing — stroke icons, filled ones opt out. */
.ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9;
      stroke-linecap: round; stroke-linejoin: round; display: block; }
.ic-title { width: 15px; height: 15px; color: #7E7F87; }
.ic-send { fill: currentColor; stroke: none; color: #5B8DEF; }
.ic-play { width: 11px; height: 11px; fill: currentColor; stroke: none; }

/* ── stage: three frames floating on the canvas ──────────── */
.stage {
  display: grid; gap: 34px 46px; padding: 8px 40px 0 58px;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 0.56fr) minmax(0, 0.44fr);
  min-height: 0; position: relative;
}
.frame-mail   { grid-column: 1; grid-row: 1 / span 2; }
.frame-agent  { grid-column: 2; grid-row: 1; }
.frame-outbox { grid-column: 2; grid-row: 2; }

/* Each frame carries a drag grip above it and a close button beside it. */
.frame-wrap { position: relative; min-height: 0; display: flex; }
.frame-grip {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 3px; background: rgba(29,31,34,.17);
}
.frame-x {
  position: absolute; top: -15px; right: -6px; z-index: 3;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #fff; color: #8A8B92;
  box-shadow: 0 1px 3px rgba(29,31,34,.18); cursor: default;
}
.frame-x .ic { width: 12px; height: 12px; }

.frame {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--smoke); border: 1px solid rgba(29,31,34,.09);
  border-radius: 16px; box-shadow: 0 10px 30px -16px rgba(29,31,34,.28);
  overflow: hidden;
}

.frame-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 14px; height: 48px; flex: 0 0 auto;
}
.frame-name { font-size: 14.5px; font-weight: 600; }
.spacer { margin-left: auto; }
/* The little selection square on the mail frame's header. */
.box { width: 13px; height: 13px; border: 1.6px solid #9EA0A8; border-radius: 3.5px; }

.chip {
  font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 4px 9px;
  background: rgba(29,31,34,.055); font-variant-numeric: tabular-nums; color: #55565D;
}
.chip-sent { background: var(--emerald); color: var(--smoke); }

.ghost-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; font-weight: 500; color: #55565D;
  background: none; border: 0; border-radius: 8px; padding: 5px 8px; cursor: pointer;
}
.ghost-btn:hover { background: rgba(29,31,34,.055); color: var(--carbon); }
.ghost-btn .ic { width: 13px; height: 13px; }

/* Second row: folder, search, pager. */
.frame-toolbar {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 0 12px 10px 14px;
}
.folder {
  font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--carbon);
  background: #fff; border: 1px solid rgba(29,31,34,.12); border-radius: 8px;
  padding: 5px 7px; cursor: pointer;
}
.tool-sep { width: 1px; height: 18px; background: rgba(29,31,34,.1); }
.search { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; color: #9A9BA1; }
.search .ic { width: 14px; height: 14px; }
.search-ph { font-size: 13px; }
.pager { display: flex; align-items: center; gap: 3px; color: #8A8B92; }
.pg { width: 20px; height: 20px; display: grid; place-items: center; border: 0;
      background: none; border-radius: 6px; cursor: pointer; color: inherit; }
.pg:hover { background: rgba(29,31,34,.06); color: var(--carbon); }
.pg .ic { width: 13px; height: 13px; }
.pg-n { font-size: 12px; font-variant-numeric: tabular-nums; }

.frame-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── mail rows ───────────────────────────────────────────── */
.row {
  display: flex; gap: 11px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid rgba(29,31,34,.055);
  cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; font: inherit; color: inherit;
}
.row:hover { background: rgba(29,31,34,.03); }
.row.unread { background: rgba(29,31,34,.028); }
.row-check {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  border: 1.6px solid #B8B9C0;
}
.avatar {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700;
}
.row-main { min-width: 0; flex: 1 1 auto; }
.row-name { font-size: 14px; font-weight: 600; }
.row-sub { font-size: 13.5px; color: #55565D; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-time { font-size: 11.5px; color: #96979E; margin-top: 3px; }
/* Row actions sit at the right, greyed until hover — as on the real board. */
.row-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; color: #C2C3C9; }
.row-actions .ic { width: 15px; height: 15px; }
.row:hover .row-actions { color: #8A8B92; }
.unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pumpkin);
  flex: 0 0 auto; margin-right: -3px; }
.unread-dot.is-off { background: none; }

/* ── agent ───────────────────────────────────────────────── */
.agent-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; }
.agent-prompt {
  width: 100%; resize: none; overflow: hidden; font: inherit; font-size: 13.5px; line-height: 1.6;
  color: var(--carbon); background: #fff;
  border: 1px solid rgba(29,31,34,.1); border-radius: 12px; padding: 12px 14px;
}
.agent-prompt:focus { outline: none; border-color: #8FA6E8; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 9px; }
.phase { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* A phase is a pill; it fills in green once its steps are done. */
.phase-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--carbon);
  background: #fff; border: 1px solid rgba(29,31,34,.13);
  border-radius: 999px; padding: 7px 15px;
}
.ic-phase { width: 14px; height: 14px; color: #7E7F87; }
.phase.running .phase-pill { border-color: rgba(249,115,22,.5); }
.phase.running .ic-phase { color: var(--pumpkin-mid); }
.phase.done .phase-pill { border-color: rgba(16,185,129,.45); }
.phase.done .ic-phase { color: var(--emerald); }

/* Steps under a phase read as quiet uppercase lines with a radio marker. */
.sub {
  display: inline-flex; align-items: center; gap: 9px; padding-left: 4px;
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: #A3A4AB;
}
.sub .dot {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid #C9CAD0; background: none;
}
.sub.running { color: var(--pumpkin-mid); }
.sub.running .dot { border-color: var(--pumpkin); background: rgba(249,115,22,.16); }
.sub.done { color: #3F7F68; }
.sub.done .dot { border-color: var(--emerald); background: var(--emerald); }

.run-label { margin: 0; font-size: 13px; font-weight: 500; color: #55565D; min-height: 17px; }

/* ── outbox ──────────────────────────────────────────────── */
.draft {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 15px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; animation: land 260ms cubic-bezier(.2,.7,.3,1) both;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  width: 100%; text-align: left; font: inherit; color: inherit;
}
.draft:hover { background: rgba(29,31,34,0.035); }
@keyframes land { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.draft-main { min-width: 0; flex: 1 1 auto; }
.draft-to { font-size: 13px; font-weight: 600; }
.draft-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 10px; font-weight: 700; border-radius: 6px; padding: 2px 6px;
  background: rgba(95,90,162,0.13); color: var(--grape); letter-spacing: .02em; }
.pill-sent { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px;
  background: var(--emerald); color: #fff; flex: 0 0 auto; }
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 100%; padding: 20px; text-align: center;
  font-size: 13.5px; color: #86878E;
}
.ic-empty { width: 26px; height: 26px; stroke-width: 1.5; color: #B9BAC1; }
.more { padding: 10px 15px; font-size: 12.5px; color: var(--muted); }

/* ── buttons ─────────────────────────────────────────────── */
.btn { font: inherit; cursor: pointer; border: 0; border-radius: 999px; }
.btn-run {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--carbon); color: var(--smoke);
  font-size: 12.5px; font-weight: 600; padding: 6px 13px;
}
.btn-run:disabled { opacity: .45; cursor: default; }
.btn-send {
  background: var(--pumpkin); color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 14px; box-shadow: 0 6px 18px -6px rgba(249,115,22,.75);
}
.btn-send:disabled { opacity: .6; cursor: default; }

.promptbar {
  margin: 14px 26px 16px; height: 52px; display: flex; align-items: center; gap: 11px;
  padding: 0 8px 0 18px; background: var(--smoke);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 12px 34px -14px rgba(29,31,34,0.22);
}
.promptbar-text { flex: 1; font-size: 14px; color: rgba(29,31,34,0.35); }
.promptbar-send {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--carbon); color: var(--smoke); font-size: 16px; font-weight: 700;
}

.reset {
  position: absolute; right: 22px; bottom: 80px; z-index: 6;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  background: rgba(253,255,254,0.96); color: var(--carbon);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 13px;
  box-shadow: 0 1px 2px rgba(29,31,34,.05);
}
.reset:hover { background: #fff; }

/* ── reader overlay ──────────────────────────────────────── */
/* An author `display` beats the UA sheet's [hidden], so restore it explicitly. */
.reader[hidden] { display: none; }
.reader {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(29,31,34,0.34); padding: 32px;
  animation: fade 140ms ease both;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.reader-card {
  position: relative; width: min(680px, 100%); max-height: 84vh; overflow-y: auto;
  background: var(--smoke); border-radius: 16px; padding: 28px 32px;
  box-shadow: 0 30px 80px -20px rgba(29,31,34,0.5);
  animation: rise 180ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }
.reader-close {
  position: absolute; top: 14px; right: 16px; border: 0; background: none;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.reader-subject { font-size: 18px; font-weight: 600; margin: 0 34px 4px 0; }
.reader-meta { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.reader-body { font-size: 14.5px; line-height: 1.62; white-space: pre-wrap; }
.reader-quote { color: var(--muted); border-left: 2px solid var(--line); padding-left: 12px; margin-top: 14px; }
.reader-edit {
  width: 100%; min-height: 190px; resize: vertical; font: inherit; font-size: 14.5px;
  line-height: 1.62; color: var(--carbon); background: rgba(29,31,34,0.02);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
}
.reader-edit:focus { outline: none; border-color: rgba(249,115,22,.45); }
.reader-hint { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ── small screens ───────────────────────────────────────── */
.small-screen { display: none; }
@media (max-width: 1000px) {
  .app { display: none; }
  .small-screen {
    display: grid; place-content: center; justify-items: center;
    height: 100%; padding: 32px; text-align: center; gap: 6px;
  }
  .small-screen h1 { font-size: 22px; margin: 12px 0 0; }
  .small-screen p { font-size: 14.5px; color: var(--muted); max-width: 34ch; line-height: 1.55; margin: 0; }
}


/* ── dashboard ───────────────────────────────────────────── */
.dash[hidden], .app[hidden] { display: none; }
.dash {
  height: 100%; display: grid; grid-template-rows: 56px 1fr;
  background: var(--canvas);
  background-image: radial-gradient(circle, rgba(29,31,34,0.10) 1.2px, transparent 1.2px);
  background-size: 25px 25px;
}
.dash-top { display: flex; align-items: center; padding: 0 20px; }
.dash-body { padding: 42px 56px; overflow-y: auto; }
.dash-title { font-size: 30px; font-weight: 600; margin: 0; letter-spacing: -0.015em; }
.dash-sub { font-size: 13px; color: var(--muted); margin: 5px 0 26px; }
.dash-grid { display: flex; flex-wrap: wrap; gap: 20px; }

.board-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: 268px; padding: 0 0 13px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; background: none; border: 0;
}
.card-preview {
  position: relative; display: block; height: 150px; margin-bottom: 11px;
  background: var(--smoke); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(29,31,34,0.05);
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.board-card:hover .card-preview {
  box-shadow: 0 12px 26px -12px rgba(29,31,34,0.3);
  transform: translateY(-2px);
}
/* A small diagram of the three frames the board holds. */
.pv { position: absolute; background: rgba(29,31,34,0.07); border-radius: 4px; }
.pv-mail   { left: 14px; top: 16px; width: 44%; bottom: 16px; }
.pv-agent  { right: 14px; top: 16px; width: 36%; height: 38%; }
.pv-outbox { right: 14px; bottom: 16px; width: 36%; height: 46%; }
.card-name { font-size: 14.5px; font-weight: 600; }
.card-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* Back to the dashboard, opposite the brand. */
.back-link {
  margin-left: auto; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--muted); background: none; border: 0; cursor: pointer;
  padding: 5px 9px; border-radius: 8px;
}
.back-link:hover { color: var(--carbon); background: rgba(29,31,34,0.06); }


/* ── prospect rows (investment banking board) ────────────── */
.row-person { cursor: default; }
.row-person:hover { background: none; }
/* The resolved address, and the placeholder standing in until it lands. */
.row-mail {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 12.5px; color: #4E6BAF;
}
.ic-mini { width: 12px; height: 12px; }
.row-mail.is-pending {
  color: #A9AAB1; font-style: italic; letter-spacing: .01em;
}
.firm-chip {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #55565D;
  background: rgba(29,31,34,.055); border-radius: 7px; padding: 3px 8px;
}