/* Morning brief (views/morning-brief.js): one page for the leader. Tokens only; prints as a clean A4 page. */
.mb { max-width: 920px; margin: 0 auto; padding: 32px 36px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 22px; }
.mb-head small { display: flex; gap: 6px; align-items: center; color: var(--accent-ink); font-weight: 600; font-size: 12.5px; }
.mb-head h2 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 8px 0 10px; }
.mb-head p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; max-width: 70ch; }
.mb-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mb-num { padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.mb-num small { display: block; font-size: 11.5px; color: var(--muted); }
.mb-num b { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.mb-num span { font-size: 11.5px; color: var(--muted); }
.mb-num.good b { color: var(--pos-ink); } .mb-num.bad b { color: var(--neg-ink); }
.mb-secs { display: grid; gap: 14px; }
.mb-sec { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); border-left: 4px solid var(--neu); }
.mb-sec.good { border-left-color: var(--pos); background: color-mix(in srgb, var(--pos) 8%, var(--surface)); }
.mb-sec.bad { border-left-color: var(--neg); background: color-mix(in srgb, var(--neg) 8%, var(--surface)); }
.mb-sec.watch { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.mb-sec h3 { display: flex; gap: 8px; align-items: center; font-size: 15.5px; font-weight: 600; margin: 0 0 8px; }
.mb-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.mb-sec li { font-size: 14px; line-height: 1.55; }
.mb-foot { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.mb-older { max-width: 920px; margin: 14px auto 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.mb-older small { color: var(--muted); } .mb-older a { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: inherit; text-decoration: none; }
.mb-older a.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
@media (max-width: 640px) { .mb { padding: 20px 16px; } .mb-head h2 { font-size: 22px; } }
@media print { .mb { border: 0; padding: 0; max-width: none; } .mb-older, .page-h .actions { display: none; } }

/* ---- Morning brief, redrawn (7 Oct 2026): pictorial and infographic ---- */
.mb2 { max-width: 1240px; margin: 0 auto; display: grid; gap: 18px; }
.mb2-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 26px 28px; border-radius: 26px; border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--pos) 14%, transparent), transparent 70%), var(--surface); }
.mb2-face { width: 150px; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; border: 4px solid color-mix(in srgb, var(--accent) 55%, var(--surface)); box-shadow: 0 16px 36px rgb(0 0 0 / .14); background: var(--bg); }
.mb2-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mb2-head small { display: flex; gap: 6px; align-items: center; color: var(--accent-ink); font-weight: 600; font-size: 13px; }
.mb2-head h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin: 10px 0; }
.mb2-head p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 74ch; }
.mb2-mood { display: grid; justify-items: center; gap: 10px; min-width: 230px; }
.mb2-ringbox { position: relative; width: 190px; aspect-ratio: 1; } .mb-ring { width: 100%; height: 100%; filter: drop-shadow(0 10px 20px rgb(0 0 0 / .08)); }
.mb2-ringbox > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .mb2-ringbox b { font-size: 56px; font-weight: 500; letter-spacing: -.04em; line-height: 1; } .mb2-ringbox b i { font-style: normal; font-size: 24px; } .mb2-ringbox small { font-size: 12px; color: var(--muted); }
.mb2-moodk { display: grid; gap: 3px; text-align: center; font-size: 13px; } .mb2-moodk span { display: inline-block; } .mb2-moodk { grid-template-columns: repeat(3, auto); column-gap: 14px; justify-content: center; } .mb2-moodk small, .mb2-moodk em { grid-column: 1 / -1; }
.mb2-moodk b { font-size: 17px; font-weight: 600; } .mb2-moodk .p b { color: var(--pos-ink); } .mb2-moodk .n b { color: var(--neg-ink); } .mb2-moodk small { color: var(--muted); font-size: 11.5px; }
.mb-d { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: var(--bg); justify-self: center; } .mb-d.up { color: var(--pos-ink); background: color-mix(in srgb, var(--pos) 22%, transparent); } .mb-d.down { color: var(--neg-ink); background: color-mix(in srgb, var(--neg) 22%, transparent); }
.mb2-vols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.mb-vol { position: relative; display: grid; gap: 2px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.mb-vol > span { position: absolute; top: 14px; right: 16px; color: var(--muted); } .mb-vol b { font-size: 38px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; } .mb-vol small { font-size: 12.5px; color: var(--muted); }
.mb-vol em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); } .mb-vol em.up { color: var(--pos-ink); } .mb-vol em.down { color: var(--neg-ink); } .mb-vol.good b { color: var(--pos-ink); } .mb-vol.bad b { color: var(--neg-ink); }
.mb2-sec { padding: 20px 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.mb2-sec > h3, .mb2-lane h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; font-size: 17px; font-weight: 600; } .mb2-sec > h3 small { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 6px; }
.mb2-plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.mb2-plat { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.mb2-plat header { display: flex; gap: 8px; align-items: center; font-size: 14px; } .mb2-plat-n b { font-size: 34px; font-weight: 500; letter-spacing: -.03em; } .mb2-plat-n small { margin-left: 6px; color: var(--muted); font-size: 12px; }
.mb2-plat-k { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); } .mb2-plat-k b { color: var(--text); font-size: 15px; font-weight: 600; } .mb2-plat-m { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); } .mb2-plat-m .p { color: var(--pos-ink); } .mb2-plat-m .n { color: var(--neg-ink); }
.mb-bar { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--bg); } .mb-bar .p { background: var(--pos); } .mb-bar .u { background: var(--neu); } .mb-bar .n { background: var(--neg); } .mb-bar i { display: block; }
.mb-pic { position: relative; flex: none; display: grid; place-items: center; width: 84px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--bg); color: var(--muted); }
.mb-pic.big { width: 100%; border-radius: 16px; } .mb-pic.wide { width: 120px; aspect-ratio: 4 / 5; }
.mb-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mb-pic > b { position: absolute; right: 8px; bottom: 8px; font-size: 10px; padding: 3px 7px; border-radius: 99px; background: rgb(0 0 0 / .55); color: #fff; }
.mb2-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mb2-tile { display: grid; gap: 6px; align-content: start; padding: 8px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 8%, var(--surface)); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.mb2-tile:hover, .mb-post:hover, .mb2-story:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(0 0 0 / .1); }
.mb2-tile-n { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--muted); } .mb2-tile-t { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mb2-tile-k { display: flex; gap: 12px; font-size: 13px; } .mb2-tile-k b { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; }
.mb2-lanes, .mb2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mb2-lane { --c: var(--pos); --ink: var(--pos-ink); padding: 22px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 17%, var(--surface)), var(--surface) 300px); min-width: 0; }
.mb2-lane.is-n { --c: var(--neg); --ink: var(--neg-ink); }
.mb2-lane header { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .mb2-lane header span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; background: color-mix(in srgb, var(--c) 42%, transparent); color: var(--ink); } .mb2-lane h3 { margin: 0; font-size: 24px; color: var(--ink); letter-spacing: -.02em; }
.mb2-lane h4 { display: none; } .mb2-lane ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.mb2-lane li { position: relative; padding: 10px 14px 10px 34px; border-radius: 14px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); font-size: 14px; line-height: 1.5; }
.mb2-lane li::before { content: ''; position: absolute; left: 14px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.mb2-l { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 6px 0 8px; } .mb2-posts { display: grid; gap: 10px; }
.mb-post { display: flex; gap: 12px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; min-width: 0; }
.mb-post-b { display: grid; gap: 5px; min-width: 0; flex: 1; align-content: start; } .mb-post-h { display: flex; gap: 6px; align-items: center; font-size: 13px; } .mb-post-t { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mb-post-k { display: flex; gap: 12px; font-size: 12px; color: var(--muted); } .mb-post-k i { font-style: normal; display: inline-flex; gap: 4px; align-items: center; } .mb-post .nt-btn { justify-self: start; }
.mb2-watch ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.mb2-watch li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-size: 14px; line-height: 1.5; }
.mb2-watch li > b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 15px; }
.mb2-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.mb2-story { display: flex; gap: 12px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); border-left: 5px solid var(--neu); background: var(--surface); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.mb2-story.p { border-left-color: var(--pos); } .mb2-story.n { border-left-color: var(--neg); } .mb2-story > span:last-child { display: grid; gap: 5px; align-content: start; min-width: 0; }
.mb2-story em { font-style: normal; justify-self: start; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--bg); } .mb2-story.p em { background: color-mix(in srgb, var(--pos) 30%, transparent); color: var(--pos-ink); } .mb2-story.n em { background: color-mix(in srgb, var(--neg) 30%, transparent); color: var(--neg-ink); }
.mb2-story b { font-size: 14px; font-weight: 600; line-height: 1.35; } .mb2-story small { font-size: 11.5px; color: var(--muted); }
.mb2-args { display: grid; gap: 10px; } .mb2-args > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: baseline; } .mb2-args span { font-size: 13.5px; grid-column: 1 / -1; } .mb2-args i { display: block; height: 10px; border-radius: 99px; background: var(--accent); opacity: .7; } .mb2-args b { font-size: 16px; font-weight: 600; } .mb2-args small { font-size: 11px; color: var(--muted); }
.mb2-dists { display: flex; gap: 8px; flex-wrap: wrap; } .mb2-dists span { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; } .mb2-dists i { font-style: normal; font-weight: 600; } .mb2-dists .p { background: color-mix(in srgb, var(--pos) 18%, var(--surface)); } .mb2-dists .n { background: color-mix(in srgb, var(--neg) 18%, var(--surface)); }
.mb2-info ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.mb2 .mb-foot { border-top: 0; padding: 0 6px; } .mb2 .nt-btn { font-size: 11px; }
@media (max-width: 980px) { .mb2-hero { grid-template-columns: 1fr; justify-items: start; } .mb2-lanes, .mb2-two { grid-template-columns: 1fr; } .mb2-face { width: 110px; } }
@media print { .mb2 { max-width: none; } .mb2 .nt-btn, #mb-refresh { display: none; } .mb2-sec, .mb2-lane, .mb2-hero { break-inside: avoid; } }

/* ---- Morning brief on paper: A4 portrait, the screen layout kept (not the phone one), colours printed ---- */
.mb2-printhead { display: none; }
@page brief { size: A4 portrait; margin: 9mm 9mm 10mm; }
@media print {
  html, body, #app, .app, .app-main, .app-body, #main, .page-body, .page-b { background: #fff !important; margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; position: static !important; display: block !important; }
  #sidebar, .sidebar, #mob-nav, .nav-expand, .page-h, .mb-older, .fs-dock, #toasts, #iv-pop, .nt-menu, .live-pill, .demo-strip { display: none !important; }
  .mb2, .mb2 * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* drawn 1000 px wide and scaled to the sheet, so paper gets the desktop layout whatever the dialog's width */
  .mb2 { page: brief; width: 1000px !important; max-width: none !important; margin: 0 !important; zoom: .715; gap: 14px; }
  .mb2-printhead { display: flex; align-items: baseline; gap: 14px; padding: 0 4px 10px; border-bottom: 2px solid var(--accent); font-size: 13px; }
  .mb2-printhead b { font-size: 17px; letter-spacing: -.01em; } .mb2-printhead span { font-weight: 600; } .mb2-printhead i { margin-left: auto; font-style: normal; color: #666; font-size: 12px; }
  .mb2-hero { grid-template-columns: auto minmax(0, 1fr) auto !important; justify-items: stretch !important; padding: 20px 22px; gap: 22px; }
  .mb2-face { width: 140px !important; box-shadow: none; } .mb2-head h2 { font-size: 30px; } .mb2-head p { font-size: 15px; }
  .mb2-ringbox { width: 170px; } .mb-ring { filter: none; }
  .mb2-vols { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .mb-vol { padding: 12px 14px; } .mb-vol b { font-size: 32px; }
  .mb2-plats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mb2-strip { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .mb2-lanes, .mb2-two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mb2-news { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mb2-watch ol { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mb2-sec, .mb2-lane { padding: 16px 18px; box-shadow: none !important; }
  .mb2-hero, .mb2-vols, .mb-post, .mb2-story, .mb2-tile, .mb2-plat, .mb2-watch li, .mb2-lane li, .mb2-lane header { break-inside: avoid; page-break-inside: avoid; }
  .mb2-lanes { break-before: auto; } .mb2-sec > h3, .mb2-lane h3 { break-after: avoid; }
  .mb2 .nt-btn, #mb-refresh { display: none !important; }
  .mb2 a { color: inherit !important; text-decoration: none !important; } .mb2-tile, .mb-post, .mb2-story { transform: none !important; box-shadow: none !important; }
  .mb2 .mb-foot { font-size: 12px; padding-top: 8px; border-top: 1px solid #ddd; }
}

@media print { /* a whole section is never pushed to the next sheet (that left half a page blank): sections may break between their cards */
  .mb2-sec, .mb2-lane, .mb2-lanes, .mb2-two { break-inside: auto !important; page-break-inside: auto !important; }
  .mb2-args > div, .mb2-dists span, .mb2-info li { break-inside: avoid; } .mb-pic { background: #f1f1f1 !important; } }

/* Morning brief: period line, closing line with the view-only link, and a calmer print (7 Oct 2026, second pass) */
.mb2-period { margin-top: 10px !important; font-size: 13px !important; color: var(--accent-ink) !important; font-weight: 600; }
.mb2-end { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; padding: 12px 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.mb2-share { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; } .mb2-share a { color: var(--accent-ink); word-break: break-all; }
.mb2-hero > span:first-child:empty { display: none; }
.mb2-story:not(:has(.mb-pic)) > span { padding: 4px 6px; } .mb-post:not(:has(.mb-pic)) .mb-post-b { padding-left: 4px; }
@media print {
  /* the two columns ran down the sheet and were cut mid-way: on paper each lane is a full-width block, its posts side by side */
  .mb2-lanes { display: grid !important; grid-template-columns: 1fr !important; gap: 14px; }
  .mb2-lane .mb2-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mb2-lane .mb-post { flex-direction: column; } .mb2-lane .mb-pic { width: 100%; aspect-ratio: 16 / 10; }
  .mb2-lane ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb2-lane, .mb2-watch, .mb2-two, .mb2-info { break-inside: avoid !important; page-break-inside: avoid !important; }
  .mb2-news { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .mb2-story { flex-direction: column; } .mb2-story .mb-pic.wide { width: 100%; aspect-ratio: 16 / 10; }
  .mb2-end #mb-copy { display: none; } .mb2-end { font-size: 12px; }
}

/* ---- Weekly report of a person's page (events/weekly-report.js): the brief's look, with a week's extra pieces ---- */
.wk .mb-vol em { display: block; margin-top: 2px; } .wk-h { margin-left: auto; font-size: 11.5px; color: var(--muted); } .wk .mb2-plat header { display: flex; }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 210px; }
.wk-day { display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; gap: 4px; height: 100%; min-width: 0; }
.wk-day b { font-size: 13px; font-weight: 600; min-height: 18px; } .wk-day span { font-size: 12.5px; font-weight: 600; } .wk-day small { font-size: 11px; color: var(--muted); }
.wk-day i { align-self: end; width: min(100%, 64px); border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--surface))); }
.wk-qs { display: grid; gap: 8px; }
.wk-q { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); border-left: 4px solid var(--pos); background: var(--surface); color: inherit; text-decoration: none; font-size: 13.5px; line-height: 1.5; }
.wk-q.n { border-left-color: var(--neg); } .wk-q small { font-size: 11.5px; color: var(--muted); } .wk-q span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.wk-voices { display: grid; gap: 11px; }
.wk-voice { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: baseline; }
.wk-voice span { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.4; } .wk-voice i { display: block; height: 10px; border-radius: 99px; background: var(--neu); }
.wk-voice.p i { background: var(--pos); } .wk-voice.n i { background: var(--neg); } .wk-voice b { font-size: 16px; font-weight: 600; } .wk-voice small { font-size: 11px; color: var(--muted); min-width: 62px; }
.wk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.wk-newsk { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .wk-newsk span { padding: 8px 16px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; }
.wk-newsk b { font-size: 17px; font-weight: 600; margin-right: 4px; } .wk-newsk .p { background: color-mix(in srgb, var(--pos) 20%, var(--surface)); } .wk-newsk .n { background: color-mix(in srgb, var(--neg) 20%, var(--surface)); }
.wk-none, .wk-note { margin: 0; font-size: 13.5px; color: var(--muted); } .wk-note { margin-top: 12px; } .wk-gap { margin-top: 18px; }
.wk .mb-pic.is-off { display: none; } .wk .mb2-lane h3 { font-size: 22px; }
@media print { .wk-days { height: 170px; } .wk-qs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wk-q, .wk-voice, .wk-day { break-inside: avoid; } .wk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } #wk-make, #wk-copy, #wk-print { display: none !important; } }
.wk-ph { background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--accent)) 38%, var(--surface)), color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface))) !important; }
.wk-ph > b { position: static !important; background: rgb(255 255 255 / .7) !important; color: var(--text) !important; font-size: 11.5px !important; padding: 5px 12px !important; }

/* ---- Morning brief as a landscape document (16 Oct 2026): a wide sheet on screen and in full screen, A4 landscape on paper,
   and an export mode (body.mb-export) the server's headless browser uses to save the brief as a picture or a PDF.
   Scoped to .mb-land so the weekly report (also .mb2) keeps its portrait layout. ---- */
.mb2.mb-land { max-width: 1440px; padding: 24px 28px 20px; border-radius: 26px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 60px rgb(0 0 0 / .07); }
.mb2.mb-land .mb2-printhead { display: flex; align-items: baseline; gap: 14px; padding: 0 4px 12px; border-bottom: 2px solid var(--accent); font-size: 13px; }
.mb2.mb-land .mb2-printhead b { font-size: 17px; letter-spacing: -.01em; } .mb2.mb-land .mb2-printhead span { font-weight: 600; } .mb2.mb-land .mb2-printhead i { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.mb2.mb-land .mb2-sec, .mb2.mb-land .mb-vol { background: color-mix(in srgb, var(--bg) 45%, var(--surface)); }
body.dashboard-fullscreen-view .mb2.mb-land { max-width: 1680px; }
@media (min-width: 1000px) {
  .mb2.mb-land .mb2-vols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mb2.mb-land .mb2-plats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .mb2.mb-land .mb2-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mb2.mb-land .mb2-news { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mb2.mb-land .mb2-watch ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Download menu */
.mb-dl { position: relative; display: inline-flex; }
.mb-dl-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px; display: none; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 18px 40px rgb(0 0 0 / .14); }
.mb-dl.open .mb-dl-menu { display: grid; gap: 2px; }
.mb-dl-menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.mb-dl-menu button:hover { background: var(--bg); } .mb-dl-menu button small { display: block; color: var(--muted); font-size: 11.5px; }
/* Export mode: only the sheet, at its landscape width, nothing of the app around it */
body.mb-export #sidebar, body.mb-export .sidebar, body.mb-export #mob-nav, body.mb-export .page-h, body.mb-export .mb-older, body.mb-export .fs-dock,
body.mb-export #toasts, body.mb-export .modal-wrap, body.mb-export .demo-strip, body.mb-export .live-pill, body.mb-export .update-bar, body.mb-export .nav-expand { display: none !important; }
body.mb-export, body.mb-export #app, body.mb-export #main, body.mb-export .page-body { height: auto !important; min-height: 0 !important; overflow: visible !important; display: block !important; position: static !important; padding: 0 !important; margin: 0 !important; background: var(--surface) !important; }
body.mb-export .mb2.mb-land { width: 1400px; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
body.mb-export .mb2 .nt-btn, body.mb-export #mb-copy { display: none !important; }
body.mb-export *, body.mb-export *::before, body.mb-export *::after { animation: none !important; transition: none !important; }
@page briefland { size: A4 landscape; margin: 8mm; }
@media print {
  /* drawn 1400 px wide and scaled to the landscape sheet (281 mm of paper is about 1062 px) */
  .mb2.mb-land { page: briefland; width: 1400px !important; zoom: .755; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; }
  .mb2.mb-land .mb2-sec, .mb2.mb-land .mb-vol { background: #fff !important; }
  .mb2.mb-land .mb2-vols { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .mb2.mb-land .mb2-plats { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .mb2.mb-land .mb2-strip { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .mb2.mb-land .mb2-news, .mb2.mb-land .mb2-watch ol { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mb2.mb-land .mb2-sec, .mb2.mb-land .mb2-lane { break-inside: auto !important; page-break-inside: auto !important; }
  .mb2.mb-land .mb2-hero, .mb2.mb-land .mb2-vols, .mb2.mb-land .mb2-plats, .mb2.mb-land .mb2-tile, .mb2.mb-land .mb-post, .mb2.mb-land .mb2-story, .mb2.mb-land .mb2-lane li, .mb2.mb-land .mb2-watch li { break-inside: avoid !important; }
  /* landscape room: the two lanes side by side again, news and post cards keep their picture at the side, and the
     posts strip takes eight a row so a sheet holds more than one section */
  .mb2.mb-land .mb2-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mb2.mb-land .mb2-lane ul { grid-template-columns: 1fr !important; } .mb2.mb-land .mb2-lane .mb2-posts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mb2.mb-land .mb2-lane .mb-post, .mb2.mb-land .mb2-story { flex-direction: row !important; }
  .mb2.mb-land .mb2-lane .mb-pic { width: 84px !important; aspect-ratio: 4 / 5 !important; }
  .mb2.mb-land .mb2-story .mb-pic.wide { width: 110px !important; aspect-ratio: 4 / 5 !important; }
  .mb2.mb-land .mb2-strip { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .mb2.mb-land .mb2-lane, .mb2.mb-land .mb2-watch, .mb2.mb-land .mb2-two, .mb2.mb-land .mb2-info { break-inside: auto !important; page-break-inside: auto !important; }
  .mb-dl-menu { display: none !important; }
}

/* ---- Morning brief, infographic (16 Oct 2026, brief-render.js): the whole day across parties, and one page per leader ---- */
.bf { gap: 18px; }
.bf .muted { color: var(--muted); } .bf .small { font-size: 12.5px; }
.bf-period { margin: -4px 0 0; display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.bf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bf-chips a { display: inline-flex; gap: 8px; align-items: center; padding: 4px 14px 4px 5px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; font-size: 13px; font-weight: 500; }
.bf-chips a:first-child { padding-left: 12px; } .bf-chips a.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .bf-chips a.is-ours:not(.on) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
/* hero */
.bf-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 26px 30px; border-radius: 28px; border: 1px solid var(--line); position: relative; overflow: hidden;
  background: radial-gradient(60% 140% at 0% 0%, color-mix(in srgb, var(--glow, var(--accent)) 18%, transparent), transparent 70%), radial-gradient(50% 120% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--surface); }
.bf-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--ring, var(--accent)); }
.bf-face { width: 168px; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; padding: 4px; background: var(--ring, var(--accent)); box-shadow: 0 18px 40px rgb(0 0 0 / .14); }
.bf-face img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 20px; display: block; background: var(--bg); }
.bf-head small { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.bf-head h2 { font-size: clamp(26px, 2.5vw, 38px); font-weight: 600; letter-spacing: -.025em; line-height: 1.14; margin: 10px 0 12px; }
.bf-head p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 80ch; }
.bf-moodbox { display: grid; justify-items: center; gap: 10px; min-width: 240px; }
.bf-ring { position: relative; width: var(--s); aspect-ratio: 1; } .bf-ring svg { width: 100%; height: 100%; }
.bf-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .bf-ring b { font-size: calc(var(--s) * .3); font-weight: 500; letter-spacing: -.04em; line-height: 1; } .bf-ring b i { font-style: normal; font-size: .45em; } .bf-ring small { font-size: 12px; color: var(--muted); }
.bf-moodk { display: grid; grid-template-columns: repeat(3, auto); column-gap: 14px; justify-content: center; text-align: center; font-size: 13px; } .bf-moodk small, .bf-moodk em { grid-column: 1 / -1; justify-self: center; }
.bf-moodk b { font-size: 17px; font-weight: 600; } .bf-moodk .p b { color: var(--pos-ink); } .bf-moodk .n b { color: var(--neg-ink); } .bf-moodk small { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.bf-d { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); } .bf-d.up { color: var(--pos-ink); } .bf-d.down { color: var(--neg-ink); }
.bf-moodk .bf-d { padding: 2px 10px; border-radius: 99px; background: var(--bg); margin-top: 4px; }
/* numbers */
.bf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bf-kpi { position: relative; display: grid; gap: 3px; align-content: start; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, var(--surface)); }
.bf-kpi-ic { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
.bf-kpi b { font-size: 36px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; } .bf-kpi small { font-size: 12.5px; color: var(--muted); padding-right: 30px; }
/* sections */
.bf-sec { padding: 20px 22px; border-radius: 24px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 45%, var(--surface)); min-width: 0; }
.bf-sec > h3, .bf-lane h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.bf-sec > h3 small { font-weight: 400; font-size: 12.5px; color: var(--muted); flex-basis: 100%; margin-left: 25px; margin-top: -4px; }
.bf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .bf-two.in { gap: 14px; }
.bf-l { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 8px 0 8px; } .bf-l.p { color: var(--pos-ink); } .bf-l.n { color: var(--neg-ink); }
.bf-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* mood bar */
.bf-mbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--line); min-width: 40px; } .bf-mbar.sm { height: 8px; } .bf-mbar i { display: block; } .bf-mbar .p { background: var(--pos); } .bf-mbar .u { background: var(--neu); } .bf-mbar .n { background: var(--neg); }
.bf-mbar.is-few { opacity: .45; }
.bf-mk { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 6px; } .bf-mk .p { color: var(--pos-ink); } .bf-mk .n { color: var(--neg-ink); } .bf-mk span:last-child { margin-left: auto; }
/* parties */
.bf-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bf-party { position: relative; display: grid; gap: 12px; padding: 18px 18px 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.bf-party::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--bar, var(--pc)); }
.bf-party.is-ours { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.bf-party header { display: flex; gap: 10px; align-items: center; } .bf-party header > div { display: grid; } .bf-party header b { font-size: 17px; } .bf-party header small { font-size: 11.5px; color: var(--muted); }
.bf-pleader { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); max-width: 46%; text-align: right; }
.bf-pbig { display: flex; gap: 12px; align-items: center; } .bf-pbig b { font-size: 46px; font-weight: 500; letter-spacing: -.04em; line-height: 1; } .bf-pbig b i { font-style: normal; font-size: 22px; } .bf-pbig small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.bf-prow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 12.5px; } .bf-prow b { text-align: right; font-size: 13px; } .bf-prow b.muted { font-weight: 400; }
.bf-party footer { display: flex; gap: 12px; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); } .bf-party footer b { display: block; font-size: 16px; color: var(--text); font-weight: 600; }
.bf-grid { margin-top: 16px; overflow-x: auto; } .bf-grid table { border-collapse: separate; border-spacing: 6px; margin: 0 auto; }
.bf-grid th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 8px; } .bf-grid thead th { text-align: center; } .bf-grid thead th:first-child { text-align: left; font-weight: 500; }
.bf-grid th > span, .bf-grid th > .vz-logo { vertical-align: middle; } .bf-grid th span:not(.vz-logo) { margin-left: 6px; } .bf-grid tbody th { text-align: left; white-space: nowrap; }
.bf-grid td { width: 92px; height: 58px; text-align: center; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .bf-grid td.z { color: var(--line); }
.bf-dot { display: inline-grid; place-items: center; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; font-size: 11.5px; font-weight: 600; vertical-align: middle; }
.bf-dot.att { background: color-mix(in srgb, var(--neg) 70%, var(--surface)); color: var(--neg-ink); } .bf-dot.self { background: color-mix(in srgb, var(--pos) 70%, var(--surface)); color: var(--pos-ink); }
.bf-note .bf-dot { font-size: 0; }
/* hours */
.bf-hours svg { width: 100%; height: auto; display: block; } .bf-hours rect.p { fill: var(--accent); } .bf-hours rect.c { fill: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.bf-hours rect.f { fill: var(--pos); } .bf-hours rect.a { fill: var(--neg); } .bf-hours line.axis { stroke: var(--line); } .bf-hours text { font-size: 12px; fill: var(--muted); }
.bf-hours .peak line { stroke: var(--text); stroke-dasharray: 3 4; opacity: .5; } .bf-hours .peak text { font-size: 13px; font-weight: 600; fill: var(--text); }
.bf-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; } .bf-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bf-key .p { background: var(--accent); } .bf-key .c { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); } .bf-key .f { background: var(--pos); } .bf-key .a { background: var(--neg); } .bf-key small { margin-left: auto; }
/* lanes */
.bf-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bf-lane { --c: var(--pos); --ink: var(--pos-ink); padding: 22px; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--surface)), var(--surface) 320px); min-width: 0; }
.bf-lane.is-n { --c: var(--neg); --ink: var(--neg-ink); }
.bf-lane header { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .bf-lane header span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; background: color-mix(in srgb, var(--c) 42%, transparent); color: var(--ink); } .bf-lane h3 { margin: 0; font-size: 24px; color: var(--ink); }
.bf-lane ul, .bf-opp-pts { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 8px; }
.bf-lane li, .bf-opp-pts li { position: relative; padding: 10px 14px 10px 34px; border-radius: 14px; background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); font-size: 14px; line-height: 1.5; }
.bf-lane li::before, .bf-opp-pts li::before { content: ""; position: absolute; left: 14px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--accent)); }
.bf-opp-pts { --c: var(--accent); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.bf-posts { display: grid; gap: 10px; }
.bf-post { display: flex; gap: 12px; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; min-width: 0; }
.bf-post-b { display: grid; gap: 5px; min-width: 0; flex: 1; align-content: start; } .bf-post-h { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.bf-post-t { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bf-post-k { display: flex; gap: 12px; font-size: 12px; color: var(--muted); } .bf-post-k i { font-style: normal; display: inline-flex; gap: 4px; align-items: center; } .bf-post .nt-btn { justify-self: start; }
/* pictures */
.bf-pic { position: relative; flex: none; display: grid; place-items: center; width: 84px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--bg); color: var(--muted); }
.bf-pic.big { width: 100%; border-radius: 16px; } .bf-pic.wide { width: 110px; } .bf-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bf-pic > b { position: absolute; right: 8px; bottom: 8px; font-size: 10px; padding: 3px 7px; border-radius: 99px; background: rgb(0 0 0 / .55); color: #fff; }
.bf-noimg { background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--surface)); }
/* opposition */
.bf-oppl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.bf-oppc { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; overflow: hidden; }
.bf-oppc::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--bar, var(--pc)); }
.bf-oppc header { display: flex; gap: 12px; align-items: center; } .bf-oppc header div { display: grid; } .bf-oppc header b { font-size: 16px; } .bf-oppc header small { display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--muted); }
.bf-oppn { display: flex; gap: 22px; } .bf-oppn span { display: grid; font-size: 11.5px; color: var(--muted); } .bf-oppn b { font-size: 24px; font-weight: 500; color: var(--text); letter-spacing: -.02em; }
.bf-oppbest { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: var(--bg); margin-top: 4px; } .bf-oppbest .bf-pic { width: 54px; }
.bf-oppbest > span { font-size: 12px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bf-oppbest b { margin-left: 6px; color: var(--text); font-weight: 600; }
/* leaders at a glance */
.bf-lb { display: grid; gap: 6px; } .bf-lb-h, .bf-lb-r { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, 1.1fr)); gap: 14px; align-items: center; }
.bf-lb-h { font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 0 12px; }
.bf-lb-r { padding: 10px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; }
.bf-lb-r.is-ours { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .bf-lb-r.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.bf-lb-who { display: flex; gap: 10px; align-items: center; } .bf-lb-who > span { display: grid; } .bf-lb-who b { font-size: 14px; } .bf-lb-who small { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--muted); }
.bf-lb-bar { position: relative; display: block; height: 26px; border-radius: 9px; background: var(--bg); overflow: hidden; } .bf-lb-bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 45%, var(--surface)); border-radius: 9px; }
.bf-lb-bar b { position: relative; display: block; padding: 0 9px; font-size: 13px; line-height: 26px; font-weight: 600; }
.bf-lb-m { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: center; font-size: 13px; } .bf-lb-m b { text-align: right; }
/* own pages and posts */
.bf-plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bf-plat { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--c) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.bf-plat header { display: flex; gap: 8px; align-items: center; font-size: 14px; } .bf-plat header em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.bf-plat-k { display: flex; gap: 16px; font-size: 12px; color: var(--muted); } .bf-plat-k b { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--text); }
.bf-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bf-tile { display: grid; gap: 6px; align-content: start; padding: 8px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: color-mix(in srgb, var(--c) 8%, var(--surface)); color: inherit; text-decoration: none; }
.bf-tile-t { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bf-tile-k { display: flex; gap: 10px; align-items: center; font-size: 12.5px; } .bf-tile-k b { display: inline-flex; gap: 3px; align-items: center; font-weight: 600; }
/* arguments, platforms */
.bf-args { display: grid; gap: 11px; } .bf-args > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: baseline; } .bf-args span { font-size: 13.5px; grid-column: 1 / -1; }
.bf-args i { display: block; height: 11px; border-radius: 99px; background: var(--accent); opacity: .75; } .bf-args b { font-size: 16px; font-weight: 600; } .bf-args small { font-size: 11px; color: var(--muted); }
.bf-mixbar { display: flex; height: 18px; border-radius: 99px; overflow: hidden; gap: 2px; } .bf-mixbar i { display: block; }
.bf-mixk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.bf-mixk > div { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 12px; padding: 12px 14px; border-radius: 16px; border-left: 4px solid var(--c); background: var(--surface); font-size: 11.5px; color: var(--muted); }
.bf-mixk header { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text); } .bf-mixk header em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 15px; } .bf-mixk span b { display: block; font-size: 15px; color: var(--text); }
/* districts */
.bf-dist { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bf-map .vz-map { width: 100%; max-height: 420px; } .bf-map-load { font-size: 12px; color: var(--muted); padding: 30px; text-align: center; }
.bf-mapk { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 6px; } .bf-mapk i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bf-dlist { display: grid; gap: 8px; } .bf-dlist > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.bf-dlist span { display: grid; grid-row: span 2; } .bf-dlist span b { font-size: 13.5px; } .bf-dlist span small { font-size: 11px; color: var(--muted); }
.bf-dvol { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 60%, var(--surface)); } .bf-dlist em { font-style: normal; font-size: 11.5px; color: var(--muted); } .bf-dlist em.p { color: var(--pos-ink); } .bf-dlist em.n { color: var(--neg-ink); }
/* news */
.bf-newsw { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); gap: 18px; align-items: start; }
.bf-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bf-news.one { grid-template-columns: 1fr; }
.bf-story { display: flex; gap: 12px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); border-left: 5px solid var(--neu); background: var(--surface); color: inherit; text-decoration: none; }
.bf-story.p { border-left-color: var(--pos); } .bf-story.n { border-left-color: var(--neg); } .bf-story > span:last-child { display: grid; gap: 5px; align-content: start; min-width: 0; }
.bf-story em { font-style: normal; justify-self: start; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--bg); } .bf-story.p em { background: color-mix(in srgb, var(--pos) 30%, transparent); color: var(--pos-ink); } .bf-story.n em { background: color-mix(in srgb, var(--neg) 30%, transparent); color: var(--neg-ink); }
.bf-story b { font-size: 14px; font-weight: 600; line-height: 1.35; } .bf-story small { font-size: 11.5px; color: var(--muted); }
.bf-outlets { display: grid; gap: 8px; } .bf-outlets > div { display: grid; grid-template-columns: minmax(0, 1fr) 110px 30px; gap: 8px; align-items: center; font-size: 12.5px; } .bf-outlets b { text-align: right; }
.bf-ob { display: flex; height: 9px; border-radius: 99px; overflow: hidden; background: var(--bg); } .bf-ob i { display: block; } .bf-ob .p { background: var(--pos); } .bf-ob .u { background: var(--neu); } .bf-ob .n { background: var(--neg); }
/* watch, quotes, info */
.bf-watch { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.bf-watch li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-size: 14px; line-height: 1.5; }
.bf-watch li > b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 15px; }
.bf-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.bf-q { margin: 0 0 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--pos); } .bf-q.n { border-left-color: var(--neg); }
.bf-q p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; } .bf-q footer { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--muted); } .bf-q a { color: var(--accent-ink); }
.bf-split { display: grid; gap: 14px; }
.bf-info ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1100px) { .bf-hero { grid-template-columns: auto minmax(0, 1fr); } .bf-moodbox { grid-column: 1 / -1; } .bf-lb-h { display: none; } .bf-lb-r { grid-template-columns: 1fr 1fr; } .bf-lb-who { grid-column: 1 / -1; } }
@media (max-width: 860px) { .bf-hero { grid-template-columns: 1fr; } .bf-face { width: 120px; } .bf-two, .bf-lanes, .bf-dist, .bf-newsw, .bf-qs, .bf-opp-pts, .bf-news { grid-template-columns: 1fr; } .bf-prow { grid-template-columns: 100px minmax(0, 1fr) 40px; } }
/* paper and saved files: the landscape sheet at 1400 px; sections may break between their cards */
body.mb-export .bf .nt-btn, body.mb-export .bf-chips { display: none !important; }
body.mb-export .bf-hero { grid-template-columns: auto minmax(0, 1fr) auto; } body.mb-export .bf-moodbox { grid-column: auto; }
@media print {
  .bf-chips, .bf .nt-btn { display: none !important; }
  .bf-hero { grid-template-columns: auto minmax(0, 1fr) auto !important; } .bf-moodbox { grid-column: auto !important; }
  .bf-two, .bf-lanes, .bf-qs, .bf-opp-pts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .bf-dist { grid-template-columns: 1.1fr 1fr !important; } .bf-newsw { grid-template-columns: 2.2fr 1fr !important; }
  .bf-news { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .bf-news.one { grid-template-columns: 1fr !important; }
  .bf-lb-h { display: grid !important; } .bf-lb-r { grid-template-columns: minmax(200px, 1.4fr) repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, 1.1fr)) !important; } .bf-lb-who { grid-column: auto !important; }
  .bf-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .bf-strip { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .bf-hero, .bf-kpis, .bf-party, .bf-grid, .bf-hours, .bf-post, .bf-tile, .bf-story, .bf-oppc, .bf-lb-r, .bf-plat, .bf-lane li, .bf-opp-pts li, .bf-watch li, .bf-q, .bf-dlist > div, .bf-map, .bf-mixk > div { break-inside: avoid; }
  /* a section fits a landscape sheet (about 970 px of the 1400 px drawing), so it moves whole to the next sheet rather than
     leaving its heading behind; only a section taller than a sheet breaks, between its cards */
  .bf-sec, .bf-lanes, .bf-two, .bf-kpis { break-inside: avoid !important; page-break-inside: avoid !important; } .bf .mb2-end { break-before: avoid; }
  /* the brief is drawn a little wider on paper (1560 px at 68 %), so a sheet holds about 1080 px of it */
  .mb2.mb-land.bf { width: 1560px !important; zoom: .68; }
  .bf-sec > h3, .bf-lane h3 { break-after: avoid; } .bf-sec, .bf-kpi { background: #fff !important; } .bf a { color: inherit !important; text-decoration: none !important; }
}