/* Disney Data Cloud · application styles */

html, body { background: #FAF7F2; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; color: #1B2230; }

/* Reusable primitives */
.card        { background: #fff; border: 1px solid #E6E1D8; border-radius: 16px; }
.card-soft   { background: #FBF9F4; border: 1px solid #E6E1D8; border-radius: 14px; }
.chip        { display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .625rem; border-radius:9999px; font-size:.75rem; font-weight:500; background:#F3F0E9; color:#1B2230; border:1px solid #E6E1D8; }
.chip-navy   { background:#0B1F4D; color:#fff; border-color:#0B1F4D; }
.chip-gold   { background:rgba(201,162,39,0.12); color:#A88517; border-color:rgba(201,162,39,0.30); }
.chip-emerald{ background:rgba(16,185,129,0.10); color:#059669; border-color:rgba(16,185,129,0.25); }
.chip-amber  { background:rgba(245,158,11,0.10); color:#B45309; border-color:rgba(245,158,11,0.25); }
.chip-rose   { background:rgba(244,63,94,0.10);  color:#BE123C; border-color:rgba(244,63,94,0.25); }
.badge       { display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .5rem; border-radius:9999px; font-size:.6875rem; font-weight:500; }
.kpi-num     { font-family:'DM Serif Display', ui-serif, Georgia, serif; font-weight:400; letter-spacing:-0.01em; }

.tab-btn         { padding:.45rem .8rem; border-radius:.5rem; color:#6B7280; font-weight:500; white-space:nowrap; position:relative; }
.tab-btn:hover   { color:#0B1F4D; background:#FAF7F2; }
.tab-btn.active  { color:#0B1F4D; background:#FAF7F2; }
.tab-btn.active::after { content:''; position:absolute; left:.75rem; right:.75rem; bottom:-9px; height:2px; background:#C9A227; border-radius:2px; }

.seg-pill           { padding:.3rem .65rem; border-radius:9999px; border:1px solid #E6E1D8; background:#fff; color:#6B7280; font-weight:500; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
.seg-pill.active    { background:#0B1F4D; color:#fff; border-color:#0B1F4D; }
.seg-pill .dot      { width:.4rem; height:.4rem; border-radius:9999px; margin-right:.4rem; display:inline-block; }

.bar          { height:6px; border-radius:9999px; background:#EEE9DE; overflow:hidden; }
.bar > span   { display:block; height:100%; background:linear-gradient(90deg,#0B1F4D,#3B5BA5); }
.bar.gold > span { background:linear-gradient(90deg,#C9A227,#E0BE54); }

.row-hover:hover { background:#FBF9F4; }

.scrollbar-thin::-webkit-scrollbar { height:8px; width:8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:#E6E1D8; border-radius:8px; }

/* ─── Mickey SSO gate ───────────────────────────────────────────────── */
.mickey-ring {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(201,162,39,0.0) 80deg, #C9A227 200deg, #E0BE54 320deg, transparent 360deg);
  filter: blur(2px);
  mask: radial-gradient(circle, transparent 64px, #000 65px, #000 86px, transparent 87px);
  -webkit-mask: radial-gradient(circle, transparent 64px, #000 65px, #000 86px, transparent 87px);
  animation: ring-spin 1.6s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

.mickey-pop { animation: pop 600ms cubic-bezier(.22,.9,.36,1.15) both; }
@keyframes pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.mickey-key { transform-origin: 80px 100px; animation: key-spin 2.4s ease-in-out infinite; }
@keyframes key-spin {
  0%, 40%   { transform: scale(0.7); opacity: 0.4; }
  60%, 100% { transform: scale(1.0); opacity: 1; }
}

#auth-gate.fade-out { opacity: 0; transition: opacity 500ms ease; pointer-events: none; }

/* ─── Mickey marks reused in the Snowflake Optimization deck ───────── */
/* Three visible animations used on the FinOps → Story sub-tab:
   1. .mickey-watermark — large faint silhouette behind the deck header
                          (cream paper background, so ~22% opacity is needed)
   2. .mickey-mark      — step-number badge that pops in next to "Step N of 5"
   3. .mickey-spin      — wobbling head + ears used as the closed-loop glyph
                          on step 4 (Detect → Apply → Measure)
*/
.mickey-watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.22;
  z-index: 0;
  animation: mickey-bob 5s ease-in-out infinite;
}
.mickey-mark {
  display: inline-block;
  width: 28px; height: 28px;
  vertical-align: -8px;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.9));
  animation: mickey-pop-in 700ms cubic-bezier(.22,.9,.36,1.15) both;
}
.mickey-mark.delay-1 { animation-delay: 120ms; }
.mickey-mark.delay-2 { animation-delay: 240ms; }
.mickey-mark.delay-3 { animation-delay: 360ms; }
.mickey-mark.delay-4 { animation-delay: 480ms; }
.mickey-mark.delay-5 { animation-delay: 600ms; }
.mickey-spin {
  display: inline-block;
  width: 36px; height: 36px;
  vertical-align: -11px;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 2px 4px rgba(11,31,77,0.25));
  animation: mickey-spin-anim 2.8s ease-in-out infinite;
}
@keyframes mickey-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}
@keyframes mickey-pop-in {
  0%   { transform: scale(0.3) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.2)  rotate(8deg);   opacity: 1; }
  100% { transform: scale(1)    rotate(0);      opacity: 1; }
}
@keyframes mickey-spin-anim {
  0%, 100% { transform: rotate(0deg)   scale(1); }
  25%      { transform: rotate(12deg)  scale(1.1); }
  50%      { transform: rotate(0deg)   scale(0.94); }
  75%      { transform: rotate(-12deg) scale(1.1); }
}

/* ─── Map (Leaflet) ──────────────────────────────────────────────────── */
#leaflet-container { width: 100%; height: 560px; border-radius: 14px; }
.leaflet-container { background: #F1ECE2 !important; font-family: 'Inter', sans-serif; }
.leaflet-control-attribution { background: rgba(255,255,255,0.7) !important; font-size: 10px !important; color: #6B7280 !important; }
.leaflet-control-attribution a { color: #0B1F4D !important; }
.leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 10px 30px -10px rgba(11,31,77,0.25); }
.leaflet-popup-content { margin: 10px 14px; font-size: 12px; }

.park-pin {
  position: relative;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  cursor: pointer;
}
.park-pin .core {
  width: 14px; height: 14px;
  border-radius: 9999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(11,31,77,0.18), 0 6px 12px -4px rgba(11,31,77,0.45);
  transition: transform 140ms ease;
}
.park-pin:hover .core { transform: scale(1.4); }
.park-pin.muted .core { opacity: 0.55; }
.park-pin .halo {
  position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 9999px;
  animation: halo-ping 2.4s ease-out infinite;
  pointer-events: none;
}
.park-pin.muted .halo { display: none; }
@keyframes halo-ping {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(3.0); opacity: 0;   }
}

/* ─── Sub-tabs (within a surface) ────────────────────────────────────── */
.sub-tabs { display:inline-flex; gap:.25rem; background:#FBF9F4; border:1px solid #E6E1D8; border-radius:.75rem; padding:.25rem; }
.sub-tab  { padding:.4rem .8rem; border-radius:.5rem; font-size:.8125rem; font-weight:500; color:#6B7280; cursor:pointer; }
.sub-tab.active { background:#fff; color:#0B1F4D; box-shadow:0 1px 0 rgba(11,31,77,0.05); }

/* ─── Period select ──────────────────────────────────────────────────── */
.period-select { font-size:.75rem; padding:.3rem .65rem .3rem .35rem; border:1px solid #E6E1D8; border-radius:9999px; background:#fff; color:#1B2230; }

/* ─── FinOps charts (SVG primitives) ─────────────────────────────────── */
.spark-line     { fill: none; stroke: #0B1F4D; stroke-width: 1.6; }
.spark-area     { fill: rgba(11,31,77,0.08); }
.forecast-line  { stroke: #C9A227; stroke-dasharray: 4 3; }
.forecast-band  { fill: rgba(201,162,39,0.14); }
.axis-text      { fill: #6B7280; font-size: 10px; }
.bar-anim       { transform-origin: left center; animation: bar-grow 600ms cubic-bezier(.22,.9,.36,1) both; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Donut ring */
.donut-ring     { stroke-width: 22; fill: none; transform: rotate(-90deg); transform-origin: center; }

/* Workload heatmap */
.heat-grid { display: grid; grid-template-columns: 32px repeat(24, 1fr); gap: 2px; }
.heat-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(11,31,77,0.06); transition: transform 100ms ease; }
.heat-cell:hover { transform: scale(1.4); z-index: 2; position: relative; box-shadow: 0 0 0 1px #0B1F4D; }
.heat-row-label { font-size: 10px; color: #6B7280; align-self: center; }

/* Optimization process flow */
.proc-flow { display:flex; align-items:stretch; gap:0; }
.proc-card { flex:1; background:#fff; border:1px solid #E6E1D8; border-radius:14px; padding:14px; min-width:0; position:relative; cursor:pointer; transition: box-shadow 140ms ease, transform 140ms ease; }
.proc-card:hover { box-shadow: 0 12px 28px -14px rgba(11,31,77,0.25); transform: translateY(-2px); }
.proc-card + .proc-card { margin-left: 8px; }
.proc-card::after {
  content: ''; position: absolute; right: -16px; top: 50%;
  width: 14px; height: 2px; background: linear-gradient(90deg, #0B1F4D, transparent);
  transform: translateY(-50%); z-index: 1; pointer-events:none;
}
.proc-card:last-child::after { display: none; }

/* Agent trace */
.trace-step { display:grid; grid-template-columns:90px 1fr; gap:12px; padding:10px 0; border-top:1px dashed #E6E1D8; }
.trace-step:first-child { border-top:none; padding-top:0; }
.trace-kind { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#0B1F4D; padding-top:2px; }
.trace-text { font-size:13px; color:#1B2230; line-height:1.5; }

/* Mini sparkline (inline) */
.mini-spark { width: 100%; height: 36px; }

/* GenBI chat */
.bubble-user   { background:#0B1F4D; color:#fff; padding:10px 14px; border-radius: 14px 14px 4px 14px; align-self:flex-end; max-width: 80%; font-size: 13px; }
.bubble-bot    { background:#FBF9F4; border:1px solid #E6E1D8; padding:14px; border-radius: 14px 14px 14px 4px; max-width: 90%; font-size: 13px; }
.citation { font-size: 11px; color: #6B7280; padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid #E6E1D8; display:inline-flex; gap:6px; align-items:center; }

/* Subscribed bell */
.sub-on { color: #C9A227; }

/* Counter animation hook */
.counter[data-target] { display:inline-block; }

/* ─── Header eyebrow chips ───────────────────────────────────────────── */
.eyebrow-chip {
  display:inline-block;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B7280;
  background: #F3F0E9;
  border: 1px solid #E6E1D8;
  border-radius: 9999px;
  padding: 2px 7px;
  line-height: 1.2;
}

/* ─── Priority chips (Backlog) ───────────────────────────────────────── */
.prio-p1 { background:rgba(244,63,94,0.10);  color:#BE123C; border:1px solid rgba(244,63,94,0.30); }
.prio-p2 { background:rgba(245,158,11,0.10); color:#B45309; border:1px solid rgba(245,158,11,0.30); }
.prio-p3 { background:rgba(11,31,77,0.07);   color:#0B1F4D; border:1px solid rgba(11,31,77,0.20); }
.prio-chip { display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .5rem; border-radius:9999px; font-size:.6875rem; font-weight:600; letter-spacing:.04em; }

/* ─── Backlog status select ──────────────────────────────────────────── */
.status-sel { font-size: 11px; padding: 2px 6px; border-radius: 9999px; border: 1px solid #E6E1D8; background: #fff; cursor:pointer; }
.status-sel.s-new         { background:#F3F0E9; color:#1B2230; }
.status-sel.s-in-progress { background:rgba(11,31,77,0.08); color:#0B1F4D; border-color:rgba(11,31,77,0.25); }
.status-sel.s-done        { background:rgba(16,185,129,0.10); color:#059669; border-color:rgba(16,185,129,0.30); }
.status-sel.s-ignored     { background:#FBF9F4; color:#6B7280; }

/* ─── Playbook (in-app user story) ───────────────────────────────────── */
.playbook { display:grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
@media (max-width: 1024px) { .playbook { grid-template-columns: 1fr; } }
.playbook-nav { position: sticky; top: 96px; }
.playbook-step { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; border:1px solid transparent; color:#6B7280; }
.playbook-step:hover { background:#FBF9F4; }
.playbook-step.active { background:#0B1F4D; color:#fff; border-color:#0B1F4D; box-shadow:0 8px 20px -12px rgba(11,31,77,0.4); }
.playbook-step.done { color:#059669; }
.playbook-step .num { width: 22px; height: 22px; border-radius: 9999px; display:grid; place-items:center; font-size: 11px; font-weight: 600; background: #F3F0E9; color: inherit; }
.playbook-step.active .num { background: #C9A227; color:#0B1F4D; }
.playbook-step.done .num    { background: rgba(16,185,129,0.15); color: #059669; }

.advice-card {
  background: linear-gradient(135deg, #FBF9F4 0%, #fff 100%);
  border: 1px solid #E6E1D8;
  border-left: 4px solid #C9A227;
  border-radius: 12px;
  padding: 16px 18px;
}
.advice-card .lead {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  line-height: 1.4;
  color: #0B1F4D;
  letter-spacing: -0.005em;
}
.checklist li { display:flex; gap:10px; padding: 6px 0; font-size: 13px; line-height: 1.5; }
.checklist li::before { content:''; flex:none; width:18px; height:18px; border-radius:9999px; background:rgba(16,185,129,0.15); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); background-repeat:no-repeat; background-position:center; margin-top: 2px; }

.role-pill { padding: 3px 9px; border-radius: 9999px; font-size: 11px; font-weight: 500; background: rgba(11,31,77,0.07); color: #0B1F4D; border: 1px solid rgba(11,31,77,0.15); }

/* ─── Ring meters (governance) ───────────────────────────────────────── */
.ring-track { stroke: #EEE9DE; }
.ring-fill  { transition: stroke-dashoffset 800ms cubic-bezier(.22,.9,.36,1); }

/* ─── Alerts ─────────────────────────────────────────────────────────── */
.alert-row { display:grid; grid-template-columns: 32px 1fr auto; gap:10px; align-items:start; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid #E6E1D8; }
.alert-row + .alert-row { margin-top: 6px; }
.alert-sev-high { border-left: 3px solid #F43F5E; }
.alert-sev-med  { border-left: 3px solid #F59E0B; }
.alert-sev-low  { border-left: 3px solid #0B1F4D; }

/* ─── Drawer ─────────────────────────────────────────────────────────── */
#drawer.open       { transform: translateX(0); }
#drawer-veil.open  { opacity: 1; pointer-events: auto; }

/* ─── Wizard progress ────────────────────────────────────────────────── */
.progress-step.done   { background:#10B981; color:#fff; border-color:#10B981; }
.progress-step.active { background:#0B1F4D; color:#fff; border-color:#0B1F4D; }
.progress-step.todo   { background:#fff;   color:#6B7280; border-color:#E6E1D8; }

/* Subtle tab crossfade */
.tab-pane { animation: fade-in 220ms ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }