/* Impact 360 — shared presentation styles.
   The wheel and the SDG marks, used identically by the assessor viewer
   and the client viewer. Design tokens come from the site stylesheet;
   nothing here defines a colour that is not already a token. */

/* ── Impact 360 wheel ────────────────────────────────────────────────
   Brand geometry from the site mark, scored. Sector radius is the
   domain score; a faded full-radius track sits behind it so the wheel
   keeps a constant footprint. Sector ORDER is fixed by the methodology
   (it maximises the weakest adjacent colour contrast) — see I360_DOMAINS.
   -------------------------------------------------------------------- */
.v-wheel { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (max-width: 860px) { .v-wheel { grid-template-columns: 1fr; } }

.i360 { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; user-select: none; -webkit-tap-highlight-color: transparent; }
.i360 svg { display: block; width: 100%; height: 100%; overflow: visible; }
.i360__sec { cursor: pointer; outline: none; transition: opacity .28s ease; }
.i360__sec.is-faded { opacity: .2; }
.i360__sec:focus-visible .i360__arc { stroke: var(--ink); stroke-width: 4; }

.i360__mark { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.02em; fill: var(--ink); pointer-events: none; transition: opacity .2s ease; }
.i360__mark--num { font-size: 58px; }
.i360__mark--den { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: .12em; fill: var(--ink-faint); }
.i360.is-open .i360__mark { opacity: 0; }

.i360__pop {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.94);
  width: min(250px, 68%); box-sizing: border-box;
  opacity: 0; pointer-events: none;
  background: var(--paper); border: 1px solid var(--rule);
  padding: 14px 14px 16px; text-align: center;
  transition: opacity .22s ease, transform .22s ease;
}
.i360.is-open .i360__pop { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.i360__ttl  { font-family: var(--font-serif); font-size: 1rem; font-weight: 500; color: var(--ink); margin: 0 0 3px; }
.i360__meta { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 11px; }
.i360__goals { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.i360__goals img { width: 46px; height: 46px; display: block; }
.i360__goals img.is-off { filter: grayscale(1); opacity: .35; }
.i360__note { font-family: var(--font-sans); font-size: .68rem; line-height: 1.4; color: var(--ink-faint); margin: 10px 0 0; }
.i360__hint { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 1.1rem 0 0; text-align: center; }

.v-band { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) { .i360__sec, .i360__mark, .i360__pop { transition: none; } }

/* Domain legend / key used beside the wheel and in the bar rows */
.i360__key { width: 10px; height: 10px; flex: none; display: inline-block; }

/* ── SDG goal icons ──────────────────────────────────────────────────
   The official goal marks, already used in the wheel popover, carried
   into every place a goal is named. Where the goal title is printed
   alongside, the icon is decorative and takes alt="" — a screen reader
   announcing "SDG 7: Affordable and clean energy" twice is worse than
   not announcing it at all.

   Not-applicable goals are desaturated, applicable ones are not. That
   mirrors the wheel and keeps Impact 360 §17.3 legible at icon size:
   "cannot reach this goal" and "reached it, scored nothing" must not
   look alike. */
.v-sdg { display: block; flex: none; }
.v-sdg--off { filter: grayscale(1); opacity: 0.4; }
.v-goal__icon { display: flex; align-items: flex-start; }
.v-cond__icon { margin-top: 0.1rem; }

/* Goal rows gain an icon column ahead of the number, and fixed widths for
   the number and step columns — 'auto' sizes each row to its own content,
   so "SDG 1" and "SDG 17" push the rest of the row to different places. */
.v-goal { grid-template-columns: 48px 9rem 11rem minmax(0,1fr); align-items: start; }
@media (max-width: 760px) { .v-goal { grid-template-columns: 48px minmax(0,1fr); } }
.v-goal__score { align-self: baseline; }