/* ===========================================
   Tones & status icons

   A tone names a theme colour role. `.tone-<role>` sets three custom
   properties that any component consumes, so a stat chip, a status icon and
   a coloured date all agree on what "warning" looks like:
       --tone        base role colour (icons, strokes)
       --tone-bold   readable text on the ghost background
       --tone-ghost  translucent background
   Tones are decided server-side (botterino/web/presentation.py, status_icons.py).
   =========================================== */

.tone-success { --tone: var(--c-success); --tone-bold: var(--c-success-bold); --tone-ghost: var(--c-success-ghost); }
.tone-info    { --tone: var(--c-info);    --tone-bold: var(--c-info-bold);    --tone-ghost: var(--c-info-ghost); }
.tone-neutral { --tone: var(--c-neutral); --tone-bold: var(--text-secondary); --tone-ghost: var(--c-neutral-ghost); }
.tone-muted   { --tone: var(--c-muted);   --tone-bold: var(--text-muted);     --tone-ghost: var(--c-muted-ghost); }
.tone-warning { --tone: var(--c-warning); --tone-bold: var(--c-warning-bold); --tone-ghost: var(--c-warning-ghost); }
.tone-danger  { --tone: var(--c-danger);  --tone-bold: var(--c-danger-bold);  --tone-ghost: var(--c-danger-ghost); }
.tone-special { --tone: var(--c-special); --tone-bold: var(--c-special-bold); --tone-ghost: var(--c-special-ghost); }

/* Coloured text (dates, counters) */
.tone-text { color: var(--tone-bold); font-weight: 600; }

/* A stat pill coloured by its tone (user page / incident user card). */
.stat-pill.stat-chip { background: var(--tone-ghost); color: var(--tone-bold); font-variant-numeric: tabular-nums; }

/* Numeric stat chip — a .badge whose colours come from its tone */
.badge.stat-chip {
    background: var(--tone-ghost, var(--surface-alt));
    color: var(--tone-bold, var(--text-secondary));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    min-width: 3.25em;
    justify-content: center;
}

/* -------------------------------------------
   Status icons — partials/_macros.html status_icon()
   A tinted rounded square holding a 24-grid glyph; the tone colours both.
   ------------------------------------------- */
.status-icon {
    --si-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: var(--si-size);
    min-width: var(--si-size);
    padding: 0 3px;
    border-radius: var(--r-sm);
    background: var(--tone-ghost, var(--surface-alt));
    color: var(--tone, var(--text-secondary));
    vertical-align: middle;
    flex-shrink: 0;
    cursor: help;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.status-icon:hover,
.status-icon:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone, var(--border)), transparent 55%);
}
/* Inside a link the icon IS the link (e.g. a message's incident flag): show
   the hand cursor and a clearer hover ring instead of the hover-card "help". */
a .status-icon {
    cursor: pointer;
}
a:hover .status-icon,
a:focus-visible .status-icon {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone, var(--border)), transparent 25%);
}
.status-glyph {
    width: calc(var(--si-size) - 6px);
    height: calc(var(--si-size) - 6px);
    stroke-width: 2;
    flex-shrink: 0;
}
.status-icon.has-label { padding: 0 8px 0 4px; }
.status-icon-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--tone-bold, var(--text-secondary));
    white-space: nowrap;
}
.status-icon--sm { --si-size: 18px; }
.status-icon--lg { --si-size: 28px; }

/* Needs attention: a slow breathing halo (awaiting review, critical). */
.status-icon.is-live { position: relative; }
.status-icon.is-live::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone), transparent 40%);
    animation: status-halo 2.4s var(--ease-out) infinite;
    pointer-events: none;
}
@keyframes status-halo {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone), transparent 45%); }
    70%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone), transparent 100%); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone), transparent 100%); }
}
/* The hourglass turns over while a review is pending. (Animate the whole glyph:
   nodes inside a <use> shadow tree can't be targeted from the page.) */
.status-icon[data-status="awaiting_review"] .status-glyph { animation: status-hourglass 4s var(--ease-out) infinite; }
@keyframes status-hourglass { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }

/* -------------------------------------------
   Collony AI — the premium mark. Gradient glyph (sprite paint server
   #st-ai-gradient), a soft special-tone glow and a twinkle on hover.
   ------------------------------------------- */
.status-icon[data-status="src_collony_ai"] {
    background:
        linear-gradient(135deg, var(--c-special-ghost), color-mix(in srgb, var(--c-info), transparent 88%));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-special), transparent 70%);
}
.status-icon[data-status="src_collony_ai"].has-label {
    background-image:
        linear-gradient(var(--surface), var(--surface)),
        linear-gradient(110deg, var(--c-special), var(--c-info), var(--c-secondary), var(--c-special));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 300% 100%;
    border: 1px solid transparent;
    box-shadow: 0 0 10px -3px color-mix(in srgb, var(--c-special), transparent 30%);
    animation: ai-sheen 6s linear infinite;
}
.status-icon[data-status="src_collony_ai"] .status-icon-label {
    background: linear-gradient(110deg, var(--c-special-bold), var(--c-info-bold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.status-icon[data-status="src_collony_ai"]:hover .status-glyph,
.status-icon[data-status="src_collony_ai"]:focus-visible .status-glyph { animation: ai-twinkle 0.9s var(--ease-out); }
@keyframes ai-sheen { to { background-position: 0 0, 300% 0; } }
@keyframes ai-twinkle {
    0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
    45%  { transform: scale(1.25) rotate(20deg); filter: drop-shadow(0 0 4px var(--c-special)); }
    100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .status-icon,
    .status-icon.is-live::after,
    .status-icon .status-glyph,
    .status-icon[data-status="src_collony_ai"].has-label { animation: none !important; transition: none; }
}

/* A row of status icons (actions taken on one incident). */
.status-row { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Warning count pill: "Needs review" heading and the sidebar nav chip (smaller there). */
.count-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 16px; padding: 0 5px;
    border-radius: var(--r-xs);
    background: var(--red-tint); color: var(--red);
    font-size: 11px; font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.count-pill[hidden] { display: none; }

/* Inline "awaiting your decision" callout (incident page actions card). */
.review-callout {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--tone-ghost);
    border: 1px solid color-mix(in srgb, var(--tone), transparent 65%);
}
.review-callout strong { color: var(--tone-bold); font-size: 0.85rem; }
.review-callout p { margin: 2px 0 0; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.4; }

/* "Open in Telegram / Discord" buttons. */
.btn.platform-open { display: inline-flex; align-items: center; gap: 6px; }
.btn.platform-open .platform-icon { width: 14px; height: 14px; }

/* Surge Guard incident: when, who set it off, who was in it. */
.surge-triggered-by { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }
.surge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.surge-count { font-weight: 700; color: var(--c-warning); }

/* Muted / banned + time left (user_status_badge, static/js/countdown.js). */
.restriction-badge { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.countdown { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.countdown.is-urgent { color: var(--c-warning); }
.countdown.is-done { color: var(--text-muted); font-weight: 500; }

/* Burst strip of an Instant-guard flood (partials/_flood_strip.html): one dot per
   message on a time axis, stacked per second, coloured by where it sits in the
   flood; dashed markers for "limit hit" and "deleted + muted". */
.flood-strip {
    --dot: 9px;
    --dot-step: 11px;
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem 0.6rem;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
}
.flood-strip-plot {
    position: relative;
    height: calc(var(--stack-height) * var(--dot-step) + 2.4rem);
    border-bottom: 1px solid var(--border-light);
}
.flood-phase-before { --phase: var(--c-warning); }
.flood-phase-tripped { --phase: var(--c-danger); }
.flood-phase-after { --phase: var(--c-neutral); }
.flood-dot {
    position: absolute;
    bottom: calc(3px + var(--stack) * var(--dot-step));
    width: var(--dot);
    height: var(--dot);
    margin-left: calc(var(--dot) / -2);
    border-radius: 50%;
    background: var(--phase);
    box-shadow: 0 0 0 2px var(--card);
}
.flood-dot:hover { transform: scale(1.35); }
.flood-overflow {
    position: absolute;
    bottom: calc(3px + var(--stack-height) * var(--dot-step));  /* above the capped stack */
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--text-muted);
}
.flood-gap {
    position: absolute;
    top: 1.1rem;
    bottom: 0;
    background: var(--c-warning-ghost);
    border-radius: 4px;
}
.flood-gap-label {
    position: absolute;
    top: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.flood-marker {
    position: absolute;
    top: 1.1rem;
    bottom: 0;
    border-left: 2px dashed var(--c-danger);
}
.flood-marker--acted { border-left-color: var(--c-warning); }
.flood-marker-label {
    position: absolute;
    bottom: 100%;
    left: 4px;
    margin-bottom: 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.flood-marker--acted .flood-marker-label,
.flood-marker--end .flood-marker-label { left: auto; right: 4px; }
.flood-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.flood-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.flood-legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 3px;
    background: var(--phase);
    vertical-align: -1px;
}
.flood-legend b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.flood-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.flood-facts b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* Run headers in a flood's message list ("Before the limit · 6"). */
.flood-msg-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.flood-msg-group i { width: 9px; height: 9px; border-radius: 3px; background: var(--phase); }

/* Impersonation: the member next to the team member they look like (incident page). */
.impersonation-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0.5rem 0 0.75rem; }
.impersonation-side { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.impersonation-side-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.impersonation-side-label .badge.role { text-transform: none; letter-spacing: 0; }
.impersonation-signals { margin: 0 0 0.5rem; padding-left: 1.1rem; font-size: 0.88rem; }