/* pc.css — postcall panel design tokens + shell components.
 *
 * Scope for this story is the panel SHELL only: the token layer needed for
 * the top bar, nav, content well and the auth pages, ported from
 * docs/design/design-system.md. The full pc-* component library (tables,
 * cards, charts, forms, review, rubric editor, ...) is built by the area
 * stories that need it, on top of these tokens; this file is deliberately
 * not the whole design system.
 *
 * Token naming: --pc-<category>-<property>-<variant>[-<state>] (design-system.md
 * "Naming convention"). Components reference semantic tokens only, never a
 * --pc-palette-* primitive directly.
 */

/* ---- Primitives (design-system.md "Tokens — color", primitives table) ---- */
:root {
  --pc-palette-gray-0: #ffffff;
  --pc-palette-gray-20: #f7f8fa;
  --pc-palette-gray-40: #f0f2f5;
  --pc-palette-gray-60: #e8ecf1;
  --pc-palette-gray-80: #e3e6eb;
  --pc-palette-gray-150: #cdd2da;
  --pc-palette-gray-250: #b3bcc8;
  --pc-palette-gray-350: #929cab;
  --pc-palette-gray-450: #7a8394;
  --pc-palette-gray-500: #6b7686;
  --pc-palette-gray-550: #5f6b7c;
  --pc-palette-gray-600: #4b5565;
  --pc-palette-gray-750: #2f3946;
  --pc-palette-gray-800: #242c37;
  --pc-palette-gray-830: #1f2731;
  --pc-palette-gray-850: #1c232d;
  --pc-palette-gray-900: #151b23;
  --pc-palette-gray-930: #10151c;
  --pc-palette-gray-950: #0e1319;

  --pc-palette-blue-50: #eaf0fd;
  --pc-palette-blue-300: #8fb3ff;
  --pc-palette-blue-350: #7aa5ff;
  --pc-palette-blue-400: #6f9bff;
  --pc-palette-blue-500: #2f6bf0;
  --pc-palette-blue-600: #2556c8;
  --pc-palette-blue-700: #1f47a0;
  --pc-palette-blue-850: #1a2a47;
  --pc-palette-blue-900: #16264a;
  --pc-palette-blue-950: #0b1220;

  /* Status ramps (used by pc-badge/pc-banner later); kept minimal here. */
  --pc-palette-red-600: #c0291d;
  --pc-palette-red-700: #b42318;
  --pc-palette-amber-700: #8a5100;
  --pc-palette-orange-700: #b2400b;

  /* ---- Semantic tokens, light theme (default) ---- */
  --pc-color-surface-page: var(--pc-palette-gray-20);
  --pc-color-surface-default: var(--pc-palette-gray-0);
  --pc-color-surface-sunken: var(--pc-palette-gray-40);
  --pc-color-surface-raised: var(--pc-palette-gray-0);
  --pc-color-surface-hover: var(--pc-palette-gray-40);
  --pc-color-surface-selected: var(--pc-palette-blue-50);
  --pc-color-surface-inverse: var(--pc-palette-gray-900);

  --pc-color-text-primary: var(--pc-palette-gray-900);
  --pc-color-text-secondary: var(--pc-palette-gray-600);
  --pc-color-text-muted: var(--pc-palette-gray-550);
  --pc-color-text-disabled: var(--pc-palette-gray-450);
  --pc-color-text-inverse: var(--pc-palette-gray-0);
  --pc-color-text-link: var(--pc-palette-blue-600);

  --pc-color-border-subtle: var(--pc-palette-gray-80);
  --pc-color-border-default: var(--pc-palette-gray-150);
  --pc-color-border-strong: var(--pc-palette-gray-450);

  --pc-color-focus-ring: var(--pc-palette-blue-500);

  --pc-color-brand-fill: var(--pc-palette-blue-600);
  --pc-color-brand-fill-hover: var(--pc-palette-blue-700);
  --pc-color-brand-on: var(--pc-palette-gray-0);

  --pc-color-status-failed-fg: var(--pc-palette-red-700);
  --pc-color-status-uncertain-fg: var(--pc-palette-amber-700);
  --pc-color-status-blocked-fg: var(--pc-palette-orange-700);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pc-color-surface-page: var(--pc-palette-gray-950);
    --pc-color-surface-default: var(--pc-palette-gray-900);
    --pc-color-surface-sunken: var(--pc-palette-gray-930);
    --pc-color-surface-raised: var(--pc-palette-gray-850);
    --pc-color-surface-hover: var(--pc-palette-gray-830);
    --pc-color-surface-selected: var(--pc-palette-blue-850);
    --pc-color-surface-inverse: var(--pc-palette-gray-60);

    --pc-color-text-primary: var(--pc-palette-gray-60);
    --pc-color-text-secondary: var(--pc-palette-gray-250);
    --pc-color-text-muted: var(--pc-palette-gray-350);
    --pc-color-text-disabled: var(--pc-palette-gray-500);
    --pc-color-text-inverse: var(--pc-palette-gray-900);
    --pc-color-text-link: var(--pc-palette-blue-300);

    --pc-color-border-subtle: var(--pc-palette-gray-800);
    --pc-color-border-default: var(--pc-palette-gray-750);
    --pc-color-border-strong: var(--pc-palette-gray-500);

    --pc-color-focus-ring: var(--pc-palette-blue-350);

    --pc-color-brand-fill: var(--pc-palette-blue-400);
    --pc-color-brand-fill-hover: var(--pc-palette-blue-300);
    --pc-color-brand-on: var(--pc-palette-blue-950);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --pc-color-surface-page: var(--pc-palette-gray-950);
  --pc-color-surface-default: var(--pc-palette-gray-900);
  --pc-color-surface-sunken: var(--pc-palette-gray-930);
  --pc-color-surface-raised: var(--pc-palette-gray-850);
  --pc-color-surface-hover: var(--pc-palette-gray-830);
  --pc-color-surface-selected: var(--pc-palette-blue-850);
  --pc-color-surface-inverse: var(--pc-palette-gray-60);

  --pc-color-text-primary: var(--pc-palette-gray-60);
  --pc-color-text-secondary: var(--pc-palette-gray-250);
  --pc-color-text-muted: var(--pc-palette-gray-350);
  --pc-color-text-disabled: var(--pc-palette-gray-500);
  --pc-color-text-inverse: var(--pc-palette-gray-900);
  --pc-color-text-link: var(--pc-palette-blue-300);

  --pc-color-border-subtle: var(--pc-palette-gray-800);
  --pc-color-border-default: var(--pc-palette-gray-750);
  --pc-color-border-strong: var(--pc-palette-gray-500);

  --pc-color-focus-ring: var(--pc-palette-blue-350);

  --pc-color-brand-fill: var(--pc-palette-blue-400);
  --pc-color-brand-fill-hover: var(--pc-palette-blue-300);
  --pc-color-brand-on: var(--pc-palette-blue-950);

  color-scheme: dark;
}

/* ---- Typography ---- */
:root {
  --pc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;
  --pc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
  --pc-font-weight-regular: 400;
  --pc-font-weight-medium: 500;
  --pc-font-weight-semibold: 600;

  --pc-text-heading-1-size: 24px;
  --pc-text-heading-1-line: 32px;
  --pc-text-body-size: 14px;
  --pc-text-body-line: 20px;
  --pc-text-caption-size: 12px;
  --pc-text-caption-line: 16px;
}

/* ---- Space, radius, motion, layers ---- */
:root {
  --pc-space-1: 4px;
  --pc-space-2: 8px;
  --pc-space-3: 12px;
  --pc-space-4: 16px;
  --pc-space-5: 20px;
  --pc-space-6: 24px;
 --pc-space-8: 32px;
 --pc-space-10: 40px;
 --pc-space-12: 48px;
 --pc-space-16: 64px;

  --pc-radius-sm: 4px;
  --pc-radius-md: 6px;
  --pc-radius-lg: 8px;

  --pc-motion-duration-fast: 120ms;
  --pc-motion-duration-base: 200ms;
  --pc-motion-ease: cubic-bezier(0.2, 0, 0, 1);

  --pc-z-sticky: 10;
  --pc-z-menu: 20;
  --pc-z-toast: 30;

  --pc-size-control-md: 36px;
  --pc-size-target-min: 24px;
}

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

/* ---- Base ---- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--pc-color-surface-page);
  color: var(--pc-color-text-primary);
  font-family: var(--pc-font-sans);
  font-size: var(--pc-text-body-size);
  line-height: var(--pc-text-body-line);
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--pc-color-text-link);
}

:focus-visible {
  outline: 2px solid var(--pc-color-focus-ring);
  outline-offset: 2px;
}

/* ---- pc-skip-link ---- */
.pc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--pc-z-toast);
  background: var(--pc-color-surface-inverse);
  color: var(--pc-color-text-inverse);
  padding: var(--pc-space-2) var(--pc-space-4);
  border-radius: var(--pc-radius-sm);
}

.pc-skip-link:focus {
  left: var(--pc-space-2);
  top: var(--pc-space-2);
}

/* ---- pc-shell (design-system.md "Shell") ---- */
.pc-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pc-shell__topbar {
  min-height: 48px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--pc-space-4);
  padding: 0 var(--pc-space-4);
  background: var(--pc-color-surface-default);
  border-bottom: 1px solid var(--pc-color-border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--pc-z-sticky);
}

.pc-shell__mark {
  font-weight: var(--pc-font-weight-semibold);
  color: var(--pc-color-text-primary);
}

.pc-shell__nav {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--pc-space-4);
  flex: 1 1 auto;
}

.pc-shell__nav a {
  color: var(--pc-color-text-secondary);
  text-decoration: none;
  padding: var(--pc-space-2) 0;
  border-bottom: 2px solid transparent;
}

.pc-shell__nav a[aria-current="page"] {
  color: var(--pc-color-text-primary);
  border-bottom-color: var(--pc-color-brand-fill);
}

.pc-shell__user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-space-3);
  color: var(--pc-color-text-secondary);
}

.pc-shell__user button {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-sm);
  padding: var(--pc-space-1) var(--pc-space-3);
  min-height: var(--pc-size-target-min);
  cursor: pointer;
}

#banner:empty {
  display: none;
}

.pc-shell__content {
  flex: 1 1 auto;
  padding: var(--pc-space-6) var(--pc-space-4);
}

#toast:empty {
  display: none;
}

/* ---- pc-empty (design-system.md "States and navigation") ---- */
.pc-empty {
  max-width: 480px;
  margin: var(--pc-space-6) auto;
  text-align: center;
  color: var(--pc-color-text-secondary);
}

.pc-empty__title {
  font-size: var(--pc-text-heading-1-size);
  line-height: var(--pc-text-heading-1-line);
  font-weight: var(--pc-font-weight-semibold);
  color: var(--pc-color-text-primary);
}

/* ---- Auth pages (login) ---- */
.pc-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pc-color-surface-page);
}

.pc-auth__card {
  width: 320px;
  padding: var(--pc-space-6);
  background: var(--pc-color-surface-default);
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-lg);
  text-align: center;
}

.pc-auth__mark {
  font-size: var(--pc-text-heading-1-size);
  line-height: var(--pc-text-heading-1-line);
  font-weight: var(--pc-font-weight-semibold);
  margin-bottom: var(--pc-space-4);
}

/* ---- Dev sign-in (cmd/devstack only, port brief defect #5) ---- */
.pc-auth__card--wide {
  width: 420px;
}

.pc-dev-login__list {
  list-style: none;
  margin: var(--pc-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-2);
}

.pc-button--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pc-size-control-md);
  padding: 0 var(--pc-space-4);
  background: var(--pc-color-brand-fill);
  color: var(--pc-color-brand-on);
  border: none;
  border-radius: var(--pc-radius-sm);
  text-decoration: none;
  font-weight: var(--pc-font-weight-medium);
  cursor: pointer;
}

.pc-button--primary:hover {
  background: var(--pc-color-brand-fill-hover);
}

.pc-form-errors {
  color: var(--pc-color-status-failed-fg);
  margin-bottom: var(--pc-space-3);
}

/* ---- Team screen (design-system.md "pc-table", "pc-toast", "pc-confirm") ---- */
.pc-team__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pc-space-4);
}

.pc-notice {
  padding: var(--pc-space-4);
  background: var(--pc-color-surface-sunken);
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-md);
  color: var(--pc-color-text-secondary);
}

/* ---- pc-card (docs/design/design-system.md "Cards"): the section frame every conversations
   and conversation-page region renders inside — added by this story, the first to need one. */
.pc-card {
  background: var(--pc-color-surface-default);
  border: 1px solid var(--pc-color-border-subtle);
  border-radius: var(--pc-radius-lg);
  padding: var(--pc-space-4);
  margin-bottom: var(--pc-space-4);
}

.pc-card h1,
.pc-card h2 {
  margin-top: 0;
}

/* ---- pc-filters: the conversation list's filter and save-view forms ---- */
.pc-filters,
.pc-filters__save {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--pc-space-3);
  margin-bottom: var(--pc-space-3);
}

.pc-filters label {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-1);
  font-size: var(--pc-text-caption-size);
  color: var(--pc-color-text-secondary);
}

.pc-filters input,
.pc-filters__save input[type="text"] {
  min-height: var(--pc-size-target-min);
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-sm);
  padding: var(--pc-space-1) var(--pc-space-2);
  background: var(--pc-color-surface-default);
  color: var(--pc-color-text-primary);
}

.pc-saved-views {
  display: flex;
  gap: var(--pc-space-3);
  margin-bottom: var(--pc-space-3);
}

/* ---- pc-table: the conversation list's rows ---- */
/* Rubrics (w2-s-rubrics): library table, editor fieldsets. Additive only — nothing above is
   changed. */
.pc-page-header {
  margin-bottom: var(--pc-space-4);
}

.pc-page-header__caption {
  color: var(--pc-color-text-secondary, inherit);
}

.pc-filter-bar {
  display: flex;
  gap: var(--pc-space-3);
  align-items: center;
  margin: var(--pc-space-2) 0;
}

.pc-filter-bar__range a {
  margin-right: var(--pc-space-2);
}

.pc-filter-bar__range a[aria-current="page"] {
  font-weight: var(--pc-font-weight-medium);
}

.pc-table {
  width: 100%;
  border-collapse: collapse;
}

.pc-table th,
.pc-table td {
  text-align: left;
  padding: var(--pc-space-inset-cell-block) var(--pc-space-inset-cell-inline);
  font-size: var(--pc-text-table-size);
  border-bottom: 1px solid var(--pc-color-border-subtle);
}

/* pc-nowrap: a date/time cell (conversations list "Started") never breaks between its date and
   time halves at the space FormatWhen's "2006-01-02 15:04" carries (live-walkthrough defect:
   the column wrapped mid-value in a narrow layout). */
.pc-nowrap {
  white-space: nowrap;
}

.pc-badge {
  display: inline-block;
  padding: 0 var(--pc-space-2);
  margin: 0 var(--pc-space-1) var(--pc-space-1) 0;
  background: var(--pc-color-surface-sunken);
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-sm);
  font-size: var(--pc-text-caption-size);
  line-height: var(--pc-text-caption-line);
  color: var(--pc-color-text-secondary);
}

.pc-badge--provisional {
  color: var(--pc-color-status-uncertain-fg);
}

.pc-button--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pc-size-control-md);
  padding: 0 var(--pc-space-4);
  background: var(--pc-color-surface-default);
  color: var(--pc-color-text-primary);
  border: 1px solid var(--pc-color-border-strong);
  border-radius: var(--pc-radius-sm);
  cursor: pointer;
}

.pc-button--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pc-size-target-min);
  padding: 0 var(--pc-space-2);
  background: transparent;
  color: var(--pc-color-text-link);
  border: none;
  cursor: pointer;
}

.pc-button--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pc-size-control-md);
  padding: 0 var(--pc-space-4);
  background: var(--pc-color-status-failed-fg);
  color: var(--pc-color-text-inverse);
  border: none;
  border-radius: var(--pc-radius-sm);
  cursor: pointer;
}

.pc-field {
  display: block;
  margin-bottom: var(--pc-space-3);
}

.pc-input {
  display: block;
  width: 100%;
  min-height: var(--pc-size-control-md);
  padding: 0 var(--pc-space-3);
  margin-top: var(--pc-space-1);
  background: var(--pc-color-surface-default);
  color: var(--pc-color-text-primary);
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-sm);
}

.pc-fieldset {
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-sm);
  padding: var(--pc-space-3);
  margin-bottom: var(--pc-space-3);
}

.pc-checkbox {
  display: block;
  margin-bottom: var(--pc-space-1);
}

.pc-hint {
  color: var(--pc-color-text-muted);
  font-size: var(--pc-text-caption-size);
  margin-left: var(--pc-space-1);
}

.pc-confirm {
  padding: var(--pc-space-2);
  background: var(--pc-color-surface-sunken);
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-sm);
}

.pc-confirm__text {
  margin: 0 0 var(--pc-space-2);
  color: var(--pc-color-text-secondary);
}

.pc-toast {
  position: fixed;
  right: var(--pc-space-4);
  bottom: var(--pc-space-4);
  max-width: 360px;
  padding: var(--pc-space-3) var(--pc-space-4);
  background: var(--pc-color-surface-raised);
  border: 1px solid var(--pc-color-border-default);
  border-radius: var(--pc-radius-md);
  box-shadow: 0 4px 12px rgb(21 27 35 / .12);
  z-index: var(--pc-z-toast);
}

.pc-toast--error {
  border-color: var(--pc-color-status-failed-fg);
  color: var(--pc-color-status-failed-fg);
}

.pc-toast--warning {
  border-color: var(--pc-color-status-blocked-fg);
  color: var(--pc-color-status-blocked-fg);
}

.pc-table th {
  color: var(--pc-color-text-secondary);
  font-weight: var(--pc-font-weight-medium);
  font-size: var(--pc-text-caption-size);
}

.pc-more {
  display: inline-block;
  margin-top: var(--pc-space-3);
}

/* ---- pc-conv-columns: the conversation page's transcript / evaluations split (W1) ---- */
.pc-conv-columns {
  display: flex;
  gap: var(--pc-space-4);
  align-items: start;
}

.pc-conv-columns > * {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 1023px) {
  .pc-conv-columns {
    flex-direction: column;
  }
}

/* ---- pc-participants ---- */
.pc-participants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-3);
}

/* ---- pc-review (H14/H15: queue + item detail; additive to the shell-only file above,
   per this file's own header, "built by the area stories that need it") ---- */
.pc-review__body {
  display: grid;
  grid-template-columns: minmax(320px, 40%) 1fr;
  gap: var(--pc-space-4);
}

@media (max-width: 960px) {
  .pc-review__body {
    grid-template-columns: 1fr;
  }
}

.pc-tabs {
  display: flex;
  gap: var(--pc-space-4);
  border-bottom: 1px solid var(--pc-color-border-subtle);
  margin-bottom: var(--pc-space-4);
  overflow-x: auto;
}

.pc-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-space-1);
  padding: var(--pc-space-2) 0;
  text-decoration: none;
  color: var(--pc-color-text-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.pc-tabs a[aria-selected="true"] {
  color: var(--pc-color-text-primary);
  border-bottom-color: var(--pc-color-brand-fill);
}

.pc-badge--count {
  display: inline-flex;
  min-width: var(--pc-space-5);
  justify-content: center;
  padding: 0 var(--pc-space-1);
  border-radius: var(--pc-radius-sm);
  background: var(--pc-color-surface-sunken);
  color: var(--pc-color-text-secondary);
  font-size: var(--pc-text-caption-size);
  line-height: var(--pc-text-caption-line);
}

.pc-review__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-1);
}

.pc-review-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-space-3);
  padding: var(--pc-space-3);
  border: 1px solid var(--pc-color-border-subtle);
  border-radius: var(--pc-radius-md);
  background: var(--pc-color-surface-default);
  cursor: pointer;
}

.pc-review-row[aria-current="true"],
.pc-review-row:focus-within {
  border-color: var(--pc-color-focus-ring);
}

.pc-review-row__reason {
  color: var(--pc-color-text-secondary);
}

.pc-review-row__conversation {
  font-family: var(--pc-font-mono);
  color: var(--pc-color-text-muted);
}

.pc-alert {
  padding: var(--pc-space-2) var(--pc-space-3);
  border-radius: var(--pc-radius-sm);
  background: var(--pc-color-surface-sunken);
  color: var(--pc-color-text-secondary);
  margin-bottom: var(--pc-space-3);
}

.pc-error {
  color: var(--pc-color-status-failed-fg);
}

/* ---- pc-player / pc-waveform ---- */
.pc-player {
  position: sticky;
  top: 48px;
  z-index: var(--pc-z-sticky);
}

.pc-waveform audio {
  width: 100%;
}

.pc-waveform__bars {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 48px;
  background: var(--pc-color-surface-sunken);
  border-radius: var(--pc-radius-sm);
  cursor: pointer;
}

.pc-waveform__bars span {
  flex: 1 1 auto;
  background: var(--pc-color-border-strong);
}

.pc-waveform__unavailable {
  color: var(--pc-color-text-muted);
}

/* ---- pc-transcript ---- */
.pc-transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 480px;
  overflow-y: auto;
}

.pc-transcript li {
  display: flex;
  gap: var(--pc-space-2);
  padding: var(--pc-space-1) 0;
  border-bottom: 1px solid var(--pc-color-border-subtle);
}

.pc-transcript__time {
  color: var(--pc-color-text-muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.pc-transcript__speaker {
  color: var(--pc-color-text-secondary);
  flex: 0 0 auto;
  min-width: 120px;
}

/* ---- pc-findings / pc-quotes (evaluations panel, W9) ---- */
.pc-findings {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-findings > li {
  padding: var(--pc-space-2) 0;
  border-bottom: 1px solid var(--pc-color-border-subtle);
}

.pc-quotes {
  margin: var(--pc-space-1) 0 0;
  padding-left: var(--pc-space-4);
  color: var(--pc-color-text-secondary);
  font-style: italic;
}

/* ---- pc-timeline ---- */
.pc-timeline {
  margin: 0;
  padding-left: var(--pc-space-4);
}

/* ---- Rubrics form additions (w2-s-rubrics): .pc-fieldset/.pc-field are already defined above;
   these are the additive bits the rubrics editor needs on top of them. ---- */
.pc-fieldset legend {
  padding: 0 var(--pc-space-2);
  font-weight: var(--pc-font-weight-medium);
}

.pc-field label {
  font-weight: var(--pc-font-weight-medium);
}

.pc-field textarea {
  font-family: monospace;
  min-height: 8em;
}

.pc-help {
  color: var(--pc-color-text-muted);
  font-size: 0.85em;
}

.pc-badge--warning {
  background: var(--pc-color-status-failed-fg, #b45309);
  color: var(--pc-color-brand-on, #fff);
}

.pc-stat-row {
  display: flex;
  gap: var(--pc-space-4);
  flex-wrap: wrap;
}

.pc-stat-row dt {
  font-size: 0.85em;
  color: var(--pc-color-text-secondary, inherit);
}

.pc-stat-row dd {
  margin: 0;
  font-size: 1.25em;
}

.pc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pc-form label {
  display: block;
  margin-top: var(--pc-space-2);
}

.pc-answer {
  margin-bottom: var(--pc-space-2);
}

.pc-citations blockquote {
  margin: var(--pc-space-1) 0;
  padding-left: var(--pc-space-3);
  border-left: 2px solid var(--pc-color-border-default);
}

/* Density tokens keep controls and rows consistent in both display modes. */
:root { --pc-space-inset-cell-block: 10px; --pc-space-inset-cell-inline: 12px; --pc-text-table-size: 14px; }
:root[data-density="compact"] { --pc-size-control-md: 28px; --pc-space-inset-cell-block: 6px; --pc-space-inset-cell-inline: 8px; --pc-text-table-size: 13px; }
.pc-preferences { position: relative; }
.pc-preferences form { position: absolute; right: 0; z-index: var(--pc-z-menu); padding: var(--pc-space-4); background: var(--pc-color-surface-default); border: 1px solid var(--pc-color-border-default); display: grid; gap: var(--pc-space-2); }

.pc-transcript .is-active { background: var(--pc-color-surface-selected); }

/* Workspace refresh: persistent navigation and a readable conversation work surface. */
:root {
  --pc-palette-gray-20: #f7f9fc;
  --pc-palette-gray-900: #202b3c;
  --pc-palette-gray-600: #637186;
  --pc-palette-gray-80: #e2e7f0;
  --pc-palette-blue-600: #455dd8;
  --pc-palette-blue-700: #364bb6;
  --pc-font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --pc-text-body-size: 14px;
  --pc-radius-lg: 12px;
  --pc-size-sidebar: 218px;
  --pc-size-content: 1440px;
}
.pc-shell { display: grid; grid-template-columns: var(--pc-size-sidebar) minmax(0, 1fr); }
.pc-shell__sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--pc-space-8) var(--pc-space-4); background: var(--pc-color-surface-default); border-right: 1px solid var(--pc-color-border-subtle); }
.pc-shell__mark { display: flex; align-items: center; gap: var(--pc-space-3); font-size: 23px; letter-spacing: -.8px; text-decoration: none; padding: 0 var(--pc-space-3) var(--pc-space-8); }
.pc-shell__mark svg { color: var(--pc-color-brand-fill); }
.pc-shell__nav { display: flex; flex-direction: column; flex: 0 0 auto; gap: var(--pc-space-1); }
.pc-shell__nav a { display: block; border: 0; padding: var(--pc-space-3); border-radius: var(--pc-radius-md); font-weight: 500; }
.pc-shell__nav a:hover { background: var(--pc-color-surface-hover); color: var(--pc-color-text-primary); }
.pc-shell__nav a[aria-current="page"] { color: var(--pc-color-text-link); background: var(--pc-color-surface-selected); border: 0; }
.pc-shell__note { margin-top: auto; padding: var(--pc-space-4) var(--pc-space-3) 0; color: var(--pc-color-text-muted); font-size: 12px; max-width: 20ch; }
.pc-shell__workspace { min-width: 0; }
.pc-shell__topbar { min-height: 72px; justify-content: space-between; padding: var(--pc-space-3) var(--pc-space-8); background: var(--pc-color-surface-page); border-bottom: 1px solid var(--pc-color-border-subtle); }
.pc-shell__context { font-weight: 500; font-size: 13px; color: var(--pc-color-text-muted); }
.pc-shell__user { margin-left: auto; font-size: 13px; }
.pc-shell__content { width: 100%; max-width: var(--pc-size-content); margin: 0 auto; padding: var(--pc-space-8); }
.pc-shell__content h1 { font-size: 30px; line-height: 1.2; letter-spacing: -1px; font-weight: 600; margin: 0 0 var(--pc-space-3); }
.pc-shell__content h2 { font-size: 19px; font-weight: 600; letter-spacing: -.35px; margin: 0 0 var(--pc-space-4); }
.pc-shell__content h3 { font-size: 15px; font-weight: 600; }
.pc-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--pc-space-4); margin-bottom: var(--pc-space-8); }
.pc-lead { color: var(--pc-color-text-secondary); max-width: 65ch; margin: 0; line-height: 1.6; }
.pc-button, button { display: inline-flex; align-items: center; justify-content: center; gap: var(--pc-space-2); min-height: var(--pc-size-control-md); border: 1px solid var(--pc-color-border-default); border-radius: var(--pc-radius-md); padding: var(--pc-space-2) var(--pc-space-4); background: var(--pc-color-surface-default); color: var(--pc-color-text-primary); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.pc-button--primary { background: var(--pc-color-brand-fill); border-color: var(--pc-color-brand-fill); color: var(--pc-color-brand-on); }
.pc-button--primary:hover { background: var(--pc-color-brand-fill-hover); color: var(--pc-color-brand-on); }
button:disabled { cursor: wait; opacity: .65; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { min-height: var(--pc-size-control-md); border: 1px solid var(--pc-color-border-default); border-radius: var(--pc-radius-md); padding: var(--pc-space-2) var(--pc-space-3); background: var(--pc-color-surface-default); color: var(--pc-color-text-primary); font: inherit; max-width: 100%; }
textarea { width: 100%; }
label { font-size: 13px; color: var(--pc-color-text-secondary); }
.pc-card { border: 1px solid var(--pc-color-border-subtle); border-radius: var(--pc-radius-lg); background: var(--pc-color-surface-default); padding: var(--pc-space-6); box-shadow: none; margin-bottom: var(--pc-space-4); }
.pc-workspace-filters { margin-bottom: var(--pc-space-6); }
.pc-filters { align-items: end; gap: var(--pc-space-3); margin-bottom: var(--pc-space-3); }
.pc-filters > label { display: flex; flex-direction: column; gap: var(--pc-space-2); }
.pc-advanced-filters { flex: 1 0 100%; order: 2; border-top: 1px solid var(--pc-color-border-subtle); margin-top: var(--pc-space-3); padding-top: var(--pc-space-3); }
.pc-advanced-filters summary { cursor: pointer; color: var(--pc-color-text-secondary); font-size: 13px; padding: var(--pc-space-2) 0; }
.pc-advanced-filters__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: var(--pc-space-4); padding: var(--pc-space-4) 0; }
.pc-advanced-filters__fields > label { display: flex; flex-direction: column; gap: var(--pc-space-2); }
.pc-filters__save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pc-space-2); font-size: 12px; }
.pc-reset-link { padding: var(--pc-space-2); font-size: 13px; }
#rows { overflow-x: auto; border: 1px solid var(--pc-color-border-subtle); border-radius: var(--pc-radius-lg); background: var(--pc-color-surface-default); }
.pc-table { font-size: var(--pc-text-table-size); }
.pc-table th { background: var(--pc-color-surface-default); color: var(--pc-color-text-secondary); font-size: 12px; font-weight: 500; padding: var(--pc-space-4); white-space: nowrap; }
.pc-table td { padding: var(--pc-space-inset-cell-block) var(--pc-space-4); height: 68px; vertical-align: middle; }
.pc-table tr:last-child td { border-bottom: 0; }
.pc-table tbody tr:hover { background: var(--pc-color-surface-hover); }
.pc-conversation-title { display: block; color: var(--pc-color-text-primary); font-weight: 600; text-decoration: none; }
.pc-conversation-title:hover { color: var(--pc-color-text-link); }
.pc-row-subtitle { display: block; font-size: 12px; color: var(--pc-color-text-muted); margin-top: var(--pc-space-1); }
.pc-status { display: inline-flex; align-items: center; gap: var(--pc-space-2); white-space: nowrap; font-size: 12px; color: var(--pc-color-text-secondary); }
.pc-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pc-status--done { color: var(--pc-color-status-done-fg); }
.pc-status--evaluating, .pc-status--processing { color: var(--pc-color-text-link); }
.pc-status--failed, .pc-status--blocked_budget { color: var(--pc-color-status-failed-fg); }
.pc-status--delayed { color: var(--pc-color-text-secondary); }
.pc-empty { padding: var(--pc-space-12) var(--pc-space-6); text-align: center; color: var(--pc-color-text-secondary); }
.pc-empty h2 { color: var(--pc-color-text-primary); }
.pc-conv-columns { gap: var(--pc-space-6); align-items: start; }
.pc-player { position: static; }
.pc-waveform { margin: 0; }
.pc-waveform audio { width: 100%; }
.pc-waveform + .pc-waveform { margin-top: var(--pc-space-4); }
.pc-waveform label { display: flex; align-items: center; gap: var(--pc-space-3); margin-top: var(--pc-space-2); }
.pc-waveform input { flex: 1; accent-color: var(--pc-color-brand-fill); }
#plan { margin-top: var(--pc-space-4); }
#plan ul { padding-left: var(--pc-space-4); color: var(--pc-color-text-secondary); }
.pc-participants { display: flex; flex-wrap: wrap; gap: var(--pc-space-4); list-style: none; padding: 0; }
.pc-participants li { display: grid; gap: var(--pc-space-1); }
.pc-participants li > span { color: var(--pc-color-text-secondary); font-size: 12px; }
.pc-transcript li { display: grid; grid-template-columns: 48px 100px minmax(0,1fr); padding: var(--pc-space-3) 0; line-height: 1.6; }
.pc-transcript__speaker { font-weight: 500; color: var(--pc-color-text-primary); }
.pc-transcript__time { font-size: 12px; color: var(--pc-color-text-muted); }
#banner:has(p) { padding: var(--pc-space-3) var(--pc-space-8); background: var(--pc-color-surface-selected); color: var(--pc-color-text-primary); }
#banner p { margin: 0; }
:root[data-density="compact"] .pc-table td { height: 48px; }
@media (max-width: 900px) {
 .pc-shell { grid-template-columns: 1fr; }
 .pc-shell__sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--pc-color-border-subtle); padding: var(--pc-space-4); }
 .pc-shell__mark { padding: 0 0 var(--pc-space-3); font-size: 20px; }
 .pc-shell__nav { flex-direction: row; flex-wrap: wrap; gap: var(--pc-space-1); }
 .pc-shell__nav a { padding: var(--pc-space-2) var(--pc-space-3); font-size: 13px; }
 .pc-shell__note { display: none; }
 .pc-shell__topbar { position: static; padding: var(--pc-space-3) var(--pc-space-4); min-height: 56px; }
 .pc-shell__content { padding: var(--pc-space-6) var(--pc-space-4); }
 .pc-shell__content h1 { font-size: 26px; }
 .pc-conv-columns { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
 .pc-shell__context { display: none; }
 .pc-shell__user { width: 100%; justify-content: space-between; gap: var(--pc-space-2); }
 .pc-card { padding: var(--pc-space-4); }
 .pc-transcript li { grid-template-columns: 42px minmax(0,1fr); }
 .pc-transcript__text { grid-column: 1 / -1; }
 .pc-page-header .pc-button { width: 100%; }
}
.pc-overview-period { display:flex; justify-content:space-between; color:var(--pc-color-text-secondary); font-size:13px; margin-bottom:var(--pc-space-4); }
.pc-overview-summary { display:grid; grid-template-columns: minmax(200px,1fr) 2fr; align-items:center; background:var(--pc-color-surface-default); border:1px solid var(--pc-color-border-subtle); border-radius:var(--pc-radius-lg); padding:var(--pc-space-8); margin-bottom:var(--pc-space-6); }
.pc-overview-total { display:flex; flex-direction:column; gap:var(--pc-space-2); }
.pc-overview-total strong { font-size:52px; line-height:1; font-weight:500; letter-spacing:-2px; }
.pc-overview-total span { font-size:13px; color:var(--pc-color-text-secondary); }
.pc-overview-metrics { display:grid; grid-template-columns:repeat(3,1fr); margin:0; }
.pc-overview-metrics div { padding-left:var(--pc-space-6); border-left:1px solid var(--pc-color-border-subtle); }
.pc-overview-metrics dt { font-size:13px; color:var(--pc-color-text-secondary); }
.pc-overview-metrics dd { font-size:28px; font-weight:500; margin:var(--pc-space-2) 0 0; }
.pc-overview-actions { display:grid; grid-template-columns:2fr 1fr; gap:var(--pc-space-6); margin-bottom:var(--pc-space-8); }
.pc-next-action { display:flex; gap:var(--pc-space-6); align-items:center; padding:var(--pc-space-6); background:var(--pc-color-surface-selected); border-radius:var(--pc-radius-lg); }
.pc-next-action__count { font-size:42px; line-height:1; color:var(--pc-color-text-link); }
.pc-next-action p { max-width:55ch; color:var(--pc-color-text-secondary); line-height:1.6; margin:0 0 var(--pc-space-4); }
.pc-next-action h2 { margin-bottom:var(--pc-space-2); }
.pc-overview-shortcuts { padding:var(--pc-space-4) 0; }
.pc-overview-shortcuts a { display:block; padding:var(--pc-space-3) 0; text-decoration:none; border-bottom:1px solid var(--pc-color-border-subtle); }
.pc-overview-shortcuts strong { display:block; font-weight:500; color:var(--pc-color-text-primary); }
.pc-overview-shortcuts span { display:block; color:var(--pc-color-text-secondary); font-size:12px; margin-top:var(--pc-space-1); }
.pc-section-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--pc-space-4); margin-bottom:var(--pc-space-4); }
.pc-section-heading h2 { margin:0; }.pc-section-heading a {font-size:13px;}
@media(max-width:700px) {
 .pc-overview-summary {grid-template-columns:1fr;gap:var(--pc-space-6);padding:var(--pc-space-6);}
 .pc-overview-actions {grid-template-columns:1fr;}
 .pc-overview-metrics div {padding-left:var(--pc-space-3);}
 .pc-overview-metrics div:first-child {border-left:0;padding-left:0;}
 .pc-overview-metrics dt {font-size:12px;}
 .pc-overview-period {flex-wrap:wrap;gap:var(--pc-space-2);}
}
.pc-upload-panel { max-width:760px; background:var(--pc-color-surface-default); padding:var(--pc-space-8); border:1px solid var(--pc-color-border-subtle); border-radius:var(--pc-radius-lg); }
.pc-upload-panel form {display:grid;gap:var(--pc-space-4);}
.pc-upload-panel label {display:grid;gap:var(--pc-space-2);}
.pc-file-picker {padding:var(--pc-space-8);border:1px dashed var(--pc-color-border-strong);border-radius:var(--pc-radius-md);color:var(--pc-color-text-primary);font-size:16px;}
.pc-file-picker span {font-size:12px;color:var(--pc-color-text-secondary);}
.pc-upload-panel progress {width:100%;accent-color:var(--pc-color-brand-fill);}
.pc-upload-panel button {justify-self:start;}.pc-upload-manual {margin-top:var(--pc-space-8);font-size:12px;color:var(--pc-color-text-secondary);}
.pc-upload-manual summary {cursor:pointer;margin-bottom:var(--pc-space-4);}

:root { --pc-color-status-done-fg: #237650; }
:root[data-theme="dark"] { --pc-color-status-done-fg: #83cda6; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --pc-color-status-done-fg: #83cda6; } }

.pc-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pc-space-6); margin:var(--pc-space-6) 0; }
.pc-dashboard-grid > section { min-width:0; overflow:auto; }
.pc-dashboard-grid > section:first-child { grid-column:1/-1; }
@media(max-width:900px) { .pc-dashboard-grid { grid-template-columns:minmax(0,1fr); } }
.pc-dashboard-diagnostics { grid-column:1/-1; }
.pc-dashboard-diagnostics > summary { cursor:pointer; font-weight:600; }
.pc-dashboard-diagnostics > summary:focus-visible { outline:2px solid var(--pc-color-focus-ring); outline-offset:4px; }
.pc-dashboard-diagnostics[open] > summary { margin-bottom:var(--pc-space-4); }
.pc-filter-checks{min-width:0;border:1px solid var(--pc-color-border-default);border-radius:8px;padding:12px;}
.pc-filter-checks legend{font-weight:600;padding:0 5px;}
.pc-filter-checks label:has(input[type="checkbox"]){display:flex;align-items:start;gap:8px;}
.pc-filter-checks input[type="checkbox"]{width:auto;flex:none;margin-top:3px;}
.pc-filter-checks__choices{max-height:240px;overflow:auto;margin:12px 0;}
.pc-filter-checks__choices [hidden]{display:none;}
.pc-active-filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
.pc-active-filters:empty{display:none;}
.pc-active-filters a{border:1px solid var(--pc-color-border-default);border-radius:20px;padding:4px 10px;font-size:12px;}
.pc-advanced-filters__fields > .pc-filter-checks { grid-column:1/-1; }
.pc-advanced-filters__fields .pc-filter-checks label:has(input[type="checkbox"]) { display:flex; flex-direction:row; align-items:flex-start; width:auto; gap:8px; line-height:1.5; }
.pc-advanced-filters__fields .pc-filter-checks label input[type="checkbox"] { width:16px; height:16px; flex:0 0 16px; margin-top:3px; }
.pc-filter-checks[data-tag-picker] .pc-filter-checks__choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px; }
.pc-filter-checks:not([data-tag-picker]) { display:flex; flex-wrap:wrap; gap:12px 24px; }
@media(max-width:700px) { .pc-filter-checks[data-tag-picker] .pc-filter-checks__choices { grid-template-columns:minmax(0,1fr); } }
.pc-advanced-filters__fields .pc-filter-checks label[data-tag-choice][hidden] { display:none; }