/* ============================================================================
   The Sentinel — the ibis in the corner (brand kit v2, 2026-09-24).

   The bird itself is drawn and animated by siphrix-brand.js (SiphrixLogo):
   the blink, the peck, the violet ring while entries arrive, the amber
   dashed ring for a warning, the orbiting dots while a verify runs and
   the mint tick when it passes. This file draws the disc it sits on, the
   line it speaks, and the two sizes. Until 2026-09-24 the whole animal
   was drawn here in CSS — a serpent-dragon coiled into the ouroboros —
   and every rule for its scales, lids and tongue left with it.
   ============================================================================ */

.sentinel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  z-index: 900;
  cursor: pointer;
  /* The kit's corner: a disc in the card colour with one hairline. The
     bird's body is --logo-ink (white on the dark ground); its eye is
     coloured by the state the script sets. */
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  padding: 8px;
  display: grid;
  place-items: center;
  --ring: var(--teal);
  --glow: color-mix(in srgb, var(--ring) 50%, transparent);
  box-shadow: var(--shadow-pop);
  transition: opacity .5s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.sentinel.mini { width: 36px; height: 36px; padding: 6px; right: 16px; bottom: 16px; }
.sentinel.asleep { opacity: .26; }
.sentinel:hover { transform: scale(1.07); }
.sentinel:focus-visible { outline: 2px solid var(--ring); outline-offset: 5px; }
.sentinel .sx-logo { width: 100%; height: 100%; display: block; overflow: visible; }
.sentinel .sx-logo .sx-fill { fill: var(--logo-ink); }

/* ---- attention ------------------------------------------------------------
   Amber for a warning (the eye and the dashed ring are the script's; the
   line it speaks borrows the colour). A held critical state pulses the
   disc's edge until the view clears it; red is the console's alarm. */
.sentinel.warn { --ring: var(--abort); }
.sentinel.crit, .sentinel.broken { --ring: var(--block); }
.sentinel.crit { animation: sn-alarm 1.2s ease-in-out infinite; }
/* The kit has one attention colour, amber, and paints it on the eye and
   the dashed ring for its "tamper" state, which sentinel.js uses for a
   warning AND for a Verify that failed. A failed Verify is the console's
   red — the toast beside the bird says "no longer matches its seal" with
   a red border, and the dragon reddened for it — so the eye and the ring
   are repainted red here for the two red states. The kit sets both as
   presentation attributes, which any stylesheet rule outranks. */
.sentinel.crit .sx-logo .sx-eyep, .sentinel.broken .sx-logo .sx-eyep { fill: var(--block); }
.sentinel.crit .sx-logo circle[vector-effect], .sentinel.broken .sx-logo circle[vector-effect] { stroke: var(--block); }
@keyframes sn-alarm {
  0%, 100% { box-shadow: var(--shadow-pop); }
  50% { box-shadow: 0 0 0 3px var(--glow), var(--shadow-pop); }
}
/* Verify passed: one soft flash of the accent while the tick draws. */
.sentinel.sealed { animation: sn-seal 1.8s ease-out 1; }
@keyframes sn-seal {
  0%   { box-shadow: var(--shadow-pop); }
  35%  { box-shadow: 0 0 18px var(--glow), var(--shadow-pop); }
  100% { box-shadow: var(--shadow-pop); }
}

/* ---- the line it speaks --------------------------------------------------- */
.sn-say {
  position: fixed;
  right: 84px;
  bottom: 24px;
  z-index: 900;
  max-width: 300px;
  padding: 10px 13px;
  border-radius: 12px 12px 4px 12px;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ring, var(--teal)) 40%, var(--line));
  box-shadow: 0 12px 34px -10px var(--shade);
  font: 13px/1.45 var(--font-sans);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.sn-say.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sn-say b { color: var(--teal); font-weight: 600; }
.sn-say .sn-act {
  display: inline-block;
  margin-top: 7px;
  font-size: .78rem;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  border-radius: 7px;
  padding: 3px 9px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .sentinel.crit, .sentinel.sealed { animation: none; }
  .sn-say { transition: opacity .2s ease; transform: none; }
}
/* On a phone there is no corner to spare: shrunk to 48px it still floated
   over the chart's last bars (real-browser capture, 2026-09-18). Hidden
   below 560px, with the line it speaks — the warnings it narrates are in
   the Warnings view, one tap away in the drawer. */
@media (max-width: 560px) {
  .sentinel, .sn-say { display: none; }
}