/* ============================================================================
   PEARL CARDS — the ONE card stylesheet (Design Book v4, foundation slice)
   ============================================================================
   Book §II.9 (graded 2026-07-19): design tokens + ONE stylesheet serving the
   queue, the dashboard widget, and the task-detail page. Every Pearl Actions
   surface imports THIS file; no per-page card overrides, ever (LAW 36).
   Tokens lifted verbatim from brand-guidelines-v3 (LAW 23); the a11y floors
   here are COMMIT GATES (Book §II.9 frame ③): body ≥14px, meta ≥11px,
   WCAG AA contrast, visible iris focus, 44px touch targets, reduced-motion.

   The expand-in-place chassis (Book Part I + §II.2 physics) builds its
   component classes HERE in the next slice. This slice ships the tokens and
   buries the legacy chrome (.ritz-card, .pact-review-overlay chrome,
   .action-evidence — deleted 2026-07-19, LAW 28).
   ========================================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700');

:root {
  /* -- surfaces (v3 §03) -- */
  --pc-pearl: #FDFCFA;
  --pc-ivory: #F8F6F1;
  --pc-warm: #F5F0E8;
  /* -- ink -- */
  --pc-ink: #2D2438;
  --pc-ink-2: #5C5670;
  --pc-mute: #9A8FA8;
  /* -- accents: iris ONLY on primary verbs; teal = eyebrows/status (v3 §04) -- */
  --pc-iris: #8A7ABB;
  --pc-iris-2: #7A6FA8;
  --pc-teal: #4A9999;
  /* -- status -- */
  --pc-brick: #B0766A;   /* risk / overdue */
  --pc-ok: #5F9E8F;      /* receipts / success */
  /* -- lines -- */
  --pc-line: rgba(184, 169, 201, .30);
  --pc-line-2: rgba(184, 169, 201, .20);
  /* -- type (a11y floors: body ≥14, meta ≥11 — LAW 32) -- */
  --pc-font-head: 'Satoshi', 'Inter', sans-serif;
  --pc-font-body: 'Inter', sans-serif;
  --pc-text-body: 14px;
  --pc-text-meta: 11px;
  --pc-text-title: 16px;
  /* -- radius scale (LAW 5): cards 16, chips 12, sheets 24, tags 8 -- */
  --pc-r-tag: 8px;
  --pc-r-chip: 12px;
  --pc-r-card: 16px;
  --pc-r-panel: 20px;
  --pc-r-sheet: 24px;
  /* -- motion (LAW 9): expand/collapse 0.3s, hover 0.15s, never bounce -- */
  --pc-t-fast: 0.15s;
  --pc-t-base: 0.3s;
  /* -- touch (LAW 32/42): every target ≥44px -- */
  --pc-tap: 44px;
  /* -- elevation -- */
  --pc-shadow-rest: 0 1px 3px rgba(45, 36, 56, .06);
  --pc-shadow-open: 0 10px 30px rgba(138, 122, 187, .16);
}

/* Focus contract (Book §II.2.5 + §II.9): visible iris ring on every control. */
.pc-focusable:focus-visible {
  outline: 2px solid var(--pc-iris);
  outline-offset: 2px;
}

/* ============================================================================
   SLICE 1 — the expand-in-place chassis (Book Part I architecture + §II.2)
   ========================================================================= */

/* The OPEN card: iris outline + lifted shadow, per the Book's open strip. */
.pact.pc-open {
  border-color: var(--pc-iris) !important;
  box-shadow: var(--pc-shadow-open) !important;
}

/* Open = eyebrow + title + evidence + THE WORKSPACE (Book). The rest-card's
   verb button and structured meta blocks hide while open — eyes-on catch
   2026-07-19: "Book meeting" doubled the footer's narrated verb (LAW 19) and
   the static proposed-slot tile contradicted the live strip pick. Scoped to
   the DIRECT .pact-content child so workspace internals are untouched. */
.pact.pc-open > .pact-content .pact-actions,
.pact.pc-open > .pact-content .pact-buttons,
.pact.pc-open > .pact-content .pact-preview,
.pact.pc-open > .pact-content [class^="meta-"],
.pact.pc-open > .pact-content [class*=" meta-"] {
  display: none !important;
}

/* The picked time chip must WIN its contrast (iris bg, white text) — the
   legacy .mtg-slot--picked pale fill was beating .pcw-time--sel (eyes-on
   catch: '1:00 PM' washed out, pale-on-pale). */
.pc-open-body .pcw-time.mtg-slot--picked,
.pc-open-body .pcw-time--sel {
  background: var(--pc-iris) !important;
  border-color: var(--pc-iris) !important;
  color: #fff !important;
}

/* The in-place workspace. Carries dlg-body so every existing workspace rule
   applies; these overrides swap the MODAL geometry for FEED geometry — the
   page scrolls (Book §II.2 rule 2), the container never does. */
.pc-open-body {
  max-height: none !important;
  height: auto !important;
  /* vertical growth is the point; horizontal bleed is a modal-era width rule
     escaping the narrower card home (caught at 375: .pact-review-decision
     overran the card by ~21px — the Subject-input bleed). Clip x, free y. */
  overflow-x: clip !important;
  overflow-y: visible !important;
  padding: 4px 2px 0 !important;
  border-top: 1px solid var(--pc-line-2);
  margin-top: 10px;
  animation: pc-expand var(--pc-t-base) ease;
}
/* The workspace fits its card — no modal-era min-widths survive here. */
.pc-open-body .pact-review-main,
.pc-open-body .pact-review-decision,
.pc-open-body .pact-review-body {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.pc-open-body input,
.pc-open-body textarea,
.pc-open-body select {
  max-width: 100%;
  box-sizing: border-box;
}
@keyframes pc-expand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The workspace footer rides at the container's end inside the card. */
.pc-open-body .pact-review-footer {
  position: static;
  padding: 10px 0 6px;
  border-top: 1px solid var(--pc-line-2);
  margin-top: 10px;
}

/* collapse ▴ — the obvious close (LAW 42), quiet iris, 44px target. */
.pc-collapse {
  border: none;
  background: transparent;
  color: var(--pc-iris-2);
  font: 600 var(--pc-text-meta) var(--pc-font-body);
  letter-spacing: .02em;
  cursor: pointer;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: var(--pc-r-tag);
}
.pc-collapse:hover { background: rgba(138, 122, 187, .10); }
.pc-collapse:focus-visible { outline: 2px solid var(--pc-iris); outline-offset: 2px; }

/* draft kept — the Rule-1 chip on a collapsed card holding unsaved edits. */
.pc-draft-chip {
  font: 700 10px var(--pc-font-body);
  letter-spacing: .04em;
  color: var(--pc-iris-2);
  background: rgba(138, 122, 187, .14);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* The receipt row — a handled card's collapsed final state (Book Part I ③). */
.pc-receipt {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(95, 158, 143, .10);
  border: 1px solid rgba(95, 158, 143, .35);
  border-radius: var(--pc-r-chip);
  padding: 11px 13px;
  font: 600 var(--pc-text-body) var(--pc-font-body);
  color: #3E6B60;
  animation: pc-expand var(--pc-t-base) ease;
}
.pc-receipt--quiet {
  background: rgba(92, 86, 112, .07);
  border-color: var(--pc-line);
  color: var(--pc-ink-2);
}
.pc-receipt-mark { font-weight: 800; flex: 0 0 auto; }
.pc-receipt-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-receipt-note {
  flex: 0 0 auto;
  font-size: var(--pc-text-meta);
  font-weight: 600;
  color: var(--pc-mute);
}

/* ── Schedule family (Book Family 1): the week-strip picker ── */
.pcw-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 5px;
  margin-bottom: 7px;
}
.pcw-day {
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-r-tag);
  background: #fff;
  padding: 6px 2px;
  text-align: center;
  cursor: pointer;
  min-height: var(--pc-tap);
  transition: border-color var(--pc-t-fast);
}
.pcw-day--sel { border-color: var(--pc-iris); background: rgba(138, 122, 187, .10); }
.pcw-day-wd { display: block; font: 700 10px var(--pc-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-mute); }
.pcw-day-n { display: block; font: 700 15px var(--pc-font-head); color: var(--pc-ink); }
.pcw-times { display: flex; gap: 5px; flex-wrap: wrap; }
.pcw-time {
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-r-tag);
  background: #fff;
  color: var(--pc-ink-2);
  font: 700 12px var(--pc-font-body);
  padding: 9px 12px;
  min-height: 40px;
  cursor: pointer;
  transition: all var(--pc-t-fast);
}
.pcw-time--sel { background: var(--pc-iris); border-color: var(--pc-iris); color: #fff; }
.pcw-disclosure {
  margin-top: 8px;
  font: 500 var(--pc-text-meta) var(--pc-font-body);
  color: var(--pc-mute);
}
.pcw-noslot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--pc-ivory);
  border-radius: var(--pc-r-chip);
  padding: 11px 13px;
}
.pcw-noslot-line { flex: 1; min-width: 180px; font: 600 13px var(--pc-font-body); color: var(--pc-ink-2); }
.pcw-nextweek {
  border: 1px solid rgba(138, 122, 187, .4);
  border-radius: 999px;
  background: rgba(138, 122, 187, .12);
  color: var(--pc-iris-2);
  font: 700 12px var(--pc-font-body);
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
}
.pc-receipt-link {
  flex: 0 0 auto;
  font: 700 var(--pc-text-meta) var(--pc-font-body);
  color: var(--pc-iris-2);
  text-decoration: none;
}
.pc-receipt-link:hover { text-decoration: underline; }

/* Mobile (LAW 32): the workspace breathes edge-to-edge inside the card. */
@media (max-width: 640px) {
  .pc-open-body { padding: 2px 0 0 !important; }
  .pc-open-body .pact-review-footer {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-open-body, .pc-receipt { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pc-t-fast: 0s;
    --pc-t-base: 0s;
  }
}

/* ── Task family (Book Family 3): chips, never dropdowns ── */
.pct-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--pc-line);
  border-radius: 999px;
  background: #fff;
  color: var(--pc-ink-2);
  font: 700 12px var(--pc-font-body);
  padding: 8px 14px 8px 8px;
  min-height: 40px;
  cursor: pointer;
  transition: all var(--pc-t-fast);
}
.pct-chip.pct-when, .pct-chip.pct-when--pick { padding: 8px 14px; }
.pct-chip--sel {
  background: rgba(138, 122, 187, .14);
  border-color: var(--pc-iris);
  color: var(--pc-iris-2);
}
.pct-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #8A7ABB, #4A9999);
  color: #fff; font: 700 9px var(--pc-font-body);
  display: inline-flex; align-items: center; justify-content: center;
}
.pct-due--hidden { display: none !important; }

/* Footer verbs stay on ONE line — eyes-on catch at 375: 'Create · jess ·
   Jul 24' wrapped to three stacked lines. Primary grows, never wraps. */
/* ── Footer verbs, PERFECTED (Elle 2026-07-20: "weird gaps, misaligned and
   smushed buttons" / LAW 47.1). All viewports: every verb is a uniform 44px
   target on an aligned row. ≤640px: secondaries share ONE equal-width row
   (labels never wrap), the primary takes the FULL row below — even gaps,
   no orphans, no ragged wrap. (repeat(auto-fit) collapses empty tracks, so
   a 1/-1 span is NOT full-row — flex basis is the reliable shape.) ── */
.pc-open-body .pact-review-footer { display: flex; align-items: stretch; gap: 10px; flex-wrap: nowrap; }
.pc-open-body .pact-review-footer .pact-review-btn { min-height: var(--pc-tap); white-space: nowrap; }
.pc-open-body .pact-review-footer .pact-review-btn--primary { flex: 1 1 auto; }
.pc-open-body .pact-review-footer .pact-review-btn--dismiss { flex: 0 0 auto; }
@media (max-width: 640px) {
  .pc-open-body .pact-review-footer {
    flex-wrap: wrap;
    gap: 8px;
    /* pearl-actions.css reserves 88px right for the voice FAB on FIXED
       modal footers; this footer scrolls WITH the page — the reservation
       is just a ragged dead gap here (Elle's screenshots). Symmetric. */
    padding-right: 1.1rem !important;
  }
  .pc-open-body .pact-review-footer .pact-review-btn {
    flex: 1 1 0;
    min-width: 88px;
    padding: 10px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 13px;
  }
  .pc-open-body .pact-review-footer .pact-review-btn--primary {
    flex: 1 1 100%;
    order: 99;
    font-size: 14px;
  }
}

/* today5 embed clear-state (LAW 47.5 — a composed panel is never blank) */
.pc-today5-clear {
  padding: 28px 16px;
  text-align: center;
  border: 1px dashed var(--pc-line);
  border-radius: 14px;
  color: var(--pc-ink-2);
  font: 500 14px var(--pc-font-body);
}
.pc-today5-clear strong { display: block; font: 700 16px var(--pc-font-head); color: var(--pc-ink); margin-bottom: 4px; }

/* Elle 2026-07-20: the quick cluster (checkmark / remind / dismiss / dots)
   sits FLUSH RIGHT on every card face — the dots menu is the rightmost
   element, never floating mid-row. */
.pact .pact-quick-cluster {
  margin-left: auto !important;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}