/**
 * product.css — Arrai Product Interface Styles
 * ARR-001-PB | Screens 0 + 1 (and shared chrome for Screens 2–8)
 *
 * Design system inherits from style.css custom properties.
 * All product screens are full-page overlays that hide the marketing graph.
 *
 * Screen 0: #try    — context selection (jurisdiction / sector)
 * Screen 1: #upload — document upload + analysis pipeline progress
 */

/* ── Product overlay container ─────────────────────────────────────────────── */
.product-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  overflow-y: auto;
  padding: 24px 16px;
}

.product-screen.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Shared card ───────────────────────────────────────────────────────────── */
.p-card {
  width: 100%;
  max-width: 520px;
  background: var(--navy2);
  border: 1px solid rgba(14, 158, 142, 0.18);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Shared header row ─────────────────────────────────────────────────────── */
.p-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
}

.p-logo {
  font-family: 'Georgia', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 2px;
  text-decoration: none;
}

.p-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(232, 244, 248, 0.55);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s ease;
  text-decoration: none;
}
.p-back-btn:hover { color: var(--white); }
.p-back-btn .arrow { font-size: 16px; }

.p-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid rgba(232, 244, 248, 0.12);
  border-radius: 50%;
  color: rgba(232, 244, 248, 0.45);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.p-close-btn:hover {
  color: var(--white);
  border-color: rgba(232, 244, 248, 0.35);
}

/* ── Heading block ─────────────────────────────────────────────────────────── */
.p-heading {
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.p-subhead {
  font-size: 14px;
  font-weight: 400;
  color: rgba(232, 244, 248, 0.55);
  line-height: 1.55;
  margin-bottom: 32px;
}

/* ── Form field ────────────────────────────────────────────────────────────── */
.p-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.p-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(232, 244, 248, 0.45);
}

.p-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 40px 12px 16px;
  background: var(--navy);
  border: 1px solid rgba(14, 158, 142, 0.25);
  border-radius: 10px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230E9E8E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color 0.2s ease;
}
.p-select:focus {
  outline: none;
  border-color: var(--teal);
}
.p-select option[disabled] { color: rgba(232, 244, 248, 0.3); }

/* ── Beta notice ───────────────────────────────────────────────────────────── */
.p-beta-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(14, 158, 142, 0.08);
  border: 1px solid rgba(14, 158, 142, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 28px;
  font-size: 12px;
  color: rgba(232, 244, 248, 0.60);
  line-height: 1.5;
}
.p-beta-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--teal);
  background: rgba(14, 158, 142, 0.15);
  border-radius: 4px;
  padding: 2px 6px;
  margin-top: 1px;
}

/* ── Primary action button ─────────────────────────────────────────────────── */
.p-btn-primary {
  width: 100%;
  padding: 14px 24px;
  background: var(--teal);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.p-btn-primary:hover:not(:disabled) {
  background: #0ab8a6;
  transform: translateY(-1px);
}
.p-btn-primary:active:not(:disabled) { transform: translateY(0); }
.p-btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Divider ───────────────────────────────────────────────────────────────── */
.p-divider {
  height: 1px;
  background: rgba(232, 244, 248, 0.07);
  margin: 28px 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   SCREEN 1 — Upload zone
   ──────────────────────────────────────────────────────────────────────────── */

/* Context pill shown at top of upload card */
.p-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 158, 142, 0.10);
  border: 1px solid rgba(14, 158, 142, 0.22);
  border-radius: 20px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 28px;
}
.p-context-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}
.p-context-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.2px;
}

/* Drop zone */
.p-dropzone {
  border: 2px dashed rgba(14, 158, 142, 0.28);
  border-radius: 12px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}
.p-dropzone:hover,
.p-dropzone.drag-over {
  border-color: var(--teal);
  background: rgba(14, 158, 142, 0.05);
}
.p-dropzone.has-file {
  border-style: solid;
  border-color: rgba(14, 158, 142, 0.45);
  background: rgba(14, 158, 142, 0.05);
}

.p-dropzone-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
  user-select: none;
}
.p-dropzone-main {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}
.p-dropzone-browse {
  font-size: 13px;
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}
.p-dropzone:hover .p-dropzone-browse { text-decoration-color: var(--teal); }
.p-dropzone-hint {
  font-size: 12px;
  color: rgba(232, 244, 248, 0.35);
  margin-top: 4px;
}
#upload-file-input { display: none; }

/* Selected file info bar */
.p-file-info {
  display: none;
  align-items: center;
  gap: 12px;
  background: rgba(14, 158, 142, 0.08);
  border: 1px solid rgba(14, 158, 142, 0.20);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
}
.p-file-info.visible { display: flex; }

.p-file-icon { font-size: 20px; flex-shrink: 0; }
.p-file-details { flex: 1; min-width: 0; }
.p-file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-file-size {
  font-size: 11px;
  color: rgba(232, 244, 248, 0.45);
  margin-top: 2px;
}
.p-file-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(14, 158, 142, 0.15);
  border-radius: 4px;
  padding: 3px 7px;
}
.p-file-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(232, 244, 248, 0.35);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s ease;
  line-height: 1;
}
.p-file-clear:hover { color: rgba(232, 244, 248, 0.8); }

/* ── Progress section ──────────────────────────────────────────────────────── */
.p-progress {
  display: none;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
}
.p-progress.visible { display: flex; }

.p-progress-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
/* Connector line between steps */
.p-progress-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 30px;
  bottom: -10px;
  width: 1px;
  background: rgba(232, 244, 248, 0.10);
}
.p-progress-step.step-done::after { background: rgba(14, 158, 142, 0.35); }

.p-step-dot {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 244, 248, 0.18);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.3s ease;
  margin-top: 1px;
}
.p-progress-step.step-done .p-step-dot {
  border-color: var(--teal);
  background: rgba(14, 158, 142, 0.18);
  color: var(--teal);
}
.p-progress-step.step-active .p-step-dot {
  border-color: var(--teal);
  background: transparent;
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 158, 142, 0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(14, 158, 142, 0); }
}

.p-step-text {
  font-size: 13px;
  font-weight: 400;
  color: rgba(232, 244, 248, 0.35);
  line-height: 1.4;
  padding-top: 2px;
  transition: color 0.3s ease;
}
.p-progress-step.step-active .p-step-text { color: var(--white); font-weight: 500; }
.p-progress-step.step-done .p-step-text   { color: rgba(232, 244, 248, 0.55); }

/* ── Error section ─────────────────────────────────────────────────────────── */
.p-error {
  display: none;
  align-items: flex-start;
  gap: 12px;
  background: rgba(220, 60, 60, 0.08);
  border: 1px solid rgba(220, 60, 60, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 16px;
}
.p-error.visible { display: flex; }
.p-error-icon { font-size: 18px; flex-shrink: 0; }
.p-error-body { flex: 1; }
.p-error-title {
  font-size: 13px;
  font-weight: 600;
  color: #f87171;
  margin-bottom: 4px;
}
.p-error-detail {
  font-size: 12px;
  color: rgba(232, 244, 248, 0.50);
  line-height: 1.5;
}
.p-error-retry {
  background: none;
  border: 1px solid rgba(220, 60, 60, 0.35);
  border-radius: 6px;
  color: #f87171;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s ease;
}
.p-error-retry:hover { background: rgba(220, 60, 60, 0.12); }

/* ══════════════════════════════════════════════════════════════════════════
   Screen 2: Results (#results) — Document report layout
   ══════════════════════════════════════════════════════════════════════════ */

/* Classification colour tokens */
:root {
  --r-green:  #3BB869;
  --r-red:    #E8503A;
  --r-yellow: #F0A500;
  --r-gray:   #8098B0;
}

/* Ghost button — used on other screens too */
.p-btn-ghost {
  background: none;
  border: 1px solid rgba(232,244,248,0.2);
  border-radius: 8px;
  color: rgba(232,244,248,0.55);
  font-family: Inter, sans-serif;
  font-size: 13px;
  padding: 7px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.p-btn-ghost:hover {
  border-color: rgba(232,244,248,0.45);
  color: rgba(232,244,248,0.9);
}

/* ── Results screen layout overrides ──────────────────────────────────────── */
.r-screen {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

/* Outer container — max-width report column, centered */
.r-report {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Sticky report header ─────────────────────────────────────────────────── */
.r-report-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10,18,30,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 18px 36px 14px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.r-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.r-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Document name + context row */
.r-header-meta {
  margin-bottom: 12px;
}
.r-doc-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}
.r-doc-context {
  font-size: 12px;
  color: rgba(232,244,248,0.45);
  letter-spacing: 0.02em;
}

/* ── Summary band in header ───────────────────────────────────────────────── */
.r-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.r-summary--header {
  /* compact version inside sticky header */
}
.r-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 80px;
  flex: 1;
}
.r-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.r-stat-dot--green  { background: var(--r-green); }
.r-stat-dot--red    { background: var(--r-red); }
.r-stat-dot--yellow { background: var(--r-yellow); }
.r-stat-dot--gray   { background: var(--r-gray); }
.r-stat-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.r-stat-label {
  font-size: 10px;
  color: rgba(232,244,248,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* ── "Analyze another" button in header ───────────────────────────────────── */
.r-new-btn {
  background: none;
  border: 1px solid rgba(232,244,248,0.18);
  border-radius: 8px;
  color: rgba(232,244,248,0.5);
  font-family: Inter, sans-serif;
  font-size: 12px;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.r-new-btn:hover {
  border-color: rgba(232,244,248,0.4);
  color: rgba(232,244,248,0.9);
}

/* ── Export dropdown ──────────────────────────────────────────────────────── */
.r-export-wrap {
  position: relative;
}

.r-export-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--teal);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.r-export-btn:hover { background: #0ab8a6; }
.r-export-btn:active { transform: scale(0.97); }
.r-export-arrow {
  font-size: 10px;
  transition: transform 0.15s;
  display: inline-block;
}
.r-export-btn[aria-expanded="true"] .r-export-arrow { transform: rotate(180deg); }

.r-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--navy2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 100;
}
.r-export-menu[hidden] { display: none; }

.r-export-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  color: rgba(232,244,248,0.8);
  font-family: Inter, sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.r-export-item:hover {
  background: rgba(255,255,255,0.07);
  color: var(--white);
}

.r-export-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 6px;
}

/* ── Report body ──────────────────────────────────────────────────────────── */
.r-report-body {
  padding: 28px 36px;
  flex: 1;
}

/* Verdict headline */
.r-verdict {
  font-size: 15px;
  color: rgba(232,244,248,0.6);
  margin-bottom: 28px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border-left: 3px solid rgba(255,255,255,0.1);
  line-height: 1.5;
}
.r-verdict strong { color: var(--white); }

/* Node section group */
.r-section {
  margin-bottom: 28px;
}
.r-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(232,244,248,0.4);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.r-section-header-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Individual node card */
.r-node {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 6px;
  border-left: 3px solid transparent;
  transition: background 0.15s;
}
.r-node:hover { background: rgba(255,255,255,0.07); }
.r-node--red    { border-left-color: var(--r-red); }
.r-node--yellow { border-left-color: var(--r-yellow); }
.r-node--gray   { border-left-color: var(--r-gray); }
.r-node--green  { border-left-color: var(--r-green); }

.r-node-body { flex: 1; min-width: 0; }
.r-node-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.r-node-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  flex: 1;
  min-width: 140px;
}
.r-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.r-badge--cat {
  background: rgba(255,255,255,0.08);
  color: rgba(232,244,248,0.6);
}
.r-badge--req {
  background: rgba(232,80,58,0.18);
  color: #E8503A;
}
.r-node-reasoning {
  font-size: 13px;
  color: rgba(232,244,248,0.5);
  line-height: 1.45;
}

/* Clarifications section */
.r-clarifications {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.r-clarif-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(232,244,248,0.4);
  margin-bottom: 14px;
}
.r-clarif-item {
  padding: 14px 16px;
  background: rgba(240,165,0,0.06);
  border-left: 3px solid var(--r-yellow);
  border-radius: 0 8px 8px 0;
  margin-bottom: 10px;
}
.r-clarif-node {
  font-size: 11px;
  font-weight: 600;
  color: var(--r-yellow);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.r-clarif-question {
  font-size: 14px;
  color: rgba(232,244,248,0.8);
  line-height: 1.5;
}

/* ── Report footer ────────────────────────────────────────────────────────── */
.r-report-footer {
  padding: 24px 36px 48px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.r-footer-btn {
  background: none;
  border: 1px solid rgba(14,158,142,0.35);
  border-radius: 10px;
  color: var(--teal);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.r-footer-btn:hover {
  background: rgba(14,158,142,0.08);
  border-color: var(--teal);
}

/* ── View toggle (List / Graph) ───────────────────────────────────────────── */
.r-view-toggle {
  display: flex;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.r-view-btn {
  background: none;
  border: none;
  color: rgba(232,244,248,0.45);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.r-view-btn + .r-view-btn {
  border-left: 1px solid rgba(255,255,255,0.14);
}
.r-view-btn--active {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}
.r-view-btn:not(.r-view-btn--active):hover {
  background: rgba(255,255,255,0.05);
  color: rgba(232,244,248,0.75);
}

/* ── Graph layout mode switcher ────────────────────────────────────────────── */
.cg-mode-switcher {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
}

.cg-mode-btn {
  width: 30px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(232,244,248,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  padding: 0;
}

.cg-mode-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(232,244,248,0.75);
  border-color: rgba(255,255,255,0.2);
}

.cg-mode-btn--active {
  background: rgba(14, 158, 142, 0.18);
  border-color: rgba(14, 158, 142, 0.55);
  color: #0e9e8e;
}

/* ── Non-hub node shapes ──────────────────────────────────────────────────── */

/* Suppress shimmer glow for all flat shapes */
.cg-shape-cluster::before,
.cg-shape-pill::before,
.cg-shape-tree-cat::before,
.cg-shape-tree-card::before { display: none !important; }

/* Mode 2 — Cluster: flat colored rectangles, mandatory nodes larger */
.cg-shape-cluster {
  width: auto !important;
  height: auto !important;
  min-width: 76px;
  max-width: 124px;
  min-height: 32px;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 5px 7px !important;
  text-align: left !important;
  justify-content: flex-start;
  align-items: flex-start;
}
.cg-shape-cluster.cg-mandatory {
  min-width: 96px;
  min-height: 40px;
}
.cg-shape-cluster .cg-orb-label {
  font-size: 9px;
  font-weight: 600;
  white-space: normal;
  line-height: 1.3;
}

/* Mode 3 — Radial: thin horizontal pills with colored left border */
.cg-shape-pill {
  width: max-content !important;
  min-width: 88px;
  max-width: 196px;
  height: 28px !important;
  border-radius: 14px !important;
  background: rgba(11,20,33,0.95) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 0 12px 0 10px !important;
  justify-content: flex-start;
  text-align: left !important;
}
.cg-shape-pill.cg-orb-red    { border-left: 3px solid #E8643A !important; }
.cg-shape-pill.cg-orb-yellow { border-left: 3px solid #F0A500 !important; }
.cg-shape-pill.cg-orb-gray   { border-left: 3px solid #8098B0 !important; }
.cg-shape-pill.cg-orb-green  { border-left: 3px solid #3BB869 !important; }
.cg-shape-pill .cg-orb-label {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(232,244,248,0.85);
}

/* Mode 4 — Tree: category section chips */
.cg-shape-tree-cat {
  width: 108px !important;
  height: 30px !important;
  border-radius: 15px !important;
  background: rgba(14,158,142,0.15) !important;
  border: 1px solid rgba(14,158,142,0.40) !important;
  box-shadow: none !important;
  padding: 0 10px !important;
}
.cg-shape-tree-cat .cg-orb-label {
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(14,158,142,0.9);
}
.cg-shape-tree-cat .cg-orb-sub { display: none !important; }

/* Mode 4 — Tree: leaf org-chart cards with colored top border */
.cg-shape-tree-card {
  width: 140px !important;
  height: 54px !important;
  border-radius: 6px !important;
  background: rgba(11,20,33,0.95) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-top-width: 3px !important;
  box-shadow: none !important;
  padding: 7px 8px 6px !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left !important;
}
.cg-shape-tree-card.cg-orb-red    { border-top-color: #E8643A !important; }
.cg-shape-tree-card.cg-orb-yellow { border-top-color: #F0A500 !important; }
.cg-shape-tree-card.cg-orb-gray   { border-top-color: #8098B0 !important; }
.cg-shape-tree-card.cg-orb-green  { border-top-color: #3BB869 !important; }
.cg-shape-tree-card .cg-orb-label {
  font-size: 8.5px;
  font-weight: 600;
  white-space: normal;
  overflow: hidden;
  line-height: 1.3;
  max-height: 2.6em;
  color: rgba(232,244,248,0.92);
}
.cg-tree-badge {
  font-family: Inter, sans-serif;
  font-size: 7px;
  font-weight: 500;
  color: rgba(232,244,248,0.42);
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  padding: 1px 4px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none !important;
  position: relative;
  z-index: 1;
  align-self: flex-start;
}

/* Tree mode spoke styling — subtle connectors for org chart */
.cg-spokes[data-mode="tree"] .cg-spoke {
  stroke: rgba(255,255,255,0.14);
  stroke-width: 1;
}

/* ── Graph mode screen overrides ──────────────────────────────────────────── */
/* Graph mode: outer screen scrolls; header is sticky on top (z-index 10);
   container is in normal flow so it sits below the header naturally */
.r-screen--graph {
  overflow-y: auto;
}
.r-screen--graph .cg-container {
  position: relative;  /* in-flow: follows the header, never overlaps it */
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   ContraGraph — interactive orb/spoke canvas (#cg-container)
   ══════════════════════════════════════════════════════════════════════════ */

/* Base (hidden / non-graph): absolute overlay. Graph mode override above wins. */
.cg-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  touch-action: manipulation;
}
.cg-container[hidden] { display: none; }

/* SVG spokes layer */
.cg-spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Override shared spoke-line defaults for ContraGraph — more visible than marketing graph */
.cg-spoke {
  stroke: rgba(14, 158, 142, 0.55);
  stroke-width: 2;
  opacity: 1;
}
.cg-spoke.highlighted {
  stroke: rgba(240, 165, 0, 0.85);
  stroke-width: 2.5;
  opacity: 1;
}

/* ── ContraGraph orb base ─────────────────────────────────────────────────── */
/* Shares .orb-label, .orb-sub, ::before glass shimmer with marketing orbs.
   Separate base class to avoid collisions with graph.js state. */
.cg-orb {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease, opacity 0.3s ease;
  opacity: 0;
  z-index: 3;
  will-change: transform;
}
/* Glass shimmer */
.cg-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.18), transparent 62%);
  pointer-events: none;
}
/* Block child pointer events (same fix as graph.js) */
.cg-orb *, .cg-orb *::before, .cg-orb *::after { pointer-events: none !important; }

/* Entrance animation — JS adds .cg-visible after stagger delay */
.cg-orb.cg-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Hover scale — JS adds .cg-hovered via geometric hit test */
.cg-orb.cg-hovered {
  transform: translate(-50%, -50%) scale(1.06) !important;
  z-index: 10;
}

/* ── ContraGraph orb types ────────────────────────────────────────────────── */

/* Hero — document name — navy blue (matches marketing hero) */
.cg-orb-hero {
  width: 132px; height: 132px;
  background: radial-gradient(circle at 40% 35%, #1E8FC5, #0D5A8A);
  box-shadow: 0 0 40px rgba(30,111,165,0.5), 0 0 80px rgba(30,111,165,0.18),
              inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Category ring — dark navy with teal border */
.cg-orb-cat {
  width: 72px; height: 72px;
  background: radial-gradient(circle at 40% 35%, #1E3350, #111E2E);
  border: 1.5px solid rgba(14,158,142,0.50);
  box-shadow: 0 0 14px rgba(14,158,142,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cg-orb-cat.cg-hovered { border-color: rgba(240,165,0,0.7); }

/* Node orbs — 72px, matching category orb size */
.cg-orb-node { width: 72px; height: 72px; }

.cg-orb-red {
  background: linear-gradient(135deg, #E8643A 0%, #B03520 100%);
  box-shadow: 0 0 14px rgba(232,100,58,0.50), inset 0 1px 0 rgba(255,255,255,0.14);
}
.cg-orb-yellow {
  background: linear-gradient(135deg, #F0A500 0%, #B07000 100%);
  box-shadow: 0 0 14px rgba(240,165,0,0.45), inset 0 1px 0 rgba(255,255,255,0.14);
}
.cg-orb-gray {
  background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%);
  box-shadow: 0 0 10px rgba(74,85,104,0.40), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cg-orb-green {
  background: linear-gradient(135deg, #0E9E8E 0%, #066B5E 100%);
  box-shadow: 0 0 14px rgba(14,158,142,0.50), inset 0 1px 0 rgba(255,255,255,0.14);
}

/* ── ContraGraph orb labels ───────────────────────────────────────────────── */
.cg-orb-label {
  font-family: Inter, sans-serif;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  line-height: 1.2;
  pointer-events: none !important;
  position: relative;
  z-index: 1;
}
.cg-orb-hero .cg-orb-label   { font-size: 12px; }
.cg-orb-cat  .cg-orb-label   { font-size: 9.5px; }
.cg-orb-node .cg-orb-label   { font-size: 9px; }

.cg-orb-sub {
  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 7.5px;
  color: rgba(255,255,255,0.50);
  margin-top: 2px;
  line-height: 1.2;
  pointer-events: none !important;
  position: relative;
  z-index: 1;
}

/* ── Node detail card ─────────────────────────────────────────────────────── */
.cg-detail {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: min(380px, 88vw);
  background: rgba(8, 18, 32, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 20px 22px 18px;
  z-index: 20;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.cg-detail[hidden] { display: none; }

.cg-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: rgba(232,244,248,0.4);
  width: 26px; height: 26px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.cg-detail-close:hover { color: var(--white); border-color: rgba(255,255,255,0.35); }

.cg-detail-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.cg-detail-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin: 0 0 10px;
  padding-right: 24px;
}
.cg-detail-reasoning {
  font-size: 13px;
  color: rgba(232,244,248,0.6);
  line-height: 1.5;
  margin: 0 0 10px;
}
.cg-detail-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cg-detail-category,
.cg-detail-conf {
  font-size: 11px;
  color: rgba(232,244,248,0.35);
  font-weight: 500;
}

/* ── Toast notification ───────────────────────────────────────────────────── */
#r-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,35,55,0.97);
  border: 1px solid rgba(14,158,142,0.3);
  color: var(--white);
  font-family: Inter, sans-serif;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .p-card { padding: 28px 20px; }
  .p-heading { font-size: 22px; }
  .p-dropzone { padding: 28px 16px; }
  .r-report-header { padding: 16px 20px 12px; }
  .r-report-body { padding: 20px 20px; }
  .r-report-footer { padding: 20px 20px 36px; }
  .r-doc-name { font-size: 15px; max-width: 100%; }
  .r-stat { min-width: 64px; padding: 8px 10px; }
  .r-stat-count { font-size: 15px; }
  .r-header-actions { gap: 6px; }
  .r-new-btn { display: none; }
}