/* ============================================================
 * U04 token-decouple (PM-010): every colour below routes through a
 * canonical token (tokens-canonical.css loads FIRST, so the fallbacks in
 * var(--x, ...) never fire -- they were dropped during the decouple).
 * Local --ph-* aliases map this drawer's fixed dark-section palette and the
 * revision-"kind" hue vocabulary onto canonical tokens in ONE overridable
 * place. A theme swap that overrides token VALUES restyles this file with
 * zero edits here. Brand accent always = --color-accent (Traffic Orange).
 * ============================================================ */
:root {
  /* dark-section neutrals -> theme-aware ip-gray ramp (all token-routed) */
  --ph-ink-on-dark:    var(--ip-white);      /* primary text on the dark drawer */
  --ph-ink-strong:     var(--ip-gray-200);   /* near-white values */
  --ph-ink-muted:      var(--ip-gray-400);   /* muted labels */
  --ph-ink-dim:        var(--ip-gray-500);   /* dimmer text */
  --ph-ink-faint:      var(--ip-gray-600);   /* faintest text */
  --ph-line:           var(--ip-gray-300);   /* hairline on light */
  --ph-line-dark:      var(--ip-gray-800);   /* divider on dark drawer */
  --ph-line-dark-2:    var(--ip-gray-700);   /* border on dark */
  --ph-surface-dark:   var(--ip-gray-900);   /* dark surfaces */
  --ph-surface-dark-2: var(--ip-black);      /* deepest dark surface */
  --ph-surface-hover:  var(--ip-gray-800);   /* hover on dark */
  --ph-surface-light:  var(--ip-gray-50);    /* light surfaces */

  /* accent (brand Traffic Orange) -- token-routed */
  --ph-accent:         var(--color-accent);
  --ph-accent-strong:  var(--color-accent-strong);

  /* semantic state -- token-routed where a canonical token exists */
  --ph-success:        var(--v-success, #4caf50);
  --ph-success-text:   color-mix(in srgb, var(--v-success, #2e7d32) 72%, #000);   /* on-light success text */
  --ph-danger:         var(--v-error, #d64545);
  --ph-danger-text:    color-mix(in srgb, var(--v-error, #b53d3d) 82%, #000);  /* on-light danger text */
  --ph-danger-strong:  var(--v-error, #d64545);       /* destructive button border */
  --ph-danger-soft:    var(--v-error, #fc8181);       /* destructive text on dark */
  --ph-warning:        var(--v-warning, #ffc107);
  --ph-warning-text:   color-mix(in srgb, var(--v-warning, #b38600) 72%, #000);   /* on-light amber text */
  --ph-gcal-connected: var(--v-success, #4caf50);
  --ph-kind-genesis:   var(--v-success, #4caf50);         /* author-genesis green */
  --ph-kind-edit:      var(--color-accent);    /* author-edit orange */

  /* ----------------------------------------------------------------
   * JUSTIFIED HEX SURVIVORS (the only raw hex left in this file).
   * These are the revision-"kind" + diff-stat hue vocabulary. The
   * canonical token layer has NO blue/purple/teal roles, so there is
   * no token to route them through without collapsing distinct kind
   * cues (genesis-blue vs restore-amber vs draft-purple vs merge-
   * magenta) that the revision timeline depends on to read at a glance.
   * Per the unit spec, these stay as local alias VALUES -- one
   * overridable place, zero raw hex in any rule body. A theme that
   * wants to re-hue the kind vocabulary overrides these 11 lines.
   * ---------------------------------------------------------------- */
  --ph-success-dark:   #15803d;   /* deep-green pill / merge accent */
  --ph-kind-restore:   #2196f3;   /* author-restore blue */
  --ph-kind-restore2:  #b45309;   /* restore pill amber */
  --ph-kind-draft:     #7c3aed;   /* reviewer-draft purple */
  --ph-kind-merge:     #9c27b0;   /* merge-accepted magenta */
  --ph-kind-genesis2:  #2563eb;   /* genesis pill legacy blue */
  --ph-stat-mod:       #1565c0;   /* modified / info blue */
  --ph-stat-mov:       #6a1b9a;   /* moved purple */
  --ph-stat-meta:      #6b7280;   /* meta gray-blue */
  --ph-info-soft:      #1f7a26;   /* generated-banner green text */

  /* aliases that fold onto the survivors above (no new hex) */
  --ph-kind-merge2:    var(--ph-success-dark);
  --ph-kind-draft2:    var(--ph-kind-draft);
  --ph-kind-merge3:    var(--ph-kind-merge);
  --ph-stat-add:       var(--ph-success-text);
  --ph-stat-rem:       var(--ph-danger-text);
  --ph-info:           var(--ph-stat-mod);

  /* dark-theme card bg fallbacks -> theme ip ramp (token-routed) */
  --ph-dark-theme-bg:  var(--ip-black);
  --ph-dark-theme-bg2: var(--ip-gray-900);
}

/* Plan History Button (header) */
.plan-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}
.plan-history-btn:hover {
  background: var(--bg-hover, rgba(255,255,255,0.06));
  border-color: var(--accent-color);
}
.plan-history-btn svg {
  flex-shrink: 0;
}

/* Plan History Drawer */
.plan-history-drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: 360px;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-default);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: transform 0.25s ease;
}
.plan-history-drawer.hidden {
  display: none;
}

.drawer-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawer-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.drawer-header .close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
  padding: 4px;
}
.drawer-header .close-btn:hover {
  color: var(--text-primary);
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

/* SP-111: Plan History Controls (search + sort) */
.plan-history-controls {
  padding: 0 0 12px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.plan-history-search-row {
  flex: 1;
  min-width: 0;
  display: flex;
}

.plan-history-search {
  width: 100%;
  padding: 7px 10px;
  font-size: 0.82rem;
  background: var(--ph-ink-on-dark);
  border: 1px solid var(--ph-line);
  border-radius: 6px;
  color: var(--ph-surface-dark);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.plan-history-search:focus {
  border-color: var(--ph-accent);
}
.plan-history-search::placeholder {
  color: var(--ph-ink-muted);
}

.plan-history-sort-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.plan-sort-btn {
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--ph-line-dark-2);
  background: transparent;
  color: var(--ph-ink-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.plan-sort-btn:hover {
  border-color: var(--ph-accent);
  color: var(--ph-accent);
}
.plan-sort-btn.active {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-color: var(--ph-accent);
  color: var(--ph-accent);
  font-weight: 600;
}

/* SP-111: No-match empty state */
.plan-empty-state .plan-empty-no-match {
  color: var(--ph-ink-muted);
  font-size: 0.85rem;
}

/* SP-111: !important overrides for instrument-paper.css global resets */
.plan-history-search { border-radius: 6px !important; }
.plan-sort-btn { border-radius: 4px !important; }
.plan-sort-btn { transition: border-color 0.15s, color 0.15s, background 0.15s !important; }
.plan-history-search { transition: border-color 0.15s !important; }

/* SP-459 (2026-05-26): Workspace filter dropdown — light-mode treatment.
   Sits above the light-mode plan cards in the saved-plans sidebar, so the
   pill must match the surrounding card surface, NOT the dark-section
   palette. Square corners, brand-system inputs, hover/focus animation,
   live-refresh on cross-source workspace changes.
   SP-458 prior treatment shipped dark (var(--ph-surface-dark) bg / var(--ph-ink-strong) text / 6px radius)
   which read as a black pill floating on a white card — Beau caught it
   2026-05-26 and asked for full redo. */
.plan-workspace-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 12px;
  margin: 0;
}
.plan-workspace-filter__label {
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-ink-faint);
  flex-shrink: 0;
}
.plan-workspace-select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  padding: 7px 28px 7px 10px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ph-surface-dark);
  background-color: var(--ph-ink-on-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23DD5100' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 5px;
  border: 1px solid var(--ph-line);
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.plan-workspace-select:hover {
  border-color: var(--ph-accent);
  color: var(--ph-accent);
}
.plan-workspace-select:focus-visible {
  outline: none;
  border-color: var(--ph-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.plan-workspace-select option {
  background-color: var(--ph-ink-on-dark);
  color: var(--ph-surface-dark);
  font-family: inherit;
}

/* SP-459: subtle entry fade so the dropdown slides into place when it first
   appears (e.g. after loadAccessibleWorkspaces resolves post-auth). */
@keyframes planWorkspaceFilterIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
.plan-workspace-filter {
  animation: planWorkspaceFilterIn 180ms ease-out both;
}

/* F-035 D-1: Plan history drawer two-tab layout (My Plans vs Shared with me).
   Dark-section rule: hardcoded colors only — see JarganApiDemo/CLAUDE.md.
   Drawer background resolves to var(--ph-surface-dark) in the dark theme via
   var(--bg-secondary) on .plan-history-drawer. */
.plan-history-tabs {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 0 0 10px 0;
  margin: 0 0 4px 0;
  border-bottom: 1px solid var(--ph-line-dark);
}
.plan-history-tab {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ph-ink-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px; /* overlap container border so active underline meets it */
  white-space: nowrap;
}
.plan-history-tab:hover {
  color: var(--ph-line-dark); /* was var(--ph-ink-on-dark) — invisible on light-theme drawer background */
}
.plan-history-tab.active {
  color: var(--ph-accent); /* was var(--ph-ink-on-dark) — brand accent visible on both light + dark backgrounds */
  border-bottom-color: var(--ph-accent);
  font-weight: 600;
}
.plan-history-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--v-ink, #ffffff) 10%, transparent);
  color: var(--ph-ink-muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
}
.plan-history-tab.active .plan-history-tab-count {
  color: var(--ph-accent);
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* F-035 D-1: Shared-plan access-level badges (hardcoded colors per dark-section rule) */
.plan-history-access-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.plan-history-access-badge-edit {
  background: var(--ph-accent);
  color: var(--ph-ink-on-dark);
}
.plan-history-access-badge-comment {
  background: var(--ph-line-dark-2);
  color: var(--ph-ink-on-dark);
}
.plan-history-access-badge-view {
  background: var(--ph-surface-dark);
  color: var(--ph-ink-muted);
}

/* F-035 D-1: Shared-plan "From: <owner>" owner line */
.plan-history-owner-line {
  padding-left: 0;
  margin: 2px 0 4px 0;
  color: var(--ph-ink-muted);
  font-size: 0.78rem;
}

/* F-035 D-1: Shared-plan card hover — lighter highlight than owned cards */
.plan-item-shared {
  /* Shared cards reuse .plan-item base styles; this is a marker class for
     future permission-aware rendering (Phase D-3). No layout overrides today. */
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.plan-item {
  padding: 0.75rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.plan-item:hover {
  background: var(--bg-hover, rgba(255,255,255,0.04));
  border-color: var(--accent-color);
}

.plan-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan-item-name {
  flex: 1;
  min-width: 0; /* SP-460: allow shrinking inside the flex parent */
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
  /* SP-460 (2026-05-26): wrap up to 2 lines instead of silently clipping
     mid-character. Plan names like "Community Service Streaming 01" were
     rendering as "Comm..." in the row header, dropping all signal of which
     plan you were looking at. Two-line clamp preserves readability + still
     bounds vertical growth so the row doesn't expand without limit. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.25;
}
.plan-item-header-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.plan-rename-btn,
.plan-delete-btn,
.plan-share-btn,
.plan-manage-access-btn,
.plan-refresh-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.plan-rename-btn:hover,
.plan-refresh-btn:hover {
  color: var(--ph-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
/* sp-revision-history-ux-r4: spin while a refresh is in flight */
.plan-refresh-btn.is-refreshing svg { animation: plan-refresh-spin 700ms linear infinite; }
@keyframes plan-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* F-034: send-for-review icon button — matches rename/delete glyph buttons */
.plan-share-btn,
.plan-manage-access-btn,
.plan-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
}
.plan-share-btn svg,
.plan-manage-access-btn svg,
.plan-refresh-btn svg {
  display: block;
  width: 14px;
  height: 14px;
}
.plan-share-btn:hover,
.plan-manage-access-btn:hover {
  color: var(--ph-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.plan-rename-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--ph-accent);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: inherit;
  font-weight: 600;
  padding: 2px 6px;
  outline: none;
}
.plan-delete-btn {
  font-size: 1.2rem;
}
.plan-delete-btn:hover {
  color: var(--ph-danger-soft);
  background: rgba(252, 129, 129, 0.1);
}
.plan-item-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding-left: 26px;
}
.plan-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-left: 26px;
}
.plan-item-count {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.plan-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-item-action {
  font-size: 0.78rem;
  color: var(--accent-color);
  font-weight: 500;
}
.plan-export-btn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: border-color 0.15s, color 0.15s;
}
.plan-export-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* SP-290: Update button — shown only on the currently-loaded plan card */
.plan-update-btn {
  padding: 2px 8px;
  background: var(--ph-accent);
  border: 1px solid var(--ph-accent);
  border-radius: 4px;
  color: var(--ph-ink-on-dark);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: opacity 0.15s;
}
.plan-update-btn:hover {
  opacity: 0.85;
}
.plan-update-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* SP-360: History button on plan card — same shape as Update/JGN, neutral palette */
.plan-history-btn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--ph-ink-faint);
  border-radius: 4px;
  color: var(--ph-line);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.15s;
  margin-left: 4px;
}
.plan-history-btn:hover {
  background: var(--ph-surface-hover);
  border-color: var(--ph-accent);
  color: var(--ph-accent);
}

/* SP-050: Deleting state for plan cards */
.plan-item-deleting {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s;
}
.plan-delete-spinner {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* WF-127: collapse-and-fade on the deleted card, followed by a FLIP
   transform-transition applied to surviving siblings so the reorder slides
   smoothly instead of snapping. The keyframe ends at max-height:0 /
   margin:0 so the gap closes by the time the card is removed from DOM. */
.plan-item-removing {
  overflow: hidden;
  pointer-events: none;
  animation: planItemRemove 320ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes planItemRemove {
  0% {
    opacity: 1;
    transform: scale(1);
    max-height: 800px;
  }
  60% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 0;
    transform: scale(0.96);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}
.plan-item-reflowing {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.plan-empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
}
.plan-empty-state.hidden {
  display: none;
}

/* WF-127: friendlier empty state for the "just deleted my last plan" case.
   Distinct from the cold-start empty state so the user feels a beat of
   resolution rather than "oh right, still empty." */
.plan-empty-state--cleared {
  padding: 3rem 1.25rem;
  animation: planEmptyClearedFadeIn 280ms ease-out;
}
.plan-empty-state--cleared p {
  margin: 0 0 0.5rem 0;
  color: var(--ph-line-dark);
  font-size: 15px;
  font-weight: 500;
}
.plan-empty-state--cleared .plan-empty-state-hint {
  color: var(--ph-ink-dim);
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 1.25rem 0;
}
.plan-empty-state--cleared .plan-empty-state-cta {
  background: var(--ph-accent);
  color: var(--ph-ink-on-dark);
  border: 0;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 150ms;
}
.plan-empty-state--cleared .plan-empty-state-cta:hover {
  background: var(--ph-accent-strong);
}
@keyframes planEmptyClearedFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Plan Detail Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 650px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.modal-content h3 {
  margin: 0 0 1rem;
  color: var(--text-primary);
}
.modal-content .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
}
.modal-content .close-btn:hover {
  color: var(--text-primary);
}

/* Deliverables table inside modal */
.deliverables-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.deliverables-table th,
.deliverables-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-default);
}
.deliverables-table th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.deliverables-table td {
  color: var(--text-primary);
}

/* Plan action buttons */
.btn-plan-action {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--ph-danger-strong);
  border-radius: 6px;
  color: var(--ph-danger-soft);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.btn-plan-action:hover {
  background: var(--ph-danger-strong);
  color: var(--ph-ink-on-dark);
}

/* Temporary: instrument-paper.css !important override (remove when SP-133 lands) */
#planDetailModal .modal-content { border-radius: 8px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; }
#planDetailModal .close-btn { transition: color 150ms !important; }

/* ===========================
   Plan Item Expandable Drawer
   =========================== */

/* Override: plan-item is no longer one big click target when drawer is present */
.plan-item { cursor: default; }

/* Header becomes the toggle target */
.plan-item-header {
  cursor: pointer;
}
.plan-item-header:hover .plan-item-name {
  color: var(--accent-color);
}

/* SP-181: GCal calendar icon in header (replaces chevron) */
.plan-item-gcal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-right: 6px;
  transition: opacity 0.2s ease;
}
.plan-item-gcal-icon svg {
  width: 18px;
  height: 18px;
}
.plan-item.expanded .plan-item-gcal-icon {
  opacity: 0.8;
}

/* SP-181: GCal indicator moved to header — footer styles removed */

/* SP-183: Loading overlay — theme-aware backdrop */
.plan-drawer-loading {
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .plan-drawer-loading {
  background: rgba(0, 0, 0, 0.85);
}

/* Expandable drawer container */
.plan-item-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 0;
}
.plan-item.expanded .plan-item-drawer {
  max-height: 2000px;
  opacity: 1;
  overflow: visible;
}

/* Drawer inner content */
.plan-drawer-content {
  padding: 10px 0 4px;
  border-top: 1px solid var(--border-default);
  margin-top: 8px;
}

/* Drawer section (Plan Overview / GCal) */
.plan-drawer-section {
  margin-bottom: 10px;
}
.plan-drawer-section:last-child {
  margin-bottom: 0;
}

.plan-drawer-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Stat row inside drawer */
.plan-drawer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 6px;
}
.plan-drawer-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
}
.plan-drawer-stat-label {
  color: var(--text-muted);
}
.plan-drawer-stat-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* Channel pills inside drawer */
.plan-drawer-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.plan-drawer-channel-pill {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-hover, rgba(255,255,255,0.04));
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* SP-140: Voice pills inside drawer (same layout as channel pills) */
.plan-drawer-voices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* GCal connection status */
.plan-gcal-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  margin-bottom: 6px;
}
.gcal-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gcal-status-dot.connected { background: var(--ph-gcal-connected); }
.gcal-status-dot.disconnected { background: var(--text-muted); }
.gcal-status-dot.pending { background: var(--ph-accent); }
.gcal-status-dot.stale { background: var(--ph-accent); }

.plan-gcal-status-text {
  color: var(--text-secondary);
}

/* GCal action buttons row */
.plan-gcal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.plan-gcal-btn {
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.plan-gcal-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.plan-gcal-btn.primary {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--ph-ink-on-dark);
}
.plan-gcal-btn.primary:hover {
  background: var(--ph-accent-strong);
  border-color: var(--ph-accent-strong);
}
.plan-gcal-btn.danger {
  border-color: var(--ph-danger-strong);
  color: var(--ph-danger-soft);
}
.plan-gcal-btn.danger:hover {
  background: var(--ph-danger-strong);
  color: var(--ph-ink-on-dark);
}

/* GCal connected calendar name — shown below "Google Calendar" section title */
.plan-gcal-calendar-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ph-ink-on-dark);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* GCal last synced timestamp */
.plan-gcal-last-sync {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* GCal sync loading overlay on plan drawer */
.plan-item-drawer.gcal-loading {
  position: relative;
}
.plan-item-drawer.gcal-loading::after {
  content: 'Syncing with Google Calendar\2026';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: var(--ph-ink-on-dark);
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 0 0 8px 8px;
  animation: gcal-loading-pulse 1.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes gcal-loading-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* "Open" action in footer — make it look clickable, stand out from drawer toggle */
.plan-item-action {
  cursor: pointer;
}
.plan-item-action:hover {
  text-decoration: underline;
}

/* ===========================
   SP-116: GCal OAuth Modal
   Dark theme — matches auth-modal.css design system
   =========================== */

/* Reusable entrance animation (mirrors authScaleIn from auth-modal.css) */
@keyframes gcalScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Overlay ---- */
.gcal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 8px;
}
.gcal-modal-overlay.hidden {
  display: none;
}

/* ---- Card ---- */
.gcal-modal-card {
  background: var(--ph-surface-dark);
  border: 2px solid var(--ph-accent);
  border-radius: 8px;
  padding: 28px 24px;
  max-width: 400px;
  width: calc(100% - 48px);
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: gcalScaleIn 250ms ease both;
}

/* ---- Close button ---- */
.gcal-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--ph-ink-faint);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: color 150ms;
}
.gcal-modal-close:hover {
  color: var(--ph-ink-on-dark);
}

/* ---- Step panels ---- */
.gcal-modal-step {
  text-align: center;
}
.gcal-modal-step.hidden {
  display: none;
}

.gcal-modal-icon {
  margin-bottom: 16px;
}

/* ---- Title ---- */
.gcal-modal-title {
  margin: 0 0 20px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ph-ink-on-dark);
}

/* ---- Description / hint text ---- */
.gcal-modal-desc {
  font-size: 0.8rem;
  color: var(--ph-ink-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ---- Permissions list ---- */
.gcal-modal-permissions {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
}
.gcal-modal-permissions li {
  font-size: 0.82rem;
  color: var(--ph-line);
  padding: 6px 0 6px 24px;
  position: relative;
}
.gcal-modal-permissions li::before {
  content: '\2713';
  position: absolute;
  left: 4px;
  color: var(--ph-success);
  font-weight: 700;
}

.gcal-modal-hint {
  font-size: 0.8rem;
  color: var(--ph-ink-muted);
  margin-top: 12px;
  line-height: 1.5;
}

/* Section labels — orange uppercase (matches auth modal section headers) */
.gcal-section-label {
  color: var(--ph-accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 8px;
}

/* Step 2 left-aligned layout */
#gcalStepConfigure {
  text-align: left;
}

/* Config section spacing */
.gcal-config-section {
  margin-bottom: 18px;
}

/* Timing radios */
.gcal-config-radios {
  display: flex;
  gap: 20px;
  margin-bottom: 8px;
}
.gcal-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ph-line);
  cursor: pointer;
}
.gcal-radio input[type="radio"] {
  accent-color: var(--ph-accent);
  width: 14px;
  height: 14px;
}

/* Calendar mode tab toggle */
.gcal-calendar-mode {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  background: var(--ph-surface-dark-2);
  border-radius: 6px;
  padding: 3px;
}
.gcal-mode-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.8rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ph-ink-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gcal-mode-btn.active {
  background: var(--ph-accent);
  color: var(--ph-ink-on-dark);
  font-weight: 600;
}

/* Calendar list */
.gcal-calendar-list {
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 4px;
}
.gcal-calendar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ph-line);
  transition: background 0.12s;
}
.gcal-calendar-item:hover {
  background: var(--ph-surface-hover);
}
.gcal-calendar-item.selected {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--ph-ink-on-dark);
}
.gcal-calendar-item-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gcal-calendar-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcal-loading {
  color: var(--ph-ink-faint);
  font-size: 0.82rem;
  padding: 10px 0;
  text-align: center;
}

/* ---- Text inputs (new cal name, time) ---- */
.gcal-text-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.85rem;
  background: var(--ph-surface-dark);
  border: 1px solid var(--ph-line-dark);
  border-radius: 6px;
  color: var(--ph-ink-on-dark);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.gcal-text-input:focus {
  border-color: var(--ph-accent);
}
.gcal-text-input::placeholder {
  color: var(--ph-ink-faint);
}

/* Time input */
.gcal-time-input {
  margin-top: 8px;
}
.gcal-time-input.hidden {
  display: none;
}

/* auth-form-group inside gcal modal (dark bg — uses auth-modal pattern with gcal-specific overrides) */
.gcal-modal-card .auth-form-group {
  margin-bottom: 0;
}
.gcal-modal-card .auth-form-group input {
  background: var(--ph-surface-dark);
  border: 1px solid var(--ph-line-dark);
  color: var(--ph-ink-on-dark);
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 0.88rem;
  width: 100%;
  box-sizing: border-box;
}
.gcal-modal-card .auth-form-group input::placeholder {
  color: var(--ph-ink-faint);
}
.gcal-modal-card .auth-form-group input:focus {
  outline: none;
  border-color: var(--ph-accent);
}

.gcal-modal-card .auth-btn-primary {
  margin-top: 8px;
}

/* Bug 2 fix: browse/create panel visibility */
#gcalBrowsePanel.hidden,
#gcalCreatePanel.hidden {
  display: none;
}

/* auth-error .hidden state — GCal modal uses .hidden class, auth modal uses inline style */
.gcal-modal-card .auth-error.hidden {
  display: none;
}

/* ============================================
   BORDER-RADIUS / BOX-SHADOW / TRANSITION OVERRIDES
   styles-instrument-paper.css loads unconditionally and sets
   * { border-radius: 0 !important; box-shadow: none !important; transition: none !important; }
   which kills all rounded corners, shadows, and transitions.
   GCal modal MUST have its own !important declarations to restore them.
   (Mirrors auth-modal.css lines 414-449 for #authModal)
   ============================================ */
.gcal-modal-card { border-radius: 8px !important; }
.gcal-modal-card .auth-btn-primary { border-radius: 6px !important; }
.gcal-modal-card .auth-error { border-radius: 6px !important; }
.gcal-modal-card .auth-form-group input { border-radius: 6px !important; }
.gcal-modal-card .gcal-text-input { border-radius: 6px !important; }
.gcal-calendar-mode { border-radius: 6px !important; }
.gcal-mode-btn { border-radius: 4px !important; }
.gcal-calendar-item { border-radius: 6px !important; }
.gcal-calendar-item-color { border-radius: 50% !important; }
.gcal-radio input[type="radio"] { border-radius: 50% !important; }

/* Box-shadow overrides */
.gcal-modal-card { box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; }

/* Transition overrides */
.gcal-modal-card .auth-btn-primary { transition: background 100ms, transform 100ms, box-shadow 100ms !important; }
.gcal-mode-btn { transition: background 0.15s, color 0.15s !important; }
.gcal-calendar-item { transition: background 0.12s !important; }
.gcal-modal-close { transition: color 150ms !important; }
.gcal-text-input { transition: border-color 0.15s !important; }

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .gcal-modal-card {
    padding: 20px 16px;
    width: calc(100% - 24px);
  }
  .gcal-config-radios {
    flex-direction: column;
    gap: 8px;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .plan-history-drawer {
    width: 100%;
    max-width: 100vw;
  }
  .plan-history-btn span {
    display: none;
  }
  .plan-history-btn {
    padding: 6px;
  }
  .plan-drawer-stats {
    flex-direction: column;
    gap: 2px;
  }
  .plan-gcal-actions {
    flex-direction: column;
  }
  .plan-gcal-btn {
    text-align: center;
  }
  /* SP-111: Compact sort pills on mobile */
  .plan-history-sort-row {
    gap: 3px;
  }
  .plan-sort-btn {
    padding: 4px 7px;
    font-size: 0.68rem;
  }
}

/* ============================================
   SP-149: Voice pack save/discard sticky banner
   ============================================ */
.voice-pack-save-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ph-surface-dark);
  border-top: 2px solid var(--ph-accent);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 500;
  font-size: 0.82rem;
  transition: transform 0.2s ease;
}
.voice-pack-save-banner.hidden {
  display: none;
}
.voice-pack-save-label {
  color: var(--ph-ink-muted);
  flex: 1;
}
.voice-pack-save-btn {
  background: var(--ph-accent);
  color: var(--ph-ink-on-dark);
  border: none;
  padding: 5px 16px;
  border-radius: 4px !important;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
.voice-pack-save-btn:hover {
  background: var(--ph-accent-strong);
}
.voice-pack-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.voice-pack-discard-btn {
  background: transparent;
  color: var(--ph-ink-faint);
  border: 1px solid var(--ph-line-dark-2);
  padding: 5px 12px;
  border-radius: 4px !important;
  cursor: pointer;
  font-size: 0.82rem;
}
.voice-pack-discard-btn:hover {
  color: var(--ph-ink-muted);
  border-color: var(--ph-ink-faint);
}

/* SP-284: Push-drawer behavior — when Saved Plans drawer is open on desktop,
   shrink the results panel so header tools (#savePlanBtn / #openPlanHistory /
   #exportJgnBtn) remain visible and clickable. Mobile keeps full-width drawer.
   border-box is required: legacy/instrument-paper rules set width: 100% with
   default content-box, so padding-right alone would extend the panel outward
   rather than pulling the right-aligned tools left. */
.results-panel {
  transition: padding-right 0.25s ease;
}
body.plan-drawer-open .results-panel {
  box-sizing: border-box;
  padding-right: 360px;
}
@media (max-width: 768px) {
  body.plan-drawer-open .results-panel {
    padding-right: 0;
  }
}

/* ============================================
   F-036.F-list: Proposals in plan-history drawer
   ============================================ */
.plan-item-proposal-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--ph-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 10px;
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: middle;
}
.plan-item-proposal-badge { border-radius: 10px !important; }
.plan-proposals-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.plan-proposal-row {
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: 4px;
}
.plan-proposal-row { border-radius: 4px !important; }
.plan-proposal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.plan-proposal-status--submitted {
  padding: 1px 6px;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--ph-accent);
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: 600;
}
.plan-proposal-status--submitted { border-radius: 3px !important; }
.plan-proposal-meta {
  color: var(--text-secondary);
  font-size: 0.8em;
}
.plan-proposal-footer {
  display: flex;
  justify-content: flex-end;
}
.plan-proposal-review-btn {
  padding: 4px 10px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  border-radius: 3px;
  font-size: 0.8em;
  cursor: not-allowed;
  opacity: 0.6;
}
.plan-proposal-review-btn { border-radius: 3px !important; }
.plan-proposal-review-btn:not([disabled]) {
  cursor: pointer;
  color: var(--ph-accent);
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  opacity: 1;
}
.plan-proposal-empty,
.plan-proposal-loading {
  padding: 8px 0;
  color: var(--text-secondary);
  font-size: 0.85em;
  font-style: italic;
  text-align: center;
}

/* F-036.F-diff: diff modal */
.proposal-diff-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.proposal-diff-modal-overlay.hidden { display: none; }
.proposal-diff-modal-card {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  max-width: 960px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow: hidden;
}
.proposal-diff-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}
.proposal-diff-modal-header h2 {
  margin: 0;
  color: var(--ph-accent);
  font-size: 1.1em;
}
.proposal-diff-modal-sub {
  color: var(--text-secondary);
  font-size: 0.85em;
  margin-top: 2px;
}
.proposal-diff-modal-close {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0 4px;
}
.proposal-diff-modal-close:hover { color: var(--ph-accent); }
.proposal-diff-modal-body { padding: 20px; overflow-y: auto; }
.proposal-diff-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.proposal-diff-col {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 12px;
}
.proposal-diff-col h3 {
  margin: 0 0 8px 0;
  color: var(--ph-accent);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.proposal-diff-col--proposed {
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}
.proposal-diff-field {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 0.9em;
}
.proposal-diff-field:last-child { border-bottom: none; }
.proposal-diff-field-label { color: var(--text-secondary); }
.proposal-diff-field-value { color: var(--text-primary); }
.proposal-diff-meta-row {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.proposal-diff-meta-row label {
  color: var(--text-secondary);
  font-size: 0.85em;
}
.proposal-diff-note {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 8px;
  font-family: inherit;
  font-size: 0.9em;
  resize: vertical;
}
.proposal-diff-note:focus {
  border-color: var(--ph-accent);
  outline: none;
}
.proposal-diff-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-default);
}
.proposal-diff-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
}
.proposal-diff-btn--ghost { color: var(--text-secondary); }
.proposal-diff-btn--ghost:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.proposal-diff-btn--reject {
  border-color: color-mix(in srgb, var(--ph-danger) 50%, transparent);
  color: var(--ph-danger);
}
.proposal-diff-btn--reject:hover {
  background: color-mix(in srgb, var(--ph-danger) 12%, transparent);
  border-color: var(--ph-danger);
}
.proposal-diff-btn--merge {
  border-color: color-mix(in srgb, var(--ph-warning) 50%, transparent);
  color: var(--ph-warning);
}
.proposal-diff-btn--merge:hover {
  background: color-mix(in srgb, var(--ph-warning) 12%, transparent);
  border-color: var(--ph-warning);
}
.proposal-diff-btn--accept {
  background: var(--ph-accent);
  color: var(--ph-ink-on-dark);
  border-color: var(--ph-accent);
}
.proposal-diff-btn--accept:hover {
  background: var(--ph-accent-strong);
  border-color: var(--ph-accent-strong);
}
/* instrument-paper.css !important overrides for diff modal */
.proposal-diff-modal-card { border-radius: 12px !important; }
.proposal-diff-col { border-radius: 4px !important; }
.proposal-diff-note { border-radius: 4px !important; }
.proposal-diff-btn { border-radius: 4px !important; }
.proposal-diff-modal-card { box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; }

@media (max-width: 720px) {
  .proposal-diff-columns { grid-template-columns: 1fr; }
}

/* SP-341.A: Reviewer pre-submit change summary modal */
.reviewer-submit-review-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1550;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.reviewer-submit-review-modal-overlay.hidden { display: none; }
.reviewer-submit-review-modal-card {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
  overflow: hidden;
}
.reviewer-submit-review-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}
.reviewer-submit-review-modal-header h2 {
  margin: 0;
  color: var(--ph-accent);
  font-size: 1.1em;
}
.reviewer-submit-review-modal-sub {
  color: var(--text-secondary);
  font-size: 0.85em;
  margin-top: 2px;
}
.reviewer-submit-review-modal-close {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0 4px;
}
.reviewer-submit-review-modal-close:hover { color: var(--ph-accent); }
.reviewer-submit-review-modal-body {
  padding: 20px;
  overflow-y: auto;
}
.reviewer-submit-review-modal-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-left-width: 3px;
  border-left-style: solid;
}
.reviewer-submit-review-modal-section--meta { border-left-color: var(--border-default); }
.reviewer-submit-review-modal-section--added { border-left-color: var(--ph-success); }
.reviewer-submit-review-modal-section--removed { border-left-color: var(--ph-danger); }
.reviewer-submit-review-modal-section--modified { border-left-color: var(--ph-warning); }

/* F-036 (2026-04-26): inline net-delta callout on the Deliverable count
   row of the Plan replaced card. Matches calendar-banner color scheme
   (orange brand for net change, green/red for added/removed). */
.reviewer-submit-modal-section-delta {
  margin-left: 6px;
  font-weight: 600;
  font-size: 0.92em;
}
.reviewer-submit-modal-section-delta--added { color: var(--ph-success-text); }
.reviewer-submit-modal-section-delta--removed { color: var(--ph-danger-text); }
.reviewer-submit-modal-section-delta--unchanged { color: var(--ph-ink-dim); font-weight: 400; }
.reviewer-submit-review-modal-section h3 {
  margin: 0 0 8px 0;
  color: var(--ph-accent);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reviewer-submit-review-modal-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text-primary);
  font-size: 0.9em;
}
.reviewer-submit-review-modal-section li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-default);
}
.reviewer-submit-review-modal-section li:last-child { border-bottom: none; }
.reviewer-submit-review-modal-nested {
  list-style: none;
  padding: 4px 0 0 12px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88em;
}
.reviewer-submit-review-modal-nested li { border-bottom: none; padding: 2px 0; }
.reviewer-submit-review-modal-overflow { font-style: italic; color: var(--text-secondary); }
.reviewer-submit-review-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-default);
}
.reviewer-submit-review-modal-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
}
.reviewer-submit-review-modal-btn--ghost { color: var(--text-secondary); }
.reviewer-submit-review-modal-btn--ghost:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.reviewer-submit-review-modal-btn--primary { background: var(--ph-accent); color: var(--ph-ink-on-dark); border-color: var(--ph-accent); }
.reviewer-submit-review-modal-btn--primary:hover { background: var(--ph-accent-strong); border-color: var(--ph-accent-strong); }
/* instrument-paper !important border-radius overrides (SP-337 pattern) */
.reviewer-submit-review-modal-card { border-radius: 12px !important; }
.reviewer-submit-review-modal-section { border-radius: 4px !important; }
.reviewer-submit-review-modal-btn { border-radius: 4px !important; }
.reviewer-submit-review-modal-card { box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; }

@media (max-width: 600px) {
  .reviewer-submit-review-modal-card { max-width: 100%; border-radius: 8px !important; }
  .reviewer-submit-review-modal-footer { flex-direction: column-reverse; }
  .reviewer-submit-review-modal-btn { width: 100%; text-align: center; }
}

/* SP-342.A: Author diff modal — per-deliverable changelist */
.proposal-diff-modal-changelist {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proposal-diff-modal-changelist-loading {
  color: var(--text-secondary);
  font-size: 0.85em;
  font-style: italic;
  padding: 8px 0;
}
.proposal-diff-modal-changelist-section {
  background: var(--bg-secondary);
  border-left: 3px solid transparent;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 10px 12px;
}
.proposal-diff-modal-changelist-section--added {
  border-left-color: var(--ph-success);
}
.proposal-diff-modal-changelist-section--removed {
  border-left-color: var(--ph-danger);
}
.proposal-diff-modal-changelist-section--modified {
  border-left-color: var(--ph-warning);
}
.proposal-diff-modal-changelist-section h4 {
  margin: 0 0 6px 0;
  font-size: 0.9em;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.proposal-diff-modal-changelist-section h4 .count {
  color: var(--text-secondary);
  font-weight: normal;
}
.proposal-diff-modal-changelist-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proposal-diff-modal-changelist-item {
  font-size: 0.85em;
  color: var(--text-primary);
  padding: 3px 0;
  border-bottom: 1px solid var(--border-default);
}
.proposal-diff-modal-changelist-item:last-child {
  border-bottom: none;
}
.proposal-diff-modal-changelist-item-title {
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 2px;
}
.proposal-diff-modal-changelist-item-fields {
  list-style: none;
  padding-left: 12px;
  color: var(--text-secondary);
  font-size: 0.8em;
}
.proposal-diff-modal-changelist-overflow {
  font-style: italic;
  color: var(--text-secondary);
  padding: 4px 0;
}
.proposal-diff-modal-changelist-empty {
  color: var(--text-secondary);
  font-style: italic;
  padding: 12px;
  text-align: center;
}
/* instrument-paper !important border-radius override (SP-342.A) */
.proposal-diff-modal-changelist-section { border-radius: 4px !important; }

/* SP-360 Plan Revision Timeline ------------------------------------ */
/* The plan drawer background is dark (var(--ph-surface-dark) / var(--ph-surface-dark)) so all text
   colors here MUST be hardcoded per JarganApiDemo contrast rules. */
.plan-revision-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ph-line-dark);
}
.plan-revision-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.plan-revision-loading,
.plan-revision-empty,
.plan-revision-more {
  color: var(--ph-ink-muted);
  font-size: 12px;
  padding: 8px 4px;
  font-style: italic;
}
.plan-revision-row {
  background: var(--ph-surface-dark);
  border: 1px solid var(--ph-line-dark);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-revision-row-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.plan-revision-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ph-ink-on-dark);
  background: var(--ph-ink-faint);
}
.plan-revision-pill-authorgenesis { background: var(--ph-kind-genesis2); }
.plan-revision-pill-authoredit    { background: var(--ph-line-dark-2); }
.plan-revision-pill-authorrestore { background: var(--ph-warning-text); }
.plan-revision-pill-reviewerdraft { background: var(--ph-kind-draft); }
.plan-revision-pill-mergeaccepted { background: var(--ph-success-dark); }
.plan-revision-sha {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ph-accent);
  cursor: help;
}
.plan-revision-when {
  color: var(--ph-ink-muted);
  font-size: 11px;
  margin-left: auto;
}
.plan-revision-row-body {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.plan-revision-author {
  color: var(--ph-ink-on-dark);
  font-size: 12px;
  font-weight: 500;
}
.plan-revision-msg {
  color: var(--ph-line);
  font-size: 12px;
  flex: 1 1 0;
  overflow-wrap: anywhere;
}
.plan-revision-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--ph-success-dark);
  color: var(--ph-ink-on-dark);
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.plan-revision-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.plan-revision-diff-btn,
.plan-revision-restore-btn {
  background: transparent;
  border: 1px solid var(--ph-ink-faint);
  color: var(--ph-ink-on-dark);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.plan-revision-diff-btn:hover,
.plan-revision-restore-btn:hover {
  background: var(--ph-line-dark);
  border-color: var(--ph-accent);
  color: var(--ph-accent);
}
.plan-revision-restore-btn { color: var(--ph-danger); border-color: var(--ph-danger); }
.plan-revision-restore-btn:hover { color: var(--ph-ink-on-dark); background: var(--ph-danger); border-color: var(--ph-danger); }

.plan-revision-diff-card {
  max-width: 760px;
  width: 92%;
}
/* SP-450: theme-aware SHA chip. Was hardcoded background:var(--ph-surface-dark) — the
   dark boxes around 'd84bd98 → 7b89652' on the light modal. Now uses the
   theme's tertiary bg so the chip is a light gray pill in light themes. */
.plan-revision-diff-card .proposal-diff-modal-sub code {
  background: var(--bg-tertiary);
  color: var(--ph-accent);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.plan-revision-diff-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
/* SP-450: wholesale-event banner — one compact line. '69 deliverables
   added' → 'Schedule generated · 69 deliverables'. Leads with the WHAT.
   Kept to a single 28px-ish row so a simple generation event's popover
   stays small (user feedback: 'this is entirely too big'). */
/* SP-460 (2026-05-26): dropped white-space:nowrap. At 256px container
   width (revision-history popover row) the banner was clipping mid-word
   ("Schedule regenerated · 10 → 10 delivera..."). Wrap to a second line
   if needed; flex-wrap keeps the icon attached to the first line. */
.diff-event-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  margin-bottom: 2px;
  word-break: break-word;
  line-height: 1.35;
}
.diff-event-banner__icon { width: 14px; height: 14px; flex-shrink: 0; }
.diff-event-banner__icon svg { width: 14px; height: 14px; display: block; }
.diff-event-banner__label { font-weight: 700; }
.diff-event-banner__detail {
  color: var(--text-secondary);
  font-size: 11.5px;
}
.diff-event-banner__detail::before {
  content: '·';
  margin-right: 4px;
  color: var(--text-muted);
}
.diff-event-banner--generated {
  background: color-mix(in srgb, var(--v-success, #4caf50) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--v-success, #4caf50) 40%, transparent);
  color: var(--ph-info-soft);
}
.diff-event-banner--regenerated {
  background: color-mix(in srgb, var(--v-info, #2196f3) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--v-info, #2196f3) 40%, transparent);
  color: var(--ph-stat-mod);
}

/* SP-450: theme-aware summary pill. Was hardcoded var(--ph-surface-hover) bg / var(--ph-ink-on-dark) text —
   rendered as a dark box on the light modal in every light theme. Now uses
   theme tokens so it follows the active theme. */
.plan-revision-diff-summary-pill {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.18));
}
.plan-revision-diff-summary-pill--added { color: var(--ph-success-dark); border-color: var(--ph-success-dark); }
.plan-revision-diff-summary-pill--removed { color: var(--ph-danger); border-color: var(--ph-danger); }
.plan-revision-diff-summary-pill--modified { color: var(--ph-warning-text); border-color: var(--ph-warning-text); }

.plan-revision-diff-section {
  margin-bottom: 18px;
}
.plan-revision-diff-section h3 {
  color: var(--ph-accent);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* SP-450: diff-meta block lives inside the light modal — was hardcoded
   dark (var(--ph-surface-dark) list bg, var(--ph-line-dark)/var(--ph-surface-hover) borders). Theme-aware now. */
.plan-revision-diff-meta-empty {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
.plan-revision-diff-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-tertiary);
}
.plan-revision-diff-meta-row {
  display: grid;
  grid-template-columns: 140px 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
}
.plan-revision-diff-meta-row:last-child { border-bottom: none; }
.plan-revision-diff-meta-field {
  color: var(--text-secondary);
  font-weight: 600;
}
.plan-revision-diff-meta-from {
  color: var(--ph-danger);
  word-break: break-word;
}
.plan-revision-diff-meta-arrow {
  color: var(--ph-ink-faint);
}
.plan-revision-diff-meta-to {
  color: var(--ph-success-dark);
  word-break: break-word;
}

/* ===========================
   SP-414: Plan card 4-tab drawer layout (icon + label, responsive hide)
   =========================== */

/* Tab bar — equal-width flex children with icons + labels. Labels hide below a
   container breakpoint so narrow cards fall back to icon-only without overflow. */
.plan-item-tabs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0 0 10px 0;
  border-bottom: 1px solid var(--ph-line-dark);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* flex:1 children guarantee we never need scroll, but belt + braces */
}

.plan-item-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px 9px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  /* SP-414 Bug 2: plan card bg resolves to var(--ph-ink-on-dark) in light themes, so hardcode
     medium-gray base for readable contrast on both light and dark surfaces.
     CSS var() fallbacks don't help when the variable IS defined — see
     CLAUDE.md SPA Contrast & Theme Rules (SP-020 incident). */
  color: var(--ph-ink-faint);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
  font-family: inherit;
  min-width: 0;
  overflow: hidden;
}
.plan-item-tab:hover {
  color: var(--ph-line-dark);
}
.plan-item-tab.active {
  color: var(--ph-accent);
  border-bottom-color: var(--ph-accent);
  font-weight: 600;
}

/* Tab icon — always visible, regardless of narrow-card label hiding. */
.tab-icon {
  flex-shrink: 0;
  display: block;
  width: 15px;
  height: 15px;
}

/* Tab label — visible by default, hidden at narrow card widths. */
.tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Count badge — stays visible in both icon-only and icon+label modes. */
.plan-item-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 0.68rem;
  background: color-mix(in srgb, var(--v-ink, #ffffff) 10%, transparent);
  color: var(--ph-ink-muted);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.plan-item-tab.active .plan-item-tab-count {
  color: var(--ph-accent);
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* Calendar tab — icon-only, right-aligned. Does NOT stretch to fill like the
   text tabs; it hugs its icon and sits flush right. */
.plan-item-tab.plan-item-tab-calendar {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
}

/* GCal-connected state: calendar icon tints green (success). */
.plan-item-tab.plan-item-tab-calendar.gcal-connected {
  color: var(--ph-success);
}
.plan-item-tab.plan-item-tab-calendar.gcal-connected.active {
  color: var(--ph-success);
  border-bottom-color: var(--ph-success);
}

/* Narrow card: hide text labels, show icons only. Threshold tuned for phones
   and compressed drawers. Conservative; most desktop drawers stay above 400px. */
@media (max-width: 400px) {
  .tab-label { display: none; }
  .plan-item-tab-count { margin-left: 0; }
}

/* Tab panes - only the active pane renders. Instant switch, no transition. */
.plan-item-tab-pane {
  display: none;
}
.plan-item-tab-pane.active {
  display: block;
}

/* Details-pane action row - Update + JGN buttons grouped at bottom of Details.
   SP-414 Bug 7: both buttons must share the same visual weight — same padding,
   same font-size, same line-height. The buttons are aligned to baseline so the
   glyph + text line up regardless of which one has extra padding from its
   hover/disabled state. */
.plan-drawer-details-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.plan-drawer-details-actions .plan-update-btn,
.plan-drawer-details-actions .plan-export-btn {
  /* Enforce identical sizing across the two footer-sized buttons so one
     doesn't look taller than the other. */
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  box-sizing: border-box;
}

/* Collapsed-card reviewer pill - appears next to plan name when _reviewerCount > 0.
   Subtle to avoid competing with the proposal badge (which is brand-orange). */
.plan-item-reviewer-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: color-mix(in srgb, var(--v-ink, #ffffff) 8%, transparent);
  color: var(--ph-line);
  border: 1px solid var(--ph-line-dark-2);
  border-radius: 10px;
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Clickable proposal badge - inherits previous styling, add pointer cursor */
.plan-item-proposal-badge[data-open-reviewers="true"] {
  cursor: pointer;
}
.plan-item-proposal-badge[data-open-reviewers="true"]:hover {
  background: color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* Reviewers-tab pane - the .plan-share-strip is now inside here */
.plan-item-tab-pane-reviewers .plan-share-strip {
  margin-top: 4px;
}

/* History-tab pane - the revision section used to carry a top border + top margin
   to set itself off from the stack above. Inside its own tab pane we don't need
   those separators; override. */
.plan-item-tab-pane-history .plan-revision-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ============================================
   SP-450: Compact single-line revision row
   ============================================
   Replaces the SP-360 stacked layout. Each compact row fits in ≤44px so
   the drawer can show ~10 revisions in a 480px viewport without scroll.
   Long BU-202 multi-clause messages ("renamed X → Y, 1 channel changed,
   2 deliverables moved") truncate with an ellipsis; full text appears
   on hover (desktop) or tap (mobile). Drawer bg is dark
   (var(--ph-surface-dark) / var(--ph-surface-dark)) so all text colors are hardcoded per
   JarganApiDemo/CLAUDE.md SPA Contrast & Theme Rules. */

/* SP-450 v2: theme-aware compact row. The drawer's --bg-secondary resolves
   to var(--ph-surface-light) in default light, var(--ph-surface-light) in instrument-paper, var(--ph-surface-light) in
   pastel-mondrian, and var(--ph-dark-theme-bg2) in dark — so hardcoded dark row backgrounds
   were illegible in 3 of 4 themes. Use color-mix against the drawer bg so
   the row stands out subtly in EITHER mode without baking in a palette. */
.plan-revision-row--compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.08));
  border-radius: 5px;
  background: var(--bg-primary);
  min-height: 32px;
  position: relative;
  color: var(--text-primary);
}
.plan-revision-row--compact + .plan-revision-row--compact { margin-top: 4px; }
.plan-revision-row--compact:hover {
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
  border-color: var(--border-default, rgba(0, 0, 0, 0.18));
}

/* Kind dot — replaces the bulky uppercase pill as the primary kind cue */
.plan-revision-kind-dot {
  flex-shrink: 0;
  /* SP-474 (2026-05-28): shrunk from 8px to 2px (25% of prior width, i.e.
     -75%). After SP-473 dropped the redundant uppercase kind pill, the dot
     was carrying more visual weight than its kind-indicator role needs. The
     title attribute (set in renderRevisionRow per SP-473) keeps the kind name
     discoverable on hover. */
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--ph-ink-dim);
}
.plan-revision-row--author-genesis .plan-revision-kind-dot { background: var(--ph-success); }
.plan-revision-row--author-edit    .plan-revision-kind-dot { background: var(--ph-accent); }
.plan-revision-row--author-restore .plan-revision-kind-dot { background: var(--ph-kind-restore); }
.plan-revision-row--reviewer-draft .plan-revision-kind-dot { background: var(--ph-kind-draft); }
.plan-revision-row--merge-accepted .plan-revision-kind-dot { background: var(--ph-kind-merge); }

/* Compact pill: shrink the SP-360 pill so it fits the 32px row */
.plan-revision-row--compact .plan-revision-pill {
  padding: 1px 6px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Latest badge — mirrors the Blazor BU-202 inline pill so the
   most-recent row stays visually distinct without a 2nd line of UI. */
.plan-revision-latest-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ph-accent);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
}

/* When: friendly date, kept terse. Margin-left:0 overrides the
   SP-360 margin-left:auto so the action group can claim it instead. */
.plan-revision-row--compact .plan-revision-when {
  flex-shrink: 0;
  margin-left: 0;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

/* Message wrap — takes the remaining row width and ellipsises overflow.
   min-width:0 is REQUIRED for `text-overflow: ellipsis` to engage inside
   a flex child (without it the child grows to fit content). */
.plan-revision-msg-wrap {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  cursor: help;
}
.plan-revision-row--compact .plan-revision-msg {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  flex: none;
}
/* SP-475: 'by <author>' inline reads as metadata (muted, italic) so the eye
   distinguishes "no custom message" rows from rows with real commit text. */
.plan-revision-row--compact .plan-revision-msg--author-only {
  color: var(--text-muted);
  font-style: italic;
}

/* SP-450 v3 / SP-472 fix: Popover. Default state is HIDDEN.
   SP-472 (2026-05-28): switched from position:absolute to position:fixed
   because the popover was being clipped on its left edge by
   .plan-revision-timeline's overflow-y:auto (per CSS spec, overflow-y
   != visible forces overflow-x to clip too). Coordinates are computed
   by JS on mouseenter of the wrap (see positionRevisionPopover() in
   app.js) so the popover anchors to the wrap's right edge but escapes
   the timeline's clip box. */
.plan-revision-msg-popover {
  display: none;
  position: fixed;
  z-index: 50;
  min-width: 240px;
  max-width: min(320px, 90vw);
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.18));
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  color: var(--text-primary);
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
}
.plan-revision-msg-wrap:hover .plan-revision-msg-popover,
.plan-revision-msg-wrap:focus-within .plan-revision-msg-popover,
.plan-revision-row--is-expanded .plan-revision-msg-popover {
  display: block;
}
.plan-revision-msg-popover__msg { display: block; }
.plan-revision-msg-popover__author {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

/* Compact actions: 24px icon-only buttons, always visible at the right edge */
.plan-revision-row--compact .plan-revision-row-actions {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  margin-left: auto;
  justify-content: flex-end;
}
.plan-revision-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  font-size: 0;  /* hide any legacy text node that the SP-360 buttons would have rendered */
}
.plan-revision-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.06));
  border-color: var(--border-default, rgba(0, 0, 0, 0.2));
}
.plan-revision-icon-btn:focus-visible {
  outline: 2px solid var(--ph-accent);
  outline-offset: 1px;
}
.plan-revision-icon-btn svg {
  display: block;
}

/* Restore button keeps its red destructive color (mirrors SP-360 intent) */
.plan-revision-row--compact .plan-revision-restore-btn { color: var(--ph-danger); }
.plan-revision-row--compact .plan-revision-restore-btn:hover {
  color: var(--ph-ink-on-dark);
  background: var(--ph-danger);
  border-color: var(--ph-danger);
}

/* Tighten the timeline now that rows are compact. max-height bumped to
   480px so ~10 ≤44px rows fit before the inner scroll engages. */
.plan-item-tab-pane-history .plan-revision-timeline,
.plan-revision-timeline {
  gap: 0;
  max-height: 480px;
}

/* Mobile: hover doesn't exist — tap toggles row--is-expanded which
   reveals the popover. Bump tap targets to 28px so the action buttons
   meet the 44px-touch heuristic when combined with row padding. */
@media (max-width: 480px) {
  .plan-revision-msg-wrap:hover .plan-revision-msg-popover { display: none; }
  .plan-revision-row--is-expanded .plan-revision-msg-popover { display: block; }
  .plan-revision-icon-btn { width: 28px; height: 28px; }
}

/* SP-450 v3: row-anchored inline diff popover. Replaces the legacy SP-360
   full-screen "Revision diff" modal for the default click flow — shift-click
   the diff icon still opens the modal for the long-changelist case. */
.plan-revision-diff-popover {
  margin: 4px 0 8px 0;
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.18));
  border-left: 3px solid var(--ph-accent);
  border-radius: 5px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  animation: planRevisionDiffPopoverIn 140ms ease-out;
}
@keyframes planRevisionDiffPopoverIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.plan-revision-diff-popover-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* SP-460: allow header to wrap when the row is narrow */
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.08));
}
.plan-revision-diff-popover-title {
  font-weight: 600;
  color: var(--text-primary);
  /* SP-460 (2026-05-26): explicit min-width:0 so flex children can shrink,
     and word-break so long plan names wrap instead of pushing the SHA pill
     off-screen or clipping the popover. Title can run two lines if needed;
     popover height grows. */
  min-width: 0;
  flex: 1 1 auto;
  word-break: break-word;
  line-height: 1.3;
}
.plan-revision-diff-popover-sha {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
  padding: 1px 6px;
  border-radius: 3px;
}
.plan-revision-diff-popover-close {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
}
.plan-revision-diff-popover-close:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.06));
}
.plan-revision-diff-popover-body {
  padding: 8px 10px;
}
.plan-revision-diff-popover-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.plan-revision-diff-popover-pill {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-tertiary, rgba(0, 0, 0, 0.06));
  color: var(--text-secondary);
}
.plan-revision-diff-popover-pill--added    { background: color-mix(in srgb, var(--v-success, #4caf50) 14%, transparent); color: var(--ph-info-soft); }
.plan-revision-diff-popover-pill--removed  { background: color-mix(in srgb, var(--v-error, #d64545) 14%, transparent); color: var(--ph-danger-text); }
.plan-revision-diff-popover-pill--modified { background: color-mix(in srgb, var(--color-accent) 12%, transparent);  color: var(--ph-accent-strong); }

.plan-revision-diff-popover-section + .plan-revision-diff-popover-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-default, rgba(0, 0, 0, 0.08));
}
.plan-revision-diff-popover-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.plan-revision-diff-popover-meta-list,
.plan-revision-diff-popover-deliv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.45;
}
.plan-revision-diff-popover-meta-list li,
.plan-revision-diff-popover-deliv-list li {
  margin: 0;
  padding: 2px 0;
  word-break: break-word;
}
.plan-revision-diff-popover-meta-field { font-weight: 600; }
.plan-revision-diff-popover-meta-from  { color: var(--text-muted); text-decoration: line-through; }
.plan-revision-diff-popover-meta-to    { color: var(--ph-accent); }
.pp-deliv-overflow { color: var(--text-muted); font-style: italic; padding-top: 4px; }

/* SP-450 v5: plan-change bucket chip vocabulary. One chip = one changed
   field on a deliverable (channel / voice / date / stage / etc.) or one
   add/remove of an entire deliverable. The bucket's accent color comes
   in via --chip-color (set by inline style from the JS bucket table). */
.plan-change-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--chip-color) 14%, transparent);
  color: var(--chip-color);
  flex-shrink: 0;
  cursor: help;
}
.plan-change-chip + .plan-change-chip { margin-left: 3px; }
.plan-change-chip__icon { width: 13px; height: 13px; }
.plan-change-chip__icon svg { width: 13px; height: 13px; display: block; }
.plan-change-chip__overlay {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--chip-color);
  color: var(--ph-ink-on-dark);
  font-size: 9px;
  font-weight: 800;
  line-height: 11px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.plan-change-chip--added    { /* color from --chip-color (green) */ }
.plan-change-chip--removed  { /* color from --chip-color (red) */ }
.plan-change-chip--modified { /* color from --chip-color (orange) */ }

/* Chip row in the Plan-meta section (single horizontal strip) */
.plan-change-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

/* Deliverable row: [bucket-chip] [label] [field-chips] */
.pp-deliv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.pp-deliv-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.pp-deliv-chips {
  display: inline-flex;
  flex-shrink: 0;
  gap: 3px;
  margin-left: auto;
}
.plan-revision-diff-popover-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

/* ─── SP-476: revision history row redesign ────────────────────────────────
   Replaces the SP-450 compact-flex layout with a grid-based card that
   carries kind via a 3px left bar, compact relative time, and a click-to-
   expand inline detail panel. All new selectors use .rev-card / .rev-row__ /
   .rev-detail__ namespaces so they coexist with the legacy
   .plan-revision-* rules (the article carries both class sets — the new
   selectors win via order). */

.plan-revision-timeline {
  /* Re-declare so the SP-476 block leaves the timeline in a single declared
     state. Other rules in this file may bump max-height; that still wins
     because they appear later in source — see line ~2467. We just need the
     border-radius + bg so the new card layout sits in a defined frame. */
  background: var(--bg-primary);
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.08));
  border-radius: 6px;
}

/* Article — outer container for one revision row + its inline detail panel.
   Overrides SP-450 .plan-revision-row--compact's flex layout by re-declaring
   display + the structural properties. */
/* `article.rev-card` (specificity 0,0,1,1: element+class) already outranks the
   SP-450 `.plan-revision-row--compact` rules (0,0,1,0) the article also carries,
   so these structural overrides win on specificity alone -- no !important needed.
   border-radius is left to the styles-instrument-paper.css `* { border-radius:0
   !important }` reset (which already forces 0), so no radius declaration here. */
article.rev-card {
  --rev-bar-color: var(--text-muted);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "head    restore"
    "detail  detail";
  background: var(--bg-primary);
  border: 0;
  border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.06));
  padding: 0;
  margin: 0;
  /* CRITICAL: .plan-revision-timeline is flex column with max-height. Without
     flex-shrink:0, 25+ cards squish below their content height, clipping
     time/body/chev text inside each head. */
  flex-shrink: 0;
  min-height: 38px;
  align-items: stretch;
  gap: 0;
}
article.rev-card:last-child { border-bottom: 0; }
article.rev-card:hover { background: var(--bg-primary); }

/* Kind color per row */
article.rev-card[data-kind="author-genesis"]  { --rev-bar-color: var(--ph-success); }
article.rev-card[data-kind="author-edit"]     { --rev-bar-color: var(--ph-accent); }
article.rev-card[data-kind="author-restore"]  { --rev-bar-color: var(--ph-kind-restore); }
article.rev-card[data-kind="reviewer-draft"]  { --rev-bar-color: var(--ph-kind-draft); }
article.rev-card[data-kind="merge-accepted"]  { --rev-bar-color: var(--ph-kind-merge); }

/* Head — clickable region (role=button). Named grid-areas so absent
   children (e.g. .rev-row__latest on non-most-recent rows) collapse their
   column without shifting the rest of the layout. */
.rev-card__head {
  grid-area: head;
  display: grid;
  grid-template-columns: 3px 44px auto 1fr auto;
  grid-template-areas: "bar time badge body chev";
  align-items: center;
  column-gap: 10px;
  min-height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.rev-row__bar    { grid-area: bar; }
.rev-row__time   { grid-area: time; }
.rev-row__latest { grid-area: badge; }
.rev-row__body   { grid-area: body; }
.rev-row__chev   { grid-area: chev; }
.rev-card__head:hover { background: rgba(0, 0, 0, 0.025); }
.rev-card__head:focus-visible {
  outline: 2px solid var(--accent-jargan);
  outline-offset: -2px;
}
article.rev-card[data-open="true"] .rev-card__head { background: rgba(0, 0, 0, 0.035); }

/* Left bar — full-height kind cue */
.rev-row__bar {
  align-self: stretch;
  background: var(--rev-bar-color);
  transition: background 0.12s ease;
}

/* Time — compact, tabular monospace */
.rev-row__time {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-align: left;
}

/* Latest badge — only on most-recent row */
.rev-row__latest {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-jargan);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  border-radius: 3px;
  flex-shrink: 0;
}

/* Body — message or "by {author}" */
.rev-row__body {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rev-row__body--author-only {
  color: var(--text-muted);
  font-style: italic;
}

/* Chevron — expand affordance */
.rev-row__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  color: var(--text-muted);
  transition: transform 0.16s ease, color 0.12s ease;
  flex-shrink: 0;
}
.rev-card__head:hover .rev-row__chev { color: var(--text-secondary); }
article.rev-card[data-open="true"] .rev-row__chev {
  transform: rotate(180deg);
  color: var(--accent-jargan);
}

/* Restore — destructive icon-button sibling of head */
.rev-row__restore {
  grid-area: restore;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 8px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ph-danger);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  flex-shrink: 0;
}
.rev-row__restore:hover {
  background: color-mix(in srgb, var(--ph-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--ph-danger) 32%, transparent);
}
.rev-row__restore:focus-visible {
  outline: 2px solid var(--ph-danger);
  outline-offset: 1px;
}

/* Detail — inline expansion below head */
.rev-detail {
  grid-area: detail;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-default, rgba(0, 0, 0, 0.06));
  animation: rev-detail-in 200ms ease-out;
}
.rev-detail[hidden] { display: none; }
.rev-detail__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px 13px;
  border-left: 3px solid var(--rev-bar-color);
}

.rev-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  font-size: 11.5px;
}
.rev-detail__when { color: var(--text-primary); font-weight: 500; }
.rev-detail__who  { color: var(--text-muted); }
.rev-detail__kind {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rev-bar-color);
  background: color-mix(in srgb, var(--rev-bar-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rev-bar-color) 32%, transparent);
  border-radius: 3px;
  margin-left: auto;
}

.rev-detail__msg {
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.rev-detail__diff {
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.08));
  border-radius: 4px;
  padding: 10px 12px;
  min-height: 38px;
  line-height: 1.5;
}
.rev-detail__diff--loading { color: var(--text-muted); font-style: italic; }
.rev-detail__diff--empty   { color: var(--text-muted); }
.rev-detail__stats { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.rev-detail__stat  { font-variant-numeric: tabular-nums; font-weight: 500; }
.rev-detail__stat--add { color: var(--ph-success-text); }
.rev-detail__stat--rem { color: var(--ph-danger-text); }
.rev-detail__stat--mod { color: var(--ph-stat-mod); }
.rev-detail__stat--mov { color: var(--ph-stat-mov); }

.rev-detail__actions { display: flex; justify-content: flex-end; }
.rev-detail__restore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ph-danger) 42%, transparent);
  border-radius: 4px;
  color: var(--ph-danger);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rev-detail__restore:hover { background: color-mix(in srgb, var(--ph-danger) 10%, transparent); border-color: var(--ph-danger); }
.rev-detail__restore svg { width: 13px; height: 13px; }

@keyframes rev-detail-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dark theme */
[data-theme="dark"] article.rev-card {
  background: var(--bg-primary);
  /* [data-theme="dark"] article.rev-card (0,1,1,1) outranks the base
     article.rev-card rule (0,0,1,1) which is no longer !important. */
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .rev-card__head:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] article.rev-card[data-open="true"] .rev-card__head { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .rev-detail { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .rev-detail__diff {
  background: var(--bg-primary);
  border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .rev-detail { animation: none; }
  .rev-card__head,
  .rev-row__chev,
  .rev-row__restore,
  .rev-detail__restore { transition: none; }
}

/* SP-476 follow-up: rev-detail diff section + deliverable list styling */
.rev-detail__section { display: flex; flex-direction: column; gap: 6px; }
.rev-detail__section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.rev-detail__stat--meta { color: var(--ph-stat-meta); }
.rev-detail__deliv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rev-detail__deliv {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.08));
  border-radius: 4px;
  padding: 5px 8px;
  line-height: 1.3;
}
.rev-detail__deliv-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 3px;
  flex-shrink: 0;
}
.rev-detail__deliv--add .rev-detail__deliv-glyph { color: var(--ph-success-text); background: rgba(46, 125, 50, 0.10); }
.rev-detail__deliv--rem .rev-detail__deliv-glyph { color: var(--ph-danger-text); background: rgba(198, 40, 40, 0.10); }
.rev-detail__deliv--mod .rev-detail__deliv-glyph { color: var(--ph-stat-mod); background: rgba(21, 101, 192, 0.10); }
.rev-detail__deliv-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-detail__deliv-more {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 8px;
}

/* SP-476 follow-up #2: plain-text change lines replace icon-only chips so
   the diff actually says what changed without requiring a hover. */
.rev-detail__deliv {
  align-items: flex-start;
}
.rev-detail__deliv-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.rev-detail__deliv-label {
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rev-detail__deliv-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.rev-detail__changes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rev-detail__change {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.rev-detail__change--more {
  color: var(--text-muted);
  font-style: italic;
}
.rev-detail__change-from,
.rev-detail__change-to {
  font-variant-numeric: tabular-nums;
}
.rev-detail__change-from { color: var(--ph-danger-text); }
.rev-detail__change-to   { color: var(--ph-success-text); font-weight: 500; }

.rev-detail__meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rev-detail__meta-line {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.08));
  border-radius: 4px;
  padding: 5px 8px;
  line-height: 1.4;
}
.rev-detail__meta-field {
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 4px;
}