/* =========================================================================
   Brontoscale — Interactive Deployment Visualization
   ========================================================================= */
.viz-wrap { display:grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 2rem; align-items:start; }

/* KPI row */
.kpi-row { display:grid; grid-template-columns: repeat(5,1fr); gap: .75rem; margin-bottom: 1.6rem; }
.kpi { background:#fff; border:1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.kpi .v { font-family: var(--font-display); font-weight:700; font-size: 1.7rem; color: var(--ink); line-height:1; }
.kpi .l { font-size: 11px; text-transform:uppercase; letter-spacing:.07em; color: var(--text-muted); margin-top:.45rem; }

/* Controls */
.viz-controls { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 1.6rem; }
.control-group { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.55rem 0; border-bottom:1px dashed var(--border); }
.control-group:last-child { border-bottom:none; }
.control-group .label { font-size: var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); min-width: 92px; }
.chip {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight:600;
  padding: .35rem .7rem; border-radius: 999px; border:1px solid var(--border-strong);
  background:#fff; color: var(--ink-700); transition: all .15s ease; display:inline-flex; align-items:center; gap:.3rem;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color:#fff; border-color: var(--ink); }
.chip .dot { width:8px; height:8px; border-radius:2px; background: currentColor; opacity:.85; }
.chip .cnt { font-size: 10px; opacity:.7; }
.toggle { display:inline-flex; align-items:center; gap:.5rem; font-size: var(--text-xs); font-weight:600; color: var(--ink-700); cursor:pointer; }
.switch { position:relative; width:36px; height:20px; background: var(--border-strong); border-radius:999px; transition: background .15s; flex-shrink:0; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition: transform .15s; box-shadow: var(--shadow-sm); }
.toggle input { display:none; }
.toggle input:checked + .switch { background: var(--cyan); }
.toggle input:checked + .switch::after { transform: translateX(16px); }
.reset-btn { margin-left:auto; background:none; border:none; color: var(--brand-bright); font-size: var(--text-xs); font-weight:600; }
.reset-btn:hover { color: var(--accent-hover); text-decoration:underline; }

.colorby { display:inline-flex; background: var(--bg-soft); border:1px solid var(--border); border-radius:999px; padding:3px; }
.colorby button { font-size: var(--text-xs); font-weight:600; padding:.32rem .8rem; border:none; background:none; border-radius:999px; color: var(--text-muted); }
.colorby button.active { background:#fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* Tile grid */
.tile-grid-panel { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; }
.tile-grid-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; flex-wrap:wrap; gap:.5rem; }
.tile-grid-head h3 { font-size: var(--text-base); }
.tile-grid-head .hint { font-size: var(--text-xs); color: var(--text-faint); }
.tile-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; }
.tile {
  position: relative; aspect-ratio: 1; border-radius: 7px;
  display:flex; align-items:center; justify-content:center;
  font-size: 15px; line-height:1; cursor:pointer;
  border: 1px solid rgba(11,31,58,.10); background: var(--cyan-tint);
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.tile:hover { transform: scale(1.18); z-index:5; box-shadow: var(--shadow); }
.tile.hidden { display:none; }
.tile.dim { opacity:.12; filter: grayscale(.5); }
.tile img.flag-emoji { width:19px; height:14px; display:block; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(11,31,58,.10); }
.tile span.flag-emoji { font-size:15px; line-height:1; }
/* region colors */
.tile.r-APAC { background:#DBEAFE; border-color:#BFDBFE; }
.tile.r-Europe { background:#FCE7F3; border-color:#FBCFE0; }
.tile.r-NorthAmerica { background:#DCFCE7; border-color:#BBF7D1; }
.tile.r-Other { background:#FEF3C7; border-color:#FDE68A; }
/* color-by industry: assign via inline style from palette */
.tile .tt { position:absolute; bottom: calc(100% + 6px); left:50%; transform: translateX(-50%);
  background: var(--ink); color:#fff; font-size: 10px; padding:.3rem .5rem; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition: opacity .12s; z-index:20; }
.tile:hover .tt { opacity:1; }

/* Breakdown panels */
.breakdown { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:1.4rem; }
.breakdown + .breakdown { margin-top: 1.2rem; }
.breakdown h4 { font-size: var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom:1rem; }
.bd-hint { font-size: 11px; color: var(--text-faint); margin: -.4rem 0 1rem; }
#bd-industry { max-height: 360px; overflow-y: auto; padding-right: 8px; }
#bd-industry::-webkit-scrollbar { width:8px; }
#bd-industry::-webkit-scrollbar-track { background: var(--bg-tint); border-radius:4px; }
#bd-industry::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius:4px; }
#bd-industry::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.bd-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; cursor:pointer; }
.bd-row .name { font-size: var(--text-xs); font-weight:600; color: var(--ink-700); width: 128px; flex-shrink:0; display:flex; align-items:center; gap:.3rem; line-height:1.25; }
.bd-row .bar { flex:1; height: 18px; background: var(--bg-tint); border-radius:5px; overflow:hidden; }
.bd-row .fill { height:100%; background: var(--brand); border-radius:5px; transition: width .45s cubic-bezier(.16,1,.3,1); }
.bd-row .val { font-size: var(--text-xs); font-weight:700; color: var(--ink); width: 28px; text-align:right; }
.bd-row.active .name { color: var(--ink); }
.bd-row.active .name::before { content:"✓"; color: var(--cyan); }
.bd-row:hover .fill { background: var(--cyan); }

/* Timeline */
.timeline-panel { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:1.4rem; margin-top:1.6rem; }
.timeline { display:flex; align-items:flex-end; gap:8px; height: 150px; padding-top:1rem; }
.tl-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem; cursor:pointer; min-width:0; }
.tl-col .bar { width:100%; max-width:42px; background: linear-gradient(var(--cyan), var(--brand)); border-radius:6px 6px 0 0; transition: height .45s cubic-bezier(.16,1,.3,1), opacity .2s; min-height:2px; }
.tl-col .yr { font-size: 11px; color: var(--text-muted); font-weight:600; }
.tl-col .cnt { font-size: 11px; color: var(--ink); font-weight:700; }
.tl-col.dim .bar { opacity:.18; }
.tl-col.active .bar { box-shadow: 0 0 0 2px var(--ink); }

/* Legend */
.legend { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.legend .item { display:flex; align-items:center; gap:.4rem; font-size: var(--text-xs); color: var(--text-muted); font-weight:600; }
.legend .sw { width:12px; height:12px; border-radius:3px; }

/* Outcomes placeholder */
.outcomes-slot { border:1.5px dashed var(--border-strong); border-radius: var(--radius); padding: 2.2rem; text-align:center; background: var(--bg-soft); }
.outcomes-slot .icon { width:48px;height:48px;margin:0 auto 1rem;border-radius:12px;background:var(--cyan-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;}

/* ---------- Direction of expansion ---------- */
.flow-panel { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; }
.flow-stats { display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top:1.1rem; }
.flow-card {
  background: var(--bg-soft); border:1px solid var(--border); border-radius: 12px;
  padding: 1.5rem 1.4rem; display:flex; flex-direction:column; gap:.7rem;
}
.flow-icon {
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background: var(--cyan-tint); color: var(--brand); border-radius:12px; flex-shrink:0;
}
.flow-icon svg { width:28px; height:28px; }
.flow-num {
  font-family:'Cabinet Grotesk', sans-serif; font-weight:800;
  font-size: clamp(2.1rem, 4vw, 2.8rem); line-height:1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.flow-desc { font-size: var(--text-sm); color: var(--ink-700); line-height:1.55; }
.flow-desc strong { color: var(--ink); font-weight:700; }
@media (max-width: 760px) {
  .flow-stats { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .viz-wrap { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .control-group .label { min-width: 100%; margin-bottom:.2rem; }
}