/* The Morning Brief: Abdulrahman's daily check-up, on top of Glance */

@import url("/assets/fonts/fonts.css");

/* ---------- palette: dark (default) ---------- */
:root {
  --mb-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mb-serif: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mb-radius: 22px;
  --mb-card-radius: 16px;

  --mb-page: hsl(226 32% 7%);
  --mb-glow-1: hsl(32 90% 45% / 0.16);
  --mb-glow-2: hsl(268 70% 40% / 0.16);
  --mb-panel: hsl(226 28% 10.5%);
  --mb-panel-border: hsl(226 20% 18%);
  --mb-card: hsl(226 25% 13.5%);
  --mb-card-border: hsl(226 18% 21%);
  --mb-head: hsl(40 30% 97%);
  --mb-text: hsl(220 20% 90%);
  --mb-dim: hsl(220 12% 62%);
  --mb-chip-bg: hsl(226 30% 8% / 0.82);
  --mb-shadow: 0 14px 40px hsl(226 40% 3% / 0.5);
  --mb-tile: hsl(226 30% 12% / 0.7);
}

/* ---------- palette: light ---------- */
:root[data-scheme=light] {
  --mb-page: hsl(40 33% 96%);
  --mb-glow-1: hsl(32 95% 60% / 0.18);
  --mb-glow-2: hsl(268 80% 70% / 0.12);
  --mb-panel: hsl(0 0% 100%);
  --mb-panel-border: hsl(35 20% 86%);
  --mb-card: hsl(40 30% 98.5%);
  --mb-card-border: hsl(35 18% 85%);
  --mb-head: hsl(226 40% 12%);
  --mb-text: hsl(226 25% 18%);
  --mb-dim: hsl(226 10% 42%);
  --mb-chip-bg: hsl(0 0% 100% / 0.9);
  --mb-shadow: 0 10px 30px hsl(30 30% 40% / 0.12);
  --mb-tile: hsl(0 0% 100% / 0.75);
}

/* ---------- section identities ---------- */
.mb-sec-middle_east, .mb-k-middle_east {
  --accent: 30 92% 52%; --accent-2: 8 85% 55%;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.54 15H17a2 2 0 0 0-2 2v4.54'/><path d='M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17'/><path d='M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05'/><circle cx='12' cy='12' r='10'/></svg>");
}
.mb-sec-us_markets, .mb-k-us_markets {
  --accent: 152 65% 42%; --accent-2: 178 70% 38%;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5v4'/><rect width='4' height='6' x='7' y='9' rx='1'/><path d='M9 15v2'/><path d='M17 3v2'/><rect width='4' height='8' x='15' y='5' rx='1'/><path d='M17 13v3'/><path d='M3 3v18h18'/></svg>");
}
.mb-sec-ai, .mb-k-ai {
  --accent: 268 85% 62%; --accent-2: 300 80% 58%;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/><path d='M20 3v4'/><path d='M22 5h-4'/><path d='M4 17v2'/><path d='M5 18H3'/></svg>");
}
.mb-sec-trending, .mb-k-trending {
  --accent: 214 90% 56%; --accent-2: 240 75% 62%;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/><path d='M9 18c-4.51 2-5-2-7-2'/></svg>");
}
.mb-sec-liverpool, .mb-k-liverpool {
  --accent: 352 80% 50%; --accent-2: 12 85% 52%;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 7.5l4 2.9-1.5 4.6h-5L8 10.4z'/><path d='M12 7.5V2.2M16 10.4l5-1.6M14.5 15l3 4.3M9.5 15l-3 4.3M8 10.4L3 8.8'/></svg>");
}
.mb-sec-games, .mb-k-games {
  --accent: 188 85% 42%; --accent-2: 205 90% 52%;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='6' x2='10' y1='11' y2='11'/><line x1='8' x2='8' y1='9' y2='13'/><line x1='15' x2='15.01' y1='12' y2='12'/><line x1='18' x2='18.01' y1='10' y2='10'/><path d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/></svg>");
}
.mb-sec-social, .mb-k-social {
  --accent: 330 85% 56%; --accent-2: 25 95% 55%;
  --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/></svg>");
}

/* ---------- base ---------- */
body {
  font-family: var(--mb-sans);
  font-variant-ligatures: normal;
  font-size: 1.5rem;
  color: var(--mb-text);
  background:
    radial-gradient(1100px 520px at 5% -8%, var(--mb-glow-1), transparent 60%),
    radial-gradient(1000px 520px at 100% 0%, var(--mb-glow-2), transparent 60%),
    var(--mb-page);
  background-attachment: fixed;
}

.header-container .header {
  border: 1px solid var(--mb-panel-border);
  border-radius: 16px;
  background: var(--mb-panel);
}
.logo img { width: 3.4rem; height: 3.4rem; max-height: none; }
.nav-item { font-family: var(--mb-serif); font-size: 1.7rem; font-weight: 600; }
.theme-picker { transform: scale(1.15); }

.mb-ico {
  display: inline-block;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

.mb-ico-tile {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-2)));
  box-shadow: 0 6px 16px hsl(var(--accent) / 0.35);
}

.mb-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--mb-chip-bg);
  backdrop-filter: blur(6px);
  color: var(--mb-head);
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: uppercase;
}
.mb-chip-new { background: hsl(212 95% 50%); color: #fff; }
.mb-chip-upd { background: hsl(38 95% 50%); color: hsl(30 60% 10%); }
.mb-chip-sample { background: hsl(38 95% 50% / 0.2); color: hsl(32 90% 45%); }
.mb-chip-rank { background: hsl(var(--accent)); color: #fff; }
.mb-chip-deal { background: hsl(152 70% 38%); color: #fff; }
.mb-rel-official { background: hsl(152 62% 36%); color: #fff; }
.mb-rel-t1 { background: hsl(200 70% 40%); color: #fff; }
.mb-rel-t2 { background: hsl(38 85% 45%); color: #fff; }
.mb-rel-low { background: hsl(355 65% 45%); color: #fff; }

/* social platforms */
.mb-pf-x { --pf: hsl(0 0% 8%); --pf-glyph: "𝕏"; }
.mb-pf-tiktok { --pf: linear-gradient(135deg, #25f4ee, #000 45%, #fe2c55); --pf-glyph: "♪"; }
.mb-pf-instagram { --pf: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); --pf-glyph: "◎"; }
.mb-pf-youtube { --pf: #e62117; --pf-glyph: "▶"; }
.mb-pf-reddit { --pf: #ff4500; --pf-glyph: "r/"; }
.mb-chip.mb-pf { background: var(--pf); color: #fff; }
.mb-chip.mb-pf::before { content: var(--pf-glyph) " "; }
.mb-pf-dot {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pf, hsl(220 10% 50%));
  border: 2px solid var(--mb-card);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.mb-pf-dot::before { content: var(--pf-glyph, "•"); }

/* ---------- masthead ---------- */
.mb-masthead-widget .widget-content {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mb-mast {
  padding: 26px 30px 28px;
  border: 1px solid var(--mb-panel-border);
  border-radius: var(--mb-radius);
  background: var(--mb-panel);
  box-shadow: var(--mb-shadow);
}

.mb-mast-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--mb-head);
}

.mb-brand { display: flex; align-items: center; gap: 14px; }

.mb-mono {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f59e0b, #e11d48);
  color: #fff;
  font-family: var(--mb-serif);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mb-wordmark {
  color: var(--mb-head);
  font-family: var(--mb-serif);
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.mb-tagline {
  margin-top: 4px;
  color: var(--mb-dim);
  font-size: 0.95em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mb-mast-meta { text-align: right; }
.mb-date { color: var(--mb-head); font-family: var(--mb-serif); font-size: 1.9rem; font-weight: 600; }
.mb-updated { color: var(--mb-dim); font-size: 0.95em; }

.mb-greet {
  margin: 20px 0 16px;
  color: var(--mb-head);
  font-family: var(--mb-serif);
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.15;
}

/* top stories */
.mb-top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: clamp(340px, 34vw, 480px);
}

.mb-top-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: hsl(226 25% 14%);
}
.mb-top-lead { grid-row: span 2; }
.mb-top-card img, .mb-top-card .mb-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.mb-top-card:hover img { transform: scale(1.03); }
.mb-top-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, hsl(226 40% 5% / 0.92));
}
.mb-top-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px;
  color: #fff;
}
.mb-top-lead .mb-top-text { padding: 26px 28px; }
.mb-top-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-2)));
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mb-top-kicker .mb-ico { width: 16px; height: 16px; }
.mb-top-title {
  margin-top: 10px;
  font-family: var(--mb-serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.mb-top-lead .mb-top-title { font-size: clamp(2.4rem, 2.8vw, 3.4rem); font-weight: 800; }
.mb-top-sum {
  margin-top: 8px;
  max-width: 70ch;
  color: hsl(0 0% 100% / 0.85);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.mb-top-meta { margin-top: 8px; color: hsl(0 0% 100% / 0.7); font-size: 0.85em; }

/* section nav */
.mb-nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.mb-nav-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--mb-card-border);
  border-radius: 16px;
  background: var(--mb-tile);
  transition: border-color .15s, transform .15s;
}
.mb-nav-tile:hover { border-color: hsl(var(--accent)); transform: translateY(-2px); }
.mb-nav-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mb-nav-text b { color: var(--mb-head); font-weight: 700; }
.mb-nav-text small { color: hsl(var(--accent)); font-size: 0.85em; font-weight: 600; }

/* ---------- section panels ---------- */
.mb-section {
  position: relative;
  padding: 22px 24px 24px;
  border: 1px solid var(--mb-panel-border);
  border-radius: var(--mb-radius);
  background:
    linear-gradient(180deg, hsl(var(--accent) / 0.10), transparent 140px),
    var(--mb-panel);
  box-shadow: var(--mb-shadow);
}
.mb-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, hsl(var(--accent)), hsl(var(--accent-2)));
}
.widget.mb-section + .widget.mb-section { margin-top: 26px; }

.mb-section .widget-content,
.mb-section .widget-content:not(.widget-content-frameless) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mb-section .widget-header { padding: 0; margin-bottom: 18px; }
.mb-section .widget-header h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mb-section .widget-header h2::before {
  content: "";
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-2)));
  box-shadow: 0 6px 18px hsl(var(--accent) / 0.35);
}
.mb-section .widget-header h2::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  pointer-events: none;
}
.mb-section .widget-header h2,
.mb-section .widget-header h2 a,
.mb-section .widget-header .uppercase {
  color: var(--mb-head);
  font-family: var(--mb-serif);
  font-size: clamp(2.4rem, 2.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* two widgets shown as one panel (markets chart tiles + market news) */
.widget.mb-join-top {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 8px;
  box-shadow: none;
}
.widget.mb-section.mb-join-bottom,
.widget.mb-section + .widget.mb-section.mb-join-bottom {
  margin-top: 0;
  padding-top: 12px;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: var(--mb-panel);
}
.mb-join-bottom::before,
.mb-join-bottom .widget-header h2::before,
.mb-join-bottom .widget-header h2::after { display: none; }
.mb-join-bottom .widget-header h2,
.mb-join-bottom .widget-header h2 a {
  color: var(--mb-dim);
  font-family: var(--mb-sans);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mb-anchor { display: block; position: relative; top: -110px; visibility: hidden; }

/* what changed */
.mb-changed {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid hsl(var(--accent) / 0.4);
  border-left: 5px solid hsl(var(--accent));
  border-radius: 12px;
  background: hsl(var(--accent) / 0.08);
  cursor: pointer;
}
.mb-changed summary { display: flex; align-items: baseline; gap: 12px; list-style: none; }
.mb-changed summary::-webkit-details-marker { display: none; }
.mb-changed-label {
  flex-shrink: 0;
  color: hsl(var(--accent));
  font-size: 0.75em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mb-changed-text { min-width: 0; color: var(--mb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-changed[open] .mb-changed-text { white-space: normal; }

/* ---------- cards ---------- */
.mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: start;
  gap: 16px;
}

.mb-card {
  overflow: hidden;
  border: 1px solid var(--mb-card-border);
  border-radius: var(--mb-card-radius);
  background: var(--mb-card);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.mb-card:hover {
  border-color: hsl(var(--accent) / 0.7);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px hsl(var(--accent) / 0.18);
}
.mb-card[open] { border-color: hsl(var(--accent)); }
.mb-card summary { display: block; list-style: none; cursor: pointer; }
.mb-card summary::-webkit-details-marker { display: none; }

.mb-thumb, .mb-vthumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: hsl(226 22% 16%);
}
.mb-thumb img, .mb-vthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mb-ph {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-2)));
}
.mb-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(0 0% 100% / 0.9);
  -webkit-mask: var(--ico) center / 44px no-repeat;
  mask: var(--ico) center / 44px no-repeat;
}
.mb-ph[class*="mb-ph-"] { background: var(--pf); }
.mb-ph[class*="mb-ph-"]::after {
  content: var(--pf-glyph);
  display: grid;
  place-items: center;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: #fff;
  font-size: 46px;
  font-weight: 700;
}
.mb-ph-x { --pf: hsl(0 0% 8%); --pf-glyph: "𝕏"; }
.mb-ph-tiktok { --pf: linear-gradient(135deg, #25f4ee, #000 45%, #fe2c55); --pf-glyph: "♪"; }
.mb-ph-instagram { --pf: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); --pf-glyph: "◎"; }
.mb-ph-youtube { --pf: #e62117; --pf-glyph: "▶"; }
.mb-ph-reddit { --pf: #ff4500; --pf-glyph: "r/"; }

.mb-chips {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mb-voice-dots {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  background: var(--mb-chip-bg);
  color: var(--mb-head);
  font-size: 0.72em;
  font-weight: 700;
}
.mb-voice-dots .mb-pf-dot { width: 20px; height: 20px; margin-right: -5px; font-size: 10px; }
.mb-voice-dots span:last-child { margin-left: 9px; }

.mb-body { padding: 11px 13px 13px; }
.mb-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--mb-head);
  font-weight: 650;
  line-height: 1.3;
}
.mb-card[open] .mb-title { -webkit-line-clamp: unset; }
.mb-meta {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--mb-dim);
  font-size: 0.8em;
}
.mb-meta > * + *::before { content: "·"; margin-right: 8px; opacity: 0.6; }
.mb-stars { color: hsl(42 95% 50%); font-weight: 700; }
.mb-metric { color: hsl(var(--accent)); font-weight: 600; }

.mb-try {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent-2)));
  color: #fff !important;
  font-size: 0.85em;
  font-weight: 700;
}
.mb-try:hover { filter: brightness(1.1); }

.mb-more { padding: 0 13px 13px; color: var(--mb-text); font-size: 0.9em; line-height: 1.5; }
.mb-more p + p { margin-top: 6px; }
.mb-why b { color: hsl(var(--accent)); font-weight: 700; }

.mb-voices {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: hsl(var(--accent) / 0.07);
}
.mb-voices-label { margin-bottom: 6px; color: hsl(var(--accent)); font-size: 0.75em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mb-voice { display: flex; gap: 8px; align-items: flex-start; }
.mb-voice + .mb-voice { margin-top: 8px; }
.mb-voice b { color: var(--mb-head); }
.mb-voice a { color: hsl(var(--accent)); }
.mb-voice-metric { color: var(--mb-dim); font-size: 0.85em; }

.mb-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mb-sources a {
  padding: 3px 10px;
  border: 1px solid hsl(var(--accent) / 0.5);
  border-radius: 999px;
  color: hsl(var(--accent));
  font-size: 0.85em;
  font-weight: 600;
}
.mb-sources a:hover { background: hsl(var(--accent) / 0.12); }
.mb-sources a.mb-src-social { border-style: dashed; }
.mb-sources a.mb-src-official::after { content: " · official"; opacity: 0.7; }

.mb-empty {
  padding: 28px;
  border: 1px dashed var(--mb-card-border);
  border-radius: var(--mb-card-radius);
  color: var(--mb-dim);
  text-align: center;
}

/* ---------- watch row ---------- */
.mb-watch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
  color: var(--mb-head);
  font-family: var(--mb-serif);
  font-size: 1.15em;
  font-weight: 700;
}
.mb-watch-label::before {
  content: "";
  border-left: 11px solid hsl(0 85% 52%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.mb-watch {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 280px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.mb-video { scroll-snap-align: start; display: block; }
.mb-vthumb { border-radius: 14px; border: 1px solid var(--mb-card-border); }
.mb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: hsl(0 85% 50% / 0.92);
  box-shadow: 0 4px 14px hsl(0 0% 0% / 0.45);
  transition: transform .15s;
}
.mb-play::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 18px;
  border-left: 13px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.mb-video:hover .mb-play { transform: scale(1.1); }
.mb-vtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 8px;
  color: var(--mb-head);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.3;
}
.mb-vch { margin-top: 2px; color: var(--mb-dim); font-size: 0.8em; }

/* ---------- markets as chart tiles ---------- */
.widget-type-markets.mb-section .dynamic-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.widget-type-markets.mb-section .dynamic-columns > * {
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--mb-card-border);
  border-radius: var(--mb-card-radius);
  background: var(--mb-card);
}
.widget-type-markets.mb-section .dynamic-columns > *::before,
.widget-type-markets.mb-section .dynamic-columns > *::after { display: none; }
.widget-type-markets.mb-section .min-width-0 { flex: 1; }
.widget-type-markets.mb-section .min-width-0 > a { font-size: 0.8em; color: var(--mb-dim); }
.widget-type-markets.mb-section .min-width-0 > div { color: var(--mb-head); font-weight: 700; line-height: 1.25; white-space: normal; }
.widget-type-markets.mb-section a.market-chart { order: 3; width: 100%; }
.widget-type-markets.mb-section svg.market-chart { display: block; width: 100%; height: 60px; }
.widget-type-markets.mb-section polyline { stroke-width: 2.4px; }
.widget-type-markets.mb-section .dynamic-columns > *:has(.color-positive) polyline { stroke: var(--color-positive); }
.widget-type-markets.mb-section .dynamic-columns > *:has(.color-negative) polyline { stroke: var(--color-negative); }
.widget-type-markets.mb-section .market-values .size-h3 { font-weight: 800; }
.widget-type-markets.mb-section .market-values > div:last-child { color: var(--mb-text); }

/* ---------- light-mode touches ---------- */
:root[data-scheme=light] .mb-thumb,
:root[data-scheme=light] .mb-vthumb { background: hsl(35 20% 90%); }
:root[data-scheme=light] .mb-chip:not([class*="mb-chip-"]):not([class*="mb-rel-"]):not(.mb-pf) {
  border: 1px solid hsl(35 18% 80%);
}

/* ---------- tablet / phone ---------- */
@media (max-width: 1100px) {
  .mb-nav { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 1.45rem; }
  .mb-mast { padding: 18px 16px 20px; }
  .mb-mast-meta { text-align: left; }
  .mb-mono { width: 44px; height: 44px; font-size: 1.8rem; }
  .mb-top {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    height: auto;
  }
  .mb-top-card { height: 220px; }
  .mb-top-lead { grid-row: auto; height: 340px; }
  .mb-top-lead .mb-top-text { padding: 18px; }
  .mb-nav { grid-template-columns: repeat(2, 1fr); }
  .mb-section { padding: 16px 12px 18px; border-radius: 18px; }
  .mb-section .widget-header h2::before { width: 44px; height: 44px; }
  .mb-section .widget-header h2::after { left: 10px; width: 24px; height: 24px; }
  .mb-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .mb-card { scroll-snap-align: start; }
  .mb-card:hover { transform: none; }
  .mb-watch { grid-auto-columns: 72%; }
  .widget-type-markets.mb-section .dynamic-columns { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .widget-type-markets.mb-section .dynamic-columns > * { padding: 10px; }
}

/* ---------- theme switch: only Dark (default) and Light ---------- */
.theme-choices .theme-preset[data-key="default-dark"],
.theme-choices .theme-preset[data-key="default-light"] { display: none; }
.theme-choices { --presets-per-row: 2 !important; min-width: 190px; }
.theme-choices .theme-preset { height: 3.2rem; padding-inline: 1rem; }
.theme-choices .theme-preset[data-key="default"]::after,
.theme-choices .theme-preset[data-key="light"]::after {
  margin-left: 6px;
  font-family: var(--mb-sans);
  font-size: 1.3rem;
  font-weight: 700;
}
.theme-choices .theme-preset[data-key="default"]::after { content: "☾ Dark"; color: #fff; }
.theme-choices .theme-preset[data-key="light"]::after { content: "☀ Light"; color: hsl(226 40% 12%); }
.current-theme-preview .theme-preset::after { content: "Theme"; margin-left: 6px; font-family: var(--mb-sans); font-size: 1.2rem; font-weight: 700; color: var(--mb-head); }
:root[data-scheme=light] .current-theme-preview .theme-preset::after { color: hsl(226 40% 12%); }
:root:not([data-scheme=light]) .current-theme-preview .theme-preset::after { color: #fff; }

.mb-chip.mb-pf-x { font-size: 0; padding-inline: 8px; }
.mb-chip.mb-pf-x::before { content: "𝕏"; font-size: 11px; }

/* content-warning sections (graphic, adult_trending): cards stay blurred until tapped open */
.mb-cw .widget-content::before{content:"content warning: tap a card to reveal it";display:block;margin:0 0 10px;padding:8px 12px;border-radius:8px;background:rgba(220,60,60,.15);color:#f3b0b0;font-size:.85em;font-weight:600}
.mb-cw .mb-card:not([open]) > summary{filter:blur(14px);transition:filter .2s}
.mb-cw .mb-card:not([open]) > summary:hover{filter:blur(10px)}
.mb-cw .mb-card[open] > summary{filter:none}
.mb-cw .mb-thumb img{object-fit:contain;background:#fff}