/* ==========================================================================
   FO guide
   --------------------------------------------------------------------------
   1. The unicorn        colours, parts, poses, motion (inst/guide/rig.svg
                         and lights.svg, both inside one .fo-guide-char)
   2. Layers             stacking of the guide's own layers
   3. Ink                dim, ring, arrow, bracket, tick
   4. Controls           the guide's buttons
   5. Bubble             one step of a tour
   6. Guide button       the ring on the top bar button, the invitation card
   7. Dock               the unicorn at rest, its menu
   8. Hub                the side panel
   9. Form strip         the guide inside an item form
   10. Small screens, stop motion, forced colours
   11. Engine parts      what inst/www/fo_guide.js needs beside the drawing:
                         the hidden state, the sprite, the live region, the
                         note and the lost state of the bubble, the chapter
                         card, the badge on the Guide button, the hub on the
                         left, the question before "Start again", the corner
                         help pill

   Rules of this file:
   - Colours come from fo-tokens.css. No colour is written here as a literal;
     "transparent", "currentColor" and system colours are the exceptions.
   - On the unicorn only transforms (transform, rotate, translate, scale) and
     opacity move. Motion that starts by itself ends within five seconds.
   - Everything is switched off by "Stop motion" (.fo-guide-still) and by the
     reduced-motion setting of the device: the poses stay, the movement goes.
   ========================================================================== */


/* ==========================================================================
   1. The unicorn
   ========================================================================== */

.fo-guide-char {
  --fg-size: 120px;

  /* The two brand blues trade places between the themes in fo-tokens.css;
     here each keeps its role: deep for the mane, light for the horn. */
  --fg-deep: var(--fo-brand);
  --fg-light: var(--fo-brand-light);

  --fg-coat: var(--fo-text-on-brand);
  --fg-ink: var(--fo-landing-surface);
  --fg-far: color-mix(in srgb, var(--fg-coat) 86%, var(--fg-ink));
  --fg-iris: var(--fg-light);
  --fg-shine: var(--fo-text-on-brand);
  --fg-lamp: var(--fg-deep);
  /* On a light page the white coat needs a line around it. */
  --fg-edge: color-mix(in srgb, var(--fo-brand) 55%, var(--fo-text));
  --fg-line: 0.7px;
  --fg-shade: color-mix(in srgb, var(--fo-text) 16%, transparent);

  position: relative;
  display: inline-block;
  flex: none;
  width: var(--fg-size);
  line-height: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.2s linear, translate 0.2s ease-out;
}

body.dark-mode .fo-guide-char,
[data-bs-theme="dark"] .fo-guide-char {
  --fg-deep: var(--fo-brand-light);
  --fg-light: var(--fo-brand);
  --fg-edge: transparent;
  --fg-shade: color-mix(in srgb, var(--fo-landing-surface) 45%, transparent);
  --fg-lamp: color-mix(in srgb, var(--fg-light) 60%, var(--fg-shine));
}

.fo-guide-char[data-size="88"] { --fg-size: 88px; }
.fo-guide-char[data-size="72"] { --fg-size: 72px; }
.fo-guide-char[data-size="56"] { --fg-size: 56px; --fg-line: 0.55px; }
.fo-guide-char[data-size="40"] { --fg-size: 40px; --fg-line: 0.5px; }

.fo-guide-rig {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* The line is drawn around the whole figure, not around each part, so
     the joints stay invisible. */
  filter: drop-shadow(var(--fg-line) 0 0 var(--fg-edge))
          drop-shadow(calc(var(--fg-line) * -1) 0 0 var(--fg-edge))
          drop-shadow(0 var(--fg-line) 0 var(--fg-edge))
          drop-shadow(0 calc(var(--fg-line) * -1) 0 var(--fg-edge))
          drop-shadow(0 2px 3px var(--fg-shade));
}

/* The lights (inst/guide/lights.svg) lie over the figure, on the same
   joints, and take no line and no shadow. */
.fo-guide-rig--lights {
  position: absolute;
  top: 0;
  left: 0;
  filter: none;
}

/* ---- Colours of the parts ---- */

.fo-guide-rig .fg-body { fill: var(--fg-coat); }
.fo-guide-rig .fg-far { fill: var(--fg-far); }
.fo-guide-rig .fg-mane-1 { fill: var(--fg-deep); }
.fo-guide-rig .fg-mane-2 {
  fill: color-mix(in srgb, var(--fg-deep) 55%, var(--fg-light));
}
.fo-guide-rig .fg-mane-3 { fill: var(--fg-light); }
.fo-guide-rig .fg-horn { fill: var(--fg-light); }
.fo-guide-rig .fg-band {
  fill: color-mix(in srgb, var(--fg-deep) 70%, var(--fg-light));
}
.fo-guide-rig .fg-horn-tip {
  fill: var(--fg-shine);
  opacity: var(--fg-glow, 0);
  transition: opacity 0.25s linear;
}
.fo-guide-rig .fg-glow {
  fill: var(--fg-lamp);
  opacity: var(--fg-glow, 0);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity 0.25s linear;
}
.fo-guide-rig .fg-hole { fill: var(--fg-ink); }
.fo-guide-rig .fg-eye { fill: var(--fg-ink); }
.fo-guide-rig .fg-pupil { fill: var(--fg-iris); }
.fo-guide-rig .fg-glint { fill: var(--fg-shine); }
.fo-guide-rig .fg-spark {
  fill: var(--fg-light);
  opacity: var(--fg-spark, 0);
  transition: opacity 0.15s linear;
}


/* ---- Joints ----
   Each pose is a set of angles. The parts read them and move there; the
   pivots are written on the parts in rig.svg. A positive angle raises the
   muzzle, a negative one lowers it. */

.fo-guide-rig [data-part] {
  transform-box: view-box;
  transition: rotate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.2s linear;
}

.fo-guide-rig [data-part="flip"] { scale: var(--fg-flip, 1) 1; }
.fo-guide-rig [data-part="body"] {
  scale: var(--fg-fold, 1);
  opacity: var(--fg-fold, 1);
}
.fo-guide-rig [data-part="neck"] { rotate: var(--fg-neck, 0deg); }
.fo-guide-rig [data-part="head"] { rotate: var(--fg-head, 0deg); }
.fo-guide-rig [data-part="horn"] { rotate: var(--fg-horn, 0deg); }
.fo-guide-rig [data-part="ear-front"] { rotate: var(--fg-ear-f, 0deg); }
.fo-guide-rig [data-part="ear-back"] { rotate: var(--fg-ear-b, 0deg); }
.fo-guide-rig [data-part="jaw"] { rotate: var(--fg-jaw, 0deg); }

.fo-guide-rig [data-part="pupil"],
.fo-guide-rig [data-part="glint"] {
  translate: var(--fg-look-x, 0px) var(--fg-look-y, 0px);
}

/* The lid closes from the upper edge of the eye; the slit shows once it is
   nearly shut. */
.fo-guide-rig [data-part="lid"] {
  transform-box: fill-box;
  transform-origin: 50% 0;
  scale: 1 var(--fg-lid, 0);
  transition: scale 0.18s ease-in-out;
}
.fo-guide-rig [data-part="slit"] {
  opacity: clamp(0, calc((var(--fg-lid, 0) - 0.8) * 5), 1);
}

/* The mane follows the head late and swings a little past it. */
.fo-guide-rig [data-part="lock1"] {
  rotate: calc(var(--fg-head, 0deg) * 0.55 + var(--fg-sway, 0deg));
  transition: rotate 0.65s cubic-bezier(0.3, 1.5, 0.5, 1) 0.04s;
}
.fo-guide-rig [data-part="lock2"] {
  rotate: calc(var(--fg-head, 0deg) * 0.35 + var(--fg-sway, 0deg) * 1.4);
  transition: rotate 0.75s cubic-bezier(0.3, 1.5, 0.5, 1) 0.08s;
}
.fo-guide-rig [data-part="lock3"] {
  rotate: calc(var(--fg-head, 0deg) * 0.18 + var(--fg-sway, 0deg) * 1.8);
  transition: rotate 0.85s cubic-bezier(0.3, 1.5, 0.5, 1) 0.12s;
}

.fo-guide-char[data-flip="on"] { --fg-flip: -1; }

/* ---- Poses ---- */

/* docked: at rest. The angles are those of the drawing. */

.fo-guide-char[data-pose="greet"] {
  --fg-neck: 3deg;
  --fg-ear-f: -10deg;
  --fg-ear-b: -8deg;
  --fg-look-x: -1.2px;
}

.fo-guide-char[data-pose="travel"] {
  --fg-fold: 0.02;
  --fg-spark: 1;
}

/* The script gives the angle to the target in --fg-aim (at most 18 degrees
   either way); neck and head share it. */
.fo-guide-char[data-pose="point"],
.fo-guide-char[data-pose="draw"],
.fo-guide-char[data-pose="speak"],
.fo-guide-char[data-pose="wait"] {
  --fg-neck: calc(var(--fg-aim, 0deg) * 0.35);
  --fg-head: calc(var(--fg-aim, 0deg) * 0.65);
  --fg-ear-f: -8deg;
  --fg-ear-b: -6deg;
  --fg-look-x: -1.8px;
}

.fo-guide-char[data-pose="draw"] {
  --fg-glow: 1;
  --fg-horn: -2deg;
}

.fo-guide-char[data-pose="speak"] {
  --fg-neck: calc(var(--fg-aim, 0deg) * 0.2 + 2deg);
  --fg-head: calc(var(--fg-aim, 0deg) * 0.4);
  --fg-look-x: -1px;
}

.fo-guide-char[data-pose="think"] {
  --fg-neck: -2deg;
  --fg-head: 8deg;
  --fg-lid: 0.42;
  --fg-look-x: -1px;
  --fg-look-y: -1.6px;
  --fg-ear-f: 4deg;
  --fg-ear-b: 9deg;
}

.fo-guide-char[data-pose="pleased"] {
  --fg-neck: 3deg;
  --fg-lid: 0.34;
  --fg-ear-f: -12deg;
  --fg-ear-b: -10deg;
  --fg-glow: 0.6;
}

.fo-guide-char[data-pose="yield"] {
  --fg-neck: -4deg;
  --fg-head: -3deg;
  --fg-ear-f: 16deg;
  --fg-ear-b: 18deg;
  opacity: 0;
  translate: 12px 6px;
}

.fo-guide-char[data-pose="sleep"] {
  --fg-neck: -5deg;
  --fg-head: -9deg;
  --fg-lid: 1;
  --fg-ear-f: 10deg;
  --fg-ear-b: 13deg;
  --fg-sway: 3deg;
  opacity: 0.8;
}

/* ---- Motion ----
   Every loop below runs a fixed number of times and is over within five
   seconds. The script starts a pose again to replay it. */

@keyframes fg-breath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes fg-neck-breath {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.1deg); }
}
@keyframes fg-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2.6deg); }
}
@keyframes fg-blink {
  0%, 100% { scale: 1 var(--fg-lid, 0); }
  40%, 60% { scale: 1 1; }
}
@keyframes fg-flick {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-14deg); }
  60% { transform: rotate(5deg); }
}
@keyframes fg-nod {
  0%, 100% { transform: rotate(0deg); }
  32% { transform: rotate(-11deg); }
  68% { transform: rotate(3deg); }
}
@keyframes fg-nod-small {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-5deg); }
}
@keyframes fg-unfold {
  0% { transform: scale(0.02); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fg-spark-out {
  0% { transform: scale(0.3) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.7) rotate(80deg); opacity: 0; }
}
@keyframes fg-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.35) rotate(45deg); }
}
@keyframes fg-pulse {
  0% { transform: scale(0.5); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes fg-talk {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); }
}
@keyframes fg-settle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* At rest: two breaths, one blink, one flick of the ear. */
.fo-guide-char[data-pose="docked"] [data-part="root"] {
  animation: fg-breath 2.3s ease-in-out 2;
}
.fo-guide-char[data-pose="docked"] [data-part="neck"] {
  animation: fg-neck-breath 2.3s ease-in-out 2;
}
.fo-guide-char[data-pose="docked"] [data-part="lock2"],
.fo-guide-char[data-pose="docked"] [data-part="lock3"] {
  animation: fg-sway 2.3s ease-in-out 0.15s 2;
}
.fo-guide-char[data-pose="docked"] [data-part="lid"] {
  animation: fg-blink 0.26s ease-in-out 1.3s 1;
}
.fo-guide-char[data-pose="docked"] [data-part="ear-front"] {
  animation: fg-flick 0.5s ease-in-out 3.3s 1;
}

/* Greeting: out of a spark, then a nod and a blink. */
.fo-guide-char[data-pose="greet"] [data-part="body"] {
  animation: fg-unfold 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.fo-guide-char[data-pose="greet"] .fg-spark {
  animation: fg-spark-out 0.5s ease-out both;
}
.fo-guide-char[data-pose="greet"] [data-part="head"] {
  animation: fg-nod 0.6s ease-in-out 0.4s 1;
}
.fo-guide-char[data-pose="greet"] [data-part="lid"] {
  animation: fg-blink 0.26s ease-in-out 1.1s 1;
}
.fo-guide-char[data-pose="greet"] [data-part="lock1"],
.fo-guide-char[data-pose="greet"] [data-part="lock2"],
.fo-guide-char[data-pose="greet"] [data-part="lock3"] {
  animation: fg-sway 0.7s ease-in-out 0.5s 1;
}

/* Travelling: only the spark is left, and it turns. */
.fo-guide-char[data-pose="travel"] .fg-spark {
  animation: fg-twinkle 0.6s ease-in-out 2;
}

/* Drawing: the tip of the horn lights and sends out one ring of light. */
.fo-guide-char[data-pose="draw"] .fg-glow {
  animation: fg-pulse 0.7s ease-out 1;
}

/* Waiting: a look at the target and one flick of the ear. */
.fo-guide-char[data-pose="wait"] [data-part="ear-front"] {
  animation: fg-flick 0.5s ease-in-out 1.6s 1;
}
.fo-guide-char[data-pose="wait"] [data-part="lid"] {
  animation: fg-blink 0.26s ease-in-out 3s 1;
}

/* Thinking: one slow blink. */
.fo-guide-char[data-pose="think"] [data-part="ear-back"] {
  animation: fg-flick 0.6s ease-in-out 1.2s 1;
}

/* Pleased: a nod. */
.fo-guide-char[data-pose="pleased"] [data-part="head"] {
  animation: fg-nod 0.6s ease-in-out 1;
}
.fo-guide-char[data-pose="pleased"] .fg-glow {
  animation: fg-pulse 0.7s ease-out 0.1s 1;
}

/* The jaw moves only while a recorded voice is playing. */
.fo-guide-char[data-talk="on"] [data-part="jaw"] {
  animation: fg-talk 0.34s ease-in-out infinite;
}


/* ==========================================================================
   2. Layers
   --------------------------------------------------------------------------
   Above the page and the phone sidebar (1045), under every dialog and its
   backdrop (1050 and more). While something else has the screen the root is
   inert and hidden.
   ========================================================================== */

#fo-guide-root,
.fo-guide-inform,
.fo-guide-scope {
  /* Lines and links take the brand colour of the theme, deepened towards
     the text so that they read on the surface and on the tint of a hovered
     row (5.6:1 on white, 4.8:1 on the tint); filled buttons take a deep
     blue in both themes, so that their white text stays readable (5.2:1
     here, 5.5:1 in the dark theme). A mark with no text on it (the switch
     that is on, the pill of the current step) must stand out from the
     surface instead: the deep blue here, the lighter brand blue in the dark
     theme (3.7:1 on the dark surface, where the deep one is 2.6:1). */
  --fo-guide-line: color-mix(in srgb, var(--fo-brand) 75%, var(--fo-text));
  --fo-guide-fill: color-mix(in srgb, var(--fo-brand) 80%, var(--fo-text));
  --fo-guide-mark: var(--fo-guide-fill);
  --fo-guide-shadow: color-mix(in srgb, var(--fo-landing-surface) 30%, transparent);
  --fo-guide-veil: color-mix(in srgb, var(--fo-landing-surface) 46%, transparent);
  --fo-guide-soft: color-mix(in srgb, var(--fo-brand) 12%, transparent);
  --fo-guide-soft-2: color-mix(in srgb, var(--fo-brand) 22%, transparent);
  --fo-guide-radius: 14px;
}

body.dark-mode #fo-guide-root,
body.dark-mode .fo-guide-inform,
body.dark-mode .fo-guide-scope,
[data-bs-theme="dark"] #fo-guide-root,
[data-bs-theme="dark"] .fo-guide-inform,
[data-bs-theme="dark"] .fo-guide-scope {
  --fo-guide-fill: color-mix(in srgb, var(--fo-brand-light) 80%, var(--fo-landing-surface));
  --fo-guide-mark: var(--fo-brand-light);
  --fo-guide-shadow: color-mix(in srgb, var(--fo-landing-surface) 60%, transparent);
}

#fo-guide-root {
  font-size: 15px;
  line-height: 1.45;
  color: var(--fo-text);
}

#fo-guide-root[inert] { visibility: hidden; }

.fo-guide-ink { position: fixed; inset: 0; z-index: 1046; pointer-events: none; }
.fo-guide-stage { position: fixed; z-index: 1047; pointer-events: none; }
.fo-guide-bubble { position: fixed; z-index: 1047; }
.fo-guide-card { position: fixed; z-index: 1047; }
.fo-guide-dock { position: fixed; z-index: 1048; }
.fo-guide-hub { position: fixed; z-index: 1049; }


/* ==========================================================================
   3. Ink
   --------------------------------------------------------------------------
   One SVG the size of the window. Every stroke has pathLength="1", so one
   pair of dash values draws any of them.
   ========================================================================== */

.fo-guide-ink { width: 100%; height: 100%; overflow: visible; }

.fo-guide-ink-dim {
  fill: var(--fo-guide-veil);
  fill-rule: evenodd;
  transition: opacity 0.25s linear;
}

.fo-guide-ink-ring,
.fo-guide-ink-arrow,
.fo-guide-ink-bracket,
.fo-guide-ink-tick {
  fill: none;
  stroke: var(--fo-guide-line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

.fo-guide-ink-arrow { stroke-width: 2.5; }
.fo-guide-ink-tick { stroke: var(--fo-success); stroke-width: 3.5; }

/* On the top bar the ink is drawn in the colour of the top bar's icons:
   dark on the white bar of the light theme, white on the dark one. */
.fo-guide-ink-ring--bar { stroke: var(--fo-text); }

@keyframes fo-guide-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes fo-guide-ring-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

.fo-guide-ink-ring.is-drawing,
.fo-guide-ink-bracket.is-drawing { animation: fo-guide-draw 0.7s ease-in-out both; }
.fo-guide-ink-arrow.is-drawing { animation: fo-guide-draw 0.4s ease-out 0.15s both; }
.fo-guide-ink-tick.is-drawing { animation: fo-guide-draw 0.35s ease-out both; }

.fo-guide-ink-ring.is-dimmed { opacity: 0.25; }

.fo-guide-ink-halo {
  fill: none;
  stroke: var(--fo-guide-line);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  vector-effect: non-scaling-stroke;
}
.fo-guide-ink-halo.is-pulsing {
  animation: fo-guide-ring-pulse 1.1s ease-out 0.7s 3;
}
.fo-guide-ink-halo--bar { stroke: var(--fo-text-on-brand); }

.fo-guide-ink-sparkle {
  fill: var(--fo-guide-line);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes fo-guide-sparkle {
  0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2) rotate(70deg); }
}
.fo-guide-ink-sparkle.is-on { animation: fo-guide-sparkle 0.8s ease-out both; }
.fo-guide-ink-sparkle.is-on:nth-of-type(2n) { animation-delay: 0.12s; }
.fo-guide-ink-sparkle.is-on:nth-of-type(3n) { animation-delay: 0.22s; }


/* ==========================================================================
   4. Controls
   ========================================================================== */

.fo-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  min-width: 34px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--fo-text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s linear, border-color 0.15s linear;
}
.fo-guide-btn:hover { background: var(--fo-guide-soft); }
.fo-guide-btn:focus-visible {
  outline: 2px solid var(--fo-guide-line);
  outline-offset: 2px;
}
.fo-guide-btn[disabled] { opacity: 0.45; cursor: default; }

.fo-guide-btn--primary {
  background: var(--fo-guide-fill);
  color: var(--fo-text-on-brand);
}
.fo-guide-btn--primary:hover {
  background: color-mix(in srgb, var(--fo-guide-fill) 86%, var(--fo-landing-surface));
}
.fo-guide-btn--line { border-color: var(--fo-border); }
.fo-guide-btn--quiet {
  padding: 4px 8px;
  min-height: 28px;
  font-weight: 500;
  color: var(--fo-text-muted);
}
.fo-guide-btn--icon { padding: 0; width: 34px; }
/* Read aloud, while it is on: the speaker in the guide's own colour. */
.fo-guide-btn--icon[aria-pressed="true"] { color: var(--fo-guide-line); background: var(--fo-guide-soft); }
.fo-guide-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.fo-guide-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.fo-guide-switch__track {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--fo-border);
  transition: background-color 0.15s linear;
}
.fo-guide-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fo-text-on-brand);
  transition: translate 0.15s ease-out;
}
.fo-guide-switch[aria-pressed="true"] .fo-guide-switch__track {
  background: var(--fo-guide-mark);
}
.fo-guide-switch[aria-pressed="true"] .fo-guide-switch__track::after {
  translate: 12px 0;
}
.fo-guide-switch:focus-visible {
  outline: 2px solid var(--fo-guide-line);
  outline-offset: 2px;
}


/* ==========================================================================
   5. Bubble
   ========================================================================== */

.fo-guide-bubble {
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px 12px;
  border: 1px solid var(--fo-card-border);
  border-radius: var(--fo-guide-radius);
  background: var(--fo-surface);
  color: var(--fo-text);
  box-shadow: 0 10px 30px var(--fo-guide-shadow);
  pointer-events: auto;
}

/* The tail points at the unicorn. The script sets the side. */
.fo-guide-bubble::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--fo-card-border);
  border-right: 0;
  border-top: 0;
  background: var(--fo-surface);
  rotate: 45deg;
}
.fo-guide-bubble[data-tail="left"]::before { left: -8px; top: 28px; }
.fo-guide-bubble[data-tail="right"]::before { right: -8px; top: 28px; rotate: 225deg; }
.fo-guide-bubble[data-tail="top"]::before { top: -8px; left: 28px; rotate: 135deg; }
.fo-guide-bubble[data-tail="bottom"]::before { bottom: -8px; left: 28px; rotate: -45deg; }
.fo-guide-bubble[data-tail="none"]::before { display: none; }

.fo-guide-bubble__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.fo-guide-bubble__where {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fo-text-muted);
}
.fo-guide-bubble__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.fo-guide-bubble__text { margin: 0; }
.fo-guide-bubble__text + .fo-guide-bubble__text { margin-top: 8px; }
/* A calculation card: the formula and its example stand apart from what
   the figure is, and the bubble is wider for them. */
.fo-guide-bubble.is-calc { width: 340px; }
.fo-guide-bubble.is-calc .fo-guide-bubble__text + .fo-guide-bubble__text {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--fo-guide-soft);
  font-size: 13px;
}
.fo-guide-bubble__do {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--fo-guide-soft);
  font-weight: 600;
}
.fo-guide-bubble__do svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--fo-guide-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fo-guide-bubble__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.fo-guide-bubble__foot .fo-guide-steps { flex: 1; }

.fo-guide-steps {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.fo-guide-steps li {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fo-border);
}
.fo-guide-steps li.is-done { background: var(--fo-guide-soft-2); }
.fo-guide-steps li.is-now {
  width: 18px;
  border-radius: 999px;
  background: var(--fo-guide-mark);
}

.fo-guide-dots { display: inline-flex; gap: 4px; align-items: center; }
.fo-guide-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fo-text-muted);
  animation: fo-guide-dot 0.9s ease-in-out 4 both;
}
.fo-guide-dots i:nth-child(2) { animation-delay: 0.15s; }
.fo-guide-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fo-guide-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}


/* ==========================================================================
   6. Guide button and invitation card
   ========================================================================== */

/* The button on the top bar (button#fo_guide_btn.fo-guide-launch). */
.fo-guide-launch {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.fo-guide-launch:focus-visible {
  outline: 2px solid var(--fo-text);
  outline-offset: 2px;
}

/* The top bar is white in the light theme: the unicorn of the button is
   drawn as on any light surface, with its line. At 34 px a hairline left a
   white unicorn on a white bar (owner, 2026-10-08), so the line is thicker
   here (its colour, the brand blue deepened towards the text, is about
   7:1 on white) and the coat takes a faint tint of the brand blue, so the
   shape reads at a glance. On the dark bar of the dark theme it has no
   line, a white coat and keeps the blues. */
.fo-guide-launch .fo-guide-char {
  --fg-size: 34px;
  --fg-line: 1.1px;
  --fg-coat: color-mix(in srgb, var(--fo-brand) 14%, var(--fo-text-on-brand));
  margin-top: 2px;
}
body.dark-mode .fo-guide-launch .fo-guide-char,
[data-bs-theme="dark"] .fo-guide-launch .fo-guide-char {
  --fg-coat: var(--fo-text-on-brand);
  --fg-line: 0.5px;
  --fg-edge: transparent;
  --fg-ink: var(--fo-topbar);
  --fg-deep: var(--fo-brand-light);
  --fg-light: var(--fo-brand);
  --fg-iris: var(--fo-brand);
}

/* The still ring that stays until a tour has been started. The class is on
   the body. The brand blue deepened towards the text reads on the bar of
   either theme (5.2:1 on the white bar, a light blue on the dark one). */
.fo-guide-ring .fo-guide-launch::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid color-mix(in srgb, var(--fo-brand) 80%, var(--fo-text));
  border-radius: 50%;
  pointer-events: none;
}
.fo-guide-ring.fo-guide-ring-new .fo-guide-launch::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid color-mix(in srgb, var(--fo-brand) 80%, var(--fo-text));
  border-radius: 50%;
  pointer-events: none;
  animation: fo-guide-ring-pulse 1.1s ease-out 0.7s 3 both;
}

.fo-guide-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--fo-surface);
  border-radius: 50%;
  background: var(--fo-guide-line);
}

.fo-guide-card {
  box-sizing: border-box;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  border: 1px solid var(--fo-card-border);
  border-radius: var(--fo-guide-radius);
  background: var(--fo-surface);
  color: var(--fo-text);
  box-shadow: 0 14px 40px var(--fo-guide-shadow);
  pointer-events: auto;
}
.fo-guide-card__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.fo-guide-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.fo-guide-card__sub { margin: 2px 0 0; color: var(--fo-text-muted); font-size: 13.5px; }
.fo-guide-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 10px;
}
.fo-guide-card__foot .fo-guide-switch { margin-left: auto; font-size: 13px; color: var(--fo-text-muted); }

.fo-guide-levels { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.fo-guide-level {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 2px 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--fo-border);
  border-radius: 12px;
  background: transparent;
  color: var(--fo-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s linear, background-color 0.15s linear;
}
.fo-guide-level:hover { border-color: var(--fo-guide-line); background: var(--fo-guide-soft); }
.fo-guide-level:focus-visible { outline: 2px solid var(--fo-guide-line); outline-offset: 2px; }
.fo-guide-level[aria-pressed="true"],
.fo-guide-level.is-suggested {
  border-color: var(--fo-guide-line);
  box-shadow: inset 0 0 0 1px var(--fo-guide-line);
  background: var(--fo-guide-soft);
}
.fo-guide-level__mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--fo-guide-soft-2);
  color: var(--fo-guide-line);
}
.fo-guide-level__mark svg { width: 20px; height: 20px; fill: currentColor; }
.fo-guide-level__name { font-weight: 700; }
.fo-guide-level__time {
  font-size: 12px;
  font-weight: 600;
  color: var(--fo-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fo-guide-level__what {
  grid-column: 2 / span 2;
  font-size: 13.5px;
  color: var(--fo-text-muted);
}

/* The guide's two ways in on the pages themselves: the note under the
   order of use of the Welcome page (.fo_guide_welcome_note()) and "Show
   me" on the instruction card of a page (.fo_guide_show_me()). Both stand
   outside the guide's root and take its tokens from the class
   fo-guide-scope. They are shown only while the engine runs (the class on
   the body), since the engine is what answers their press. */
.fo-guide-welcome,
.fo-tab-instr-guide { display: none; }

body.fo-guide-on .fo-guide-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--fo-guide-soft-2);
  border-radius: var(--fo-guide-radius);
  background: var(--fo-guide-soft);
  color: var(--fo-text);
}
.fo-guide-welcome__words { flex: 1 1 280px; min-width: 0; }
.fo-guide-welcome__title { display: block; font-weight: 700; color: var(--fo-text); }
.fo-guide-welcome__text {
  margin: 2px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--fo-text-muted);
}
.fo-guide-welcome .fo-guide-btn { flex: 0 0 auto; }

body.fo-guide-on .fo-tab-instr-guide {
  display: inline-flex;
  margin-top: 10px;
  min-height: 30px;
  padding: 4px 14px;
  border-color: var(--fo-guide-line);
  font-size: 0.875rem;
  color: var(--fo-guide-line);
}


/* ==========================================================================
   7. Dock
   ========================================================================== */

.fo-guide-dock {
  right: 20px;
  bottom: 20px;
  pointer-events: auto;
}
.fo-guide-dock[data-side="left"] { right: auto; left: 20px; }
.fo-guide-dock[data-lifted="on"] { bottom: 96px; }

.fo-guide-dock__plate {
  position: relative;
  display: grid;
  place-items: end center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--fo-card-border);
  border-radius: 50%;
  background: var(--fo-sidebar);
  box-shadow: 0 5px 14px var(--fo-guide-shadow);
  cursor: pointer;
  touch-action: none;
}
.fo-guide-dock__plate:focus-visible {
  outline: 2px solid var(--fo-guide-line);
  outline-offset: 3px;
}
.fo-guide-dock__plate .fo-guide-char {
  --fg-size: 48px;
  --fg-edge: transparent;
  --fg-lamp: color-mix(in srgb, var(--fo-landing-accent) 60%, var(--fg-shine));
  margin: 0 4px -1px 0;
}
.fo-guide-dock[data-side="left"] .fo-guide-char { --fg-flip: -1; margin: 0 0 -1px 4px; }
.fo-guide-dock .fo-guide-badge { top: -1px; right: -1px; width: 10px; height: 10px; }
/* Facing right, the horn stands where the dot would be. */
.fo-guide-dock[data-side="left"] .fo-guide-badge { right: auto; left: -1px; }

.fo-guide-menu {
  position: absolute;
  right: 0;
  bottom: 52px;
  box-sizing: border-box;
  width: 230px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--fo-card-border);
  border-radius: 12px;
  background: var(--fo-surface);
  color: var(--fo-text);
  box-shadow: 0 10px 30px var(--fo-guide-shadow);
  list-style: none;
}
.fo-guide-dock[data-side="left"] .fo-guide-menu { right: auto; left: 0; }
.fo-guide-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.fo-guide-menu button:hover { background: var(--fo-guide-soft); }
.fo-guide-menu button:focus-visible { outline: 2px solid var(--fo-guide-line); outline-offset: -2px; }
.fo-guide-menu svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--fo-text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fo-guide-menu li + li.is-split {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--fo-border);
}


/* ==========================================================================
   8. Hub
   ========================================================================== */

.fo-guide-hub {
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 100vw;
  border-left: 1px solid var(--fo-card-border);
  background: var(--fo-surface);
  color: var(--fo-text);
  box-shadow: -14px 0 40px var(--fo-guide-shadow);
  pointer-events: auto;
}
.fo-guide-hub__head {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px 0;
  background: var(--fo-sidebar);
  color: var(--fo-text-on-brand);
}
.fo-guide-hub__head .fo-guide-char {
  --fg-size: 84px;
  --fg-edge: transparent;
  --fg-lamp: color-mix(in srgb, var(--fo-landing-accent) 60%, var(--fg-shine));
  margin-bottom: -1px;
}
.fo-guide-hub__hello { flex: 1; min-width: 0; padding-bottom: 14px; }
.fo-guide-hub__title { margin: 0; font-size: 18px; font-weight: 700; }
.fo-guide-hub__sub { margin: 2px 0 0; font-size: 13.5px; }
/* custom.css paints every heading and paragraph of the light theme dark
   (body:not(.dark-mode) h3 and p, with !important); the head of the hub is
   dark in both themes, so its texts say their colour with !important and
   two classes, which outweigh one class and two elements. */
.fo-guide-hub__head .fo-guide-hub__title { color: var(--fo-text-on-brand) !important; }
.fo-guide-hub__head .fo-guide-hub__sub {
  color: color-mix(in srgb, var(--fo-text-on-brand) 72%, transparent) !important;
}
.fo-guide-hub__head .fo-guide-btn {
  align-self: flex-start;
  color: var(--fo-text-on-brand);
}
/* A blue outline would not show on the dark head. */
.fo-guide-hub__head .fo-guide-btn:focus-visible { outline-color: var(--fo-text-on-brand); }
.fo-guide-hub__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  gap: 22px;
  align-content: start;
}
.fo-guide-hub__section { display: grid; gap: 8px; }
.fo-guide-hub__label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-text-muted);
}
.fo-guide-hub__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--fo-border);
  font-size: 13.5px;
}

.fo-guide-chapters { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fo-guide-chapter {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 0 10px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fo-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.fo-guide-chapter:hover { background: var(--fo-guide-soft); }
.fo-guide-chapter:focus-visible { outline: 2px solid var(--fo-guide-line); outline-offset: -2px; }
.fo-guide-chapter__state {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--fo-border);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fo-text-muted);
}
.fo-guide-chapter.is-done .fo-guide-chapter__state {
  border-color: transparent;
  background: var(--fo-guide-soft-2);
  color: var(--fo-guide-line);
}
.fo-guide-chapter.is-now .fo-guide-chapter__state {
  border-color: var(--fo-guide-line);
  color: var(--fo-guide-line);
}
.fo-guide-chapter__state svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fo-guide-chapter__name { font-weight: 600; }
.fo-guide-chapter__title { display: block; }
.fo-guide-chapter__where { display: block; font-size: 12.5px; font-weight: 400; color: var(--fo-text-muted); }
.fo-guide-chapter__go { font-size: 12.5px; font-weight: 600; color: var(--fo-guide-line); white-space: nowrap; }

/* The search box over the chapters. Its ground and its text are said here:
   the page's own rules for inputs differ between the themes. */
.fo-guide-search {
  width: 100%;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--fo-border);
  border-radius: 999px;
  background: var(--fo-surface);
  color: var(--fo-text);
  font: inherit;
}
.fo-guide-search::placeholder { color: var(--fo-text-muted); opacity: 1; }
.fo-guide-search:focus-visible { outline: 2px solid var(--fo-guide-line); outline-offset: 2px; }

/* The narration in the hub: Read aloud, and the voices beside it, one
   button each; the one that plays is pressed. */
.fo-guide-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fo-guide-voices { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fo-guide-voices__one {
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--fo-border);
  border-radius: 8px;
  background: var(--fo-surface);
  color: var(--fo-text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.fo-guide-voices__one[aria-pressed="true"] { border-color: var(--fo-guide-line); background: var(--fo-guide-soft); }
.fo-guide-voices__one:focus-visible { outline: 2px solid var(--fo-guide-line); outline-offset: 2px; }

/* A level with many chapters lists them page by page; a page folds. */
.fo-guide-groups { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fo-guide-group__head {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 0 10px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fo-text);
  font: inherit;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.fo-guide-group__head:hover { background: var(--fo-guide-soft); }
.fo-guide-group__head:focus-visible { outline: 2px solid var(--fo-guide-line); outline-offset: -2px; }
/* The mark of a folded page points aside, of an open one down. */
.fo-guide-group__head::before {
  content: "";
  justify-self: center;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.fo-guide-group__head[aria-expanded="true"]::before { transform: rotate(45deg); }
.fo-guide-group__count {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fo-text-muted);
}
.fo-guide-group__head[aria-expanded="false"] + .fo-guide-chapters { display: none; }
/* Under the name of its page a chapter does not name the page again. */
.fo-guide-group .fo-guide-chapter__where { display: none; }
/* A calculation card: no number but a sign, and what it is under its name. */
.fo-guide-group .fo-guide-chapter.is-calc .fo-guide-chapter__where { display: block; }
.fo-guide-chapter.is-calc .fo-guide-chapter__state { border-style: dashed; font-size: 14px; }
.fo-guide-chapter.is-calc.is-done .fo-guide-chapter__state { border-style: solid; }
.fo-guide-chapter.is-calc .fo-guide-chapter__name { font-weight: 500; }

/* "Your setup": what the account holds, ticked or not. */
.fo-guide-setup { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fo-guide-setup__line {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 0 10px;
  align-items: center;
  min-height: 40px;
  padding: 4px 8px;
}
.fo-guide-setup__line.is-done .fo-guide-chapter__state {
  border-color: transparent;
  background: var(--fo-guide-soft-2);
  color: var(--fo-guide-line);
}
.fo-guide-setup__name { font-weight: 600; }
.fo-guide-setup__done { font-size: 12.5px; color: var(--fo-text-muted); white-space: nowrap; }
.fo-guide-setup__line .fo-guide-btn { font-weight: 600; color: var(--fo-guide-line); white-space: nowrap; }
/* custom.css paints every paragraph of the light theme with the text colour
   (!important); a quiet line says its own, with two classes. */
.fo-guide-hub__section .fo-guide-hub__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--fo-text-muted) !important;
}

.fo-guide-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--fo-guide-soft);
}
.fo-guide-note p { margin: 0; }
.fo-guide-note p + p { margin-top: 6px; }
/* The page a tip or a suggested chapter belongs to, under its title. */
.fo-guide-note .fo-guide-note__where {
  margin-top: 0;
  font-size: 12.5px;
  color: var(--fo-text-muted) !important;
}
.fo-guide-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  margin-top: 10px;
}

.fo-guide-video {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--fo-landing-surface);
  color: var(--fo-text-on-brand);
  overflow: hidden;
}
.fo-guide-video__play {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fo-text-on-brand) 92%, transparent);
  color: var(--fo-landing-surface);
  cursor: pointer;
}
.fo-guide-video__play svg { width: 22px; height: 22px; fill: currentColor; }
.fo-guide-video__time {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The video fills the tile. Left to its own size (1920 x 1080) it made the
   tile's grid as large and the tile showed its top left corner; out of the
   grid, its size is the tile's. */
.fo-guide-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--fo-landing-surface);
}


/* ==========================================================================
   9. Form strip
   --------------------------------------------------------------------------
   Lives inside the form, above its buttons. It holds text and buttons only,
   never a field, so the form is not made "unsaved" by the guide.
   ========================================================================== */

.fo-guide-inform {
  /* A child of the form's .modal-content, a column of flex boxes, before
     .modal-footer. It keeps to the lower edge of the dialog while the form
     scrolls, over the ring (900) and under the form's own date pickers and
     lists. Its ground is the dialog's own (--fo-surface is not the ground
     of the dark dialog), with the tint laid over it. */
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 950;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: center;
  margin: 0;
  padding: 8px 16px 8px 10px;
  border-top: 1px solid var(--fo-border);
  background-color: inherit;
  background-image: linear-gradient(var(--fo-guide-soft), var(--fo-guide-soft));
  color: var(--fo-text);
  font-size: 14.5px;
  line-height: 1.4;
}
.fo-guide-inform .is-off,
.fo-guide-field-ring.is-off { display: none !important; }
.fo-guide-inform__body { min-width: 0; }
.fo-guide-inform__title { font-weight: 700; }
.fo-guide-inform .fo-guide-btn { min-height: 28px; min-width: 28px; }
.fo-guide-inform .fo-guide-char { --fg-size: 56px; align-self: end; margin-bottom: -8px; }
.fo-guide-inform__where {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fo-text-muted);
}
.fo-guide-inform__text { margin: 0; }
.fo-guide-inform__actions { display: flex; gap: 4px; align-items: center; }

/* The ring around a field sits inside the form, under its date pickers and
   drop-down lists. */
.fo-guide-field-ring {
  position: absolute;
  z-index: 900;
  overflow: visible;
  pointer-events: none;
}
.fo-guide-field-ring path {
  fill: none;
  stroke: var(--fo-brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  vector-effect: non-scaling-stroke;
}
.fo-guide-field-ring.is-drawing path { animation: fo-guide-draw 0.7s ease-in-out both; }
.fo-guide-field-ring.is-dimmed { opacity: 0.25; }


/* ==========================================================================
   10. Small screens, stop motion, forced colours
   ========================================================================== */

@media (max-width: 991.98px) {
  .fo-guide-stage .fo-guide-char { --fg-size: 88px; }
}

@media (max-width: 575.98px) {
  .fo-guide-stage .fo-guide-char { --fg-size: 56px; }

  /* The bubble becomes a sheet along the lower edge. */
  .fo-guide-bubble {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    padding-top: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--fo-guide-radius) var(--fo-guide-radius) 0 0;
    /* Never taller than the window (a small window, a large zoom): the
       sheet scrolls and its head, with Pause and Close, stays in sight.
       The space above the head is the head's own, so that nothing shows
       through above it; a scroll that reaches the end goes on to the page. */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
  }
  .fo-guide-bubble__head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 14px;
    background: var(--fo-surface);
  }
  .fo-guide-bubble::before { display: none; }
  .fo-guide-card { left: 16px; right: 16px; width: auto; }
  .fo-guide-hub { width: 100vw; }
  .fo-guide-dock { right: 12px; bottom: 12px; }
  /* On a phone the strip has no unicorn; its text takes the whole width,
     over the buttons, and keeps to five lines with a scroll of its own, so
     that the form keeps its room. */
  .fo-guide-inform { grid-template-columns: 1fr; padding: 6px 12px; }
  .fo-guide-inform .fo-guide-char { display: none; }
  .fo-guide-inform__text { max-height: 7em; overflow-y: auto; overscroll-behavior: contain; }
  .fo-guide-inform__actions { justify-content: flex-end; }
  /* The lines of the hub keep their words whole on a narrow screen. */
  .fo-guide-setup__line { grid-template-columns: 26px 1fr; }
  .fo-guide-setup__line .fo-guide-btn,
  .fo-guide-setup__done { grid-column: 2; justify-self: start; }
}

.fo-guide-still .fo-guide-char,
.fo-guide-still .fo-guide-char *,
.fo-guide-still .fo-guide-ink *,
.fo-guide-still .fo-guide-field-ring *,
.fo-guide-still .fo-guide-dots i,
.fo-guide-still .fo-guide-launch::before {
  animation: none !important;
  transition: none !important;
}
.fo-guide-still .fo-guide-launch::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fo-guide-char,
  .fo-guide-char *,
  .fo-guide-ink *,
  .fo-guide-field-ring *,
  .fo-guide-dots i,
  .fo-guide-launch::before {
    animation: none !important;
    transition: none !important;
  }
  .fo-guide-launch::before { display: none; }
}

@media (forced-colors: active) {
  .fo-guide-ink-ring,
  .fo-guide-ink-arrow,
  .fo-guide-ink-bracket,
  .fo-guide-ink-tick,
  .fo-guide-ink-halo,
  .fo-guide-field-ring path { stroke: CanvasText; }
  .fo-guide-ink-dim { fill: Canvas; opacity: 0.6; }
  .fo-guide-bubble,
  .fo-guide-card,
  .fo-guide-hub,
  .fo-guide-menu,
  .fo-guide-inform { border: 1px solid CanvasText; }
  .fo-guide-ring .fo-guide-launch::after { border-color: CanvasText; }

  /* Forced colours take the backgrounds away: the switch and the step dots
     are drawn with system colours, their state included. */
  .fo-guide-switch__track {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .fo-guide-switch__track::after { top: 1px; left: 1px; background: CanvasText; }
  .fo-guide-switch[aria-pressed="true"] .fo-guide-switch__track {
    border-color: Highlight;
    background: Highlight;
  }
  .fo-guide-switch[aria-pressed="true"] .fo-guide-switch__track::after { background: HighlightText; }
  .fo-guide-steps li {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .fo-guide-steps li.is-done,
  .fo-guide-steps li.is-now { background: CanvasText; }
}


/* ==========================================================================
   11. Engine parts
   --------------------------------------------------------------------------
   Additions for inst/www/fo_guide.js and inst/guide/template.html. Nothing
   here changes the drawing or a pose.
   ========================================================================== */

/* Every hidden state of the guide is this one class. */
#fo-guide-root .is-off { display: none !important; }

/* The icons: symbols only, drawn where they are used. */
.fo-guide-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The live region is read aloud, not shown. */
.fo-guide-live {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* The bubble and the card take focus from the script only; they show no
   outline of their own, their buttons do. */
.fo-guide-bubble:focus,
.fo-guide-card:focus,
.fo-guide-hub:focus { outline: none; }
.fo-guide-bubble:focus-visible,
.fo-guide-card:focus-visible,
.fo-guide-hub:focus-visible {
  outline: 2px solid var(--fo-guide-line);
  outline-offset: -4px;
}

/* The three dots while the unicorn thinks. */
.fo-guide-bubble[data-fg="think"] {
  right: auto;
  bottom: auto;
  width: auto;
  padding: 14px 18px;
  border-radius: var(--fo-guide-radius);
}

/* Long words of a translation wrap the row of buttons. */
.fo-guide-bubble__foot { flex-wrap: wrap; row-gap: 6px; }

/* What holds a step up: unsaved changes, a refresh of the data. */
.fo-guide-bubble__note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--fo-guide-soft);
  font-weight: 600;
}

/* "Go to the highlighted control". */
.fo-guide-bubble__more { margin: 6px 0 0 -8px; }
.fo-guide-bubble__more .fo-guide-btn { color: var(--fo-guide-line); text-align: start; }

/* The control of the step is not on the screen. */
.fo-guide-bubble.is-lost {
  border-style: dashed;
  border-color: var(--fo-guide-line);
}
.fo-guide-bubble.is-lost::before {
  border-style: dashed;
  border-color: var(--fo-guide-line);
}
/* Its three buttons take the row of the dots. */
.fo-guide-bubble.is-lost .fo-guide-steps { display: none; }
.fo-guide-bubble.is-lost .fo-guide-bubble__foot { justify-content: flex-end; }
/* A calculation card is one step: no dots, and nothing to go back to. */
.fo-guide-bubble.is-calc .fo-guide-steps { display: none; }
.fo-guide-bubble.is-calc .fo-guide-bubble__foot { justify-content: flex-end; }

/* The card at the end of a chapter uses the invitation card. */
.fo-guide-card[data-mode="chapter"] .fo-guide-card__head { margin-bottom: 4px; }
.fo-guide-card[data-mode="chapter"] .fo-guide-card__foot { margin-top: 12px; }

/* The badge on the Guide button: a step waits behind a full-screen card. */
.fo-guide-launch .fo-guide-badge {
  border-color: var(--fo-topbar);
  background: var(--fo-text-on-brand);
}

/* The hub opens at the side of the dock. */
.fo-guide-hub[data-side="left"] {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--fo-card-border);
  box-shadow: 14px 0 40px var(--fo-guide-shadow);
}

/* Hub: the page's own name, the question before "Start again". */
.fo-guide-note p { white-space: pre-line; }
.fo-guide-note__title { font-weight: 700; }
.fo-guide-hub__ask {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--fo-border);
}
.fo-guide-hub__ask p { flex: 1 0 100%; margin: 0 0 4px; font-weight: 600; }

/* The plate while it is dragged to the other corner. */
.fo-guide-dock.is-dragging .fo-guide-dock__plate { cursor: grabbing; }

/* The dock takes the corner of the help pill (custom.css draws the pill as
   body::before); the help switch stays on the top bar. */
body.fo-guide-on[data-app-state="authenticated"].help-mode-active::before,
body.fo-guide-on[data-app-state="authenticated"]:not(.help-mode-active)::before {
  display: none;
}

@media (max-width: 575.98px) {
  /* The sheet moves to the upper edge when the control is under it. */
  .fo-guide-bubble[data-sheet="top"] {
    top: 0;
    bottom: auto;
    padding-bottom: 12px;
    border-radius: 0 0 var(--fo-guide-radius) var(--fo-guide-radius);
  }
  .fo-guide-bubble[data-fg="think"] { padding: 10px 14px; }
}

.fo-guide-still .fo-guide-switch__track,
.fo-guide-still .fo-guide-switch__track::after { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .fo-guide-switch__track,
  .fo-guide-switch__track::after { transition: none; }
}

@media (forced-colors: active) {
  .fo-guide-bubble__note,
  .fo-guide-note { border: 1px solid CanvasText; }
  .fo-guide-launch .fo-guide-badge { background: CanvasText; }
}

/* Korean is broken between words, never inside one; the guide sets its
   own lang attribute on its root and on the form strip. */
#fo-guide-root:lang(ko),
.fo-guide-inform:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}