/* SP-347 (2026-04-19) — Reviewer auto-enters proposal mode. Partner and
   domain are the ONLY locked fields; everything else in the sidebar stays
   interactive so the reviewer can build a counter-proposal. The lock is
   expressed via [data-lock-in-review-mode] in index.html and the JS
   applySidebarReviewMode() helper in app.js which mirrors the disabled
   attribute on those elements.

   Body class history:
   - body.sidebar-review-mode — added at bootstrap before the plan hydrates.
     After SP-347 this phase is brief; enterProposalMode() swaps it to
     proposal-mode once the plan is loaded.
   - body.proposal-mode — added by enterProposalMode(); persists for the
     entire reviewing session.

   Both classes keep the partner/domain lock visible. Theme vars match the
   SP-343 pattern used elsewhere.
*/

/* --- Banner (hidden by default; shown in review or proposal mode) --- */
.sidebar-review-banner {
  display: none;
}

body.sidebar-review-mode .sidebar-review-banner,
body.proposal-mode .sidebar-review-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 16px 4px;
  padding: 10px 12px;
  background: var(--bg-secondary, #242424);
  border-left: 3px solid var(--accent-color, #DD5100);
  border-top: 1px solid var(--border-color, #333);
  border-right: 1px solid var(--border-color, #333);
  border-bottom: 1px solid var(--border-color, #333);
  border-radius: 4px;
  color: var(--text-primary, #fff);
  font-size: 0.85em;
  line-height: 1.4;
}

body.sidebar-review-mode .sidebar-review-banner-icon,
body.proposal-mode .sidebar-review-banner-icon {
  color: var(--accent-color, #DD5100);
  flex: 0 0 auto;
  margin-top: 1px;
}

body.sidebar-review-mode .sidebar-review-banner-icon svg,
body.proposal-mode .sidebar-review-banner-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent-color, #DD5100);
}

body.sidebar-review-mode .sidebar-review-banner-text,
body.proposal-mode .sidebar-review-banner-text {
  color: var(--text-primary, #fff);
  flex: 1 1 auto;
}

body.sidebar-review-mode .sidebar-review-banner-text strong,
body.proposal-mode .sidebar-review-banner-text strong {
  color: var(--accent-color, #DD5100);
  font-weight: 600;
  margin-right: 4px;
}

body.sidebar-review-mode .sidebar-review-banner-hint,
body.proposal-mode .sidebar-review-banner-hint {
  color: var(--text-secondary, #999);
  display: block;
  font-size: 0.78em;
  margin-top: 2px;
}

/* --- SP-347: Partner + domain lock, scoped via [data-lock-in-review-mode].
   Applies in both the pre-hydration review phase and the proposal phase.
   Covers #domainToggleLeft, #partnerSelect, #addPartnerBtn, and the
   domain drawer/partner body via the attribute marker in index.html. --- */
body.sidebar-review-mode [data-lock-in-review-mode],
body.proposal-mode [data-lock-in-review-mode] {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}

/* Also cover the partner-drawer custom-entry siblings — these specific IDs
   don't carry the data-lock attribute and the interactions are undefined
   for a reviewer, so hide them outright rather than just dimming. */
body.sidebar-review-mode .main-content #customPartnerLink,
body.sidebar-review-mode .main-content #customPartnerInput,
body.sidebar-review-mode .main-content #customPartnerConfirm,
body.sidebar-review-mode .main-content #customPartnerBack {
  display: none !important;
}

body.sidebar-review-mode .main-content .domain-drawer-split {
  /* No divider needed when the partner half is hidden. */
  justify-content: flex-start;
}

body.sidebar-review-mode .main-content .domain-split-divider {
  display: none;
}

/* --- Goal section: view-only for reviewers ---
   Reviewers can expand goal cards to see voices + channel details, but
   cannot elect a different goal or trigger a new Generate. */

/* F-036 (2026-04-24): Generate button now doubles as the reviewer's
   Regenerate action (label flips, click reroutes to the regenerate
   endpoint). It's the primary surface for producing a counter-proposal,
   so keep it visible in review + proposal modes. */

/* Hide the throne × Change button — reviewers can't swap the elected goal */
body.sidebar-review-mode #throneChange,
body.proposal-mode #throneChange {
  display: none !important;
}

/* Hide the selection indicator — reviewer interaction is expand-only */
body.sidebar-review-mode .objective-selection-indicator,
body.proposal-mode .objective-selection-indicator {
  opacity: 0;
  pointer-events: none;
}

/* F-036.C — proposal-mode banner: keep the peach-tinted indicator so the
   reviewer sees they're actively editing a counter-proposal, overriding
   the shared banner rule above. */
body.proposal-mode .sidebar-review-banner {
  background: linear-gradient(90deg, rgba(221, 81, 0, 0.18), rgba(221, 81, 0, 0.06));
  border-left-color: var(--accent-color, #DD5100);
  border-bottom: 1px solid rgba(221, 81, 0, 0.5);
}

body.proposal-mode .review-bar {
  /* Subtle tint to remind the reviewer they're in edit mode. */
  border-top-color: rgba(221, 81, 0, 0.4);
}

/* Draft indicator — shown in the review bar while a proposal is in progress */
.review-bar__btn--draft-indicator {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 0.8em;
  color: #DD5100;
  border: 1px dashed rgba(221, 81, 0, 0.5);
  border-radius: 4px;
  cursor: default;
  user-select: none;
}

/* F-036.C-stack — undo/redo + submit row */
body.proposal-mode .review-bar__stack-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 12px;
  border-top: 1px dashed rgba(221, 81, 0, 0.25);
}
.review-bar__btn--stack {
  min-width: 36px;
  font-size: 1.1em;
}
.review-bar__btn--stack[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.review-bar__btn--submitted-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 0.85em;
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.5);
  border-radius: 4px;
  background: rgba(76, 175, 80, 0.1);
  user-select: none;
  font-weight: 600;
}

/* F-036.E — revert-to-original button: destructive accent */
.review-bar__btn--revert {
  color: #d64545;
  border-color: rgba(214, 69, 69, 0.5);
}
.review-bar__btn--revert:hover:not([disabled]) {
  background: rgba(214, 69, 69, 0.1);
  border-color: #d64545;
}

/* ============================================
   SP-422 (2026-04-22) — Mobile responsive review bar
   Reviewer/guest review bar had no mobile styles and overflowed at 390px.
   Break the single row into stacked rows, wrap actions, keep touch targets
   >= 36px, and use 16px font-size on textarea to avoid iOS focus zoom.

   Note: .review-bar is position: sticky; top: 0 (NOT fixed bottom), so no
   conflict with the mobile nav bar at bottom of viewport.
   ============================================ */
@media (max-width: 768px) {
  .review-bar__row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    min-height: 0;
  }
  .review-bar__label {
    flex: 1 1 100%;
    font-size: 0.85em;
  }
  .review-bar__actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
  }
  .review-bar__btn {
    padding: 6px 10px;
    font-size: 0.82em;
    min-height: 36px;
    height: auto;
  }
  .review-bar__btn--exit {
    margin-left: auto;
  }
  body.proposal-mode .review-bar__stack-row {
    flex-wrap: wrap;
    padding: 6px 12px;
    gap: 6px;
    justify-content: flex-start;
  }
  .review-bar__btn--stack {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 1em;
  }
  .review-bar__btn--approve[data-action="submit-proposal"] {
    flex: 1 1 auto;
    justify-content: center;
  }
  .review-bar__drawer {
    padding-left: 12px;
    padding-right: 12px;
  }
  .review-bar__textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    width: 100%;
    box-sizing: border-box;
  }
  .review-bar__drawer-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* --- Fix 6: Submit proposal spinner ---
   Scope the display rule to :not([hidden]) so the HTML hidden attribute
   (which sets display:none) isn't overridden by author CSS. */
.submit-proposal-spinner:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-action="submit-proposal"]:disabled {
  opacity: 0.75;
  cursor: default;
}

/* --- Fix 7: Name capture step inside submit modal --- */
.reviewer-name-step {
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  background: var(--bg-secondary, #f8f8f8);
  border-radius: 6px 6px 0 0;
  margin-bottom: 16px;
}
.reviewer-name-prompt {
  font-size: 0.9em;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-primary, #1a1a1a);
}
.reviewer-name-fields {
  display: flex;
  gap: 8px;
}
.reviewer-name-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;
  font-size: 0.9em;
  font-family: inherit;
  background: #fff;
  color: #1a1a1a;
}
.reviewer-name-input:focus {
  outline: none;
  border-color: #DD5100;
  box-shadow: 0 0 0 2px rgba(221,81,0,0.15);
}
.reviewer-name-error {
  margin: 6px 0 0;
  font-size: 0.82em;
  color: #d64545;
}

/* --- Fix 8: Two-column before/after diff table --- */
.reviewer-submit-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
  margin-top: 6px;
}
.reviewer-submit-diff-table thead th {
  padding: 6px 10px;
  text-align: left;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #666);
  border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.reviewer-submit-diff-table thead th:first-child {
  border-right: 1px solid var(--border-color, #e0e0e0);
}
.diff-cell {
  padding: 10px;
  vertical-align: top;
  line-height: 1.4;
}
.diff-cell--before {
  border-right: 1px solid var(--border-color, #e0e0e0);
  width: 50%;
  color: var(--text-secondary, #666);
}
.diff-cell--after {
  width: 50%;
}
.reviewer-submit-diff-table tbody tr + tr .diff-cell {
  border-top: 1px solid var(--border-color, #e0e0e0);
}
.diff-empty {
  color: var(--text-muted, #999);
  font-size: 1.1em;
}
.diff-meta {
  margin-top: 4px;
  font-size: 0.85em;
  color: var(--text-secondary, #666);
}
/* One primary fact per line: date, then stage, then voice. */
.diff-line {
  line-height: 1.35;
  font-size: 0.9em;
}
.diff-line:first-child {
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
}
.diff-cell--before .diff-line:first-child {
  color: var(--text-secondary, #666);
}
.diff-field {
  margin-top: 3px;
  font-size: 0.85em;
}
.diff-field--old .diff-field-val {
  text-decoration: line-through;
  color: var(--text-muted, #999);
}
.diff-field--new .diff-field-val {
  font-weight: 600;
}
.diff-field-name {
  color: var(--text-muted, #999);
}
.diff-brief {
  margin-top: 6px;
  font-size: 0.82em;
}
.diff-brief summary {
  cursor: pointer;
  color: var(--accent-jargan, #9d4edd);
  user-select: none;
}
.diff-brief p {
  margin: 4px 0 0;
  color: var(--text-secondary, #666);
  line-height: 1.5;
}

/* --- Fix 7: Reviewer name on author-side proposal cards --- */
.plan-proposal-reviewer {
  font-size: 0.82em;
  color: var(--text-secondary, #666);
  padding: 2px 0 6px;
}

/* --- F-036: name-capture gate. Blocks the schedule render until a
   first-time reviewer introduces themselves. Sits on top of the splash
   (z-index above) and the schedule. JARGAN-branded: orange underline
   indicator on the title, brand-orange CTA, soft white-glass overlay. --- */
.reviewer-name-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  padding: 24px;
  box-sizing: border-box;
}
.reviewer-name-gate-card {
  background: #fff;
  border: 1px solid rgba(35, 31, 32, 0.08);
  border-radius: 8px;
  padding: 32px 36px 28px 36px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
  box-sizing: border-box;
}
.reviewer-name-gate-title {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 600;
  color: #231f20;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 8px;
}
.reviewer-name-gate-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background: #DD5100;
  border-radius: 1px;
}
.reviewer-name-gate-body {
  margin: 14px 0 18px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}
.reviewer-name-gate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}
.reviewer-name-gate-input {
  font-family: inherit;
  font-size: 14px;
  padding: 11px 13px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  color: #231f20;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.reviewer-name-gate-input:focus {
  outline: none;
  border-color: #DD5100;
  box-shadow: 0 0 0 3px rgba(221, 81, 0, 0.14);
}
.reviewer-name-gate-input::placeholder {
  color: #a8a8a8;
}
.reviewer-name-gate-error {
  margin: 6px 0 0 0;
  font-size: 12px;
  color: #b53d3d;
}
.reviewer-name-gate-footer {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.reviewer-name-gate-btn {
  background: #DD5100;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.reviewer-name-gate-btn:hover {
  background: #b84300;
}
.reviewer-name-gate-btn:active {
  background: #993700;
}
@media (max-width: 480px) {
  .reviewer-name-gate-card {
    padding: 24px 22px 22px 22px;
  }
  .reviewer-name-gate-fields {
    grid-template-columns: 1fr;
  }
}

/* --- F-036: Submit Revision (and Approve) disabled treatment.
   `is-disabled` mirrors the native `disabled` attribute so the visual cue
   stays in sync regardless of which one set the state. --- */
.review-bar__btn--approve:disabled,
.review-bar__btn--approve.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- F-036: Notes drawer label — keeps the notes-agnostic intent
   visible (used to be implicit via "Request Changes" framing). --- */
.review-bar__notes-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.review-bar__notes-optional {
  font-weight: 400;
  color: var(--text-muted, #999);
  letter-spacing: 0;
}

/* --- F-036 (UI + branding consult): inline reviewer-name identity row.
   Replaces the modal name-gate. Ships expanded for first-time reviewers,
   collapses to a status pill once both First + Last validate. Mandatory:
   Approve / Submit Revision are gated until populated. --- */
.review-bar__identity-row {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(35, 31, 32, 0.06);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
body.proposal-mode .review-bar__identity-row {
  border-bottom-color: rgba(221, 81, 0, 0.18);
}
.review-bar__identity-row[data-identity-state="collapsed"] .review-bar__identity-fields,
.review-bar__identity-row[data-identity-state="collapsed"] .review-bar__identity-helper {
  display: none;
}
.review-bar__identity-row[data-identity-state="expanded"] .review-bar__identity-pill {
  display: none;
}
/* Smooth size change between expanded ↔ collapsed states */
.review-bar__identity-row {
  transition: padding 140ms cubic-bezier(0.2, 0, 0, 1);
}

/* Expanded: paired First + Last inputs */
.review-bar__identity-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.review-bar__identity-field {
  position: relative;
}
.review-bar__identity-tick {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 6px;
  background: #DD5100;
  border-radius: 1px;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.review-bar__identity-input.is-filled + .review-bar__identity-tick,
.review-bar__identity-field:has(.review-bar__identity-input.is-filled) .review-bar__identity-tick {
  opacity: 0;
}
.review-bar__identity-input {
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px 9px 18px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  color: #231f20;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.review-bar__identity-input::placeholder {
  color: #a8a8a8;
}
.review-bar__identity-input:focus {
  outline: none;
  border-color: #DD5100;
  box-shadow: 0 0 0 3px rgba(221, 81, 0, 0.14);
}

/* Bounce helper line: surfaces for 3s when a gated action is attempted. */
.review-bar__identity-helper {
  margin: 4px 0 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #DD5100;
  opacity: 0;
}
.review-bar__identity-helper.is-bouncing {
  animation: review-bar-helper-bounce 3000ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes review-bar-helper-bounce {
  0%   { opacity: 0; transform: translateY(-2px); }
  6%   { opacity: 1; transform: translateY(0); }
  93%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .review-bar__identity-helper.is-bouncing {
    animation: review-bar-helper-fade 3000ms linear;
  }
  @keyframes review-bar-helper-fade {
    0%, 100% { opacity: 0; }
    6%, 93%  { opacity: 1; }
  }
}

/* Collapsed pill: status + name + edit affordance, single line */
.review-bar__identity-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-bar__identity-pill-context {
  font-size: 11px;
  font-weight: 500;
  color: #888;
}
.review-bar__identity-pill-sep {
  color: #999;
  margin: 0 2px;
}
.review-bar__identity-pill-name {
  font-size: 13px;
  font-weight: 600;
  color: #231f20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.review-bar__identity-pill-edit {
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #DD5100;
  cursor: pointer;
  text-decoration: none;
}
.review-bar__identity-pill-edit:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .review-bar__identity-row {
    padding: 8px 12px;
  }
  /* sp-name-gate-fix: stack First + Last vertically below 768px so the
     reviewer always sees both placeholders. Side-by-side at 480-768px
     pushed the second input into a too-narrow cell where the placeholder
     was clipped and the field looked missing. Stacking trades horizontal
     density for clarity — the bar is already a vertical column on mobile. */
  .review-bar__identity-fields {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .review-bar__identity-pill-context {
    display: none;
  }
  .review-bar__identity-pill-context + .review-bar__identity-pill-sep {
    display: none;
  }
}

/* --- F-036: reviewer submit modal — plan-shape metrics block --- */

/* --- F-036: icon-led card style for "Deliverables Moved" cells.
   Per branding consult: Stage/Voice/Channel/Platform/Date as icon rows,
   no field labels (icon carries semantic). 2px left-border + bg tint
   provide directional cue (Before muted gray, After brand orange). --- */
.diff-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 12px;
  line-height: 1.35;
}
.diff-card--before {
  background: #fafafa;
  color: #666;
  border-left: 2px solid #d4d4d4;
}
.diff-card--after {
  background: #ffffff;
  color: #231f20;
  border-left: 2px solid #DD5100;
}
.diff-icon-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.diff-icon-row--date {
  margin-top: 2px;
  font-size: 11px;
  color: #666;
}
.diff-card--after .diff-icon-row--date {
  color: #4a4a4a;
}
.diff-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke-width: 1.75;
  /* Lucide swaps <i> for <svg>; ensure the svg inherits sizing too. */
}
.diff-icon-row svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.75;
  flex-shrink: 0;
}
.diff-icon-val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Override the previous Date-only line padding from the moved cell */
.diff-cell .diff-card {
  margin: 0;
}
.diff-cell .diff-card .diff-brief {
  margin-top: 6px;
}

/* --- F-036 (branding consult): hairline section frame, chapter-mark heading
   with brand-orange underline. No fills, no borders, just hierarchy and an
   orange micro-accent. Replaces the previous gray-band drawer style. --- */
.reviewer-submit-drawer {
  background: #fff;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(35, 31, 32, 0.06);
  overflow: visible;
}
.reviewer-submit-drawer:last-child {
  border-bottom: none;
}
.reviewer-submit-drawer > .reviewer-submit-drawer-summary {
  list-style: none;
  cursor: pointer;
  padding: 0 0 10px 0;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
.reviewer-submit-drawer > .reviewer-submit-drawer-summary::-webkit-details-marker {
  display: none;
}
.reviewer-submit-drawer .drawer-chevron {
  color: #888;
  font-size: 0.6em;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}
.reviewer-submit-drawer[open] .drawer-chevron {
  transform: rotate(90deg);
}
.reviewer-submit-drawer .drawer-title {
  font-size: 18px;
  font-weight: 600;
  color: #231f20;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 4px;
}
/* Orange underline indicator anchors to the title text, not the summary
   element, so it tracks the title even when the subtitle wraps or pushes
   the count column wide. */
.reviewer-submit-drawer .drawer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 24px;
  height: 2px;
  background: #DD5100;
  border-radius: 1px;
}
.reviewer-submit-drawer .drawer-count {
  font-size: 13px;
  font-weight: 500;
  color: #777;
  font-variant-numeric: tabular-nums;
}
.reviewer-submit-drawer .drawer-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #777;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.reviewer-submit-drawer-body {
  padding: 14px 0 0 0;
}

/* --- F-036 (branding consult): donut charts.
   96px diameter outer, ~50% inner hole holding the total count.
   Sunset palette + brand-orange for After, desaturated for Before.
   Hairline separators between dimension rows; BEFORE/AFTER mini-strip
   sits above each donut as a directional cue. --- */
.metrics-pie-row {
  padding: 16px 0;
  border-top: 1px solid rgba(35, 31, 32, 0.06);
}
.metrics-pie-row:first-child {
  border-top: none;
  padding-top: 0;
}
.metrics-pie-heading {
  font-size: 13px;
  font-weight: 600;
  color: #231f20;
  margin: 0 0 12px 0;
  letter-spacing: 0.01em;
}
.metrics-pie-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.metrics-pie-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.metrics-pie-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.metrics-pie-side--before .metrics-pie-label { color: #767676; }
.metrics-pie-side--after .metrics-pie-label { color: #DD5100; }
.pie-donut {
  width: 96px;
  height: 96px;
  display: block;
}
.pie-svg {
  width: 96px;
  height: 96px;
  display: block;
  overflow: visible;
}
.metrics-pie-side--before .pie-svg {
  filter: saturate(0.35) opacity(0.75);
}
.pie-svg-num {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 600;
  fill: #231f20;
  font-variant-numeric: tabular-nums;
}
.pie-empty-text {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  fill: #b0b0b0;
}

/* Legend: 2px left-border in slice color (no swatch), 11px Inter.
   Truncation via ellipsis for long voice names; full label in title attr. */
.pie-legend {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  width: 100%;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
.pie-legend-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 0 0 8px;
  border-left: 2px solid #999;
  font-size: 11px;
}
.pie-legend-label {
  flex: 1;
  font-weight: 500;
  color: #231f20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 140px;
}
.pie-legend-count {
  color: #767676;
  font-variant-numeric: tabular-nums;
}
.pie-legend-pct {
  color: #767676;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.pie-legend-empty {
  color: #c0c0c0;
  font-style: italic;
  font-size: 11px;
  margin-top: 12px;
  text-align: center;
}