/* =========================================================================
   BRODEUR'S BISTRO — Station-module redesign
   Salad / Sauté / Appy / Sandwich (four SEPARATE stations)

   Turns the old wall-of-text module page into a pleasant reading page:
   a dark module hero with progress ring + a station switcher, a cream
   "welcome" callout, the habit sections set as fleur-marked reading
   (no cards, no numbers), a Training Materials card, and a footer CTA.

   Additive + reversible. Every selector is prefixed .bb-mod-* — nothing
   existing is overridden. Depends on the --bb-* tokens (already global
   via app.css / the design-system tokens).

   HOW TO USE
   ----------
   1. Copy to  bbistro/static/css/bb-module.css
   2. In templates/base.html:
        <link rel="stylesheet" href="{{ url_for('static', filename='css/bb-module.css') }}">
   3. Replace the module-detail body with module-detail.snippet.html.
      Preview: handoff/preview-module.html.
   ========================================================================= */

/* hero */
.bb-mod-hero{position:relative;overflow:hidden;display:flex;gap:20px;align-items:center;
  background:linear-gradient(135deg,#1a1a1a,var(--bb-black));color:#fff;border-radius:var(--bb-r);
  padding:24px 28px;box-shadow:var(--bb-shadow-md);margin:0 0 16px;}
.bb-mod-hero-text{flex:1;min-width:0;}
.bb-mod-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e8a0aa;margin-bottom:8px;}
.bb-mod-hero h1{color:#fff;margin:0 0 11px;font-family:var(--bb-font-logo,"Bronzetti",Georgia,serif);font-weight:700;font-size:48px;letter-spacing:.01em;text-transform:uppercase;line-height:.9;}
.bb-mod-meta{display:flex;flex-wrap:wrap;gap:7px;}
.bb-mod-chip{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#f0ece5;padding:5px 11px;border-radius:var(--bb-r-pill);}
.bb-mod-chip.is-status{background:var(--bb-red);border-color:var(--bb-red);color:#fff;}
.bb-mod-ring{position:relative;width:88px;height:88px;flex-shrink:0;}
.bb-mod-ring > i{display:block;width:100%;height:100%;border-radius:50%;
  background:conic-gradient(var(--bb-red) calc(var(--pct,0)*1%),rgba(255,255,255,.15) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 61%,#000 62%);mask:radial-gradient(farthest-side,transparent 61%,#000 62%);}
.bb-mod-ring > b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px;font-weight:800;}
.bb-mod-fleur{position:absolute;right:14px;bottom:2px;font-size:60px;line-height:1;color:#fff;opacity:.1;pointer-events:none;}

/* station switcher */
.bb-mod-stations{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;}
.bb-mod-station{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--bb-paper);border:1px solid var(--bb-line);color:var(--bb-muted);
  padding:8px 15px;border-radius:var(--bb-r-pill);text-decoration:none;transition:border-color .12s,color .12s;}
.bb-mod-station:hover{border-color:var(--bb-red);color:var(--bb-ink);}
.bb-mod-station.on{background:var(--bb-black);border-color:var(--bb-black);color:#fff;}
.bb-mod-station .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bb-good);margin-right:6px;vertical-align:middle;}

/* welcome callout */
.bb-mod-welcome{display:flex;gap:15px;align-items:flex-start;background:var(--bb-cream);
  border:1px solid var(--bb-line);border-left:4px solid var(--bb-red);border-radius:var(--bb-r);
  padding:19px 22px;margin:0 0 34px;box-shadow:var(--bb-shadow-sm);}
.bb-mod-welcome .fl{font-size:24px;color:var(--bb-red);flex:0 0 auto;margin-top:1px;}
.bb-mod-welcome h3{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-red);margin:0 0 6px;}
.bb-mod-welcome p{margin:0;font-size:15px;line-height:1.6;color:var(--bb-ink);}

/* section divider */
.bb-mod-div{display:flex;align-items:center;gap:14px;margin:0 0 6px;}
.bb-mod-div .line{flex:1;height:1px;background:var(--bb-line);}
.bb-mod-div .lbl{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-red);}
.bb-mod-div .fl{color:var(--bb-red);font-size:15px;}

/* fleur-marked habits (reading blocks — no cards, no numbers) */
.bb-mod-habits{margin:0 0 36px;}
.bb-mod-habit{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:18px 0;}
.bb-mod-habit + .bb-mod-habit{border-top:1px solid var(--bb-line);}
.bb-mod-habit .mk{color:var(--bb-red);font-size:16px;line-height:1.5;}
.bb-mod-habit h4{font-size:17.5px;font-weight:700;color:var(--bb-ink);margin:0 0 6px;letter-spacing:-.01em;}
.bb-mod-habit p{margin:0;font-size:15px;line-height:1.7;color:#3a3733;}

/* closing line */
.bb-mod-closing{font-size:16px;line-height:1.6;font-style:italic;color:var(--bb-ink);
  border-left:3px solid var(--bb-red);padding-left:18px;margin:0 0 38px;}

/* training materials card */
.bb-mod-mat{background:var(--bb-paper);border:1px solid var(--bb-line);border-radius:var(--bb-r);
  box-shadow:var(--bb-shadow-sm);overflow:hidden;margin:0 0 34px;}
.bb-mod-mat-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--bb-line);}
.bb-mod-mat-head .fl{color:var(--bb-red);font-size:16px;}
.bb-mod-mat-head h2{margin:0;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bb-ink);}
.bb-mod-mat-count{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--bb-good);}
.bb-mod-mat-note{padding:12px 20px 4px;font-size:12.5px;font-style:italic;color:var(--bb-muted);}
.bb-mod-mat-row{display:grid;grid-template-columns:26px 1fr auto;gap:13px;align-items:center;padding:13px 20px;}
.bb-mod-mat-row + .bb-mod-mat-row{border-top:1px solid var(--bb-line);}
.bb-mod-mat-check{width:24px;height:24px;border-radius:50%;background:var(--bb-good);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;}
.bb-mod-mat-check.todo{background:var(--bb-paper);border:2px solid var(--bb-line);color:transparent;}
.bb-mod-mat-title{font-size:14px;font-weight:600;color:var(--bb-ink);}
.bb-mod-mat-sub{font-size:11.5px;color:var(--bb-muted);margin-top:2px;}
.bb-mod-mat-link{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--bb-red);text-decoration:none;white-space:nowrap;}
.bb-mod-mat-link:hover{text-decoration:underline;}

/* footer */
.bb-mod-foot{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-top:24px;border-top:1px solid var(--bb-line);}
.bb-mod-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:var(--bb-red);color:#fff;border:none;
  border-radius:var(--bb-r);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;text-decoration:none;cursor:pointer;transition:background .12s;}
.bb-mod-btn:hover{background:var(--bb-red-dark);}
.bb-mod-btn:active{transform:translateY(1px);}
.bb-mod-btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;background:transparent;color:var(--bb-black);
  border:1px solid var(--bb-black);border-radius:var(--bb-r);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;text-decoration:none;}
.bb-mod-btn-ghost:hover{background:var(--bb-black);color:#fff;}
.bb-mod-foot-note{font-size:12.5px;font-style:italic;color:var(--bb-muted);margin-left:auto;}
.bb-mod-sig{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b7b1a6;margin:28px 0 0;}
.bb-mod-sig .fl{color:var(--bb-red);}

@media (max-width:640px){
  .bb-mod-hero h1{font-size:36px;}
  .bb-mod-ring{display:none;}
  .bb-mod-foot-note{margin-left:0;width:100%;}
}