/*
 * Public course pages (src/course-pages.js): the course index and one page per course.
 * Builds on main.css and uses its tokens only.
 */
.desktop-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--text); }
/* No menu script on these pages: the language picker and sign-in stay in the header on small screens. */
@media (max-width: 1080px) {
  .courses-page .header-actions { margin-left: auto; display: flex; gap: 10px; }
  .courses-page .course-shops-link { display: none; }
}
/* On a phone the logo gives way, so a long sign-in label ("Iniciar sesión", "Se connecter") stays inside the header. */
@media (max-width: 560px) {
  .courses-page .landing-header { gap: 10px; }
  .courses-page .landing-header > .brand { flex: 0 1 auto; min-width: 0; }
  .courses-page .landing-header .brand-logo { width: 100%; max-width: 180px; height: auto; }
  .courses-page .header-actions { flex: 0 0 auto; }
}

.course-page-hero { padding-top: 148px; padding-bottom: 48px; }
.course-page-hero h1 { margin: 14px 0 16px; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; }
.course-page-hero .section-heading { margin-bottom: 40px; }
.course-crumbs { margin-bottom: 20px; font-size: 14px; font-weight: 600; }
.course-crumbs a { color: var(--accent); }
.course-crumbs a::before { content: "← "; }

/* The whole card is the link: the title's link stretches over the card (one action per card). */
.course-card .course-card-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.course-card h2 { margin: 0 0 8px; font-size: 23px; line-height: 1.15; }
.course-card-link:focus-visible { outline: none; }
.course-card:has(.course-card-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

.course-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 48px; }
.course-page-lead { margin: 0 0 24px; color: var(--text-muted); font-size: 18px; line-height: 1.6; }
.course-facts { margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.course-facts div { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface); }
.course-facts dt { color: var(--text-subtle); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.course-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.course-page-note { margin: 14px 0 0; color: var(--text-muted); font-size: 14px; }
.course-page-trailer { margin: 0; }
.course-page-trailer video { width: 100%; aspect-ratio: 16 / 10; display: block; border: 1px solid var(--border); border-radius: 26px; background: var(--surface-subtle); object-fit: cover; }
.course-page-trailer figcaption { margin-top: 10px; color: var(--text-muted); font-size: 13px; text-align: center; }

.course-page-lessons, .course-page-teacher, .course-page-faq, .course-page-more { padding-top: 40px; padding-bottom: 40px; }
.course-page-lessons h2, .course-page-faq h2, .course-page-more h2 { margin: 0 0 24px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.course-page-faq h2 { text-align: center; }
.course-lesson-list { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; }
.course-lesson-list li { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface); font-weight: 600; }
.course-lesson-list i { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }

/* Members' creations, reviews and the course tools (pastry.courses review, 2026-11-05). */
.course-page-gallery, .course-page-reviews, .course-page-tools { padding-top: 40px; padding-bottom: 40px; }
.course-page-gallery h2, .course-page-reviews h2, .course-page-tools h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.course-section-lead { margin: 0 0 24px; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.course-gallery { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; }
.course-gallery figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface-subtle); }
.course-gallery img { width: 100%; height: auto; aspect-ratio: 1; display: block; object-fit: cover; }
.course-gallery figcaption { position: absolute; left: 8px; bottom: 8px; padding: 3px 10px; border-radius: var(--bam-radius-pill); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; }
.course-rating-summary { margin: 0 0 20px; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.course-rating-summary i, .course-review-stars i { color: var(--bam-gold); }
.course-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.course-review { margin: 0; padding: 22px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); }
.course-review-stars { margin: 0; display: flex; gap: 2px; font-size: 15px; }
.course-review blockquote { margin: 0; font-family: var(--bam-serif); font-size: 17px; line-height: 1.45; }
.course-review figcaption { margin-top: auto; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.course-tool-list { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.course-tool-list a, .course-tool { padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--bam-radius-pill); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; }
.course-tool-list a { border-color: var(--bam-gold-line); }
.course-tool-list a:hover { border-color: var(--border-strong); }
.course-tool-list a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.course-tool-list i { color: var(--accent); }

/* Live workshop next to BAM Academy (src/course-pages.js compareHtml); a card per row on a phone. */
.course-page-compare { padding-top: 40px; padding-bottom: 40px; }
.course-page-compare h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.course-compare { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); }
.course-compare th, .course-compare td { padding: 14px 18px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; }
.course-compare thead th, .course-compare thead td { border-top: 0; color: var(--text-subtle); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.course-compare thead th.is-bam { color: var(--accent); }
.course-compare tbody th { width: 22%; font-weight: 700; }
.course-compare td { color: var(--text-muted); }
.course-compare td.is-bam { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.course-compare td i { margin-right: 8px; }
.course-compare td.is-bam i { color: var(--accent); }
@media (max-width: 650px) {
  .course-compare, .course-compare tbody, .course-compare tr, .course-compare th, .course-compare td { display: block; width: auto; }
  .course-compare thead { display: none; }
  .course-compare tbody tr { padding: 4px 0; border-top: 1px solid var(--border); }
  .course-compare tbody tr:first-child { border-top: 0; }
  .course-compare tbody th, .course-compare td { border-top: 0; padding: 8px 16px; }
  .course-compare tbody th { width: auto; padding-top: 14px; }
  .course-compare td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-subtle); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .course-compare td.is-bam { margin: 0 12px 12px; border-radius: var(--bam-radius-md); }
}

.course-teacher-card { padding: 28px; display: flex; align-items: center; gap: 28px; border: 1px solid var(--bam-gold-line); border-radius: var(--bam-radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.course-teacher-card img { width: 160px; height: 160px; flex: 0 0 auto; object-fit: cover; object-position: top; border-radius: 50%; background: var(--surface-subtle); }
.course-teacher-card h2 { margin: 8px 0 4px; font-size: 30px; }
.course-teacher-card p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.course-teacher-card .course-teacher-role { margin-bottom: 10px; color: var(--accent); font-weight: 600; }
.course-page-cta { padding-top: 64px; padding-bottom: 64px; }
.course-page-cta p { margin: 18px 0 0; }

/* Masters, features and e-books (src/academy-pages.js). */
.course-teacher-card h2 a, .course-teacher-card h1 a { color: inherit; }
.master-hero { align-items: flex-start; }
.master-hero > div { flex: 1 1 auto; min-width: 0; }
.master-hero h1 { margin: 8px 0 12px; }
.master-hero .course-facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.master-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.master-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.master-tile, .feature-tile, .ebook-tile { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--bam-panel-sheen), var(--surface); }
.master-tile img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; object-position: top; background: var(--surface-subtle); }
.master-tile-body { padding: 18px 20px 20px; }
.master-tile h2, .master-tile h3, .feature-tile h2, .feature-tile h3, .ebook-tile h2, .ebook-tile h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.15; }
.master-tile p, .feature-tile p, .ebook-tile p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.master-tile .master-tile-role { margin-bottom: 6px; color: var(--accent); font-weight: 600; }
.master-tile-count { margin-top: 12px; display: block; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.master-tile .course-card-link::after, .feature-tile .course-card-link::after, .ebook-tile .course-card-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.master-tile a, .feature-tile a, .ebook-tile a { color: inherit; }
.master-tile:has(.course-card-link:focus-visible), .feature-tile:has(.course-card-link:focus-visible), .ebook-tile:has(.course-card-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.master-tile:hover, .feature-tile:hover, .ebook-tile:hover { border-color: var(--border-strong); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-tile { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.feature-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--bam-radius-md); background: var(--accent-soft); color: var(--accent); font-size: 26px; }
.feature-icon-large { width: 72px; height: 72px; font-size: 36px; border-radius: var(--bam-radius-lg); }
.feature-hero { max-width: 760px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.feature-hero h1 { margin: 0; }
.feature-hero .course-page-lead { margin: 0 0 8px; }
.feature-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.feature-steps li { padding: 20px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); font-weight: 600; line-height: 1.5; }
.feature-step-number { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--bam-gold-gradient); color: var(--bam-on-gold); font-weight: 700; }
.ebook-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ebook-tile { padding: 20px; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 18px; }
.ebook-cover { width: 100%; height: auto; display: block; border-radius: var(--bam-radius-sm); background: var(--surface-subtle); box-shadow: var(--shadow-card); }
.ebook-page-cover { margin: 0; max-width: 360px; justify-self: center; }
.ebook-recipe-note { margin: -12px 0 20px; }
.ebook-recipe-list { margin: 0; padding: 0 0 0 1.4em; columns: 3 220px; column-gap: 32px; line-height: 1.5; }
.ebook-recipe-list li { margin: 0 0 8px; break-inside: avoid; }

@media (max-width: 900px) {
  .master-grid, .feature-grid, .ebook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .master-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-steps { grid-template-columns: 1fr; }
  .course-page-grid { grid-template-columns: 1fr; gap: 28px; }
  .course-page-trailer { order: -1; }
  .course-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .course-page-hero { padding-top: 104px; }
  .course-facts, .course-lesson-list { grid-template-columns: 1fr; }
  .course-teacher-card { padding: 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .course-teacher-card img { width: 112px; height: 112px; }
  .master-grid, .feature-grid, .ebook-grid, .master-grid-compact { grid-template-columns: 1fr; }
}

/* Free calculators (src/tool-pages.js): the form beside its live result, one card per tool. */
.tool-card { margin-top: 32px; padding: 24px; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--bam-panel-sheen), var(--surface); box-shadow: var(--shadow-card); }
.tool-card [hidden] { display: none !important; }
.tool-form { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.tool-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.tool-pair .tool-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tool-inputs h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.2; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tool-field { display: grid; gap: 6px; align-content: start; color: var(--text); font-size: 14px; font-weight: 600; }
.tool-field input, .tool-field select, .tool-line input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--bam-radius-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 400; }
.tool-field input:focus-visible, .tool-field select:focus-visible, .tool-line input:focus-visible, .tool-icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tool-lines { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; border: 0; }
.tool-lines legend { margin-bottom: 8px; padding: 0; font-weight: 700; }
.tool-lines [data-lines] { display: grid; gap: 8px; }
.tool-line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.tool-line-head { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.tool-lines [data-add-line] { justify-self: start; }
.tool-icon-button { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--bam-radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.tool-icon-button:hover { border-color: var(--border-strong); color: var(--text); }
.tool-output { position: sticky; top: 96px; display: grid; gap: 16px; padding: 20px; border-radius: var(--bam-radius-md); background: var(--surface-subtle); }
.tool-output dl { display: grid; gap: 8px; margin: 0; }
.tool-result { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 14px; }
.tool-result dt { color: var(--text-muted); }
.tool-result dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tool-result.is-main { display: grid; gap: 4px; border-bottom-color: var(--border-strong); }
.tool-result.is-main dd { color: var(--accent); font-family: var(--bam-serif); font-size: clamp(28px, 4vw, 40px); line-height: 1.1; text-align: left; }
.tool-error { margin: 0; color: var(--danger); font-size: 14px; }
/* "Shrani v Moje recepte": saving needs an account (public/academy/js/tools.js) */
.tool-save { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.tool-save p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.tool-save p strong { display: block; color: var(--text); font-size: 15px; }
.tool-save .button { justify-self: start; }
.tool-note { margin: 12px 0 0; color: var(--text-muted); font-size: 13px; }
.tool-app-card { max-width: 760px; margin: 0 auto; padding: 32px; border-radius: var(--bam-radius-lg); background: var(--accent-soft); text-align: center; }
.tool-app-card h2 { margin: 0 0 12px; }
.tool-app-card > p { color: var(--text-muted); }
@media (max-width: 860px) {
  .tool-form, .tool-pair { grid-template-columns: minmax(0, 1fr); }
  .tool-output { position: static; }
}
@media (max-width: 560px) {
  .tool-card { padding: 16px; }
  .tool-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .tool-line input[name="name"] { grid-column: 1 / -1; }
  /* The column labels stay above the number fields (grams, price per kg); only the name label, whose field is full width, is hidden. */
  .tool-line-head > :first-child { display: none; }
  .tool-app-card { padding: 24px 16px; }
}

/* Guides (src/guide-pages.js): a long read with a contents rail, answer-first sections, photos, tables and bar charts. */
.guide-header { max-width: 860px; }
.guide-header h1 { margin: 14px 0 18px; }
.guide-lead { max-width: 760px; }
.guide-meta { margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-subtle); font-size: 14px; font-weight: 600; }
.guide-meta span { display: inline-flex; align-items: center; gap: 6px; }
.guide-meta i { color: var(--accent); }
.guide-figure { margin: 0 0 28px; }
.guide-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface-subtle); object-fit: cover; }
.guide-header + .guide-figure img { max-height: 520px; aspect-ratio: 16 / 9; }
.guide-section .guide-figure img { aspect-ratio: 3 / 2; }
.guide-section .guide-figure.is-small { float: right; width: 46%; margin: 6px 0 16px 24px; }
.guide-section::after { content: ""; display: table; clear: both; }
.guide-section :is(h3, .guide-table-wrap, .guide-chart, .guide-callout) { clear: both; }
.guide-figure figcaption { margin-top: 8px; color: var(--text-subtle); font-size: 13px; line-height: 1.5; }

.guide-layout { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 760px); justify-content: space-between; align-items: start; gap: 56px; }
.guide-toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow: auto; padding: 18px; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); }
.guide-toc summary { margin: -11px 0; padding: 11px 0; cursor: pointer; color: var(--text-subtle); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.guide-toc ol { margin: 12px 0 0; padding: 0 0 0 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.guide-toc a { color: var(--text-muted); }
.guide-toc a:hover { color: var(--accent); }
.guide-body { min-width: 0; font-size: 17px; line-height: 1.75; }
.guide-body p { margin: 0 0 16px; }
.guide-body a:not(.button) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.guide-body :is(a, summary):focus-visible, .guide-toc :is(a, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.guide-section { margin: 0 0 48px; scroll-margin-top: 96px; }
.guide-section h2 { margin: 0 0 16px; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.12; scroll-margin-top: 96px; }
.guide-section h3 { margin: 28px 0 10px; font-size: 23px; line-height: 1.2; }
.guide-answer { padding: 14px 18px; border-left: 4px solid var(--accent); border-radius: 0 var(--bam-radius-md) var(--bam-radius-md) 0; background: var(--accent-soft); color: var(--text); font-weight: 600; }
.guide-list { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.guide-list li::marker { color: var(--accent); }

.guide-summary { margin: 0 0 24px; padding: 24px; border: 1px solid var(--bam-gold-line); border-radius: var(--bam-radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.guide-summary h2 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 26px; }
.guide-summary h2 i { color: var(--accent); }
.guide-summary-text { font-weight: 600; }
.guide-summary .guide-list { margin: 0; }
.guide-facts { margin: 0 0 48px; }
.guide-facts dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.guide-facts div { padding: 16px; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface-subtle); }
.guide-facts dd { margin: 0; color: var(--accent); font-family: var(--bam-serif); font-size: 30px; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.guide-facts dt { margin-top: 6px; color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.guide-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

.guide-table-wrap { margin: 8px 0 24px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface); }
.guide-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.guide-table caption { padding: 12px 16px 0; color: var(--text-subtle); font-size: 13px; font-weight: 700; text-align: left; }
.guide-table th, .guide-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.guide-table thead th { color: var(--text-subtle); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.guide-table tbody th { font-weight: 700; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }

.guide-chart { margin: 8px 0 28px; padding: 20px; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); }
.guide-chart-title { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.guide-chart-title i { color: var(--accent); }
.guide-chart-rows { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.guide-chart-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 6.5em; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; }
.guide-chart-bar { width: 100%; height: 14px; display: block; overflow: hidden; border-radius: var(--bam-radius-pill); }
.guide-chart-track { fill: var(--surface-subtle); }
.guide-chart-fill { fill: var(--accent); }
.guide-chart-fill.tone-1 { fill: color-mix(in srgb, var(--accent) 78%, var(--surface)); }
.guide-chart-fill.tone-2 { fill: color-mix(in srgb, var(--accent) 60%, var(--surface)); }
.guide-chart-fill.tone-3 { fill: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.guide-chart-row.is-highlight .guide-chart-fill { fill: var(--accent); }
.guide-chart-row.is-highlight .guide-chart-label { font-weight: 700; }
.guide-chart-value { text-align: right; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-chart-axis, .guide-chart-note { margin: 12px 0 0 !important; color: var(--text-subtle); font-size: 13px; line-height: 1.5; }

.guide-callout { margin: 8px 0 24px; padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface-subtle); font-size: 16px; line-height: 1.6; }
.guide-callout > i { color: var(--accent); font-size: 22px; line-height: 1.2; }
.guide-callout p { margin: 0 0 8px; }
.guide-callout p:last-child { margin: 0; }
.guide-callout-title { font-weight: 700; }
.guide-callout.is-warning { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); }
.guide-callout.is-warning > i { color: var(--warning); }
.guide-callout.is-tip { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.guide-callout.is-tip > i { color: var(--success); }

.guide-steps { margin: 0; padding: 0; display: grid; gap: 10px; list-style: none; counter-reset: none; }
.guide-steps li { padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface); font-size: 16px; line-height: 1.55; }
.guide-step-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.guide-glossary dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.guide-glossary dl > div { padding: 12px 0; display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 16px; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 1.55; }
.guide-glossary dt { font-weight: 700; }
.guide-glossary dd { margin: 0; color: var(--text-muted); }
.guide-sources ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; }
.guide-disclaimer { padding: 14px 16px; border-radius: var(--bam-radius-md); background: var(--surface-subtle); color: var(--text-muted); font-size: 14px !important; line-height: 1.55; }
@media (max-width: 1080px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .guide-toc { position: static; max-height: none; }
  .guide-toc details:not([open]) ol { display: none; }
}
@media (max-width: 560px) {
  .guide-body { font-size: 16px; }
  .guide-summary, .guide-chart { padding: 16px; }
  .guide-section .guide-figure.is-small { float: none; width: auto; margin: 0 0 24px; }
  .guide-chart-row { grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 4px 10px; }
  .guide-chart-bar { grid-column: 1 / -1; grid-row: 2; }
  .guide-glossary dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .guide-table { font-size: 14px; }
  .guide-table th, .guide-table td { padding: 10px 12px; }
  /* Phones: wide tables scroll sideways instead of crushing each cell to a few letters, and a soft edge shadow
     shows there is more to the right (the shadows are covered by the scrolling background at either end). */
  .guide-table :is(th, td) { min-width: 124px; }
  .guide-table :is(th, td):first-child { min-width: 108px; }
  .guide-table-wrap { background:
    linear-gradient(to right, var(--surface) 40%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 16%, transparent), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 16%, transparent), transparent) right center / 12px 100% no-repeat scroll,
    var(--surface); }
  .guide-table caption { position: sticky; left: 0; }
  /* Key figures keep a value and its unit together ("2,60–5,50 €", "10 mg/kg"). */
  .guide-facts dd { font-size: 24px; text-wrap: balance; }
  .hub-facts div { grid-template-columns: max-content minmax(0, 1fr); }
  .hub-facts dd { white-space: nowrap; }
  .hub-bars li { grid-template-columns: minmax(0, 1fr) 4.6em; gap: 4px 8px; }
  .hub-bars li .hub-bar { grid-column: 1 / -1; grid-row: 2; }
  .course-page-cta { padding-top: 40px; padding-bottom: 40px; }
}


/* Guides & articles (src/guide-pages.js): the hub's topic tree and the topics' card grids. */
.guide-hub { padding-bottom: 24px; }
.guide-hub-topic { padding-top: 32px; padding-bottom: 32px; scroll-margin-top: 96px; }
.guide-hub-topic h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.guide-hub-topic h2 .ti { color: var(--accent); }
/* Hub cards (2026-11-09): a photo, a worked example as a small chart and a "did you know", the whole card is the link. */
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hub-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--bam-panel-sheen), var(--surface); transition: transform var(--bam-duration) var(--bam-ease), box-shadow var(--bam-duration) var(--bam-ease), border-color var(--bam-duration) var(--bam-ease); }
.hub-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.hub-card:has(.course-card-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.hub-card .course-card-link { color: inherit; }
.hub-card .course-card-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.hub-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-subtle); }
.hub-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s var(--bam-ease), opacity .45s var(--bam-ease); }
.hub-card:hover .hub-card-media > img, .hub-card:hover .hub-mosaic img { transform: scale(1.06); }
.hub-card-icon { position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--bam-radius-md); background: var(--surface); color: var(--accent); font-size: 22px; box-shadow: var(--shadow-card); }
.hub-card-badge { position: absolute; top: 14px; left: 14px; background: var(--surface); }
.hub-card-blank { width: 100%; height: 100%; display: grid; place-items: center; color: var(--accent); font-size: 56px; background: var(--accent-soft); }
.hub-mosaic { width: 100%; height: 100%; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.hub-mosaic img:first-child { grid-row: span 2; }
.hub-mosaic.is-portrait img { object-position: top; }
.hub-covers { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 18px 20px 10px; background: var(--accent-soft); }
.hub-covers img { width: 30%; height: auto; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow-card); transition: transform var(--bam-duration) var(--bam-ease); }
.hub-covers img:nth-child(1) { transform: rotate(-7deg) translateX(14px); }
.hub-covers img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-6px); }
.hub-covers img:nth-child(3) { transform: rotate(7deg) translateX(-14px); }
.hub-card:hover .hub-covers img:nth-child(1) { transform: rotate(-12deg) translateX(-2px); }
.hub-card:hover .hub-covers img:nth-child(3) { transform: rotate(12deg) translateX(2px); }
.hub-pair { position: relative; width: 100%; height: 100%; display: block; }
.hub-pair img { position: absolute; inset: 0; }
.hub-pair .is-after { opacity: 0; }
.hub-card:hover .hub-pair .is-after, .hub-card:focus-within .hub-pair .is-after { opacity: 1; }
.hub-pair-tag { position: absolute; top: 14px; right: 14px; transition: opacity var(--bam-duration) var(--bam-ease); }
.hub-pair-tag.is-after-tag { opacity: 0; }
.hub-card:hover .hub-pair-tag, .hub-card:focus-within .hub-pair-tag { opacity: 0; }
.hub-card:hover .hub-pair-tag.is-after-tag, .hub-card:focus-within .hub-pair-tag.is-after-tag { opacity: 1; }
.hub-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }
.hub-card h3 { margin: 0; font-size: 21px; line-height: 1.2; }
.hub-card-text { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.hub-card-go { margin-top: auto; align-self: flex-end; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--bam-radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 18px; transition: transform var(--bam-duration) var(--bam-ease), background var(--bam-duration) var(--bam-ease), color var(--bam-duration) var(--bam-ease); }
.hub-card:hover .hub-card-go { transform: translateX(4px); background: var(--accent); color: var(--surface); }
.hub-card-fact { margin: 0; display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--bam-radius-md); background: var(--accent-soft); color: var(--text); font-size: 13px; line-height: 1.5; }
.hub-card-fact .ti { flex: 0 0 auto; margin-top: 1px; color: var(--accent); font-size: 18px; }
.hub-card-fact strong { color: var(--accent); }
.hub-viz { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface); }
.hub-viz-title { margin: 0 0 10px; color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
.hub-viz-title > span:first-child { margin-right: 4px; padding: 2px 8px; border-radius: var(--bam-radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hub-viz-total strong { float: right; color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.hub-bars { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.hub-bars li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 4.6em; align-items: center; gap: 8px; font-size: 12px; line-height: 1.3; }
.hub-bar-label { min-width: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.hub-bars li.is-highlight .hub-bar-label { color: var(--text); font-weight: 700; }
.hub-bar-value { text-align: right; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-bar { width: 100%; height: 10px; display: block; overflow: hidden; border-radius: var(--bam-radius-pill); }
.hub-bar-stack { height: 14px; }
.hub-bar-track { fill: var(--surface-subtle); }
.hub-bar-fill { fill: color-mix(in srgb, var(--accent) 55%, var(--surface)); transform-box: fill-box; transform-origin: left center; transition: fill var(--bam-duration) var(--bam-ease); }
.hub-bars li.is-highlight .hub-bar-fill, .hub-card:hover .hub-bars .hub-bar-fill { fill: var(--accent); }
.hub-bar-stack .tone-0, .hub-dot.tone-0 { fill: var(--accent); background: var(--accent); }
.hub-bar-stack .tone-1, .hub-dot.tone-1 { fill: color-mix(in srgb, var(--accent) 70%, var(--surface)); background: color-mix(in srgb, var(--accent) 70%, var(--surface)); }
.hub-bar-stack .tone-2, .hub-dot.tone-2 { fill: color-mix(in srgb, var(--accent) 45%, var(--surface)); background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.hub-bar-stack .tone-3, .hub-dot.tone-3 { fill: color-mix(in srgb, var(--accent) 25%, var(--surface)); background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.hub-legend { margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; list-style: none; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.hub-legend-rows { grid-template-columns: 1fr; }
.hub-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hub-legend strong { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: var(--bam-radius-pill); }
.hub-scale { height: 14px; }
.hub-scale-step { transform-box: fill-box; transform-origin: left center; }
.hub-scale-step.step-0, .hub-dot.step-0 { fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.hub-scale-step.step-1, .hub-dot.step-1 { fill: color-mix(in srgb, var(--accent) 28%, var(--surface)); background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.hub-scale-step.step-2, .hub-dot.step-2 { fill: color-mix(in srgb, var(--accent) 40%, var(--surface)); background: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.hub-scale-step.step-3, .hub-dot.step-3 { fill: color-mix(in srgb, var(--accent) 54%, var(--surface)); background: color-mix(in srgb, var(--accent) 54%, var(--surface)); }
.hub-scale-step.step-4, .hub-dot.step-4 { fill: color-mix(in srgb, var(--accent) 68%, var(--surface)); background: color-mix(in srgb, var(--accent) 68%, var(--surface)); }
.hub-scale-step.step-5, .hub-dot.step-5 { fill: color-mix(in srgb, var(--accent) 84%, var(--surface)); background: color-mix(in srgb, var(--accent) 84%, var(--surface)); }
.hub-scale-step.step-6, .hub-dot.step-6 { fill: var(--accent); background: var(--accent); }
.hub-scale-ends { margin: 4px 0 0; display: flex; justify-content: space-between; color: var(--text-subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.hub-viz-drawing { display: flex; align-items: center; gap: 14px; }
.hub-drawing { flex: 0 0 96px; transition: transform .6s var(--bam-ease); }
.hub-card:hover .hub-drawing { transform: rotate(30deg); }
.hub-viz-drawing .hub-viz-title { margin: 0; }
.hub-facts { margin: 0; display: grid; gap: 8px; }
.hub-facts div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface); }
.hub-facts dd { grid-column: 1; grid-row: 1; margin: 0; color: var(--accent); font-size: 18px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hub-facts dt { grid-column: 2; grid-row: 1; }
.hub-facts dt { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.hub-avatars { margin: 0; padding: 0 0 0 10px; display: flex; list-style: none; }
.hub-avatars li { margin-left: -10px; transition: transform var(--bam-duration) var(--bam-ease); }
.hub-avatars img { width: 40px; height: 40px; display: block; border: 2px solid var(--surface); border-radius: var(--bam-radius-pill); object-fit: cover; object-position: top; background: var(--surface-subtle); }
.hub-card:hover .hub-avatars li { transform: translateX(6px); }
.hub-card:hover .hub-avatars li:first-child { transform: none; }
/* The bars grow in as a card scrolls into view where the browser can tie an animation to scrolling. */
@keyframes hub-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hub-bar-fill, .hub-scale-step { animation: hub-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card, .hub-card-media img, .hub-card-go, .hub-drawing, .hub-avatars li, .hub-covers img, .hub-pair-tag { transition: none; }
  .hub-card:hover, .hub-card:hover .hub-card-media > img, .hub-card:hover .hub-mosaic img, .hub-card:hover .hub-drawing, .hub-card:hover .hub-card-go, .hub-card:hover .hub-avatars li { transform: none; }
}
@media (max-width: 980px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Under an article there are only a few cards: they sit in the middle instead of leaving an empty column. */
.course-page-more:has(.hub-grid-related) > h2 { text-align: center; }
.hub-grid.hub-grid-related { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 380px)); justify-content: center; }
@media (max-width: 640px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-card-body { padding: 18px; }
}

/* Technical calculators: result tables (stages, baker's percentages), short ingredient lines and the cutting plan drawing. */
.tool-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px; }
.tool-table caption { margin-bottom: 8px; font-weight: 700; text-align: left; }
.tool-table th, .tool-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.tool-table thead th { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.tool-table td { font-variant-numeric: tabular-nums; }
.tool-output .tool-table { margin-top: 0; }
.tool-line.tool-line-short { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 44px; }
.tool-cut-drawing { max-width: 280px; margin: 20px auto 0; }
.tool-cut-svg { display: block; width: 100%; height: auto; }
.tool-cut-cake { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.tool-cut-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
@media (max-width: 560px) {
  .tool-line.tool-line-short { grid-template-columns: minmax(0, 1fr) 44px; }
  .tool-table { font-size: 13px; }
}

/* Public recipe pages (src/recipe-pages.js) */
.recipe-photo { margin: 0; }
.recipe-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; display: block; object-fit: cover; border-radius: var(--bam-radius-lg); background: var(--surface-subtle); box-shadow: var(--shadow-card); }
.recipe-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; gap: 48px; }
.recipe-ingredients { padding: 24px; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); }
.recipe-body h2 { margin: 0 0 16px; font-size: 26px; }
.recipe-group-title { margin: 20px 0 10px; font-size: 16px; }
.recipe-ingredient-list { margin: 0; padding: 0; list-style: none; }
.recipe-ingredient-list li { padding: 9px 0; border-bottom: 1px solid var(--border); line-height: 1.45; }
.recipe-ingredient-list li:last-child { border-bottom: 0; }
.recipe-step-list { margin: 0 0 8px; padding-left: 26px; display: grid; gap: 14px; line-height: 1.6; }
.recipe-step-list li::marker { color: var(--accent); font-weight: 700; }
.recipe-app h2 { margin: 0 0 10px; }
.recipe-app p { max-width: 640px; margin: 0 auto 20px; }
.recipe-tips { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--bam-gold-line); border-radius: var(--bam-radius-lg); background: var(--accent-soft); }
.recipe-tips h2 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 22px; }
.recipe-tips h2 i { color: var(--accent); }
.recipe-tips ul { margin: 0; padding: 0; display: grid; gap: 14px; list-style: none; }
.recipe-tips p { margin: 0 0 4px; line-height: 1.55; }
.recipe-tips small { color: var(--text-muted); font-size: 13px; }
@media (max-width: 900px) {
  .recipe-body { grid-template-columns: 1fr; gap: 28px; }
  .recipe-photo { order: -1; }
}

/* The free photo lesson (src/photo-course-page.js): BAM before/after pair, the diagram (same shapes as the app), the lesson list. */
.photo-pair { margin: 24px 0 10px; max-width: 720px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-pair-item { position: relative; margin: 0; overflow: hidden; border-radius: var(--bam-radius-lg); background: var(--surface-subtle); }
.photo-pair-item img { width: 100%; height: auto; display: block; }
.photo-pair-item figcaption { position: absolute; left: 12px; top: 12px; }
.photo-pair-tag { display: inline-block; padding: 4px 12px; border-radius: var(--bam-radius-pill); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.photo-pair-tag.is-after { background: var(--bam-gold-gradient); color: var(--bam-on-gold); }
.photo-pair-note { max-width: 720px; margin: 0 0 8px; color: var(--text-muted); font-size: 14px; }
.photo-figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 20px; padding: 18px; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); }
.photo-figure-art svg { width: 100%; height: auto; display: block; }
.photo-figure ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; line-height: 1.55; }
.photo-figure .pc-wall { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.photo-figure .pc-window { fill: var(--accent-soft); stroke: var(--border-strong); stroke-width: 1.5; }
.photo-figure .pc-ray { fill: none; stroke: var(--bam-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 8; }
.photo-figure .pc-table { fill: var(--border-strong); }
.photo-figure .pc-cake { fill: var(--accent); }
.photo-figure .pc-cream { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.photo-figure .pc-reflector { fill: var(--surface); stroke: var(--text-muted); stroke-width: 2; }
.photo-figure .pc-mark { fill: var(--accent); }
.photo-figure .pc-num { fill: var(--surface); font: 700 12px sans-serif; text-anchor: middle; }
.photo-check { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.photo-check li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--bam-radius-pill); background: var(--surface); font-weight: 600; }
.photo-check .ti { color: var(--accent); }
.photo-lessons { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.photo-lesson { overflow: hidden; display: grid; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); }
.photo-lesson img { width: 100%; height: auto; aspect-ratio: 4 / 3; display: block; object-fit: cover; }
.photo-lesson span { padding: 14px 16px 16px; display: grid; gap: 6px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.photo-lesson small { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.photo-lesson strong { color: var(--text); font-size: 18px; }
@media (max-width: 900px) { .photo-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .photo-figure { grid-template-columns: 1fr; } .photo-lessons { grid-template-columns: 1fr; } }

/* Allergen label generator (src/tool-pages.js labelForm): allergen chips, traces and the label preview. */
.tool-lines-spaced { margin-top: 20px; }
.tool-note-tight { margin: 0 0 4px; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chip { position: relative; display: inline-flex; }
.tool-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--bam-radius-pill); color: var(--text-muted); font-size: 13px; cursor: pointer; }
.tool-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 600; }
.tool-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool-more { margin-top: 8px; }
.tool-more summary { min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; list-style: none; }
.tool-more summary::-webkit-details-marker { display: none; }
.tool-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--bam-radius-sm); }
.tool-more[open] summary i { transform: rotate(180deg); }
.tool-output-title { margin: 0; font-size: 18px; }
.tool-label { display: grid; gap: 8px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--bam-radius-sm); background: var(--surface); font-size: 14px; line-height: 1.5; }
.tool-label p { margin: 0; }
.tool-label-name { font-family: var(--bam-serif); font-size: 20px; line-height: 1.2; }
.tool-output [data-copy-label] { justify-self: start; }
@media (prefers-reduced-motion: no-preference) {
  .tool-chip span { transition: background-color 0.15s ease, border-color 0.15s ease; }
}

/* Guides hub (2026-11-10): "where do I start" cards and the compact calculators topic. */
.hub-start { max-width: 1040px; margin: 32px auto 0; }
.hub-start-title { margin: 0 0 14px; color: var(--text-subtle); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.hub-start-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hub-start-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); text-align: left; }
.hub-start-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.hub-start-card:has(.course-card-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.hub-start-card .course-card-link { color: var(--text); font-weight: 700; font-size: 16px; line-height: 1.25; }
.hub-start-card .course-card-link::after { content: ""; position: absolute; inset: 0; }
.hub-start-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--bam-radius-md); background: var(--accent-soft); color: var(--accent); font-size: 22px; }
.hub-start-body { display: grid; gap: 4px; min-width: 0; }
.hub-start-body > span { color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.hub-start-go { margin-left: auto; color: var(--accent); font-size: 18px; }
.hub-grid.hub-grid-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.hub-grid-compact .hub-card-media { aspect-ratio: auto; height: 0; overflow: visible; background: none; }
.hub-grid-compact .hub-card-media > :not(.hub-card-icon) { display: none; }
.hub-grid-compact .hub-card-icon { top: 18px; bottom: auto; left: 20px; width: 40px; height: 40px; font-size: 20px; box-shadow: none; background: var(--accent-soft); }
.hub-grid-compact .hub-card-body { padding: 18px 20px 18px 74px; gap: 8px; }
.hub-grid-compact .hub-card h3 { font-size: 18px; }
.hub-grid-compact .hub-card-fact, .hub-grid-compact .hub-viz { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hub-start-card { transition: border-color var(--bam-duration) var(--bam-ease), box-shadow var(--bam-duration) var(--bam-ease); }
}
@media (max-width: 860px) {
  .hub-start-list { grid-template-columns: minmax(0, 1fr); }
}

/* Checklist as a PDF by e-mail (src/guide-pages.js checklistForm, 2026-11-11). */
.guide-pdf { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 24px; border: 1px solid var(--bam-gold-line); border-radius: var(--bam-radius-lg); background: var(--accent-soft); scroll-margin-top: 96px; }
.guide-pdf-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--bam-radius-md); background: var(--surface); color: var(--accent); font-size: 28px; }
.guide-pdf h2 { margin: 0 0 6px; }
.guide-pdf-body > p { margin: 0 0 16px; color: var(--text-muted); }
.guide-pdf-form { display: grid; gap: 12px; }
.guide-pdf-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.guide-pdf-field input { box-sizing: border-box; width: 100%; max-width: 420px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--bam-radius-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 400; }
.guide-pdf-field input:focus-visible, .guide-pdf-consent input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-pdf-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.guide-pdf-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.guide-pdf-consent a { color: var(--accent); }
.guide-pdf-form .button { justify-self: start; }
.guide-pdf-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.guide-pdf-status { margin: 0; font-size: 14px; font-weight: 600; }
.guide-pdf-status.is-done { color: var(--success); }
.guide-pdf-status.is-error { color: var(--danger); }
.guide-pdf-form.is-sent :is(.guide-pdf-field, .guide-pdf-consent, .button) { display: none; }
@media (max-width: 560px) {
  .guide-pdf { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .guide-pdf-form .button { justify-self: stretch; justify-content: center; }
}

/* Member cards and profiles (src/member-pages.js): the whole card opens the profile (its name link stretches over it). */
.member-total { margin-top: 10px; color: var(--text-subtle); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.member-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px;
  border: 1px solid var(--border); border-radius: var(--bam-radius-lg); background: var(--surface); box-shadow: var(--shadow-card);
  transition: transform var(--bam-duration) var(--bam-ease), border-color var(--bam-duration) var(--bam-ease); }
.member-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.member-card .course-card-link { color: var(--text); text-decoration: none; }
.member-card .course-card-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.member-card:has(.course-card-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.member-card h2 { margin: 2px 0 4px; font-size: 21px; line-height: 1.2; }
.member-card-body p { margin: 4px 0 0; }
.member-avatar { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; background: var(--accent-soft); color: var(--accent);
  font-family: var(--bam-serif); font-size: 26px; font-weight: 700; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.member-place, .member-counts { color: var(--text-muted); font-size: 14px; }
.member-title { color: var(--accent); font-size: 14px; font-weight: 700; }
.member-detail { font-size: 14px; }
.member-motto { color: var(--text-muted); font-family: var(--bam-serif); font-size: 15px; font-style: italic; }
.member-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; color: var(--text-muted); font-size: 14px; }
.member-hero { padding-bottom: 24px; }
.member-profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 18px; }
.member-profile-head .member-avatar { width: 128px; height: 128px; font-size: 44px; }
.member-profile-head h1 { margin: 6px 0 6px; }
.member-profile-head p { margin: 2px 0; }
.member-quote { margin: 0 0 18px; padding: 14px 20px; border-left: 3px solid var(--accent); border-radius: var(--bam-radius-sm); background: var(--accent-soft);
  font-family: var(--bam-serif); font-size: 20px; font-style: italic; }
.member-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.member-section { padding-top: 24px; padding-bottom: 24px; }
.member-section h2 { margin: 0 0 18px; }
.member-creations { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.member-creation { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface); }
.member-creation img, .member-creation-empty { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--surface-subtle); color: var(--text-muted); font-size: 32px; }
.member-creation figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
.member-creation figcaption span { color: var(--accent); white-space: nowrap; }
.member-ads { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.member-ads li { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--bam-radius-md); background: var(--surface); }
.member-ads p { margin: 6px 0; color: var(--text-muted); }
.member-ads small { color: var(--text-subtle); }
.member-ad-type { display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: var(--bam-radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.member-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.member-chip { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--bam-radius-pill); background: var(--surface); font-size: 14px; font-weight: 600; }
@media (max-width: 560px) {
  .member-card { padding: 16px; gap: 12px; }
  .member-card .member-avatar { width: 56px; height: 56px; font-size: 20px; }
  .member-profile-head { gap: 16px; }
  .member-profile-head .member-avatar { width: 96px; height: 96px; font-size: 34px; }
  .member-creations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .member-card { transition: none; } .member-card:hover { transform: none; } }