/* 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-color, #333);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  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, #DD5100);
}
.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, #1a1a1a);
  border-left: 1px solid var(--border-color, #333);
  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-color, #333);
  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, #e0e0e0);
}
.drawer-header .close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary, #999);
  line-height: 1;
  padding: 4px;
}
.drawer-header .close-btn:hover {
  color: var(--text-primary, #e0e0e0);
}

.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: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.plan-history-search:focus {
  border-color: #DD5100;
}
.plan-history-search::placeholder {
  color: #999;
}

.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 #444;
  background: transparent;
  color: #999;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.plan-sort-btn:hover {
  border-color: #DD5100;
  color: #DD5100;
}
.plan-sort-btn.active {
  background: rgba(221, 81, 0, 0.15);
  border-color: #DD5100;
  color: #DD5100;
  font-weight: 600;
}

/* SP-111: No-match empty state */
.plan-empty-state .plan-empty-no-match {
  color: #999;
  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; }

/* 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 #1a1a1a in the dark theme via
   var(--bg-secondary, #1a1a1a) 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 #333;
}
.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: #999;
  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: #333; /* was #fff — invisible on light-theme drawer background */
}
.plan-history-tab.active {
  color: #DD5100; /* was #fff — brand accent visible on both light + dark backgrounds */
  border-bottom-color: #DD5100;
  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: rgba(255, 255, 255, 0.1);
  color: #999;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
}
.plan-history-tab.active .plan-history-tab-count {
  color: #DD5100;
  background: rgba(221, 81, 0, 0.18);
}

/* 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: #DD5100;
  color: #ffffff;
}
.plan-history-access-badge-comment {
  background: #444444;
  color: #ffffff;
}
.plan-history-access-badge-view {
  background: #222222;
  color: #999999;
}

/* F-035 D-1: Shared-plan "From: <owner>" owner line */
.plan-history-owner-line {
  padding-left: 0;
  margin: 2px 0 4px 0;
  color: #999999;
  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, #121212);
  border: 1px solid var(--border-color, #333);
  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, #DD5100);
}

.plan-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plan-item-name {
  flex: 1;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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, #666);
  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: #DD5100;
  background: rgba(221, 81, 0, 0.1);
}
/* 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: #DD5100;
  background: rgba(221, 81, 0, 0.1);
}
.plan-rename-input {
  width: 100%;
  background: var(--bg-secondary, #1a1a1a);
  border: 1px solid #DD5100;
  border-radius: 4px;
  color: var(--text-primary, #e0e0e0);
  font-size: inherit;
  font-weight: 600;
  padding: 2px 6px;
  outline: none;
}
.plan-delete-btn {
  font-size: 1.2rem;
}
.plan-delete-btn:hover {
  color: #fc8181;
  background: rgba(252, 129, 129, 0.1);
}
.plan-item-meta {
  font-size: 0.85rem;
  color: var(--text-secondary, #999);
  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, #666);
}
.plan-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-item-action {
  font-size: 0.78rem;
  color: var(--accent-color, #DD5100);
  font-weight: 500;
}
.plan-export-btn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  color: var(--text-secondary, #999);
  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, #DD5100);
  color: var(--accent-color, #DD5100);
}

/* SP-290: Update button — shown only on the currently-loaded plan card */
.plan-update-btn {
  padding: 2px 8px;
  background: #DD5100;
  border: 1px solid #DD5100;
  border-radius: 4px;
  color: #fff;
  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 #555;
  border-radius: 4px;
  color: #ccc;
  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: #2a2a2a;
  border-color: #DD5100;
  color: #DD5100;
}

/* 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, #666);
}
.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: #333;
  font-size: 15px;
  font-weight: 500;
}
.plan-empty-state--cleared .plan-empty-state-hint {
  color: #888;
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 1.25rem 0;
}
.plan-empty-state--cleared .plan-empty-state-cta {
  background: #DD5100;
  color: #fff;
  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: #b84300;
}
@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, #121212);
  border: 1px solid var(--border-color, #333);
  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, #e0e0e0);
}
.modal-content .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary, #999);
  line-height: 1;
}
.modal-content .close-btn:hover {
  color: var(--text-primary, #e0e0e0);
}

/* 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-color, #333);
}
.deliverables-table th {
  color: var(--text-secondary, #999);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.deliverables-table td {
  color: var(--text-primary, #e0e0e0);
}

/* Plan action buttons */
.btn-plan-action {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #c53030;
  border-radius: 6px;
  color: #fc8181;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.btn-plan-action:hover {
  background: #c53030;
  color: #fff;
}

/* 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, #DD5100);
}

/* 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-color, #333);
  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, #666);
  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, #666);
}
.plan-drawer-stat-value {
  color: var(--text-primary, #e0e0e0);
  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-color, #333);
  color: var(--text-secondary, #999);
  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: #34A853; }
.gcal-status-dot.disconnected { background: var(--text-muted, #666); }
.gcal-status-dot.pending { background: #DD5100; }
.gcal-status-dot.stale { background: #DD5100; }

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

/* 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-color, #333);
  background: transparent;
  color: var(--text-secondary, #999);
  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, #DD5100);
  color: var(--accent-color, #DD5100);
}
.plan-gcal-btn.primary {
  background: var(--accent-color, #DD5100);
  border-color: var(--accent-color, #DD5100);
  color: #fff;
}
.plan-gcal-btn.primary:hover {
  background: #c04700;
  border-color: #c04700;
}
.plan-gcal-btn.danger {
  border-color: #c53030;
  color: #fc8181;
}
.plan-gcal-btn.danger:hover {
  background: #c53030;
  color: #fff;
}

/* GCal connected calendar name — shown below "Google Calendar" section title */
.plan-gcal-calendar-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: #fff;
  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, #666);
  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: #fff;
  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: #1a1a1a;
  border: 2px solid #DD5100;
  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: #666;
  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: #fff;
}

/* ---- 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: #fff;
}

/* ---- Description / hint text ---- */
.gcal-modal-desc {
  font-size: 0.8rem;
  color: #999;
  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: #ccc;
  padding: 6px 0 6px 24px;
  position: relative;
}
.gcal-modal-permissions li::before {
  content: '\2713';
  position: absolute;
  left: 4px;
  color: #4CAF50;
  font-weight: 700;
}

.gcal-modal-hint {
  font-size: 0.8rem;
  color: #999;
  margin-top: 12px;
  line-height: 1.5;
}

/* Section labels — orange uppercase (matches auth modal section headers) */
.gcal-section-label {
  color: #DD5100;
  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: #ccc;
  cursor: pointer;
}
.gcal-radio input[type="radio"] {
  accent-color: #DD5100;
  width: 14px;
  height: 14px;
}

/* Calendar mode tab toggle */
.gcal-calendar-mode {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  background: #111;
  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: #999;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gcal-mode-btn.active {
  background: #DD5100;
  color: #fff;
  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: #ccc;
  transition: background 0.12s;
}
.gcal-calendar-item:hover {
  background: #2a2a2a;
}
.gcal-calendar-item.selected {
  background: rgba(221, 81, 0, 0.15);
  color: #fff;
}
.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: #666;
  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: #222;
  border: 1px solid #333;
  border-radius: 6px;
  color: #fff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.gcal-text-input:focus {
  border-color: #DD5100;
}
.gcal-text-input::placeholder {
  color: #666;
}

/* 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: #222;
  border: 1px solid #333;
  color: #fff;
  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: #555;
}
.gcal-modal-card .auth-form-group input:focus {
  outline: none;
  border-color: #DD5100;
}

.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: #1a1a1a;
  border-top: 2px solid #DD5100;
  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: #999;
  flex: 1;
}
.voice-pack-save-btn {
  background: #DD5100;
  color: #fff;
  border: none;
  padding: 5px 16px;
  border-radius: 4px !important;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
.voice-pack-save-btn:hover {
  background: #c04700;
}
.voice-pack-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.voice-pack-discard-btn {
  background: transparent;
  color: #666;
  border: 1px solid #444;
  padding: 5px 12px;
  border-radius: 4px !important;
  cursor: pointer;
  font-size: 0.82rem;
}
.voice-pack-discard-btn:hover {
  color: #999;
  border-color: #666;
}

/* 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: rgba(221, 81, 0, 0.15);
  color: #DD5100;
  border: 1px solid rgba(221, 81, 0, 0.4);
  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, #121212);
  border: 1px solid var(--border-color, #333);
  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: rgba(221, 81, 0, 0.15);
  color: #DD5100;
  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, #999);
  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, #999);
  border: 1px solid var(--border-color, #444);
  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: #DD5100;
  border-color: rgba(221, 81, 0, 0.5);
  opacity: 1;
}
.plan-proposal-empty,
.plan-proposal-loading {
  padding: 8px 0;
  color: var(--text-secondary, #999);
  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, #121212);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #333);
  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-color, #333);
}
.proposal-diff-modal-header h2 {
  margin: 0;
  color: #DD5100;
  font-size: 1.1em;
}
.proposal-diff-modal-sub {
  color: var(--text-secondary, #999);
  font-size: 0.85em;
  margin-top: 2px;
}
.proposal-diff-modal-close {
  background: transparent;
  color: var(--text-secondary, #999);
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0 4px;
}
.proposal-diff-modal-close:hover { color: #DD5100; }
.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, #242424);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  padding: 12px;
}
.proposal-diff-col h3 {
  margin: 0 0 8px 0;
  color: #DD5100;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.proposal-diff-col--proposed {
  border-color: rgba(221, 81, 0, 0.5);
}
.proposal-diff-field {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color, #333);
  font-size: 0.9em;
}
.proposal-diff-field:last-child { border-bottom: none; }
.proposal-diff-field-label { color: var(--text-secondary, #999); }
.proposal-diff-field-value { color: var(--text-primary, #e0e0e0); }
.proposal-diff-meta-row {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.proposal-diff-meta-row label {
  color: var(--text-secondary, #999);
  font-size: 0.85em;
}
.proposal-diff-note {
  background: var(--bg-primary, #0f0f0f);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  padding: 8px;
  font-family: inherit;
  font-size: 0.9em;
  resize: vertical;
}
.proposal-diff-note:focus {
  border-color: #DD5100;
  outline: none;
}
.proposal-diff-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color, #333);
}
.proposal-diff-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color, #444);
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
}
.proposal-diff-btn--ghost { color: var(--text-secondary, #999); }
.proposal-diff-btn--ghost:hover { color: var(--text-primary, #fff); border-color: var(--text-secondary, #999); }
.proposal-diff-btn--reject {
  border-color: rgba(214, 69, 69, 0.5);
  color: #d64545;
}
.proposal-diff-btn--reject:hover {
  background: rgba(214, 69, 69, 0.1);
  border-color: #d64545;
}
.proposal-diff-btn--merge {
  border-color: rgba(255, 193, 7, 0.5);
  color: #ffc107;
}
.proposal-diff-btn--merge:hover {
  background: rgba(255, 193, 7, 0.1);
  border-color: #ffc107;
}
.proposal-diff-btn--accept {
  background: #DD5100;
  color: #fff;
  border-color: #DD5100;
}
.proposal-diff-btn--accept:hover {
  background: #c84800;
  border-color: #c84800;
}
/* 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, #121212);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #333);
  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-color, #333);
}
.reviewer-submit-review-modal-header h2 {
  margin: 0;
  color: #DD5100;
  font-size: 1.1em;
}
.reviewer-submit-review-modal-sub {
  color: var(--text-secondary, #999);
  font-size: 0.85em;
  margin-top: 2px;
}
.reviewer-submit-review-modal-close {
  background: transparent;
  color: var(--text-secondary, #999);
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0 4px;
}
.reviewer-submit-review-modal-close:hover { color: #DD5100; }
.reviewer-submit-review-modal-body {
  padding: 20px;
  overflow-y: auto;
}
.reviewer-submit-review-modal-section {
  background: var(--bg-secondary, #242424);
  border: 1px solid var(--border-color, #333);
  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-color, #555); }
.reviewer-submit-review-modal-section--added { border-left-color: #4caf50; }
.reviewer-submit-review-modal-section--removed { border-left-color: #d64545; }
.reviewer-submit-review-modal-section--modified { border-left-color: #ffc107; }

/* 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: #2e7d32; }
.reviewer-submit-modal-section-delta--removed { color: #c62828; }
.reviewer-submit-modal-section-delta--unchanged { color: #888; font-weight: 400; }
.reviewer-submit-review-modal-section h3 {
  margin: 0 0 8px 0;
  color: #DD5100;
  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, #e0e0e0);
  font-size: 0.9em;
}
.reviewer-submit-review-modal-section li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-color, #333);
}
.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, #999);
  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, #999); }
.reviewer-submit-review-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color, #333);
}
.reviewer-submit-review-modal-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color, #444);
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
}
.reviewer-submit-review-modal-btn--ghost { color: var(--text-secondary, #999); }
.reviewer-submit-review-modal-btn--ghost:hover { color: var(--text-primary, #fff); border-color: var(--text-secondary, #999); }
.reviewer-submit-review-modal-btn--primary { background: #DD5100; color: #fff; border-color: #DD5100; }
.reviewer-submit-review-modal-btn--primary:hover { background: #c84800; border-color: #c84800; }
/* 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, #999);
  font-size: 0.85em;
  font-style: italic;
  padding: 8px 0;
}
.proposal-diff-modal-changelist-section {
  background: var(--bg-secondary, #242424);
  border-left: 3px solid transparent;
  border-top: 1px solid var(--border-color, #333);
  border-bottom: 1px solid var(--border-color, #333);
  border-right: 1px solid var(--border-color, #333);
  border-radius: 4px;
  padding: 10px 12px;
}
.proposal-diff-modal-changelist-section--added {
  border-left-color: #4caf50;
}
.proposal-diff-modal-changelist-section--removed {
  border-left-color: #d64545;
}
.proposal-diff-modal-changelist-section--modified {
  border-left-color: #ffc107;
}
.proposal-diff-modal-changelist-section h4 {
  margin: 0 0 6px 0;
  font-size: 0.9em;
  color: var(--text-primary, #e0e0e0);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.proposal-diff-modal-changelist-section h4 .count {
  color: var(--text-secondary, #999);
  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, #e0e0e0);
  padding: 3px 0;
  border-bottom: 1px solid var(--border-color, #333);
}
.proposal-diff-modal-changelist-item:last-child {
  border-bottom: none;
}
.proposal-diff-modal-changelist-item-title {
  color: var(--text-primary, #e0e0e0);
  font-weight: 500;
  margin-bottom: 2px;
}
.proposal-diff-modal-changelist-item-fields {
  list-style: none;
  padding-left: 12px;
  color: var(--text-secondary, #999);
  font-size: 0.8em;
}
.proposal-diff-modal-changelist-overflow {
  font-style: italic;
  color: var(--text-secondary, #999);
  padding: 4px 0;
}
.proposal-diff-modal-changelist-empty {
  color: var(--text-secondary, #999);
  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 (#1a1a1a / #242424) 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 #333;
}
.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: #999;
  font-size: 12px;
  padding: 8px 4px;
  font-style: italic;
}
.plan-revision-row {
  background: #242424;
  border: 1px solid #333;
  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: #fff;
  background: #555;
}
.plan-revision-pill-authorgenesis { background: #2563eb; }
.plan-revision-pill-authoredit    { background: #444; }
.plan-revision-pill-authorrestore { background: #b45309; }
.plan-revision-pill-reviewerdraft { background: #7c3aed; }
.plan-revision-pill-mergeaccepted { background: #15803d; }
.plan-revision-sha {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #DD5100;
  cursor: help;
}
.plan-revision-when {
  color: #999;
  font-size: 11px;
  margin-left: auto;
}
.plan-revision-row-body {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.plan-revision-author {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.plan-revision-msg {
  color: #ccc;
  font-size: 12px;
  flex: 1 1 0;
  overflow-wrap: anywhere;
}
.plan-revision-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: #15803d;
  color: #fff;
  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 #555;
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.plan-revision-diff-btn:hover,
.plan-revision-restore-btn:hover {
  background: #333;
  border-color: #DD5100;
  color: #DD5100;
}
.plan-revision-restore-btn { color: #d64545; border-color: #d64545; }
.plan-revision-restore-btn:hover { color: #fff; background: #d64545; border-color: #d64545; }

.plan-revision-diff-card {
  max-width: 760px;
  width: 92%;
}
.plan-revision-diff-card .proposal-diff-modal-sub code {
  background: #1f1f1f;
  color: #DD5100;
  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;
}
.plan-revision-diff-summary-pill {
  background: #2a2a2a;
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid #444;
}
.plan-revision-diff-summary-pill--added { color: #15803d; border-color: #15803d; }
.plan-revision-diff-summary-pill--removed { color: #d64545; border-color: #d64545; }
.plan-revision-diff-summary-pill--modified { color: #b45309; border-color: #b45309; }

.plan-revision-diff-section {
  margin-bottom: 18px;
}
.plan-revision-diff-section h3 {
  color: #DD5100;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-revision-diff-meta-empty {
  color: #999;
  font-size: 12px;
  font-style: italic;
}
.plan-revision-diff-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #333;
  border-radius: 4px;
  background: #1a1a1a;
}
.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 #2a2a2a;
  font-size: 12px;
}
.plan-revision-diff-meta-row:last-child { border-bottom: none; }
.plan-revision-diff-meta-field {
  color: #999;
  font-weight: 600;
}
.plan-revision-diff-meta-from {
  color: #d64545;
  word-break: break-word;
}
.plan-revision-diff-meta-arrow {
  color: #666;
}
.plan-revision-diff-meta-to {
  color: #15803d;
  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 #333;
  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 #fff 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: #666;
  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: #333;
}
.plan-item-tab.active {
  color: #DD5100;
  border-bottom-color: #DD5100;
  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: rgba(255, 255, 255, 0.1);
  color: #999;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.plan-item-tab.active .plan-item-tab-count {
  color: #DD5100;
  background: rgba(221, 81, 0, 0.18);
}

/* 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: #4CAF50;
}
.plan-item-tab.plan-item-tab-calendar.gcal-connected.active {
  color: #4CAF50;
  border-bottom-color: #4CAF50;
}

/* 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: rgba(255, 255, 255, 0.08);
  color: #ccc;
  border: 1px solid #444;
  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: rgba(221, 81, 0, 0.25);
}

/* 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;
}