/* Pet PT — demo area styles (docs/BUILDER.md). Tokens only (public/css/tokens.css); no new colours or sizes.
   Layout glue for the primitives in src/views/demo.tsx and the client drawer; everything visual comes from app.css. */

/* ---- Control panel (/demo) ---------------------------------------------------------------------------------- */

/* Each cast row is a whole <button class="pt-row"> inside its own <form>, so the list keeps one row per form. */
.pt-demo-persona-form { display: contents; }
.pt-demo-persona-row { transition: background-color var(--pt-dur-fast) var(--pt-ease); }
.pt-demo-persona-row:disabled { cursor: default; }
.pt-demo-persona-row:disabled:not([aria-current="true"]) { opacity: .55; }
.pt-demo-persona-row[aria-current="true"] { background: var(--pt-accent-soft); box-shadow: inset 2px 0 0 var(--pt-accent); }
.pt-demo-persona-row[aria-current="true"]:hover { background: var(--pt-accent-soft); }
.pt-demo-persona-row[aria-current="true"] .pt-row-meta { color: var(--pt-accent); }
/* One affordance on every viewport: the chevron (the row is a button, so it stays on desktop too). "Switch" is the
   row action, revealed only on hover / keyboard focus on desktop; phone never shows it. */
.pt-demo-persona-row .pt-row-chevron { display: inline-flex; }
.pt-demo-row-verb { color: var(--pt-text-muted); font-size: var(--pt-text-xs); line-height: var(--pt-line-xs); opacity: 0; transition: opacity var(--pt-dur-fast) var(--pt-ease); }
@media (max-width: 767px) {
  .pt-demo-row-verb { display: none; }
  /* Phone: `title · household` may run long; wrap to a second line rather than truncate (docs/UI.md checklist). */
  .pt-demo-persona-row .pt-row-sub { white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 768px) {
  .pt-demo-persona-row:not(:disabled):hover .pt-demo-row-verb,
  .pt-demo-persona-row:not(:disabled):focus-visible .pt-demo-row-verb { opacity: 1; color: var(--pt-text); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-demo-row-verb { transition: none; }
}

/* Demo clock card: the time is the one big number on this page (docs/UI.md §1 — a time, not a name). */
.pt-demo-clock { display: grid; gap: var(--pt-space-3); }
.pt-demo-clock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pt-space-3); }
.pt-demo-clock-head .pt-chip { margin-top: var(--pt-space-1); }
.pt-demo-clock-next { display: flex; align-items: flex-start; gap: var(--pt-space-3); padding-top: var(--pt-space-3); border-top: 1px solid var(--pt-border); }
.pt-demo-clock-next .pt-tile { margin-top: 2px; }
.pt-demo-clock-next-body { display: grid; gap: 2px; min-width: 0; }
.pt-demo-clock-next-title { font-size: var(--pt-text-md); line-height: var(--pt-line-md); font-weight: var(--pt-weight-medium); overflow-wrap: anywhere; }
.pt-demo-clock > .pt-actions { margin-top: calc(-1 * var(--pt-space-1)); }
@media (min-width: 768px) {
  .pt-demo-clock > .pt-actions { margin-inline: calc(-1 * var(--pt-space-2)); }
}

/* Desktop: the fold puts the persona hero + cast on the left and the clock/tools on the right (≥ 1080 via .pt-fold). */
@media (min-width: 1080px) {
  .pt-demo-panel { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }
}

/* ---- Captured emails (/demo/outbox, /demo/outbox/:id) ------------------------------------------------------ */

/* Recipient filter chips carry a 20 px avatar and a count. */
.pt-chips .pt-chip .pt-avatar { --pt-avatar-size: 20px; margin-left: calc(-1 * var(--pt-space-1)); }
.pt-chips .pt-chip .pt-list-group-count { font-size: var(--pt-text-xs); }

/* Desktop ≥ 1080: list on the left, the latest email open on the right (agenda + detail). The reading pane is
   sticky and scrolls on its own when the email is taller than the viewport, so its tail is never clipped at the
   fold. The "Open latest email" dock stays on every viewport (DESIGN.md §5.13.3: the primary is opening an
   email; the shell's one primary must be visible wherever it renders) — on desktop it opens the previewed email
   as its own page. */
.pt-demo-outbox { display: grid; gap: var(--pt-space-4); }
.pt-demo-outbox-preview { display: none; }
/* The row rendered `selected` is the one open in the reading pane. Below 1080 there is no pane, so the selection
   tint would read as a highlighted/unread item with no meaning: paint it only in the two-pane layout. Keyboard
   selection (pt-list on a fine pointer) still moves the highlight as usual. */
@media (max-width: 1079px) {
  .pt-demo-outbox pt-list-row[selected]:not(:focus-within) > .pt-row { background: transparent; box-shadow: none; }
  .pt-demo-outbox pt-list-row[selected]:not(:focus-within) > a.pt-row:hover { background: var(--pt-surface-2); }
}
/* Email rows: the trail is the date over a status pill (12 px, dot, no icon) so the subtitle keeps one line on 390. */
.pt-demo-outbox .pt-row-trail .pt-pill { margin-top: 1px; }
@media (min-width: 1080px) {
  .pt-demo-outbox { grid-template-columns: minmax(340px, 2fr) minmax(0, 3fr); gap: var(--pt-space-5); align-items: start; }
  .pt-demo-outbox > * { min-width: 0; }
  .pt-demo-outbox-preview {
    display: block;
    position: sticky;
    top: calc(var(--pt-strip-h) + var(--pt-topbar) + var(--pt-space-5));
    max-height: calc(100dvh - var(--pt-strip-h) - var(--pt-topbar) - 2 * var(--pt-space-5));
    overflow-y: auto;
    padding-bottom: var(--pt-space-1);
  }
}
/* Attachment rows: the trail carries a download icon instead of a chevron (the whole row downloads). */
.pt-demo-attachments .pt-row-trail { flex-direction: row; align-items: center; }
.pt-demo-attachment-download { color: var(--pt-text-muted); width: 18px; height: 18px; }
.pt-demo-attachments .pt-row:hover .pt-demo-attachment-download { color: var(--pt-text); }

/* The email reads like a document: header row with a kind tile, recipient line, then the body at 15/24. */
.pt-demo-email { display: grid; gap: var(--pt-space-3); }
.pt-demo-email-head { display: flex; align-items: flex-start; gap: var(--pt-space-3); }
.pt-demo-email-title { display: grid; gap: 2px; min-width: 0; }
.pt-demo-email-title .pt-card-title { overflow-wrap: anywhere; }
.pt-demo-email-meta { display: grid; gap: var(--pt-space-1); padding: var(--pt-space-3) 0; border-top: 1px solid var(--pt-border); border-bottom: 1px solid var(--pt-border); }
.pt-demo-email-to { display: flex; align-items: center; gap: var(--pt-space-2); font-size: var(--pt-text-sm); line-height: var(--pt-line-sm); min-width: 0; }
.pt-demo-email-to .pt-avatar { --pt-avatar-size: 24px; flex: none; }
.pt-demo-email-to > span { min-width: 0; overflow-wrap: anywhere; }
.pt-demo-email-to-name { font-weight: var(--pt-weight-medium); }
.pt-demo-email-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--pt-font);
  font-size: var(--pt-text-note);
  line-height: var(--pt-line-note);
  max-width: 68ch;
  margin: 0;
}
/* Invite and attachment cards: the meta line may wrap onto a second line rather than truncate (docs/UI.md checklist). */
.pt-demo-email-cards .pt-section-card-meta { white-space: normal; }
.pt-demo-email-body a { color: var(--pt-accent); text-decoration: underline; text-underline-offset: 2px; }

/* The demo strip and drawer render on every demo page, so their layout rules travel inside the components
   (client/shared/pt-demo-strip.ts, pt-demo-drawer.ts) rather than here — this stylesheet only loads on /demo*. */