/* kea: the /guides index and every guide page. Loaded after site.css, which holds the
   tokens, nav, buttons, the waitlist form, the step bubble and the footer.
   guide.js adds kea in the margin, the ring and the step pill. Without it (or with
   reduced motion) these are plain, readable pages. */

/* ---------- the reading column ---------- */

.guide, .guides { max-width: 680px; margin: 0 auto; padding-top: clamp(24px, 5vw, 56px); }
.guide { position: relative; }

.crumbs { font-size: 14px; color: var(--mute); }
.crumbs a { color: var(--mute); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }

.h-guide { margin-top: 14px; font-size: clamp(36px, 5.4vw, 52px); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.guide-date { margin-top: 14px; font-size: 15px; color: var(--mute); }

.guide h2 { margin-top: 56px; font-size: clamp(26px, 3.2vw, 32px); line-height: 1.15; letter-spacing: -0.03em; scroll-margin-top: 24px; }
.guide p, .guide li { font-size: 18px; line-height: 1.6; overflow-wrap: break-word; }
.guide p { margin-top: 18px; }
.guide h2 + p { margin-top: 14px; }
.guide a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guide a:hover { text-decoration-thickness: 2px; }
.guide strong { font-weight: 600; }
.guide ul, .guide ol { margin: 18px 0 0; padding-left: 1.25em; }
.guide li + li { margin-top: 12px; }
.guide li::marker { color: var(--soft); }

@media (max-width: 700px) {
  .guide p, .guide li { font-size: 17px; }
  .guide h2 { margin-top: 48px; }
}

/* a checklist to work through, drawn as empty boxes. not form inputs */
.guide .guide-checks { list-style: none; padding-left: 0; }
.guide-checks li { position: relative; padding-left: 36px; }
.guide-checks li::before {
  content: ""; position: absolute; left: 1px; top: .3em;
  width: 20px; height: 20px;
  border: 1.5px solid var(--edge); border-radius: 6px;
}

/* ---------- step lists (data-kea-steps) ---------- */

/* numbered badges, so guide.js can put kea's ring on the number */
.guide .guide-steps { list-style: none; padding-left: 0; counter-reset: step; }
.guide-steps > li { position: relative; padding-left: 48px; counter-increment: step; }
.guide-steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2); color: var(--ink);
  font: 600 15px/1 var(--font);
}
.guide-steps > li + li { margin-top: 18px; }

/* the week plan: a real table, stacked into cards on phones */
.guide-table { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.guide-table th, .guide-table td { padding: 14px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.guide-table th:first-child, .guide-table td:first-child { padding-left: 0; }
.guide-table th:last-child, .guide-table td:last-child { padding-right: 0; }
.guide-table thead th { padding-top: 0; border-top: 0; font-size: 13px; font-weight: 600; color: var(--mute); }
.guide-table tbody th { font-weight: 600; white-space: nowrap; }
.guide-table td:nth-child(2) { font-weight: 600; }
.guide-day { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-2); }

@media (max-width: 700px) {
  /* the roles in the HTML keep this a table for screen readers once it's display: block */
  .guide-table, .guide-table tbody, .guide-table tr, .guide-table th, .guide-table td { display: block; }
  .guide-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .guide-table tbody tr { padding: 18px 0; border-top: 1px solid var(--line); }
  .guide-table tbody th, .guide-table td { padding: 0; border: 0; white-space: normal; }
  .guide-table td { margin-top: 10px; font-size: 16px; }
  .guide-table td::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    font-size: 13px; font-weight: 600; color: var(--mute);
  }
}

/* kea's ring on the current step's number: the same ring as .mac-screen .is-ring */
.guide-steps > li::before, .guide-day { transition: box-shadow .25s ease; }
.guide-steps > li.is-kea::before, tr.is-kea .guide-day { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent); }

/* ---------- kea in the margin (guide.js, 1100px and up) ---------- */

.kea-guide { display: none; position: absolute; inset: 0; pointer-events: none; }
@media (min-width: 1100px) {
  .kea-guide { display: block; }
}
.kea-guide-kea, .kea-guide-bubble, .kea-guide-trail { position: absolute; left: 0; top: 0; will-change: transform; }
.kea-guide-kea { z-index: 2; width: 34px; height: 22px; opacity: 0; transition: opacity .24s ease; }
.kea-guide.is-on .kea-guide-kea { opacity: 1; }
.kea-guide-nudge { display: block; width: 100%; height: 100%; }
.kea-guide-kea .kea-mark { width: 100%; height: 100%; color: var(--accent); filter: drop-shadow(0 3px 4px rgba(29, 29, 31, .18)); }

.kea-guide-bubble {
  z-index: 1;
  max-width: min(300px, calc((100vw - 680px) / 2 - 80px));
  white-space: normal;
  opacity: 0;
  transition: opacity .16s ease;
}
.kea-guide-bubble .kea-bubble-text { flex-wrap: wrap; gap: 2px 8px; transform: scale(.92); transform-origin: right center; transition: transform .16s ease; }
.kea-guide.is-on .kea-guide-bubble.is-on { opacity: 1; transition: opacity .22s ease; }
.kea-guide-bubble.is-on .kea-bubble-text { transform: scale(1); transition: transform .32s cubic-bezier(.3, 1.5, .5, 1); }

/* dotted trail from the list's first step down to kea */
.kea-guide-trail {
  width: 4px; height: 0;
  background: radial-gradient(circle at 2px 2px, var(--accent) 1.6px, transparent 2.2px) 0 0 / 4px 11px repeat-y;
  opacity: 0;
  transition: opacity .24s ease;
}
.kea-guide.is-on .kea-guide-trail { opacity: .55; }

/* ---------- the step pill (guide.js, under 1100px) ---------- */

.kea-pill {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-float);
  font: 500 13px/1 var(--mono);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease;
}
.kea-pill.is-on { opacity: 1; transform: translate(-50%, 0); }
.kea-pill .kea-mark { width: 20px; height: 13px; color: var(--accent); }
@media (min-width: 1100px) {
  .kea-pill { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* landed: kea leans in toward the ring now and then, like the homepage demo */
  .kea-guide-kea.is-perched .kea-guide-nudge { animation: kea-nudge 1.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .kea-guide-kea, .kea-guide-bubble, .kea-guide-bubble .kea-bubble-text, .kea-guide-trail,
  .kea-pill, .guide-steps > li::before, .guide-day { transition: none !important; }
}

/* ---------- where kea fits: the one kea section, with the waitlist form ---------- */

.guide-cta { margin-top: 64px; padding: 4px 30px 32px; border-radius: var(--radius-tile); background: var(--t-pink); scroll-margin-top: 24px; }
.guide .guide-cta h2 { margin-top: 28px; }
.guide-cta .kea-form { justify-content: flex-start; margin-top: 24px; }
.guide-cta .kea-form-note { text-align: left; }
.guide-cta .kea-done-wrap { margin-top: 24px; margin-inline: 0; }
@media (max-width: 700px) {
  .guide-cta { padding: 2px 20px 24px; border-radius: 22px; }
  .guide-cta .kea-input { width: 100%; }
}

.guide-more { margin-top: 40px; font-size: 16px; }
.guide-more a { text-underline-offset: 3px; }

/* ---------- /guides: every guide, grouped by tool ---------- */

.guides .lede { margin-top: 16px; max-width: 52ch; }
.guides h2 { margin-top: 48px; font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; }
.guides-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.guides-card { padding: 22px 24px 24px; border-radius: var(--radius-card); background: var(--surface-2); }
.guides-card h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.guides-card h3 a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guides-card p { margin-top: 8px; color: var(--mute); font-size: 16px; line-height: 1.5; }
.guides-card .guide-date { margin-top: 10px; font-size: 14px; }