/* ==========================================================
   ALL ROUNDER CALCULATOR — VISUAL INTELLIGENCE SYSTEM
   Version 2.4 — Phase 5

   One shared, reusable set of lightweight SVG + CSS
   visualizations. No canvas, no chart libraries. Every
   calculator listed in Phase 5 renders through the same
   functions in assets/visuals.js — this file only styles
   the resulting markup, once.

   Reuses existing tokens only (--clr-*, --arc-duration-*,
   --arc-ease-*) — no new colors are introduced.
   ========================================================== */

/* ---------- RING ---------- */
.arc-viz-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.arc-viz-ring-svg { display: block; }

.arc-viz-ring__track { fill: none; stroke: var(--clr-border); }
.arc-viz-ring__zone { fill: none; }
.arc-viz-ring__value {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms var(--arc-ease-out, cubic-bezier(0,0,.2,1));
}
.arc-viz-ring__marker { stroke: var(--clr-bg); stroke-width: 1.5; }
.arc-viz-ring__target { stroke: var(--clr-text); }

.arc-viz-ring__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 6px;
}
.arc-viz-ring__value-text {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.1;
}
.arc-viz-ring__sublabel {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  margin-top: 2px;
  max-width: 90%;
}

/* Compact ("mini gauge") variant: smaller text, tighter */
.arc-viz-ring--mini .arc-viz-ring__value-text { font-size: 0.85rem; }
.arc-viz-ring--mini .arc-viz-ring__sublabel { font-size: 0.6rem; }

/* ---------- LINEAR PROGRESS ---------- */
.arc-viz-linear {
  width: 100%;
}
.arc-viz-linear__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: var(--clr-text-muted);
}
.arc-viz-linear__head strong { color: var(--clr-text); }
.arc-viz-linear__track {
  width: 100%;
  height: 10px;
  border-radius: 6px;
  background: var(--clr-border);
  overflow: hidden;
}
.arc-viz-linear__fill {
  height: 100%;
  border-radius: 6px;
  width: 0%;
  transition: width 900ms var(--arc-ease-out, cubic-bezier(0,0,.2,1));
}

/* ---------- STATUS BADGE ---------- */
.arc-viz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.arc-viz-badge--distinction { background: rgba(255,213,74,0.14); color: var(--clr-gold); border-color: rgba(255,213,74,0.35); }
.arc-viz-badge--first       { background: rgba(74,222,128,0.14); color: var(--clr-success); border-color: rgba(74,222,128,0.35); }
.arc-viz-badge--second      { background: rgba(77,163,255,0.14); color: var(--clr-blue); border-color: rgba(77,163,255,0.35); }
.arc-viz-badge--pass        { background: rgba(255,140,0,0.14); color: var(--clr-primary); border-color: rgba(255,140,0,0.35); }
.arc-viz-badge--remedial    { background: var(--clr-danger-bg); color: var(--clr-danger); border-color: rgba(255,107,107,0.35); }

/* ---------- COMPARISON / SEGMENTED BAR ---------- */
.arc-viz-compare { width: 100%; }
.arc-viz-compare__track {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--clr-border);
}
.arc-viz-compare__segment {
  height: 100%;
  width: 0%;
  transition: width 900ms var(--arc-ease-out, cubic-bezier(0,0,.2,1));
  min-width: 2px;
}
.arc-viz-compare__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.arc-viz-compare__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}
.arc-viz-compare__legend-item strong { color: var(--clr-text); }
.arc-viz-compare__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ---------- LAYOUT HELPERS ---------- */
.arc-viz-block { margin-top: 16px; }
.arc-viz-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

/* ---------- MOBILE ---------- */
@media (max-width: 420px) {
  .arc-viz-ring-svg { max-width: 100%; height: auto; }
}

/* ---------- ACCESSIBILITY: REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .arc-viz-ring__value,
  .arc-viz-linear__fill,
  .arc-viz-compare__segment {
    transition-duration: 1ms !important;
  }
}

/* ==========================================================
   END OF FILE
   ========================================================== */