/* The QR Bistro guide (guide/index.html). Colors, fonts and radii come from
   ../styles/tokens.css. Print: owner chapters flow; each staff .sheet is one A4
   page; "Print staff sheets" (guide.js) prints only those two. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body, var(--font)); line-height: 1.55; font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }

.masthead { background: var(--color-header); color: var(--color-header-ink); border-bottom: 1px solid var(--color-border); padding: var(--space-5) 0 var(--space-4); }
.eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.masthead h1 { font-family: var(--font-display, var(--font)); font-size: clamp(32px, 6vw, 44px); margin: 4px 0 8px; line-height: 1.1; }
.lede { margin: 0 0 4px; color: var(--color-text-2); max-width: 60ch; }
.updated { margin: 0; font-size: 13px; color: var(--color-muted); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.jump a, .print-sheets {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  font: 600 14px var(--font); text-decoration: none; cursor: pointer;
}
.print-sheets { background: var(--color-primary); color: var(--color-on-dark); border-color: var(--color-primary); }
.jump a:focus-visible, .print-sheets:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.part { padding: var(--space-5) 0 0; }
.part__title { font-family: var(--font-display, var(--font)); font-size: 28px; margin: 0 0 var(--space-3); }
.part__title span { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-focus); }
.toc ol { margin: 0 0 var(--space-4); padding-left: 1.4em; columns: 2; column-gap: var(--space-5); }
.toc li { margin: 2px 0; }

.chapter, .sheet { padding-top: var(--space-4); border-top: 1px solid var(--color-border); margin-top: var(--space-4); }
.chapter h3, .sheet h3 { font-size: 22px; margin: 0 0 var(--space-2); }
h4 { font-size: 17px; margin: var(--space-4) 0 var(--space-2); }
.note { background: var(--color-tint, var(--color-highlight)); border-radius: var(--radius); padding: 10px 14px; font-size: 15px; }

figure { margin: var(--space-3) 0 34px; }
figure img { border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--color-surface); }
figure.phone img { max-width: 260px; border-radius: 18px; }
figcaption { margin-top: 8px; font-size: 15px; color: var(--color-text-2); }
/* A thin line closes each picture + its notes, so the next one doesn't run into it.
   A row of pictures (.steps) is one group; the chapter's last group needs none. */
.chapter > figure, .chapter > .steps { padding-bottom: var(--space-4); margin-bottom: 34px; border-bottom: 1px solid var(--color-border); }
.chapter > figure:last-child, .chapter > .steps:last-child { border-bottom: 0; padding-bottom: 0; }

/* The numbered notes match the caramel markers in the pictures. */
.marks { list-style: none; counter-reset: mark; margin: 10px 0 0; padding: 0; }
.marks li { counter-increment: mark; position: relative; padding-left: 34px; margin: 6px 0; font-size: 15px; }
.marks li::before {
  content: counter(mark); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-focus); color: var(--color-on-dark); font: 700 13px var(--font);
}

.steps { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.steps figure { margin: 0; }
.steps--phone { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.steps--phone figure.phone img { max-width: 100%; }

.sheet__lede { font-size: 17px; }
.sheet__list { padding-left: 1.3em; }
.sheet__list li { margin: 6px 0; }
.sheet__steps { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.sheet__steps figure { margin: 0; }
.leave { margin-top: var(--space-4); }
.print-only { display: none; }

.faq dt { font-weight: 700; margin-top: var(--space-3); }
.faq dd { margin: 4px 0 0; color: var(--color-text-2); }
.foot { padding: var(--space-5) 16px; color: var(--color-muted); font-size: 13px; }

@media print {
  @page { size: A4; }
  body { font-size: 11pt; background: var(--color-surface); }
  .no-print { display: none !important; }
  .masthead { background: none; border: 0; padding: 0 0 8pt; }
  .wrap { max-width: none; padding: 0; }
  h2, h3, h4 { break-after: avoid; }
  figure, .marks li, .faq dt { break-inside: avoid; }
  .steps { break-inside: avoid; } /* keep a picture row together (avoid on grid items leaves blank pages) */
  .steps figure { break-inside: auto; }
  figure img { box-shadow: none; max-height: 120mm; width: auto; }
  figure.phone img { max-height: 95mm; }
  .chapter { border: 0; break-before: page; } /* a heading never strands at a page bottom */
  #start { break-before: auto; }
  #staff { break-before: page; }
  #staff > .part__title { display: none; }

  /* Each staff sheet is one A4 page: small pictures in a grid, short notes. */
  .sheet { break-before: page; break-inside: avoid; border: 0; margin: 0; padding: 0; }
  .sheet h3 { font-size: 18pt; }
  .sheet__lede { font-size: 10.5pt; margin: 0 0 6pt; }
  .sheet .screen-only { display: none; }
  .sheet__steps { grid-template-columns: repeat(3, 1fr); gap: 8pt 12pt; }
  .sheet figure img { max-height: 78mm; width: auto; max-width: 100%; }
  /* On paper the numbered list above says it all; dimmed pop-up shots don't print well. */
  .print-only { display: block; }
  .sheet figure.text-print, .sheet .leave { display: none; }
  .sheet .marks { margin-top: 3pt; }
  .sheet .marks li { font-size: 8pt; padding-left: 16pt; margin: 2pt 0; line-height: 1.3; }
  .sheet .marks li::before { width: 13pt; height: 13pt; font-size: 7pt; }
  .sheet .leave { margin-top: 6pt; }
  .sheet .leave h4 { font-size: 10pt; margin: 0 0 3pt; }
  #questions { break-before: page; }
  .sheet__list li { font-size: 10pt; }

  /* "Print staff sheets": only the two sheets. */
  body.print-sheets .masthead, body.print-sheets .foot,
  body.print-sheets main > .part:not(.staff-part) { display: none !important; }
  body.print-sheets #staff { break-before: auto; padding: 0; }
  body.print-sheets #sheet-counter { break-before: auto; }
}