/* ============================================================
   Proposal Pitch Portal — Design Tokens & Base Styles
   Professional, on white. Serif narrative voice + grotesk product UI.
   ============================================================ */

:root {
  /* ---- Type ---- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- Surfaces & neutrals ---- */
  --bg-app: #F4F5F7;          /* page bg behind cards */
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;       /* subtle raised/recessed */
  --surface-sunken: #F1F3F5;
  --border: #E7E9ED;
  --border-strong: #D6DAE0;
  --border-faint: #EFF1F4;

  /* ---- Ink (text) ---- */
  --ink-1: #121821;           /* primary */
  --ink-2: #565F6D;           /* secondary */
  --ink-3: #8A93A1;           /* tertiary / muted */
  --ink-4: #AEB5C0;           /* faint labels */

  /* ---- Sidebar (dark chrome) ---- */
  --side-bg: #0E1620;
  --side-bg-2: #131D2A;
  --side-border: #232E3C;
  --side-ink: #93A0B1;        /* default menu label */
  --side-ink-active: #FFFFFF;
  --side-ink-faint: #5E6B7C;
  --side-hover: #1A2532;

  /* ---- Accent (brand: Citi blue) ---- */
  --accent: #1463CE;
  --accent-hover: #1156B5;
  --accent-press: #0E4694;
  --accent-tint: #E7F0FC;
  --accent-tint-2: #C7DCF7;
  --accent-ink: #0C4A9E;      /* accent text on light */
  --accent-on-dark: #8FBDF2;  /* accent legible on the dark sidebar */
  --accent-grad: linear-gradient(155deg, #2A7BE0 0%, #0C3F88 100%); /* Citi blue gradient */

  /* ---- Semantic status (phase tracker / health) ---- */
  --st-done: #18935F;         /* done */
  --st-done-bg: #E4F3EB;
  --st-progress: #2F6BE0;     /* in progress, on time */
  --st-progress-bg: #E6EEFC;
  --st-risk: #C98208;         /* at risk */
  --st-risk-bg: #FBF0DC;
  --st-late: #D24A3D;         /* late / blocked */
  --st-late-bg: #FBE7E4;
  --st-pending: #CDD3DB;      /* pending / not started */
  --st-pending-bg: #F1F3F5;

  /* ---- Data / chart palette (calm, professional) ---- */
  --chart-won: #18935F;
  --chart-lost: #C7727A;
  --chart-dark: #B4BCC7;
  --chart-bar: #1463CE;
  --chart-track: #EEF0F3;

  /* ---- Radii ---- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadows (soft, low, professional) ---- */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sh-md: 0 4px 14px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.05);
  --sh-lg: 0 14px 40px rgba(16, 24, 40, 0.12), 0 3px 10px rgba(16, 24, 40, 0.06);
  --sh-xl: 0 30px 70px rgba(13, 20, 33, 0.22), 0 8px 24px rgba(13, 20, 33, 0.10);
  --sh-focus: 0 0 0 3px rgba(20, 99, 206, 0.20);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 0.84, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --side-w: 268px;
  --side-w-rail: 64px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--ink-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1;
}

#root { height: 100vh; width: 100vw; }

/* tabular figures helper */
.tnum { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums; }

/* serif display helper */
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); }

h1, h2, h3, h4, p { margin: 0; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

::selection { background: var(--accent-tint-2); color: var(--accent-ink); }

/* scrollbars in panes */
.scroll-y { overflow-y: auto; overflow-x: hidden; }
.scroll-y::-webkit-scrollbar { width: 10px; }
.scroll-y::-webkit-scrollbar-thumb { background: #D7DBE1; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.scroll-y::-webkit-scrollbar-thumb:hover { background: #C2C8D0; background-clip: content-box; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* ---- Reusable bits ---- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.sample-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #8A5A12;
  background: var(--st-risk-bg);
  border: 1px solid #F0DFC0;
  padding: 5px 12px 5px 10px;
  border-radius: var(--r-pill);
}
.sample-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st-risk); box-shadow: 0 0 0 3px rgba(201,130,8,0.14); }

/* fill bracket placeholders [insert: ...] */
.fill {
  color: var(--accent-ink);
  background: var(--accent-tint);
  border-bottom: 1.5px dashed var(--accent);
  padding: 0 4px;
  border-radius: 3px;
  font-style: normal;
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes seg-fill   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes seg-pulse  { 0%,100% { opacity: 0; } 50% { opacity: 0.28; } }
@keyframes ring-pulse { 0% { transform: scale(1); opacity: 0.5; } 70%,100% { transform: scale(1.5); opacity: 0; } }
@keyframes node-pop   { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

@keyframes fade-up    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-up-sm { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-right { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fade-left  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scale-in   { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes pop-check  { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* clip-wipe reveal for headlines */
@keyframes clip-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* skeleton shimmer */
@keyframes shimmer    { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 37%, #EEF0F3 63%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
}

/* ambient live dot */
@keyframes live-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(24,147,95,0.5); } 50% { box-shadow: 0 0 0 5px rgba(24,147,95,0); } }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-done); animation: live-dot 2.4s var(--ease-inout) infinite; }

/* attention pulse for the partner link */
@keyframes attn { 0%,100% { box-shadow: 0 0 0 0 rgba(20,99,206,0); } 50% { box-shadow: 0 0 0 4px rgba(20,99,206,0.16); } }

/* login */
@keyframes login-card { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes login-mark { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

/* secure-connection sequence */
@keyframes sc-card-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes sc-orbit { to { transform: rotate(360deg); } }
@keyframes sc-ring { 0% { transform: scale(0.7); opacity: 0.55; } 80%, 100% { transform: scale(1.65); opacity: 0; } }
@keyframes sc-row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes sc-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-seal { 0% { transform: scale(0.4); opacity: 0; } 55% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.sc-spinner {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid var(--accent-tint-2); border-top-color: var(--accent);
  animation: spin 680ms linear infinite;
}
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes tip-halo { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes row-risk { 0%,100% { background: var(--st-risk-bg); } 50% { background: #FDF6E9; } }
.prow:hover { background: var(--surface-2) !important; }
.partner-trigger:hover { background: var(--accent-tint); }

/* chart hover tooltips */
.chart-bar { transition: filter 140ms, opacity 140ms; }
.chart-bar:hover { filter: brightness(1.06) saturate(1.05); }
.tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink-1); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; pointer-events: none; opacity: 0;
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); z-index: 20;
  box-shadow: var(--sh-md);
}
.tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink-1); }
.chart-bar:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* sidebar nav */
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--side-ink-faint); padding: 0 14px 8px; }
.nav-item:hover:not(.nav-disabled) { color: var(--side-ink-active); }
.nav-disabled { cursor: default; }
.side-logout { transition: background 140ms, color 140ms; }
.side-logout:hover { background: var(--side-hover); color: var(--side-ink-active); }
.panel-x:hover { background: var(--surface-sunken); color: var(--ink-1); }
.cf-row { transition: background 130ms; }
.cf-row:hover { background: var(--surface-sunken); }
.panel-x-dark { transition: background 140ms, color 140ms; }
.panel-x-dark:hover { background: var(--side-hover); color: #fff; }

/* pane transitions */
@keyframes pane-fwd  { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes pane-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.chrome-btn { transition: background 140ms, color 140ms; }
.chrome-btn:hover { background: var(--surface-sunken); color: var(--ink-1); }
.pager-btn { transition: background 140ms; }
.pager-btn:hover:not(:disabled) { background: var(--surface-sunken); }
.topbar-search { transition: border-color 140ms; cursor: text; }
.topbar-search:hover { border-color: var(--border-strong); }

/* secure-connection chip */
.secure-chip { transition: border-color 160ms, box-shadow 160ms; cursor: default; }
.secure-chip:hover { border-color: var(--st-done); box-shadow: 0 0 0 3px var(--st-done-bg); }
.secure-lock { position: relative; }
.secure-lock::after {
  content: ""; position: absolute; inset: 0; border-radius: 7px;
  border: 1.5px solid var(--st-done); opacity: 0;
  animation: secure-ring 3s var(--ease-inout) infinite;
}
@keyframes secure-ring { 0%,100% { opacity: 0; transform: scale(1); } 12% { opacity: 0.45; } 45% { opacity: 0; transform: scale(1.35); } }

/* reporting */
.act-card:hover { background: var(--surface-2) !important; border-color: var(--border-strong) !important; }
.day-head { transition: background 140ms; }
.day-head:hover { background: var(--surface-sunken); }
.details-btn { transition: background 160ms, transform 120ms, box-shadow 160ms; }
.details-btn:hover { background: var(--accent-hover); box-shadow: 0 6px 18px rgba(20,99,206,0.30); }
.details-btn:active { transform: scale(0.97); }

/* generic card hover lift used across data views */
.lift { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.login-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.4px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .skeleton { animation: none; }
}