/* ══ INSTILLIOUS, UNBOXED — the companion who rides every page ══
   He is not furniture. He sits low-left, breathes, and carries the trail:
   three pips, one per signal of today's pattern. Blue's Clues for culture.

   One file for every page that mounts him (2026-10-21): instillious.js
   injects the dock on the console too, but the console never loaded
   site.css — so on phones the orb rendered as a 512px unstyled image
   below the deck, a half-screen of nothing. site.css @imports this; the
   console links it directly. */
.inst-dock { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; }
.inst-orb {
  position: relative; display: block; width: 54px; height: 54px; padding: 0;
  border-radius: 50%; overflow: visible; cursor: pointer;
  background: #0b0703; border: 1px solid var(--space-line-bright);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.9), var(--glow-soft);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast);
}
.inst-orb img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.inst-orb:hover, .inst-orb:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(0,0,0,.9), var(--glow-cyan); }
.inst-orb.is-speaking { box-shadow: 0 8px 22px -10px rgba(0,0,0,.9), var(--glow-cyan); }
@media (prefers-reduced-motion: no-preference) {
  .inst-orb { animation: inst-breathe 6s ease-in-out infinite; }
  @keyframes inst-breathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
  .inst-orb.is-found { animation: inst-found .7s var(--ease-snap) 2; }
  @keyframes inst-found { 0%,100% { transform: scale(1) } 40% { transform: scale(1.12) } }
}
/* the trail: three pips, one per signal */
.inst-pips { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); display: flex; gap: 4px; }
.inst-pips.hidden { display: none; }
.inst-pips i {
  width: 7px; height: 7px; border-radius: 50%; display: block;
  background: transparent; border: 1px solid var(--space-line-bright);
}
.inst-pips i.on { background: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
.inst-bubble {
  position: absolute; left: 0; bottom: 74px; width: max-content; max-width: min(72vw, 320px);
  display: grid; gap: 5px; padding: 11px 13px; border-radius: 13px;
  background: rgba(31,19,8,.97); border: 1px solid var(--space-line-bright);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.inst-bubble.hidden { display: none; }
.inst-bubble b { font-size: .84rem; color: var(--phosphor); font-weight: 500; line-height: 1.4; }
.inst-bubble span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; color: var(--ink-faint); line-height: 1.5; }
.inst-bubble a {
  justify-self: start; margin-top: 3px; padding: 5px 10px; border-radius: 8px;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--neon-cyan); color: #1a1002; font-weight: 700; text-decoration: none;
}
/* the console's rail owns the left edge on desktop — he steps right of it */
@media (min-width: 641px) { body:has(.console) .inst-dock { left: calc(var(--rail-w) + 14px); } }
/* on a phone the console already seats him in the stage ("Ask Instillious"),
   and the bottom-left corner belongs to the season's visitor; the orb rests */
@media (max-width: 700px) { body:has(.console) .inst-dock { display: none; } }

/* ── the desk, folded (2026-10-31): Instillious is a slim tab on the console;
   a tap opens the ask box in place (js/elliot-tab.js). The tab lights when
   he has said something while folded. ── */
.elliot { padding: 6px 10px; }
.elliot.is-open { padding-bottom: 10px; }
.elliot__tab { width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; }
.elliot__tab .elliot__face { width: 32px; height: 32px; border-radius: 9px; }
.elliot__tab .elliot__name { font-size: 0.72rem; }
.elliot__tab .elliot__status { font-size: 0.52rem; }
.elliot__chev { flex: none; color: var(--neon-cyan); font-size: 0.8rem; transition: transform var(--dur-fast) ease; }
.elliot.is-open .elliot__chev { transform: rotate(90deg); }
.elliot__tab:hover .elliot__name, .elliot__tab:focus-visible .elliot__name { color: var(--neon-cyan-soft); }
.elliot__tab.has-news .elliot__status { color: var(--neon-cyan); }
.elliot__tab.has-news .elliot__chev { text-shadow: 0 0 8px var(--neon-cyan); }
.elliot__body[hidden] { display: none; }