/**
 * claude-guide.css — the doorway page of every Claude guide
 * (js/claude-guide-doorway.js; docs/projects/claude-guides/FRAMEWORK.md).
 * Loaded by app.html for the in-app edition (js/claude-guide-page.js) and by
 * /learn/claude/<slug> for the public one. It began as funnel-guide.css, the
 * funnel guide's own sheet; `.fgd` is kept as the class prefix ("the guide
 * doorway") so nothing that already drew with it moved.
 *
 * ⚠️ EVERYTHING IS UNDER `.fgd`. The same sheet runs inside the app shell and
 * inside the help centre's chrome, and must restyle neither.
 *
 * ⚠️ THE APP'S TOKENS, WITH THEIR VALUES AS FALLBACKS. In the app,
 * css/design-tokens.css defines them and they win. The help centre's chrome
 * does not define them (it has its own --ink / --line names), so there the
 * fallbacks paint the page in the same colours as the app. Same pattern as
 * js/learn-page.js.
 *
 * Type: Inter for reading (the app's font; Atkinson Hyperlegible is not loaded
 * by the app), Bricolage Grotesque for the display lines, as app-shell.css.
 * Reading text is 17px or more. Buttons are 48px tall, full width on a phone.
 */
.fgd {
  max-width: 760px;
  margin: 0 auto;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text, #15172b);
}
/* Its own box model, so a full-width button on a phone never spills out of its
   card whatever sheet the page around it loads (the app sets border-box
   globally; a host page might not). */
.fgd, .fgd *, .fgd *::before, .fgd *::after { box-sizing: border-box; }
.fgd p { margin: 0 0 12px; }
.fgd h1, .fgd h2, .fgd h3 { margin: 0; }

/* ── the promise ───────────────────────────────────────────────────── */
.fgd-top { padding: 8px 0 22px; }
.fgd-kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep, #4a32b8);
  margin: 0 0 14px !important;
}
.fgd-promise {
  font-family: "Bricolage Grotesque", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 30px;
  line-height: 1.16;
  color: var(--text, #15172b);
}
/* One sentence to a line: three promises, read one at a time. */
.fgd-promise span { display: block; }
.fgd-promise span + span { margin-top: 6px; }

/* ── the film slot ─────────────────────────────────────────────────── */
.fgd-film { margin: 0 0 26px; }
.fgd-film video,
.fgd-film-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 18px);
  border: 1px solid var(--border, #e8e4d8);
  background: var(--surface-3, #f1eee5);
}
.fgd-film-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-2, #4d5168);
  background:
    linear-gradient(135deg, var(--accent-softer, #f5f1ff), var(--surface-3, #f1eee5));
}
.fgd-film-play {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface, #fff);
  color: var(--accent, #6a4cf1);
  border: 1px solid var(--border, #e8e4d8);
  padding-left: 4px;
}
.fgd-film-label { font-size: 16px; }

/* ── cards and headings ────────────────────────────────────────────── */
.fgd-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e4d8);
  border-radius: var(--radius-lg, 18px);
  padding: 22px;
  margin: 0 0 26px;
}
.fgd-h2 {
  font-family: "Bricolage Grotesque", "Inter", sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text, #15172b);
  margin: 0 0 8px !important;
}
.fgd-small { font-size: 17px; color: var(--text-2, #4d5168); margin: 14px 0 0 !important; }
.fgd-status { font-size: 17px; color: var(--text-2, #4d5168); margin: 12px 0 0 !important; }
.fgd-status:empty { display: none; }

/* ── buttons ───────────────────────────────────────────────────────── */
.fgd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font: 600 17px/1.2 "Inter", system-ui, sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.fgd-btn[hidden] { display: none; }
/* ⚠️ OPEN IN CLAUDE IS DESKTOP ONLY, BY SIZE AS WELL AS BY POINTER. A `claude://`
   link opens the Claude desktop app and nothing on a phone. wire() un-hides it
   only on a fine pointer with no mobile browser; this also keeps it off every
   screen narrower than the desktop breakpoint (720px), so a narrow window or a
   phone that reports a mouse never shows a button that does nothing. */
@media (max-width: 719px) { .fgd [data-fgd-open] { display: none !important; } }
.fgd-btn-primary { background: var(--accent, #6a4cf1); border-color: var(--accent, #6a4cf1); color: #fff !important; }
.fgd-btn-primary:hover { background: var(--accent-deep, #4a32b8); border-color: var(--accent-deep, #4a32b8); }
.fgd-btn-secondary { background: var(--surface, #fff); border-color: var(--border-strong, #d8d3c2); color: var(--text, #15172b); }
.fgd-btn-secondary:hover { background: var(--surface-2, #faf9f4); }
.fgd-btn-ghost { background: transparent; border-color: var(--border, #e8e4d8); color: var(--text-2, #4d5168) !important; }
.fgd-btn-ghost:hover { background: var(--surface-2, #faf9f4); color: var(--text, #15172b) !important; }
.fgd-btn-big { min-height: 56px; font-size: 18px; padding: 0 28px; margin-top: 6px; }
/* Green, by itself, once a token appears. A status, not a button to press. */
.fgd-btn-done { background: var(--good-soft, #e2f3ea); border-color: var(--good, #1c8e5a); color: var(--good, #1c8e5a); cursor: default; }
.fgd-connect.is-on { border-color: var(--good, #1c8e5a); }
.fgd-btn:focus-visible { outline: 3px solid var(--accent, #6a4cf1); outline-offset: 3px; }

/* ── the ladder ────────────────────────────────────────────────────── */
.fgd-ladder { margin: 0 0 40px; }
/* The heading and the count share a row, so the count reads as the ladder's
   own label rather than a line floating above it. */
.fgd-ladder-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; margin: 0 0 10px;
}
.fgd-ladder-head .fgd-h2 { margin: 0 !important; }
.fgd-count { font-size: 19px; font-weight: 600; color: var(--accent-deep, #4a32b8); margin: 0 !important; }
.fgd-count-line { flex-basis: 100%; color: var(--text-2, #4d5168); margin: 0 !important; }
/* One segment per rung, the same width as the rungs below it. */
.fgd-meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 0 0 14px; }  /* the renderer sets the real count inline */
.fgd-seg { height: 8px; border-radius: 4px; background: var(--surface-3, #e9e5da); }
.fgd-seg.is-done { background: var(--good, #1c8e5a); }
.fgd-seg.is-next { background: var(--accent, #6a4cf1); }
.fgd-rungs { list-style: none; margin: 0; padding: 0; }
.fgd-rung {
  border: 1px solid var(--border, #e8e4d8);
  background: var(--surface, #fff);
  border-radius: var(--radius, 12px);
  padding: 14px 16px;
  margin: 0 0 10px;
}
.fgd-rung-top { display: flex; align-items: center; gap: 12px; }
.fgd-num {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 15px/1 "Inter", sans-serif;
  background: var(--surface-3, #f1eee5);
  color: var(--text-2, #4d5168);
}
.fgd-rung-label { flex: 1; min-width: 0; font: 600 18px/1.3 "Inter", sans-serif; color: var(--text, #15172b); }
.fgd-badge {
  flex: none;
  font: 600 13px/1 "Inter", sans-serif;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--accent, #6a4cf1);
  color: #fff;
}
.fgd-hint { color: var(--text-2, #4d5168); margin: 10px 0 0 44px !important; }
/* Done: quieted, not hidden, so the shape of all ten stays readable. */
.fgd-rung.is-done { background: var(--surface-2, #faf9f4); }
.fgd-rung.is-done .fgd-num { background: var(--good, #1c8e5a); color: #fff; }
.fgd-rung.is-done .fgd-rung-label { color: var(--text-2, #4d5168); font-weight: 500; }
/* Next: the one thing to do now. */
.fgd-rung.is-next { border: 2px solid var(--accent, #6a4cf1); padding: 18px 18px 20px; box-shadow: 0 8px 24px rgba(106, 76, 241, .10); }
.fgd-rung.is-next .fgd-num { background: var(--accent, #6a4cf1); color: #fff; }
.fgd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── one sentence to say ───────────────────────────────────────────── */
.fgd-say { margin: 12px 0 0 44px; }
.fgd-say-k {
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3, #8a8fa6);
  margin: 0 0 6px !important;
}
.fgd-sentence {
  font-family: "Bricolage Grotesque", "Inter", sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--text, #15172b);
  background: var(--accent-softer, #f5f1ff);
  border-left: 4px solid var(--accent, #6a4cf1);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px !important;
  /* The fallback leaves this selected for a hand copy: let it be selectable. */
  user-select: text;
  -webkit-user-select: text;
}
.fgd-say.is-big .fgd-sentence { font-size: 25px; padding: 16px 18px; }
.fgd-say-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fgd-copied { font-size: 16px; color: var(--good, #1c8e5a); margin: 8px 0 0 !important; }
.fgd-copied:empty { display: none; }
/* A step that ends with the coach's own press in the app (Approve, Switch on):
   the link to that screen, under the sentence for Claude. */
.fgd-app { margin: 16px 0 0 44px !important; }
.fgd-app .fgd-say-k { display: block; }
/* Its words can run to two lines on a phone: room above and below them. */
.fgd-app .fgd-btn { padding: 10px 18px; text-align: center; line-height: 1.3; }

/* ── bigger screens ────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .fgd-promise { font-size: 42px; }
  .fgd-card { padding: 28px 30px; }
  .fgd-rung { padding: 16px 20px; }
}

/* ── phones: full-width buttons, no indent ─────────────────────────── */
@media (max-width: 640px) {
  .fgd-btn { width: 100%; }
  .fgd-say { margin-left: 0; }
  .fgd-hint { margin-left: 0 !important; }
  .fgd-app { margin-left: 0 !important; }
  .fgd-say-actions { flex-direction: column; }
  .fgd-card { padding: 20px 18px; }
  /* The promise a size smaller, so the Connect card sits high on a short
     phone screen, clear of the Help bubble at the bottom right. */
  .fgd-top { padding-bottom: 16px; }
  .fgd-promise { font-size: 26px; }
  .fgd-promise span + span { margin-top: 4px; }
}

/* ── in the app: clear of the two things that float over every page ── */
/* The Help bubble (support-widget.js .sw-launch, fixed bottom right, 44px
   tall at bottom 18px). Room at the foot of the page, so the last step and
   its buttons can always be scrolled clear of it. */
.fgd[data-mode="app"] { padding-bottom: 96px; }
/* While the bubble sits on the Connect card, it steps aside (js/claude-guide-
   page.js placeHelp). `visibility`, not `display`, so the page can still
   measure where it is and bring it back the moment the card scrolls clear.
   Only while the guide page is the page on screen, so leaving it by any door
   brings the bubble straight back. */
body.fgd-help-aside:has(#page-claude-guide.active) .sw-launch,
body.fgd-help-aside:has(#page-claude-guide.active) .sw-nudge { visibility: hidden; pointer-events: none; }
/* The Account manager tab (builder/js/beta-toolbar.js) folds to a 24px tab
   at left 0 at 1100px and below, and that file's rule is that text on a phone
   starts at x=29 or more so the tab clears it. The cards already do (their
   own padding); the lines outside a card are inset to the same column as the
   text inside the cards and the rungs, which is also what makes the count
   line up with the ladder. */
@media (max-width: 1100px) {
  .fgd[data-mode="app"] .fgd-top,
  .fgd[data-mode="app"] .fgd-ladder-head { padding-left: 17px; padding-right: 17px; }
  .fgd[data-mode="app"] .fgd-meter { margin-left: 17px; margin-right: 17px; }
}

/* ── a topic's own sections (claude-guide-doorway.js sectionHtml) ───── */
/* The calendar guide's quotes: text only, with who, where and when. No faces,
   no logos (FILMS.md, film 3's licensing rule). */
.fgd-quotes { margin-top: 22px; }
.fgd-quotes-lede { font-size: 19px; font-weight: 600; color: var(--text, #15172b); margin: 0 0 14px !important; }
.fgd-quote-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fgd-quote-item { border-left: 4px solid var(--accent, #6a4cf1); padding: 4px 0 4px 16px; }
.fgd-quote { margin: 0; }
.fgd-quote p { font-size: 19px; line-height: 1.45; color: var(--text, #15172b); margin: 0 !important; }
.fgd-cite { font-size: 16px; color: var(--text-2, #4d5168); margin: 6px 0 0 !important; }
.fgd-who { font-weight: 600; color: var(--text, #15172b); }
.fgd-cite a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fgd-note { font-size: 17px; color: var(--text-2, #4d5168); margin: 18px 0 0 !important; }
@media (min-width: 720px) {
  .fgd-quote-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
}
.fgd-chapter { margin-top: 22px; }
.fgd-chapter p { font-size: 18px; line-height: 1.5; color: var(--text, #15172b); margin: 0 0 10px !important; }
.fgd-chapter p:last-child { margin-bottom: 0 !important; font-weight: 600; }

/* Optional steps (guide.js OPTIONAL): their own heading, unnumbered, outside the count. */
.fgd-optional { margin-top: 22px; }
.fgd-optional-h {
  font-family: "Bricolage Grotesque", "Inter", sans-serif; font-weight: 700; font-size: 19px;
  line-height: 1.25; margin: 0 0 10px; color: var(--text, #15172b);
}
.fgd-rung.is-optional .fgd-num { background: var(--surface-2, #faf9f4); color: var(--text-2, #4d5168); }
.fgd-rung.is-optional.is-done .fgd-num { background: var(--good, #1c8e5a); color: #fff; }

/* TK-37: the way back to where the coach came from (js/claude-guide-page.js).
   The crumb is a real link, underlined on hover, and a plain "Back to Spaces"
   sits under it in the app's accent colour, big enough to find and press. */
#claude-guide-content .page-head-crumbs a.crumb-link { color: var(--accent, #5b3df5); text-decoration: none; cursor: pointer; }
#claude-guide-content .page-head-crumbs a.crumb-link:hover { text-decoration: underline; }
#claude-guide-content .cg-back {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 44px;
  font-size: 16px; font-weight: 600; color: var(--accent, #5b3df5); text-decoration: none;
}
#claude-guide-content .cg-back:hover { text-decoration: underline; }
#claude-guide-content .cg-back svg { flex: none; }