/* The Canvas how-to guides, second edition (owner, 2026-10-30): shorter,
   problem and fix side by side, prompts a teacher can copy.

   Loaded after style.css and home.css, only by guides/*.html. Everything is
   scoped to body.guide-page so the homepage cannot pick any of it up. Brand
   tokens only (style.css :root, home.css :root); no new colours.

   The pieces, top to bottom of a guide:
     .g-answer   the short answer, in words a search engine or an AI answer
                 can lift whole
     .g-split    THE PROBLEM (paper, busy) beside THE FIX (navy, one line)
     .g-mock*    the drawings inside them: plain HTML, not images, so they
                 stay sharp, cost nothing to load and are read out as one
                 labelled picture (role="img" + aria-label on the outer box)
     .g-prompt   a prompt card, styled like the Course++ message box, with a
                 Copy button (guides.js)
     .g-faq      questions in the words people search with, answered in full
                 sentences, never collapsed */

body.guide-page .g-wrap { max-width: 56rem; }

/* ---- Short answer ------------------------------------------------------- */
body.guide-page .g-answer {
  max-width: 44rem; margin: 0 0 2.25rem;
  border-left: 4px solid var(--navy); padding: .25rem 0 .25rem 1.1rem;
  font-size: var(--t-lg); color: var(--ink);
}
body.guide-page .g-answer p { margin: 0; }
body.guide-page .g-answer strong:first-child { color: var(--navy); }

/* ---- The problem / the fix --------------------------------------------- */
body.guide-page .g-split {
  display: grid; gap: 0; margin: 0 0 2.75rem;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-2);
}
@media (max-width: 46rem) { body.guide-page .g-split { grid-template-columns: 1fr; } }
body.guide-page .g-side { padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .9rem; }
body.guide-page .g-side--problem { background: var(--panel); color: var(--ink); }
body.guide-page .g-side--fix { background: var(--navy); color: var(--white); }
body.guide-page .g-side h2 {
  align-self: flex-start; margin: 0; padding: .4rem .8rem; border-radius: var(--r-pill);
  font: 850 .9375rem/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase;
}
body.guide-page .g-side--problem h2 { background: var(--ink-2); color: var(--white); }
body.guide-page .g-side--fix h2 { background: var(--lime); color: var(--lime-ink); }
body.guide-page .g-side .g-say {
  margin: 0; font: 750 clamp(1.25rem, 1rem + 1vw, 1.6rem)/1.25 var(--f-sans); letter-spacing: -.01em;
}
body.guide-page .g-side--fix .g-say { color: var(--white); }
body.guide-page .g-side p { margin: 0; }
body.guide-page .g-side--fix p { color: var(--on-navy-2); }
body.guide-page .g-cost {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem;
  font: 650 var(--t-sm)/1.2 var(--f-sans);
}
body.guide-page .g-cost span { border-radius: var(--r-pill); padding: .3rem .65rem; }
body.guide-page .g-side--problem .g-cost span { background: var(--white); color: var(--ink-2); border: 1px solid var(--rule); }
body.guide-page .g-side--fix .g-cost span { background: var(--lime); color: var(--lime-ink); }

/* ---- Drawings ----------------------------------------------------------- */
body.guide-page .g-mock {
  border-radius: var(--r-md); font: 500 .8125rem/1.3 var(--f-sans);
  user-select: none;
}
/* Canvas, by hand: a stack of near-identical edit rows, fading out — the
   point is that there are a lot of them. */
body.guide-page .g-mock--canvas { background: var(--white); border: 1px solid var(--rule); padding: .55rem; }
body.guide-page .g-mock--canvas .g-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border-bottom: 1px solid var(--rule); color: var(--ink-2);
}
body.guide-page .g-mock--canvas .g-row:last-child { border-bottom: 0; }
body.guide-page .g-mock--canvas .g-row:nth-child(n+4) { opacity: .55; }
body.guide-page .g-mock--canvas .g-row:nth-child(n+6) { opacity: .25; }
body.guide-page .g-mock--canvas .g-field {
  border: 1px solid var(--rule-ui); border-radius: var(--r-sm); padding: .1rem .4rem;
  font-family: var(--f-mono); font-size: .75rem; color: var(--ink);
}
body.guide-page .g-mock--canvas .g-btn {
  background: var(--panel); border-radius: var(--r-sm); padding: .1rem .45rem; color: var(--ink-2); font-size: .75rem;
}
body.guide-page .g-mock--canvas .g-more { text-align: center; color: var(--ink-3); font-size: .75rem; padding-top: .3rem; }

/* Course++: the panel, one message, the result. */
body.guide-page .g-mock--panel { background: var(--white); color: var(--ink); padding: .7rem; display: grid; gap: .55rem; }
body.guide-page .g-mock--panel .g-me {
  justify-self: end; max-width: 88%;
  background: var(--lime-soft); border: 1px solid var(--lime); border-radius: 12px 12px 3px 12px;
  padding: .45rem .65rem; font-weight: 600;
}
body.guide-page .g-mock--panel .g-done {
  border: 1px solid var(--rule); border-radius: var(--r-md); padding: .45rem .6rem; display: grid; gap: .25rem;
}
body.guide-page .g-mock--panel .g-done b { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
body.guide-page .g-mock--panel .g-tick { display: flex; gap: .4rem; align-items: baseline; color: var(--ink-2); }
body.guide-page .g-mock--panel .g-tick::before {
  content: ""; flex: none; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--lime); box-shadow: inset 0 0 0 2px var(--white), 0 0 0 1px var(--lime);
  transform: translateY(.1rem);
}

/* ---- Prompt cards (the signature) -------------------------------------- */
body.guide-page .g-prompts { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
body.guide-page .g-prompt {
  position: relative; margin: 0;
  background: var(--white); border: 2px solid var(--lime); border-radius: 14px;
  padding: 1rem 1.1rem .9rem 3.4rem;
  box-shadow: 0 10px 28px -22px rgb(63 98 18 / .9);
}
body.guide-page .g-prompt::before {
  /* the Course++ mark, as the "sender" of the card */
  content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 1.7rem; height: 1.7rem;
  background: url("/icon.svg?v=d") center / contain no-repeat;
}
body.guide-page .g-prompt q {
  display: block; quotes: none;
  font: 650 var(--t-lg)/1.4 var(--f-sans); color: var(--ink);
}
body.guide-page .g-prompt .g-when { display: block; margin-top: .35rem; color: var(--ink-3); font-size: var(--t-sm); }
body.guide-page .g-copy {
  margin-top: .65rem; display: inline-flex; align-items: center; gap: .35rem;
  font: 700 var(--t-sm)/1 var(--f-sans); color: var(--lime-ink);
  background: var(--lime); border: 0; border-radius: var(--r-pill); padding: .5rem .9rem; cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out);
}
body.guide-page .g-copy:hover { transform: translateY(-1px); }
body.guide-page .g-copy:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
body.guide-page .g-copy[data-copied] { background: var(--navy); color: var(--white); }
/* In the navy fix panel, the first prompt sits on dark: keep it white. */
body.guide-page .g-side--fix .g-prompt { box-shadow: none; }

/* ---- Body sections ------------------------------------------------------ */
body.guide-page .g-sec { margin: 0 0 2.5rem; max-width: 44rem; }
body.guide-page .g-sec > h2 { font-size: var(--t-h2); margin: 0 0 .75rem; }
body.guide-page .g-steps { padding-left: 1.3rem; margin: 0; }
body.guide-page .g-steps li { margin-bottom: .4rem; }
body.guide-page .g-steps li::marker { font-weight: 700; color: var(--ink-3); }
body.guide-page .g-note { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
body.guide-page .g-note li { padding-left: 1.1rem; border-left: 3px solid var(--rule); }

body.guide-page .g-faq h3 { font-size: var(--t-lg); margin: 1.4rem 0 .35rem; }
body.guide-page .g-faq h3:first-of-type { margin-top: .5rem; }
body.guide-page .g-faq p { margin: 0; }

body.guide-page .g-byline { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  body.guide-page .g-copy { transition: none; }
  body.guide-page .g-copy:hover { transform: none; }
}

/* ---- The guides index: one section per kind of job --------------------- */
body.guide-page .g-cat { max-width: none; }
body.guide-page .g-cat > p { color: var(--ink-2); margin: 0; }
body.guide-page .guide-card h3 { font-size: var(--t-h3); line-height: 1.35; margin: 0 0 .5rem; }

/* ---- Pictures (owner, 2026-10-30) ---------------------------------------
   One flat illustration per guide, in the brand palette, generated once and
   kept in img/guides/ (<slug>.webp for the page and its card, <slug>-share.jpg
   for link previews). Decorative: the title beside each one says the same
   thing, so alt="" and nothing for a screen reader to repeat. */
body.guide-page .guide-card--img { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
body.guide-page .guide-card__img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 447; object-fit: cover; background: var(--panel); border-bottom: 1px solid var(--rule); }
body.guide-page .guide-card--img h3 { margin: 1.1rem 1.3rem .45rem; }
body.guide-page .guide-card--img p { margin: 0 1.3rem 1.25rem; }
body.guide-page .guide-card--img { transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
body.guide-page .guide-card--img:hover { box-shadow: var(--shadow-1); transform: translateY(-2px); }
/* The whole card is the link's target area, without nesting the image in it. */
body.guide-page .guide-card--img { position: relative; }
body.guide-page .guide-card--img h3 a::after { content: ""; position: absolute; inset: 0; }
body.guide-page .guide-card--img h3 a:focus-visible { outline: none; }
body.guide-page .guide-card--img:has(a:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }

/* A guide's own picture sits beside its title on a wide screen, under it on
   a phone, and never pushes the short answer far down. */
body.guide-page .g-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: 2.5rem; align-items: center; }
body.guide-page .g-hero > :not(.g-hero-img) { grid-column: 1; }
body.guide-page .g-hero-img { grid-column: 2; grid-row: 1 / span 3; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
@media (max-width: 46rem) {
  body.guide-page .g-hero { grid-template-columns: 1fr; }
  body.guide-page .g-hero-img { grid-column: 1; grid-row: auto; max-width: 28rem; margin: .25rem 0 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.guide-page .guide-card--img, body.guide-page .guide-card--img:hover { transition: none; transform: none; }
}