/* Brodeur's Bistro · Staff Training Library — house styles
   Brand: red #C8102E, black #111, cream card #F5EFE6, body white. */

/* Brand display face — Bronzetti Bold. Loaded once and referenced
   anywhere we want the brand headline look (H1/H2/H3 and the landing
   page hero). Falls back to Playfair Display, then to a generic serif. */
@font-face {
  font-family: "Bronzetti";
  src: url("/static/fonts/Bronzetti-Bold.otf") format("opentype");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   BRODEUR'S BISTRO — Design Tokens (Direction A · Bistro Standard)
   Lifted from the design-handoff package at allergy_rush_extracted/
   design_handoff/tokens/design-tokens.css. Keeps the legacy unprefixed
   names (--shadow-sm, --shadow-md, --r) as aliases so the existing
   rules in this stylesheet keep working untouched.
   ========================================================================= */
:root {
  /* ---- BRAND ----
     Two real colors. Red is structural (action, status, hazard, brand);
     don't use red as a fill on big areas. Black is the topbar and the
     headline color. Everything else is paper or grey. */
  --bb-red:        #C8102E;
  --bb-red-dark:   #9E0B23;
  --bb-red-deep:   #4A0D14;   /* allergen banner bg, deep accents */
  --bb-black:      #111111;
  --bb-ink:        #1F1F1F;

  /* ---- PAPER ----
     The page never goes pure-white. Cream stack:
     --bb-shell (page bg) → --bb-cream (callouts) → --bb-paper (cards). */
  --bb-shell:      #FAF7F1;
  --bb-cream:      #F5EFE6;
  --bb-paper:      #FFFFFF;
  --bb-line:       #E5DFD3;

  /* ---- GREYS ---- */
  --bb-muted:      #6B6660;
  --bb-mute-dark:  #cfcfcf;

  /* ---- SEMANTIC ---- */
  --bb-good:       #1F7A3F;
  --bb-good-soft:  #dff5e2;
  --bb-bad:        #B0271A;
  --bb-bad-soft:   #fbe1de;
  --bb-warn-bg:    #fff8e6;
  --bb-warn-line:  #f0d27a;

  /* ---- MEDAL (leaderboard rank-1/2/3 only) ---- */
  --bb-gold:       #d4a868;
  --bb-silver:     #a8a8a8;
  --bb-bronze:     #b07448;

  /* ---- ELEVATION ----
     Only three shadows in the whole system. No inset shadows. No glass. */
  --bb-shadow-sm:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --bb-shadow-md:  0 4px 14px rgba(0,0,0,.07);
  --bb-shadow-lg:  0 6px 22px rgba(0,0,0,.28);

  /* ---- RADII ----
     Restrained. Nothing in this brand is "bubbly." */
  --bb-r:          6px;
  --bb-r-sm:       4px;
  --bb-r-pill:     99px;

  /* ---- TYPOGRAPHY ---- */
  --bb-font-logo:    "Bronzetti", "Oswald", "Big Shoulders Display",
                     Impact, "Arial Narrow", sans-serif;
  --bb-font-display: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bb-font-body:    "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bb-fs-h1:       40px;
  --bb-fs-h2:       22px;
  --bb-fs-h3:       16px;
  --bb-fs-body:     15px;
  --bb-fs-sm:       13px;
  --bb-fs-xs:       12px;
  --bb-fs-eyebrow:  12px;

  --bb-track-eyebrow:    0.18em;
  --bb-track-h1:        -0.01em;
  --bb-track-h2:         0.04em;
  --bb-track-caps:       0.08em;
  --bb-track-caps-tight: 0.04em;

  /* ---- SPACING ---- */
  --bb-sp-1: 4px;
  --bb-sp-2: 8px;
  --bb-sp-3: 12px;
  --bb-sp-4: 16px;
  --bb-sp-5: 22px;
  --bb-sp-6: 28px;
  --bb-sp-7: 36px;
  --bb-sp-8: 48px;

  /* ---- LEGACY ALIASES ----
     The unprefixed names are referenced throughout the rest of this
     stylesheet (.card, .stat, .modtile, etc.). Keep them as aliases
     of the new branded tokens so the migration is non-breaking. */
  --shadow-sm: var(--bb-shadow-sm);
  --shadow-md: var(--bb-shadow-md);
  --r:         var(--bb-r);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bb-shell);
  color: var(--bb-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bb-red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar (matches PDF header band) */
.topbar {
  background: var(--bb-black);
  color: #fff;
  border-bottom: 3px solid var(--bb-red);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar .brand {
  display: flex; align-items: baseline; gap: 14px;
  font-family: "Bronzetti", "Playfair Display", Georgia, serif;
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 16px;
}
.topbar .brand .fleur { color: var(--bb-red); font-size: 18px; }
.topbar .brand .lms {
  color: #cfcfcf; font-weight: 600; letter-spacing: 0.18em;
  font-family: "Bronzetti", "Playfair Display", Georgia, serif;
}
.topbar nav { display: flex; gap: 18px; align-items: center; }
.topbar nav a { color: #ddd; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; }
.topbar nav a:hover { color: #fff; text-decoration: none; }
.topbar .user { font-size: 13px; color: #aaa; }
.topbar .user-link { text-decoration: none; }
.topbar .user-link:hover .user { color: #fff; text-decoration: underline; }
.topbar form { display: inline; margin: 0; }
.topbar button.linklike {
  background: none; border: 0; color: #ddd; cursor: pointer;
  font: inherit; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
  padding: 0;
}
.topbar button.linklike:hover { color: #fff; }

/* "Mobile app →" link in the Flask topbar — points at the React SPA
   at /m/. Visually distinct so users know it's a sibling site rather
   than another section of the desktop LMS. */
.topbar .mobile-link {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.topbar .mobile-link:hover {
  background: var(--bb-red);
  border-color: var(--bb-red);
  text-decoration: none;
  color: #fff;
}

/* Topbar Admin dropdown menu. The trigger looks like the other nav
   links; the menu opens below as a small card with 2-line entries. */
.topnav-drop { position: relative; display: inline-block; }
.topnav-drop-trigger {
  background: none; border: 0; color: #ddd; cursor: pointer;
  font: inherit; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0; display: inline-flex; align-items: center; gap: 4px;
}
.topnav-drop-trigger:hover { color: #fff; }
.topnav-drop-trigger .caret { font-size: 11px; opacity: 0.7; }
.topnav-drop.open .topnav-drop-trigger { color: #fff; }
.topnav-drop.open .topnav-drop-trigger .caret { transform: translateY(1px); }
.topnav-drop-menu {
  display: none; position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 280px; background: #fff;
  border: 1px solid var(--bb-line); border-top: 3px solid var(--bb-red);
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  padding: 4px 0; z-index: 100;
}
.topnav-drop.open .topnav-drop-menu { display: block; }
.topnav-drop-menu a {
  display: block; padding: 10px 16px;
  color: var(--bb-ink) !important;
  font-size: 13px;
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid #f0ece4;
  text-decoration: none;
}
.topnav-drop-menu a:last-child { border-bottom: 0; }
.topnav-drop-menu a:hover { background: var(--bb-cream); }
.topnav-drop-menu a:hover .lbl { color: var(--bb-red); }
.topnav-drop-menu a .lbl {
  display: block; font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em;
  color: var(--bb-ink);
}
.topnav-drop-menu a .sub {
  display: block; font-size: 11px; color: var(--bb-muted); margin-top: 2px;
}

/* Page frame */
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px; }
.wrap.narrow { max-width: 760px; }
.wrap.wide   { max-width: 100%; padding: 24px 24px; }

/* Headings — Bronzetti is the brand display face for every H tag
   site-wide (H1 through H6) plus the topbar brand block below.
   Sizes + tracking come from the design tokens so the system stays
   coherent if anyone tunes the scale later. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--bb-font-logo);
  color: var(--bb-black);
}
h1 {
  font-size: var(--bb-fs-h1); font-weight: 800; line-height: 1.05;
  letter-spacing: var(--bb-track-h1);
  margin: 0 0 8px; text-transform: uppercase;
}
h2 {
  font-size: var(--bb-fs-h2); font-weight: 700;
  margin: 28px 0 10px; color: var(--bb-red);
  text-transform: uppercase; letter-spacing: var(--bb-track-h2);
}
h3 {
  font-size: var(--bb-fs-h3); font-weight: 700; margin: 18px 0 6px;
  letter-spacing: -0.005em;
}
h4 { font-size: 14px; font-weight: 700; margin: 14px 0 4px; letter-spacing: -0.005em; }
h5 { font-size: 13px; font-weight: 700; margin: 12px 0 4px; letter-spacing: -0.005em; }
h6 { font-size: 12px; font-weight: 700; margin: 10px 0 4px; letter-spacing: -0.005em; }

/* Eyebrow — the red UPPERCASE 12px caps tracked 0.18em above every
   page title. Direction-A spec calls for weight 800 to read with
   the brand's printed-card density. */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--bb-track-eyebrow);
  font-size: var(--bb-fs-eyebrow); font-weight: 800;
  color: var(--bb-red); margin-bottom: 6px;
}

.muted { color: var(--bb-muted); }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.card.cream { background: var(--bb-cream); border-color: var(--bb-line); }
.card.dark  { background: var(--bb-black); color: #fff; border: 0; }
.card.dark h2, .card.dark h3, .card.dark h1 { color: #fff; }

/* Module-template style facts row */
.facts {
  width: 100%; border-collapse: collapse; margin: 14px 0 24px;
  border-top: 2px solid var(--bb-black);
  border-bottom: 2px solid var(--bb-black);
}
.facts th, .facts td {
  padding: 10px 14px; text-align: left; vertical-align: top;
  font-size: 13px;
}
.facts thead th {
  background: var(--bb-black); color: #fff;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px;
}
.facts tbody td { background: var(--bb-cream); font-weight: 600; }

/* Numbered procedure (red squares) */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 1px;
  background: #fff;
  border: 1px solid var(--bb-line);
  border-radius: var(--r);
  overflow: hidden;
}
.steps li + li { margin-top: 8px; }
.steps .n {
  background: var(--bb-red); color: #fff; font-weight: 800;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  align-self: stretch;
}
.steps .body { padding: 12px 14px 12px 0; font-size: 14px; }
.steps .body strong { display: block; font-size: 13px; letter-spacing: 0.06em; margin-bottom: 2px; }

/* Bullets */
.bullets { padding-left: 20px; margin: 0; }
.bullets li { margin-bottom: 6px; }
.bullets.cream-block {
  background: var(--bb-cream); padding: 16px 16px 16px 36px;
  border-radius: var(--r); border: 1px solid var(--bb-line);
}

/* Watch-for callout */
.watchfor {
  background: var(--bb-red); color: #fff;
  padding: 12px 16px; border-radius: var(--r);
  font-weight: 700; letter-spacing: 0.04em; font-size: 13px;
  display: flex; gap: 12px; align-items: flex-start;
  text-transform: uppercase;
}
.watchfor::before { content: "!"; flex: 0 0 22px; height: 22px; line-height: 22px;
  background: #fff; color: var(--bb-red); border-radius: 4px; text-align: center; }

/* Italic note */
.note { font-style: italic; color: var(--bb-muted); font-size: 13.5px; margin-top: 12px; }

/* Stat strip */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 18px 0 24px;
}
.stat {
  background: #fff; border: 1px solid var(--bb-line); border-radius: var(--r);
  padding: 14px 16px;
}
.stat .n { font-size: 28px; font-weight: 800; color: var(--bb-red); line-height: 1; }
.stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bb-muted); margin-top: 4px; }

/* Category headers */
h2.cat-head { display: flex; align-items: baseline; gap: 12px; margin-top: 36px; }
h2.cat-head .cat-sub { font-size: 13px; color: var(--bb-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-style: italic; }

/* Module list / dashboard cards */
.modlist { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .modlist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .modlist { grid-template-columns: 1fr 1fr 1fr; } }
.modtile {
  background: #fff; border: 1px solid var(--bb-line); border-radius: var(--r);
  padding: 20px; display: block; color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.modtile:hover { border-color: var(--bb-red); box-shadow: var(--shadow-md); text-decoration: none; }
.modtile .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bb-muted); }
.modtile h3 { margin: 4px 0 8px; font-size: 18px; }
.modtile p { color: var(--bb-muted); font-size: 14px; margin: 0 0 14px; }
.modtile .status {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  display: inline-block; padding: 4px 8px; border-radius: 4px;
}
/* Module lifecycle pills — four states, ordered low-to-high:
   NEW (untouched) → IN PROGRESS (opened or attempted) →
   COMPLETED (quiz passed) → SIGNED OFF (manager signed).
   Legacy aliases (.todo, .passed, .failed) kept so any pre-existing
   markup keeps rendering until it's migrated. */
.status.new { background: #fff8e6; color: #8a6a10; border: 1px solid #f0d27a; }
.status.inprog { background: var(--bb-cream); color: var(--bb-ink); border: 1px solid var(--bb-line); }
.status.completed { background: #dff5e2; color: var(--bb-good); border: 1px solid #9fd9b2; }
.status.todo { background: #fff8e6; color: #8a6a10; border: 1px solid #f0d27a; }   /* legacy alias of .new */
.status.cs-status { background: var(--bb-red); color: #fff; }

/* "Coming Soon" placeholder module tile (dashboard) — non-clickable, red bordered */
.modtile-coming-soon {
  border: 2px solid var(--bb-red);
  background: repeating-linear-gradient(
    45deg,
    rgba(200, 16, 46, 0.04),
    rgba(200, 16, 46, 0.04) 10px,
    rgba(200, 16, 46, 0.08) 10px,
    rgba(200, 16, 46, 0.08) 20px
  );
  cursor: not-allowed;
}
.modtile-coming-soon:hover {
  border-color: var(--bb-red);
  box-shadow: none;
  text-decoration: none;
}
.modtile-coming-soon .label {
  color: var(--bb-red);
  font-weight: 800;
  letter-spacing: 0.18em;
}
.modtile-coming-soon h3 { color: var(--bb-red); }
.status.passed { background: #dff5e2; color: var(--bb-good); }
.status.signed { background: var(--bb-good); color: #fff; }
.status.failed { background: #fbe1de; color: var(--bb-bad); }

/* "New assignment" tile highlight — same modtile, but with a subtle
   red glow + gold "NEW" ribbon. Wears off on the next dashboard visit
   once the seen_at stamp lands. */
.modtile.modtile-new {
  position: relative;
  border-color: var(--bb-red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.10);
}
.modtile-new .new-badge {
  position: absolute;
  top: -10px; right: 14px;
  background: var(--bb-red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: 12px;
  box-shadow: var(--shadow-md);
}

/* Allergy Rush practice-game CTA on the staff dashboard. Dark block
   with a red square mark + caret. Hovers brighten slightly. */
.game-cta {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px; align-items: center;
  background: var(--bb-black);
  color: #fff;
  border-radius: var(--r);
  padding: 14px 18px;
  margin: 18px 0 12px;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  border-left: 6px solid var(--bb-red);
  transition: background 120ms;
}
.game-cta:hover  { background: #1a1a1a; text-decoration: none; }
.game-cta:focus  { outline: 3px solid var(--bb-red); outline-offset: 2px; }
.game-cta-mark {
  width: 44px; height: 44px;
  background: var(--bb-red);
  border-radius: 6px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 22px;
  color: #fff;
}
.game-cta-body { min-width: 0; }
.game-cta-eye {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-red);
  font-weight: 800;
}
.game-cta-title {
  font-size: 18px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-top: 2px;
}
.game-cta-sub {
  font-size: 13px;
  color: #cfcfcf;
  font-style: italic;
  margin-top: 4px;
}
.game-cta-arrow {
  font-size: 18px;
  color: #fff;
  opacity: .9;
}

/* "Open every recipe card" task card. Shown on the employee
   dashboard and at the top of /recipes for users with a
   FOH/HOH track. Animated progress bar with a contextual colour. */
.recipe-task {
  background: #fff; border: 1px solid var(--bb-line);
  border-left: 6px solid var(--bb-red);
  border-radius: var(--r);
  padding: 14px 18px;
  margin: 18px 0 8px;
  box-shadow: var(--shadow-md);
}
.recipe-task-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.recipe-task-icon { font-size: 22px; line-height: 1; }
.recipe-task-title { font-weight: 700; flex: 1; font-size: 15px; }
.recipe-task-pct {
  font-size: 18px; font-weight: 800;
  color: var(--bb-red);
}
.recipe-task-bar {
  background: #eee; height: 10px; border-radius: 99px; overflow: hidden;
}
.recipe-task-fill {
  height: 100%; background: var(--bb-red);
  transition: width 200ms ease-out;
  border-radius: 99px;
}
.recipe-task-meta { font-size: 13px; margin-top: 8px; color: var(--bb-ink); }
.recipe-task-meta a { color: var(--bb-red); font-weight: 600; }
.recipe-task-foot {
  font-size: 11px; color: var(--bb-muted); margin-top: 4px;
  font-style: italic; line-height: 1.5;
}

/* Recipe-tile state: "viewed" = green check, slightly muted.
   "required-but-unviewed" = subtle red dotted outline so the user
   spots what they still need to open. */
.rxtile-viewed {
  background: linear-gradient(180deg, #f4faf3 0%, #fff 100%);
  border-color: var(--bb-good);
}
.rxtile-viewed .rxname { color: var(--bb-ink); opacity: 0.85; }
.rx-viewed {
  color: var(--bb-good); font-weight: 800;
  margin-left: 6px;
}
.rxtile-required {
  border-style: dashed;
  border-color: rgba(200, 16, 46, 0.4);
}
.rxtile-required:hover {
  border-style: solid;
}
/* The red "NEW" pill on unopened recipe tiles was retired per the
   manager — added visual noise. The .rxtile-viewed green hue + the
   .rxtile-required dashed border still differentiate states. */

/* Prep-tab station banner — visually separates "Prep Station" and
   "Line Station" groupings on /prep-recipes so the page mirrors the
   printed Weekly Prep Sheets. */
.prep-station {
  font-family: "Bronzetti", "Playfair Display", Georgia, serif;
  font-size: 24px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  background: var(--bb-black);
  padding: 10px 18px;
  border-left: 6px solid var(--bb-red);
  border-radius: var(--r);
  margin: 24px 0 8px;
}

/* "You have new training" banner shown above the dashboard tiles. */
.notify-card {
  display: flex; gap: 16px;
  background: #fff8e6;
  border: 1px solid #f0d27a;
  border-left: 6px solid var(--bb-red);
  border-radius: var(--r);
  padding: 16px 18px;
  margin: 18px 0 8px;
  box-shadow: var(--shadow-md);
}
.notify-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.notify-body { flex: 1; }
.notify-title {
  font-size: 16px; font-weight: 800;
  color: var(--bb-red); margin-bottom: 4px;
}
.notify-list { font-size: 14px; color: var(--bb-ink); line-height: 1.5; }
.notify-list .notify-item {
  color: var(--bb-ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(200, 16, 46, 0.4);
  text-underline-offset: 2px;
}
.notify-list .notify-item:hover { color: var(--bb-red); }
.notify-foot {
  font-size: 12px; color: var(--bb-muted); margin-top: 8px;
  font-style: italic;
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--bb-red); color: #fff;
  padding: 10px 18px; border-radius: var(--r);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px;
  border: 0; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--bb-red-dark); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--bb-black); border: 1px solid var(--bb-black); }
.btn.ghost:hover { background: var(--bb-black); color: #fff; }
.btn.small { padding: 6px 10px; font-size: 11px; }

/* Forms */
form .field { margin-bottom: 14px; }
form label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bb-muted); margin-bottom: 4px; font-weight: 700; }
form input[type=text], form input[type=email], form input[type=password],
form select, form textarea {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid var(--bb-line); border-radius: var(--r);
  background: #fff;
}
form input:focus, form select:focus, form textarea:focus {
  outline: 2px solid var(--bb-red); outline-offset: 1px; border-color: var(--bb-red);
}
form textarea { min-height: 110px; resize: vertical; font-family: inherit; }

.error {
  background: #fbe1de; color: var(--bb-bad); padding: 10px 14px;
  border-radius: var(--r); border: 1px solid #f3b9b1; margin-bottom: 14px;
  font-weight: 600; font-size: 14px;
}
.flash {
  background: var(--bb-cream); padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--bb-line); margin-bottom: 14px; font-size: 14px;
}

/* Quiz */
.q { border: 1px solid var(--bb-line); border-radius: var(--r); padding: 18px; background: #fff; margin-bottom: 14px; }
.q .qnum { color: var(--bb-red); font-weight: 800; letter-spacing: 0.08em; }
.q .prompt { font-weight: 600; margin: 4px 0 12px; font-size: 16px; }
.q .choice { display: block; padding: 8px 10px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; }
.q .choice:hover { background: var(--bb-shell); }
.q .choice input { margin-right: 10px; }
.q.passed { border-color: var(--bb-good); }
.q.failed { border-left: 4px solid var(--bb-bad); }
.q.scenario { background: var(--bb-cream); }

.score-banner {
  padding: 18px 22px; border-radius: var(--r); margin-bottom: 18px;
  font-size: 16px; font-weight: 700;
}
.score-banner.pass { background: var(--bb-good); color: #fff; }
.score-banner.fail { background: var(--bb-bad); color: #fff; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--r); overflow: hidden; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--bb-line); }
.tbl th { background: var(--bb-cream); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bb-muted); }
.tbl tr:last-child td { border-bottom: 0; }

/* Leaderboard */
.lb-hero {
  display: flex; gap: 22px; align-items: center;
  padding: 22px 26px; margin-top: 18px;
  background: linear-gradient(135deg, #1a1a1a 0%, var(--bb-black) 100%);
  color: #fff; border: 0;
}
.lb-hero-medal { font-size: 56px; line-height: 1; flex-shrink: 0; }
.lb-hero-text { flex: 1; min-width: 0; }
.lb-hero-eyebrow { color: var(--bb-red); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; }
.lb-hero-name { font-size: 28px; font-weight: 800; line-height: 1.1; margin-top: 4px; color: #fff; }
.lb-hero-stats { font-size: 13px; color: #cfcfcf; margin-top: 6px; font-style: italic; }

.lb-grid {
  display: grid; gap: 16px; margin-top: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .lb-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lb-grid { grid-template-columns: 1fr 1fr 1fr; } }

.lb-card {
  background: #fff; border: 1px solid var(--bb-line); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.lb-cat {
  font-size: 14px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bb-red);
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--bb-line);
}
.lb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lb-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 4px; background: var(--bb-shell); }
.lb-row.rank-1 { background: linear-gradient(135deg, rgba(212,168,104,0.18) 0%, rgba(212,168,104,0.04) 100%); border-left: 3px solid #d4a868; }
.lb-row.rank-2 { background: linear-gradient(135deg, rgba(192,192,192,0.18) 0%, rgba(192,192,192,0.04) 100%); border-left: 3px solid #a8a8a8; }
.lb-row.rank-3 { background: linear-gradient(135deg, rgba(176,116,72,0.16) 0%, rgba(176,116,72,0.04) 100%); border-left: 3px solid #b07448; }
.lb-medal { font-size: 30px; line-height: 1; flex-shrink: 0; }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-weight: 700; font-size: 15px; color: var(--bb-black); line-height: 1.2; }
.lb-sub { font-size: 12px; color: var(--bb-muted); margin-top: 2px; }
.lb-sub strong { color: var(--bb-red); font-weight: 800; }
.lb-praise { font-size: 11px; color: var(--bb-muted); margin-top: 3px; font-style: italic; }

/* Recipe library */
.rx-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 18px;
  border-bottom: 2px solid var(--bb-line);
}
.rx-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 18px; font: inherit;
  font-size: 14px; font-weight: 700;
  color: var(--bb-muted); letter-spacing: 0.04em;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .12s, border-color .12s;
}
.rx-tab:hover { color: var(--bb-black); }
.rx-tab.active { color: var(--bb-red); border-bottom-color: var(--bb-red); }
.rx-tab .rx-tab-count {
  background: var(--bb-cream); color: var(--bb-muted);
  padding: 2px 8px; border-radius: 10px; font-size: 11px;
  font-weight: 700; letter-spacing: 0.04em;
}
.rx-tab.active .rx-tab-count { background: var(--bb-red); color: #fff; }
.rx-tab.rx-tab-zero { opacity: 0.45; }
.rx-section.hidden { display: none; }

.rx-search {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--bb-line); border-radius: var(--r);
  background: #fff; margin: 14px 0 8px;
}
.rx-search:focus { outline: 2px solid var(--bb-red); outline-offset: 1px; border-color: var(--bb-red); }
.rx-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-bottom: 16px;
}
.rxtile {
  background: #fff; border: 1px solid var(--bb-line); border-radius: var(--r);
  padding: 14px 16px; color: inherit; text-decoration: none; display: block;
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.rxtile:hover {
  border-color: var(--bb-red); box-shadow: var(--shadow-md);
  text-decoration: none; transform: translateY(-1px);
}
.rxtile .rxname { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--bb-black); }

/* "Coming soon" placeholder tile — items the bar has on the menu but
   we haven't authored a recipe card for yet. Red bordered, non-clickable. */
.rxtile-coming-soon {
  border: 2px solid var(--bb-red);
  background: repeating-linear-gradient(
    45deg,
    rgba(200, 16, 46, 0.03),
    rgba(200, 16, 46, 0.03) 8px,
    rgba(200, 16, 46, 0.07) 8px,
    rgba(200, 16, 46, 0.07) 16px
  );
  cursor: not-allowed;
}
.rxtile-coming-soon:hover {
  border-color: var(--bb-red);
  box-shadow: none;
  transform: none;
}
.rxtile-coming-soon .rxname { color: var(--bb-red); }
.rxtile-coming-soon .rxtile-cs-label {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--bb-red);
}

.rx-empty-cat {
  grid-column: 1 / -1;
  padding: 16px 18px;
  border: 1px dashed var(--bb-line);
  border-radius: var(--r);
  background: var(--bb-cream);
  font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.rx-empty-cat code {
  background: #fff; padding: 1px 6px; border-radius: 3px;
  border: 1px solid var(--bb-line); font-size: 12px;
}

.rx-frame {
  border: 1px solid var(--bb-line); border-radius: var(--r);
  overflow: hidden; background: var(--bb-cream);
  position: relative;
  width: 100%;
  aspect-ratio: 11 / 8.5;   /* letter-landscape — matches recipe cards */
}
.rx-frame iframe {
  display: block; width: 100%; height: 100%;
  border: 0;
}
/* HTML cards have fixed authored dimensions (11×8.5 in = 1056×816 px).
   We pin the iframe at those dimensions and scale via JS so the full
   card is always visible inside the aspect-ratio container, no
   scrolling required at any viewport size. */
.rx-frame-fit { background: #000; }
.rx-frame-fit iframe {
  position: absolute; top: 0; left: 0;
  width: 1056px; height: 816px;
  transform-origin: top left;
}

/* Wide admin grid: horizontally scrollable, sticky first column */
.tbl-scroll { overflow-x: auto; border: 1px solid var(--bb-line); border-radius: var(--r); background: #fff; }
.tbl-grid { border-collapse: collapse; table-layout: fixed; margin: 0 auto; }
.tbl-grid th, .tbl-grid td { padding: 8px 10px; font-size: 13px; border-bottom: 1px solid var(--bb-line); white-space: nowrap; vertical-align: middle; }
.tbl-grid thead tr.cat th { background: var(--bb-black); color: #fff; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 10px; border-bottom: 0; }
.tbl-grid thead tr.cat th.staff-h { background: var(--bb-cream); color: var(--bb-muted); }
.tbl-grid thead tr.cols th { background: var(--bb-cream); color: var(--bb-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 8px; }
.tbl-grid thead tr.cols th.modnum { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 4px; width: 28px; min-width: 28px; max-width: 28px; font-size: 11px; }
.tbl-grid td.staff { background: #fff; position: sticky; left: 0; box-shadow: 1px 0 0 var(--bb-line); width: 240px; min-width: 240px; max-width: 240px; white-space: normal; }
.tbl-grid th.staff-h { background: var(--bb-cream); width: 240px; min-width: 240px; max-width: 240px; }
.tbl-grid td.staff .staff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tbl-grid td.staff .staff-id { min-width: 0; flex: 1; overflow: hidden; }
.tbl-grid td.staff .staff-id .muted { white-space: normal; word-break: break-word; }
.tbl-grid td.staff .staff-actions { margin: 0; flex-shrink: 0; }
.tbl-grid td.cell { text-align: center; width: 28px; min-width: 28px; max-width: 28px; }
.tbl-grid .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.tbl-grid .dot.signed { background: var(--bb-good); }
.tbl-grid .dot.passed { background: var(--bb-red); }
.tbl-grid .dot.empty  { background: #eee; }

/* Footer */
footer.fp { padding: 30px 28px; color: var(--bb-muted); font-size: 12px; text-align: center; border-top: 1px solid var(--bb-line); margin-top: 30px; font-style: italic; }
footer.fp .pill { color: var(--bb-red); font-weight: 700; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }

/* =========================================================================
   MOBILE — phone-first overrides.

   The Flask LMS is THE site. Employees do most of their training on
   their phones, so the desktop styles above need to bend below 720px.
   Two breakpoints:
     ≤ 720px  — phones in portrait (and small landscape tablets).
     ≤ 380px  — iPhone SE-class small phones; extra compression.
   Plus a `body { -webkit-text-size-adjust: 100% }` guard so iOS
   doesn't auto-enlarge text after rotation.
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }

@media (max-width: 720px) {
  /* ── PAGE FRAME ──────────────────────────────────────────────── */
  .wrap, .wrap.narrow, .wrap.wide {
    padding: 16px 14px max(16px, env(safe-area-inset-bottom));
    max-width: 100%;
  }

  /* ── HEADINGS — scale the brand display face down so a 40px h1
     doesn't blow the layout open on a 375px phone. ─────────────── */
  h1 { font-size: 26px; line-height: 1.1; margin-bottom: 6px; }
  h2 { font-size: 18px; margin: 22px 0 8px; letter-spacing: 0.02em; }
  h2.cat-head { margin-top: 24px; flex-wrap: wrap; gap: 4px 10px; }
  h2.cat-head .cat-sub { font-size: 11px; }
  h3 { font-size: 15px; margin: 14px 0 4px; }
  h4 { font-size: 13.5px; }
  body { font-size: 14.5px; }

  .eyebrow { font-size: 10.5px; letter-spacing: 0.14em; }

  /* ── TOPBAR — slim chrome; nav becomes a horizontal scroll-strip
     so all the links stay reachable without a hamburger menu. ──── */
  .topbar {
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .topbar .brand {
    font-size: 13px;
    letter-spacing: 0.06em;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar .brand .fleur { font-size: 16px; }
  .topbar .brand .lms {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
  /* Hide the user's full name to save space; tap the wordmark area
     instead to reach /account. The Log out button stays visible. */
  .topbar .user { display: none; }

  .topbar nav {
    flex: 1 1 100%;
    order: 3;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 6px;
    /* keep a hint that more nav items exist offscreen with a fade
       on the right edge */
    mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a,
  .topbar nav .topnav-drop-trigger,
  .topbar nav button.linklike {
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .topnav-drop-menu {
    /* Drawer pops below the scroll-strip instead of trying to align
       with the trigger — the trigger may have scrolled off-screen. */
    position: fixed;
    top: auto;
    right: 8px;
    left: 8px;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
  }
  .topnav-drop-menu a { padding: 12px 14px; }
  .topnav-drop-menu a .lbl { font-size: 14px; }
  .topnav-drop-menu a .sub { font-size: 11px; }

  /* ── CARDS / TILES ───────────────────────────────────────────── */
  .card { padding: 18px 16px; margin-bottom: 16px; border-radius: var(--r); }
  .modtile { padding: 16px; }
  .modtile h3 { font-size: 16px; }
  .modtile p { font-size: 13.5px; margin: 0 0 10px; }
  .modtile .label { font-size: 10px; letter-spacing: 0.12em; }

  /* ── STAT STRIP — 4 across is too tight; go 2×2. ─────────────── */
  .stat-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0 18px;
  }
  .stat { padding: 12px 14px; }
  .stat .n { font-size: 22px; }
  .stat .lbl { font-size: 10px; letter-spacing: 0.08em; }

  /* ── FACTS TABLE — was a wide 2-column key/value strip. On phone
     keep readable by softening the borders + smaller font. ────── */
  .facts th, .facts td { padding: 8px 10px; font-size: 12px; }
  .facts thead th { font-size: 10px; }

  /* ── NUMBERED STEPS ──────────────────────────────────────────── */
  .steps li { grid-template-columns: 36px 1fr; }
  .steps .n { font-size: 14px; }
  .steps .body { padding: 10px 12px 10px 0; font-size: 13.5px; }

  /* ── NOTIFY / RECIPE-TASK / GAME-CTA cards ───────────────────── */
  .notify-card { gap: 10px; padding: 12px 14px; }
  .notify-icon { font-size: 22px; }
  .notify-title { font-size: 14px; }
  .notify-list { font-size: 13px; }
  .notify-foot { font-size: 11px; }

  .recipe-task { padding: 12px 14px; }
  .recipe-task-icon { font-size: 18px; }
  .recipe-task-title { font-size: 13.5px; }
  .recipe-task-pct { font-size: 16px; }
  .recipe-task-bar { height: 8px; }
  .recipe-task-meta { font-size: 12px; }
  .recipe-task-foot { font-size: 10px; }

  .game-cta {
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    padding: 12px 14px;
  }
  .game-cta-mark { width: 36px; height: 36px; font-size: 18px; }
  .game-cta-title { font-size: 15px; }
  .game-cta-sub { font-size: 12px; margin-top: 2px; }

  /* ── PREP STATION BANNER ─────────────────────────────────────── */
  .prep-station {
    font-size: 16px;
    letter-spacing: 0.12em;
    padding: 8px 14px;
    margin: 18px 0 6px;
  }

  /* ── QUIZ ─────────────────────────────────────────────────────── */
  .q { padding: 14px; }
  .q .prompt { font-size: 15px; }
  .q .choice { padding: 10px 12px; font-size: 14.5px; }
  .q .choice input { transform: scale(1.1); margin-right: 12px; }

  .score-banner { padding: 14px 16px; font-size: 15px; }

  /* ── BUTTONS — bigger tap targets ────────────────────────────── */
  .btn { padding: 12px 18px; font-size: 13px; }
  .btn.small { padding: 8px 12px; font-size: 11px; }

  /* ── FORMS ────────────────────────────────────────────────────── */
  /* font-size: 16px on inputs blocks iOS auto-zoom on focus. */
  form input[type=text], form input[type=email], form input[type=password],
  form select, form textarea {
    font-size: 16px;
    padding: 11px 12px;
  }
  form label { font-size: 11px; }

  /* ── TABLES — wrap admin grids in horizontal scroll. ─────────── */
  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 8px 10px; font-size: 12.5px; }
  .tbl-scroll { -webkit-overflow-scrolling: touch; }
  .tbl-grid th, .tbl-grid td { padding: 7px 8px; font-size: 12px; }
  .tbl-grid td.staff,
  .tbl-grid th.staff-h { width: 180px; min-width: 180px; max-width: 180px; }

  /* ── LEADERBOARD ──────────────────────────────────────────────── */
  .lb-hero { padding: 16px 18px; gap: 14px; }
  .lb-hero-medal { font-size: 42px; }
  .lb-hero-name { font-size: 22px; }
  .lb-hero-stats { font-size: 12px; }
  .lb-card { padding: 14px 16px; }
  .lb-cat { font-size: 13px; }
  .lb-row { padding: 8px 10px; gap: 10px; }
  .lb-medal { font-size: 26px; }
  .lb-name { font-size: 14px; }
  .lb-sub { font-size: 11px; }

  /* ── RECIPE LIBRARY ──────────────────────────────────────────── */
  .rx-tabs { gap: 2px; margin: 10px 0 14px; }
  .rx-tab { padding: 9px 12px; font-size: 13px; }
  .rx-tab .rx-tab-count { padding: 2px 6px; font-size: 10px; }
  .rx-search { padding: 11px 14px; font-size: 16px; }
  .rx-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  .rxtile { padding: 12px 14px; }
  .rxtile .rxname { font-size: 13.5px; line-height: 1.22; }
  .rxtile-cs-label { font-size: 9px; }

  /* Recipe viewer iframe — make it taller relative to viewport on
     mobile since aspect-ratio 11:8.5 is too short for portrait. */
  .rx-frame { aspect-ratio: auto; min-height: 360px; }

  /* ── WATCH-FOR / NOTE blocks ─────────────────────────────────── */
  .watchfor { padding: 10px 14px; font-size: 12px; }
  .note { font-size: 12.5px; }

  /* ── FOOTER ──────────────────────────────────────────────────── */
  footer.fp { padding: 22px 16px; font-size: 11px; }
}

@media (max-width: 380px) {
  /* Extra-small phones (iPhone SE-class). */
  .wrap, .wrap.narrow, .wrap.wide { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 22px; }
  h2 { font-size: 16px; }
  .topbar .brand .lms { display: none; }
  .topbar nav { gap: 12px; }
  .stat .n { font-size: 19px; }
  .modtile h3 { font-size: 15px; }
  .modtile p { font-size: 13px; }
}

/* Print: keep the printable look close to the PDF template */
@media print {
  .topbar, .actions, footer.fp, .no-print { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; }
}