/* ============================================================================
   prompt·d — design system  (webapp/promptd.css)
   The single source of brand truth for the hosted dashboard.
   Ink on Paper/Card, restrained monochrome, with PURPLE (#7C6BFF) as the accent:
   the live-call signal, active states, highlights and focus rings. Purple is an
   accent, never a flood. Green (#3DDC97) is the positive / "booked" signal.

   Type: the "prompt·d" WORDMARK is Poppins 800 (lowercase, tight); headings and
   body are Archivo; labels, metadata, timestamps and transcripts are JetBrains
   Mono. (The wordmark moved Archivo → Poppins in this rebrand — nothing else.)

   ── OPS NOTE — SELF-HOSTED FONTS (present) ───────────────────────────────────
   The brand fonts (Poppins wordmark, Archivo, JetBrains Mono) ARE self-hosted in
   webapp/vendor/ and the @font-face rules below resolve to them. The system
   fallback stacks (Archivo → system-ui/Segoe UI; JetBrains Mono →
   ui-monospace/Consolas; Poppins → the Archivo/system stack) stay in place only
   as a graceful fallback if a file ever fails to load.

   Self-hosted (no CDN / no Google Fonts link — this ships on Firebase Hosting and
   must stay self-contained):
     vendor/Poppins-800.woff2           (weight 800 — the "prompt·d" wordmark)
     vendor/Poppins-700.woff2           (weight 700 — wordmark alternate)
     vendor/Archivo-Regular.woff2       (weight 400)
     vendor/Archivo-Bold.woff2          (weight 700)
     vendor/JetBrainsMono-Regular.woff2 (weight 400)
   ============================================================================ */

/* ---- fonts (self-hosted; see OPS NOTE above) ------------------------------ */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./vendor/Poppins-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('./vendor/Poppins-800.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./vendor/Archivo-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('./vendor/Archivo-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('./vendor/JetBrainsMono-Regular.woff2') format('woff2');
}

/* ---- tokens --------------------------------------------------------------- */
:root{
  /* brand core */
  --pd-ink:#121212;          /* the mark + fills + dark text on light */
  --pd-paper:#F4F3EF;        /* page surface */
  --pd-card:#FAF9F5;         /* panels lift slightly off Paper */

  /* accent — PURPLE. The live-call signal, active states, highlights and focus
     rings. Used a bit more freely than the old azure-only rule, but it stays an
     accent, never a flood. */
  --pd-accent:#7C6BFF;
  --pd-accent-deep:#6A58F0;                 /* hover / active */
  --pd-accent-soft:rgba(124,107,255,.16);   /* tint fills / focus rings */
  --pd-accent-border:rgba(124,107,255,.42); /* accent hairlines */
  --pd-accent-glow:rgba(124,107,255,.35);   /* glows */
  /* legacy aliases — some shared brand pages still reference "azure". */
  --pd-azure:var(--pd-accent);
  --pd-azure-deep:var(--pd-accent-deep);

  /* positive / success — green (e.g. a "booked" / good state) */
  --pd-positive:#3DDC97;

  /* monochrome derivatives (no new hues — Ink at reduced strength) */
  --pd-muted:#4B4B47;        /* secondary text — AA on Paper */
  --pd-faint:#616159;        /* tertiary / metadata — AA on Paper */
  --pd-line:rgba(18,18,18,.14);
  --pd-line-soft:rgba(18,18,18,.08);

  /* surfaces the logo hole matches, so the disc reads as punched-out */
  --pd-surface:var(--pd-paper);

  /* type */
  --pd-font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pd-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono','Cascadia Code',Consolas,'Liberation Mono',Menlo,monospace;
  --pd-wordmark:'Poppins',var(--pd-font);   /* the "prompt·d" wordmark ONLY */

  /* geometry */
  --pd-radius:10px;
  --pd-radius-sm:7px;
  --pd-radius-lg:16px;

  --pd-shadow:0 1px 2px rgba(18,18,18,.05),0 8px 26px rgba(18,18,18,.06);
  color-scheme:light;
}

/* dark-aware: the brand is a light (Paper) product primarily, but a dark
   surface is a faithful reversed treatment — Ink field, Paper ink, purple kept. */
@media (prefers-color-scheme:dark){
  :root{
    --pd-ink:#F4F3EF;                 /* "ink" becomes the light foreground */
    --pd-paper:#161615;               /* page surface goes to a dark card base */
    --pd-card:#1B1B1A;                /* panels lift slightly off the page */
    --pd-accent:#8B7BFF;              /* brightened purple for AA on dark fills */
    --pd-accent-deep:#A99DFF;
    --pd-accent-soft:rgba(139,123,255,.18);
    --pd-accent-border:rgba(139,123,255,.46);
    --pd-accent-glow:rgba(139,123,255,.40);
    --pd-azure:var(--pd-accent);
    --pd-azure-deep:var(--pd-accent-deep);
    --pd-positive:#3DDC97;
    --pd-muted:#B7B7B2;
    --pd-faint:#8C8C86;
    --pd-line:rgba(244,243,239,.16);
    --pd-line-soft:rgba(244,243,239,.09);
    --pd-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}

/* ---- reset / base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--pd-font);
  font-weight:400;
  font-size:15px;
  line-height:1.55;
  color:var(--pd-ink);
  background:var(--pd-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Nothing lighter than 400; no italics, ever. */
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-family:var(--pd-font);
  font-weight:700;
  font-style:normal;
  line-height:1.12;
  letter-spacing:-0.02em;
  color:var(--pd-ink);
}
p{margin:0}
strong,b{font-weight:700}
em,i{font-style:normal}
a{color:var(--pd-ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--pd-accent);outline-offset:2px;border-radius:3px}

/* ---- headings scale ------------------------------------------------------- */
.pd-h1{font-size:clamp(26px,4vw,34px);letter-spacing:-0.03em}
.pd-h2{font-size:22px;letter-spacing:-0.025em}
.pd-h3{font-size:17px;letter-spacing:-0.02em}
.pd-body{font-weight:400;color:var(--pd-muted);line-height:1.6}
.pd-lead{font-size:15px;color:var(--pd-muted);line-height:1.6}

/* ---- eyebrow / labels / metadata (JetBrains Mono) ------------------------- */
.pd-eyebrow{
  font-family:var(--pd-mono);
  font-weight:400;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--pd-faint);
}
.pd-meta,.pd-time{
  font-family:var(--pd-mono);
  font-weight:400;
  font-size:12.5px;
  color:var(--pd-faint);
  font-variant-numeric:tabular-nums;
}
.pd-mono{font-family:var(--pd-mono);font-variant-numeric:tabular-nums}

/* ============================================================================
   LOGO — disc-with-a-dot + wordmark "prompt·d"
   Drive size from --pd-disc (the disc height). The wordmark size derives from
   it (disc ≈ 0.81em of the type size → type = disc / 0.81). Live states change
   ONLY the inner dot — never the outer disc, never animate the disc.
   ============================================================================ */
.pd-logo{
  --pd-disc:18px;                       /* product header default */
  --pd-hole:var(--pd-surface);          /* the punched hole matches the surface */
  display:inline-flex;
  align-items:center;
  gap:0.16em;                           /* gap ≈ 0.16em of the wordmark size */
  font-size:calc(var(--pd-disc) / 0.81);
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  user-select:none;
}
.pd-logo:hover{text-decoration:none}
.pd-logo .pd-disc{
  width:var(--pd-disc);
  height:var(--pd-disc);
  flex:none;
  display:block;
}
.pd-disc-outer{fill:var(--pd-ink)}
.pd-disc-hole{fill:var(--pd-hole)}          /* idle: small hole showing the surface */
.pd-disc-ring{fill:none;stroke:var(--pd-hole);stroke-width:6;opacity:0}
.pd-logo .pd-wordmark{
  font-family:var(--pd-wordmark);       /* Poppins 800 — the wordmark's own face */
  font-weight:800;
  font-style:normal;
  font-size:1em;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--pd-ink);
  text-transform:lowercase;             /* wordmark is NEVER caps */
}
/* live states — only the inner dot changes */
.pd-logo[data-state="idle"] .pd-disc-hole{fill:var(--pd-hole)}
.pd-logo[data-state="ringing"] .pd-disc-hole{opacity:0}
.pd-logo[data-state="ringing"] .pd-disc-ring{opacity:1}
.pd-logo[data-state="on-call"] .pd-disc-hole{fill:var(--pd-accent)}

/* reversed variant — Ink/dark surface: Paper disc, Ink hole, Paper wordmark */
.pd-logo--reversed{--pd-hole:var(--pd-ink)}
.pd-logo--reversed .pd-disc-outer{fill:var(--pd-paper)}
.pd-logo--reversed .pd-wordmark{color:var(--pd-paper)}
.pd-logo--reversed[data-state="on-call"] .pd-disc-hole{fill:var(--pd-accent)}

/* ---- buttons -------------------------------------------------------------- */
.pd-btn{
  --_bg:var(--pd-ink);
  --_fg:var(--pd-paper);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--pd-font);
  font-weight:700;
  font-size:14px;
  line-height:1;
  letter-spacing:-0.01em;
  padding:11px 20px;
  border:1px solid var(--_bg);
  border-radius:var(--pd-radius-sm);
  background:var(--_bg);
  color:var(--_fg);
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;
}
.pd-btn:hover{--_bg:#000;--_fg:var(--pd-paper);text-decoration:none}
.pd-btn:disabled{opacity:.45;cursor:default}
.pd-btn--block{width:100%}
.pd-btn--lg{padding:14px 24px;font-size:15px}
.pd-btn--sm{padding:8px 14px;font-size:13px}

/* ghost / secondary — outline only, monochrome */
.pd-btn--ghost{--_bg:transparent;--_fg:var(--pd-ink);border-color:var(--pd-line)}
.pd-btn--ghost:hover{--_bg:transparent;--_fg:var(--pd-ink);border-color:var(--pd-ink)}

/* accent — THE live action ("Go live"). Purple fill, white text; hover deepens.
   (Class name kept as --azure so shared brand pages keep resolving.) */
.pd-btn--azure{--_bg:var(--pd-accent);--_fg:#ffffff;border-color:var(--pd-accent)}
.pd-btn--azure:hover{--_bg:var(--pd-accent-deep);--_fg:#ffffff;border-color:var(--pd-accent-deep)}
.pd-btn--azure:focus-visible{outline-color:var(--pd-accent-deep)}
/* the go-live button pairs the accent fill with a small live dot */
.pd-go-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none}

/* ---- product header / nav ------------------------------------------------- */
.pd-header{
  display:flex;
  align-items:center;
  gap:24px;
  padding:14px 22px;
  background:color-mix(in srgb,var(--pd-paper) 86%,transparent);
  border-bottom:1px solid var(--pd-line);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:20;
}
.pd-nav{display:flex;align-items:center;gap:4px}
.pd-nav-link{
  font-family:var(--pd-font);
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.01em;
  color:var(--pd-faint);
  padding:8px 12px;
  border-radius:var(--pd-radius-sm);
  border-bottom:2px solid transparent;
  cursor:pointer;
  background:none;
}
.pd-nav-link:hover{color:var(--pd-ink);text-decoration:none}
.pd-nav-link[aria-current="page"],
.pd-nav-link.is-active{color:var(--pd-ink);border-bottom-color:var(--pd-accent)}
.pd-header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.pd-header-who{font-family:var(--pd-mono);font-size:12px;color:var(--pd-faint)}

/* location / tenant label — where a funeral home's own name is allowed */
.pd-tenant{
  font-family:var(--pd-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--pd-faint);
  padding-left:14px;
  margin-left:2px;
  border-left:1px solid var(--pd-line);
}

/* ---- cards / panels ------------------------------------------------------- */
.pd-card{
  background:var(--pd-card);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius);
  padding:20px 22px;
  --pd-surface:var(--pd-card);           /* logos inside a card punch to Card */
}
.pd-panel{
  background:var(--pd-card);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  padding:24px;
  box-shadow:var(--pd-shadow);
  --pd-surface:var(--pd-card);
}
.pd-card--ink{
  background:var(--pd-ink);
  color:var(--pd-paper);
  border-color:var(--pd-ink);
  --pd-surface:var(--pd-ink);
}
.pd-card--ink .pd-eyebrow{color:rgba(244,243,239,.6)}

/* stat tile */
.pd-stat{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:var(--pd-radius);padding:16px 18px}
.pd-stat .pd-stat-num{font-family:var(--pd-font);font-weight:700;font-size:30px;letter-spacing:-0.03em;margin-top:8px;font-variant-numeric:tabular-nums}

/* ---- tables (call list) --------------------------------------------------- */
.pd-tablewrap{
  overflow-x:auto;
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius);
  background:var(--pd-card);
}
.pd-table{width:100%;border-collapse:collapse;font-size:14px}
.pd-table th{
  text-align:left;
  padding:11px 16px;
  font-family:var(--pd-mono);
  font-weight:400;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--pd-faint);
  border-bottom:1px solid var(--pd-line);
  white-space:nowrap;
}
.pd-table td{
  padding:13px 16px;
  border-bottom:1px solid var(--pd-line-soft);
  color:var(--pd-ink);
  white-space:nowrap;
  vertical-align:middle;
}
.pd-table tbody tr:last-child td{border-bottom:none}
.pd-table tbody tr:hover{background:color-mix(in srgb,var(--pd-ink) 4%,var(--pd-card))}
.pd-table .pd-col-time{font-family:var(--pd-mono);color:var(--pd-faint);font-variant-numeric:tabular-nums}
.pd-table .pd-col-name{font-weight:700}

/* ---- chips (scores / outcomes) — strictly monochrome --------------------- */
.pd-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--pd-mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:0.02em;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--pd-line);
  background:transparent;
  color:var(--pd-muted);
  font-variant-numeric:tabular-nums;
}
.pd-chip--strong{background:var(--pd-ink);color:var(--pd-paper);border-color:var(--pd-ink)}
.pd-chip--outline{background:transparent;color:var(--pd-ink);border-color:var(--pd-ink)}
.pd-chip--muted{color:var(--pd-faint);border-color:var(--pd-line-soft)}
/* the accent tint on a chip: an in-progress / live call row */
.pd-chip--live{color:var(--pd-accent);border-color:var(--pd-accent-border)}
.pd-chip--live .pd-chip-dot{width:7px;height:7px;border-radius:50%;background:var(--pd-accent)}
/* positive / "booked" — the green signal (text derived from Ink so it stays
   legible on either surface; the dot carries the pure brand green) */
.pd-chip--good{
  color:color-mix(in srgb,var(--pd-positive) 70%,var(--pd-ink));
  border-color:color-mix(in srgb,var(--pd-positive) 50%,transparent);
}
.pd-chip--good .pd-chip-dot{width:7px;height:7px;border-radius:50%;background:var(--pd-positive)}

/* ---- transcript ----------------------------------------------------------- */
.pd-transcript{display:flex;flex-direction:column;gap:12px}
.pd-turn{font-family:var(--pd-mono);font-size:12.5px;line-height:1.55}
.pd-turn .pd-speaker{
  display:block;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--pd-faint);
  margin-bottom:2px;
}
.pd-turn .pd-utter{color:var(--pd-ink)}
.pd-turn--staff .pd-utter{color:var(--pd-muted)}

/* ---- forms ---------------------------------------------------------------- */
.pd-field{display:block;margin-bottom:16px;text-align:left}
.pd-label{
  display:block;
  font-family:var(--pd-mono);
  font-weight:400;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--pd-faint);
  margin-bottom:7px;
}
.pd-label .pd-label-aside{text-transform:none;letter-spacing:0;color:var(--pd-faint)}
.pd-input{
  width:100%;
  font-family:var(--pd-font);
  font-weight:400;
  font-size:15px;
  color:var(--pd-ink);
  background:var(--pd-paper);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-sm);
  padding:11px 13px;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.pd-card .pd-input,.pd-panel .pd-input{background:var(--pd-paper)}
.pd-input::placeholder{color:var(--pd-faint)}
.pd-input:focus{outline:none;border-color:var(--pd-accent);box-shadow:0 0 0 3px var(--pd-accent-soft)}
.pd-hint{font-family:var(--pd-mono);font-size:11px;color:var(--pd-faint)}
.pd-msg{font-size:13px;color:var(--pd-ink);margin:12px 0 0;min-height:18px;line-height:1.5}

/* ---- auth pages ----------------------------------------------------------- */
.pd-auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--pd-paper);
}
.pd-auth-card{
  position:relative;                     /* anchors the top-left back link */
  width:100%;
  max-width:410px;
  background:var(--pd-card);
  border:1px solid var(--pd-line);
  border-radius:var(--pd-radius-lg);
  box-shadow:var(--pd-shadow);
  padding:34px 32px;
  text-align:center;
  --pd-surface:var(--pd-card);
}
/* subtle top-left "back to landing" link (login + signup) */
.pd-auth-back{
  position:absolute;
  top:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  color:var(--pd-faint);
  border-radius:var(--pd-radius-sm);
}
.pd-auth-back:hover{color:var(--pd-ink);text-decoration:none}
.pd-auth-back:focus-visible{outline:2px solid var(--pd-accent);outline-offset:2px}
.pd-auth-back svg{display:block;width:20px;height:20px}
.pd-auth-card .pd-logo{margin:0 auto 20px}
.pd-auth-card h1{font-size:24px;letter-spacing:-0.03em;margin-bottom:10px}
.pd-auth-sub{font-size:14px;color:var(--pd-muted);line-height:1.6;margin:0 0 22px}
.pd-auth-foot{font-size:13.5px;color:var(--pd-muted);margin:16px 0 0}
.pd-auth-foot a{font-weight:700;color:var(--pd-ink)}
.pd-auth-card form{text-align:left}

/* ---- utilities ------------------------------------------------------------ */
.pd-wrap{max-width:1040px;margin:0 auto;padding:28px 22px 64px}
.pd-stack>*+*{margin-top:14px}
.pd-row{display:flex;align-items:center;gap:12px}
.pd-divider{height:1px;background:var(--pd-line);border:0;margin:0}