/* ==========================================================================
   Tino's dot: the vehicle, on the site.
   Spec: foundation/VEHICLE.md. Behaviour: js/tino.js. Needs tokens.css.

   Grammar (nothing else of Tino's is pink):
     Dot   = Tino, now. One per viewport.
     Line  = Tino's work, 2px, until you keep it.
     Ring  = the empty i: Tino is out working.
   The label beside the dot is neutral. Pink never fills a pill or a card.
   ========================================================================== */

:root {
  --tino-head:   12px;    /* dot as a tool head (playhead, caret, row)          */
  --tino-ui:     8px;     /* dot at rest in UI (Ask field)                      */
  --tino-line-w: 2px;     /* every change line, ruler range, progress, ask rule */
  --tino-tool-w: 1.5px;   /* Tino's playhead under the dot                      */
  --tino-knock:  2px;     /* knockout ring in the ground colour                 */
  --tino-label-h: 22px;
  --tino-travel: cubic-bezier(0.32, 0.72, 0, 1);
  --tino-home:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --tino-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --tino-draw:   240ms;
  --tino-fade:   160ms;
  --tino-ground: var(--surface);
}

/* ---------------------------------------------------------------- Wordmark
   <span class="tino-wordmark" data-tino-wordmark data-tino-home></span>
   tino.js draws the real wordmark (path + constructed i-dot) inside.
   Size it with height or font-size; the svg is 1em tall by default.      */
.tino-wordmark { display: inline-block; line-height: 0; color: var(--ink); height: 1em; }
.tino-wordmark svg { display: block; height: 100%; width: auto; overflow: visible; }
.tino-wordmark path { fill: currentColor; }
.studio .tino-wordmark, .tino-wordmark.on-dark { color: var(--studio-text); }
.tino-i {
  fill: var(--pink);
  stroke: transparent;
  stroke-width: var(--tino-ring-w, 1.5px);
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill var(--tino-fade) var(--ease), stroke var(--tino-fade) var(--ease);
}
/* Away: the i keeps a hairline ring in its own ink. Not pink: the pink is out working. */
.is-tino-away .tino-i { fill: transparent; stroke: currentColor; stroke-opacity: 0.28; }
/* Small marks (under 28px, nav and footer): a deliberate open circle, not a hairline. */
.is-tino-away.is-tino-small .tino-i { stroke-width: 1.25px; stroke-opacity: 0.45; }
.is-tino-landing .tino-i { animation: tino-settle 180ms var(--tino-out); }
.is-tino-thinking .tino-i { animation: tino-think 1600ms ease-in-out infinite alternate; }
@keyframes tino-settle { 0% { transform: scale(1); } 45% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes tino-think  { from { opacity: 1; } to { opacity: 0.4; } }

/* ----------------------------------------------------------------- Vehicle
   One element, made by tino.js. A 0x0 box sitting exactly on the dot's centre;
   the dot, the tool and the label hang off it.                             */
.tino-vehicle {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  z-index: 3;
  pointer-events: none;
  font-style: normal; text-align: left;
  --d: var(--tino-head);
  --tino-ground: var(--surface);
  transform: translate(var(--yx, 0px), var(--yy, 0px));
  transition: transform 180ms var(--tino-out), opacity 200ms var(--ease);
}
.tino-vehicle.is-travelling { position: fixed; left: 0; top: 0; z-index: 40; transition: none; }
.tino-vehicle.on-dark { --tino-ground: var(--studio-ground); }
.tino-vehicle[hidden] { display: none; }

.tino-vehicle-dot {
  position: absolute;
  left: calc(var(--d) / -2); top: calc(var(--d) / -2);
  width: var(--d); height: var(--d);
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 var(--tino-knock) var(--tino-ground);
  transform: scale(var(--lift, 1));
}
.tino-vehicle.is-travelling .tino-vehicle-dot { box-shadow: none; }

/* The tool under the dot: Tino's playhead (1.5px) or caret (2px). */
.tino-vehicle-tool {
  position: absolute; top: 0;
  left: calc(var(--tino-tool-w) / -2);
  width: var(--tino-tool-w);
  height: var(--tool-h, 0px);
  background: var(--pink);
  border-radius: 1px;
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--tino-draw) var(--tino-out);
}
.tino-vehicle[data-tool="caret"] .tino-vehicle-tool { --tino-tool-w: 2px; }
.tino-vehicle.has-tool .tino-vehicle-tool { transform: scaleY(1); }
.tino-vehicle.is-travelling .tino-vehicle-tool { display: none; }
.tino-vehicle.is-yielding .tino-vehicle-tool { opacity: 0.5; }

/* The label: neutral, beside the dot. "Tino setting the title". */
.tino-vehicle-label,
.tino-label {
  display: inline-flex; align-items: center; gap: 0.32em;
  height: var(--tino-label-h); padding: 0 9px;
  border-radius: var(--r-pill);
  font-family: var(--font); font-size: 12px; line-height: 1; letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
}
.tino-vehicle-label b, .tino-label b { font-weight: var(--w-semibold); color: var(--ink); }
.on-dark .tino-vehicle-label, .on-dark.tino-label, .studio .tino-label {
  color: var(--studio-text-2);
  background: var(--studio-raised);
  box-shadow: 0 0 0 1px var(--studio-line-2), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.on-dark .tino-vehicle-label b, .on-dark.tino-label b, .studio .tino-label b { color: var(--studio-text); }
.tino-vehicle-label {
  position: absolute;
  top: calc(var(--tino-label-h) / -2);
  left: calc(var(--d) / 2 + 8px);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--tino-fade) var(--ease), transform var(--tino-fade) var(--tino-out);
}
.tino-vehicle[data-side="left"] .tino-vehicle-label { left: auto; right: calc(var(--d) / 2 + 8px); transform: translateX(4px); }
/* With a tool, the label rides at the head, beside the dot. */
.tino-vehicle.is-labelled .tino-vehicle-label { opacity: 1; transform: none; }
.tino-vehicle.is-travelling .tino-vehicle-label { opacity: 0; transition-duration: 90ms; }

/* Listening: the dot follows the voice level (0..1) between 1.0 and 1.6. */
.tino-vehicle.is-listening .tino-vehicle-dot {
  transform: scale(calc(1 + var(--tino-level, 0) * 0.6));
  transition: transform 60ms linear;
}

/* -------------------------------------------------------------------- Line
   Tino's changes. Put data-tino-line on the thing Tino changes; tino.js adds
   .is-tino-changed when the edit lands. The line stays until Keep.
     top    clips and bars (default)     start  list rows, layer rows
     under  text and canvas objects      bottom slides, thumbnails          */
[data-tino-line]::after {
  content: ""; position: absolute; pointer-events: none;
  left: 6px; right: 6px; top: 0; height: var(--tino-line-w);
  border-radius: 0 0 1px 1px;
  background: var(--pink);
  transform: scaleX(0); transform-origin: left center;
  opacity: 1;
  transition: transform var(--tino-draw) var(--tino-out), opacity var(--tino-draw) var(--ease);
}
[data-tino-line="start"]::after { left: 0; right: auto; top: 8px; bottom: 8px; width: var(--tino-line-w); height: auto; border-radius: 0 1px 1px 0; transform: scaleY(0); transform-origin: center top; }
[data-tino-line="under"]::after { left: 0; right: 0; top: auto; bottom: -6px; border-radius: 1px; }
[data-tino-line="bottom"]::after { top: auto; bottom: 0; border-radius: 1px 1px 0 0; }
.is-tino-changed[data-tino-line]::after { transform: none; }
.is-tino-queued[data-tino-line]::after { transform: none; opacity: 0.35; }
.is-tino-kept[data-tino-line]::after { transform: none; opacity: 0; }

/* A ruler range, a slide-rail span, a bar span: the element IS the line.
   <span class="tino-range" style="left: 61%; width: 12%"></span>           */
.tino-range {
  position: absolute; bottom: 0; height: var(--tino-line-w);
  border-radius: 1px; background: var(--pink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--tino-draw) var(--tino-out), opacity var(--tino-draw) var(--ease);
}
.tino-range.is-tino-changed, .tino-range.is-tino-now { transform: none; }
.tino-range.is-tino-kept { transform: none; opacity: 0; }

/* A thin tick beside a value Tino is changing (inspector In/Out). */
.tino-tick { position: relative; }
.tino-tick::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--tino-line-w);
  border-radius: 0 1px 1px 0; background: var(--pink);
}

/* ---------------------------------------------------------------- Progress
   One line in the Tino panel header, split per job. "2 of 3", one Stop.
   <div class="tino-progress" data-tino-progress><i></i><i></i><i></i></div> */
.tino-progress { display: flex; gap: 3px; height: var(--tino-line-w); }
.tino-progress > i {
  position: relative; flex: 1; min-width: 6px; border-radius: 1px; overflow: hidden;
  background: var(--pink); opacity: 0.35;
}
.tino-progress > i::after { content: none; }
.tino-progress > i.is-done { opacity: 1; }
.tino-progress > i.is-now { opacity: 1; background: var(--line); }
.studio .tino-progress > i.is-now, .on-dark .tino-progress > i.is-now, .tino-progress.on-dark > i.is-now { background: var(--studio-line-2); }
.tino-progress > i.is-now::after {
  content: ""; position: absolute; inset: 0; background: var(--pink);
  transform: scaleX(0); transform-origin: left center;
  animation: tino-fill var(--tino-fill, 1200ms) linear forwards;
}
@keyframes tino-fill { to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ Asking
   A still 2px rule beside the question. Answers are neutral buttons.       */
.tino-ask {
  position: relative;
  padding: 12px 14px 12px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  font-size: var(--t-14); line-height: var(--lh-14); color: var(--ink);
}
.tino-ask::before {
  content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: var(--tino-line-w);
  border-radius: 1px; background: var(--pink);
}
.tino-ask-actions { display: flex; gap: 8px; margin-top: 10px; }
.tino-ask-actions button, .tino-toast button {
  height: 26px; padding: 0 12px; border-radius: var(--r-pill); border: 0;
  font-size: 12px; font-weight: var(--w-medium);
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--d-1) var(--ease);
}
.tino-ask-actions button:first-child { background: var(--ink); color: var(--white); box-shadow: none; }
.studio .tino-ask, .tino-ask.on-dark { background: var(--studio-raised); color: var(--studio-text); box-shadow: 0 0 0 1px var(--studio-line-2), 0 10px 30px rgba(0,0,0,0.4); }
.studio .tino-ask-actions button, .tino-ask.on-dark .tino-ask-actions button { color: var(--studio-text); box-shadow: inset 0 0 0 1px var(--studio-line-2); }
.studio .tino-ask-actions button:first-child, .tino-ask.on-dark .tino-ask-actions button:first-child { background: var(--studio-text); color: var(--studio-ground); box-shadow: none; }

/* ------------------------------------------------------------------- Done
   "Tino changed 3 layers   Keep   Undo". Neutral. The lines carry the pink. */
.tino-toast {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 4px 4px 4px 14px;
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
  font-size: 13px; white-space: nowrap;
}
.tino-toast > span { margin-right: 4px; }
/* Keep and Undo are real buttons: 32px tall, 8px apart, a 44px hit area. */
.tino-toast { gap: 8px; }
.tino-toast button { position: relative; min-height: 32px; height: auto; padding: 0 12px; font-size: 12px; box-shadow: none; }
.tino-toast button::after { content: ""; position: absolute; inset: -6px -2px; }
.tino-toast button:hover { background: var(--surface-2); }
.studio .tino-toast, .tino-toast.on-dark { background: var(--studio-raised); color: var(--studio-text); box-shadow: 0 0 0 1px var(--studio-line-2), 0 10px 30px rgba(0,0,0,0.4); }
.studio .tino-toast button, .tino-toast.on-dark button { color: var(--studio-text); }
.studio .tino-toast button:hover, .tino-toast.on-dark button:hover { background: var(--studio-raised-2); }
.tino-ask-actions button:focus-visible, .tino-toast button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.studio .tino-ask-actions button:focus-visible, .studio .tino-toast button:focus-visible { box-shadow: var(--focus-ring-dark); }

/* Stops and anchors must be positioned; tino.js sets relative if static. */
[data-tino-stop] { pointer-events: none; }

/* ---------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tino-vehicle, .tino-vehicle-label, .tino-vehicle-tool, .tino-i,
  [data-tino-line]::after, .tino-range { transition-duration: 0ms !important; }
  .tino-vehicle { transition: opacity 200ms var(--ease) !important; }
  .is-tino-thinking .tino-i { animation: none; opacity: 0.6; }
  .is-tino-landing .tino-i { animation: none; }
  .tino-progress > i.is-now::after { animation: none; transform: scaleX(0.5); }
  .tino-vehicle.is-listening .tino-vehicle-dot { transform: none; box-shadow: 0 0 0 var(--tino-knock) var(--tino-ground), 0 0 0 calc(var(--tino-knock) + 1.25px) var(--pink); }
}
.is-shot .tino-vehicle, .is-shot .tino-vehicle-label, .is-shot .tino-vehicle-tool,
.is-shot [data-tino-line]::after, .is-shot .tino-range { transition: none !important; }