/* THE DACHSHUND (23 September 2026).
   A surprise for Louisa's first login. The JavaScript moves ONE element and sets two custom
   properties; everything that makes him look alive - legs, ears, tail, sitting, lying down -
   happens here, so a frame costs one transform rather than a pile of DOM writes.

   He is decoration. pointer-events:none everywhere, aria-hidden on the root, and he sits under
   any dialog or menu in the stacking order. He can never take a click meant for the application. */

.ax-companion {
    position: fixed;
    left: 0;
    top: 0;
    width: 100px;
    height: 56px;
    z-index: 900;              /* below dialogs (1000+) and the top bar's menus */
    pointer-events: none;
    will-change: transform;
    --ax-dog-stride: 0;
    --ax-dog-speed: 1;

    /* Not there until there is a pointer to follow - see "FIRST SIGHTING" in the script. An
       element with no transform sits at 0,0, which put him in the top-left corner on every page
       load until the mouse first moved. */
    opacity: 0;
}

.ax-companion.is-here {
    opacity: 1;
    transition: opacity .45s ease-out;
}

.ax-companion svg { overflow: visible; display: block; }

/* ---- the dog's colours -------------------------------------------------- */
/* A LIMB TURNS AT ITS JOINT, NOT AT ITS MIDDLE (23 September 2026).
   Everything below that rotates carries transform-box: view-box and an origin in the SVG's own
   coordinates. Without it, "transform-origin: 50%" resolves against each element's OWN bounding
   box - so a leg swung about the middle of itself, and at larger angles left the dog entirely.
   The first render had a back leg hovering unattached below the body while he lay down. */
.ax-dog-leg,
.ax-dog-tail path,
.ax-dog-ear,
.ax-dog-head,
.ax-dog-body { transform-box: view-box; }

.ax-dog-coat   { fill: url(#axDogCoat); }
.ax-dog-saddle { fill: url(#axDogSaddle); }
.ax-dog-tan    { fill: #D59A55; opacity: .9; }
.ax-dog-brow   { fill: #D59A55; opacity: .75; }
.ax-dog-ear    { fill: url(#axDogEar); transform-origin: 79px 13px; }
.ax-dog-nose   { fill: #180C05; }
.ax-dog-eye    { fill: #140D07; }
.ax-dog-glint  { fill: #fff; opacity: .9; }   /* the difference between an eye and a dot */
.ax-dog-head   { transform-origin: 72px 28px; }
.ax-dog-body   { transform-origin: 48px 40px; }
.ax-dog-shadow { fill: #000; opacity: .15; }

.ax-dog-collar {
    fill: none;
    stroke: var(--archex-ochre, #F26C21);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .92;
}

.ax-dog-leg path {
    fill: none;
    stroke: #7A3C15;
    stroke-width: 5.4;
    stroke-linecap: round;
}

/* Tan on the lower leg, as a red dachshund carries it. */
.ax-dog-leg .ax-dog-paw { stroke: #B4783E; stroke-width: 5.2; }

/* The far side sits in shade, which is what stops him looking like a flat cut-out. */
.ax-dog-leg-far path { stroke: #4F2510; }
.ax-dog-leg-far .ax-dog-paw { stroke: #7B4C24; }

.ax-dog-tail path {
    fill: none;
    stroke-linecap: round;
    transform-origin: 28px 28px;   /* where it joins the rump */
}

.ax-dog-tail-root { stroke: #8B4718; stroke-width: 4.6; }
.ax-dog-tail-tip  { stroke: #A5591F; stroke-width: 3.2; }

/* ---- the walk ------------------------------------------------------------
   Driven by --ax-dog-stride, which the script advances by DISTANCE TRAVELLED.
   Diagonal pairs move together, which is how a dog actually trots; legs moving
   in pairs front-and-back is a rocking horse. */
/* Each leg turns at its own hip. */
.ax-dog-leg-br { transform-origin: 31px 34px; }
.ax-dog-leg-bl { transform-origin: 37px 34px; }
.ax-dog-leg-fr { transform-origin: 67px 34px; }
.ax-dog-leg-fl { transform-origin: 72px 34px; }

.ax-companion[data-pose="walk"] .ax-dog-leg-fl,
.ax-companion[data-pose="run"]  .ax-dog-leg-fl,
.ax-companion[data-pose="walk"] .ax-dog-leg-br,
.ax-companion[data-pose="run"]  .ax-dog-leg-br {
    transform: rotate(calc(sin(var(--ax-dog-stride) * 1rad) * 26deg));
}

.ax-companion[data-pose="walk"] .ax-dog-leg-fr,
.ax-companion[data-pose="run"]  .ax-dog-leg-fr,
.ax-companion[data-pose="walk"] .ax-dog-leg-bl,
.ax-companion[data-pose="run"]  .ax-dog-leg-bl {
    transform: rotate(calc(sin(var(--ax-dog-stride) * 1rad + 3.14159rad) * 26deg));
}

/* Flat out, the ears lift and trail and the tail streams behind. */
.ax-companion[data-pose="run"] .ax-dog-ear {
    transform: rotate(-24deg) translateY(-2px);
    transition: transform .18s ease-out;
}

.ax-companion[data-pose="walk"] .ax-dog-ear {
    transform: rotate(calc(sin(var(--ax-dog-stride) * 1rad) * 7deg));
}

.ax-companion[data-pose="run"] .ax-dog-tail path,
.ax-companion[data-pose="walk"] .ax-dog-tail path {
    animation: ax-dog-stream calc(.5s / var(--ax-dog-speed)) ease-in-out infinite;
}

@keyframes ax-dog-stream {
    0%, 100% { transform: rotate(-10deg); }
    50%      { transform: rotate(10deg); }
}

/* ---- sitting -------------------------------------------------------------
   Back end down, front legs straight, head up, and the tail going. This is the
   pose he holds while she reads, so it has to bear looking at. */
.ax-companion[data-pose="sit"] .ax-dog-body,
.ax-companion[data-pose="lie"] .ax-dog-body {
    transition: transform .34s cubic-bezier(.22, .9, .3, 1);
}

/* Back end down and tipped back on the haunches; front legs straight and taking the weight; head
   up. The whole body pivots about the RUMP (not its centre) so the chest lifts and the tail end
   stays on the ground, which is what makes it read as sitting rather than as leaning. */
/* PIVOT AT THE SHOULDER, NOT THE RUMP. Turning about the rump only TILTS him - the back end never
   reaches the floor and he reads as lunging forward. About the shoulder, the rear swings down and
   plants, which is the whole difference between a sitting dog and a bowing one. */
.ax-companion[data-pose="sit"] .ax-dog-body {
    transform-origin: 76px 44px;
    transform: rotate(-13deg);
}

/* THE BACK END SWAPS, IT DOES NOT BEND. The standing back legs go; the drawn thigh appears. */
.ax-dog-haunch { display: none; }
.ax-dog-thigh { fill: url(#axDogCoat); }
.ax-dog-thigh-tan { fill: #D59A55; opacity: .85; }
.ax-dog-haunch-foot { fill: none; stroke: #B4783E; stroke-width: 5.2; stroke-linecap: round; }

.ax-companion[data-pose="sit"] .ax-dog-haunch,
.ax-companion[data-pose="lie"] .ax-dog-haunch { display: block; }

/* Tipping the body drops the rear by about ten pixels, which puts the drawn thigh through the
   floor and leaves the foot hanging in mid-air. Lift it back onto the ground. */
.ax-companion[data-pose="sit"] .ax-dog-haunch {
    transform-box: view-box;
    transform: translateY(-8px);
}

.ax-companion[data-pose="lie"] .ax-dog-haunch {
    transform-box: view-box;
    transform: translate(2px, -4px) scaleY(.82);
    transform-origin: 34px 47px;
}

.ax-companion[data-pose="sit"] .ax-dog-leg-br,
.ax-companion[data-pose="sit"] .ax-dog-leg-bl,
.ax-companion[data-pose="lie"] .ax-dog-leg-br,
.ax-companion[data-pose="lie"] .ax-dog-leg-bl { display: none; }

/* The shadow comes with him: he is shorter on the ground sitting than standing. */
.ax-companion[data-pose="sit"] .ax-dog-shadow {
    transform-box: view-box;
    transform-origin: 50px 51px;
    transform: translate(-6px, -2px) scaleX(.82);
    transition: transform .3s ease-out;
}

/* Front legs braced, and straightened against the body's tilt so they stay vertical. */
.ax-companion[data-pose="sit"] .ax-dog-leg-fr,
.ax-companion[data-pose="sit"] .ax-dog-leg-fl {
    transform: rotate(17deg);
    transition: transform .3s ease-out;
}

/* The head levels off against the body's tilt, because a sitting dog looks at you rather than at
   the ceiling. Same angle as the body, opposite sign. */
.ax-companion[data-pose="sit"] .ax-dog-head {
    transform: rotate(17deg);
    transition: transform .34s ease-out;
}
.ax-companion[data-pose="sit"] .ax-dog-tail path { animation: ax-dog-wag .42s ease-in-out infinite; }
.ax-companion[data-pose="sit"] .ax-dog-ear { animation: ax-dog-earflick 5.5s ease-in-out infinite; }

@keyframes ax-dog-wag {
    0%, 100% { transform: rotate(-26deg); }
    50%      { transform: rotate(18deg); }
}

/* Every few seconds, one ear. It is the difference between a drawing and an animal. */
@keyframes ax-dog-earflick {
    0%, 88%, 100% { transform: rotate(0deg); }
    91%           { transform: rotate(-13deg); }
    94%           { transform: rotate(4deg); }
}

/* ---- lying down, waiting -------------------------------------------------
   She has taken the pointer off the screen and not come back. He gives it a few
   seconds, then settles - front legs out, chin down, tail ticking over. */
/* Down on the floor: the whole body drops, the legs fold right under and disappear beneath him,
   and the chin comes down. No rotation on the body - a lying dog is level, not tilted. */
.ax-companion[data-pose="lie"] .ax-dog-body { transform: translateY(8px); }

/* Front paws forward, the way they stretch out in front when they settle. */
.ax-companion[data-pose="lie"] .ax-dog-leg-fr,
.ax-companion[data-pose="lie"] .ax-dog-leg-fl {
    transform: rotate(-74deg);
    transition: transform .4s ease-out;
}

.ax-companion[data-pose="lie"] .ax-dog-head { transform: translateY(5px); transition: transform .4s ease-out; }
.ax-companion[data-pose="lie"] .ax-dog-tail path { animation: ax-dog-wag 1.5s ease-in-out infinite; }
.ax-companion[data-pose="lie"] .ax-dog-shadow { opacity: .1; }

/* ---- barking at New Job -------------------------------------------------
   Adam Deane: "when louisa clicks on new job he bards really loud and excited."

   Three yaps come out of the speakers; this is what she sees while they do. He comes up off his
   front feet, his head snaps up on each one, his ears fly, and the tail goes mad. The timing is
   matched to the sound - yaps at 0ms, 155ms and 300ms - so the movement lands ON the bark rather
   than near it, which is the whole difference between funny and broken. */
.ax-companion.is-barking .ax-dog-body { animation: ax-dog-bark-body .62s ease-out; }
.ax-companion.is-barking .ax-dog-head { animation: ax-dog-bark-head .62s ease-out; }
.ax-companion.is-barking .ax-dog-ear  { animation: ax-dog-bark-ear .62s ease-out; }
.ax-companion.is-barking .ax-dog-tail path { animation: ax-dog-bark-tail .1s ease-in-out 6; }

@keyframes ax-dog-bark-body {
    0%            { transform: translateY(0) rotate(0deg); }
    4%            { transform: translateY(-5px) rotate(-7deg); }   /* first yap */
    16%           { transform: translateY(0) rotate(-2deg); }
    27%           { transform: translateY(-4px) rotate(-6deg); }   /* second */
    40%           { transform: translateY(0) rotate(-2deg); }
    50%           { transform: translateY(-3px) rotate(-5deg); }   /* third */
    70%, 100%     { transform: translateY(0) rotate(0deg); }
}

@keyframes ax-dog-bark-head {
    0%            { transform: rotate(0deg); }
    4%            { transform: rotate(-16deg); }
    16%           { transform: rotate(-4deg); }
    27%           { transform: rotate(-14deg); }
    40%           { transform: rotate(-4deg); }
    50%           { transform: rotate(-11deg); }
    70%, 100%     { transform: rotate(0deg); }
}

@keyframes ax-dog-bark-ear {
    0%            { transform: rotate(0deg); }
    6%            { transform: rotate(-22deg) translateY(-2px); }
    20%           { transform: rotate(6deg); }
    30%           { transform: rotate(-18deg) translateY(-2px); }
    45%           { transform: rotate(5deg); }
    55%           { transform: rotate(-14deg); }
    75%, 100%     { transform: rotate(0deg); }
}

@keyframes ax-dog-bark-tail {
    0%, 100% { transform: rotate(-30deg); }
    50%      { transform: rotate(24deg); }
}

/* ---- the switch in the top bar ------------------------------------------ */
.ax-companion-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--archex-radius-small, 6px);
}

.ax-companion-switch:hover { background: var(--archex-panel, #F5F1EA); }

.ax-companion-switch .ax-companion-pip {
    width: 30px;
    height: 17px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #C9C3B8;
    position: relative;
    transition: background .18s ease;
}

.ax-companion-switch .ax-companion-pip::after {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}

.ax-companion-switch[aria-pressed="true"] .ax-companion-pip { background: var(--archex-ochre, #F26C21); }
.ax-companion-switch[aria-pressed="true"] .ax-companion-pip::after { transform: translateX(13px); }

/* Somebody who asked their system for less movement is not overruled by a puppy. */
@media (prefers-reduced-motion: reduce) {
    .ax-companion { display: none; }
}

/* ---- NO DOG ON A TOUCH SCREEN (29 September 2026) --------------------------------------------

   He follows the pointer. A phone has no pointer, so on Adam's handset the dachshund simply stopped
   wherever he had last been put and sat on top of the "all jobs" link on the Live work card - an
   obstruction with no way to shoo him off, because there is no mouse for him to follow.

   pointer: coarse is the honest test: it asks whether the primary input is a finger, which is
   exactly the condition under which he cannot work. He stays on every desktop.

   display: none rather than opacity, so he is not an invisible thing over a link either - the
   element is pointer-events: none, but a hidden obstruction is still a thing to reason about and
   this removes it entirely. */
@media (pointer: coarse) {
    .ax-companion { display: none !important; }
}