/* =====================================================================
   AL TAMAYUZ DIGITAL TAX ADVISOR — the mark, and only the mark.

   Kept in its own file, separate from guide.css, for one reason: the visual
   identity of the advisor has now been rejected twice, and it must be possible
   to replace it — this file plus `taxops/advisor.py` — without touching a line
   of Guide behaviour. guide.css keeps the widget: the panel, the caption, the
   dock, the transcript. This file keeps the person.

   Every colour resolves to a ledger4 LAYER 2 token. There is no new palette,
   and light/dark work because ledger4 already authored both.

   The animation rule that matters: NOTHING on the figure ever moves. Speaking,
   listening and thinking live in the rule under the plate and in the rim. The
   moment a shoulder bounces or a head tilts, this is a mascot again.
   ===================================================================== */

:root{
  --adv-field-1:#0c4d5c;
  --adv-field-2:#052733;
  /* The figure sits ON the petrol field, so it is lighter than the field —
     a portrait lit from the front, not a black cut-out. */
  --adv-figure-1:#6ea3af;
  --adv-figure-2:#4a7f8c;
  --adv-body-1:#417785;
  --adv-body-2:#2c5f6d;
  --adv-line:#cfe6ea;
  --adv-lit:#a8d4dc;
  --adv-accent:#7adfea;
  --adv-rim:rgba(217,188,120,.55);
  --adv-track:rgba(255,255,255,.16);
  --adv-gold-1:#bf9b4f;
  --adv-gold-2:#e1cb8e;
}
html[data-theme="dark"]{
  --adv-field-1:#0a3f4d;
  --adv-field-2:#041e28;
  --adv-figure-1:#63959f;
  --adv-figure-2:#427480;
  --adv-body-1:#396a77;
  --adv-body-2:#255260;
  --adv-line:#b7d7dd;
  --adv-lit:#8ec0ca;
  --adv-rim:rgba(217,188,120,.42);
  --adv-track:rgba(255,255,255,.12);
}

/* ---------------- the mark -------------------------------------------- */
.advmark{display:block;width:100%;height:100%;overflow:visible;}
.advframe{
  /* A portrait ratio. This is half of why the mark does not read as an avatar:
     a 1:1 circle is the universal chat-bot shape and carries all of its
     connotations, and a 5:6 plate is what a practice puts a partner in. */
  aspect-ratio:5 / 6;
  flex:none;
  filter:drop-shadow(0 4px 12px rgba(5,39,51,.16));
}
.adv-photo{filter:saturate(.92) contrast(1.02);}

/* The rim carries focus and hover; the figure never does. */
.adv-rim{transition:stroke .25s ease;}
.adv-plate{transition:opacity .25s ease;}

/* ---------------- state: the rule under the plate ---------------------
   `pathLength="100"` on `.adv-live` lets every state animate a dash pattern in
   the same 0-100 space regardless of the actual path length, so the timings
   below are readable numbers rather than magic ones. */
.adv-live{stroke-dasharray:0 100;stroke-dashoffset:0;transition:stroke .3s ease;}

/* idle — a quiet, static gold rule. No animation at rest. A widget that
   breathes while nobody is talking to it is a toy. */
.st-idle .adv-live{stroke-dasharray:0 100;}

/* speaking — the rule fills and empties from the centre, in time with speech.
   Deliberately slow: this is a measured professional voice, not a waveform. */
.st-speaking .adv-live{animation:advSpeak 2.1s ease-in-out infinite;}
@keyframes advSpeak{
  0%,100%{stroke-dasharray:10 90;stroke-dashoffset:-45;}
  50%{stroke-dasharray:74 26;stroke-dashoffset:-13;}
}

/* listening — a travelling segment, so "we are hearing you" is unmistakably
   different from "we are talking". Gold, because listening is the client's
   turn and gold is this product's client-attention colour. */
.st-listening .adv-live{stroke:var(--adv-gold-2);animation:advListen 1.5s linear infinite;}
@keyframes advListen{
  0%{stroke-dasharray:18 82;stroke-dashoffset:0;}
  100%{stroke-dasharray:18 82;stroke-dashoffset:-100;}
}
.st-listening .adv-rim{stroke:var(--adv-gold-2);}

/* thinking — a short segment easing back and forth. Reads as considered, not
   as a spinner. */
.st-thinking .adv-live{animation:advThink 1.25s ease-in-out infinite alternate;}
@keyframes advThink{
  from{stroke-dasharray:14 86;stroke-dashoffset:-6;}
  to{stroke-dasharray:14 86;stroke-dashoffset:-80;}
}

/* muted — the rule stays, the accent goes. Muted is a deliberate state the
   client chose, so it is calm rather than broken-looking. */
.st-muted .adv-live{stroke-dasharray:0 100;}
.st-muted .advframe{filter:none;opacity:.88;}
.st-muted .adv-plate{opacity:.9;}

/* ---------------- reduced motion --------------------------------------
   Every state still reads, because each one has a distinct STATIC dash
   pattern. Removing the animation removes the movement, not the meaning. */
@media (prefers-reduced-motion:reduce){
  .adv-live{animation:none !important;}
  .st-speaking .adv-live{stroke-dasharray:74 26;stroke-dashoffset:-13;}
  .st-listening .adv-live{stroke-dasharray:40 60;stroke-dashoffset:-30;stroke:var(--adv-gold-2);}
  .st-thinking .adv-live{stroke-dasharray:14 86;stroke-dashoffset:-43;}
}

/* ---------------- sizes ------------------------------------------------
   One mark, three sizes. Nothing about the geometry changes between them —
   the silhouette is legible at 40px because it has no detail that could be
   lost, which is the practical argument for a silhouette over a portrait. */
.advframe.sz-sm{width:40px;}
.advframe.sz-md{width:60px;}
.advframe.sz-lg{width:104px;}

/* ---------------- the named plate --------------------------------------
   Used where the advisor is introduced rather than merely present: the Guide
   panel header, and the Knowledge Centre. A name and a role under a portrait
   is exactly how a practice presents a person, and it is the cheapest way to
   say "this is an advisor" instead of "this is a bot". */
.advcard{display:flex;align-items:center;gap:13px;}
.advcard .advmeta{min-width:0;}
.advcard .advname{display:block;font-weight:600;font-size:14px;color:var(--heading);
  line-height:1.3;}
.advcard .advrole{display:block;font-size:12px;color:var(--ink-3);line-height:1.4;}
.advcard .advrule{display:block;width:26px;height:2px;border-radius:2px;
  background:var(--gold-grad);margin-block-start:6px;}