/* Direction: Sichtbar — Analysten-Papier, tiefes Tannengrün, Bricolage-Display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f6f4ee;
  --surface: #fbfaf7;
  --surface-2: #eae9e3;
  --border: #d4d4ce;
  --border-strong: #adafaa;
  --ink: #15211d;
  --muted: #5e6360;
  --accent: #1d6b57;
  --accent-hover: #195b4a;
  --accent-ink: #ffffff;
  --accent-text: #175846;
  --accent-strong: #1d6b57;
  --accent-soft: #e0ede6;
  --accent-border: #94b6aa;
  --success: #1d7a4f;
  --success-ink: #ffffff;
  --success-soft: #dce5db;
  --success-strong: #1b7049;
  --warning: #96600a;
  --warning-ink: #ffffff;
  --warning-soft: #eae2d3;
  --warning-strong: #8a5809;
  --danger: #b3382c;
  --danger-ink: #ffffff;
  --danger-soft: #eeddd7;
  --danger-strong: #b3382c;
  --chart-1: #1d6b57;
  --chart-2: #1580ab;
  --chart-3: #503b8d;
  --chart-4: #a74c78;
  --chart-5: #773a0b;
  --chart-6: #76790b;

  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-tracking: -0.02em;
  --radius-card: 16px;
  --x-band: #10241e;
  --x-on-photo: #f4f1ea;
  --x-warn-on-band: #ffb9a8;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #040f0c;
  --surface: #1d2724;
  --surface-2: #111b18;
  --border: #27312e;
  --border-strong: #4f5755;
  --ink: #f6f4ee;
  --muted: #959894;
  --accent: #1d6b57;
  --accent-hover: #3f8170;
  --accent-ink: #ffffff;
  --accent-text: #6a9d90;
  --accent-strong: #5d9586;
  --accent-soft: #0a231d;
  --accent-border: #0f382e;
  --success: #1d7a4f;
  --success-ink: #ffffff;
  --success-soft: #0a271b;
  --success-strong: #4f9876;
  --warning: #96600a;
  --warning-ink: #ffffff;
  --warning-soft: #24210c;
  --warning-strong: #ad8441;
  --danger: #b3382c;
  --danger-ink: #ffffff;
  --danger-soft: #2b1813;
  --danger-strong: #c97068;
  --chart-1: #327d68;
  --chart-2: #1f94c3;
  --chart-3: #8270c7;
  --chart-4: #bb5e8a;
  --chart-5: #bc672c;
  --chart-6: #888c16;
}

.ring {
  --size: 6.5rem;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 9999px;
  background: conic-gradient(var(--ring-c, var(--accent)) calc(var(--p) * 1%), var(--border) 0);
}
.ring::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: inherit;
  background: var(--surface, var(--canvas));
}
.ring span {
  position: relative;
  font-family: var(--font-display);
  font-size: calc(var(--size) * 0.32);
  font-weight: 800;
}
.ring-sm { --size: 4.25rem; }

.tone-good { --ring-c: var(--success); }
.tone-mid { --ring-c: var(--warning); }
.tone-bad { --ring-c: var(--danger); }

.bar { height: 0.5rem; border-radius: 9999px; background: var(--border); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--ring-c, var(--accent)); transition: width 0.6s ease; }

.st-ok { color: var(--success-strong); display: inline-flex; }
.st-warn { color: var(--warning-strong); display: inline-flex; }
.st-fail { color: var(--danger-strong); display: inline-flex; }
.st-fail-badge { color: var(--danger-strong); }

.opp { transition: border-color 0.15s ease; }
.opp:hover { border-color: var(--accent); }

button[disabled][data-busy] { opacity: 0.7; cursor: progress; }

@media (prefers-reduced-motion: no-preference) {
  .ring { animation: ring-in 0.7s ease both; }
  @keyframes ring-in { from { transform: scale(0.92) rotate(-12deg); } to { transform: none; } }
}
html.reduced-motion .ring { animation: none; }