/* The four-step guide sheet (js/core/teach.js). Tokens from css/site.css. */

html.guide-lock { overflow: hidden; }
html.guide-lock body { padding-right: var(--guide-sbw, 0px); }

.guide {
  /* Phone: bottom sheet. */
  position: fixed; inset: auto 0 0 0; margin: 0;
  width: 100%; max-width: 100%; max-height: 92dvh;
  padding: 0; border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface-1); color: var(--text);
  overflow-y: auto; overscroll-behavior: contain;
  transition: transform 280ms var(--ease), opacity 280ms var(--ease),
              overlay 280ms allow-discrete, display 280ms allow-discrete;
}
.guide::backdrop { background: rgb(0 0 0 / .6); transition: opacity 280ms var(--ease); }
.guide[open] { transform: none; }
@starting-style {
  .guide[open] { transform: translateY(100%); }
  .guide[open]::backdrop { opacity: 0; }
}

@media (min-width: 740px) {
  .guide {
    inset: 0; margin: auto; width: min(100% - 48px, 720px); max-height: 88dvh;
    border-radius: var(--radius-lg);
  }
  @starting-style {
    .guide[open] { transform: translateY(32px); opacity: 0; }
  }
}

/* header — stays reachable while the story scrolls */
.guide-head {
  position: sticky; top: 0; z-index: 1; background: var(--surface-1);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px var(--gutter) 12px;
}
.guide-title { font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.guide-tagline { margin: 4px 0 0; color: var(--text-2); font-size: 1rem; line-height: 1.4; }
.guide-close {
  flex: none; width: 36px; height: 36px; margin: -2px -4px 0 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); cursor: pointer;
}
.guide-close:hover { color: var(--text); }
.guide-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.guide-close:focus-visible { border-radius: 50%; }

/* teaching area */
.guide-teach { padding: 4px var(--gutter) 28px; }
.guide-stage { background: var(--bg); border-radius: var(--radius-md); padding: 20px 16px 16px; }
.guide-clock { width: 100%; height: clamp(200px, 36dvh, 340px); }
.guide-calc {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px;
  margin: 14px 0 0; min-height: 1.6em; text-align: center;
}
.guide-calc[hidden] { display: flex; visibility: hidden; } /* keep height: no jump between steps */
.guide-calc-label { font: 400 .8125rem/1.5 var(--font-mono); letter-spacing: .02em; color: var(--text-3); }
.guide-calc-value { font: 500 1.0625rem/1.4 var(--font-mono); letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }

.guide-step { padding-top: 20px; min-height: 8.5em; transition: opacity 90ms linear; }
.guide-step.is-fading { opacity: 0; }
.guide-stepno { margin: 0 0 6px; font: 400 .8125rem/1.5 var(--font-mono); letter-spacing: .02em; color: var(--text-3); }
.guide-steptext { margin: 0; font-size: 1.1875rem; line-height: 1.45; max-width: var(--measure); text-wrap: pretty; }

.guide-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.guide-back {
  min-height: 44px; min-width: 64px; padding: 0 4px; border: 0; background: none;
  color: var(--link); font-weight: 500; font-size: 1.0625rem; cursor: pointer; text-align: left;
}
.guide-back:hover { text-decoration: underline; text-underline-offset: .18em; }
.guide-back:disabled { visibility: hidden; }
.guide-next {
  min-height: 44px; min-width: 96px; padding: 0 22px; border: 0; border-radius: var(--radius-pill);
  background: var(--action); color: #fff; font-weight: 600; font-size: 1.0625rem; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.guide-next:hover { background: var(--action-hover, var(--action)); }
.guide-next:focus-visible { border-radius: var(--radius-pill); }

.guide-dots { display: flex; gap: 0; }
.guide-dot {
  width: 40px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none;
  font: 500 .75rem/1 var(--font-mono); color: var(--text-2); cursor: pointer; position: relative;
}
.guide-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; background: var(--surface-2); z-index: -1; transition: background-color 200ms var(--ease);
}
.guide-dot { z-index: 0; }
.guide-dot:hover { color: var(--text); }
.guide-dot[aria-current] { color: var(--bg); font-weight: 700; }
.guide-dot[aria-current]::before { background: var(--text); }
.guide-dot:focus-visible { border-radius: 50%; outline-offset: 0; }

/* the story */
.guide-story { padding: 12px var(--gutter) 40px; }
.guide-story-title { font-weight: 600; font-size: 1.25rem; line-height: 1.2; margin: 0 0 10px; }
.guide-origin { margin: 0; color: var(--text-2); max-width: var(--measure); text-wrap: pretty; }
.guide-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 14px 20px;
  margin: 24px 0 0;
}
.guide-facts dt { font: 400 .8125rem/1.5 var(--font-mono); letter-spacing: .02em; color: var(--text-3); }
.guide-facts dd { margin: 2px 0 0; font-size: 1rem; line-height: 1.35; }
.guide-fun { margin-top: 24px; background: var(--surface-2); border-radius: var(--radius-md); padding: 16px 18px; }
.guide-fun-label { margin: 0 0 4px; font: 400 .8125rem/1.5 var(--font-mono); letter-spacing: .02em; color: var(--text-2); }
.guide-fun-text { margin: 0; font-size: 1rem; line-height: 1.5; }

@media (min-width: 740px) {
  .guide-head { padding: 28px 32px 12px; }
  .guide-teach { padding: 4px 32px 32px; }
  .guide-story { padding: 16px 32px 44px; }
  .guide-clock { height: clamp(240px, 38dvh, 360px); }
  .guide-step { min-height: 6.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .guide, .guide::backdrop, .guide-step, .guide-dot::before, .guide-next { transition: none; }
  @starting-style {
    .guide[open] { transform: none; opacity: 1; }
    .guide[open]::backdrop { opacity: 1; }
  }
}

/* Machine Voice rule (DESIGN.md): mono only for computed values. */
.guide-calc-label, .guide-stepno, .guide-facts dt, .guide-fun-label {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

/* The numbered pager already says which step this is; keep the label for
   screen readers only. */
.guide-stepno {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}