← Files SalesARCHIVED FILE

skills/demo-exec-and-seller-dash/assets/account-priority-workspace.template.html

90.2 KB · Oct 3, 2026 · 06:02 UTC

↓ Download file

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#f6f6f6" />
    <title>Seller Account Home</title>
    <style>
      :root {
        color-scheme: light;
        --canvas: #f6f6f6;
        --surface: #ffffff;
        --ink: #171717;
        --muted: #626262;
        --quiet: #777777;
        --line: #d2d2d2;
        --line-subtle: #ececec;
        --accent: #171717;
        --accent-ink: #171717;
        --accent-soft: #f0f0f0;
        --green: #00a240;
        --green-ink: #087637;
        --green-soft: #ecf7ef;
        --amber: #a66b00;
        --amber-soft: #fff7e6;
        --red: #ba2623;
        --red-soft: #fff0ef;
        --soft: #f6f6f6;
        --page-width: 1320px;
        --page-gutter: 28px;
        --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      *, *::before, *::after { box-sizing: border-box; }
      html, body { min-height: 100%; margin: 0; }
      body {
        background: var(--canvas);
        color: var(--ink);
        font: 15px/1.6 var(--font);
        letter-spacing: -.01em;
        -webkit-font-smoothing: antialiased;
      }
      body.drawer-open { overflow: hidden; }
      button, input, select { font: inherit; }
      [tabindex]:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
      [hidden] { display: none !important; }

      .shell { max-width: var(--page-width); margin: 0 auto; padding-right: var(--page-gutter); padding-left: var(--page-gutter); }
      .topbar { position: sticky; z-index: 4; top: 0; border-bottom: 1px solid var(--line-subtle); background: rgb(255 255 255 / 97%); backdrop-filter: blur(12px); }
      .header-shell { display: grid; min-height: 76px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; }
      .brand { display: flex; min-width: 0; align-items: center; gap: 11px; }
      .brand-mark { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-subtle); border-radius: 10px; background: var(--soft); font-size: 15px; font-weight: 620; }
      .codex-pet { width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; }
      .brand-name { font-size: 14px; font-weight: 550; line-height: 21px; }
      .brand-subtitle { color: var(--quiet); font-size: 13px; line-height: 19px; }
      .header-context { display: flex; justify-self: end; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
      .connection-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
      .header-context.is-demo .connection-dot { background: var(--amber); }

      .page { padding-top: 36px; padding-bottom: 64px; }
      .eyebrow { margin: 0 0 8px; color: var(--quiet); font-size: 14px; }
      .page-title { margin: 0; font-size: clamp(27px, 3vw, 35px); font-weight: 560; line-height: 1.18; letter-spacing: -.04em; }
      .page-subtitle { max-width: 690px; margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

      .workspace-tabs { display: flex; height: 76px; align-items: stretch; gap: 32px; }
      .workspace-tab { position: relative; min-width: 58px; padding: 0 5px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; }
      .workspace-tab[aria-selected="true"] { color: var(--ink); font-weight: 590; }
      .workspace-tab[aria-selected="true"]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--accent); content: ""; }
      .workspace-view[hidden] { display: none; }
      .home-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .78fr); align-items: start; gap: 20px; margin-top: 29px; }
      .home-layout[data-panel-count="1"] { grid-template-columns: minmax(0, 1fr); }
      .home-stack { display: grid; gap: 18px; }
      .work-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
      .work-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px 22px 17px; }
      .work-card-header h2 { margin: 0; font-size: 18px; font-weight: 570; line-height: 1.4; letter-spacing: -.02em; }
      .work-count { color: var(--quiet); font-size: 13px; }
      .seller-focus-card { margin-top: 26px; }
      .work-list { display: grid; }
      .work-item { display: flex; min-width: 0; min-height: 70px; width: 100%; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 18px 22px; border: 0; border-top: 1px solid var(--line-subtle); background: transparent; color: inherit; cursor: pointer; text-align: left; }
      .work-item:hover { background: var(--soft); }
      .work-item:focus-visible { position: relative; z-index: 1; outline-offset: -3px; }
      .work-copy { display: grid; min-width: 0; gap: 5px; }
      .work-title { color: var(--ink); font-size: 15px; font-weight: 550; line-height: 1.5; }
      .work-detail { color: var(--muted); font-size: 14px; line-height: 1.6; }
      .work-meta { flex: 0 0 auto; color: var(--quiet); font-size: 12px; line-height: 1.55; white-space: nowrap; }
      .pipeline-heading { margin: 30px 0 0; font-size: 20px; font-weight: 560; line-height: 1.4; }
      .pipeline-metrics { margin-top: 15px; }
      .pipeline-opportunities { margin-top: 26px; }
      .pipeline-opportunity-value { color: var(--ink); font-size: 15px; font-weight: 565; }
      .stage-breakdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 21px 22px; margin-top: 22px; border: 1px solid var(--line); border-radius: 10px; }
      .stage-item { display: grid; min-width: 0; gap: 5px; }
      .stage-name { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
      .stage-total { color: var(--muted); font-size: 13px; line-height: 1.5; }
      .stage-track { height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
      .stage-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

      .portfolio-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin-top: 28px; }
      .health-card { min-width: 0; min-height: 132px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
      .health-label { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }
      .health-value { display: block; margin-top: 8px; font-size: 26px; font-weight: 535; line-height: 1.35; letter-spacing: -.035em; }
      .health-caption { display: block; margin-top: 5px; color: var(--quiet); font-size: 13px; line-height: 1.5; }

      .accounts-section { margin-top: 39px; }
      .accounts-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
      .accounts-heading h2 { margin: 0; font-size: 20px; font-weight: 550; line-height: 1.4; letter-spacing: -.02em; }
      .accounts-summary { color: var(--muted); font-size: 14px; }
      .accounts-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
      .account-search-field { position: relative; display: flex; min-width: min(260px, 100%); max-width: 380px; flex: 1 1 240px; align-items: center; }
      .account-search { min-height: 44px; width: 100%; padding: 9px 42px 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
      .account-search-clear { position: absolute; right: 0; display: grid; min-height: 44px; min-width: 44px; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
      .account-filters { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 6px; }
      .account-filter { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
      .account-filter[aria-pressed="true"] { border-color: var(--line); background: var(--soft); color: var(--ink); }
      .account-filter-count { color: var(--quiet); font-variant-numeric: tabular-nums; }
      .seller-workspace { display: block; width: 100%; }
      .accounts-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
      .account-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
      .account-table th { height: 58px; padding: 0 11px; color: var(--muted); font-size: 13px; font-weight: 550; line-height: 1.5; text-align: left; white-space: nowrap; }
      .account-table th:first-child, .account-table td:first-child { padding-left: 16px; }
      .account-table th:last-child, .account-table td:last-child { padding-right: 16px; }
      .sort-button { display: inline-flex; min-height: 44px; align-items: center; gap: 5px; padding: 6px 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: inherit; font-weight: inherit; }
      .sort-indicator { color: var(--accent-ink); font-size: 13px; }
      .account-row { height: 100px; border-top: 1px solid var(--line-subtle); cursor: pointer; transition: background 130ms ease; }
      .account-row:hover { background: var(--soft); }
      .account-row[aria-selected="true"] { background: var(--accent-soft); }
      .account-row td { min-width: 0; padding: 14px 11px; vertical-align: middle; }
      .account-label, .account-name, .account-subline { display: block; }
      .account-name { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 560; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
      .account-subline { overflow: hidden; margin-top: 4px; color: var(--quiet); font-size: 13px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
      .mobile-stage { display: none; }
      .opportunity-value { font-size: 14px; font-weight: 530; line-height: 1.5; white-space: nowrap; }
      .stage-copy { color: var(--muted); font-size: 13px; line-height: 1.55; }
      .priority-score { display: inline-flex; min-width: 42px; align-items: center; justify-content: center; padding: 6px 9px; border-radius: 8px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 590; font-variant-numeric: tabular-nums; }
      .priority-score.high-score { background: var(--accent-soft); color: var(--ink); }
      .open-item-count { display: block; color: var(--ink); font-size: 14px; font-weight: 555; line-height: 1.5; }
      .open-item-caption { display: block; margin-top: 4px; color: var(--quiet); font-size: 12px; line-height: 1.5; }
      .next-action-copy { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 14px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
      .priority-badge { display: inline-flex; max-width: 100%; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 550; line-height: 1.45; white-space: normal; }
      .priority-badge.high { background: var(--red-soft); color: var(--red); }
      .priority-badge.action { background: var(--amber-soft); color: var(--amber); }
      .priority-badge.watch { background: var(--accent-soft); color: var(--ink); }
      .priority-badge.paused { background: var(--soft); color: var(--muted); }
      .issue-copy { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
      .account-person, .account-checklist-item, .account-change { display: grid; gap: 2px; margin-top: 10px; color: var(--ink); font-size: 13px; line-height: 1.55; }
      .account-person-meta, .account-change-meta { color: var(--muted); font-size: 12px; }
      .account-record-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 8px; color: var(--accent-ink); font-size: 13px; font-weight: 550; }

      .account-drawer { position: fixed; z-index: 30; inset: 0; display: flex; justify-content: flex-end; background: rgb(22 25 29 / 38%); backdrop-filter: blur(3px); animation: drawer-backdrop-in 180ms ease both; }
      .account-drawer[hidden] { display: none; }
      .account-drawer[data-state="closing"] { animation: drawer-backdrop-out 200ms ease both; pointer-events: none; }
      .account-drawer-panel { position: absolute; top: 0; right: 0; display: grid; width: min(100vw, clamp(420px, 54vw, 620px)); height: 100dvh; max-height: 100dvh; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-left: 1px solid var(--line); background: var(--surface); box-shadow: -18px 0 64px rgb(22 25 29 / 16%); animation: drawer-slide-in 260ms cubic-bezier(.2,.8,.2,1) both; transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease; }
      .account-drawer[data-state="closing"] .account-drawer-panel { animation: drawer-slide-out 220ms cubic-bezier(.4,0,1,1) both; }
      @keyframes drawer-backdrop-in { from { background-color: rgb(22 25 29 / 0%); } to { background-color: rgb(22 25 29 / 38%); } }
      @keyframes drawer-slide-in { from { transform: translateX(24px); opacity: .94; } to { transform: translateX(0); opacity: 1; } }
      @keyframes drawer-backdrop-out { from { background-color: rgb(22 25 29 / 38%); } to { background-color: rgb(22 25 29 / 0%); } }
      @keyframes drawer-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(28px); opacity: 0; } }
      .drawer-header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--line); }
      .drawer-title { margin: 0; font-size: 16px; font-weight: 585; }
      .drawer-close { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; }
      .drawer-close:hover { background: var(--soft); }
      .drawer-content { min-width: 0; min-height: 0; overflow-y: auto; padding: 28px; background: var(--surface); overscroll-behavior: contain; }
      .detail-content { max-width: 560px; margin: 0 auto; }
      .detail-columns { display: grid; grid-template-columns: 1fr; align-items: start; gap: 0; margin-top: 26px; }
      .detail-column { min-width: 0; }
      .detail-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
      .detail-eyebrow { color: var(--accent-ink); font-size: 13px; font-weight: 570; line-height: 1.5; }
      .detail-name { margin: 9px 0 0; font-size: clamp(27px, 3.4vw, 35px); font-weight: 570; letter-spacing: -.055em; line-height: 1.12; }
      .detail-stage { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.55; }
      .detail-amount { padding-top: 20px; font-size: 23px; font-weight: 590; letter-spacing: -.045em; white-space: nowrap; }
      .flag-card { padding: 18px 19px; border-left: 3px solid var(--amber); border-radius: 0 14px 14px 0; background: var(--amber-soft); }
      .detail-section { padding-top: 22px; margin-top: 23px; border-top: 1px solid var(--line-subtle); }
      .detail-section:first-of-type { border-top: 0; }
      .section-label { margin: 0; color: var(--ink); font-size: 16px; font-weight: 580; line-height: 1.45; }
      .flag-copy, .detail-copy { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
      .flag-copy { color: var(--ink); }
      .rationale-list { display: grid; gap: 10px; padding-left: 18px; margin: 11px 0 0; }
      .rationale-list li { color: var(--muted); font-size: 14px; line-height: 1.65; }
      .action-card { padding: 16px 17px; margin-top: 11px; border: 1px solid rgb(23 23 23 / 12%); border-radius: 10px; background: var(--accent-soft); }
      .action-card p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.7; }
      .action-card .next-step-takeaway { font-weight: 580; }
      .demo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 12px; margin-top: 17px; }
      .demo-fact { display: grid; gap: 4px; padding: 11px 12px; border-radius: 10px; background: var(--soft); }
      .demo-fact-label { color: var(--muted); font-size: 12px; line-height: 1.45; }
      .demo-fact-value { color: var(--ink); font-size: 13px; font-weight: 540; line-height: 1.5; }
      .demo-people { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
      .demo-person { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 13px; line-height: 1.5; }
      .demo-person-role { color: var(--muted); }
      .demo-signals { display: grid; gap: 11px; margin-top: 13px; }
      .demo-signal { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; color: var(--ink); font-size: 13px; line-height: 1.55; }
      .demo-signal-source { color: var(--muted); }
      .demo-activity { padding-top: 22px; margin-top: 23px; border-top: 1px solid var(--line-subtle); }
      .demo-activity summary { color: var(--ink); font-size: 14px; font-weight: 560; cursor: pointer; }
      .demo-activity .account-change { margin-top: 13px; }
      .people-list { display: grid; gap: 14px; margin-top: 14px; }
      .person-row { display: flex; align-items: center; gap: 11px; }
      .person-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 560; }
      .person-name { display: block; font-size: 14px; font-weight: 530; line-height: 1.5; }
      .person-role { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
      .person-status { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; }
      .person-status.engaged { background: var(--green-soft); color: var(--green-ink); }
      .source-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
      .source-chip { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
      .signal-list { display: grid; gap: 14px; margin-top: 15px; }
      .signal-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; padding-top: 15px; border-top: 1px solid var(--line-subtle); }
      .signal-item:first-child { padding-top: 0; border-top: 0; }
      .signal-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; font-size: 12px; font-weight: 580; }
      .signal-title { color: var(--ink); font-size: 14px; font-weight: 530; line-height: 1.55; }
      .signal-time { float: right; color: var(--quiet); font-size: 12px; font-weight: 420; }
      .signal-source { display: block; margin-top: 5px; color: var(--accent-ink); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
      .signal-copy { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
      .communication-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 5px; }
      .communication-state { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; }
      .communication-state.unresolved { background: var(--amber-soft); color: var(--amber); }
      .communication-state.replied { background: var(--green-soft); color: var(--green-ink); }
      .meeting-time { margin-top: 7px; color: var(--accent-ink); font-size: 13px; font-weight: 540; }
      .pipeline-queues { display: grid; }
      .pipeline-phase { border-top: 1px solid var(--line-subtle); }
      .pipeline-phase-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 16px; background: rgb(249 249 249 / 70%); }
      .pipeline-phase-title { margin: 0; font-size: 16px; font-weight: 570; line-height: 1.45; }
      .pipeline-phase-total { color: var(--muted); font-size: 13px; line-height: 1.5; }
      .pipeline-row { align-items: center; gap: 18px; }
      .pipeline-row-main { display: grid; min-width: 0; gap: 5px; }
      .pipeline-row-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
      .motion-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 12px; line-height: 1.45; }
      .motion-badge.renewal { background: var(--green-soft); color: var(--green-ink); }
      .pipeline-next-step { color: var(--muted); font-size: 14px; line-height: 1.6; }
      .pipeline-row-value { display: grid; flex: 0 0 auto; gap: 4px; text-align: right; }
      .pipeline-row-due { color: var(--quiet); font-size: 12px; }
      .empty-state { padding: 26px; color: var(--muted); font-size: 14px; line-height: 1.6; }
      .site-disclosure { padding-top: 20px; margin-top: 42px; border-top: 1px solid var(--line-subtle); color: var(--quiet); font-size: 12px; line-height: 1.55; text-align: center; }

      @media (max-width: 880px) {
        .detail-columns { grid-template-columns: 1fr; gap: 12px; }
      }
      @media (max-width: 720px) {
        :root { --page-gutter: 18px; }
        .header-shell { min-height: 61px; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
        .brand-subtitle, .header-context { display: none; }
        .workspace-tabs { height: 54px; grid-column: 1 / -1; grid-row: 2; justify-content: center; }
        .page { padding-top: 31px; }
        .page-title { font-size: 28px; }
        .portfolio-health { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .home-layout { grid-template-columns: 1fr; }
        .workspace-tabs { gap: 26px; }
        .health-card { min-height: 122px; padding: 16px; border-radius: 10px; }
        .accounts-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
        .accounts-tools { align-items: stretch; gap: 8px; }
        .account-search-field { max-width: none; flex-basis: 100%; }
        .account-filters { gap: 3px; }
        .account-filter { min-width: 44px; padding-right: 8px; padding-left: 8px; font-size: 12px; }
        .stage-column, .issue-column, .stage-cell { display: none; }
        .status-column, .open-items-column, .action-column, .status-cell, .open-items-cell { display: none; }
        .mobile-stage { display: block; }
        .motion-copy { display: none; }
        .account-table, .account-table thead, .account-table tbody { display: block; width: 100%; }
        .account-table colgroup { display: none; }
        .account-table thead tr, .account-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(78px, .6fr) minmax(75px, .56fr); align-items: center; }
        .account-table[data-priority-scores="false"] thead tr, .account-table[data-priority-scores="false"] .account-row { grid-template-columns: minmax(0, 1fr) minmax(78px, .6fr); }
        .account-row { height: auto; }
        .account-row td { display: block; min-width: 0; padding-top: 13px; padding-bottom: 13px; }
        .account-row .status-cell, .account-row .open-items-cell { display: none; }
        .account-row .stage-cell { display: none; }
        .issue-cell { grid-column: 1 / -1; display: block; padding-top: 0 !important; padding-bottom: 12px !important; }
        .action-cell { grid-column: 1 / -1; display: block !important; padding-top: 0 !important; padding-bottom: 12px !important; }
        .action-cell::before { color: var(--quiet); content: "Next: "; font-size: 12px; }
        .next-action-copy { display: inline; }
        .sort-button { max-width: 100%; gap: 3px; font-size: 12px; white-space: normal; }
        .sort-indicator { flex: 0 0 auto; }
        .pipeline-row { align-items: flex-start; gap: 10px; }
        .pipeline-phase-heading { padding-right: 14px; padding-left: 14px; }
        .issue-cell::before { color: var(--quiet); content: "Context: "; font-weight: 500; }
        .account-table { table-layout: auto; }
        .opportunity-value { white-space: normal; overflow-wrap: anywhere; }
        .detail-topline { gap: 10px; }
        .detail-name { font-size: 29px; }
        .detail-stage { max-width: 250px; font-size: 13px; }
        .detail-amount { padding-top: 17px; font-size: 21px; }
        .detail-columns { margin-top: 23px; }
      }
      @media (max-width: 640px) {
        .account-drawer-panel { width: 100vw; }
        .drawer-header { min-height: 64px; padding: 0 20px; }
        .drawer-content { padding: 20px; }
      }
      @media (max-width: 410px) {
        :root { --page-gutter: 15px; }
        .account-table thead tr, .account-row { grid-template-columns: minmax(0, 1fr) minmax(78px, .6fr) minmax(82px, .56fr); }
        .account-table th, .account-row td { padding-right: 8px; padding-left: 8px; }
        .account-table th:first-child, .account-table td:first-child { padding-left: 11px; }
        .account-table th:last-child, .account-table td:last-child { padding-right: 11px; }
        .priority-badge { padding-right: 6px; padding-left: 6px; }
      }
      @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .account-drawer, .account-drawer-panel { animation: none !important; transition: none !important; } }
    </style>
  </head>
  <body>
    <header class="topbar">
      <div class="shell header-shell">
        <div class="brand"><img class="codex-pet" id="codex-pet" alt="" hidden /><span class="brand-mark" id="brand-mark" aria-hidden="true">S</span><div><div class="brand-name" id="brand-company">Seller account home</div><div class="brand-subtitle">Seller account home</div></div></div>
        <nav class="workspace-tabs" role="tablist" aria-label="Seller account home views">
          <button class="workspace-tab" role="tab" id="tab-home" aria-controls="view-home" aria-selected="true" tabindex="0" type="button">Home</button>
          <button class="workspace-tab" role="tab" id="tab-accounts" aria-controls="view-accounts" aria-selected="false" tabindex="-1" type="button">Accounts</button>
          <button class="workspace-tab" role="tab" id="tab-pipeline" aria-controls="view-pipeline" aria-selected="false" tabindex="-1" type="button">Pipeline</button>
        </nav>
        <div class="header-context"><span class="connection-dot" aria-hidden="true"></span><span id="connected-label">Connected account sources</span></div>
      </div>
    </header>

    <main class="shell page">
      <p class="eyebrow" id="greeting">Your customer accounts</p>
      <h1 class="page-title" id="page-title">Your Account Home</h1>
      <p class="page-subtitle" id="page-subtitle">Your customer conversations, upcoming meetings, and account work in one place.</p>

      <section class="workspace-view" role="tabpanel" id="view-home" aria-labelledby="tab-home">
      <section class="work-card seller-focus-card" id="seller-focus-card" aria-labelledby="seller-focus-heading" hidden><div class="work-card-header"><h2 id="seller-focus-heading">Your focus</h2></div><div class="work-list" id="seller-focus-list"></div></section>
      <section class="portfolio-health" aria-label="Today's seller account overview">
        <article class="health-card" id="accounts-health-card"><span class="health-label">Customer accounts</span><strong class="health-value" id="book-value-metric">—</strong><span class="health-caption" id="book-caption">Complete book of business</span></article>
        <article class="health-card" id="followups-health-card"><span class="health-label">Open follow-ups</span><strong class="health-value" id="renewal-value-metric">—</strong><span class="health-caption" id="renewal-caption">Customer requests and next steps</span></article>
        <article class="health-card" id="meetings-health-card"><span class="health-label">Upcoming meetings</span><strong class="health-value" id="expansion-value-metric">—</strong><span class="health-caption" id="expansion-caption">Customer meetings on your calendar</span></article>
        <article class="health-card" id="sources-health-card"><span class="health-label" id="source-label">Connected context</span><strong class="health-value" id="source-count-metric">—</strong><span class="health-caption" id="source-caption">Account evidence from your sources</span></article>
      </section>
      <div class="home-layout" id="home-layout">
        <section class="work-card" id="attention-card" aria-labelledby="attention-heading">
          <div class="work-card-header"><h2 id="attention-heading">Needs your attention</h2><span class="work-count" id="attention-count"></span></div>
          <div class="work-list" id="attention-list"></div>
        </section>
        <div class="home-stack" id="home-stack">
          <section class="work-card" id="meetings-card" aria-labelledby="meetings-heading"><div class="work-card-header"><h2 id="meetings-heading">Upcoming meetings</h2></div><div class="work-list" id="meeting-list"></div></section>
          <section class="work-card" id="activity-card" aria-labelledby="activity-heading"><div class="work-card-header"><h2 id="activity-heading">Recent account activity</h2></div><div class="work-list" id="activity-list"></div></section>
        </div>
      </div>
      </section>

      <section class="workspace-view" role="tabpanel" id="view-accounts" aria-labelledby="tab-accounts" hidden>
      <section class="accounts-section" aria-label="Your customer accounts">
        <div class="accounts-heading"><h2>Your accounts</h2><div class="accounts-summary" id="accounts-summary"></div></div>
        <div class="accounts-tools">
          <div class="account-search-field"><input class="account-search" id="account-search" type="search" placeholder="Search accounts, owners, or actions" aria-label="Search accounts, owners, or actions" autocomplete="off" /><button class="account-search-clear" id="account-search-clear" type="button" aria-label="Clear account search" hidden>×</button></div>
          <div class="account-filters" aria-label="Filter accounts by current work group">
            <button class="account-filter" id="account-filter-all" data-account-filter="all" type="button" aria-pressed="true">All <span class="account-filter-count"></span></button>
            <button class="account-filter" id="account-filter-workNow" data-account-filter="workNow" type="button" aria-pressed="false">Work now <span class="account-filter-count"></span></button>
            <button class="account-filter" id="account-filter-watch" data-account-filter="watch" type="button" aria-pressed="false">Watch <span class="account-filter-count"></span></button>
            <button class="account-filter" id="account-filter-paused" data-account-filter="paused" type="button" aria-pressed="false">Paused <span class="account-filter-count"></span></button>
          </div>
        </div>
        <div class="seller-workspace">
          <div class="accounts-panel">
            <table class="account-table" aria-label="Your customer accounts">
              <colgroup><col style="width:18%"><col style="width:14%"><col class="status-column" style="width:15%"><col id="priority-column-width" style="width:12%"><col class="open-items-column" style="width:11%"><col class="action-column" style="width:30%"></colgroup>
              <thead><tr><th id="account-name-column" scope="col" aria-sort="none"><button class="sort-button" id="account-name-sort" type="button">Customer <span class="sort-indicator" aria-hidden="true">↕</span></button></th><th scope="col">Opportunity</th><th class="status-column" scope="col">Status</th><th id="priority-column" scope="col" aria-sort="descending"><button class="sort-button" id="priority-sort" type="button">Priority score <span class="sort-indicator" aria-hidden="true">↓</span></button></th><th class="open-items-column" scope="col">Open items</th><th class="action-column" scope="col">Suggested next action</th></tr></thead>
              <tbody id="accounts-list"></tbody>
            </table>
          </div>
        </div>
      </section>
      </section>

      <section class="workspace-view" role="tabpanel" id="view-pipeline" aria-labelledby="tab-pipeline" hidden>
        <section class="work-card pipeline-opportunities" id="pipeline-card" aria-labelledby="opportunities-heading"><div class="work-card-header"><h2 id="opportunities-heading">Opportunity work queues</h2><span class="work-count" id="opportunities-count"></span></div><div class="work-list pipeline-queues" id="opportunity-list"></div></section>
      </section>
      <footer class="site-disclosure" id="site-disclosure"></footer>
    </main>

    <div class="account-drawer account-drawer-overlay" id="account-drawer" role="dialog" aria-modal="true" aria-labelledby="account-drawer-title" hidden>
      <div class="account-drawer-panel" role="document">
        <div class="drawer-header drawer-toolbar"><span class="drawer-title">Account details</span><button class="drawer-close" id="account-drawer-close" type="button" aria-label="Close account details"><span aria-hidden="true">✕</span></button></div>
        <div class="detail-panel drawer-content" id="detail-panel" tabindex="-1" aria-live="polite"></div>
      </div>
    </div>

    <script>
      const payload = __PRIORITIZE_ACCOUNTS_DATA_JSON__;
      const seller = payload.seller || {};
      const sellerName = text(seller.name, payload.workNow?.[0]?.owner || "Your account");
      const sellerFirstName = text(seller.firstName, sellerName.split(/\s+/)[0] || "Seller");
      const groupKeys = ["workNow", "watch", "paused"];
      const groups = Object.fromEntries(groupKeys.map((key) => [key, Array.isArray(payload[key]) ? payload[key] : []]));
      const allRows = groupKeys.flatMap((key) => groups[key]).sort((first, second) => Number(first.rank || 99) - Number(second.rank || 99));
      const accountDetails = payload.accountDetails || {};
      const providerStyles = {
        "Salesforce": { short: "SF", color: "#171717", background: "#f0f0f0" },
        "Gmail": { short: "M", color: "#171717", background: "#f0f0f0" },
        "Google Calendar": { short: "C", color: "#171717", background: "#f0f0f0" },
        "Granola": { short: "G", color: "#171717", background: "#f0f0f0" },
        "Slack": { short: "S", color: "#171717", background: "#f0f0f0" },
        "Google Drive": { short: "D", color: "#171717", background: "#f0f0f0" }
      };
      const sourceRecords = Array.isArray(payload.connectedSources) ? payload.connectedSources : Array.isArray(payload.scope?.sourcesChecked) ? payload.scope.sourcesChecked : [];
      const sources = [...new Map(sourceRecords.filter((source) => typeof source === "string" ? !/disconnected|unavailable|not connected/i.test(source) : source && source.verified !== false && !/disconnected|unavailable|not connected/i.test(text(source.status) + " " + text(source.name, source.label))).map((source) => {
        const rawName = typeof source === "string" ? source : text(source.name, source.label);
        const cleanedName = rawName.replace(/^fictional\s+/i, "").replace(/\s+sample$/i, "").trim();
        const name = Object.keys(providerStyles).find((provider) => cleanedName.toLowerCase().startsWith(provider.toLowerCase())) || cleanedName;
        return [name, { name: name, ...(providerStyles[name] || { short: initials(name), color: "#171717", background: "#f0f0f0" }) }];
      }).filter(([name]) => name)).values()];
      const isFictionalDemo = payload.demo?.mode === "fictional";
      const state = { selected: allRows[0] || null, drawerOpen: false, drawerCloseTimer: null, drawerCloseListener: null, returnFocus: null, returnAccount: "", sortMode: allRows.some((row) => priorityScore(row) !== null) ? "priority" : "source", sortDescending: true, accountSortDirection: "none", accountQuery: "", accountFilter: "all" };

      function text(value, fallback) { const result = value == null ? "" : String(value).trim(); return result || fallback || ""; }
      function create(tag, className, content) { const node = document.createElement(tag); if (className) node.className = className; if (content != null) node.textContent = content; return node; }
      function money(value) { return Number(String(value || "").replace(/[^\d.]/g, "")) || 0; }
      function compactMoney(amount) { return amount >= 1e6 ? "$" + (amount / 1e6).toFixed(2).replace(/0$/, "") + "M" : "$" + Math.round(amount / 1000) + "K"; }
      function sourcedAccountValue(value) {
        if (typeof value === "number") return Number.isFinite(value) ? value : null;
        const supplied = text(value).replace(/[$£€,\s]/g, "");
        const matched = supplied.match(/^([+-]?(?:\d+(?:\.\d+)?|\.\d+))([kmb])?$/i);
        if (!matched) return null;
        const amount = Number(matched[1]);
        const multiplier = { k: 1e3, m: 1e6, b: 1e9 }[text(matched[2]).toLowerCase()] || 1;
        return Number.isFinite(amount) ? amount * multiplier : null;
      }
      function bookValueCaption(rows) {
        const suppliedValues = rows.map((row) => sourcedAccountValue(row.accountValue ?? row.value));
        const knownValues = suppliedValues.filter((value) => value !== null);
        const knownTotal = knownValues.reduce((total, value) => total + value, 0);
        if (!rows.length && !isFictionalDemo) return "";
        if (isFictionalDemo || knownValues.length === rows.length) return compactMoney(knownTotal) + " across your book";
        if (!knownValues.length) return "";
        return compactMoney(knownTotal) + " across known accounts";
      }
      function initials(value) { return text(value, "?").split(/\s+/).slice(0, 2).map((part) => part[0]).join("").toUpperCase(); }
      function suppliedCodexPet(source) {
        const pet = source?.codexPet;
        const name = text(pet?.name);
        const imageUrl = text(pet?.imageUrl);
        return name && /^data:image\/(?:png|jpeg|gif|webp);base64,/i.test(imageUrl) ? { name, imageUrl } : null;
      }
      function renderCodexPet(source) {
        const pet = suppliedCodexPet(source);
        if (!pet) return;
        const image = document.getElementById("codex-pet");
        const mark = document.getElementById("brand-mark");
        image.alt = pet.name + " · Codex pet";
        image.addEventListener("error", () => { image.hidden = true; mark.hidden = false; }, { once: true });
        image.src = pet.imageUrl;
        image.hidden = false;
        mark.hidden = true;
      }
      function detailFor(row) { return accountDetails[text(row?.account)] || {}; }
      function verifiedOpportunity(row) {
        if (isFictionalDemo) {
          const amount = sourcedAccountValue(row.value);
          return { present: amount !== null, amount: amount, display: amount === null ? "" : text(row.value) };
        }
        const detail = detailFor(row);
        const record = row.opportunity && typeof row.opportunity === "object" ? row.opportunity : detail.opportunity && typeof detail.opportunity === "object" ? detail.opportunity : null;
        const supplied = row.opportunityValue ?? row.opportunityAmount ?? record?.value ?? record?.amount ?? detail.opportunityValue ?? detail.opportunityAmount;
        const amount = sourcedAccountValue(supplied);
        const present = row.hasOpportunity === true || row.opportunityPresent === true || detail.hasOpportunity === true || detail.opportunityPresent === true || record !== null || amount !== null;
        return { present: present, amount: amount, display: amount === null ? "" : text(supplied) };
      }
      function priorityScore(row) {
        const supplied = row?.priorityScore ?? detailFor(row).score;
        if (supplied == null || String(supplied).trim() === "") return null;
        const score = Number(supplied);
        return Number.isFinite(score) && score >= 0 && score <= 100 ? score : null;
      }
      function sortedAccounts() {
        return [...allRows].sort((first, second) => {
          if (state.sortMode === "account") {
            const comparison = text(first.account).localeCompare(text(second.account), undefined, { sensitivity: "base", numeric: true });
            return state.accountSortDirection === "descending" ? -comparison : comparison;
          }
          if (state.sortMode === "source") return 0;
          const firstScore = priorityScore(first);
          const secondScore = priorityScore(second);
          if (firstScore == null && secondScore == null) return Number(first.rank || 99) - Number(second.rank || 99);
          if (firstScore == null) return 1;
          if (secondScore == null) return -1;
          return (state.sortDescending ? secondScore - firstScore : firstScore - secondScore) || Number(first.rank || 99) - Number(second.rank || 99);
        });
      }
      function filteredAccounts() {
        const selected = state.accountFilter === "all" ? sortedAccounts() : sortedAccounts().filter((row) => groups[state.accountFilter]?.includes(row));
        const query = text(state.accountQuery).toLowerCase();
        if (!query) return selected;
        return selected.filter((row) => {
          const detail = detailFor(row);
          const people = Array.isArray(detail.stakeholders) ? detail.stakeholders.map((person) => text(person.name)) : [];
          const rationale = Array.isArray(detail.rationale) ? detail.rationale : [];
          return [row.account, row.owner, row.motion, row.stage, row.status, row.nextAction, row.whyItMatters, detail.risk, ...people, ...rationale].map((item) => text(item)).join(" ").toLowerCase().includes(query);
        });
      }
      function communicationStatus(event) {
        const supplied = text(event.replyStatus, text(event.responseStatus, event.status));
        if (/\b(?:unresolved|unanswered|awaiting (?:a )?(?:reply|response)|response pending)\b/i.test(supplied)) return "Unresolved";
        if (/\b(?:replied|responded|answered|resolved)\b/i.test(supplied)) return "Replied";
        return "Update";
      }
      function verifiedAccountEvents(row) {
        return detailEvents(row).filter((event) => sources.some((source) => text(event.source).toLowerCase() === source.name.toLowerCase()));
      }
      function meetingTiming(event, now) {
        if (!/^(?:google|outlook) calendar$/i.test(text(event.source))) return "not-calendar";
        if (isFictionalDemo) return "upcoming";
        const viewerNow = now == null ? new Date() : now;
        const candidates = [event.startAt, event.startsAt, event.startTime, event.start?.dateTime, event.start?.date, typeof event.start === "string" ? event.start : null, event.when, event.timestamp];
        for (const candidate of candidates) {
          if (candidate == null || candidate === "") continue;
          const timestamp = candidate instanceof Date ? candidate.getTime() : typeof candidate === "number" ? candidate : Date.parse(text(candidate).replace(/\s*·\s*/g, " "));
          if (Number.isFinite(timestamp) && viewerNow instanceof Date && Number.isFinite(viewerNow.getTime())) return timestamp > viewerNow.getTime() ? "upcoming" : "past";
        }
        const classification = text(event.timing, text(event.classification, text(event.temporalStatus, event.status))).toLowerCase();
        if (event.isUpcoming === true || event.upcoming === true || /^(?:upcoming|future|scheduled)$/.test(classification)) return "upcoming";
        if (event.isPast === true || event.completed === true || /^(?:past|previous|historical|completed)$/.test(classification)) return "past";
        return "unknown";
      }
      function verifiedMeetingEvents(row) {
        return verifiedAccountEvents(row).filter((event) => meetingTiming(event) === "upcoming");
      }
      function sourcedUpcomingMeetingCount(events) {
        if (events.length || isFictionalDemo) return events.length;
        const hasCalendarSource = sources.some((source) => /^(?:google|outlook) calendar$/i.test(text(source.name)));
        const supplied = payload.upcomingMeetingCount ?? payload.calendar?.upcomingMeetingCount ?? payload.meetingSummary?.upcomingCount;
        return hasCalendarSource && Number.isInteger(supplied) && supplied >= 0 ? supplied : null;
      }
      function meetingWhen(event, now) {
        const original = text(event.when);
        const viewerNow = now == null ? new Date() : now;
        if (!isFictionalDemo || !original || !(viewerNow instanceof Date) || Number.isNaN(viewerNow.getTime())) return original;
        const meetingDate = new Date(viewerNow.getFullYear(), viewerNow.getMonth(), viewerNow.getDate());
        let businessDays = 0;
        while (businessDays < 2) {
          meetingDate.setDate(meetingDate.getDate() + 1);
          if (meetingDate.getDay() !== 0 && meetingDate.getDay() !== 6) businessDays += 1;
        }
        const label = new Intl.DateTimeFormat(undefined, { weekday: "short", month: "short", day: "numeric" }).format(meetingDate);
        const time = original.match(/\b\d{1,2}:\d{2}(?:\s*[AP]M)?\b/i);
        return time ? label + " · " + time[0] : label;
      }
      function openItemsFor(row) {
        const detail = detailFor(row);
        const explicitCount = row.openTaskCount ?? row.taskCount ?? detail.openTaskCount ?? detail.taskCount;
        const supplied = Array.isArray(detail.openItems) ? detail.openItems.length : Array.isArray(row.openItems) ? row.openItems.length : Number.isInteger(row.openItems) && row.openItems >= 0 ? row.openItems : Number.isInteger(explicitCount) && explicitCount >= 0 ? explicitCount : null;
        const checklist = Array.isArray(detail.checklist) ? detail.checklist.length : null;
        const unanswered = verifiedAccountEvents(row).filter((event) => /gmail|email|slack|teams/i.test(text(event.source)) && communicationStatus(event) === "Unresolved").length;
        const fictionalSuggestedTask = isFictionalDemo && groups.workNow.includes(row) && text(row.nextAction) ? 1 : 0;
        if (!isFictionalDemo && supplied === null && checklist === null && !unanswered) return null;
        return Math.max(supplied ?? 0, checklist ?? 0, unanswered, fictionalSuggestedTask);
      }
      function suggestedNextAction(row) {
        const action = text(row.nextAction, "Review verified account context");
        const outline = action.replace(/^prepare for the meeting\s*:\s*/i, "").trim();
        return outline && outline !== action ? outline.charAt(0).toUpperCase() + outline.slice(1) : action;
      }
      function priorityInfo(row) {
        if (!isFictionalDemo) {
          const supplied = text(row.status, detailFor(row).status);
          if (!supplied) return { label: "", tone: "" };
          const tone = /pause|hold/i.test(supplied) ? "paused" : /attention|risk|urgent/i.test(supplied) ? "action" : "watch";
          return { label: supplied, tone: tone };
        }
        if (groups.workNow.includes(row) || /pilot review upcoming|pilot readiness at risk/i.test(text(row.status))) return { label: "Needs attention", tone: "action" };
        if (groups.paused.includes(row)) return { label: "On hold", tone: "paused" };
        if (groups.watch.includes(row)) return { label: "Monitoring", tone: "watch" };
        return row.confidence === "High" ? { label: "Needs attention", tone: "action" } : { label: "In progress", tone: "watch" };
      }
      function sourceStyle(name) { return sources.find((source) => name.toLowerCase().includes(source.name.toLowerCase())) || providerStyles[name] || { short: name[0] || "?", color: "#171717", background: "#f0f0f0" }; }
      function rationalesFor(row) { const explicit = detailFor(row).rationale || row.rationale; return Array.isArray(explicit) && explicit.length ? explicit.slice(0, 3) : [text(row.whyItMatters), text(row.nextAction)].filter(Boolean); }
      function flaggedIssue(row) {
        const risk = text(detailFor(row).risk, row.status);
        if (/uptime/i.test(risk) && /pilot/i.test(risk)) return "Pilot success and uptime feedback remain unresolved";
        return text(row.status, risk);
      }

      function renderHeader() {
        const company = typeof payload.company === "string" ? payload.company : payload.company?.name;
        const companyName = text(company, text(payload.demo?.company, "Seller account home"));
        const title = text(payload.title, sellerFirstName + "’s Account Home");
        document.title = title;
        document.getElementById("brand-mark").textContent = initials(companyName).slice(0, 1);
        document.getElementById("brand-company").textContent = companyName;
        document.getElementById("greeting").textContent = sellerName + " · " + text(seller.team, text(seller.territory, "Customer accounts"));
        document.getElementById("page-title").textContent = title;
        document.getElementById("page-subtitle").textContent = "Your customer conversations, upcoming meetings, and account work in one place.";
        const headerContext = document.querySelector(".header-context");
        headerContext.classList.toggle("is-demo", isFictionalDemo);
        headerContext.hidden = !isFictionalDemo && !sources.length;
        const sourceCount = sources.length + " " + (isFictionalDemo ? "sample source" : "verified source") + (sources.length === 1 ? "" : "s");
        document.getElementById("connected-label").textContent = sources.length ? (isFictionalDemo ? "Demo · " : "") + sourceCount : isFictionalDemo ? "Demo · no sample sources" : "";
        document.getElementById("book-value-metric").textContent = String(allRows.length);
        const bookCaption = document.getElementById("book-caption");
        bookCaption.textContent = bookValueCaption(allRows);
        bookCaption.hidden = !bookCaption.textContent;
        const openFollowUps = isFictionalDemo ? groups.workNow.length : allRows.reduce((total, row) => total + openItemsFor(row), 0);
        document.getElementById("renewal-value-metric").textContent = String(openFollowUps);
        document.getElementById("renewal-caption").textContent = "Customer requests and next steps";
        const explicitFollowUpCount = payload.openFollowUpCount ?? payload.followUpCount;
        const hasVerifiedZeroFollowUps = sources.length && (explicitFollowUpCount === 0 || allRows.length > 0 && allRows.every((row) => openItemsFor(row) === 0));
        document.getElementById("followups-health-card").hidden = !isFictionalDemo && !openFollowUps && !hasVerifiedZeroFollowUps;
        document.getElementById("expansion-value-metric").textContent = "—";
        document.getElementById("expansion-caption").textContent = "Customer meetings on your calendar";
        document.getElementById("source-label").textContent = isFictionalDemo ? "Sample context" : "Connected context";
        document.getElementById("source-count-metric").textContent = sources.length + " source" + (sources.length === 1 ? "" : "s");
        document.getElementById("source-caption").textContent = sources.length ? isFictionalDemo ? "Fictional account evidence" : "Verified account evidence" : "";
        document.getElementById("sources-health-card").hidden = !isFictionalDemo && !sources.length;
        document.getElementById("accounts-summary").textContent = allRows.length + " accounts · " + groups.workNow.length + " need attention";
        document.getElementById("priority-sort").title = text(payload.scope?.rankingBasis, "Decision timing, opportunity value, buying momentum, and blockers");
        const footer = document.getElementById("site-disclosure");
        footer.hidden = !isFictionalDemo && !sources.length;
        footer.textContent = isFictionalDemo ? "Fictional data · For demonstration only." : "Account home · " + sources.length + " verified source" + (sources.length === 1 ? "" : "s") + ".";
      }

      function renderAccounts() {
        const body = document.getElementById("accounts-list");
        body.replaceChildren();
        const hasPriorityScores = allRows.some((row) => priorityScore(row) !== null);
        const distinctAccountNames = new Set(allRows.map((row) => text(row.account).toLocaleLowerCase()).filter(Boolean));
        document.getElementById("account-name-sort").disabled = distinctAccountNames.size < 2;
        document.getElementById("account-name-column").setAttribute("aria-sort", state.sortMode === "account" ? state.accountSortDirection : "none");
        document.getElementById("priority-column").hidden = !hasPriorityScores;
        document.getElementById("priority-column-width").hidden = !hasPriorityScores;
        document.getElementById("priority-column").setAttribute("aria-sort", hasPriorityScores && state.sortMode === "priority" ? state.sortDescending ? "descending" : "ascending" : "none");
        document.querySelector(".account-table").dataset.priorityScores = String(hasPriorityScores);
        if (!allRows.length) { const row = create("tr"); const cell = create("td", "empty-state", "No verified customer accounts were provided."); cell.colSpan = hasPriorityScores ? 6 : 5; row.appendChild(cell); body.appendChild(row); return; }
        if (!allRows.some((row) => row.account === state.selected?.account)) state.selected = allRows[0];
        const matchingAccounts = filteredAccounts();
        if (!matchingAccounts.length) { const row = create("tr"); const cell = create("td", "empty-state", "No accounts match your search or filter."); cell.colSpan = hasPriorityScores ? 6 : 5; row.appendChild(cell); body.appendChild(row); return; }
        sortedAccounts().forEach((account) => {
          if (!matchingAccounts.includes(account)) return;
          const priority = priorityInfo(account);
          const score = priorityScore(account);
          const openItems = openItemsFor(account);
          const row = create("tr", "account-row");
          row.dataset.account = account.account;
          row.dataset.priorityScore = score == null ? "" : String(score);
          row.tabIndex = 0;
          row.setAttribute("aria-selected", String(account.account === state.selected?.account));
          row.setAttribute("aria-controls", "account-drawer");
          row.setAttribute("aria-haspopup", "dialog");
          row.setAttribute("aria-expanded", String(state.drawerOpen && account.account === state.selected?.account));
          row.setAttribute("aria-label", [account.account, flaggedIssue(account)].filter(Boolean).join(" · "));
          const identity = create("td");
          const label = create("span", "account-label");
          label.append(create("span", "account-name", account.account), create("span", "account-subline motion-copy", text(account.motion)), create("span", "account-subline mobile-stage", text(account.stage)));
          identity.appendChild(label);
          const opportunity = create("td", "opportunity-cell");
          const sourcedOpportunity = verifiedOpportunity(account);
          if (sourcedOpportunity.amount !== null) opportunity.appendChild(create("span", "opportunity-value", sourcedOpportunity.display));
          if (sourcedOpportunity.present && text(account.stage)) opportunity.appendChild(create("span", "account-subline", text(account.stage)));
          const status = create("td", "status-cell"); if (priority.label) status.appendChild(create("span", "priority-badge " + priority.tone, priority.label));
          const scoreCell = create("td", "score-cell"); scoreCell.hidden = !hasPriorityScores;
          const displayScore = score == null ? "—" : String(score);
          if (score !== null) scoreCell.appendChild(create("span", "priority-score" + (score >= 85 ? " high-score" : ""), displayScore));
          const items = create("td", "open-items-cell");
          if (openItems !== null) items.append(create("span", "open-item-count", String(openItems)), create("span", "open-item-caption", openItems === 1 ? "open item" : "open items"));
          const nextAction = isFictionalDemo || text(account.nextAction) ? suggestedNextAction(account) : "";
          const action = create("td", "action-cell"); if (nextAction) action.appendChild(create("span", "next-action-copy", nextAction));
          row.append(identity, opportunity, status, scoreCell, items, action);
          const select = () => openAccountDrawer(account, row);
          row.addEventListener("click", select);
          row.addEventListener("keydown", (event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); select(); } });
          body.appendChild(row);
        });
      }

      function detailEvents(row) {
        const detail = detailFor(row);
        if (Array.isArray(detail.events) && detail.events.length) return detail.events;
        if (Array.isArray(row.events) && row.events.length) return row.events;
        if(!isFictionalDemo)return [];
        const contact = text(row.primaryContact, "Account contact").split(" · ")[0];
        return [
          { source: "Salesforce", reference: "Opportunity: " + row.account + " · " + text(row.stage), title: row.value + " opportunity needs review", when: "Current", detail: text(row.whyItMatters) },
          { source: "Gmail", reference: contact + " → " + sellerName, title: "Latest verified buyer context", when: "Recent", detail: text(row.status) }
        ];
      }

      function detailPeople(row) {
        const explicit = detailFor(row).stakeholders;
        if (Array.isArray(explicit) && explicit.length) return explicit;
        const people = [];
        if (row.primaryContact) { const parts = text(row.primaryContact).split(" · "); people.push({ name: parts[0], role: parts[1] || "Primary buyer contact", status: "Engaged" }); }
        if (sellerName && !people.some((person) => person.name === sellerName)) people.push({ name: sellerName, role: "You · Account owner", status: "Owner" });
        return people;
      }
      function safeAccountUrl(row) {
        const supplied = text(row.accountUrl, detailFor(row).accountUrl);
        if (!supplied) return "";
        try { const url = new URL(supplied); return url.protocol === "https:" ? url.href : ""; } catch (_) { return ""; }
      }
      function verifiedChangeEvents(row) {
        return verifiedAccountEvents(row).filter((event) => !/^(?:google|outlook) calendar$|^(?:gmail|outlook(?: email)?|email|slack|(?:microsoft )?teams)$/i.test(text(event.source)) && (text(event.title) || text(event.detail)));
      }

      function appendSection(panel, label) { const section = create("section", "detail-section"); section.appendChild(create("h3", "section-label", label)); panel.appendChild(section); return section; }

      function renderDetail() {
        const row = state.selected;
        const panel = document.getElementById("detail-panel");
        panel.replaceChildren();
        if (!row) { panel.appendChild(create("p", "empty-state", "Choose an account to inspect its verified context.")); return; }
        const detail = detailFor(row);
        const content = create("div", "detail-content");
        panel.appendChild(content);
        const top = create("div", "detail-topline");
        const identity = create("div");
        const title = create("h2", "detail-name", row.account);
        title.id = "account-drawer-title";
        const fictionalHeading = groups.workNow.includes(row) ? "NEEDS ATTENTION" : "ACCOUNT OVERVIEW";
        identity.append(create("div", "detail-eyebrow", isFictionalDemo ? fictionalHeading : text(row.status, detail.status).toUpperCase() || "ACCOUNT OVERVIEW"), title);
        const stageDetails = [text(row.motion), text(row.stage), isFictionalDemo ? "" : text(row.dueDate)].filter(Boolean);
        if (stageDetails.length) identity.appendChild(create("p", "detail-stage", stageDetails.join(" · ")));
        top.appendChild(identity);
        const accountValue = row.accountValue ?? row.value;
        if (sourcedAccountValue(accountValue) !== null) top.appendChild(create("strong", "detail-amount", text(accountValue)));
        content.appendChild(top);
        const columns = create("div", "detail-columns");
        const overview = create("div", "detail-column");
        columns.appendChild(overview);
        content.appendChild(columns);

        const customerIssue = text(detail.risk, row.whyItMatters);
        const nextAction = isFictionalDemo || text(row.nextAction) ? suggestedNextAction(row) : "";
        const suppliedStakeholders = Array.isArray(detail.stakeholders) ? detail.stakeholders.filter((person) => person && text(person.name)) : [];
        const people = isFictionalDemo ? detailPeople(row) : suppliedStakeholders.length ? suppliedStakeholders : [];
        if (!isFictionalDemo && !suppliedStakeholders.length && text(row.primaryContact)) {
          const parts = text(row.primaryContact).split(" · ");
          people.push({ name: parts[0], ...(text(parts[1]) ? { role: text(parts[1]) } : {}) });
        }
        if (!isFictionalDemo && text(row.owner) && !people.some((person) => person.name === text(row.owner))) people.push({ name: text(row.owner), role: "Account owner" });
        const checklist = Array.isArray(detail.checklist) ? detail.checklist.filter((item) => text(typeof item === "object" ? item.title ?? item.label ?? item.text : item)) : [];
        const accountUrl = safeAccountUrl(row);
        const changes = verifiedChangeEvents(row);
        if (isFictionalDemo) {
          if (customerIssue) {
            const context = appendSection(overview, "What’s happening");
            context.appendChild(create("p", "detail-copy", customerIssue));
            const commercial = detail.commercialGuardrails || {};
            const factValues = [
              ["Current pilot", Number.isInteger(commercial.currentSeats) && commercial.currentSeats > 0 ? commercial.currentSeats.toLocaleString("en-US") + " users" : ""],
              ["Potential rollout", Number.isInteger(commercial.proposedSeats) && commercial.proposedSeats > 0 ? commercial.proposedSeats.toLocaleString("en-US") + " users" : ""],
              ["Account owner", text(row.owner)]
            ].filter(([, value]) => value);
            if (factValues.length) {
              const facts = create("div", "demo-facts");
              factValues.forEach(([label, value]) => {
                const fact = create("div", "demo-fact");
                fact.append(create("span", "demo-fact-label", label), create("span", "demo-fact-value", value));
                facts.appendChild(fact);
              });
              context.appendChild(facts);
            }
          }
          if (nextAction) {
            const nextStep = appendSection(overview, "Next step");
            const action = create("div", "action-card");
            action.appendChild(create("p", "next-step-takeaway", nextAction));
            nextStep.appendChild(action);
          }
          const customerPeople = people.filter((person) => text(person.name) !== text(row.owner) && !/\baccount owner\b/i.test(text(person.role)));
          if (customerPeople.length) {
            const peopleSection = appendSection(overview, "People");
            const list = create("div", "demo-people");
            customerPeople.slice(0, 3).forEach((person) => {
              const personRole = text(person.role);
              const role = /executive sponsor/i.test(personRole) ? "Executive sponsor" : /security/i.test(personRole) ? "Security" : /solutions (?:engineer|architect)/i.test(personRole) ? "Solutions" : text(personRole.split("·").pop());
              const chip = create("span", "demo-person", text(person.name));
              if (role) chip.appendChild(create("span", "demo-person-role", " · " + role));
              list.appendChild(chip);
            });
            peopleSection.appendChild(list);
          }
          const safeEvents = verifiedAccountEvents(row).filter((event) => !/presentation|deck|deal desk|excluded services/i.test([event.title, event.detail, event.reference].map((value) => text(value)).join(" ")));
          const keySignals = ["Granola", "Slack", "Salesforce"].map((source) => safeEvents.find((event) => text(event.source).toLowerCase() === source.toLowerCase())).filter(Boolean);
          if (keySignals.length) {
            const signalsSection = appendSection(overview, "Key signals");
            const signals = create("div", "demo-signals");
            keySignals.forEach((event) => {
              const rawTitle = text(event.title, event.detail).replace(/^\$[\d,.]+\s+/, "");
              const title = rawTitle.charAt(0).toUpperCase() + rawTitle.slice(1);
              const signal = create("div", "demo-signal");
              signal.append(create("span", "demo-signal-source", text(event.source)), create("span", "demo-signal-title", title));
              signals.appendChild(signal);
            });
            signalsSection.appendChild(signals);
          }
          const recentActivity = safeEvents.filter((event) => !keySignals.includes(event)).slice(0, 3);
          if (recentActivity.length) {
            const activity = create("details", "demo-activity");
            activity.appendChild(create("summary", "demo-activity-summary", "Recent activity"));
            recentActivity.forEach((event) => {
              const item = create("div", "account-change");
              item.appendChild(create("span", "account-change-title", text(event.title, event.detail)));
              const metadata = [text(event.source), text(event.when, event.timestamp)].filter(Boolean).join(" · ");
              if (metadata) item.appendChild(create("span", "account-change-meta", metadata));
              activity.appendChild(item);
            });
            overview.appendChild(activity);
          }
          return;
        }
        if (customerIssue || nextAction || people.length || checklist.length || accountUrl || changes.length) {
          const context = appendSection(overview, "Context and Next Steps");
          if (customerIssue) context.appendChild(create("p", "detail-copy", customerIssue));
          people.forEach((person) => {
            const card = create("div", "account-person");
            card.appendChild(create("span", "account-person-name", text(person.name)));
            const meta = [text(person.role), text(person.status)].filter(Boolean).join(" · ");
            if (meta) card.appendChild(create("span", "account-person-meta", meta));
            context.appendChild(card);
          });
          checklist.forEach((item) => context.appendChild(create("div", "account-checklist-item", text(typeof item === "object" ? item.title ?? item.label ?? item.text : item))));
          changes.slice(0, 3).forEach((event) => {
            const change = create("div", "account-change");
            change.appendChild(create("span", "account-change-title", text(event.title, event.detail)));
            const metadata = [text(event.source), text(event.when, event.timestamp)].filter(Boolean).join(" · ");
            if (metadata) change.appendChild(create("span", "account-change-meta", metadata));
            if (text(event.detail) && text(event.detail) !== text(event.title)) change.appendChild(create("span", "account-change-detail", text(event.detail)));
            context.appendChild(change);
          });
          if (nextAction) {
            const action = create("div", "action-card");
            action.appendChild(create("p", "next-step-takeaway", suggestedNextAction(row)));
            context.appendChild(action);
          }
          if (accountUrl) {
            const link = create("a", "account-record-link", "Open account record");
            link.href = accountUrl; link.target = "_blank"; link.rel = "noopener noreferrer";
            context.appendChild(link);
          }
        }

        const groundedReasons = rationalesFor(row);
        if (groundedReasons.length) {
          const rationale = appendSection(overview, "Priority Rationale");
          const reasons = create("ul", "rationale-list");
          groundedReasons.forEach((reason) => reasons.appendChild(create("li", "", reason)));
          rationale.appendChild(reasons);
        }

        const upcomingMeetings = verifiedMeetingEvents(row);
        if (upcomingMeetings.length) {
          const meetingSection = appendSection(overview, "Meetings");
          const meetingList = create("div", "signal-list");
          upcomingMeetings.slice(0, 3).forEach((event) => {
            const entry = create("div", "signal-item");
            const style = sourceStyle(text(event.source));
            const icon = create("span", "signal-icon", style.short); icon.style.color = style.color; icon.style.background = style.background;
            const copy = create("div");
            copy.append(create("div", "signal-title", text(event.title)), create("div", "meeting-time", meetingWhen(event)), create("span", "signal-source", text(event.reference)), create("p", "signal-copy", text(event.detail)));
            entry.append(icon, copy);
            meetingList.appendChild(entry);
          });
          meetingSection.appendChild(meetingList);
        }

        const recentMessages = verifiedAccountEvents(row).filter((event) => /^(?:gmail|outlook(?: email)?|email|slack|(?:microsoft )?teams)$/i.test(text(event.source)));
        if (recentMessages.length) {
          const communications = appendSection(overview, "Recent Communications");
          const messages = create("div", "signal-list");
          recentMessages.slice(0, 5).forEach((event) => {
            const entry = create("div", "signal-item");
            const style = sourceStyle(text(event.source));
            const icon = create("span", "signal-icon", style.short); icon.style.color = style.color; icon.style.background = style.background;
            const copy = create("div");
            const status = communicationStatus(event);
            const provider = /gmail|outlook|email/i.test(text(event.source)) ? "Email" : /teams/i.test(text(event.source)) ? "Teams" : "Slack";
            const heading = create("div", "signal-title", text(event.title)); heading.appendChild(create("span", "signal-time", text(event.when)));
            const metadata = create("div", "communication-meta");
            metadata.append(create("span", "signal-source", provider + " · " + status), create("span", "communication-state " + status.toLowerCase(), status));
            copy.append(heading, metadata, create("p", "signal-copy", text(event.reference, event.detail)));
            entry.append(icon, copy);
            messages.appendChild(entry);
          });
          communications.appendChild(messages);
        }

      }

      function beginDrawerOpening() {
        const drawer = document.getElementById("account-drawer");
        const panel = drawer.querySelector(".account-drawer-panel");
        if (state.drawerCloseTimer !== null) {
          window.clearTimeout(state.drawerCloseTimer);
          state.drawerCloseTimer = null;
        }
        if (state.drawerCloseListener && panel) panel.removeEventListener("animationend", state.drawerCloseListener);
        state.drawerCloseListener = null;
        delete drawer.dataset.state;
        drawer.hidden = false;
        document.body.classList.add("drawer-open");
        document.getElementById("detail-panel").scrollTop = 0;
        document.getElementById("account-drawer-close").focus();
      }

      function openAccountDrawer(account, trigger) {
        state.returnFocus = trigger || document.activeElement;
        state.returnAccount = text(account?.account);
        state.selected = account;
        state.drawerOpen = true;
        renderAccounts();
        renderDetail();
        beginDrawerOpening();
      }

      function closeAccountDrawer() {
        if (!state.drawerOpen) return;
        state.drawerOpen = false;
        const drawer = document.getElementById("account-drawer");
        const panel = drawer.querySelector(".account-drawer-panel");
        const returningAccount = state.returnAccount;
        const previousFocus = state.returnFocus;
        const finish = () => {
          if (drawer.dataset.state !== "closing" || state.drawerOpen) return;
          if (state.drawerCloseTimer !== null) window.clearTimeout(state.drawerCloseTimer);
          state.drawerCloseTimer = null;
          state.drawerCloseListener = null;
          delete drawer.dataset.state;
          drawer.hidden = true;
          document.body.classList.remove("drawer-open");
          renderAccounts();
          const selectedRow = Array.from(document.querySelectorAll(".account-row")).find((row) => row.dataset.account === returningAccount);
          const restoreFocus = previousFocus && previousFocus.isConnected && previousFocus.getClientRects().length ? previousFocus : selectedRow;
          if (restoreFocus && typeof restoreFocus.focus === "function") restoreFocus.focus();
          state.returnFocus = null;
          state.returnAccount = "";
        };
        drawer.dataset.state = "closing";
        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !panel) {
          finish();
          return;
        }
        state.drawerCloseListener = finish;
        panel.addEventListener("animationend", finish, { once: true });
        state.drawerCloseTimer = window.setTimeout(finish, 320);
      }

      function setupAccountDrawer() {
        const drawer = document.getElementById("account-drawer");
        document.getElementById("account-drawer-close").addEventListener("click", closeAccountDrawer);
        drawer.addEventListener("click", (event) => { if (event.target === drawer) closeAccountDrawer(); });
        document.addEventListener("keydown", (event) => {
          if (!state.drawerOpen) return;
          if (event.key === "Escape") { event.preventDefault(); closeAccountDrawer(); return; }
          if (event.key !== "Tab") return;
          const focusable = Array.from(drawer.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));
          if (!focusable.length) { event.preventDefault(); return; }
          const first = focusable[0];
          const last = focusable[focusable.length - 1];
          if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
          else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
        });
      }

      function accountButton(account, title, detail, meta, value) {
        const button = create("button", "work-item");
        button.type = "button";
        button.setAttribute("aria-haspopup", "dialog");
        button.setAttribute("aria-controls", "account-drawer");
        const copy = create("span", "work-copy");
        copy.append(create("span", "work-title", title), create("span", "work-detail", detail));
        button.append(copy, create("span", value ? "pipeline-opportunity-value" : "work-meta", value || meta));
        button.addEventListener("click", () => openAccountDrawer(account, button));
        return button;
      }

      function recentAccountActivity(rows) {
        const timedEvents = rows.flatMap((row) => verifiedAccountEvents(row)
          .filter((event) => !/^(?:google|outlook) calendar$/i.test(text(event.source)) || (!isFictionalDemo && meetingTiming(event) === "past"))
          .map((event) => ({ row, event, timestamp: Date.parse(text(event.when).replace(/\s*·\s*/g, " ")) })));
        timedEvents.sort((first, second) => (Number.isFinite(second.timestamp) ? second.timestamp : -Infinity) - (Number.isFinite(first.timestamp) ? first.timestamp : -Infinity));
        const includedAccounts = new Set();
        return timedEvents.filter(({ row }) => {
          if (includedAccounts.has(row.account)) return false;
          includedAccounts.add(row.account);
          return true;
        }).slice(0, 4);
      }
      function selectedDashboardGoal() {
        const supplied = payload.dashboardGoal ?? payload.preferences?.goal ?? payload.selectedGoal ?? payload.goal;
        const label = text(typeof supplied === "object" && supplied ? supplied.label ?? supplied.name ?? supplied.value : supplied).toLowerCase();
        if (!label) return "";
        if (/pipeline|forecast|opportunit|blocker|deal risk/.test(label)) return "pipeline";
        if (/meeting|follow[ -]?up|customer request/.test(label)) return "meetings";
        if (/priorit|account|change|relationship/.test(label)) return "priorities";
        return "";
      }
      function renderDashboardFocus() {
        const card = document.getElementById("seller-focus-card");
        const heading = document.getElementById("seller-focus-heading");
        const list = document.getElementById("seller-focus-list");
        list.replaceChildren();
        const mode = selectedDashboardGoal();
        if (!mode) { card.hidden = true; return; }
        const entries = [];
        sortedAccounts().forEach((row) => {
          if (entries.length >= 4) return;
          const detail = detailFor(row);
          if (mode === "priorities") {
            const changes = verifiedChangeEvents(row);
            const rationale = rationalesFor(row);
            const action = text(row.nextAction, text(detail.risk, rationale[0]));
            const latestChange = text(changes[0]?.title);
            const description = action && latestChange && action.toLowerCase() !== latestChange.toLowerCase()
              ? action + " · " + latestChange
              : text(action, latestChange);
            if (description && (changes.length || rationale.length || priorityScore(row) !== null || text(detail.risk))) entries.push({ row, description, metadata: text(changes[0]?.when) });
          } else if (mode === "pipeline") {
            const opportunity = verifiedOpportunity(row);
            const description = text(detail.risk, text(row.nextAction, row.stage));
            if (opportunity.present && description) entries.push({ row, description, metadata: opportunity.display });
          } else {
            const meetings = verifiedMeetingEvents(row);
            const open = openItemsFor(row);
            if (meetings.length) entries.push({ row, description: text(meetings[0].title, meetings[0].detail), metadata: meetingWhen(meetings[0]) });
            else if (open !== null && open > 0 && text(row.nextAction)) entries.push({ row, description: text(row.nextAction), metadata: open + (open === 1 ? " open item" : " open items") });
          }
        });
        card.hidden = !entries.length;
        if (!entries.length) return;
        heading.textContent = mode === "priorities" ? "Your focus · Account priorities and changes" : mode === "pipeline" ? "Your focus · Pipeline risk" : "Your focus · Meetings and follow-ups";
        entries.forEach(({ row, description, metadata }) => list.appendChild(accountButton(row, row.account, description, metadata)));
      }

      function renderHome() {
        const attention = document.getElementById("attention-list");
        const meetings = document.getElementById("meeting-list");
        const activity = document.getElementById("activity-list");
        attention.replaceChildren(); meetings.replaceChildren(); activity.replaceChildren();
        const openFollowUps = isFictionalDemo ? groups.workNow.length : allRows.reduce((total, row) => total + openItemsFor(row), 0);
        const explicitFollowUpCount = payload.openFollowUpCount ?? payload.followUpCount;
        const hasFollowUpCount = isFictionalDemo || openFollowUps > 0 || Boolean(sources.length && (explicitFollowUpCount === 0 || allRows.length > 0 && allRows.every((row) => openItemsFor(row) === 0)));
        const attentionCount = document.getElementById("attention-count");
        attentionCount.hidden = !hasFollowUpCount;
        attentionCount.textContent = hasFollowUpCount ? openFollowUps + " open" : "";
        groups.workNow.slice(0, 5).forEach((row) => attention.appendChild(accountButton(row, row.account, text(row.nextAction, row.status), text(row.dueDate))));
        const hasAttention = groups.workNow.length > 0;
        document.getElementById("attention-card").hidden = !hasAttention;

        const meetingEvents = allRows.flatMap((row) => verifiedMeetingEvents(row).map((event) => ({ row, event })));
        const meetingCount = sourcedUpcomingMeetingCount(meetingEvents);
        document.getElementById("meetings-health-card").hidden = meetingCount === null;
        document.getElementById("expansion-value-metric").textContent = meetingCount === null ? "" : String(meetingCount);
        document.getElementById("expansion-caption").textContent = "Customer meetings on your calendar";
        meetingEvents.slice(0, 3).forEach(({ row, event }) => meetings.appendChild(accountButton(row, row.account, text(event.title), meetingWhen(event))));
        const hasMeetings = meetingEvents.length > 0;
        document.getElementById("meetings-card").hidden = !hasMeetings;

        const recentActivity = recentAccountActivity(allRows);
        recentActivity.forEach(({ row, event }) => activity.appendChild(accountButton(row, row.account, text(event.title, event.detail), text(event.when, event.source))));
        const hasActivity = recentActivity.length > 0;
        document.getElementById("activity-card").hidden = !hasActivity;
        const hasSupportingCards = hasMeetings || hasActivity;
        document.getElementById("home-stack").hidden = !hasSupportingCards;
        const homeLayout = document.getElementById("home-layout");
        homeLayout.hidden = !hasAttention && !hasSupportingCards;
        homeLayout.dataset.panelCount = String(Number(hasAttention) + Number(hasSupportingCards));
      }

      function pipelinePhase(row) {
        const stage = text(row.stage).toLowerCase();
        const risk = text(detailFor(row).risk).toLowerCase();
        const status = text(row.status).toLowerCase();
        const nextAction = text(row.nextAction).toLowerCase();
        const hasPilotReview = verifiedMeetingEvents(row).some((event) => /pilot|rollout|deployment/i.test(text(event.title) + " " + text(event.detail)));
        if (/procurement hold|active internal coordination/i.test(stage) || /purchasing freeze|duplicate outreach/i.test(status)) return "paused";
        if (/pilot|rollout|deployment/i.test(stage + " " + status) || hasPilotReview && /pilot|uptime|rollout/i.test(risk + " " + nextAction)) return "pilot";
        if (/renewal/i.test(stage)) return "renewal";
        if (/security|technical validation|architecture|controls/i.test(stage)) return "security";
        if (/stakeholder mapping|executive decision/i.test(stage) && /owner|sponsor/i.test(risk + " " + status + " " + nextAction)) return "ownership";
        return "commercial";
      }

      function pipelineAccountButton(account) {
        const button = create("button", "work-item pipeline-row");
        button.type = "button";
        button.dataset.account = account.account;
        button.setAttribute("aria-haspopup", "dialog");
        button.setAttribute("aria-controls", "account-drawer");
        const main = create("span", "pipeline-row-main");
        const badges = create("span", "pipeline-row-badges");
        badges.append(create("span", "motion-badge", text(account.stage)), create("span", "motion-badge" + (/renew/i.test(text(account.motion)) ? " renewal" : ""), text(account.motion)));
        const nextAction = text(account.nextAction) ? suggestedNextAction(account) : "";
        main.append(create("span", "work-title", account.account + (/pilot review upcoming/i.test(text(account.status)) ? " · Pilot review upcoming" : "")), badges);
        if (nextAction) main.append(create("span", "pipeline-next-step", nextAction));
        const value = create("span", "pipeline-row-value");
        const opportunity = account.opportunity && typeof account.opportunity === "object" ? account.opportunity : null;
        const explicitOpportunity = opportunity !== null || account.hasOpportunity === true || account.opportunityPresent === true || Object.prototype.hasOwnProperty.call(account, "opportunityValue") || Object.prototype.hasOwnProperty.call(account, "opportunityAmount");
        const opportunityAmount = account.opportunityValue ?? account.opportunityAmount ?? opportunity?.value ?? opportunity?.amount ?? (explicitOpportunity ? null : account.value);
        if (opportunityAmount !== null && opportunityAmount !== undefined && text(opportunityAmount) && !/unavailable|not reported|nan/i.test(text(opportunityAmount))) value.append(create("span", "pipeline-opportunity-value", text(opportunityAmount)));
        if (text(account.dueDate)) value.append(create("span", "pipeline-row-due", text(account.dueDate)));
        button.append(main, value);
        button.addEventListener("click", () => openAccountDrawer(account, button));
        return button;
      }

      function renderPipeline() {
        const opportunities = allRows.filter((row) => verifiedOpportunity(row).present);
        const hasOpportunities = opportunities.length > 0;
        document.getElementById("tab-pipeline").hidden = !hasOpportunities;
        document.getElementById("pipeline-card").hidden = !hasOpportunities;
        const pausedCount = opportunities.filter((row) => pipelinePhase(row) === "paused").length;
        document.getElementById("opportunities-count").textContent = hasOpportunities ? (opportunities.length - pausedCount) + " active" + (pausedCount ? " · " + pausedCount + " on hold" : "") : "";
        const list = document.getElementById("opportunity-list"); list.replaceChildren();
        if (!hasOpportunities) return;
        const phases = [
          { id: "pilot", label: "Pilot & rollout" },
          { id: "security", label: "Security review" },
          { id: "ownership", label: "Buyer & ownership" },
          { id: "commercial", label: "Commercial alignment" },
          { id: "renewal", label: "Renewal readiness" },
          { id: "paused", label: "On hold" }
        ];
        phases.forEach((phase) => {
          const rows = sortedAccounts().filter((row) => verifiedOpportunity(row).present && pipelinePhase(row) === phase.id);
          if (!rows.length) return;
          const section = create("section", "pipeline-phase"); section.dataset.phase = phase.id;
          const heading = create("header", "pipeline-phase-heading");
          const amounts = rows.map((row) => verifiedOpportunity(row).amount).filter((amount) => amount !== null);
          const total = amounts.reduce((sum, amount) => sum + amount, 0);
          const phaseSummary = rows.length + " account" + (rows.length === 1 ? "" : "s") + (amounts.length ? " · " + compactMoney(total) : "");
          heading.append(create("h3", "pipeline-phase-title", phase.label), create("span", "pipeline-phase-total", phaseSummary));
          section.appendChild(heading);
          rows.forEach((row) => section.appendChild(pipelineAccountButton(row)));
          list.appendChild(section);
        });
      }

      function selectView(name, focus) {
        if (document.getElementById("tab-" + name).hidden) return;
        ["home", "accounts", "pipeline"].forEach((candidate) => {
          const selected = candidate === name;
          const tab = document.getElementById("tab-" + candidate);
          tab.setAttribute("aria-selected", String(selected));
          tab.tabIndex = selected ? 0 : -1;
          document.getElementById("view-" + candidate).hidden = !selected;
          if (selected && focus) tab.focus();
        });
      }

      function setupViews() {
        const names = ["home", "accounts", "pipeline"];
        names.forEach((name) => {
          const tab = document.getElementById("tab-" + name);
          tab.addEventListener("click", () => selectView(name, false));
          tab.addEventListener("keydown", (event) => {
            if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
            event.preventDefault();
            const visibleNames = names.filter((candidate) => !document.getElementById("tab-" + candidate).hidden);
            const index = visibleNames.indexOf(name);
            if (index < 0) return;
            const next = event.key === "Home" ? 0 : event.key === "End" ? visibleNames.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + visibleNames.length) % visibleNames.length;
            selectView(visibleNames[next], true);
          });
        });
      }

      function setupAccountSorting() {
        const nameButton = document.getElementById("account-name-sort");
        if (nameButton) nameButton.addEventListener("click", () => {
          if (nameButton.disabled) return;
          if (state.sortMode !== "account") {
            state.sortMode = "account";
            state.accountSortDirection = "ascending";
          } else if (state.accountSortDirection === "ascending") {
            state.accountSortDirection = "descending";
          } else {
            state.sortMode = allRows.some((row) => priorityScore(row) !== null) ? "priority" : "source";
            state.accountSortDirection = "none";
          }
          document.getElementById("account-name-column").setAttribute("aria-sort", state.accountSortDirection);
          nameButton.querySelector(".sort-indicator").textContent = state.accountSortDirection === "ascending" ? "↑" : state.accountSortDirection === "descending" ? "↓" : "↕";
          renderAccounts();
        });
        const button = document.getElementById("priority-sort");
        button.addEventListener("click", () => {
          if (state.sortMode === "account" || state.sortMode === "source") {
            state.sortMode = "priority";
            state.sortDescending = true;
          } else state.sortDescending = !state.sortDescending;
          state.accountSortDirection = "none";
          document.getElementById("priority-column").setAttribute("aria-sort", state.sortDescending ? "descending" : "ascending");
          button.querySelector(".sort-indicator").textContent = state.sortDescending ? "↓" : "↑";
          renderAccounts();
        });
      }
      function setupAccountFilters() {
        const search = document.getElementById("account-search");
        const clear = document.getElementById("account-search-clear");
        const refreshQuery = () => { state.accountQuery = text(search.value); clear.hidden = !state.accountQuery; renderAccounts(); };
        search.addEventListener("input", refreshQuery);
        search.addEventListener("keydown", (event) => { if (event.key === "Escape" && state.accountQuery) { event.preventDefault(); search.value = ""; refreshQuery(); } });
        clear.addEventListener("click", () => { search.value = ""; refreshQuery(); search.focus(); });
        ["all", ...groupKeys].forEach((key) => {
          const button = document.getElementById("account-filter-" + key);
          button.querySelector(".account-filter-count").textContent = String(key === "all" ? allRows.length : groups[key].length);
          button.addEventListener("click", () => {
            state.accountFilter = key;
            ["all", ...groupKeys].forEach((candidate) => document.getElementById("account-filter-" + candidate).setAttribute("aria-pressed", String(candidate === key)));
            renderAccounts();
          });
        });
      }

      renderHeader();
      renderCodexPet(payload);
      renderAccounts();
      renderHome();
      renderDashboardFocus();
      renderPipeline();
      renderDetail();
      setupAccountDrawer();
      setupAccountSorting();
      setupAccountFilters();
      setupViews();
    </script>
  </body>
</html>

SHA-256: b894aaa0ebe17fed7b8ea2617aad4df6d9746e28ccffe60b1c5223dd8bd5224e