/* Screen-specific layout: Dashboard (S1), Prospects (S2), Prospect detail (S3), New audit (S4), Audit result (S5). */

/* Dashboard */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.kpi-label { font-size: var(--fs-13); color: var(--text-2); font-weight: 500; }
.kpi-value { font-size: var(--fs-40); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: var(--s-2); display: flex; align-items: baseline; gap: var(--s-2); }
.kpi-foot { margin-top: var(--s-2); min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-13); color: var(--text-2); }
.spark { width: 96px; height: 28px; overflow: visible; }
.spark polyline { fill: none; stroke: url(#spark-grad); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

.funnel { display: flex; flex-direction: column; gap: var(--s-3); }
.funnel-row { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: var(--s-3); }
.funnel-row--lost { opacity: .75; }
.funnel-bar { height: 12px; border-radius: var(--r-pill); background: rgba(25,20,102,.06); overflow: hidden; }
.funnel-bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--brand-grad); transition: width var(--t-slow) var(--ease); }
.funnel-row--lost .funnel-bar > span { background: var(--nm); }

.hist { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); align-items: end; height: 190px; }
.hist-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--s-2); height: 100%; text-align: center; }
.hist-bar { width: 100%; max-width: 72px; min-height: 4px; border-radius: 8px 8px 2px 2px; background: var(--band); transition: height var(--t-slow) var(--ease); }
.hist-count { font-weight: 700; font-size: var(--fs-16); }
.hist-label { font-size: var(--fs-12); color: var(--text-2); }

.list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.list-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-main { flex: 1; min-width: 0; }
.list-main .cell-name, .list-main .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline { position: relative; margin: 0; padding: 0 0 0 var(--s-5); list-style: none; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.timeline li { position: relative; padding: var(--s-2) 0; }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--s-5) + 3px); top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--brand-2); }
.gap-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); padding: var(--s-2) 0; }
.gap-bar { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: rgba(25,20,102,.06); overflow: hidden; }
.gap-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-grad); }

/* Prospects */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.toolbar .field { min-width: 140px; }
.toolbar .field--grow { flex: 1; min-width: 200px; }
.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--s-2); min-height: 160px; padding: var(--s-3); border-radius: var(--r-md); background: rgba(25,20,102,.02); border: 1px dashed transparent; transition: border-color var(--t-fast), background var(--t-fast); }
.col.is-over { border-color: var(--brand-2); background: rgba(109,91,232,.10); }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-1) var(--s-1); font-weight: 600; }
.col-count { color: var(--text-2); font-weight: 500; }
.pcard {
  display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-1); cursor: grab;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.pcard:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.pcard.is-dragging { transform: rotate(1.5deg) translateY(-4px); opacity: .85; box-shadow: var(--glow); cursor: grabbing; }
.pcard-top { display: flex; align-items: flex-start; gap: var(--s-3); }
.pcard-top .list-main { min-width: 0; }
.pcard-name { font-weight: 600; background: none; border: 0; padding: 0; text-align: left; color: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pcard-name:hover { text-decoration: underline; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-12); color: var(--text-2); }
.pcard-move { display: flex; gap: 2px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.result { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.result:last-child { border-bottom: 0; }
.result-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.preview-row { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.preview-row:last-child { border-bottom: 0; }
.preview-scroll { max-height: 320px; overflow-y: auto; }

/* New audit modal */
.modal--audit { width: min(620px, 100%); }
.steps { list-style: none; margin: var(--s-4) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.step { display: flex; align-items: center; gap: var(--s-3); color: var(--text-2); }
.step-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--nm); flex: none; }
.step--active { color: var(--text); }
.step--active .step-mark { border: 1px solid var(--brand-3); color: var(--brand-3); }
.step--done { color: var(--text); }
.step--done .step-mark { border: 0; background: rgba(52,211,153,.16); color: var(--pass); }
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.counter { padding: var(--s-3); border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); }
.counter b { display: block; font-size: var(--fs-20); }
.audit-result { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); margin: var(--s-4) 0; }

/* Prospect detail + audit result (S3, S5) */
.stack { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.back-link { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--text-2); width: fit-content; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.hero-ring .ring--big svg { filter: drop-shadow(0 0 14px var(--band, var(--brand-1))); }
.hero-ring .ring-text { font-weight: 700; }
.ring-tick { stroke: var(--line-strong); stroke-width: 1.5; }
.ring-target { stroke: var(--brand-3); stroke-width: 3; stroke-linecap: round; }
.hero-body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.hero-sum { font-size: var(--fs-16); }
.hero-radar { position: relative; grid-column: 1 / -1; max-width: 420px; width: 100%; justify-self: center; }
.disclosure { max-width: 70ch; color: var(--text-2); }
.scope { font-weight: 500; color: var(--text); }
.save-state { align-self: center; min-height: 36px; display: flex; align-items: center; font-size: var(--fs-13); color: var(--text-2); }
.note { min-height: 180px; font-family: var(--font); font-size: var(--fs-14); }
.history { position: relative; height: 180px; }
.count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: var(--s-1); border-radius: var(--r-pill); background: rgba(25,20,102,.08); font-size: var(--fs-12); text-align: center; color: var(--text-2); }
.back-link:hover { color: var(--text); }

.gap-pick { list-style: none; margin: 0; padding: 0; }
.gap-pick li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.gap-pick li:last-child { border-bottom: 0; }
.gap-pick-text { min-width: 0; }
.gap-pick .check { align-items: flex-start; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-3); }
.tile { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(25,20,102,.03); min-width: 0; }
.tile-name { font-size: var(--fs-13); font-weight: 600; overflow-wrap: anywhere; }
.tile-score { font-size: var(--fs-20); font-weight: 700; }
.tile--nm { border: 1px dashed var(--nm); background: repeating-linear-gradient(135deg, rgba(143,160,196,.1) 0 4px, transparent 4px 8px); }
.nm-panel { border-style: dashed; }

.legend { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
.legend li { display: flex; align-items: flex-start; gap: var(--s-2); flex-wrap: wrap; }
.gap-group { margin-top: var(--s-5); }
.gap-group-h { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-14); margin-bottom: var(--s-2); }
.gap { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.gap:last-child { border-bottom: 0; }
.gap-title { font-size: var(--fs-14); font-weight: 600; }
.gap-toggle { display: flex; align-items: flex-start; gap: var(--s-2); width: 100%; padding: 0; background: none; border: 0; text-align: left; font-weight: 600; color: var(--text); }
.gap-msg { overflow-wrap: anywhere; }
.chev { margin-top: 3px; transition: transform var(--t-fast); }
.chev.is-open { transform: rotate(90deg); }
.gap-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 0 var(--s-5); }
.gap-body { margin: var(--s-3) 0 0 var(--s-5); }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--text-2); }
.dots i.on { background: var(--text-2); }
.tier { padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600; }
.tier--documented { background: var(--brand-1); color: #fff; }
.tier--hypothesis { border: 1px solid var(--text-2); color: var(--text-2); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; }
.facts dt { color: var(--text-2); font-size: var(--fs-13); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); overflow-wrap: anywhere; }
.quote { margin: var(--s-2) 0 var(--s-2) var(--s-5); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--line-strong); color: var(--text-2); overflow-wrap: anywhere; }
.table tr.is-picked { background: rgba(25,20,102,.04); }
.table .pcard-name { white-space: normal; overflow-wrap: anywhere; }

.scrim--right { place-items: stretch end; padding: 0; }
.drawer { width: min(520px, 100%); height: 100%; overflow: auto; padding: var(--s-5); background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-1); animation: slide-in var(--t-med) var(--ease); display: flex; flex-direction: column; gap: var(--s-3); }
.drawer h3 { margin-top: var(--s-3); }
.drawer-cat { padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi-value { font-size: var(--fs-28); }
  .board { grid-template-columns: repeat(5, 82%); scroll-snap-type: x mandatory; }
  .col { scroll-snap-align: start; }
  .grid-2, .counters, .legend { grid-template-columns: 1fr; }
  .hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .hero-body { align-items: center; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .card { padding: var(--s-4); }
}