/* Day91 — Clay-style tool stage.
   A colour-coded rail of six tools on the left, a live preview panel on the
   right. Auto-advances until the reader touches it, then follows the reader. */

.toolstage {
  --tone: var(--c-green);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  margin-top: 1.1rem;
  align-items: start;
}

/* ---------- tab rail: a compact board of eight, not a tall list ---------- */

.ts-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
@media (max-width: 63.99rem) { .ts-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 33.99rem) { .ts-rail { grid-template-columns: 1fr; } }


.ts-tab {
  --tone: var(--c-green);
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .8rem .9rem;
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  background: var(--paper-3);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.ts-tab::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in oklab, var(--tone) 20%, transparent), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.ts-tab > * { position: relative; }
.ts-tab:hover { transform: translateX(3px); border-color: color-mix(in oklab, var(--tone) 45%, var(--rule)); }
.ts-tab[aria-selected="true"] {
  border-color: color-mix(in oklab, var(--tone) 60%, var(--rule));
  box-shadow: 0 18px 40px -26px color-mix(in oklab, var(--tone) 85%, transparent);
}
.ts-tab[aria-selected="true"]::before { opacity: 1; }

.ts-dot {
  width: 2rem; height: 2rem; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--tone) 16%, #fff);
  color: color-mix(in oklab, var(--tone) 80%, #000);
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.ts-tab[aria-selected="true"] .ts-dot {
  background: var(--tone); color: #fff; transform: rotate(-8deg) scale(1.06);
}
.ts-name { font-weight: 620; letter-spacing: -.01em; }
.ts-sub { display: block; font-size: .78rem; color: var(--faint); margin-top: .1rem; }
.ts-arrow { color: var(--tone); opacity: 0; transform: translateX(-4px); transition: .28s ease; }
.ts-tab[aria-selected="true"] .ts-arrow, .ts-tab:hover .ts-arrow { opacity: 1; transform: translateX(0); }

/* progress hairline on the active tab */
.ts-tab .ts-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--tone); transform: scaleX(0); transform-origin: left;
}
.ts-tab[aria-selected="true"] .ts-bar { animation: ts-fill 6s linear forwards; }
.toolstage[data-held="1"] .ts-tab .ts-bar { animation: none !important; transform: scaleX(1); }
@keyframes ts-fill { to { transform: scaleX(1); } }

/* ---------- right panel ---------- */

.ts-panel {
  position: relative;
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 100% 0%, color-mix(in oklab, var(--tone) 16%, transparent), transparent 62%),
    var(--paper-3);
  min-height: 22rem;
  transition: background .5s ease;
}
.ts-panel-top {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--rule-soft);
  background: color-mix(in oklab, var(--tone) 8%, #fff);
}
.ts-pip { width: .55rem; height: .55rem; border-radius: 50%; background: color-mix(in oklab, var(--tone) 45%, #fff); }
.ts-pip:nth-child(2) { background: color-mix(in oklab, var(--tone) 70%, #fff); }
.ts-pip:nth-child(3) { background: var(--tone); }
.ts-path { font-family: var(--mono); font-size: .7rem; color: var(--faint); margin-left: .4rem; }

.ts-body { padding: 1.1rem 1.1rem 1.3rem; }
.ts-body h3 { margin: 0 0 .3rem; letter-spacing: -.02em; }
.ts-body .ts-lede { margin: 0 0 .9rem; color: var(--muted, #55585f); max-width: 34rem; }

.ts-fade { animation: ts-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ts-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* rows inside the preview */
.ts-rows { display: grid; gap: .4rem; }
.ts-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem;
  padding: .55rem .7rem;
  border: 1px solid var(--rule-soft); border-radius: 10px;
  background: #fff;
  font-size: .86rem;
  animation: ts-row-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.ts-row:nth-child(1) { animation-delay: .05s } .ts-row:nth-child(2) { animation-delay: .12s }
.ts-row:nth-child(3) { animation-delay: .19s } .ts-row:nth-child(4) { animation-delay: .26s }
@keyframes ts-row-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.ts-row .lbl { color: var(--ink); }
.ts-row .src { font-family: var(--mono); font-size: .68rem; color: var(--faint); }

.ts-flag {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 999px;
  background: color-mix(in oklab, var(--tone) 16%, #fff);
  color: color-mix(in oklab, var(--tone) 82%, #000);
  white-space: nowrap;
}
.ts-flag.warn { background: color-mix(in oklab, var(--c-amber) 20%, #fff); color: #7A4B00; }
.ts-flag.bad  { background: color-mix(in oklab, var(--c-coral) 20%, #fff); color: #8A2A10; }

/* meter bars */
.ts-meters { display: grid; gap: .55rem; }
.ts-meter { display: grid; grid-template-columns: 7.5rem 1fr 2.6rem; gap: .6rem; align-items: center; font-size: .82rem; }
.ts-track { height: .5rem; border-radius: 999px; background: color-mix(in oklab, var(--tone) 12%, #eee); overflow: hidden; }
.ts-fillbar { height: 100%; border-radius: 999px; background: var(--tone); transform-origin: left; animation: ts-grow .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ts-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ts-meter .val { font-family: var(--mono); font-size: .74rem; color: color-mix(in oklab, var(--tone) 80%, #000); text-align: right; }

/* diff view */
.ts-diff { display: grid; gap: .35rem; font-family: var(--mono); font-size: .76rem; }
.ts-diff div { padding: .4rem .6rem; border-radius: 8px; animation: ts-row-in .45s cubic-bezier(.2,.8,.2,1) both; }
.ts-diff .rm { background: color-mix(in oklab, var(--c-coral) 13%, #fff); color: #8A2A10; text-decoration: line-through; }
.ts-diff .ad { background: color-mix(in oklab, var(--c-green) 13%, #fff); color: #0B5E35; }

/* quote pair */
.ts-quotes { display: grid; gap: .6rem; }
.ts-q {
  border-left: 3px solid var(--tone); padding: .5rem .7rem; border-radius: 0 10px 10px 0;
  background: color-mix(in oklab, var(--tone) 7%, #fff); font-size: .86rem;
  animation: ts-row-in .5s cubic-bezier(.2,.8,.2,1) both;
}
.ts-q:nth-child(2) { border-left-color: var(--c-coral); background: color-mix(in oklab, var(--c-coral) 8%, #fff); animation-delay: .14s; }
.ts-q .who { display: block; font-family: var(--mono); font-size: .66rem; color: var(--faint); margin-bottom: .2rem; }

/* calendar strip */
.ts-week { display: grid; grid-template-columns: repeat(8, 1fr); gap: .35rem; }
.ts-cell {
  aspect-ratio: 1; border-radius: 8px;
  background: color-mix(in oklab, var(--tone) 10%, #f3f3ef);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .62rem; color: var(--faint);
  animation: ts-pop .45s cubic-bezier(.2,.9,.2,1) both;
}
.ts-cell.hit { background: var(--tone); color: #fff; }
@keyframes ts-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.ts-foot { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
.ts-open {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .95rem; border-radius: 999px;
  background: var(--tone); color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem;
  box-shadow: 0 14px 30px -18px color-mix(in oklab, var(--tone) 90%, transparent);
  transition: transform .25s ease, filter .25s ease;
}
.ts-open:hover { transform: translateY(-2px); filter: brightness(1.06); color: #fff; }
.ts-note { font-family: var(--mono); font-size: .7rem; color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  .ts-fade, .ts-row, .ts-cell, .ts-fillbar, .ts-q, .ts-diff div { animation: none !important; }
  .ts-tab[aria-selected="true"] .ts-bar { animation: none; transform: scaleX(1); }
}

/* compact board tabs (four-up) */
.ts-rail .ts-tab { grid-template-columns: 1.7rem 1fr; padding: .7rem .75rem; align-items: start; }
.ts-rail .ts-dot { width: 1.7rem; height: 1.7rem; border-radius: 9px; font-size: .62rem; }
.ts-rail .ts-name { font-size: .95rem; }
.ts-rail .ts-sub { font-size: .72rem; line-height: 1.3; }
.ts-rail .ts-arrow { display: none; }
.ts-wrap { margin-top: 1.4rem; }