/* Meridian live verdict — shared by app.html (Classic) and threads.html (Threads).
   Uses only the design tokens both pages define (see :root in each page), with a
   fallback where a token exists on one page only (--card is Threads, --panel-solid Classic). */
.vd-panel{max-width:860px}
.vd-lede{font-size:13px;line-height:1.55;color:var(--text-2);margin:0 0 16px;max-width:680px}
.vd-form{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.vd-form textarea{flex:1;min-width:0;min-height:46px;max-height:320px;resize:vertical;background:var(--field);border:1px solid var(--border-2);border-radius:12px;padding:12px 14px;color:var(--text);font:inherit;font-size:13px;line-height:1.45}
.vd-form textarea::placeholder{color:var(--faint)}
.vd-form textarea:focus{outline:none;border-color:var(--purple-2,var(--purple));box-shadow:0 0 0 3px var(--purple-soft)}
.vd-form .btn{flex:none;min-height:46px}
.vd-exl{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);margin:4px 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vd-exs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:20px}
.vd-ex{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;cursor:pointer;background:var(--card,var(--panel-solid));border:1px solid var(--border-2);border-radius:12px;padding:11px 13px;color:var(--text);font:inherit;min-width:0;transition:border-color .15s,transform .15s}
.vd-ex:hover{border-color:var(--purple-2,var(--purple));transform:translateY(-1px)}
.vd-ex-a{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--sam)}
.vd-ex-t{font-size:12.5px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.vd-ex-m{font-size:11px;color:var(--muted);overflow-wrap:anywhere}

.vd-result:empty{display:none}
.vd-result{scroll-margin-top:80px}

/* progress (real stages only) */
.vd-progress{background:var(--card,var(--panel-solid));border:1px solid var(--border-2);border-radius:14px;padding:14px 16px}
.vd-prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vd-stage{font-size:13.5px;font-weight:700;color:var(--text)}
.vd-elapsed{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.vd-prow .vd-cancel{margin-left:auto}
.vd-spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--purple-2,var(--purple));animation:vd-spin .8s linear infinite;flex:none}
@keyframes vd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.vd-spin{animation:none;border-top-color:var(--border-2)}}
.vd-found{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.vd-found b{color:var(--text)}
.vd-found-k{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--sam);margin-right:4px}
.vd-found-m{font-size:11.5px;color:var(--muted);margin-top:2px}

/* errors */
.vd-error{background:var(--card,var(--panel-solid));border:1px solid var(--border-2);border-left:3px solid var(--amber);border-radius:14px;padding:14px 16px}
.vd-error-t{font-size:14px;font-weight:800;margin-bottom:4px;color:var(--text)}
.vd-error p{font-size:13px;line-height:1.5;color:var(--text-2);margin:0}
.vd-error-a{margin-top:12px}

/* the card */
.vd-card{background:var(--card,var(--panel-solid));border:1px solid var(--border-2);border-radius:16px;padding:18px 18px 14px;min-width:0}
.vd-v-go{border-top:3px solid var(--green)}
.vd-v-team{border-top:3px solid var(--amber)}
.vd-v-walk{border-top:3px solid var(--red)}
.vd-fixture{margin:-4px 0 14px;padding:9px 12px;border:1px dashed var(--amber);border-radius:10px;color:var(--amber);font-size:12px;line-height:1.45;background:repeating-linear-gradient(135deg,var(--amber-soft) 0 10px,transparent 10px 20px)}
.vd-fixture b{letter-spacing:1px;margin-right:6px}
.vd-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.vd-badge{font-size:22px;font-weight:850;letter-spacing:1px;line-height:1;padding:10px 16px;border-radius:12px;border:1px solid transparent}
.vd-b-go{background:var(--green-soft);color:var(--green);border-color:var(--green)}
.vd-b-team{background:var(--amber-soft);color:var(--amber);border-color:var(--amber)}
.vd-b-walk{background:var(--red-soft);color:var(--red);border-color:var(--red)}
.vd-conf{display:flex;flex-direction:column;line-height:1.1}
.vd-conf b{font-size:20px;font-weight:800;color:var(--text)}
.vd-conf span{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.vd-chip{font-size:10.5px;font-weight:750;border:1px solid var(--border-2);border-radius:20px;padding:3px 10px;color:var(--text-2)}
.vd-chip-q{margin-left:auto}
.vd-headline{font-size:17px;font-weight:750;line-height:1.35;letter-spacing:-.1px;margin:0 0 12px;color:var(--text);overflow-wrap:anywhere}
/* focused programmatically so screen readers land on the result; it is not a control, so no ring */
.vd-headline:focus,.vd-headline:focus-visible{outline:none}
.vd-notice{background:var(--inset);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:6px}
.vd-notice-t{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.4;overflow-wrap:anywhere}
.vd-notice-m{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45;overflow-wrap:anywhere}
.vd-sam{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--sam);text-decoration:none}
.vd-sam:hover{text-decoration:underline}
.vd-sec{margin-top:16px}
.vd-sec h4{font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.vd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vd-point{font-size:13px;font-weight:600;line-height:1.45;color:var(--text)}
.vd-quote{margin:6px 0 3px;padding:8px 12px;border-left:3px solid var(--border-2);background:var(--inset);border-radius:0 9px 9px 0;font-size:12.5px;line-height:1.5;color:var(--text-2);overflow-wrap:anywhere}
.vd-quote::before{content:"\201C"}
.vd-quote::after{content:"\201D"}
.vd-quote.ok{border-left-color:var(--green)}
.vd-quote.warn{border-left-color:var(--amber)}
.vd-check{font-size:11px;font-weight:750}
.vd-check.ok{color:var(--green)}
.vd-check.warn{color:var(--amber)}
.vd-fit{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vd-fcell{background:var(--inset);border:1px solid var(--border);border-radius:10px;padding:9px 10px;min-width:0}
.vd-fk{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.vd-fs{font-size:12.5px;font-weight:800;margin:2px 0}
.vd-f-match .vd-fs{color:var(--green)}
.vd-f-mismatch .vd-fs{color:var(--red)}
.vd-f-unknown .vd-fs{color:var(--text-2)}
.vd-fn{font-size:11.5px;line-height:1.4;color:var(--text-2);overflow-wrap:anywhere}
.vd-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.vd-steps li{font-size:13px;line-height:1.45;color:var(--text)}
.vd-att{margin-top:14px;font-size:12px;color:var(--text-2)}
.vd-att summary{cursor:pointer;font-weight:700;color:var(--muted)}
.vd-att ul{margin:6px 0 0;padding-left:18px}
.vd-att li{overflow-wrap:anywhere;line-height:1.5}
.vd-foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;font-weight:650;color:var(--muted);line-height:1.5}
.vd-adj{margin-top:4px;font-size:10.5px;color:var(--muted)}

@media (max-width:760px){
  .vd-result{scroll-margin-top:140px} /* clears the two-row sticky topbar on phones */
  .vd-form{flex-direction:column;align-items:stretch}
  .vd-form .btn{justify-content:center}
  .vd-exs{grid-template-columns:1fr}
  .vd-card{padding:14px 14px 12px}
  .vd-badge{font-size:19px;padding:9px 13px}
  .vd-chip-q{margin-left:0}
}