/* ExamStudyAid — the Thought Line: what the AI is doing while it works
   (owner, 2026-10-08: "https://reactbits.dev/micro/thought-line i want you
   to use this for thinking").

   A port to plain CSS of React Bits' Thought Line (pages/js/thought-line.js
   builds the markup). A glyph and a label breathe beside a live clock while
   the steps appear under them, the newest with a pulsing dot and the ones
   before it ticked; when the work is done the label crossfades through a
   blur into "Thought for 4.2s", the clock settles beside it and the steps
   fold away under a chevron that opens them again. Colours are the
   notebook's tokens; a host page dresses the glyph its own way (the
   dashboard tutor's blue tile, dashboard-shelf.css §18). With reduced motion
   nothing breathes, shimmers, blurs or slides; the clock still counts.

   Ported from React Bits "Thought Line" (https://reactbits.dev/micro/thought-line).
   MIT + Commons Clause License Condition v1.0. Copyright (c) 2026 David Haz.
   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the
   "Software"), to deal in the Software without restriction, including
   without limitation the rights to use, copy, modify, merge, publish, and
   distribute the Software as part of an application, website, or product,
   subject to the following conditions: The above copyright notice and this
   permission notice shall be included in all copies or substantial portions
   of the Software. Commons Clause Restriction: You may use this Software,
   including for any commercial purpose, so long as you do not sell,
   sublicense, or redistribute the components themselves-whether alone, in a
   bundle, or as a ported version. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT
   WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
   WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
   NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
   LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
   CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
   SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */

.esa-tl {
  --esa-tl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --esa-tl-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --esa-tl-ink: var(--nb-m-ink);
  --esa-tl-soft: var(--nb-soft);
  --esa-tl-glyph-ink: var(--nb-m-blue);
  --esa-tl-settle: 350ms;
  --esa-tl-indent: 1.6em;
  --esa-tl-i-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 3c.7 4.6 3.4 7.3 8 8-4.6.7-7.3 3.4-8 8-.7-4.6-3.4-7.3-8-8 4.6-.7 7.3-3.4 8-8z' fill='black'/%3E%3Cpath d='M16 1c.25 1.7 1.3 2.75 3 3-1.7.25-2.75 1.3-3 3-.25-1.7-1.3-2.75-3-3 1.7-.25 2.75-1.3 3-3z' fill='black'/%3E%3C/svg%3E");
  --esa-tl-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --esa-tl-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--esa-tl-ink);
  font-size: var(--nb-text-sm);
  font-weight: 500;
  line-height: 1.2;
}

/* the line itself: glyph, label, clock, chevron */
.esa-tl-head {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.esa-tl-head[data-toggle] { cursor: pointer; }
.esa-tl-head:focus-visible { outline: 2px solid var(--nb-m-blue); outline-offset: 3px; border-radius: var(--nb-r-sm); }

.esa-tl-glyph {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.2em;
  background: var(--esa-tl-glyph-ink);
  -webkit-mask: var(--esa-tl-i-spark) center / contain no-repeat;
  mask: var(--esa-tl-i-spark) center / contain no-repeat;
  transition: opacity var(--esa-tl-settle) var(--esa-tl-ease-out);
}
.esa-tl[data-working] .esa-tl-glyph { animation: esa-tl-breath 1.6s var(--esa-tl-ease-in-out) infinite; }
.esa-tl:not([data-working]) .esa-tl-glyph { opacity: 0.55; }
@keyframes esa-tl-breath { 50% { opacity: 0.55; } }

/* the two labels share one cell and crossfade through a blur */
.esa-tl-label { display: inline-grid; }
.esa-tl-text {
  grid-area: 1 / 1;
  width: max-content;
  opacity: 0;
  filter: blur(2px);
  transition: opacity var(--esa-tl-settle) var(--esa-tl-ease-out), filter var(--esa-tl-settle) var(--esa-tl-ease-out);
}
.esa-tl-text[data-active] { opacity: 1; filter: blur(0); }
.esa-tl-text--done[data-active] { opacity: 0.75; }
.esa-tl-breath { display: inline-block; }
.esa-tl[data-working] .esa-tl-breath {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--esa-tl-ink) 45%, transparent) 30%,
    var(--esa-tl-ink) 50%,
    color-mix(in srgb, var(--esa-tl-ink) 45%, transparent) 70%) 125% 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: esa-tl-shimmer 1.8s linear infinite;
}
@keyframes esa-tl-shimmer { to { background-position: -125% 0; } }

/* the clock and the chevron glide together to the end of whichever label shows */
.esa-tl-tail {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  transition: transform var(--esa-tl-settle) var(--esa-tl-ease-in-out);
}
.esa-tl-timer { font-variant-numeric: tabular-nums; opacity: 0.55; transition: opacity var(--esa-tl-settle) ease; }
.esa-tl:not([data-working]) .esa-tl-timer { opacity: 0.75; }
.esa-tl-chev {
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  opacity: 0;
  -webkit-mask: var(--esa-tl-i-chev) center / contain no-repeat;
  mask: var(--esa-tl-i-chev) center / contain no-repeat;
  transition: opacity 200ms ease, transform 200ms var(--esa-tl-ease-out);
}
.esa-tl[data-trace] .esa-tl-chev { opacity: 0.55; }
.esa-tl[data-open] .esa-tl-chev { transform: rotate(180deg); }
@media (hover: hover) {
  .esa-tl-head[data-toggle]:hover .esa-tl-chev { opacity: 1; }
}

/* the steps, folding open and shut */
.esa-tl-trace {
  display: grid;
  grid-template-rows: 0fr;
  width: 0;
  min-width: 100%;
  transition: grid-template-rows var(--esa-tl-settle) var(--esa-tl-ease-out);
}
.esa-tl[data-open] .esa-tl-trace { grid-template-rows: 1fr; }
.esa-tl-fold { min-height: 0; overflow: hidden; }
.esa-tl-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.7em 0 0.2em var(--esa-tl-indent);
  font-size: 0.94em;
  font-weight: 400;
}
.esa-tl-step {
  display: flex;
  align-items: center;
  gap: 0.55em;
  animation: esa-tl-step-in 220ms var(--esa-tl-ease-out);
}
@keyframes esa-tl-step-in { from { opacity: 0; transform: translateY(-4px); } }
.esa-tl-mark { display: inline-grid; flex: none; place-items: center; width: 1em; height: 1em; }
.esa-tl-pulse {
  display: block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: currentColor;
  animation: esa-tl-pulse 1.6s var(--esa-tl-ease-in-out) infinite;
}
@keyframes esa-tl-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.esa-tl-tick {
  display: block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--esa-tl-i-tick) center / contain no-repeat;
  mask: var(--esa-tl-i-tick) center / contain no-repeat;
}
.esa-tl-step[data-done] { color: var(--esa-tl-soft); }
.esa-tl-step-text { transition: color var(--esa-tl-settle) ease; }

@media (prefers-reduced-motion: reduce) {
  .esa-tl .esa-tl-glyph,
  .esa-tl .esa-tl-breath,
  .esa-tl .esa-tl-step,
  .esa-tl .esa-tl-pulse { animation: none !important; }
  .esa-tl[data-working] .esa-tl-breath { background: none; color: var(--esa-tl-ink); -webkit-text-fill-color: currentColor; }
  .esa-tl .esa-tl-text { filter: none !important; transition: opacity var(--esa-tl-settle) ease; }
  .esa-tl .esa-tl-tail,
  .esa-tl .esa-tl-trace { transition: none !important; }
}