/* Guide pages and the /guides/ hub, 2026-11-06.
   Builds on the text-page classes in ft-shell-20261106.css (body.ft-page, .ft-wrap, .ft-pagehead, .ft-prose)
   and uses only its colour tokens, so light and dark themes follow the site frame.
   Everything is scoped to .guide. Guides and labs load only ft-shell and this file (old page stylesheets
   removed 2026-11-09); the /guides/ hub still loads flagship-editorial-20260713.css, which these rules override. */

.guide { padding-block-end: var(--ft-space-7, 3rem); }
.guide .ft-pagehead { padding-block-end: var(--ft-space-4, 1rem); }
.guide .ft-pagehead__meta a { color: var(--ft-link); }

/* Short answer box at the top of each guide */
.guide .guide-answer {
  margin: 0 0 1.75em;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ft-line);
  border-left: 4px solid var(--ft-accent);
  border-radius: var(--ft-radius, 6px);
  background: var(--ft-accent-soft);
  color: var(--ft-ink);
}
.guide .guide-answer > h2 { margin: 0 0 0.4em; font-size: var(--ft-text-lg, 1.125rem); }
.guide .guide-answer > :last-child { margin-bottom: 0; }

/* Plain callout for a tip or a limit */
.guide .guide-note {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius, 6px);
  background: var(--ft-surface);
}
.guide .guide-note > :last-child { margin-bottom: 0; }

/* Tables: scroll inside their own box on narrow screens, never the page */
.guide .ft-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.25em;
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius, 6px);
  background: var(--ft-surface);
}
.guide .ft-table-wrap:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 2px; }
.guide .ft-table-wrap > table { margin: 0; min-width: 34rem; }
.guide .ft-table-wrap > table.guide-table--narrow { min-width: 0; }
.guide .ft-table-wrap caption {
  padding: 0.6em 0.75em;
  caption-side: top;
  text-align: left;
  color: var(--ft-ink-2);
  font-size: var(--ft-text-sm, 0.875rem);
}
.guide .ft-table-wrap tr:last-child > * { border-bottom: 0; }
.guide .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide td code, .guide th code { white-space: nowrap; }

/* Code: override older page stylesheets that colour <pre> for a dark panel */
.guide pre {
  color: var(--ft-ink);
  font-weight: 400;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}
.guide pre code { display: block; width: max-content; min-width: 100%; color: inherit; }
.guide :not(pre) > code { overflow-wrap: anywhere; color: var(--ft-ink); }

/* Figures */
.guide figure.guide-figure { margin: 0 0 1.5em; }
.guide figure.guide-figure img,
.guide figure.guide-figure svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius, 6px);
  background: var(--ft-surface);
}

/* Link to the tool: under the short answer (labs: under the intro) and at the end of a guide */
.guide .guide-cta { margin-top: 1.5em; }
.guide .guide-cta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ft-target, 2.75rem);
  padding: 0.55rem 1.1rem;
  border-radius: var(--ft-radius, 6px);
  background: var(--ft-accent);
  color: var(--ft-accent-ink);
  font-weight: 650;
  text-decoration: none;
}
.guide .guide-cta a:hover { background: var(--ft-accent-hover); }
.guide .guide-cta a:focus-visible { outline: 3px solid var(--ft-focus); outline-offset: 3px; }

.guide .guide-sources { font-size: var(--ft-text-sm, 0.875rem); color: var(--ft-ink-2); }
.guide .guide-sources li { margin: 0.45em 0; }

/* Hub page: one entry per guide */
.guide .guide-group { margin-top: 2em; }
.guide .guide-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--ft-space-4, 1rem);
  max-width: none;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}
.guide .guide-list > li {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ft-line);
  border-radius: var(--ft-radius-l, 10px);
  background: var(--ft-surface);
}
.guide .guide-list h3 { margin: 0 0 0.4em; font-size: var(--ft-text-lg, 1.125rem); }
.guide .guide-list h3 a { text-decoration: none; }
.guide .guide-list h3 a:hover { text-decoration: underline; }
.guide .guide-list p { margin: 0 0 0.6em; }
.guide .guide-list .guide-uses { margin: auto 0 0; padding-top: 0.4em; color: var(--ft-ink-2); font-size: var(--ft-text-sm, 0.875rem); }

@media (max-width: 40rem) {
  .guide .guide-answer { padding: 0.85rem 1rem; }
  .guide .ft-table-wrap > table { font-size: 0.875rem; }
}

.guide figure.guide-figure--small { max-width: 27.5rem; }
.guide .ft-prose > .guide-group { max-width: none; }

/* Before/after pair: side by side when there is room, stacked on phones */
.guide .ft-prose > .guide-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--ft-space-4, 1rem);
  max-width: 60rem;
  margin: 0 0 1.5em;
}
.guide .guide-pair > figure.guide-figure { margin: 0; }