/* Message & Method, calm design (pilot). Loaded last on pages with <body class="calm">, by calm.py.
   Principles: one light header with five items and a quiet section menu; plain title blocks instead of photo
   covers on tools; six text sizes; small capitals only for section labels; space instead of rules; ink, copper and
   neutrals for the interface, party colours only on data. */

body.calm {
  --t-display: clamp(2.1rem, 4.2vw, 3.1rem);
  --t-h2: clamp(1.45rem, 2.4vw, 1.85rem);
  --t-h3: 1.2rem;
  --t-body: 1.0rem;
  --t-small: .875rem;
  --t-label: .72rem;
  --gap: clamp(48px, 7vw, 88px);
  font-size: 18px;
}
body.calm::before { background: var(--bg); }

/* ---------- Header ---------- */
.mmh { background: var(--bg); border-bottom: 1px solid var(--hair); position: relative; z-index: 30; }
.mmh > .wrap { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.mmh-logo { display: flex; align-items: center; flex: none; }
.mmh-logo img { height: 26px; width: auto; display: block; }
.mmh-logo .on-dark { display: none; }
.mmh-nav { display: flex; gap: 26px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mmh-nav::-webkit-scrollbar { display: none; }
.mmh-nav a { font: 500 .92rem/1 var(--label); color: var(--muted); text-decoration: none; padding: 23px 0 21px; border-bottom: 2px solid transparent; white-space: nowrap; }
.mmh-nav a:hover { color: var(--heading); }
.mmh-nav a[aria-current] { color: var(--heading); border-bottom-color: var(--copper); }
.mmh-cta { flex: none; font: 600 .85rem/1 var(--label); color: var(--bg); background: var(--heading); text-decoration: none; padding: 10px 16px; border-radius: 999px; }
.mmh-cta:hover { background: var(--accent); color: #fff; }
.mmh-sub { border-top: 1px solid var(--hair); background: var(--bg); }
.mmh-sub .wrap { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.mmh-sub .wrap::-webkit-scrollbar { display: none; }
.mmh-sub a { font: 500 .84rem/1 var(--label); color: var(--muted); text-decoration: none; padding: 13px 0 12px; white-space: nowrap; }
.mmh-sub a:hover, .mmh-sub a[aria-current] { color: var(--heading); }
.mmh-sub a[aria-current] { font-weight: 600; }
@media (max-width: 640px) {
  .mmh > .wrap { gap: 16px; min-height: 56px; }
  .mmh-logo img { height: 22px; }
  .mmh-nav { gap: 18px; }
  .mmh-nav a { font-size: .86rem; padding: 20px 0 18px; }
  .mmh-nav a.opt { display: none; }
  .mmh-cta { padding: 9px 13px; font-size: .8rem; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mmh-logo .on-light { display: none; } :root:not([data-theme="light"]) .mmh-logo .on-dark { display: block; } }
:root[data-theme="dark"] .mmh-logo .on-light { display: none; }
:root[data-theme="dark"] .mmh-logo .on-dark { display: block; }
/* The old dark band header and phone menu are replaced */
.calm header.band, .calm .mm-menu { display: none !important; }

/* ---------- Title blocks: no photo covers, plain and short ---------- */
.calm .band.summary { background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--hair); }
.calm .band.summary img.cover, .calm .band.summary .credit, .calm .band.summary::before, .calm .band.summary::after { display: none !important; }
.calm .band.summary .wrap { min-height: 0 !important; padding-block: clamp(36px, 6vw, 64px) clamp(28px, 4vw, 44px); justify-content: flex-start; gap: 14px; }
.calm .band.summary .wrap > * { animation: none !important; }
.calm .band.summary .label { color: var(--accent); }
.calm .band.summary h1 { color: var(--heading); font-size: var(--t-display); line-height: 1.08; max-width: 26ch; }
.calm .band.summary .sub, .calm .band.summary p { color: var(--muted); font-size: 1.05rem; max-width: 62ch; }
.calm .band.summary .points { border-top: 0; padding-top: 6px; gap: 12px 40px; }
.calm .band.summary .points li { color: var(--fg); font-size: 1rem; }
.calm .band.summary .points strong { color: var(--heading); }
.calm .band.summary .edition-meta { color: var(--muted); font-size: var(--t-small); }
.calm .band.summary a.btn { background: var(--heading); color: var(--bg); }
.calm .band.summary .actions a.plain { color: var(--accent); }

/* ---------- Type: six sizes, one label style ---------- */
.calm section.block { padding-block: var(--gap) 0; border-bottom: 0; gap: 22px; }
.calm main > .wrap { padding-bottom: var(--gap); }
.calm .block-head { gap: 8px; }
.calm .block-head h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.01em; }
.calm .block-head p { font-size: var(--t-body); }
.calm h3 { font-size: var(--t-h3); }
.calm .label { font-size: var(--t-label); font-family: var(--label); font-style: normal; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.calm .label::before { display: none; }
/* Everything else that shouted in small capitals goes to sentence case */
.calm main :is(.k, .tag, .chip, .btn, .ctl, th, dt, .dvhead, .seg2 button, .subnav a, .zoom button, .kicker, .flag, .go, .rank, .stat .k, .badge, .cbar-scale span, .note, .ticks span, .netrow.head, .ind.head, .tile .go) {
  text-transform: none !important; letter-spacing: normal !important;
}
.calm main :is(.k, .stat .k, th, dt, .dvhead, .netrow.head, .ind.head) { font-family: var(--label); font-size: var(--t-small) !important; font-weight: 500 !important; color: var(--muted); }
.calm main :is(.chip, .btn, .ctl, .seg2 button, .zoom button, .go, .flag) { font-family: var(--label); font-size: var(--t-small) !important; font-weight: 600 !important; }

/* ---------- Space instead of lines ---------- */
.calm main :is(td, .prow, .tile, .ind, .netrow, .feature, .editions li, .stat, .type, .row, .flow, .seatcard th, .seatcard td) { border-bottom-color: transparent !important; }
.calm main thead th { border-bottom: 1px solid var(--line) !important; }
.calm main :is(.glance, .tiles, .types, .stats, .explore, .features) { border-top: 0 !important; }
.calm main .stats { border-bottom: 0 !important; padding-block: 8px; }
.calm main table td { padding-block: 9px; }
.calm main tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--panel) 45%, transparent); }

/* ---------- Buttons: one solid, one quiet ---------- */
.calm main a.btn, .calm main .ctl.primary { border-radius: 999px; padding: 11px 18px; background: var(--heading); color: var(--bg); border: 0; }
.calm main .chip, .calm main .ctl:not(.primary), .calm main .seg2 { border-radius: 999px; }
.calm main .seg2 { overflow: hidden; }
.calm main .seg2 button { padding: 9px 14px; }

/* ---------- Sign-up and footer ---------- */
.calm aside.signup { background: var(--panel); color: var(--fg); }
.calm aside.signup h2 { color: var(--heading); font-size: var(--t-h2); }
.calm aside.signup p { color: var(--muted); }
.calm aside.signup .label { color: var(--accent); }
.calm.tool aside.signup { display: none; }
.calm footer.band { background: var(--bg); color: var(--muted); border-top: 1px solid var(--hair); }
.calm footer.band .wrap { padding-block: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.calm footer.band img { display: none; }
.calm footer.band p { margin: 0; font: 500 var(--t-small)/1.5 var(--label); color: var(--muted); }
.calm footer.band a { color: var(--muted); }
.calm footer.band a:hover { color: var(--heading); }

/* ---------- Pilot page specifics ---------- */
/* Daily edition: the scoreboard keeps five columns (party, ads, change, spend, theme) */
.calm.edition #scoreboard :is(th, td):nth-child(5), .calm.edition #scoreboard :is(th, td):nth-child(6), .calm.edition #scoreboard :is(th, td):nth-child(7) { display: none; }
.calm.edition .jump { background: var(--bg); border-bottom: 1px solid var(--hair); }
.calm.edition .jump a.chip { border-radius: 999px; }
.calm.edition .card { box-shadow: none; }
.calm.edition .method { background: transparent; border-left: 2px solid var(--line); padding-left: 16px; }
/* MRP tracker: the page's own section bar becomes the quiet section menu style */
.calm .subnav { border-bottom: 1px solid var(--hair); }
.calm .subnav a { font: 500 .84rem/1 var(--label) !important; text-transform: none !important; letter-spacing: normal !important; padding: 13px 0 12px; }
.calm.tool .filters-hidden { display: none !important; }

/* ---------- Snap small text to two sizes ---------- */
body.calm { --t-small: .8rem; --t-label: .7rem; }
.calm main :is(.note, .quiet, small, .s, .d, .rk, .cap, .facts, .count, .tag, .badge, .open, figcaption, .sharekey, .legend, .legend2, .keynote, .status, .ticks, .cbar-scale, .credit, .sources, .edition-meta, .card dl, .card dd, .card dt, .stat .k, .who .note, .ttip, .tip, .kbd, .seatcard th, .seatcard td, .prow, .netrow, .flow, .dvrow, .brow, .ind, table, td, th, .chip, .btn, .ctl, .seg2 button, .zoom button, select, input) { font-size: var(--t-small) !important; }
.calm main :is(.kbd, .badge, .tag, .ticks span, .cbar-scale span) { font-size: var(--t-label) !important; }
.calm :is(a.open, .edition-meta, .method .label, a.btn) { text-transform: none !important; letter-spacing: normal !important; }
.calm .method .label { font-size: var(--t-small); }
/* Decorative photo breaks between sections go */
.calm .photo-break { display: none !important; }

/* ---------- Seat profile: its dark title band becomes a plain title block ---------- */
.calm .hero { background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--hair); }
.calm .hero .wrap { padding-block: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 40px); }
.calm .hero h1 { color: var(--heading); font-size: var(--t-display); }
.calm .hero .label { color: var(--accent); }
.calm .hero .facts, .calm .hero .mp .pp { color: var(--muted); }
.calm .hero .facts b, .calm .hero .mp .who { color: var(--heading); }
.calm .hero .k { color: var(--muted) !important; }
.calm .hero .mp img { background: var(--panel); }
.calm .finder { background: var(--bg); }
.calm .finder nav a { text-transform: none; letter-spacing: normal; font-size: .84rem; }
/* Seat map: its legend and panel lose the extra rules */
.calm .panel { border: 0; background: var(--panel); border-radius: 6px; }
.calm .mapbox, .calm .mixcard { border-radius: 6px; }
/* Reports keep their photo cover only on the long reads' first screen, smaller */
.calm.report .band.summary img.cover { display: none !important; }
/* Company home: hide its old sticky header if one is left */
header.top { display: none; }

/* ---------- Sharing (share.js) ---------- */
.sh-bar { display: flex; gap: 10px; margin-top: 6px; }
.sh-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 .84rem/1 var(--label); color: var(--heading); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; cursor: pointer; }
.sh-btn:hover { border-color: var(--heading); }
.sh-h { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle; opacity: .55; flex: none; }
.sh-h:hover, .sh-h:focus-visible { opacity: 1; background: var(--panel); color: var(--heading); }
.sh-menu { position: absolute; z-index: 100; min-width: 220px; max-width: 300px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .22); padding: 8px; display: grid; }
.sh-menu .sh-q { font: 500 .78rem/1.4 var(--label); color: var(--muted); margin: 4px 8px 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sh-menu a, .sh-menu button { font: 500 .9rem/1 var(--label); color: var(--heading); text-decoration: none; padding: 10px 8px; border-radius: 6px; background: transparent; border: 0; text-align: left; cursor: pointer; }
.sh-menu a:hover, .sh-menu button:hover, .sh-menu a:focus-visible, .sh-menu button:focus-visible { background: var(--panel); outline: none; }
.sh-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 16px); background: var(--heading); color: var(--bg); padding: 11px 16px; border-radius: 999px; font: 600 .82rem/1 var(--label); opacity: 0; transition: .2s; z-index: 120; }
.sh-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media print { .sh-bar, .sh-h, .sh-menu { display: none !important; } }

/* ---------- Tap targets: at least 44px tall in the header ---------- */
.mmh-sub a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.mmh-cta { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; box-sizing: border-box; }
@media (max-width: 640px) { .mmh-cta { min-height: 44px; padding-inline: 14px; } }

/* ---------- Tighter spacing (7 Nov 2026, at the user's request; agreed with the site session) ----------
   Less air between sections and in title blocks, so more of each page fits on screen. Overrides the values above. */
body.calm { --gap: clamp(32px, 4.5vw, 56px); }
.calm section.block { gap: 14px; }
.calm .band.summary .wrap { padding-block: clamp(24px, 4vw, 44px) clamp(20px, 3vw, 32px); }
.calm .hero .wrap { padding-block: clamp(24px, 4vw, 44px) clamp(20px, 3vw, 32px); }

/* ---------- Seat map: audience-mix card headings wrap on phones ---------- */
.calm .mixcard h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.calm .mixcard h3 small { white-space: normal; }
.calm .mixcard { min-width: 0; overflow-wrap: anywhere; }
/* The value column's "1,962 sectors" note sits under the percentage rather than beside it */
.calm .mrow .mv small { display: block; white-space: nowrap; }
.calm .mrow .mv { min-width: 0; text-align: right; }
@media (max-width: 480px) { .calm .mrow .mv small { white-space: normal; } }