/* guide.css - the guide kit (guide.js) and the "Get started" card. Colours come from the app tokens (with fallbacks), so light and dark both work.
   Nothing here takes a click except the .tg-back pill: every guide item is pointer-events none. Every animation is finite (the ring pulses
   --tg-plays times, the arrow bobs 3 times, the ghost drags --tg-plays times) and uses transform and opacity only; after it the item is .is-still.
   prefers-reduced-motion: no animation at all, a static ring, arrow and label. */
.tg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.tg-item, .tg-item * { pointer-events: none; }
.tg-item[hidden] { display: none; }
.tg-item.is-fadein { animation: tg-fadein 200ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)) 150ms backwards; }
@keyframes tg-fadein { from { opacity: 0; } }

/* point: a still ring (it pulses by an overlay), an arrow and a label placed by guide.js on the side with no text */
.tg-ring { position: fixed; box-sizing: border-box; border: 2px solid var(--accent, #1f5eff); border-radius: var(--r-s, 8px); }
.tg-ring::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--accent, #1f5eff); border-radius: var(--r-s, 8px); opacity: 0; }
.tg-item.is-play .tg-ring::after { animation: tg-pulse 1200ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)) var(--tg-plays, 2); }
@keyframes tg-pulse { from { transform: scale(1); opacity: .5; } to { transform: scale(1.12); opacity: 0; } }
.tg-pin { position: fixed; left: 0; top: 0; width: 0; height: 0; }
.tg-pin .tg-arrowHold { position: fixed; left: 0; top: 0; display: block; width: 28px; height: 28px; line-height: 0; transform: rotate(var(--tg-rot, 0deg)); }
.tg-arrow { display: block; width: 28px; height: 28px; color: var(--accent, #1f5eff); filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--ink, #172033) 25%, transparent)); }
.tg-item.is-play .tg-arrow { animation: tg-bob 900ms ease-in-out 3; }
@keyframes tg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tg-label { display: inline-block; box-sizing: border-box; max-width: min(240px, calc(100vw - 32px)); background: var(--surface, var(--card, #fff)); color: var(--ink, #172033); border: 1px solid var(--accent, #1f5eff); border-radius: var(--r-s, 8px); padding: var(--s2, 8px) var(--s3, 12px); font-size: var(--fs-sm, 14px); font-weight: 600; line-height: 1.3; text-align: center; box-shadow: var(--e1, 0 4px 14px rgb(0 0 0 / .18)); }
.tg-label[hidden] { display: none; }
.tg-pin .tg-label { position: fixed; left: 0; top: 0; }

/* the "Back to the step" pill: the only guide part that takes clicks (guide.js puts it in the page body, outside the aria-hidden layer) */
.tg-back { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 61; box-sizing: border-box; min-height: 44px; padding: 0 var(--s4, 16px); border: 1px solid var(--accent, #1f5eff); border-radius: var(--r-pill, 999px); background: var(--surface, var(--card, #fff)); color: var(--ink, #172033); font: inherit; font-size: var(--fs-sm, 14px); font-weight: 600; cursor: pointer; box-shadow: var(--e1, 0 4px 14px rgb(0 0 0 / .18)); animation: tg-fadein 200ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)) backwards; }
.tg-back[hidden] { display: none; }
.tg-back:focus-visible { outline: 2px solid var(--accent, #1f5eff); outline-offset: 2px; }

/* drag: a ghost copy moves from the element to the top-left of the drop zone, twice, then is gone; the zone stays as a still outline */
.tg-zone { position: fixed; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: var(--s2, 8px); overflow: hidden; border: 2px dashed var(--accent, #1f5eff); border-radius: var(--r-s, 8px); background: color-mix(in srgb, var(--accent, #1f5eff) 14%, var(--surface, var(--card, #fff))); }
.tg-item.is-play .tg-zone { animation: tg-zone 1600ms ease-in-out var(--tg-plays, 2); }
@keyframes tg-zone { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }
.tg-zone .tg-arrowHold { position: static; display: block; width: 20px; height: 20px; }
.tg-zone .tg-arrow { width: 20px; height: 20px; }
.tg-zone .tg-label { position: static; border: 0; box-shadow: none; background: transparent; padding: 0; font-size: var(--fs-sm, 14px); }
.tg-ghost { position: fixed; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid var(--accent, #1f5eff); border-radius: var(--r-s, 8px); background: color-mix(in srgb, var(--accent, #1f5eff) 16%, var(--surface, var(--card, #fff))); color: var(--ink, #172033); font-weight: 600; }
.tg-item.tg-fadeOut { opacity: 0; transition: opacity 200ms var(--ease-std, ease); pointer-events: none; }
.tg-item:not(.is-play) .tg-ghost { display: none; }
.tg-item.is-play .tg-ghost { animation: tg-drag 2400ms var(--ease-std, cubic-bezier(.2, 0, 0, 1)) var(--tg-plays, 2) forwards; }
.tg-ghostText { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; padding: 0 6px; }
.tg-cursor { position: absolute; right: -6px; bottom: -14px; width: 20px; height: 20px; color: var(--ink, #172033); filter: drop-shadow(0 1px 1px var(--surface, var(--card, #fff))); }
@keyframes tg-drag {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10%, 20% { transform: translate(0, 0) scale(1.06); opacity: 1; }
  70%, 82% { transform: translate(var(--tg-dx, 0px), var(--tg-dy, 0px)) scale(.94); opacity: 1; }
  92%, 100% { transform: translate(var(--tg-dx, 0px), var(--tg-dy, 0px)) scale(.94); opacity: 0; }
}

/* keys: a still row of keycaps (no animation); inline in the steps list when the caller passes opts.host, else one floating pill above the footer */
.tg-keys { display: flex; align-items: center; gap: var(--s3, 12px); flex-wrap: wrap; box-sizing: border-box; background: var(--surface, var(--card, #fff)); border: 1px solid var(--accent, #1f5eff); border-radius: var(--r-m, 16px); padding: var(--s2, 8px) var(--s3, 12px); box-shadow: var(--e1, 0 4px 14px rgb(0 0 0 / .18)); width: max-content; max-width: calc(100vw - 16px); }
.tg-keys.is-float { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); }
.tg-keys.is-inline { position: relative; margin: var(--s2, 8px) 0; max-width: 100%; }
.tg-keys .tg-label { border: 0; box-shadow: none; background: transparent; padding: 0; text-align: start; }
.tg-keyrow { display: inline-flex; align-items: center; gap: var(--s2, 8px); }
.tg-plus { color: var(--muted, #5b6675); font-weight: 600; }
.tg-key { min-width: 2.3em; padding: var(--s1, 4px) var(--s2, 8px); border: 1px solid var(--line, #dfe4ec); border-bottom-width: 3px; border-radius: var(--r-s, 8px); background: var(--surface, var(--card, #fff)); color: var(--ink, #172033); font: 600 var(--fs-sm, 14px) system-ui, sans-serif; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .tg-item, .tg-item *, .tg-item *::after, .tg-back { animation: none !important; transition: none !important; }
  .tg-ring { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #1f5eff) 25%, transparent); }
  .tg-ghost { opacity: .85; }
}

/* the single "Get started" card on Today: readable steps (no row opacity), the open step grows softly, finished rows can fold away */
.startCard { background: var(--surface, var(--card, #fff)); border: 1px solid var(--line, #dfe4ec); border-radius: var(--r-m, 16px); padding: var(--s3, 12px) var(--s4, 16px); margin: var(--s4, 16px) 0; box-shadow: var(--e1, 0 1px 2px rgb(16 24 40 / .06)); }
.startCard h2 { margin-top: 0; }
.startSteps { list-style: none; margin: var(--s3, 12px) 0 0; padding: 0; display: grid; gap: var(--s2, 8px); }
.step { border: 1px solid var(--line, #dfe4ec); border-radius: var(--r-s, 8px); padding: var(--s3, 12px); }
.step.is-current { border-color: var(--accent, #1f5eff); background: var(--accent-soft, color-mix(in srgb, var(--accent, #1f5eff) 10%, var(--surface, #fff))); }
.stepHead { display: flex; align-items: center; gap: var(--s3, 12px); }
.stepMark { flex: none; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line, #dfe4ec); display: inline-flex; align-items: center; justify-content: center; font-weight: 400; font-size: var(--fs-sm, 14px); color: var(--muted, #566074); }
.step.is-todo .stepTitle { font-weight: 400; color: var(--muted, #566074); }
.step.is-current .stepMark { background: var(--accent, #1f5eff); border-color: var(--accent, #1f5eff); color: var(--on-accent, var(--accent-ink, #fff)); font-weight: 600; }
.step.is-done .stepMark { background: var(--ok, #157347); border-color: var(--ok, #157347); color: var(--on-ok, light-dark(#fff, #0b1020)); font-weight: 600; animation: tg-tick 180ms var(--ease-out, cubic-bezier(.05, .7, .1, 1)) 1; }
@keyframes tg-tick { from { transform: scale(.8); } to { transform: scale(1); } }
.stepTitle { font-weight: 600; }
.step.is-done .stepTitle { font-weight: 400; color: var(--muted, #566074); text-decoration: line-through; text-decoration-thickness: 1px; }
.stepNow { margin-inline-start: auto; font-size: var(--fs-xs, 12px); font-weight: 600; color: var(--accent, #1f5eff); }
/* the step body opens by grid rows (a calm height change); .stepBodyIn is the clipped inner wrapper; [hidden] still means display none */
.stepBody { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin: 0; margin-inline-start: 38px; transition: grid-template-rows var(--d-base, 200ms) var(--ease-std, cubic-bezier(.2, 0, 0, 1)), opacity var(--d-base, 200ms) var(--ease-std, cubic-bezier(.2, 0, 0, 1)), visibility 0s linear var(--d-base, 200ms); }
.stepBody[hidden] { display: none; }
.step.is-current .stepBody { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.stepBodyIn { overflow: hidden; min-height: 0; margin: 0 calc(-1 * var(--s1, 4px)); padding: 0 var(--s1, 4px); }
.stepBodyIn :focus-visible { outline-offset: -2px; }
.stepBodyIn > :first-child { margin-top: var(--s2, 8px); }
.stepBody p { margin: var(--s1, 4px) 0 var(--s2, 8px); }
.startDoneLine { display: inline-flex; align-items: center; gap: var(--s2, 8px); min-height: var(--tap, 44px); padding: 0 var(--s2, 8px); margin: 0 0 0 calc(-1 * var(--s2, 8px)); border: 0; border-radius: var(--r-s, 8px); background: transparent; color: var(--ink, #172033); font: inherit; font-size: var(--fs-sm, 14px); font-weight: 400; cursor: pointer; }
.startDoneLine::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--d-fast, 120ms) var(--ease-std, cubic-bezier(.2, 0, 0, 1)); }
.startDoneLine[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.startDoneLine:focus-visible { outline: 2px solid var(--accent, #1f5eff); outline-offset: 2px; }
.startSteps.is-collapsed .step.is-done { display: none; }
@media (prefers-reduced-motion: reduce) {
  .stepBody, .step.is-done .stepMark, .startDoneLine::after { animation: none !important; transition: none !important; }
}