/* Senditor status icons, direction A (W6-UI-1; M-138, M-140): the look of the icons status-icons.js draws, for the
   dashboard and the client's approval page. Role tones only: every colour is the theme's (theme.css); the three names
   below derive from its roles, so a theme swap changes nothing here. Tones and motion are the round-4 spec's
   (dashboard-screens/screen-options/status-r4/src/icons.css, direction A). */
:root {
  --st: 16px; /* a status icon beside a line of text: direction A drawn at 16 px */
  --icon-quiet: var(--ink-3); /* no verdict yet: the quiet ring */
  --icon-disc-neutral: var(--icon-neutral); /* a neutral verdict's disc (Copied) */
  --track-a: .16; /* the running arc's faint track */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --icon-disc-neutral: var(--line-2); --track-a: .22; }
}
:root[data-theme="dark"] { --icon-disc-neutral: var(--line-2); --track-a: .22; }

.st { flex: none; display: inline-block; vertical-align: middle; overflow: visible; fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round; color: var(--icon-neutral); }
.st[data-hue="success"] { color: var(--icon-success); }
.st[data-hue="failure"] { color: var(--icon-failure); }
.st[data-hue="recheck"] { color: var(--icon-recheck); }
.st[data-hue="quiet"] { color: var(--icon-quiet); }
.st[data-hue="active"] { color: var(--ink); }
.st .disc, .st .gd { fill: currentColor; stroke: none; }
.st .cut { stroke: var(--icon-glyph); }
.st .cut .gd { fill: var(--icon-glyph); }
/* a neutral verdict disc (Copied) is quieter than a coloured one in both themes */
.st[data-hue="neutral"] .disc { fill: var(--icon-disc-neutral); }
.st .track { stroke-opacity: var(--track-a); }
.st .pie, .st .ring { fill: none; }
.st .pie { stroke-linecap: butt; }

/* Motion (emil-design-eng): a verdict draws in once, only on the icon whose served word just changed while the view is
   open (data-arrived), never on first paint: the disc settles (220 ms), the mark draws (300 ms, after 70 ms), a dot
   fades in last. Running turns (900 ms, linear) once the product serves it; Waiting is still (M-140). Reduced motion
   leaves every icon still: nothing here runs outside no-preference. */
@media (prefers-reduced-motion: no-preference) {
  .st .spin { transform-box: view-box; transform-origin: 50% 50%; animation: st-spin 900ms linear infinite; }
  .st .breathe { animation: st-breathe 1600ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
  .st[data-arrived] .disc { transform-box: view-box; transform-origin: 50% 50%; animation: st-pop 220ms cubic-bezier(.23, 1, .32, 1) both; }
  .st[data-arrived] .gl { stroke-dasharray: 1 1; animation: st-draw 300ms cubic-bezier(.23, 1, .32, 1) 70ms both; }
  .st[data-arrived] .gd { animation: st-fade 160ms cubic-bezier(.23, 1, .32, 1) 230ms both; }
}
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-breathe { from { opacity: 1; } to { opacity: .35; } }
@keyframes st-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes st-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }